New version
This commit is contained in:
152
templates/layout.html
Normal file
152
templates/layout.html
Normal file
@@ -0,0 +1,152 @@
|
||||
{% macro navbar() %}
|
||||
<nav class="navbar navbar-expand navbar-dark" style="background-color: #1a1a1a; border-bottom: 1px solid #333;">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="{{ url_for('index') }}" style="font-size: 1rem; color: #fff;">
|
||||
<img src="{{ url_for('static', filename='images/spotify_pirate.png') }}" alt="Logo" height="32" class="me-2">
|
||||
<span style="font-weight: 500;">Spotify Downloader</span>
|
||||
</a>
|
||||
|
||||
<ul class="navbar-nav ms-auto flex-row gap-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3 py-2 rounded" href="{{ url_for('index') }}" style="color: #aaa;">
|
||||
<i class="bi bi-download me-1"></i> <span class="d-none d-md-inline">Télécharger</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3 py-2 rounded" href="{{ url_for('history') }}" style="color: #aaa;">
|
||||
<i class="bi bi-clock-history me-1"></i> <span class="d-none d-md-inline">Historique</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link px-3 py-2 rounded dropdown-toggle" href="#" data-bs-toggle="dropdown" style="color: #aaa;">
|
||||
<i class="bi bi-person-circle me-1"></i> <span class="d-none d-md-inline">{{ current_user.username }}</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" style="background: #2a2a2a; border: 1px solid #444;">
|
||||
<li><a class="dropdown-item" href="{{ url_for('logout') }}" style="color: #dc3545;">
|
||||
<i class="bi bi-box-arrow-right me-2"></i>Déconnexion
|
||||
</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<style>
|
||||
.navbar-nav .nav-link:hover {
|
||||
color: #1DB954 !important;
|
||||
background-color: rgba(29, 185, 84, 0.1);
|
||||
}
|
||||
</style>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro toast_container() %}
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<i class="bi bi-bell me-2"></i>
|
||||
<strong class="me-auto">Notification</strong>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
|
||||
</div>
|
||||
<div class="toast-body" id="toast-message"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Spotify Downloader{% endblock %}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
||||
<style>
|
||||
:root {
|
||||
--spotify-green: #1DB954;
|
||||
--spotify-dark: #121212;
|
||||
--spotify-dark-secondary: #1a1a1a;
|
||||
}
|
||||
body {
|
||||
background-color: var(--spotify-dark);
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.card {
|
||||
background-color: var(--spotify-dark-secondary);
|
||||
border: 1px solid #333;
|
||||
}
|
||||
.output-box {
|
||||
background-color: #1a1a1a;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.log-info { color: #17a2b8; }
|
||||
.log-success { color: var(--spotify-green); }
|
||||
.log-error { color: #dc3545; }
|
||||
.log-warning { color: #ffc107; }
|
||||
.toast {
|
||||
background-color: var(--spotify-dark-secondary);
|
||||
color: white;
|
||||
}
|
||||
.toast-header {
|
||||
background-color: #2a2a2a;
|
||||
color: white;
|
||||
}
|
||||
.btn-spotify {
|
||||
background-color: var(--spotify-green);
|
||||
color: black;
|
||||
border: none;
|
||||
}
|
||||
.btn-spotify:hover {
|
||||
background-color: #1ed760;
|
||||
color: black;
|
||||
}
|
||||
@keyframes progress-indeterminate {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(400%); }
|
||||
}
|
||||
.progress-indeterminate .progress-bar {
|
||||
animation: progress-indeterminate 1.5s infinite linear;
|
||||
}
|
||||
.dropdown-menu a:hover {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
</style>
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{{ navbar() }}
|
||||
|
||||
<main class="container py-4">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{{ toast_container() }}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
function showToast(message, type = 'info') {
|
||||
const toast = document.getElementById('toast');
|
||||
const toastMessage = document.getElementById('toast-message');
|
||||
toastMessage.textContent = message;
|
||||
|
||||
const header = toast.querySelector('.toast-header');
|
||||
header.className = 'toast-header bg-' + (type === 'error' ? 'danger' : type);
|
||||
|
||||
const bsToast = new bootstrap.Toast(toast);
|
||||
bsToast.show();
|
||||
}
|
||||
</script>
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user