From 78d8806d053d4e33bbfb8426180b197cd4d7e872 Mon Sep 17 00:00:00 2001 From: mrtoine Date: Thu, 11 Sep 2025 18:00:36 +0200 Subject: [PATCH] update --- data/frontend/index.html | 143 ++++++++++++ data/frontend/static/css/components.css | 280 ++++++++++++++++++++++++ data/frontend/static/css/layout.css | 212 ++++++++++++++++++ data/frontend/static/css/style.css | 3 + data/frontend/static/css/variables.css | 59 +++++ 5 files changed, 697 insertions(+) create mode 100644 data/frontend/index.html create mode 100644 data/frontend/static/css/components.css create mode 100644 data/frontend/static/css/layout.css create mode 100644 data/frontend/static/css/style.css create mode 100644 data/frontend/static/css/variables.css diff --git a/data/frontend/index.html b/data/frontend/index.html new file mode 100644 index 0000000..e60403c --- /dev/null +++ b/data/frontend/index.html @@ -0,0 +1,143 @@ + + + + + + + + + + + + Dashboard Server-Home - Toine + + +
+ +
+
+
+ +
+
+

Dashboard du Serveur Familial

+

Bienvenue dans votre hub personnel, Toine

+
+
+
+ En ligne +
+
+
+ +
+ +
+

+ + Mes Services +

+
+
+
+ +
+
+

Nextcloud

+

Stockage & Synchronisation

+ + + Accéder + +
+
+ +
+
+ +
+
+

Wekan

+

Gestion de Projets

+ + + Accéder + +
+
+ +
+
+ +
+
+

Forgejo

+

Dépôts Git

+ + + Accéder + +
+
+ +
+
+ +
+
+

Assistant IA

+

Intelligence Artificielle

+ + + Accéder + +
+
+
+
+ + +
+

+ + Statistiques Système +

