Skip to content

V
vidai
Commit 64101a68 authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Add user icon with dropdown menu to all pages 

- Added user icon in top right navigation bar on all pages
- Dropdown shows Account/Tokens for non-admin users
- Dropdown shows Menu Management/Configurations for admin users
- Includes Logout option for all
- Used FontAwesome icons and consistent styling
parent a2156ad2
Show whitespace changes
Inline Side-by-side
Showing with 313 additions and 25 deletions
templates/account.html
View file @ 64101a68
...@@ -13,7 +13,14 @@ ...@@ -13,7 +13,14 @@
.nav { display: flex; gap: 2rem; } .nav { display: flex; gap: 2rem; }
.nav a { text-decoration: none; color: #64748b; font-weight: 500; } .nav a { text-decoration: none; color: #64748b; font-weight: 500; }
.nav a.active { color: #667eea; } .nav a.active { color: #667eea; }
.user-menu { display: flex; align-items: center; gap: 1rem; } .user-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
.user-icon { cursor: pointer; padding: 0.5rem; border-radius: 50%; background: #f8fafc; transition: background 0.2s; }
.user-icon:hover { background: #e2e8f0; }
.user-icon i { font-size: 1.2rem; color: #64748b; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; }
.user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
.user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
.user-dropdown a:hover { background: #f8fafc; }
.container { max-width: 1000px; margin: 2rem auto; padding: 0 2rem; } .container { max-width: 1000px; margin: 2rem auto; padding: 0 2rem; }
.account-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; } .account-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
.card-header { margin-bottom: 1.5rem; } .card-header { margin-bottom: 1.5rem; }
...@@ -72,8 +79,19 @@ ...@@ -72,8 +79,19 @@
{% endif %} {% endif %}
</nav> </nav>
<div class="user-menu"> <div class="user-menu">
<span>{{ user.get('username', 'User') }}</span> <div class="user-icon" onclick="toggleUserMenu()">
<a href="/logout" style="color: #dc2626;">Logout</a> <i class="fas fa-user"></i>
</div>
<div id="userDropdown" class="user-dropdown">
{% if user.get('role') != 'admin' %}
<a href="/account">Account</a>
<a href="/api_tokens">Tokens</a>
{% else %}
<a href="/admin">Menu Management</a>
<a href="/config">Configurations</a>
{% endif %}
<a href="/logout">Logout</a>
</div>
</div> </div>
</div> </div>
</header> </header>
...@@ -351,6 +369,17 @@ ...@@ -351,6 +369,17 @@
if (event.target == modal) { if (event.target == modal) {
closePurchaseModal(); closePurchaseModal();
} }
// Close user dropdown
const dropdown = document.getElementById('userDropdown');
const icon = document.querySelector('.user-icon');
if (dropdown && icon && !icon.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
}
function toggleUserMenu() {
const dropdown = document.getElementById('userDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
} }
</script> </script>
</body> </body>
......
templates/admin.html
View file @ 64101a68
...@@ -13,7 +13,14 @@ ...@@ -13,7 +13,14 @@
.nav { display: flex; gap: 2rem; } .nav { display: flex; gap: 2rem; }
.nav a { text-decoration: none; color: #64748b; font-weight: 500; } .nav a { text-decoration: none; color: #64748b; font-weight: 500; }
.nav a.active { color: #667eea; } .nav a.active { color: #667eea; }
.user-menu { display: flex; align-items: center; gap: 1rem; } .user-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
.user-icon { cursor: pointer; padding: 0.5rem; border-radius: 50%; background: #f8fafc; transition: background 0.2s; }
.user-icon:hover { background: #e2e8f0; }
.user-icon i { font-size: 1.2rem; color: #64748b; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; }
.user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
.user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
.user-dropdown a:hover { background: #f8fafc; }
.container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; } .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.admin-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; } .admin-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
.card-header { margin-bottom: 1.5rem; } .card-header { margin-bottom: 1.5rem; }
...@@ -61,8 +68,19 @@ ...@@ -61,8 +68,19 @@
<a href="/admin" class="active">Admin</a> <a href="/admin" class="active">Admin</a>
</nav> </nav>
<div class="user-menu"> <div class="user-menu">
<span>{{ user.get('username', 'Admin') }}</span> <div class="user-icon" onclick="toggleUserMenu()">
<a href="/logout" style="color: #dc2626;">Logout</a> <i class="fas fa-user"></i>
</div>
<div id="userDropdown" class="user-dropdown">
{% if user.get('role') != 'admin' %}
<a href="/account">Account</a>
<a href="/api_tokens">Tokens</a>
{% else %}
<a href="/admin">Menu Management</a>
<a href="/config">Configurations</a>
{% endif %}
<a href="/logout">Logout</a>
</div>
</div> </div>
</div> </div>
</header> </header>
...@@ -240,6 +258,17 @@ ...@@ -240,6 +258,17 @@
if (event.target == modal) { if (event.target == modal) {
closeEditModal(); closeEditModal();
} }
// Close user dropdown
const dropdown = document.getElementById('userDropdown');
const icon = document.querySelector('.user-icon');
if (dropdown && icon && !icon.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
}
function toggleUserMenu() {
const dropdown = document.getElementById('userDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
} }
</script> </script>
</body> </body>
......
templates/analyze.html
View file @ 64101a68
...@@ -13,7 +13,14 @@ ...@@ -13,7 +13,14 @@
.nav { display: flex; gap: 2rem; } .nav { display: flex; gap: 2rem; }
.nav a { text-decoration: none; color: #64748b; font-weight: 500; } .nav a { text-decoration: none; color: #64748b; font-weight: 500; }
.nav a.active { color: #667eea; } .nav a.active { color: #667eea; }
.user-menu { display: flex; align-items: center; gap: 1rem; } .user-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
.user-icon { cursor: pointer; padding: 0.5rem; border-radius: 50%; background: #f8fafc; transition: background 0.2s; }
.user-icon:hover { background: #e2e8f0; }
.user-icon i { font-size: 1.2rem; color: #64748b; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; }
.user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
.user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
.user-dropdown a:hover { background: #f8fafc; }
.container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; display: flex; gap: 2rem; } .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; display: flex; gap: 2rem; }
.main { flex: 1; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .main { flex: 1; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.sidebar { width: 300px; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .sidebar { width: 300px; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
...@@ -166,6 +173,17 @@ ...@@ -166,6 +173,17 @@
if (event.target == modal) { if (event.target == modal) {
closeFileBrowser(); closeFileBrowser();
} }
// Close user dropdown
const dropdown = document.getElementById('userDropdown');
const icon = document.querySelector('.user-icon');
if (dropdown && icon && !icon.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
}
function toggleUserMenu() {
const dropdown = document.getElementById('userDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
} }
</script> </script>
</head> </head>
...@@ -185,8 +203,19 @@ ...@@ -185,8 +203,19 @@
{% endif %} {% endif %}
</nav> </nav>
<div class="user-menu"> <div class="user-menu">
<span>{{ tokens }} tokens</span> <div class="user-icon" onclick="toggleUserMenu()">
<a href="/logout" style="color: #dc2626;">Logout</a> <i class="fas fa-user"></i>
</div>
<div id="userDropdown" class="user-dropdown">
{% if user.get('role') != 'admin' %}
<a href="/account">Account</a>
<a href="/api_tokens">Tokens</a>
{% else %}
<a href="/admin">Menu Management</a>
<a href="/config">Configurations</a>
{% endif %}
<a href="/logout">Logout</a>
</div>
</div> </div>
</div> </div>
</header> </header>
......
templates/api_tokens.html
View file @ 64101a68
...@@ -13,7 +13,14 @@ ...@@ -13,7 +13,14 @@
.nav { display: flex; gap: 2rem; } .nav { display: flex; gap: 2rem; }
.nav a { text-decoration: none; color: #64748b; font-weight: 500; } .nav a { text-decoration: none; color: #64748b; font-weight: 500; }
.nav a.active { color: #667eea; } .nav a.active { color: #667eea; }
.user-menu { display: flex; align-items: center; gap: 1rem; } .user-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
.user-icon { cursor: pointer; padding: 0.5rem; border-radius: 50%; background: #f8fafc; transition: background 0.2s; }
.user-icon:hover { background: #e2e8f0; }
.user-icon i { font-size: 1.2rem; color: #64748b; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; }
.user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
.user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
.user-dropdown a:hover { background: #f8fafc; }
.container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; } .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.tokens-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; } .tokens-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
.card-header { margin-bottom: 1.5rem; } .card-header { margin-bottom: 1.5rem; }
...@@ -58,8 +65,19 @@ ...@@ -58,8 +65,19 @@
{% endif %} {% endif %}
</nav> </nav>
<div class="user-menu"> <div class="user-menu">
<span>{{ user.get('username', 'User') }}</span> <div class="user-icon" onclick="toggleUserMenu()">
<a href="/logout" style="color: #dc2626;">Logout</a> <i class="fas fa-user"></i>
</div>
<div id="userDropdown" class="user-dropdown">
{% if user.get('role') != 'admin' %}
<a href="/account">Account</a>
<a href="/api_tokens">Tokens</a>
{% else %}
<a href="/admin">Menu Management</a>
<a href="/config">Configurations</a>
{% endif %}
<a href="/logout">Logout</a>
</div>
</div> </div>
</div> </div>
</header> </header>
...@@ -190,6 +208,17 @@ ...@@ -190,6 +208,17 @@
if (event.target == modal) { if (event.target == modal) {
closeDeleteModal(); closeDeleteModal();
} }
// Close user dropdown
const dropdown = document.getElementById('userDropdown');
const icon = document.querySelector('.user-icon');
if (dropdown && icon && !icon.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
}
function toggleUserMenu() {
const dropdown = document.getElementById('userDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
} }
</script> </script>
</body> </body>
......
templates/config.html
View file @ 64101a68
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<title>Configuration</title> <title>Configuration</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style> <style>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; }
.container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
...@@ -12,12 +13,31 @@ ...@@ -12,12 +13,31 @@
label { display: block; margin-bottom: 5px; } label { display: block; margin-bottom: 5px; }
select { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } select { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
input[type="submit"] { background: #007bff; color: white; padding: 10px; border: none; border-radius: 4px; cursor: pointer; } input[type="submit"] { background: #007bff; color: white; padding: 10px; border: none; border-radius: 4px; cursor: pointer; }
.user-menu { position: relative; display: inline-block; margin-left: 20px; }
.user-icon { cursor: pointer; padding: 0.5rem; border-radius: 50%; background: #f4f4f4; transition: background 0.2s; }
.user-icon:hover { background: #e0e0e0; }
.user-icon i { font-size: 1.2rem; color: #333; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; border: 1px solid #ccc; }
.user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #333; border-bottom: 1px solid #f1f5f9; }
.user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
.user-dropdown a:hover { background: #f4f4f4; }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>Configuration</h1> <h1>Configuration</h1>
<nav><a href="/">Analysis</a> | <a href="/train">Training</a> | <a href="/config">Configuration</a></nav> <nav><a href="/">Analysis</a> | <a href="/train">Training</a> | <a href="/config">Configuration</a>
<div class="user-menu">
<div class="user-icon" onclick="toggleUserMenu()">
<i class="fas fa-user"></i>
</div>
<div id="userDropdown" class="user-dropdown">
<a href="/admin">Menu Management</a>
<a href="/config">Configurations</a>
<a href="/logout">Logout</a>
</div>
</div>
</nav>
<form method="post"> <form method="post">
<label>Analysis Backend: <label>Analysis Backend:
<select name="analysis_backend"> <select name="analysis_backend">
...@@ -34,5 +54,21 @@ ...@@ -34,5 +54,21 @@
<input type="submit" value="Save Configuration"> <input type="submit" value="Save Configuration">
</form> </form>
</div> </div>
<script>
function toggleUserMenu() {
const dropdown = document.getElementById('userDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
// Close dropdown when clicking outside
window.onclick = function(event) {
const dropdown = document.getElementById('userDropdown');
const icon = document.querySelector('.user-icon');
if (!icon.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
templates/dashboard.html
View file @ 64101a68
...@@ -13,7 +13,14 @@ ...@@ -13,7 +13,14 @@
.nav { display: flex; gap: 2rem; } .nav { display: flex; gap: 2rem; }
.nav a { text-decoration: none; color: #64748b; font-weight: 500; } .nav a { text-decoration: none; color: #64748b; font-weight: 500; }
.nav a.active { color: #667eea; } .nav a.active { color: #667eea; }
.user-menu { display: flex; align-items: center; gap: 1rem; } .user-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
.user-icon { cursor: pointer; padding: 0.5rem; border-radius: 50%; background: #f8fafc; transition: background 0.2s; }
.user-icon:hover { background: #e2e8f0; }
.user-icon i { font-size: 1.2rem; color: #64748b; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; }
.user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
.user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
.user-dropdown a:hover { background: #f8fafc; }
.container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; } .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .stat-card { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
...@@ -50,8 +57,19 @@ ...@@ -50,8 +57,19 @@
{% endif %} {% endif %}
</nav> </nav>
<div class="user-menu"> <div class="user-menu">
<span>{{ tokens }} tokens</span> <div class="user-icon" onclick="toggleUserMenu()">
<a href="/logout" style="color: #dc2626;">Logout</a> <i class="fas fa-user"></i>
</div>
<div id="userDropdown" class="user-dropdown">
{% if user.get('role') != 'admin' %}
<a href="/account">Account</a>
<a href="/api_tokens">Tokens</a>
{% else %}
<a href="/admin">Menu Management</a>
<a href="/config">Configurations</a>
{% endif %}
<a href="/logout">Logout</a>
</div>
</div> </div>
</div> </div>
</header> </header>
...@@ -116,5 +134,21 @@ ...@@ -116,5 +134,21 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<script>
function toggleUserMenu() {
const dropdown = document.getElementById('userDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
// Close dropdown when clicking outside
window.onclick = function(event) {
const dropdown = document.getElementById('userDropdown');
const icon = document.querySelector('.user-icon');
if (!icon.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
templates/history.html
View file @ 64101a68
...@@ -13,7 +13,14 @@ ...@@ -13,7 +13,14 @@
.nav { display: flex; gap: 2rem; } .nav { display: flex; gap: 2rem; }
.nav a { text-decoration: none; color: #64748b; font-weight: 500; } .nav a { text-decoration: none; color: #64748b; font-weight: 500; }
.nav a.active { color: #667eea; } .nav a.active { color: #667eea; }
.user-menu { display: flex; align-items: center; gap: 1rem; } .user-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
.user-icon { cursor: pointer; padding: 0.5rem; border-radius: 50%; background: #f8fafc; transition: background 0.2s; }
.user-icon:hover { background: #e2e8f0; }
.user-icon i { font-size: 1.2rem; color: #64748b; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; }
.user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
.user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
.user-dropdown a:hover { background: #f8fafc; }
.container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; } .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.history-table { background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; } .history-table { background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; }
.table-header { padding: 2rem; border-bottom: 1px solid #e5e7eb; } .table-header { padding: 2rem; border-bottom: 1px solid #e5e7eb; }
...@@ -49,8 +56,19 @@ ...@@ -49,8 +56,19 @@
{% endif %} {% endif %}
</nav> </nav>
<div class="user-menu"> <div class="user-menu">
<span>{{ tokens }} tokens</span> <div class="user-icon" onclick="toggleUserMenu()">
<a href="/logout" style="color: #dc2626;">Logout</a> <i class="fas fa-user"></i>
</div>
<div id="userDropdown" class="user-dropdown">
{% if user.get('role') != 'admin' %}
<a href="/account">Account</a>
<a href="/api_tokens">Tokens</a>
{% else %}
<a href="/admin">Menu Management</a>
<a href="/config">Configurations</a>
{% endif %}
<a href="/logout">Logout</a>
</div>
</div> </div>
</div> </div>
</header> </header>
...@@ -76,5 +94,21 @@ ...@@ -76,5 +94,21 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<script>
function toggleUserMenu() {
const dropdown = document.getElementById('userDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
// Close dropdown when clicking outside
window.onclick = function(event) {
const dropdown = document.getElementById('userDropdown');
const icon = document.querySelector('.user-icon');
if (!icon.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
templates/settings.html
View file @ 64101a68
...@@ -13,7 +13,14 @@ ...@@ -13,7 +13,14 @@
.nav { display: flex; gap: 2rem; } .nav { display: flex; gap: 2rem; }
.nav a { text-decoration: none; color: #64748b; font-weight: 500; } .nav a { text-decoration: none; color: #64748b; font-weight: 500; }
.nav a.active { color: #667eea; } .nav a.active { color: #667eea; }
.user-menu { display: flex; align-items: center; gap: 1rem; } .user-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
.user-icon { cursor: pointer; padding: 0.5rem; border-radius: 50%; background: #f8fafc; transition: background 0.2s; }
.user-icon:hover { background: #e2e8f0; }
.user-icon i { font-size: 1.2rem; color: #64748b; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; }
.user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
.user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
.user-dropdown a:hover { background: #f8fafc; }
.container { max-width: 800px; margin: 2rem auto; padding: 0 2rem; } .container { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }
.settings-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; } .settings-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
.card-header { margin-bottom: 1.5rem; } .card-header { margin-bottom: 1.5rem; }
...@@ -47,8 +54,19 @@ ...@@ -47,8 +54,19 @@
{% endif %} {% endif %}
</nav> </nav>
<div class="user-menu"> <div class="user-menu">
<span>{{ tokens }} tokens</span> <div class="user-icon" onclick="toggleUserMenu()">
<a href="/logout" style="color: #dc2626;">Logout</a> <i class="fas fa-user"></i>
</div>
<div id="userDropdown" class="user-dropdown">
{% if user.get('role') != 'admin' %}
<a href="/account">Account</a>
<a href="/api_tokens">Tokens</a>
{% else %}
<a href="/admin">Menu Management</a>
<a href="/config">Configurations</a>
{% endif %}
<a href="/logout">Logout</a>
</div>
</div> </div>
</div> </div>
</header> </header>
...@@ -145,5 +163,21 @@ ...@@ -145,5 +163,21 @@
</div> </div>
</div> </div>
<script>
function toggleUserMenu() {
const dropdown = document.getElementById('userDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
// Close dropdown when clicking outside
window.onclick = function(event) {
const dropdown = document.getElementById('userDropdown');
const icon = document.querySelector('.user-icon');
if (!icon.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
templates/train.html
View file @ 64101a68
...@@ -13,7 +13,14 @@ ...@@ -13,7 +13,14 @@
.nav { display: flex; gap: 2rem; } .nav { display: flex; gap: 2rem; }
.nav a { text-decoration: none; color: #64748b; font-weight: 500; } .nav a { text-decoration: none; color: #64748b; font-weight: 500; }
.nav a.active { color: #667eea; } .nav a.active { color: #667eea; }
.user-menu { display: flex; align-items: center; gap: 1rem; } .user-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
.user-icon { cursor: pointer; padding: 0.5rem; border-radius: 50%; background: #f8fafc; transition: background 0.2s; }
.user-icon:hover { background: #e2e8f0; }
.user-icon i { font-size: 1.2rem; color: #64748b; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; }
.user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
.user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
.user-dropdown a:hover { background: #f8fafc; }
.container { max-width: 800px; margin: 2rem auto; padding: 0 2rem; } .container { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }
.training-form { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .training-form { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.form-group { margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.5rem; }
...@@ -48,8 +55,19 @@ ...@@ -48,8 +55,19 @@
{% endif %} {% endif %}
</nav> </nav>
<div class="user-menu"> <div class="user-menu">
<span>{{ tokens }} tokens</span> <div class="user-icon" onclick="toggleUserMenu()">
<a href="/logout" style="color: #dc2626;">Logout</a> <i class="fas fa-user"></i>
</div>
<div id="userDropdown" class="user-dropdown">
{% if user.get('role') != 'admin' %}
<a href="/account">Account</a>
<a href="/api_tokens">Tokens</a>
{% else %}
<a href="/admin">Menu Management</a>
<a href="/config">Configurations</a>
{% endif %}
<a href="/logout">Logout</a>
</div>
</div> </div>
</div> </div>
</header> </header>
...@@ -112,5 +130,21 @@ ...@@ -112,5 +130,21 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
<script>
function toggleUserMenu() {
const dropdown = document.getElementById('userDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
// Close dropdown when clicking outside
window.onclick = function(event) {
const dropdown = document.getElementById('userDropdown');
const icon = document.querySelector('.user-icon');
if (!icon.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment