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) {
|
@media (max-width: 640px) {
|
||||||
.services-grid { grid-template-columns: 1fr; }
|
.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 ───────────────────────────────────────────────────────────────── -->
|
||||||
<main class="max-w-[1600px] mx-auto px-4 py-6">
|
<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 -->
|
<!-- Loader -->
|
||||||
<div id="loader" class="flex flex-col items-center justify-center py-24 gap-4">
|
<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>
|
<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