+
+
+
+ +
+
+
Temps de fonctionnement
+
Chargement...
+
+
+ +
+
+ +
+
+
Mémoire RAM
+
Chargement...
+
+
+ +
+
+ +
+
+
Utilisation CPU
+
Chargement...
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/data/frontend/static/css/components.css b/data/frontend/static/css/components.css new file mode 100644 index 0000000..6b2e9cc --- /dev/null +++ b/data/frontend/static/css/components.css @@ -0,0 +1,280 @@ +/* Cartes de services */ +.service-card { + background: var(--card); + border-radius: var(--border-radius); + padding: var(--padding-base); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: var(--shadow-medium); + transition: all var(--transition-medium); + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); +} + +.service-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--accent), var(--accent-hover)); + transform: scaleX(0); + transition: transform var(--transition-medium); +} + +.service-card:hover::before { + transform: scaleX(1); +} + +.service-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-large), var(--shadow-glow); + background: var(--card-hover); + border-color: rgba(79, 195, 247, 0.3); +} + +.card-icon { + font-size: 3rem; + margin-bottom: var(--gap-small); + transition: all var(--transition-medium); + display: flex; + justify-content: center; +} + +.service-card:hover .card-icon { + transform: scale(1.1) rotate(-5deg); +} + +.nextcloud .card-icon { color: var(--nextcloud); } +.wekan .card-icon { color: var(--wekan); } +.forgejo .card-icon { color: var(--forgejo); } +.ai-assistant .card-icon { color: var(--ai); } + +.card-content { + text-align: center; +} + +.card-content h3 { + font-size: 1.25rem; + font-weight: var(--font-weight-semibold); + margin-bottom: 0.5rem; + color: var(--text); +} + +.card-content p { + color: var(--text-secondary); + font-size: 0.9rem; + margin-bottom: var(--gap-small); + font-weight: var(--font-weight-light); +} + +.card-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--accent); + text-decoration: none; + font-weight: var(--font-weight-medium); + font-size: 0.95rem; + padding: 0.75rem 1.5rem; + border-radius: var(--border-radius-small); + background: rgba(79, 195, 247, 0.1); + border: 1px solid rgba(79, 195, 247, 0.2); + transition: all var(--transition-fast); + margin-top: auto; +} + +.card-link:hover { + background: rgba(79, 195, 247, 0.2); + border-color: var(--accent); + transform: scale(1.05); + text-decoration: none; +} + +/* Cartes de statistiques */ +.stat-card { + background: var(--card); + border-radius: var(--border-radius); + padding: var(--padding-base); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: var(--shadow-medium); + display: flex; + align-items: center; + gap: var(--gap-medium); + transition: all var(--transition-medium); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; +} + +.stat-card::after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 4px; + background: linear-gradient(to bottom, var(--accent), var(--accent-hover)); + opacity: 0; + transition: opacity var(--transition-medium); +} + +.stat-card:hover::after { + opacity: 1; +} + +.stat-card:hover { + transform: translateX(5px); + box-shadow: var(--shadow-large); + background: var(--card-hover); + border-color: rgba(79, 195, 247, 0.3); +} + +.stat-icon { + width: 60px; + height: 60px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + color: white; + position: relative; + animation: rotate 10s linear infinite; +} + +@keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.stat-icon.uptime { + background: linear-gradient(45deg, var(--info), #1976d2); + box-shadow: 0 0 20px rgba(33, 150, 243, 0.3); +} + +.stat-icon.memory { + background: linear-gradient(45deg, var(--success), #388e3c); + box-shadow: 0 0 20px rgba(76, 175, 80, 0.3); +} + +.stat-icon.cpu { + background: linear-gradient(45deg, var(--warning), #f57c00); + box-shadow: 0 0 20px rgba(255, 152, 0, 0.3); +} + +.stat-content { + flex: 1; +} + +.stat-label { + font-size: 0.9rem; + color: var(--text-secondary); + font-weight: var(--font-weight-light); + margin-bottom: 0.25rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.stat-value { + font-size: 1.5rem; + font-weight: var(--font-weight-bold); + color: var(--text); + letter-spacing: -0.5px; +} + +/* Anciens styles pour compatibilité */ +.card { + background: var(--card); + border-radius: var(--border-radius); + padding: var(--padding-base); + text-align: center; + cursor: pointer; + transition: all var(--transition-medium); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: var(--shadow-medium); +} + +.card:hover { + background: var(--card-hover); + transform: translateY(-4px); + box-shadow: var(--shadow-large); +} + +a { + color: var(--accent); + text-decoration: none; + font-weight: var(--font-weight-medium); + transition: all var(--transition-fast); +} + +a:hover { + color: var(--accent-hover); + text-decoration: underline; +} + +.stats { + background: var(--card); + padding: var(--padding-base); + border-radius: var(--border-radius); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: var(--shadow-medium); +} + +.stat-item { + margin-bottom: 0.5rem; + padding: 0.5rem; + border-radius: var(--border-radius-small); + transition: background var(--transition-fast); +} + +.stat-item:hover { + background: rgba(79, 195, 247, 0.1); +} + +/* Animations d'entrée pour les cartes */ +.service-card, +.stat-card { + animation: slideInUp 0.6s ease-out forwards; +} + +@keyframes slideInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Effet de survol globaux */ +.service-card:hover .card-content h3, +.stat-card:hover .stat-value { + color: var(--accent); + transition: color var(--transition-fast); +} + +/* Responsive pour les cartes */ +@media (max-width: 768px) { + .service-card, + .stat-card { + padding: var(--padding-small); + } + + .card-icon { + font-size: 2.5rem; + } + + .stat-icon { + width: 50px; + height: 50px; + font-size: 1.25rem; + } + + .stat-value { + font-size: 1.25rem; + } +} \ No newline at end of file diff --git a/data/frontend/static/css/layout.css b/data/frontend/static/css/layout.css new file mode 100644 index 0000000..2092613 --- /dev/null +++ b/data/frontend/static/css/layout.css @@ -0,0 +1,212 @@ +/* Réinitialisation et base */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: var(--font-main); + background: var(--bg); + color: var(--text); + line-height: 1.6; + min-height: 100vh; + position: relative; + overflow-x: hidden; +} + +/* Animation de fond */ +.background-animation { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(circle at 20% 80%, rgba(79, 195, 247, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(156, 39, 176, 0.1) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(76, 175, 80, 0.05) 0%, transparent 50%); + z-index: -1; + animation: float 20s ease-in-out infinite; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 33% { transform: translateY(-20px) rotate(1deg); } + 66% { transform: translateY(10px) rotate(-1deg); } +} + +/* Header moderne */ +.header-modern { + background: rgba(44, 44, 62, 0.95); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + position: sticky; + top: 0; + z-index: 100; + box-shadow: var(--shadow-medium); +} + +.header-content { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; + padding: var(--padding-base) var(--padding-large); + gap: var(--gap-medium); +} + +.header-icon { + font-size: 2.5rem; + color: var(--accent); + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +.header-text h1 { + font-size: 1.8rem; + font-weight: var(--font-weight-bold); + margin-bottom: 0.25rem; + background: linear-gradient(45deg, var(--accent), #29b6f6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.header-subtitle { + color: var(--text-secondary); + font-size: 0.95rem; + font-weight: var(--font-weight-light); +} + +.status-indicator { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9rem; + color: var(--text-secondary); +} + +.status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + animation: blink 2s infinite; +} + +.status-dot.online { + background-color: var(--success); + box-shadow: 0 0 10px rgba(76, 175, 80, 0.5); +} + +@keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +/* Container principal */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: var(--padding-large); + display: flex; + flex-direction: column; + gap: var(--gap-large); +} + +/* Sections */ +section { + animation: fadeInUp 0.6s ease-out forwards; + opacity: 0; + transform: translateY(30px); +} + +section:nth-child(1) { animation-delay: 0.1s; } +section:nth-child(2) { animation-delay: 0.2s; } +section:nth-child(3) { animation-delay: 0.3s; } + +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +.section-title { + display: flex; + align-items: center; + gap: var(--gap-small); + font-size: 1.5rem; + font-weight: var(--font-weight-semibold); + margin-bottom: var(--gap-medium); + color: var(--text); +} + +.section-title i { + color: var(--accent); + font-size: 1.2rem; +} + +/* Grilles */ +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--gap-medium); +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--gap-medium); +} + +/* Footer */ +.footer { + margin-top: var(--gap-large); + padding: var(--padding-base); + text-align: center; + color: var(--text-secondary); + font-size: 0.9rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(44, 44, 62, 0.3); +} + +.footer i { + color: var(--error); + animation: heartbeat 1.5s ease-in-out infinite; +} + +@keyframes heartbeat { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +/* Responsive */ +@media (max-width: 768px) { + .header-content { + flex-direction: column; + text-align: center; + gap: var(--gap-small); + } + + .header-text h1 { + font-size: 1.5rem; + } + + .services-grid { + grid-template-columns: 1fr; + } + + .stats-grid { + grid-template-columns: 1fr; + } + + .container { + padding: var(--padding-base); + } +} \ No newline at end of file diff --git a/data/frontend/static/css/style.css b/data/frontend/static/css/style.css new file mode 100644 index 0000000..fe68408 --- /dev/null +++ b/data/frontend/static/css/style.css @@ -0,0 +1,3 @@ +@import url('./variables.css'); +@import url('./layout.css'); +@import url('./components.css'); \ No newline at end of file diff --git a/data/frontend/static/css/variables.css b/data/frontend/static/css/variables.css new file mode 100644 index 0000000..c155626 --- /dev/null +++ b/data/frontend/static/css/variables.css @@ -0,0 +1,59 @@ +:root { + /* Couleurs principales */ + --bg: linear-gradient(135deg, #1e1e2f 0%, #16213e 100%); + --bg-solid: #1e1e2f; + --card: rgba(44, 44, 62, 0.8); + --card-hover: rgba(58, 58, 82, 0.9); + --text: #ffffff; + --text-secondary: rgba(255, 255, 255, 0.7); + --accent: #4fc3f7; + --accent-hover: #29b6f6; + --hover: #3a3a52; + + /* Couleurs de service */ + --nextcloud: #0082c9; + --wekan: #d32f2f; + --forgejo: #609926; + --ai: #9c27b0; + + /* Couleurs de statut */ + --success: #4caf50; + --warning: #ff9800; + --error: #f44336; + --info: #2196f3; + + /* Typographie */ + --font-main: 'Inter', 'Segoe UI', sans-serif; + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + /* Espacements */ + --border-radius: 16px; + --border-radius-small: 8px; + --border-radius-large: 24px; + --padding-base: 1.5rem; + --padding-small: 1rem; + --padding-large: 2rem; + --gap-small: 1rem; + --gap-medium: 1.5rem; + --gap-large: 2rem; + + /* Ombres */ + --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.1); + --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15); + --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.2); + --shadow-glow: 0 0 20px rgba(79, 195, 247, 0.3); + + /* Transitions */ + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; + + /* Breakpoints */ + --mobile: 768px; + --tablet: 1024px; + --desktop: 1200px; +} \ No newline at end of file