| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>{{ language_dict['history'] }}</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: linear-gradient(135deg, #74b9ff 0%, #0984e3 50%, #6c5ce7 100%); |
| min-height: 100vh; |
| color: #333; |
| line-height: 1.6; |
| padding: 20px 0; |
| } |
| |
| .container { |
| max-width: 1000px; |
| margin: 0 auto; |
| padding: 20px; |
| } |
| |
| .header { |
| text-align: center; |
| margin-bottom: 40px; |
| padding: 30px 0; |
| } |
| |
| h1 { |
| color: #fff; |
| font-size: 3rem; |
| margin-bottom: 15px; |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
| font-weight: 700; |
| letter-spacing: -1px; |
| } |
| |
| .main-content { |
| background: rgba(255, 255, 255, 0.95); |
| backdrop-filter: blur(15px); |
| padding: 40px; |
| border-radius: 20px; |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); |
| margin-bottom: 30px; |
| border: 1px solid rgba(255,255,255,0.3); |
| } |
| |
| .history-list { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
| |
| .history-item { |
| background: linear-gradient(135deg, #f8f9fa, #e9ecef); |
| margin-bottom: 20px; |
| padding: 25px; |
| border-radius: 15px; |
| border-left: 5px solid #74b9ff; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.08); |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .history-item::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, transparent, rgba(116, 185, 255, 0.05)); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| |
| .history-item:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0,0,0,0.15); |
| border-left-color: #0984e3; |
| } |
| |
| .history-item:hover::before { |
| opacity: 1; |
| } |
| |
| .excuse-text { |
| font-size: 1.1rem; |
| color: #2c3e50; |
| line-height: 1.6; |
| margin-bottom: 15px; |
| font-weight: 500; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .item-meta { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 15px; |
| margin-top: 15px; |
| padding-top: 15px; |
| border-top: 1px solid rgba(0,0,0,0.1); |
| } |
| |
| .timestamp { |
| color: #6c757d; |
| font-size: 0.95rem; |
| font-weight: 500; |
| background: rgba(108, 117, 125, 0.1); |
| padding: 5px 12px; |
| border-radius: 20px; |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| } |
| |
| .timestamp::before { |
| content: '🕒'; |
| font-size: 0.9rem; |
| } |
| |
| .favorite-section { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .favorite-btn { |
| background: linear-gradient(135deg, #fdcb6e, #f39c12); |
| color: #fff; |
| border: none; |
| padding: 10px 20px; |
| border-radius: 25px; |
| cursor: pointer; |
| font-size: 0.9rem; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .favorite-btn:hover { |
| background: linear-gradient(135deg, #f39c12, #fdcb6e); |
| transform: translateY(-2px); |
| box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4); |
| } |
| |
| .favorite-btn:active { |
| transform: translateY(0); |
| } |
| |
| .favorited-badge { |
| background: linear-gradient(135deg, #00b894, #00cec9); |
| color: #fff; |
| padding: 10px 20px; |
| border-radius: 25px; |
| font-size: 0.9rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3); |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .favorited-badge::before { |
| content: '⭐'; |
| animation: sparkle 2s ease-in-out infinite; |
| } |
| |
| @keyframes sparkle { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.2); } |
| } |
| |
| .empty-state { |
| text-align: center; |
| padding: 60px 20px; |
| background: linear-gradient(135deg, #ffeaa7, #fdcb6e); |
| border-radius: 15px; |
| margin: 20px 0; |
| } |
| |
| .empty-state-icon { |
| font-size: 4rem; |
| margin-bottom: 20px; |
| opacity: 0.7; |
| } |
| |
| .empty-state p { |
| font-size: 1.3rem; |
| color: #2c3e50; |
| font-weight: 600; |
| margin-bottom: 15px; |
| } |
| |
| .empty-state-subtitle { |
| font-size: 1rem; |
| color: #6c757d; |
| font-weight: 400; |
| } |
| |
| .navigation { |
| text-align: center; |
| margin-top: 40px; |
| } |
| |
| .back-link { |
| display: inline-block; |
| background: rgba(255, 255, 255, 0.2); |
| backdrop-filter: blur(10px); |
| color: #fff; |
| text-decoration: none; |
| padding: 15px 30px; |
| border-radius: 50px; |
| font-weight: 600; |
| font-size: 1.1rem; |
| transition: all 0.3s ease; |
| border: 2px solid rgba(255, 255, 255, 0.3); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .back-link:hover { |
| background: rgba(255, 255, 255, 0.3); |
| transform: translateY(-3px); |
| box-shadow: 0 8px 25px rgba(0,0,0,0.2); |
| border-color: rgba(255, 255, 255, 0.5); |
| } |
| |
| .stats-bar { |
| display: flex; |
| justify-content: space-around; |
| align-items: center; |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| padding: 20px; |
| border-radius: 15px; |
| margin-bottom: 30px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| |
| .stat-item { |
| text-align: center; |
| color: #fff; |
| } |
| |
| .stat-number { |
| font-size: 2rem; |
| font-weight: 700; |
| display: block; |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.3); |
| } |
| |
| .stat-label { |
| font-size: 0.9rem; |
| opacity: 0.8; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .favorite-form { |
| display: inline-block; |
| margin: 0; |
| } |
| |
| @media (max-width: 768px) { |
| .container { |
| padding: 15px; |
| } |
| |
| h1 { |
| font-size: 2.5rem; |
| } |
| |
| .main-content { |
| padding: 25px; |
| } |
| |
| .history-item { |
| padding: 20px; |
| } |
| |
| .item-meta { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 10px; |
| } |
| |
| .stats-bar { |
| flex-direction: column; |
| gap: 20px; |
| } |
| |
| .stat-item { |
| width: 100%; |
| padding: 10px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 10px; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| h1 { |
| font-size: 2rem; |
| } |
| |
| .main-content { |
| padding: 20px; |
| } |
| |
| .history-item { |
| padding: 15px; |
| } |
| |
| .excuse-text { |
| font-size: 1rem; |
| } |
| |
| .favorite-btn, .favorited-badge { |
| font-size: 0.8rem; |
| padding: 8px 15px; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <h1>🕒 {{ language_dict['history'] }}</h1> |
| </div> |
|
|
| {% if history %} |
| <div class="stats-bar"> |
| <div class="stat-item"> |
| <span class="stat-number">{{ history|length }}</span> |
| <span class="stat-label">Total Excuses</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-number">{{ favorites|length if favorites else 0 }}</span> |
| <span class="stat-label">Favorites</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-number">{{ ((favorites|length if favorites else 0) / history|length * 100)|round|int }}%</span> |
| <span class="stat-label">Success Rate</span> |
| </div> |
| </div> |
|
|
| <div class="main-content"> |
| <ul class="history-list"> |
| {% for item in history %} |
| <li class="history-item"> |
| <div class="excuse-text">{{ item['excuse'] }}</div> |
| <div class="item-meta"> |
| <span class="timestamp">{{ item['timestamp'] }}</span> |
| <div class="favorite-section"> |
| {% if item['excuse'] not in favorites %} |
| <form action="{{ url_for('favorite') }}" method="post" class="favorite-form"> |
| <input type="hidden" name="excuse" value="{{ item['excuse'] }}"> |
| <button type="submit" class="favorite-btn"> |
| ⭐ Add to {{ language_dict['favorites'] }} |
| </button> |
| </form> |
| {% else %} |
| <span class="favorited-badge">Favorited</span> |
| {% endif %} |
| </div> |
| </div> |
| </li> |
| {% endfor %} |
| </ul> |
| </div> |
| {% else %} |
| <div class="main-content"> |
| <div class="empty-state"> |
| <div class="empty-state-icon">📝</div> |
| <p>No excuses generated yet!</p> |
| <p class="empty-state-subtitle">Start creating some creative excuses to see them here</p> |
| </div> |
| </div> |
| {% endif %} |
|
|
| <div class="navigation"> |
| <a href="{{ url_for('index') }}" class="back-link"> |
| ⬅ Back to Home |
| </a> |
| </div> |
| </div> |
| </body> |
| </html> |
