You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
4.0 KiB
HTML
93 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
<meta http-equiv="Content-Style-Type" content="text/css" />
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="css/style_luddite.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div>
|
|
<h1>
|
|
<div id="imageContainer" class="image-container">
|
|
<a href="index.html" target="_blank">
|
|
<img id="hut" src="images/hut.png" alt="hut">
|
|
</a>
|
|
</div>
|
|
</h1>
|
|
</div>
|
|
|
|
<script>
|
|
function displayText(messages, container) {
|
|
var textBoxContainer = container.querySelector('.box-container');
|
|
if (!textBoxContainer) {
|
|
textBoxContainer = document.createElement("div");
|
|
textBoxContainer.className = "box-container";
|
|
container.appendChild(textBoxContainer);
|
|
|
|
// Create a separate text box for each sentence AAAAA
|
|
messages.forEach(function(message, index){
|
|
(function(message){
|
|
setTimeout(function(){
|
|
console.log(message);
|
|
var textBox = document.createElement("div");
|
|
textBox.className = "text text-" + index;
|
|
textBox.textContent = message;
|
|
textBoxContainer.appendChild(textBox);
|
|
}, 1000 * (index + 1));
|
|
})(message);
|
|
});
|
|
|
|
|
|
|
|
|
|
// Add the 'last-clicked' class to the container
|
|
container.classList.add('last-clicked');
|
|
} else {
|
|
// If the text is already displayed, remove it
|
|
textBoxContainer.remove();
|
|
container.classList.remove('last-clicked');
|
|
}
|
|
}
|
|
|
|
function createImageAndLink(src, messages, index) {
|
|
// Create image element
|
|
var img = document.createElement("img");
|
|
img.src = src;
|
|
img.width = 240;
|
|
img.height = 240;
|
|
|
|
// Create link element
|
|
var link = document.createElement("div");
|
|
link.className = "link link-" + index;
|
|
link.appendChild(img);
|
|
|
|
// Append the link to the container
|
|
var container = document.getElementById("imageContainer");
|
|
container.appendChild(link);
|
|
|
|
// Add click event to display or hide text
|
|
link.addEventListener("click", function () {
|
|
displayText(messages, link);
|
|
});
|
|
}
|
|
|
|
// Create images with links and text boxes
|
|
createImageAndLink("images/act1.png", ["This is my open letter: Has a machine ever helped you be human? If you took a picture of your guts and posted it online, what would people say? Do you think anybody would hold them?"], 1);
|
|
createImageAndLink("images/act2.png", ["They wouldn't. I got rid of my smartphone and television seven years ago and became a complete luddite. I kept my Linux Desktop PC to access the ar15.com forum, to sell and buy rifles. Nobody else comes this far into the woods. Machines are no vessel for love and I am much too old to believe in angels. My roots run deep in the forest soil, deeper than cables can. There is no emotional support to be found online, sorry to say.","lud7"], 2);
|
|
createImageAndLink("images/act3.png", [
|
|
"My line is always open to all of you at any time",
|
|
"IM me and I will call you to lend you an ear and a shoulder. Together, we can overcome a lot of difficulties and hard times.",
|
|
"We have done it before and we can continue to do it. Do not despair and lose hope.",
|
|
"We have had attempts in the past. Thank God, both were dealt with successfully. I am sure tc69 would get involved again to avert a tragedy like he did before.",
|
|
"I'm IM-ing you my contact info. If someone's in my area that needs help, let me know."
|
|
], 3);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|