From 24460cf0b5d9c2f9436717371e2f0833f21555a7 Mon Sep 17 00:00:00 2001 From: MasterAcnolo <68693319+MasterAcnolo@users.noreply.github.com> Date: Sat, 11 Apr 2026 14:20:05 +0200 Subject: [PATCH] Refactor: Restructure HTML layout and enhance CSS styles for improved UI --- public/index.html | 160 ++++++++++++++++++++------------------- public/styles/styles.css | 94 ++++++++++++++--------- 2 files changed, 141 insertions(+), 113 deletions(-) diff --git a/public/index.html b/public/index.html index 40970a4..4814b89 100644 --- a/public/index.html +++ b/public/index.html @@ -17,20 +17,22 @@ -
-
- - - - +
+
+
+ + + + +
+
+ + + +
-
- - - -
-
- + + @@ -198,73 +200,75 @@
-
+
+
+

Freedom Loader

+

Because why not?

+ +
+
+ + +
+ + + + + +
+ +
+ +
+ Will be save on + +
+ +
+
+
+ +
+
+
+
+ +
+ +
+ + + +
+
+ + -
-

Freedom Loader

-

Because why not?

-
- -
-
- -
- - - - - -
-
- -
- Will be save on - -
- -
-
-
- -
-
-
-
- -
- -
- - - -
-
- - +

Because Why Not ?

diff --git a/public/styles/styles.css b/public/styles/styles.css index 2a4aa3e..665485d 100644 --- a/public/styles/styles.css +++ b/public/styles/styles.css @@ -24,31 +24,6 @@ opacity: 1; } -html,body{ - margin: 0; - padding: 0; - scroll-behavior: smooth; - /*outline: 2px solid red; /*<-- Utile pour le debug ça */ - font-family: "Poppins", sans-serif; - font-weight: 500; - font-style: normal; -} - -body { - margin: 0; - background-color: var(--background-color); - width: 100%; - height: 100%; - color: var(--default-text-color); - display: flex; - justify-content: center; - align-items: center; - display: flex; - flex-direction: column; - align-items: center; - -} - /* Because why not */ #reference{ position: fixed; @@ -59,18 +34,67 @@ body { color: #b0b0b02f; } -/* Scrollbar globale pour Chromium/Electron */ -body::-webkit-scrollbar { + +html,body{ + margin: 0; + padding: 0; + scroll-behavior: smooth; + /*outline: 2px solid red; /*<-- Utile pour le debug ça */ + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: normal; +} + +html { + height: 100%; +} + +body { + margin: 0; + padding: 0; + background-color: var(--background-color); + width: 100%; + height: 100%; + color: var(--default-text-color); + display: flex; + flex-direction: column; + align-items: center; + position: relative; +} + +header { + position: fixed; + top: 0; + width: 100%; + z-index: 1100; + height: 48px; +} + +main { + width: 100%; + height: calc(100vh - 48px); + margin-top: 48px; + overflow-y: auto; + overflow-x: hidden; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + padding: 0; +} + +/* Scrollbar pour main */ +main::-webkit-scrollbar { width: 10px; height: 10px; } -body::-webkit-scrollbar-track { +main::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 5px; } -body::-webkit-scrollbar-thumb { +main::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 5px; border: 2px solid transparent; @@ -78,29 +102,29 @@ body::-webkit-scrollbar-thumb { transition: background-color 0.2s ease, transform 0.2s ease; } -body::-webkit-scrollbar-thumb:hover { +main::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.35); transform: scaleX(1.05); } /* Thème clair */ -body.light::-webkit-scrollbar-track { +body.light main::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); } -body.light::-webkit-scrollbar-thumb { +body.light main::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.25); } -body.light::-webkit-scrollbar-thumb:hover { +body.light main::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.45); } .container{ - margin-top: 50px; + margin-top: 0px; } -header p{ +#subtitle{ color: var(--subtitle-color); }