| <!DOCTYPE html> |
| <html lang="{{ language_dict['lang'] }}"> |
| <head> |
| <meta charset="UTF-8"> |
| <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', 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; |
| } |
| |
| 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: 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: 600; |
| display: block; |
| 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); |
| } |
| |
| .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 { |
| background: linear-gradient(135deg, #3498db, #2980b9); |
| color: white; |
| padding: 15px 30px; |
| border: none; |
| 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: 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 { |
| display: block; |
| margin: 5px auto; |
| 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; |
| text-align: center; |
| margin: 20px 0; |
| border: 2px dashed #ccc; |
| } |
| |
| ol { |
| padding-left: 0; |
| counter-reset: item; |
| } |
| |
| li { |
| 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); |
| } |
| |
| 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: #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; |
| } |
| |
| .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: 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> |
|
|
| <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> |
|
|
| <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> |
|
|
| <div class="form-group"> |
| <label>Upload Proof Image (optional):</label> |
| <input type="file" name="proof_image" accept="image/*"> |
| </div> |
|
|
| <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> |
|
|
| <input type="submit" value="{{ language_dict['generate_excuse'] }}"> |
| </form> |
|
|
| {% 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> |
