Update static/css/styles.css

static/css/styles.css

@@ -2,7 +2,7 @@
 body {
     margin: 0;
     font-family: 'Comic Sans MS', 'Chalkduster', cursive;
-    background: url('/static/assets/vrindavan-bg.jpg') no-repeat center center/cover; /* Use the edited image as background */
+    background: url('/static/assets/vrindavan-edited-bg.jpg') no-repeat center center/cover; /* Use the edited image as background */
     color: #333;
     overflow-x: hidden;
     position: relative;
@@ -17,48 +17,133 @@ body {
     z-index: 1;
 }
 
-.welcome {
-    font-size: 3em;
-    color: #FF4500; /* Bright orange for the welcome text */
-    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8); /* White shadow for readability */
+/* Chat Page Styles */
+.chat-container {
+    background: rgba(255, 255, 255, 0.9); /* Slightly more opaque for readability */
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     animation: fadeIn 2s ease-in-out;
 }
 
-@keyframes fadeIn {
-    0% { opacity: 0; transform: translateY(-20px); }
-    100% { opacity: 1; transform: translateY(0); }
+.chat-container h1 {
+    font-size: 2.5em;
+    color: #FF4500; /* Bright orange */
+    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8); /* White shadow for readability */
 }
 
-h2 {
-    font-size: 1.5em;
-    color: #FF1493; /* Deep pink */
-    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
-    animation: fadeIn 2s ease-in-out 0.5s;
+.chat-options {
+    margin: 20px 0;
 }
 
-.countdown, .daily-message, .daily-blessing, .daily-horoscope {
-    background: rgba(255, 255, 255, 0.9); /* Slightly more opaque for readability */
-    padding: 15px;
+.chat-options button {
+    background: #FF69B4; /* Pink */
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    margin: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+.chat-options button:hover {
+    background: #FF1493; /* Darker pink on hover */
+}
+
+.chat-input {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.chat-input input {
+    padding: 10px;
+    width: 70%;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1em;
+}
+
+.chat-input button {
+    background: #FFD700; /* Gold */
+    color: #333;
+    border: none;
+    padding: 10px 20px;
+    margin-left: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+.chat-input button:hover {
+    background: #FF4500; /* Orange on hover */
+}
+
+.chat-history {
+    max-height: 300px;
+    overflow-y: auto;
+    margin-top: 20px;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 5px;
+}
+
+.chat-history p {
+    margin: 5px 0;
+    font-size: 1.1em;
+}
+
+.chat-error {
+    color: #FF4500;
+    font-weight: bold;
     margin: 10px 0;
+}
+
+/* Birthday Message Page Styles */
+.message-container {
+    background: rgba(255, 255, 255, 0.9);
+    padding: 20px;
     border-radius: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    animation: fadeIn 2s ease-in-out 1s;
+    animation: fadeIn 2s ease-in-out;
 }
 
-.countdown p, .daily-message p, .daily-blessing p, .daily-horoscope p {
-    margin: 0;
+.message-container h1 {
+    font-size: 2.5em;
+    color: #FF1493; /* Deep pink */
+    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
+}
+
+.message-container p {
     font-size: 1.2em;
     color: #333;
+    margin: 10px 0;
 }
 
-.special {
-    background: rgba(255, 215, 0, 0.5); /* Gold tint for special messages */
+.message-container ul {
+    list-style-type: none;
+    padding: 0;
 }
 
-.verse {
-    font-style: italic;
-    color: #555;
-    font-size: 0.9em;
+.message-container ul li {
+    font-size: 1.1em;
+    color: #FF4500; /* Orange for gift suggestions */
+    margin: 5px 0;
+}
+
+.message-container img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    margin-top: 20px;
+}
+
+/* General Animations */
+@keyframes fadeIn {
+    0% { opacity: 0; transform: translateY(-20px); }
+    100% { opacity: 1; transform: translateY(0); }
 }
 
 nav {