81 lines
		
	
	
	
		
			3.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			81 lines
		
	
	
	
		
			3.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | |
| <html lang="{{ get_locale() }}" data-bs-theme="{{ theme }}">
 | |
| <head>
 | |
|     <meta charset="UTF-8">
 | |
|     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | |
|     <title>{{ _('Steam Manager') }}</title>
 | |
|     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 | |
|     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 | |
| </head>
 | |
| <body>
 | |
|     <nav class="navbar navbar-expand-lg bg-body-tertiary">
 | |
|         <div class="container">
 | |
|             <a class="navbar-brand" href="/">{{ _('Steam Manager') }}</a>
 | |
|             <div class="d-flex align-items-center gap-3">
 | |
|                 <form class="d-flex" action="{{ url_for('index') }}" method="GET">
 | |
|                     <input class="form-control me-2" 
 | |
|                            type="search" 
 | |
|                            name="q"
 | |
|                            placeholder="{{ _('Search') }}"
 | |
|                            value="{{ search_query }}">
 | |
|                     <button class="btn btn-outline-success" type="submit">🔍</button>
 | |
|                 </form>
 | |
|                 <div class="form-check form-switch">
 | |
|                     <input class="form-check-input" 
 | |
|                            type="checkbox" 
 | |
|                            id="darkModeSwitch" {% if theme == 'dark' %}checked{% endif %}>
 | |
|                     <label class="form-check-label" for="darkModeSwitch">{{ _('Dark Mode') }}</label>
 | |
|                 </div>
 | |
|                 <!-- Sprachumschalter -->
 | |
|                 <div class="dropdown ms-3">
 | |
|                   <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
 | |
|                     {% if get_locale() == 'de' %} Deutsch {% elif get_locale() == 'en' %} English {% else %} Sprache {% endif %}
 | |
|                   </button>
 | |
|                   <ul class="dropdown-menu">
 | |
|                     <li>
 | |
|                       <a class="dropdown-item {% if get_locale() == 'de' %}active{% endif %}" href="{{ url_for('set_lang', lang='de') }}">
 | |
|                         Deutsch
 | |
|                       </a>
 | |
|                     </li>
 | |
|                     <li>
 | |
|                       <a class="dropdown-item {% if get_locale() == 'en' %}active{% endif %}" href="{{ url_for('set_lang', lang='en') }}">
 | |
|                         English
 | |
|                       </a>
 | |
|                     </li>
 | |
|                   </ul>
 | |
|                 </div>
 | |
|                 {% if current_user.is_authenticated %}
 | |
|                     <a href="{{ url_for('logout') }}" class="btn btn-danger ms-3">{{ _('Logout') }}</a>
 | |
|                 {% endif %}
 | |
|             </div>
 | |
|         </div>
 | |
|     </nav>
 | |
|     <div class="container mt-4">
 | |
|         {% with messages = get_flashed_messages(with_categories=true) %}
 | |
|             {% if messages %}
 | |
|                 {% for category, message in messages %}
 | |
|                 <div class="alert alert-{{ category }} alert-dismissible fade show">
 | |
|                     {{ message }}
 | |
|                     <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
 | |
|                 </div>
 | |
|                 {% endfor %}
 | |
|             {% endif %}
 | |
|         {% endwith %}
 | |
|         {% block content %}{% endblock %}
 | |
|     </div>
 | |
|     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 | |
|     <script>
 | |
|     document.addEventListener('DOMContentLoaded', function() {
 | |
|         const toggle = document.getElementById('darkModeSwitch');
 | |
|         const html = document.documentElement;
 | |
|         toggle.addEventListener('change', function() {
 | |
|             const theme = this.checked ? 'dark' : 'light';
 | |
|             fetch('/set-theme/' + theme)
 | |
|                 .then(() => {
 | |
|                     html.setAttribute('data-bs-theme', theme);
 | |
|                 });
 | |
|         });
 | |
|     });
 | |
|     </script>
 | |
| </body>
 | |
| </html>
 |