Update templates/index.html

templates/index.html

@@ -5,176 +5,472 @@
     <title>{{ language_dict['excuse_header'] }} 🎙️</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: 'Segoe UI', sans-serif;
-            background-color: #edf2fa;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
             color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
             padding: 20px;
-            max-width: 800px;
-            margin: auto;
         }
-        h1, h2, h3 {
+
+        h1 {
+            text-align: center;
+            color: #000000;
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+            font-weight: 700;
+        }
+
+        .container > p:first-of-type {
+            text-align: center;
+            color: #473737;
+            font-size: 1.1rem;
+            margin-bottom: 30px;
+            opacity: 0.9;
+        }
+
+        h2, h3 {
             color: #2c3e50;
+            margin-bottom: 15px;
+            font-weight: 600;
+        }
+
+        h2 {
+            font-size: 1.8rem;
+            border-bottom: 3px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
         }
+
+        h3 {
+            font-size: 1.4rem;
+            color: #e74c3c;
+        }
+
         form {
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 12px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+            margin-bottom: 30px;
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+
+        .form-group {
             margin-bottom: 20px;
         }
+
         label {
-            font-weight: bold;
+            font-weight: 600;
             display: block;
-            margin-top: 15px;
+            margin-bottom: 8px;
+            color: #2c3e50;
+            font-size: 1rem;
+        }
+
+        select {
+            width: 100%;
+            padding: 12px 15px;
+            border: 2px solid #ddd;
+            border-radius: 8px;
+            font-size: 1rem;
+            background-color: #fff;
+            color: #333;
+            transition: all 0.3s ease;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+            background-position: right 12px center;
+            background-repeat: no-repeat;
+            background-size: 16px;
+            padding-right: 40px;
+        }
+
+        select:focus {
+            outline: none;
+            border-color: #3498db;
+            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
         }
-        select, input[type="radio"] {
-            margin-top: 5px;
+
+        .radio-group {
+            display: flex;
+            gap: 20px;
+            margin-top: 8px;
+            flex-wrap: wrap;
+        }
+
+        .radio-option {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+            padding: 8px 15px;
+            border: 2px solid #ddd;
+            border-radius: 25px;
+            transition: all 0.3s ease;
+            background-color: #fff;
+        }
+
+        .radio-option:hover {
+            border-color: #3498db;
+            background-color: #f8f9ff;
         }
+
+        .radio-option input[type="radio"] {
+            margin: 0;
+            accent-color: #3498db;
+        }
+
+        .radio-option input[type="radio"]:checked + span {
+            color: #3498db;
+            font-weight: 600;
+        }
+
+        .radio-option:has(input[type="radio"]:checked) {
+            border-color: #3498db;
+            background-color: #f8f9ff;
+        }
+
+        input[type="file"] {
+            width: 100%;
+            padding: 12px;
+            border: 2px dashed #ddd;
+            border-radius: 8px;
+            background-color: #f8f9fa;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        input[type="file"]:hover {
+            border-color: #3498db;
+            background-color: #f0f8ff;
+        }
+
         input[type="submit"], button {
-            margin-top: 20px;
-            background-color: #4CAF50;
+            background: linear-gradient(135deg, #3498db, #2980b9);
             color: white;
-            padding: 10px 18px;
+            padding: 15px 30px;
             border: none;
-            border-radius: 6px;
+            border-radius: 8px;
             cursor: pointer;
+            font-size: 1.1rem;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            width: 100%;
+            margin-top: 20px;
         }
+
         input[type="submit"]:hover, button:hover {
-            background-color: #45a049;
+            background: linear-gradient(135deg, #2980b9, #3498db);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
+        }
+
+        input[type="submit"]:active, button:active {
+            transform: translateY(0);
         }
+
+        .result-section {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 25px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+
+        #excuseText {
+            background-color: #f8f9fa;
+            padding: 20px;
+            border-radius: 10px;
+            border-left: 4px solid #3498db;
+            font-size: 1.1rem;
+            line-height: 1.6;
+            margin-bottom: 15px;
+            color: #2c3e50;
+        }
+
+        .play-button {
+            background: linear-gradient(135deg, #27ae60, #2ecc71);
+            width: auto;
+            display: inline-block;
+            margin-top: 10px;
+            padding: 12px 25px;
+            font-size: 1rem;
+        }
+
+        .play-button:hover {
+            background: linear-gradient(135deg, #2ecc71, #27ae60);
+        }
+
         .proof-img {
-            max-width: 400px;
-            margin-top: auto;
+          display: block;              /* Make the image a block-level element */
+          margin: 5px auto;            /* Auto left and right margin centers it horizontally */
+          max-width: 500px;
+          height: 400px;
+          border-radius: 19px;
+          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+          border: 3px solid #fff;
+        }
+      
+      .placeholder-proof {
+            background-color: #f0f0f0;
+            padding: 20px;
             border-radius: 10px;
-            box-shadow: 0 0 8px rgba(0,0,0,0.1);
+            text-align: center;
+            margin: 20px 0;
+            border: 2px dashed #ccc;
         }
+
         ol {
             padding-left: 0;
+            counter-reset: item;
         }
+
         li {
-            margin: 10px 0;
+            margin: 15px 0;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            border-left: 4px solid #3498db;
+            list-style: none;
+            counter-increment: item;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        li:hover {
+            background-color: #e3f2fd;
+            transform: translateX(5px);
         }
-        a {
+
+        li::before {
+            content: counter(item);
+            background: #3498db;
+            color: white;
+            font-weight: bold;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            font-size: 0.9rem;
+        }
+
+        .navigation-links {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            margin-top: 30px;
+            flex-wrap: wrap;
+        }
+
+        .navigation-links a {
             text-decoration: none;
-            color: #0077cc;
+            color: #000000;
+            background: rgba(255, 255, 255, 0.2);
+            padding: 12px 20px;
+            border-radius: 25px;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            font-weight: 500;
         }
-        a:hover {
-            text-decoration: underline;
+
+        .navigation-links a:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
         }
+
         .prediction-box {
-            background-color: #eef;
-            padding: 12px;
-            border-radius: 10px;
-            margin-top: 20px;
+            background: linear-gradient(135deg, #ff7675, #fd79a8);
+            color: white;
+            padding: 20px;
+            border-radius: 15px;
+            margin: 20px 0;
+            text-align: center;
+            font-size: 1.1rem;
+            box-shadow: 0 8px 25px rgba(255, 118, 117, 0.3);
+        }
+
+        .prediction-box strong {
+            font-size: 1.2rem;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 15px;
+            }
+            
+            h1 {
+                font-size: 2rem;
+            }
+            
+            form {
+                padding: 20px;
+            }
+            
+            .radio-group {
+                flex-direction: column;
+                gap: 10px;
+            }
+            
+            .navigation-links {
+                flex-direction: column;
+                align-items: center;
+            }
+            
+            .navigation-links a {
+                width: 80%;
+                text-align: center;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>{{ language_dict['excuse_header'] }}</h1>
+        <p>{{ language_dict['excuse_intro'] }}</p>
 
-    <h1>{{ language_dict['excuse_header'] }}</h1>
-    <p>{{ language_dict['excuse_intro'] }}</p>
-
-    <form method="post">
-        <label>{{ language_dict['choose_scenario'] }}:</label>
-        <select name="scenario">
-            <option value="Work" {% if request.form.get('scenario') == 'Work' %}selected{% endif %}>{{ language_dict['work'] }}</option>
-            <option value="School" {% if request.form.get('scenario') == 'School' %}selected{% endif %}>{{ language_dict['school'] }}</option>
-            <option value="Social" {% if request.form.get('scenario') == 'Social' %}selected{% endif %}>{{ language_dict['social'] }}</option>
-            <option value="Family" {% if request.form.get('scenario') == 'Family' %}selected{% endif %}>{{ language_dict['family'] }}</option>
-        </select>
-
-        <label>{{ language_dict['urgency'] }}:</label>
-        <input type="radio" name="urgency" value="Low" {% if request.form.get('urgency') == 'Low' %}checked{% endif %}> Low
-        <input type="radio" name="urgency" value="Medium" {% if request.form.get('urgency') == 'Medium' %}checked{% endif %}> Medium
-        <input type="radio" name="urgency" value="High" {% if request.form.get('urgency') == 'High' %}checked{% endif %}> High
-
-        <label>Select Language for Voice Output:</label>
-        <select name="language" id="language">
-            <option value="en-US" {% if selected_language == 'en-US' %}selected{% endif %}>English 🇺🇸</option>
-            <option value="hi-IN" {% if selected_language == 'hi-IN' %}selected{% endif %}>Hindi 🇮🇳</option>
-            <option value="te-IN" {% if selected_language == 'te-IN' %}selected{% endif %}>Telugu 🇮🇳</option>
-            <option value="es-ES" {% if selected_language == 'es-ES' %}selected{% endif %}>Spanish 🇪🇸</option>
-            <option value="fr-FR" {% if selected_language == 'fr-FR' %}selected{% endif %}>French 🇫🇷</option>
-        </select>
-
-        <input type="submit" value="{{ language_dict['generate_excuse'] }}">
-    </form>
-    </div>
+        <form method="post" enctype="multipart/form-data">
+            <div class="form-group">
+                <label>{{ language_dict['choose_scenario'] }}</label>
+                <select name="scenario">
+                    <option value="Work" {% if request.form.get('scenario') == 'Work' %}selected{% endif %}>{{ language_dict['work'] }}</option>
+                    <option value="School" {% if request.form.get('scenario') == 'School' %}selected{% endif %}>{{ language_dict['school'] }}</option>
+                    <option value="Social" {% if request.form.get('scenario') == 'Social' %}selected{% endif %}>{{ language_dict['social'] }}</option>
+                    <option value="Family" {% if request.form.get('scenario') == 'Family' %}selected{% endif %}>{{ language_dict['family'] }}</option>
+                </select>
+            </div>
 
-    {% if excuse %}
-        <h2>Your Excuse:</h2>
-        <p id="excuseText">{{ excuse }}</p>
-        <button onclick="speakExcuse()">🔊 Play Excuse</button>
-
-        <script>
-            function speakExcuse() {
-                const text = document.getElementById('excuseText').innerText;
-                const language = document.getElementById('language').value;
-                const utterance = new SpeechSynthesisUtterance(text);
-                utterance.lang = language;
-               
-                function loadAndSpeak() {
-            const voices = window.speechSynthesis.getVoices();
-            let matchedVoice = voices.find(voice => voice.lang === language);
-
-            // Telugu fallback
-            if (language === 'te-IN' && !matchedVoice) {
-                matchedVoice = voices.find(voice => voice.lang.startsWith('en'));
-                utterance.lang = 'en-US';
-                alert("⚠️ Telugu voice not supported on your browser. Using English voice instead.");
-            }
+            <div class="form-group">
+                <label>{{ language_dict['urgency'] }}:</label>
+                <div class="radio-group">
+                    <label class="radio-option">
+                        <input type="radio" name="urgency" value="Low" {% if request.form.get('urgency') == 'Low' %}checked{% endif %}>
+                        <span>Low</span>
+                    </label>
+                    <label class="radio-option">
+                        <input type="radio" name="urgency" value="Medium" {% if request.form.get('urgency') == 'Medium' %}checked{% endif %}>
+                        <span>Medium</span>
+                    </label>
+                    <label class="radio-option">
+                        <input type="radio" name="urgency" value="High" {% if request.form.get('urgency') == 'High' %}checked{% endif %}>
+                        <span>High</span>
+                    </label>
+                </div>
+            </div>
 
-            if (matchedVoice) {
-                utterance.voice = matchedVoice;
-            }
+            <div class="form-group">
+                <label>Upload Proof Image (optional):</label>
+                <input type="file" name="proof_image" accept="image/*">
+            </div>
 
-            window.speechSynthesis.speak(utterance);
-        }
-
-        if (window.speechSynthesis.getVoices().length === 0) {
-            // Wait for voices to load
-            window.speechSynthesis.onvoiceschanged = loadAndSpeak;
-        } else {
-            loadAndSpeak();
-        }
-    }
-</script>
-
-       
-        </script>
-    {% endif %}
-
-    {% if proof %}
-        <h3>Fake Proof:</h3>
-        <img src="{{ proof }}" alt="Fake Proof" class="proof-img">
-    {% endif %}
-
-    {% if top_excuses %}
-        <h2>🏆 Top Excuses:</h2>
-        <ol>
-            {% for excuse in top_excuses %}
-                <li>
-                    {% if loop.index == 1 %}🥇{% elif loop.index == 2 %}🥈{% elif loop.index == 3 %}🥉{% endif %}
-                    <strong>{{ excuse }}</strong>
-                </li>
-            {% endfor %}
-        </ol>
-    {% endif %}
-
-    {% if predicted_schedule %}
-        <div class="prediction-box">
-            📅 <strong>Prediction:</strong> Based on your history, you may need your next excuse on: <strong>{{ predicted_schedule }}</strong>
-        </div>
-    {% endif %}
+            <div class="form-group">
+                <label>Select Language for Voice Output:</label>
+                <select name="language" id="language">
+                    <option value="en-US" {% if selected_language == 'en-US' %}selected{% endif %}>English 🇺🇸</option>
+                    <option value="hi-IN" {% if selected_language == 'hi-IN' %}selected{% endif %}>Hindi 🇮🇳</option>
+                    <option value="te-IN" {% if selected_language == 'te-IN' %}selected{% endif %}>Telugu 🇮🇳</option>
+                    <option value="es-ES" {% if selected_language == 'es-ES' %}selected{% endif %}>Spanish 🇪🇸</option>
+                    <option value="fr-FR" {% if selected_language == 'fr-FR' %}selected{% endif %}>French 🇫🇷</option>
+                </select>
+            </div>
 
-    <p><a href="{{ url_for('apology') }}">💔 Generate a guilt-tripping apology</a></p>
-    <p><a href="{{ url_for('history') }}">🕒 View History and Favorites</a></p>
+            <input type="submit" value="{{ language_dict['generate_excuse'] }}">
+        </form>
 
-</body>
-</html>
+        {% if excuse %}
+            <div class="result-section">
+                <h2>{{ language_dict['your_excuse'] }}</h2>
+                <p id="excuseText">{{ excuse }}</p>
+                <button class="play-button" onclick="speakExcuse()">{{ language_dict['play_excuse'] }}</button>
+            </div>
 
+            <script>
+                function speakExcuse() {
+                    const text = document.getElementById('excuseText').innerText;
+                    const language = document.getElementById('language').value;
+                    const utterance = new SpeechSynthesisUtterance(text);
+                    utterance.lang = language;
 
+                    function loadAndSpeak() {
+                        const voices = window.speechSynthesis.getVoices();
+                        let matchedVoice = voices.find(voice => voice.lang === language);
+                        if (language === 'te-IN' && !matchedVoice) {
+                            matchedVoice = voices.find(voice => voice.lang.startsWith('en'));
+                            utterance.lang = 'en-US';
+                            alert("⚠️ Telugu voice not supported on your browser. Using English voice instead.");
+                        }
+                        if (matchedVoice) {
+                            utterance.voice = matchedVoice;
+                        }
+                        window.speechSynthesis.speak(utterance);
+                    }
 
+                    if (window.speechSynthesis.getVoices().length === 0) {
+                        window.speechSynthesis.onvoiceschanged = loadAndSpeak;
+                    } else {
+                        loadAndSpeak();
+                    }
+                }
+            </script>
+        {% endif %}
 
+        {% if proof %}
+            <div class="result-section">
+                <h3>{{ language_dict['fake_proof'] }}</h3>
+                <img src="{{ proof }}" alt="Fake image detected" class="proof-img">
+                {% if proof_label %}
+                    <p>{{ proof_label }}</p>
+                {% endif %}
+            </div>
+        {% endif %}
+
+        {% if top_excuses %}
+            <div class="result-section">
+                <h2>{{ language_dict['top_excuses'] }}</h2>
+                <ol>
+                    {% for excuse in top_excuses %}
+                        <li>
+                            {% if loop.index == 1 %}🥇{% elif loop.index == 2 %}🥈{% elif loop.index == 3 %}🥉{% endif %}
+                            <strong>{{ excuse }}</strong>
+                        </li>
+                    {% endfor %}
+                </ol>
+            </div>
+        {% endif %}
+
+        {% if predicted_schedule %}
+            <div class="prediction-box">
+                📅 <strong>{{ language_dict['prediction'] }}</strong> <strong>{{ predicted_schedule }}</strong>
+            </div>
+        {% endif %}
+
+        <div class="navigation-links">
+            <a href="{{ url_for('apology') }}">{{ language_dict['apology_link'] }}</a>
+            <a href="{{ url_for('history') }}">🕒 {{ language_dict['history'] }} and {{ language_dict['favorites'] }}</a>
+        </div>
+    </div>
+</body>
+</html>