Spaces:
No application file
No application file
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{% block title %}Emotion Analyzer{% endblock %}</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <!-- Логотип --> | |
| <div class="logo-container"> | |
| <a href="{{ url_for('welcome') }}" class="logo-link"> | |
| <h2><i class="fas fa-brain"></i> EmotionAnalyzer</h2> | |
| </a> | |
| </div> | |
| <!-- Основной контент --> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| <div class="flash-container"> | |
| {% for category, message in messages %} | |
| <div class="flash flash-{{ category }}">{{ message }}</div> | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| <div class="public-container"> | |
| {% block content %}{% endblock %} | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| setTimeout(() => { | |
| document.querySelectorAll('.flash').forEach(flash => flash.remove()); | |
| }, 4000); | |
| </script> | |
| {% block scripts %}{% endblock %} | |
| </body> | |
| </html> | |
| <style> | |
| /*Cтили для окна ошибок*/ | |
| .flash-container { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 9999; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .flash { | |
| padding: 12px 18px; | |
| border-radius: 6px; | |
| color: white; | |
| font-weight: 500; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2); | |
| opacity: 0.95; | |
| animation: slide-in 0.4s ease; | |
| } | |
| .flash-success { | |
| background-color: #2ecc71; | |
| } | |
| .flash-danger { | |
| background-color: #e74c3c; | |
| } | |
| @keyframes slide-in { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| /* Стили для логотипа */ | |
| .logo-container { | |
| padding-top: 20px; | |
| padding-left: 20px; | |
| background: linear-gradient(135deg, var(--darker-bg), var(--dark-bg)); | |
| } | |
| .logo-link { | |
| text-decoration: none ; | |
| } | |
| .logo-link h2 { | |
| color: #fff; /* Темно-синий цвет */ | |
| font-size: 2rem; | |
| margin: 0; | |
| transition: color 0.3s ease; | |
| } | |
| .logo-link:hover h2 { | |
| color: #4a4ae8; /* Цвет при наведении */ | |
| } | |
| .fa-brain { | |
| color: inherit; /* Наследует цвет от родителя */ | |
| margin-right: 10px; | |
| } | |
| @media (max-width: 768px) { | |
| .logo-link h2 { | |
| font-size: 1.5rem; | |
| } | |
| .public-container { | |
| padding: 20px; | |
| } | |
| } | |
| </style> |