admin/syscmd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout page d'accueil avec grille de cartes OS + recherche globale

Browse Source
This commit is contained in:
hermes-agent
2026-08-14 13:42:04 +02:00
parent c1c6b0b61e
commit 6b401da62e
2 changed files with 350 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+69 -11
View File
@@ -73,6 +73,23 @@
.dot-orange { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
.breadcrumb { font-size: 0.75rem; color: #94a3b8; display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.breadcrumb .current { color: #0f172a; font-weight: 500; }
.os-card {
border-radius: 10px; border: 1px solid #e2e8f0;
background: white; cursor: pointer;
transition: all 0.15s; padding: 16px;
}
.os-card:hover { border-color: #0f172a; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.os-card .icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.os-card .stat { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.os-card .sublabel { font-size: 0.6875rem; color: #94a3b8; }
.placeholder-card { opacity: 0.6; }
.placeholder-card:hover { opacity: 0.8; }
.home-btn {
padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 500;
cursor: pointer; transition: all 0.12s; color: #64748b;
display: flex; align-items: center; gap: 5px;
}
.home-btn:hover { background: #f1f5f9; color: #0f172a; }
</style>
</head>
<body class="bg-[#f8fafc] text-[#0f172a]">
@@ -101,33 +118,74 @@
</aside>
<!-- MAIN -->
<main class="flex-1 p-6 max-w-5xl">
<div class="flex items-center justify-between mb-4">
<div>
<div class="breadcrumb" id="breadcrumb"></div>
<h1 class="text-xl font-bold" id="os-title"></h1>
<p class="text-xs text-[#64748b] mt-0.5" id="os-sub"></p>
<main class="flex-1 p-6 max-w-5xl" id="main-content">
<!-- HEADER (visible on both views) -->
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="home-btn" id="home-btn" onclick="showHome()" style="display:none">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
Accueil
</div>
<div>
<div class="breadcrumb" id="breadcrumb"></div>
<h1 class="text-xl font-bold" id="os-title"></h1>
<p class="text-xs text-[#64748b] mt-0.5" id="os-sub"></p>
</div>
</div>
<div class="relative">
<svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#94a3b8]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input class="search-input" id="search" placeholder="Chercher une commande..." oninput="filterCommands(this.value)">
<input class="search-input" id="search" placeholder="Chercher une commande..." oninput="if(currentSection)filterCommands(this.value);else globalSearch(this.value)">
</div>
</div>
<div class="flex gap-1 flex-wrap mb-3" id="tabs"></div>
<!-- SECTION TABS (hidden on home) -->
<div class="flex gap-1 flex-wrap mb-3" id="tabs" style="display:none"></div>
<div class="flex gap-3 items-center mb-3 text-xs text-[#64748b]">
<!-- STATS BAR (hidden on home) -->
<div class="flex gap-3 items-center mb-3 text-xs text-[#64748b]" id="stats-bar" style="display:none">
<span id="shown">0</span>
<span>commandes</span>
<span>·</span>
<span id="filter-info">Aucun filtre</span>
</div>
<div class="bg-white border border-[#e2e8f0] rounded-xl overflow-hidden">
<!-- COMMANDS LIST (hidden on home) -->
<div class="bg-white border border-[#e2e8f0] rounded-xl overflow-hidden" id="cmds-container" style="display:none">
<div id="cmds"></div>
</div>
<div class="mt-4 text-center text-[0.6875rem] text-[#94a3b8]">
<!-- HOME CONTENT -->
<div id="home-content">
<!-- Hero -->
<div class="mb-8 text-center">
<h2 class="text-2xl font-bold mb-2">SysCmd</h2>
<p class="text-sm text-[#64748b] max-w-xl mx-auto">
Référence de commandes multi-plateforme. Cliquez sur un OS pour voir ses commandes.
</p>
<div class="mt-3 flex justify-center gap-2 text-xs text-[#94a3b8]">
<span class="flex items-center gap-1"><span class="dot-green inline-block"></span> Données disponibles</span>
<span class="flex items-center gap-1"><span class="dot-orange inline-block"></span> Catégorie</span>
<span class="flex items-center gap-1"><span class="dot-gray inline-block"></span> À venir</span>
</div>
</div>
<!-- Global search results -->
<div id="global-search-results" class="mb-6" style="display:none">
<div class="bg-white border border-[#e2e8f0] rounded-xl overflow-hidden">
<div id="global-cmds"></div>
</div>
</div>
<!-- STATS ROW -->
<div class="grid grid-cols-4 gap-3 mb-6 text-center" id="stats-row"></div>
<!-- CARD GRID -->
<div id="card-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3"></div>
</div>
<div class="mt-4 text-center text-[0.6875rem] text-[#94a3b8]" id="footer-hint">
Cliquez sur une commande pour la copier
</div>
</main>