Linus-Enjoyer/Freedom-Loader
1
0
Fork 0
mirror of https://github.com/MasterAcnolo/Freedom-Loader.git synced 2026-07-29 18:25:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Restructure HTML layout and enhance CSS styles for improved UI

Browse Source
This commit is contained in:
MasterAcnolo
2026-04-11 14:20:05 +02:00
parent a3c1b1d753
commit 24460cf0b5
2 changed files with 141 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html
View File

@@ -17,6 +17,7 @@
</head> </head>
<body> <body>
<header>
<div class="topbar" id="topbar"> <div class="topbar" id="topbar">
<div class="custom-controls"> <div class="custom-controls">
<button id="devtools-btn" title="Dev Tools">Tools</button> <button id="devtools-btn" title="Dev Tools">Tools</button>
@@ -30,6 +31,7 @@
<button id="close-btn" title="Fermer"><img src="assets/icon/close.svg"></button> <button id="close-btn" title="Fermer"><img src="assets/icon/close.svg"></button>
</div> </div>
</div> </div>
</header>
<button class="settings-button" id="settings-button"> <button class="settings-button" id="settings-button">
<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5-q</title><path d="M262.29,192.31a64,64,0,1,0,57.4,57.4A64.13,64.13,0,0,0,262.29,192.31ZM416.39,256a154.34,154.34,0,0,1-1.53,20.79l45.21,35.46A10.81,10.81,0,0,1,462.52,326l-42.77,74a10.81,10.81,0,0,1-13.14,4.59l-44.9-18.08a16.11,16.11,0,0,0-15.17,1.75A164.48,164.48,0,0,1,325,400.8a15.94,15.94,0,0,0-8.82,12.14l-6.73,47.89A11.08,11.08,0,0,1,298.77,470H213.23a11.11,11.11,0,0,1-10.69-8.87l-6.72-47.82a16.07,16.07,0,0,0-9-12.22,155.3,155.3,0,0,1-21.46-12.57,16,16,0,0,0-15.11-1.71l-44.89,18.07a10.81,10.81,0,0,1-13.14-4.58l-42.77-74a10.8,10.8,0,0,1,2.45-13.75l38.21-30a16.05,16.05,0,0,0,6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16,16,0,0,0-6.07-13.94l-38.19-30A10.81,10.81,0,0,1,49.48,186l42.77-74a10.81,10.81,0,0,1,13.14-4.59l44.9,18.08a16.11,16.11,0,0,0,15.17-1.75A164.48,164.48,0,0,1,187,111.2a15.94,15.94,0,0,0,8.82-12.14l6.73-47.89A11.08,11.08,0,0,1,213.23,42h85.54a11.11,11.11,0,0,1,10.69,8.87l6.72,47.82a16.07,16.07,0,0,0,9,12.22,155.3,155.3,0,0,1,21.46,12.57,16,16,0,0,0,15.11,1.71l44.89-18.07a10.81,10.81,0,0,1,13.14,4.58l42.77,74a10.8,10.8,0,0,1-2.45,13.75l-38.21,30a16.05,16.05,0,0,0-6.05,14.08C416.17,247.67,416.39,251.83,416.39,256Z" style="fill:none;stroke:var(--settings-button-text-color);stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg> <svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5-q</title><path d="M262.29,192.31a64,64,0,1,0,57.4,57.4A64.13,64.13,0,0,0,262.29,192.31ZM416.39,256a154.34,154.34,0,0,1-1.53,20.79l45.21,35.46A10.81,10.81,0,0,1,462.52,326l-42.77,74a10.81,10.81,0,0,1-13.14,4.59l-44.9-18.08a16.11,16.11,0,0,0-15.17,1.75A164.48,164.48,0,0,1,325,400.8a15.94,15.94,0,0,0-8.82,12.14l-6.73,47.89A11.08,11.08,0,0,1,298.77,470H213.23a11.11,11.11,0,0,1-10.69-8.87l-6.72-47.82a16.07,16.07,0,0,0-9-12.22,155.3,155.3,0,0,1-21.46-12.57,16,16,0,0,0-15.11-1.71l-44.89,18.07a10.81,10.81,0,0,1-13.14-4.58l-42.77-74a10.8,10.8,0,0,1,2.45-13.75l38.21-30a16.05,16.05,0,0,0,6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16,16,0,0,0-6.07-13.94l-38.19-30A10.81,10.81,0,0,1,49.48,186l42.77-74a10.81,10.81,0,0,1,13.14-4.59l44.9,18.08a16.11,16.11,0,0,0,15.17-1.75A164.48,164.48,0,0,1,187,111.2a15.94,15.94,0,0,0,8.82-12.14l6.73-47.89A11.08,11.08,0,0,1,213.23,42h85.54a11.11,11.11,0,0,1,10.69,8.87l6.72,47.82a16.07,16.07,0,0,0,9,12.22,155.3,155.3,0,0,1,21.46,12.57,16,16,0,0,0,15.11,1.71l44.89-18.07a10.81,10.81,0,0,1,13.14,4.58l42.77,74a10.8,10.8,0,0,1-2.45,13.75l-38.21,30a16.05,16.05,0,0,0-6.05,14.08C416.17,247.67,416.39,251.83,416.39,256Z" style="fill:none;stroke:var(--settings-button-text-color);stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
@@ -198,12 +200,10 @@
</div> </div>
</div> </div>
<main>
<div class="container" id="container"> <div class="container" id="container">
<header>
<h1 id="title"> Freedom Loader </h1> <h1 id="title"> Freedom Loader </h1>
<p id="subtitle"> Because why not? </p> <p id="subtitle"> Because why not? </p>
</header>
<form action="/download" method="POST" id="downloadForm"> <form action="/download" method="POST" id="downloadForm">
<div class="url-input-container"> <div class="url-input-container">
@@ -234,6 +234,7 @@
<button type="submit" onclick="startProgress()">Download</button> <button type="submit" onclick="startProgress()">Download</button>
</form> </form>
</div> </div>
<div class="download-path"> <div class="download-path">
@@ -266,6 +267,9 @@
<span id="version-badge" class="version-badge"></span> <span id="version-badge" class="version-badge"></span>
</div>
</main>
<h2 id="reference"> Because Why Not ? </h2> <h2 id="reference"> Because Why Not ? </h2>

94
public/styles/styles.css
View File

@@ -24,31 +24,6 @@
opacity: 1; 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 */ /* Because why not */
#reference{ #reference{
position: fixed; position: fixed;
@@ -59,18 +34,67 @@ body {
color: #b0b0b02f; 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; width: 10px;
height: 10px; height: 10px;
} }
body::-webkit-scrollbar-track { main::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
border-radius: 5px; border-radius: 5px;
} }
body::-webkit-scrollbar-thumb { main::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
border-radius: 5px; border-radius: 5px;
border: 2px solid transparent; border: 2px solid transparent;
@@ -78,29 +102,29 @@ body::-webkit-scrollbar-thumb {
transition: background-color 0.2s ease, transform 0.2s ease; 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); background-color: rgba(255, 255, 255, 0.35);
transform: scaleX(1.05); transform: scaleX(1.05);
} }
/* Thème clair */ /* Thème clair */
body.light::-webkit-scrollbar-track { body.light main::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05); 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); 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); background-color: rgba(0, 0, 0, 0.45);
} }
.container{ .container{
margin-top: 50px; margin-top: 0px;
} }
header p{ #subtitle{
color: var(--subtitle-color); color: var(--subtitle-color);
} }