Skip to content

Commit f771025

Browse files
LinuxDEdeveloperLinuxDEdeveloper
authored
Refactor index.html for improved styling and structure
1 parent c58cc7a commit f771025

1 file changed

Lines changed: 120 additions & 152 deletions

File tree

‎index.html‎

Lines changed: 120 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -5,264 +5,232 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>ORBIT OS - Next Generation Linux</title>
77
<style>
8-
/* Tông màu chủ đạo */
8+
/* Tông màu chủ đạo: Đen, Xanh biển, Xanh lá */
99
:root {
10-
--bg-color: #0a0a0a;
11-
--card-bg: #161616;
10+
--bg-color: #050505;
11+
--card-bg: #111111;
1212
--accent-blue: #007aff;
13-
--accent-green: #34c759;
13+
--accent-green: #2ecc71;
1414
--text-main: #ffffff;
15-
--text-dim: #a1a1a1;
16-
--glass: rgba(255, 255, 255, 0.05);
15+
--text-dim: #888888;
1716
}
1817

1918
* {
2019
margin: 0;
2120
padding: 0;
2221
box-sizing: border-box;
23-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
22+
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
2423
}
2524

2625
body {
2726
background-color: var(--bg-color);
2827
color: var(--text-main);
2928
line-height: 1.6;
30-
overflow-x: hidden;
29+
/* Cố định Dark Mode, không cho phép light mode */
30+
color-scheme: dark;
3131
}
3232

3333
/* Nút chuyển ngôn ngữ */
34-
.lang-switcher {
35-
position: fixed;
34+
.lang-container {
35+
position: absolute;
3636
top: 20px;
3737
right: 20px;
38-
z-index: 1000;
3938
}
4039

41-
.lang-btn {
42-
background: var(--glass);
43-
border: 1px solid rgba(255,255,255,0.1);
40+
#langBtn {
41+
background: rgba(255, 255, 255, 0.1);
42+
border: 1px solid var(--accent-blue);
4443
color: white;
45-
padding: 8px 15px;
44+
padding: 8px 16px;
4645
cursor: pointer;
47-
border-radius: 20px;
48-
backdrop-filter: blur(10px);
46+
border-radius: 5px;
4947
transition: 0.3s;
5048
}
5149

52-
.lang-btn:hover {
50+
#langBtn:hover {
5351
background: var(--accent-blue);
5452
}
5553

56-
/* Header / Hero Section */
57-
header {
54+
/* Hero Section */
55+
.hero {
5856
height: 100vh;
5957
display: flex;
6058
flex-direction: column;
6159
justify-content: center;
6260
align-items: center;
6361
text-align: center;
64-
background: radial-gradient(circle at center, #001a33 0%, #0a0a0a 100%);
65-
padding: 20px;
62+
padding: 0 20px;
63+
background: radial-gradient(circle at top, #001f3f, #050505);
6664
}
6765

6866
h1 {
69-
font-size: 4rem;
70-
letter-spacing: -1px;
67+
font-size: 5rem;
7168
margin-bottom: 10px;
72-
background: linear-gradient(to right, var(--accent-blue), var(--accent-green));
73-
-webkit-background-clip: text;
74-
-webkit-text-fill-color: transparent;
69+
text-shadow: 0 0 20px rgba(0, 122, 255, 0.5);
7570
}
7671

77-
.tagline {
78-
font-size: 1.5rem;
72+
.description {
73+
font-size: 1.4rem;
7974
color: var(--text-dim);
80-
margin-bottom: 30px;
75+
margin-bottom: 40px;
76+
max-width: 700px;
8177
}
8278

8379
/* Buttons */
84-
.btn-group {
80+
.cta-buttons {
8581
display: flex;
8682
gap: 20px;
87-
flex-wrap: wrap;
88-
justify-content: center;
8983
}
9084

9185
.btn {
92-
padding: 15px 35px;
93-
border-radius: 30px;
86+
padding: 15px 30px;
9487
text-decoration: none;
95-
font-weight: 600;
96-
transition: all 0.3s ease;
97-
display: inline-block;
88+
font-weight: bold;
89+
border-radius: 8px;
90+
transition: 0.3s;
9891
}
9992

10093
.btn-download {
101-
background-color: var(--accent-blue);
94+
background: var(--accent-blue);
10295
color: white;
10396
}
10497

10598
.btn-github {
106-
background-color: transparent;
10799
border: 2px solid var(--accent-green);
108100
color: var(--accent-green);
109101
}
110102

111103
.btn:hover {
112-
transform: translateY(-3px);
113-
box-shadow: 0 10px 20px rgba(0,0,0,0.4);
104+
transform: scale(1.05);
105+
filter: brightness(1.2);
114106
}
115107

116-
/* Features Section */
108+
/* Features */
117109
.features {
118110
padding: 100px 20px;
119-
max-width: 1200px;
111+
max-width: 1100px;
120112
margin: 0 auto;
121-
}
122-
123-
.section-title {
124-
text-align: center;
125-
font-size: 2.5rem;
126-
margin-bottom: 50px;
127-
}
128-
129-
.grid {
130113
display: grid;
131114
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
132-
gap: 30px;
115+
gap: 40px;
133116
}
134117

135-
.card {
118+
.feature-card {
136119
background: var(--card-bg);
137-
padding: 40px;
138-
border-radius: 24px;
139-
border: 1px solid rgba(255,255,255,0.05);
140-
transition: 0.3s;
141-
}
142-
143-
.card:hover {
144-
border-color: var(--accent-blue);
120+
padding: 30px;
121+
border-radius: 15px;
122+
border-left: 4px solid var(--accent-blue);
145123
}
146124

147-
.card h3 {
148-
margin-bottom: 15px;
125+
.feature-card h3 {
149126
color: var(--accent-green);
127+
margin-bottom: 15px;
150128
}
151129

152-
/* Footer */
130+
/* Footer gộp chung thông tin */
153131
footer {
154-
padding: 50px 20px;
132+
padding: 60px 20px;
155133
text-align: center;
156-
border-top: 1px solid rgba(255,255,255,0.05);
134+
border-top: 1px solid #222;
157135
color: var(--text-dim);
158136
font-size: 0.9rem;
159137
}
160138

161-
.license {
162-
margin-top: 10px;
163-
color: var(--accent-blue);
139+
.footer-info {
140+
letter-spacing: 0.5px;
164141
}
165142

166-
/* Responsive */
167-
@media (max-width: 768px) {
168-
h1 { font-size: 2.5rem; }
169-
.tagline { font-size: 1.1rem; }
143+
@media (max-width: 600px) {
144+
h1 { font-size: 3rem; }
145+
.cta-buttons { flex-direction: column; }
170146
}
171147
</style>
172148
</head>
173149
<body>
174150

175-
<div class="lang-switcher">
176-
<button class="lang-btn" onclick="toggleLanguage()" id="langBtn">Tiếng Việt</button>
151+
<div class="lang-container">
152+
<button id="langBtn" onclick="changeLang()">Tiếng Việt</button>
177153
</div>
178154

179-
<header>
180-
<h1 id="mainTitle">ORBIT OS</h1>
181-
<p class="tagline" id="tagline">The power of Arch, the beauty of macOS.</p>
182-
<div class="btn-group">
183-
<a href="#" class="btn btn-download" id="btnDl">Download ISO</a>
184-
<a href="https://github.com/LinuxDEdeveloper/ORBIT-Operating-System-repo" target="_blank" class="btn btn-github" id="btnGit">GitHub Official</a>
155+
<section class="hero">
156+
<h1 id="title">ORBIT OS</h1>
157+
<p class="description" id="heroDesc">An Arch Linux & EndeavourOS based operating system with a elegant macOS look and feel.</p>
158+
<div class="cta-buttons">
159+
<a href="#" class="btn btn-download" id="btnDown">Download Now</a>
160+
<a href="https://github.com/LinuxDEdeveloper/ORBIT-Operating-System-repo" target="_blank" class="btn btn-github" id="btnGit">Official GitHub</a>
185161
</div>
186-
</header>
162+
</section>
187163

188164
<section class="features">
189-
<h2 class="section-title" id="featTitle">Why ORBIT OS?</h2>
190-
<div class="grid">
191-
<div class="card">
192-
<h3 id="f1-t">macOS Aesthetics</h3>
193-
<p id="f1-d">A refined user interface inspired by macOS, providing a premium and intuitive desktop experience out of the box.</p>
194-
</div>
195-
<div class="card">
196-
<h3 id="f2-t">Bleeding Edge</h3>
197-
<p id="f2-d">Based on Arch Linux and EndeavourOS. Get daily updates and the latest software packages every single day.</p>
198-
</div>
199-
<div class="card">
200-
<h3 id="f3-t">High Performance</h3>
201-
<p id="f3-d">Optimized for speed and stability. Orbit OS ensures your hardware performs at its maximum potential.</p>
202-
</div>
165+
<div class="feature-card">
166+
<h3 id="f1t">MacOS Aesthetics</h3>
167+
<p id="f1d">Enjoy a beautiful, polished interface inspired by macOS, built on top of the most powerful Linux base.</p>
168+
</div>
169+
<div class="feature-card">
170+
<h3 id="f2t">Daily Updates</h3>
171+
<p id="f2d">With the power of Arch Linux, you get the latest kernels and software packages every single day.</p>
172+
</div>
173+
<div class="feature-card">
174+
<h3 id="f3t">Optimized Base</h3>
175+
<p id="f3d">Built upon EndeavourOS foundations for a lightweight, stable, and developer-friendly environment.</p>
203176
</div>
204177
</section>
205178

206179
<footer>
207-
<p id="copyright">© 2026 Dự án ORBIT OS</p>
208-
<p class="license">Licensed under GPLv3 & LGPLv3</p>
180+
<p class="footer-info" id="footerText">
181+
© 2026 Dự án ORBIT OS — Licensed under GPLv3 & LGPLv3
182+
</p>
209183
</footer>
210184

211185
<script>
212-
let currentLang = 'en';
186+
// Mặc định ban đầu là Tiếng Anh
187+
let isVietnamese = false;
213188

214-
const content = {
215-
en: {
216-
btnLang: "Tiếng Việt",
217-
tagline: "The power of Arch, the beauty of macOS.",
218-
btnDl: "Download ISO",
219-
btnGit: "GitHub Official",
220-
featTitle: "Why ORBIT OS?",
221-
f1t: "macOS Aesthetics",
222-
f1d: "A refined user interface inspired by macOS, providing a premium and intuitive desktop experience out of the box.",
223-
f2t: "Bleeding Edge",
224-
f2d: "Based on Arch Linux and EndeavourOS. Get daily updates and the latest software packages every single day.",
225-
f3t: "High Performance",
226-
f3d: "Optimized for speed and stability. Orbit OS ensures your hardware performs at its maximum potential.",
227-
copyright: "© 2026 Dự án ORBIT OS"
228-
},
229-
vi: {
230-
btnLang: "English",
231-
tagline: "Sức mạnh của Arch, vẻ đẹp của macOS.",
232-
btnDl: "Tải về ISO",
233-
btnGit: "Trang GitHub chính thức",
234-
featTitle: "Tại sao chọn ORBIT OS?",
235-
f1t: "Giao diện phong cách MacOS",
236-
f1d: "Giao diện người dùng tinh tế được cảm hứng từ macOS, mang lại trải nghiệm cao cấp và trực quan ngay khi cài đặt.",
237-
f2t: "Cập nhật hàng ngày",
238-
f2d: "Dựa trên Arch Linux và EndeavourOS. Nhận các gói phần mềm mới nhất và cập nhật hệ thống mỗi ngày.",
239-
f3t: "Hiệu năng tối ưu",
240-
f3d: "Được tối ưu hóa cho tốc độ và sự ổn định. Orbit OS đảm bảo phần cứng của bạn hoạt động với tiềm năng tối đa.",
241-
copyright: "© 2026 Dự án ORBIT OS"
242-
}
243-
};
244-
245-
function toggleLanguage() {
246-
currentLang = currentLang === 'en' ? 'vi' : 'en';
247-
updateContent();
248-
}
249-
250-
function updateContent() {
251-
const l = content[currentLang];
252-
document.getElementById('langBtn').innerText = l.btnLang;
253-
document.getElementById('tagline').innerText = l.tagline;
254-
document.getElementById('btnDl').innerText = l.btnDl;
255-
document.getElementById('btnGit').innerText = l.btnGit;
256-
document.getElementById('featTitle').innerText = l.featTitle;
257-
document.getElementById('f1-t').innerText = l.f1t;
258-
document.getElementById('f1-d').innerText = l.f1d;
259-
document.getElementById('f2-t').innerText = l.f2t;
260-
document.getElementById('f2-d').innerText = l.f2d;
261-
document.getElementById('f3-t').innerText = l.f3t;
262-
document.getElementById('f3-d').innerText = l.f3d;
263-
document.getElementById('copyright').innerText = l.copyright;
189+
function changeLang() {
190+
isVietnamese = !isVietnamese;
264191

265-
document.documentElement.lang = currentLang;
192+
const btn = document.getElementById('langBtn');
193+
const title = document.getElementById('title');
194+
const heroDesc = document.getElementById('heroDesc');
195+
const btnDown = document.getElementById('btnDown');
196+
const btnGit = document.getElementById('btnGit');
197+
const f1t = document.getElementById('f1t');
198+
const f1d = document.getElementById('f1d');
199+
const f2t = document.getElementById('f2t');
200+
const f2d = document.getElementById('f2d');
201+
const f3t = document.getElementById('f3t');
202+
const f3d = document.getElementById('f3d');
203+
const footerText = document.getElementById('footerText');
204+
205+
if (isVietnamese) {
206+
// Đổi sang Tiếng Việt
207+
btn.innerText = "English";
208+
heroDesc.innerText = "Hệ điều hành dựa trên Arch Linux & EndeavourOS với giao diện macOS tinh tế và sang trọng.";
209+
btnDown.innerText = "Tải ngay";
210+
btnGit.innerText = "GitHub chính thức";
211+
f1t.innerText = "Giao diện MacOS";
212+
f1d.innerText = "Tận hưởng giao diện đẹp mắt, bóng bẩy lấy cảm hứng từ macOS trên nền tảng Linux mạnh mẽ nhất.";
213+
f2t.innerText = "Cập nhật hàng ngày";
214+
f2d.innerText = "Với sức mạnh của Arch Linux, bạn sẽ nhận được các bản kernel và phần mềm mới nhất mỗi ngày.";
215+
f3t.innerText = "Nền tảng tối ưu";
216+
f3d.innerText = "Xây dựng trên nền EndeavourOS cho môi trường nhẹ nhàng, ổn định và thân thiện với lập trình viên.";
217+
footerText.innerText = "© 2026 Dự án ORBIT OS — Phát hành theo giấy phép GPLv3 & LGPLv3";
218+
document.documentElement.lang = "vi";
219+
} else {
220+
// Đổi sang Tiếng Anh
221+
btn.innerText = "Tiếng Việt";
222+
heroDesc.innerText = "An Arch Linux & EndeavourOS based operating system with a elegant macOS look and feel.";
223+
btnDown.innerText = "Download Now";
224+
btnGit.innerText = "Official GitHub";
225+
f1t.innerText = "MacOS Aesthetics";
226+
f1d.innerText = "Enjoy a beautiful, polished interface inspired by macOS, built on top of the most powerful Linux base.";
227+
f2t.innerText = "Daily Updates";
228+
f2d.innerText = "With the power of Arch Linux, you get the latest kernels and software packages every single day.";
229+
f3t.innerText = "Optimized Base";
230+
f3d.innerText = "Built upon EndeavourOS foundations for a lightweight, stable, and developer-friendly environment.";
231+
footerText.innerText = "© 2026 Dự án ORBIT OS — Licensed under GPLv3 & LGPLv3";
232+
document.documentElement.lang = "en";
233+
}
266234
}
267235
</script>
268236
</body>

0 commit comments

Comments
 (0)