From 8a031e04ed7135650654330422818be3cc4dc272 Mon Sep 17 00:00:00 2001
From: Jack H <jackh.224307@gmail.com>
Date: Fri, 15 Nov 2024 12:38:08 -0600
Subject: [PATCH] Update maze_solution.html

---
 templates/maze_solution.html | 98 ++++++++++++++++++++++--------------
 1 file changed, 60 insertions(+), 38 deletions(-)

diff --git a/templates/maze_solution.html b/templates/maze_solution.html
index 47986ce..6218827 100644
--- a/templates/maze_solution.html
+++ b/templates/maze_solution.html
@@ -5,12 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Maze Solver</title>
     <style>
-        body {
-            background-color: #121212;
-            color: #ffffff;
-            font-family: 'Arial', sans-serif;
+        /* General Reset */
+        * {
             margin: 0;
             padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background: linear-gradient(to bottom right, #1e1e2f, #121212);
+            color: #ffffff;
+            font-family: 'Roboto', sans-serif;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -19,28 +24,38 @@
         }
 
         h1 {
+            font-size: 2.5em;
+            margin-bottom: 20px;
+            color: #00e5ff;
+            text-shadow: 0 4px 10px rgba(0, 229, 255, 0.6);
+            text-transform: uppercase;
+            letter-spacing: 2px;
             text-align: center;
-            font-size: 2em;
-            margin-top: 20px;
-            color: #e0e0e0;
-            font-weight: bold;
         }
 
         canvas {
-            border: 2px solid #00bcd4;
-            border-radius: 12px;
-            display: block;
-            margin: 20px auto;
-            box-shadow: 0px 8px 15px rgba(0, 188, 212, 0.3);
-            transition: transform 0.3s ease;
+            border: 4px solid #00e5ff;
+            border-radius: 16px;
+            margin: 20px 0;
+            box-shadow: 0px 10px 20px rgba(0, 229, 255, 0.4);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        canvas:hover {
+            transform: scale(1.05);
+            box-shadow: 0px 15px 30px rgba(0, 229, 255, 0.6);
         }
 
         #status, #timer {
-            text-align: center;
-            margin-top: 10px;
             font-size: 1.2em;
-            color: #b0bec5;
-            transition: color 0.3s ease;
+            margin-top: 15px;
+            text-align: center;
+            padding: 10px 20px;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            color: #b3e5fc;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
         }
 
         #status {
@@ -51,43 +66,50 @@
             animation: fadeInTimer 1.5s ease-in-out 0.5s;
         }
 
+        button {
+            background: linear-gradient(to bottom, #00e5ff, #0099cc);
+            color: #ffffff;
+            border: none;
+            border-radius: 25px;
+            padding: 12px 24px;
+            font-size: 1.1em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
+        }
+
+        button:hover {
+            background: linear-gradient(to bottom, #0099cc, #0066aa);
+            transform: translateY(-2px);
+            box-shadow: 0px 8px 15px rgba(0, 153, 204, 0.5);
+        }
+
+        button:active {
+            transform: translateY(0);
+            box-shadow: 0px 4px 8px rgba(0, 153, 204, 0.3);
+        }
+
         @keyframes fadeInStatus {
             0% {
                 opacity: 0;
-                color: #546e7a;
+                transform: translateY(10px);
             }
             100% {
                 opacity: 1;
-                color: #b0bec5;
+                transform: translateY(0);
             }
         }
 
         @keyframes fadeInTimer {
             0% {
                 opacity: 0;
-                color: #546e7a;
+                transform: translateY(10px);
             }
             100% {
                 opacity: 1;
-                color: #b0bec5;
+                transform: translateY(0);
             }
         }
-
-        button {
-            background-color: #00bcd4;
-            color: #ffffff;
-            border: none;
-            border-radius: 25px;
-            padding: 10px 20px;
-            font-size: 1em;
-            cursor: pointer;
-            transition: background-color 0.3s ease, box-shadow 0.3s ease;
-        }
-
-        button:hover {
-            background-color: #008ba3;
-            box-shadow: 0px 6px 12px rgba(0, 188, 212, 0.4);
-        }
     </style>
 </head>
 <body>