feat: Ajout de la section 'Mes Apps' avec 4 tuiles interactives
- 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
co-authored by
Cédric TOMAZ
Cédric TOMAZ
parent
43a3c2e453
commit
d136f57551
@@ -155,3 +155,43 @@
|
||||
@media (max-width: 640px) {
|
||||
.services-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ── App cards (section Mes Apps) ─────────────────────────────────────────── */
|
||||
.app-card {
|
||||
background: #161b22;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
border-color: #8b5cf6;
|
||||
box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.app-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #c4b5fd;
|
||||
background: #8b5cf610;
|
||||
border: 1px solid #8b5cf630;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-btn:hover {
|
||||
background: #8b5cf620;
|
||||
border-color: #8b5cf6;
|
||||
color: #e9d5ff;
|
||||
box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user