From 4623e014a5f7f476eb3e3dedfa40583165779c29 Mon Sep 17 00:00:00 2001
From: Steve Dogiakos <steve@dogiakos>
Date: Tue, 1 Apr 2025 18:33:06 -0600
Subject: [PATCH] Add scrolling marquee for guest entries

- Update index.html to include a fixed, horizontally scrolling marquee at the bottom.
- Use CSS keyframes to animate guest entries, showing first name and location.
- Enhance user interface by providing a dynamic display of entries.
---
 templates/index.html | 94 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 72 insertions(+), 22 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 93d598a..6c10d9d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,36 +3,86 @@
 
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Museum Visitor Guestbook</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        /* Scrolling marquee styles */
+        .scrolling-wrapper {
+            overflow: hidden;
+            white-space: nowrap;
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+            background-color: #f8f9fa;
+            border-top: 1px solid #dee2e6;
+        }
+
+        .scrolling-content {
+            display: inline-block;
+            padding: 10px;
+            /* Adjust the animation duration to control speed */
+            animation: scroll-left 20s linear infinite;
+        }
+
+        @keyframes scroll-left {
+            0% {
+                transform: translateX(100%);
+            }
+
+            100% {
+                transform: translateX(-100%);
+            }
+        }
+    </style>
 </head>
 
 <body>
-    <h1>Museum Visitor Guestbook</h1>
-    {% if error %}
-    <div style="color: red;">{{ error }}</div>
-    {% endif %}
-    <form method="post" action="/">
-        <label for="first_name">First Name(s):</label><br>
-        <input type="text" id="first_name" name="first_name" required><br><br>
+    <div class="container mt-5 mb-5">
+        <h1 class="mb-4">Museum Visitor Guestbook</h1>
 
-        <label for="last_name">Last Name:</label><br>
-        <input type="text" id="last_name" name="last_name" required><br><br>
+        {% if error %}
+        <div class="alert alert-danger" role="alert">
+            {{ error }}
+        </div>
+        {% endif %}
 
-        <label for="email">Email:</label><br>
-        <input type="email" id="email" name="email" required><br><br>
+        <form method="post" action="/" class="mb-4">
+            <div class="mb-3">
+                <label for="first_name" class="form-label">First Name(s):</label>
+                <input type="text" class="form-control" id="first_name" name="first_name" required>
+            </div>
+            <div class="mb-3">
+                <label for="last_name" class="form-label">Last Name:</label>
+                <input type="text" class="form-control" id="last_name" name="last_name" required>
+            </div>
+            <div class="mb-3">
+                <label for="email" class="form-label">Email:</label>
+                <input type="email" class="form-control" id="email" name="email" required>
+            </div>
+            <div class="mb-3">
+                <label for="location" class="form-label">Location:</label>
+                <input type="text" class="form-control" id="location" name="location" required>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+    </div>
 
-        <label for="location">Location:</label><br>
-        <input type="text" id="location" name="location" required><br><br>
+    <!-- Scrolling Guest Entries at the Bottom -->
+    <div class="scrolling-wrapper">
+        <div class="scrolling-content">
+            {% for guest in guests %}
+            <span class="me-4">
+                <strong>{{ guest[0] }}</strong> from {{ guest[1] }}
+            </span>
+            {% endfor %}
+        </div>
+    </div>
 
-        <input type="submit" value="Submit">
-    </form>
-    <hr>
-    <h2>Guest Entries</h2>
-    <ul>
-        {% for guest in guests %}
-        <li><strong>{{ guest[0] }}</strong> from {{ guest[1] }}</li>
-        {% endfor %}
-    </ul>
+    <!-- Bootstrap JS (optional) -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
 </body>
 
 </html>
\ No newline at end of file
