perco/percohub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Ajout de la section 'Mes Apps' avec 4 tuiles interactives

Browse Source 
- Ajout de la section '🚀 Mes Applications' en haut de index.php
- 4 tuiles pour CronHub, GarageManager, PercoMemo et Planka
- Design cohérent avec le thème dark existant (bg #161b22, borders #30363d)
- Effet hover avec bordure violette et lueur subtile
- Grid responsive: 4 colonnes desktop, 2 colonnes mobile
- Boutons 'Ouvrir' qui ouvrent les apps dans un nouvel onglet
- Styles CSS propres et commentés dans assets/style.css

Co-authored-by: Cédric TOMAZ <percolouco@users.noreply.github.com>
This commit is contained in:
Cursor Agent
2026-03-18 21:06:05 +00:00
co-authored by Cédric TOMAZ
parent 43a3c2e453
commit d136f57551
2 changed files with 146 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+106
View File
@@ -54,6 +54,112 @@
<!-- ── Main ───────────────────────────────────────────────────────────────── -->
<main class="max-w-[1600px] mx-auto px-4 py-6">
<!-- ── Mes Applications ────────────────────────────────────────────────────── -->
<section class="mb-10">
<!-- En-tête de section -->
<div class="section-header">
<h2 class="section-title">🚀 Mes Applications</h2>
<span class="section-count">4</span>
</div>
<!-- Grille des applications -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- App 1: CronHub -->
<div class="app-card group">
<div class="flex flex-col h-full">
<!-- Icône & Titre -->
<div class="flex items-center gap-3 mb-3">
<span class="text-3xl">⏰</span>
<h3 class="text-base font-bold text-white">CronHub</h3>
</div>
<!-- Description -->
<p class="text-sm text-gray-400 mb-4 flex-grow">
Gestionnaire de cron jobs
</p>
<!-- Bouton -->
<a href="https://cronhub.nas.percolouco.com" target="_blank" rel="noopener noreferrer"
class="app-btn">
Ouvrir
<span class="text-xs">→</span>
</a>
</div>
</div>
<!-- App 2: GarageManager -->
<div class="app-card group">
<div class="flex flex-col h-full">
<!-- Icône & Titre -->
<div class="flex items-center gap-3 mb-3">
<span class="text-3xl">🚗</span>
<h3 class="text-base font-bold text-white">GarageManager</h3>
</div>
<!-- Description -->
<p class="text-sm text-gray-400 mb-4 flex-grow">
Gestion véhicules & entretiens
</p>
<!-- Bouton -->
<a href="https://garage.nas.percolouco.com" target="_blank" rel="noopener noreferrer"
class="app-btn">
Ouvrir
<span class="text-xs">→</span>
</a>
</div>
</div>
<!-- App 3: PercoMemo -->
<div class="app-card group">
<div class="flex flex-col h-full">
<!-- Icône & Titre -->
<div class="flex items-center gap-3 mb-3">
<span class="text-3xl">📝</span>
<h3 class="text-base font-bold text-white">PercoMemo</h3>
</div>
<!-- Description -->
<p class="text-sm text-gray-400 mb-4 flex-grow">
Mémos & notes
</p>
<!-- Bouton -->
<a href="http://192.168.1.29:9400" target="_blank" rel="noopener noreferrer"
class="app-btn">
Ouvrir
<span class="text-xs">→</span>
</a>
</div>
</div>
<!-- App 4: Planka -->
<div class="app-card group">
<div class="flex flex-col h-full">
<!-- Icône & Titre -->
<div class="flex items-center gap-3 mb-3">
<span class="text-3xl">📋</span>
<h3 class="text-base font-bold text-white">Planka</h3>
</div>
<!-- Description -->
<p class="text-sm text-gray-400 mb-4 flex-grow">
Kanban & projets
</p>
<!-- Bouton -->
<a href="https://planka.nas.percolouco.com" target="_blank" rel="noopener noreferrer"
class="app-btn">
Ouvrir
<span class="text-xs">→</span>
</a>
</div>
</div>
</div>
</section>
<!-- Loader -->
<div id="loader" class="flex flex-col items-center justify-center py-24 gap-4">
<div class="w-8 h-8 border-4 border-violet-500 border-t-transparent rounded-full animate-spin"></div>