150 lines
5.7 KiB
HTML
150 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test Icon Packs - Linux BenchTools</title>
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/components.css">
|
|
</head>
|
|
<body class="test-icons-page">
|
|
<div class="container test-icons-container">
|
|
<div class="test-icons-hero">
|
|
<div>
|
|
<div class="test-icons-eyebrow">Icon Lab</div>
|
|
<h1>🧪 Test des packs d'icônes</h1>
|
|
<p class="test-icons-subtitle">Compare rapidement chaque pack, avec un rendu aligné sur le thème.</p>
|
|
</div>
|
|
<div class="test-icons-badge">Preview Live</div>
|
|
</div>
|
|
|
|
<div class="card test-icons-card">
|
|
<div class="card-header">Sélection du pack</div>
|
|
<div class="card-body">
|
|
<div class="test-icons-pack">
|
|
<label class="test-icons-label" for="packSelector">Pack d'icônes</label>
|
|
<div class="test-icons-pack-row">
|
|
<select id="packSelector" class="form-control">
|
|
<option value="emoji">Emojis Unicode</option>
|
|
<option value="fontawesome-solid">FontAwesome Solid</option>
|
|
<option value="fontawesome-regular">FontAwesome Regular</option>
|
|
<option value="icons8">Icons8 PNG</option>
|
|
</select>
|
|
<button class="btn btn-primary" onclick="applyTestPack()" data-icon="check">
|
|
<span class="btn-icon-wrapper"></span> Appliquer le pack
|
|
</button>
|
|
</div>
|
|
<div class="test-icons-hint">Les icônes sont appliquées instantanément sur les boutons ci-dessous.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card test-icons-card">
|
|
<div class="card-header">Boutons de test</div>
|
|
<div class="card-body">
|
|
<div class="test-icons-actions">
|
|
<button class="btn btn-primary" data-icon="add">
|
|
<span class="btn-icon-wrapper"></span> Ajouter
|
|
</button>
|
|
<button class="btn btn-secondary" data-icon="edit">
|
|
<span class="btn-icon-wrapper"></span> Éditer
|
|
</button>
|
|
<button class="btn btn-danger" data-icon="delete">
|
|
<span class="btn-icon-wrapper"></span> Supprimer
|
|
</button>
|
|
<button class="btn btn-primary" data-icon="save">
|
|
<span class="btn-icon-wrapper"></span> Enregistrer
|
|
</button>
|
|
<button class="btn btn-primary" data-icon="upload">
|
|
<span class="btn-icon-wrapper"></span> Upload
|
|
</button>
|
|
<button class="btn btn-secondary" data-icon="download">
|
|
<span class="btn-icon-wrapper"></span> Download
|
|
</button>
|
|
<button class="btn btn-primary" data-icon="image">
|
|
<span class="btn-icon-wrapper"></span> Image
|
|
</button>
|
|
<button class="btn btn-secondary" data-icon="file">
|
|
<span class="btn-icon-wrapper"></span> Fichier
|
|
</button>
|
|
<button class="btn btn-primary" data-icon="link">
|
|
<span class="btn-icon-wrapper"></span> Lien
|
|
</button>
|
|
<button class="btn btn-secondary" data-icon="refresh">
|
|
<span class="btn-icon-wrapper"></span> Rafraîchir
|
|
</button>
|
|
<button class="btn btn-primary" data-icon="search">
|
|
<span class="btn-icon-wrapper"></span> Rechercher
|
|
</button>
|
|
<button class="btn btn-secondary" data-icon="settings">
|
|
<span class="btn-icon-wrapper"></span> Paramètres
|
|
</button>
|
|
<button class="btn btn-secondary" data-icon="close">
|
|
<span class="btn-icon-wrapper"></span> Fermer
|
|
</button>
|
|
<button class="btn btn-primary" data-icon="check">
|
|
<span class="btn-icon-wrapper"></span> Valider
|
|
</button>
|
|
<button class="btn btn-secondary" data-icon="copy">
|
|
<span class="btn-icon-wrapper"></span> Copier
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card test-icons-card">
|
|
<div class="card-header">Informations de debug</div>
|
|
<div class="card-body">
|
|
<div id="debugInfo" class="test-icons-debug"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/theme-manager.js"></script>
|
|
<script src="js/icon-manager.js"></script>
|
|
<script src="js/utils.js"></script>
|
|
<script>
|
|
function applyTestPack() {
|
|
const pack = document.getElementById('packSelector').value;
|
|
window.IconManager.applyPack(pack);
|
|
updateDebugInfo();
|
|
|
|
// Re-initialize icons
|
|
if (window.initializeButtonIcons) {
|
|
window.initializeButtonIcons();
|
|
}
|
|
}
|
|
|
|
function updateDebugInfo() {
|
|
const currentPack = window.IconManager.getCurrentPack();
|
|
const packInfo = window.IconManager.getPackInfo(currentPack);
|
|
|
|
let info = `Pack actuel: ${currentPack}\n`;
|
|
info += `Nom: ${packInfo.name}\n`;
|
|
info += `Description: ${packInfo.description}\n\n`;
|
|
|
|
info += `Icônes disponibles:\n`;
|
|
Object.keys(packInfo.icons).forEach(iconName => {
|
|
const icon = packInfo.icons[iconName];
|
|
info += ` - ${iconName}: ${icon.substring(0, 50)}${icon.length > 50 ? '...' : ''}\n`;
|
|
});
|
|
|
|
document.getElementById('debugInfo').textContent = info;
|
|
}
|
|
|
|
// Initialize on load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const currentPack = window.IconManager.getCurrentPack();
|
|
document.getElementById('packSelector').value = currentPack;
|
|
updateDebugInfo();
|
|
});
|
|
|
|
// Listen for pack changes
|
|
window.addEventListener('iconPackChanged', function(event) {
|
|
console.log('Pack changed to:', event.detail.pack);
|
|
updateDebugInfo();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|