backplaces/luddite.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) {
                    var textBox = document.createElement("div");
                    textBox.className = "text text-" + index;
                    textBox.textContent = message;
                    textBoxContainer.appendChild(textBox);
                });

                // 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>
a bunch of stuff idk 1 year ago			`<!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">`
things 12 months ago			`<a href="index.html" target="_blank">`
a bunch of stuff idk 1 year ago			`<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) {`
			`var textBox = document.createElement("div");`
things 12 months ago			`textBox.className = "text text-" + index;`
a bunch of stuff idk 1 year ago			`textBox.textContent = message;`
			`textBoxContainer.appendChild(textBox);`
			`});`

			`// 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>`