added screen reader app

kvn8888 · Aug 5, 2024 · ca38b96 · ca38b96
2 parents b511775 + 30dea20
commit ca38b96
Show file tree

Hide file tree

Showing 11 changed files with 394 additions and 24 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/example.txt b/example.txt
diff --git a/experimental/chapter_3_survival_concepts.html b/experimental/chapter_3_survival_concepts.html
diff --git a/experimental/chat.html b/experimental/chat.html
diff --git a/experimental/element_positions.css b/experimental/element_positions.css
@@ -81,7 +81,7 @@ button {
     max-width: 200px;
     /* text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.2); */
     box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
-    font-size: 14px;
+    font-size: 15px;
 
     /* animation */
     transition: background-color 0.2s ease-out, color 0.5s ease-in;
@@ -96,9 +96,9 @@ button:hover{
     transform: scale(1.05, 1.05); */
 }
 button:active {
-    font-size: 12px;
-    width: 140px;
-    height: 28px;
+    font-size: 14px;
+    width: 145px;
+    height: 29px;
 }
 
 @keyframes changeColors {

diff --git a/experimental/reader.html b/experimental/reader.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Text to Screen</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f0f0f0;
+        }
+        .container {
+            text-align: center;
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        input[type="text"] {
+            width: 80%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            background-color: #007BFF;
+            color: white;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        .output {
+            margin-top: 20px;
+            font-size: 18px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Text to Screen</h1>
+        <input type="text" id="textbox" placeholder="Enter your text here">
+        <button onclick="displayText()">Submit</button>
+        <div class="output" id="output"></div>
+    </div>
+
+    <script>
+        function displayText() {
+            var text = document.getElementById('textbox').value;
+            var outputDiv = document.getElementById('output');
+            outputDiv.textContent = text;
+        }
+    </script>
+</body>
+</html>
diff --git a/experimental/spinner.css b/experimental/spinner.css
@@ -0,0 +1,169 @@
+/* .spinner {
+    border: 3px solid rgba(108, 108, 108, 0.1);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border-left-color: rgb(158, 158, 158);
+    animation: spin 1.5s linear infinite;
+} */
+
+body {
+    overscroll-behavior: none;
+    touch-action: manipulation;
+}
+
+h3 {
+    font-weight: 500;
+    font-size: 1.2rem;
+    color: rgb(80, 80, 80);
+    margin: 20;
+    padding: 0;
+}
+
+/* #dashlength, #gaplength {
+    padding-top: 15px;
+    padding-bottom: 15px;
+} */
+
+div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+button {
+    margin-left: 10px;
+}
+
+#gaplengthValue {
+    margin-left: 10px;
+}
+
+#dashlengthValue {
+    margin-left: 10px;
+}
+
+.spinner2 {
+    /* animation: rotate 2s linear infinite; */
+    z-index: 2;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -25px 0 0 -25px;
+    width: 50px;
+    height: 50px;
+}
+
+.spinner2 .path {
+    stroke:rgb(80, 80, 80);
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out 1;
+}
+
+.static {
+    z-index: 1;
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    margin: -15px 0 0 -15px;
+    width: 110px;
+    height: 110px;
+    animation: rotate 2s linear infinite;
+}
+
+.static circle {
+    fill: transparent;
+    /* cx: 150;
+    cy: 150;
+    r: 50; */
+
+    stroke-dasharray: 50, 250; /* spinning */
+
+    /* stroke-dasharray: 50, 0; uponCompletion */
+
+    stroke: rgb(0, 0, 0);
+    stroke-width: 4;
+    stroke-linecap: round;
+
+    /* animation: uponCompletion 1.5s linear 1;*/
+}
+
+#checkmark {
+    position: absolute;
+    top: 20%;
+    left: 20%;
+
+    stroke-dasharray: 50;
+    stroke-dashoffset: 50;
+    animation: draw 2s forwards;
+}
+
+/* Define the gap variable */
+:root {
+    --gap: 100;
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.25;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.25;
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, var(--gap);
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 50, var(--gap);
+        /* stroke-dashoffset: -35; */
+    }
+    100% {
+        stroke-dasharray: 180, var(--gap);
+        /* stroke-dashoffset: -124; */
+    }
+}
+
+@keyframes uponCompletion {
+    0% {
+        stroke-dasharray: 50, 250;
+    }
+    50% {
+        stroke-dasharray: 50, 50;
+        stroke-dashoffset: -100;
+    }
+    100% {
+        stroke-dasharray: 50, 0;
+        stroke-dashoffset: -200;
+    }
+}
+
+@keyframes disappear {
+    0% {
+        opacity: 1;
+    }
+    80% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes draw {
+    to {
+        stroke-dashoffset: 0;
+    }
+}
diff --git a/experimental/spinner.html b/experimental/spinner.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Spinner</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <meta name="author" content="Kevin Chen">
+        <meta name="description" content="A spinner">
+        <meta name="keywords" content="spinner">
+        <link rel="icon" href="favicon.ico">
+        <link rel="stylesheet" href="spinner.css">
+        <script>
+
+            //TODO: disable rotation with disable/enable rotation button
+            //TODO: button that enables/disables pulse animation
+
+            function playAnimation(elementClass) {
+                var element = document.querySelector(elementClass);
+                var speed = document.querySelector('#speed').value
+                element.style.strokeDasharray = "50, 0"
+                element.style.animation = 'uponCompletion ' + speed + 's cubic-bezier(0.16, 1, 0.3, 1) 1, disappear '+ speed +'s cubic-bezier(0,.68,.29,1) 1';
+                element.style.opacity = "0";
+            }
+
+            function resetSpinner(elementClass) {
+                // var element = document.querySelector(elementClass);
+                // // var speed = document.querySelector('#speed').value; // Get the speed from the input
+                // // var animationString = 'uponCompletion ' + speed + 's cubic-bezier(0.16, 1, 0.3, 1) 1, disappear '+ speed +'s cubic-bezier(0,.68,.29,1) 1'; // Use the correct @keyframes name here
+
+                // var newElement = element.cloneNode(true); // Clone the element
+                // // newElement.style.animation = animationString; // Apply the new animation settings
+                // element.style.animation = 'none';
+                // element.style.opacity = "1";
+                // element.style.strokeDasharray = "50, 250";
+
+                // element.parentNode.replaceChild(newElement, element); // Replace the old element with the clone
+                // newElement.classList.add(toggleClass); // Add the toggleClass if necessary
+
+
+
+                //copilot
+                var element = document.querySelector(elementClass);
+                var speed = document.querySelector('#speed').value; // Get the speed from the input
+
+                element.style.animation = 'none'; // Reset the animation
+                element.style.opacity = "1"; // Reset the opacity
+                element.style.strokeDasharray = "50, 250"; // Reset the stroke dash array
+
+                // Trigger a reflow to apply the style changes immediately
+                element.offsetHeight;
+
+                // element.style.animation = 'none'; // Apply the animation settings
+            }
+
+            window.onload = function() {
+                var playButton = document.querySelector('.play');
+                var resetButton = document.querySelector('.reset')
+                var dashlengthSlider = document.querySelector('#dashlength');
+                var gaplengthSlider = document.querySelector('#gaplength');
+                var completionButton = document.querySelector('#Complete');
+
+                playButton.addEventListener('click', function() {
+                    playAnimation('.static circle');
+                });
+
+                resetButton.addEventListener('click', function() {
+                    resetSpinner('.static circle');
+                })
+
+                dashlengthSlider.addEventListener('input', function() {
+                    var dashlength = document.querySelector('#dashlength').value;
+                    var staticCircle = document.querySelector('.static circle');
+                    var staticCircleGap = document.querySelector('#gaplength').value;
+
+                    staticCircle.style.strokeDasharray = dashlength + ' ' + staticCircleGap;
+
+                    var dashlengthValue = document.querySelector('#dashlengthValue');
+                    dashlengthValue.textContent = 'Current value: ' + dashlength;
+                })
+
+                gaplengthSlider.addEventListener('input', function() {
+                    var gaplength = document.querySelector('#gaplength').value;
+                    var staticCircle = document.querySelector('.static circle');
+                    var staticCircleDash = document.querySelector('#dashlength').value;
+
+                    staticCircle.style.strokeDasharray = staticCircleDash + ' ' + gaplength;
+
+                    var gaplengthValue = document.querySelector('#gaplengthValue');
+                    gaplengthValue.textContent = 'Current value: ' + gaplength;
+                })
+
+                // completionButton.addEventListener('click', function() {
+                //     var staticCircle = document.querySelector('.static circle');
+                //     staticCircle.style.strokeDasharray = "50, 0"
+                //     staticCircle.style.animation = "uponCompletion 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1, disappear 1.5s cubic-bezier(0,.68,.29,1) 1";
+                //     staticCircle.style.opacity = "0";
+                // })
+
+            };
+        </script>
+    </head>
+    <body>
+        <!-- <div class="spinner"></div> -->
+        <!-- <svg class="spinner2" viewBox="0 0 50 50">
+            <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="2"></circle>
+        </svg> -->
+        <h1>Custom Spinner Animation</h1>
+        <label for="dashlengthSlider">Dash Length:</label>
+        <input type="range" id="dashlength" value="50" max="250">
+        <p id="dashlengthValue">Current dashlength value: 50</p>
+        <label for="gaplengthSlider">GapLength:</label>
+        <input type="range" id="gaplength" value="250" max="300">
+        <p id="gaplengthValue">Current gaplength value: 250</p>
+        <label for="speed">Speed:</label>
+        <input type="text" id="speed" value="1.5">
+        <button class="play">Play completion animation</button>
+        <button class="reset">reset</button>
+
+        <div>
+            <!-- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+                <polyline id="checkmark" points="10,20 20,30 40,10" stroke="black" stroke-width="4" fill="none" />
+            </svg> -->
+            <svg class = "static">
+                <circle cx="55" cy="55" r="50"/>
+            </svg>
+        </div>
+        <!-- <button id="Complete">Complete</button> -->
+
+    </body>
+</html>