From 056176ba864b0ceb164b581db7eb682f8823d7bb Mon Sep 17 00:00:00 2001
From: lenape <jacquesingram.online>
Date: Tue, 10 Jun 2025 00:21:07 +0000
Subject: [PATCH] index.html update

---
 compose.yaml |   2 +-
 index.html   | 101 +++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 90 insertions(+), 13 deletions(-)
diff --git a/compose.yaml b/compose.yaml
index f3e5bde..d3c1eb9 100644
--- a/compose.yaml
+++ b/compose.yaml
@@ -16,4 +16,4 @@ services:
 
         ports:
 
-            - "8080:80"
\ No newline at end of file
+            - "8082:80"
diff --git a/index.html b/index.html
index e688c9d..086c228 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,101 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hello World from Lenape</title>
+    <!-- Bootswatch Theme CSS -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.0/darkly/bootstrap.min.css" rel="stylesheet">
     <style>
-        body {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            background-color: #f0f0f0;
-        }
-        h1 {
+        .custom-heading {
             font-family: cursive;
             font-size: 3em;
-            color: #333;
+            color: #fff;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
         }
+        
+        .letter {
+            display: inline-block;
+            opacity: 0;
+            transform: translateY(-50px);
+            animation: fallInLoop 0.6s ease-out infinite;
+        }
+        
+        @keyframes fallInLoop {
+            0% {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            12% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+            88% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+            100% {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+        }
+        
+        /* 5-second loop with staggered delays */
+        .letter:nth-child(1) { animation-delay: 0.1s; animation-duration: 5s; }
+        .letter:nth-child(2) { animation-delay: 0.2s; animation-duration: 5s; }
+        .letter:nth-child(3) { animation-delay: 0.3s; animation-duration: 5s; }
+        .letter:nth-child(4) { animation-delay: 0.4s; animation-duration: 5s; }
+        .letter:nth-child(5) { animation-delay: 0.5s; animation-duration: 5s; }
+        .letter:nth-child(6) { animation-delay: 0.6s; animation-duration: 5s; }
+        .letter:nth-child(7) { animation-delay: 0.7s; animation-duration: 5s; }
+        .letter:nth-child(8) { animation-delay: 0.8s; animation-duration: 5s; }
+        .letter:nth-child(9) { animation-delay: 0.9s; animation-duration: 5s; }
+        .letter:nth-child(10) { animation-delay: 1.0s; animation-duration: 5s; }
+        .letter:nth-child(11) { animation-delay: 1.1s; animation-duration: 5s; }
+        .letter:nth-child(12) { animation-delay: 1.2s; animation-duration: 5s; }
+        .letter:nth-child(13) { animation-delay: 1.3s; animation-duration: 5s; }
+        .letter:nth-child(14) { animation-delay: 1.4s; animation-duration: 5s; }
+        .letter:nth-child(15) { animation-delay: 1.5s; animation-duration: 5s; }
+        .letter:nth-child(16) { animation-delay: 1.6s; animation-duration: 5s; }
+        .letter:nth-child(17) { animation-delay: 1.7s; animation-duration: 5s; }
+        .letter:nth-child(18) { animation-delay: 1.8s; animation-duration: 5s; }
+        .letter:nth-child(19) { animation-delay: 1.9s; animation-duration: 5s; }
+        .letter:nth-child(20) { animation-delay: 2.0s; animation-duration: 5s; }
+        .letter:nth-child(21) { animation-delay: 2.1s; animation-duration: 5s; }
+        .letter:nth-child(22) { animation-delay: 2.2s; animation-duration: 5s; }
+        .letter:nth-child(23) { animation-delay: 2.3s; animation-duration: 5s; }
+        .letter:nth-child(24) { animation-delay: 2.4s; animation-duration: 5s; }
     </style>
 </head>
 <body>
-    <h1>Hello World from Lenape</h1>
+    <div class="container-fluid vh-100">
+        <div class="row h-100">
+            <div class="col-12 d-flex justify-content-center align-items-center">
+                <h1 class="custom-heading text-center" id="animated-text">Hello World from Lenape</h1>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    
+    <script>
+        // Split text into individual letters and wrap each in a span
+        document.addEventListener('DOMContentLoaded', function() {
+            const textElement = document.getElementById('animated-text');
+            const text = textElement.textContent;
+            
+            // Clear the original text
+            textElement.innerHTML = '';
+            
+            // Create spans for each character
+            for (let i = 0; i < text.length; i++) {
+                const span = document.createElement('span');
+                span.className = 'letter';
+                span.textContent = text[i] === ' ' ? '\u00A0' : text[i]; // Use non-breaking space for spaces
+                textElement.appendChild(span);
+            }
+        });
+    </script>
 </body>
 </html>
