From 902f2d69c460cbb605c701189a2523977ccf663f Mon Sep 17 00:00:00 2001
From: takenusername <145628605+jeb1399@users.noreply.github.com>
Date: Sun, 15 Dec 2024 17:11:39 -0500
Subject: [PATCH] Update homepage.html

---
 homepage.html | 64 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/homepage.html b/homepage.html
index 56eb209..dd4490c 100644
--- a/homepage.html
+++ b/homepage.html
@@ -14,70 +14,79 @@
             margin: 0;
             background-color: #131313;
             overflow: hidden;
+            transition: background-color 0.5s ease;
         }
         .container {
             text-align: center;
-            padding: 30px;
-            border-radius: 10px;
-            background-color: rgba(255, 255, 255, 0.1);
-            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
+            padding: 40px;
+            border-radius: 15px;
+            background-color: rgba(255, 255, 255, 0.15);
+            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
             max-width: 500px;
-            position: relative;
+            transition: background-color 0.5s ease, box-shadow 0.5s ease;
         }
         h1 {
-            margin-bottom: 20px;
-            font-size: 2.5rem;
+            margin-bottom: 25px;
+            font-size: 2.8rem;
             color: rgba(255, 255, 255, 0.9);
+            transition: color 0.5s ease;
         }
         .engine-buttons, .search-form {
             margin-top: 20px;
         }
+        .search-form {
+            display: flex;
+            align-items: center;
+        }
         input[type="text"] {
             width: 100%;
             max-width: 400px;
-            padding: 12px;
+            padding: 14px;
             font-size: 18px;
             border: none;
-            border-radius: 5px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-            transition: box-shadow 0.3s;
+            border-radius: 8px 0 0 8px; /* Rounded corners only on the left */
+            background-color: rgba(255, 255, 255, 0.2);
+            color: rgba(255, 255, 255, 0.9);
+            transition: background-color 0.3s ease, box-shadow 0.3s ease;
         }
         input[type="text"]:focus {
-            outline: 0;
-            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
+            outline: none;
+            background-color: rgba(255, 255, 255, 0.3);
+            box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
         }
         input[type="submit"] {
             font-size: 18px;
             background-color: #4caf50;
-            color: #fff;
+            color: white; /* Ensured text is white */
             border: none;
-            border-radius: 5px;
-            padding: 12px 24px;
+            border-radius: 0 8px 8px 0; /* Rounded corners only on the right */
+            padding: 12px 20px;
             cursor: pointer;
-            transition: background-color 0.3s, transform 0.2s;
+            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
         }
         input[type="submit"]:hover {
             background-color: #45a049;
             transform: scale(1.05);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
         }
         .engine-button {
             font-size: 16px;
             margin: 0 5px;
-            background-color: rgba(255, 255, 255, 0.9);
-            border: 1px solid #ccc;
+            background-color: rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.3);
             border-radius: 5px;
-            padding: 12px 24px;
+            padding: 12px 20px;
+            color: white; /* Ensured text is white */
             cursor: pointer;
-            transition: background-color 0.3s, transform 0.2s;
+            transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
         }
         .engine-button:hover {
-            background-color: rgba(255, 255, 255, 0.8);
+            background-color: rgba(255, 255, 255, 0.3);
             transform: scale(1.05);
             color: rgba(0, 0, 0, 0.9);
         }
         .selected {
-            background-color: rgba(0, 0, 0, 0.5);
-            border-radius: 5px;
+            background-color: rgba(0, 0, 0, 0.6);
             border-color: #999;
             color: #fff;
         }
@@ -91,24 +100,27 @@
             border-radius: 10px;
             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
             width: 200px;
-            transition: right 0.3s;
             max-height: 80vh;
             overflow-y: auto;
+            transition: transform 0.3s ease, opacity 0.3s;
+            opacity: 0.9;
         }
         .recommended-apps h2 {
             color: rgba(255, 255, 255, 0.9);
             font-size: 1.5rem;
             margin-bottom: 10px;
+            transition: color 0.5s ease;
         }
         .app-link {
             display: block;
             color: rgba(76, 175, 80, 0.9);
             text-decoration: none;
             margin: 5px 0;
-            transition: color 0.3s;
+            transition: color 0.3s ease;
         }
         .app-link:hover {
             color: rgba(76, 175, 80, 1);
+            text-decoration: underline;
         }
     </style>
 </head>