Initial WordFlasher example with Ashrei

LeighFinegold · Jun 7, 2024 · 1a2f824 · 1a2f824
commit 1a2f824
Showing 1 changed file with 109 additions and 0 deletions.
diff --git a/WordFlasher.html b/WordFlasher.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Word Flasher</title>
+    <style>
+        body {
+            margin: 0;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .flash {
+            position: absolute;
+            font-size: 32pt;
+            opacity: 0; /* Initially hide the flash areas */
+        }
+
+        #overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 999;
+            display: none; /* Initially hide the overlay */
+        }
+
+        #overlay form {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        }
+    </style>
+</head>
+<body>
+<div id="flashArea" class="flash"></div>
+<div id="overlay">
+    <form id="settingsForm">
+        <label for="speed">Speed (seconds):</label>
+        <input type="number" id="speed" name="speed" min="0.1" step="0.1" value="0.5"><br>
+        <label for="interval">Interval (seconds):</label>
+        <input type="number" id="interval" name="interval" min="0.1" step="0.1" value="1"><br>
+        <button type="submit">Apply</button>
+    </form>
+</div>
+
+<script>
+    var words = [
+        "אַשְׁרֵי",
+        "יוֹשְׁבֵי",
+        "בֵיתֶךָ",
+        "עוֹד",
+        "יְהַלְלוּךָ",
+        "סֶּלָה",
+        "אַשְׁרֵי",
+        "הָעָם",
+        "שֶׁכָּכָה",
+        "לוֹ",
+        "אַשְׁרֵי",
+        "הָעָם",
+        "שֶׁיְּהוָֹה",
+        "אֱלֹהָיו"
+    ];
+
+    var wordsInterval;
+    var holdInterval;
+
+    // Function to flash words with randomized selection
+    function flashWords(speed, interval) {
+        var area = document.getElementById("flashArea");
+        var index;
+
+        clearInterval(wordsInterval); // Clear previous interval
+        clearInterval(holdInterval); // Clear previous interval
+
+        wordsInterval = setInterval(function() {
+            index = Math.floor(Math.random() * words.length); // Random index
+            area.textContent = words[index]; // Display the word
+            area.style.opacity = 1; // Show the word
+            holdInterval = setTimeout(function() {
+                area.style.opacity = 0; // Hide the word after holding time
+            }, speed * 1000);
+        }, (interval + speed) * 1000); // Flashing interval
+    }
+
+    // Show overlay when the page is loaded
+    window.onload = function() {
+        document.getElementById("overlay").style.display = "flex";
+        // Apply settings when the form is submitted
+        document.getElementById("settingsForm").addEventListener("submit", function(event) {
+            event.preventDefault(); // Prevent default form submission
+            var speed = parseFloat(document.getElementById("speed").value);
+            var interval = parseFloat(document.getElementById("interval").value);
+            flashWords(speed, interval);
+            document.getElementById("overlay").style.display = "none"; // Hide the overlay
+        });
+    };
+</script>
+</body>
+</html>