342 lines
13 KiB
HTML
342 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Theme Preview - Linux BenchTools</title>
|
|
<link rel="stylesheet" href="css/variables.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/components.css">
|
|
<style>
|
|
.theme-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.theme-card {
|
|
border: 2px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.theme-card:hover {
|
|
transform: scale(1.05);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.theme-preview {
|
|
height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.theme-preview-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
height: 30px;
|
|
}
|
|
|
|
.theme-preview-box {
|
|
flex: 1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.theme-info {
|
|
padding: 1rem;
|
|
background: var(--bg-secondary);
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.theme-info h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.theme-info p {
|
|
margin: 0;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.active-indicator {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
background: var(--color-success);
|
|
color: var(--bg-primary);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
margin-left: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Compact Header -->
|
|
<header style="background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); border-bottom: 2px solid var(--color-primary); padding: 0.75rem 0;">
|
|
<div style="max-width: 100%; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="display: flex; align-items: center; gap: 1rem;">
|
|
<h1 style="margin: 0; font-size: 1.5rem; color: var(--color-primary);">🎨 Theme Preview</h1>
|
|
<span style="color: var(--text-secondary); font-size: 0.9rem;">Aperçu des thèmes</span>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="nav" style="margin: 0;">
|
|
<a href="index.html" class="nav-link">Dashboard</a>
|
|
<a href="devices.html" class="nav-link">Devices</a>
|
|
<a href="settings.html" class="nav-link">Settings</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container">
|
|
<div class="card">
|
|
<div class="card-header">🎨 Sélectionnez votre thème</div>
|
|
<div class="card-body">
|
|
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
|
|
Cliquez sur un thème pour l'appliquer immédiatement. Votre choix sera sauvegardé automatiquement.
|
|
</p>
|
|
|
|
<div class="theme-grid">
|
|
<!-- Monokai Dark -->
|
|
<div class="theme-card" onclick="applyTheme('monokai-dark')">
|
|
<div class="theme-preview" style="background: #1e1e1e;">
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #a6e22e;"></div>
|
|
<div class="theme-preview-box" style="background: #66d9ef;"></div>
|
|
<div class="theme-preview-box" style="background: #fd971f;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #f92672;"></div>
|
|
<div class="theme-preview-box" style="background: #ae81ff;"></div>
|
|
<div class="theme-preview-box" style="background: #e6db74;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #2d2d2d;"></div>
|
|
<div class="theme-preview-box" style="background: #3e3e3e;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-info">
|
|
<h3>
|
|
Monokai Dark
|
|
<span class="active-indicator" id="badge-monokai-dark" style="display: none;">ACTIF</span>
|
|
</h3>
|
|
<p>Thème sombre par défaut avec palette Monokai classique</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monokai Light -->
|
|
<div class="theme-card" onclick="applyTheme('monokai-light')">
|
|
<div class="theme-preview" style="background: #f9f9f9;">
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #7cb82f;"></div>
|
|
<div class="theme-preview-box" style="background: #0099cc;"></div>
|
|
<div class="theme-preview-box" style="background: #d87b18;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #d81857;"></div>
|
|
<div class="theme-preview-box" style="background: #8b5fd8;"></div>
|
|
<div class="theme-preview-box" style="background: #b8a900;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #ffffff;"></div>
|
|
<div class="theme-preview-box" style="background: #e8e8e8;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-info">
|
|
<h3>
|
|
Monokai Light
|
|
<span class="active-indicator" id="badge-monokai-light" style="display: none;">ACTIF</span>
|
|
</h3>
|
|
<p>Variante claire du thème Monokai pour environnements lumineux</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gruvbox Dark -->
|
|
<div class="theme-card" onclick="applyTheme('gruvbox-dark')">
|
|
<div class="theme-preview" style="background: #282828;">
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #b8bb26;"></div>
|
|
<div class="theme-preview-box" style="background: #83a598;"></div>
|
|
<div class="theme-preview-box" style="background: #fe8019;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #fb4934;"></div>
|
|
<div class="theme-preview-box" style="background: #d3869b;"></div>
|
|
<div class="theme-preview-box" style="background: #fabd2f;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #3c3836;"></div>
|
|
<div class="theme-preview-box" style="background: #504945;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-info">
|
|
<h3>
|
|
Gruvbox Dark
|
|
<span class="active-indicator" id="badge-gruvbox-dark" style="display: none;">ACTIF</span>
|
|
</h3>
|
|
<p>Palette chaleureuse et rétro inspirée de Gruvbox</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gruvbox Light -->
|
|
<div class="theme-card" onclick="applyTheme('gruvbox-light')">
|
|
<div class="theme-preview" style="background: #fbf1c7;">
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #98971a;"></div>
|
|
<div class="theme-preview-box" style="background: #458588;"></div>
|
|
<div class="theme-preview-box" style="background: #d65d0e;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #cc241d;"></div>
|
|
<div class="theme-preview-box" style="background: #b16286;"></div>
|
|
<div class="theme-preview-box" style="background: #d79921;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #f9f5d7;"></div>
|
|
<div class="theme-preview-box" style="background: #ebdbb2;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-info">
|
|
<h3>
|
|
Gruvbox Light
|
|
<span class="active-indicator" id="badge-gruvbox-light" style="display: none;">ACTIF</span>
|
|
</h3>
|
|
<p>Variante claire du thème Gruvbox, chaleureuse et rétro</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mix Monokai-Gruvbox -->
|
|
<div class="theme-card" onclick="applyTheme('mix-monokai-gruvbox')">
|
|
<div class="theme-preview" style="background: #1e1e1e;">
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #b8bb26;"></div>
|
|
<div class="theme-preview-box" style="background: #83a598;"></div>
|
|
<div class="theme-preview-box" style="background: #fe8019;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #fb4934;"></div>
|
|
<div class="theme-preview-box" style="background: #d3869b;"></div>
|
|
<div class="theme-preview-box" style="background: #fabd2f;"></div>
|
|
</div>
|
|
<div class="theme-preview-row">
|
|
<div class="theme-preview-box" style="background: #2d2d2d;"></div>
|
|
<div class="theme-preview-box" style="background: #3e3e3e;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-info">
|
|
<h3>
|
|
Mix Monokai-Gruvbox
|
|
<span class="active-indicator" id="badge-mix-monokai-gruvbox" style="display: none;">ACTIF</span>
|
|
</h3>
|
|
<p>Hybride : fonds Monokai sombres + couleurs chaleureuses Gruvbox</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sample Components -->
|
|
<div class="card">
|
|
<div class="card-header">📦 Aperçu des composants</div>
|
|
<div class="card-body">
|
|
<div style="display: grid; gap: 1rem;">
|
|
<!-- Buttons -->
|
|
<div>
|
|
<h4 style="color: var(--text-secondary); margin-bottom: 0.5rem;">Boutons</h4>
|
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
|
<button class="btn btn-primary">Primary</button>
|
|
<button class="btn btn-secondary">Secondary</button>
|
|
<button class="btn btn-danger">Danger</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Badges -->
|
|
<div>
|
|
<h4 style="color: var(--text-secondary); margin-bottom: 0.5rem;">Badges</h4>
|
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
|
<span class="badge badge-success">Success</span>
|
|
<span class="badge badge-warning">Warning</span>
|
|
<span class="badge badge-danger">Danger</span>
|
|
<span class="badge badge-info">Info</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div>
|
|
<h4 style="color: var(--text-secondary); margin-bottom: 0.5rem;">Formulaire</h4>
|
|
<div class="form-group">
|
|
<label class="form-label">Exemple de champ</label>
|
|
<input type="text" class="form-control" placeholder="Entrez du texte...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Sélection</label>
|
|
<select class="form-control">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>© 2025 Linux BenchTools - Theme Preview</p>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/theme-manager.js"></script>
|
|
<script src="js/icon-manager.js"></script>
|
|
<script src="js/utils.js"></script>
|
|
<script>
|
|
function applyTheme(themeName) {
|
|
if (window.ThemeManager) {
|
|
window.ThemeManager.applyTheme(themeName);
|
|
updateActiveIndicators(themeName);
|
|
|
|
if (window.BenchUtils && window.BenchUtils.showToast) {
|
|
window.BenchUtils.showToast(
|
|
`Thème "${window.ThemeManager.themes[themeName].name}" appliqué !`,
|
|
'success'
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateActiveIndicators(activeTheme) {
|
|
// Hide all indicators
|
|
document.querySelectorAll('.active-indicator').forEach(el => {
|
|
el.style.display = 'none';
|
|
});
|
|
|
|
// Show active indicator
|
|
const activeBadge = document.getElementById(`badge-${activeTheme}`);
|
|
if (activeBadge) {
|
|
activeBadge.style.display = 'inline-block';
|
|
}
|
|
}
|
|
|
|
// Initialize active indicator on load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const currentTheme = window.ThemeManager.getCurrentTheme();
|
|
updateActiveIndicators(currentTheme);
|
|
});
|
|
|
|
// Listen for theme changes
|
|
window.addEventListener('themeChanged', (event) => {
|
|
updateActiveIndicators(event.detail.theme);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|