Skip to content

Commit 208ec43

Browse files
DevuboxLinuxDevuboxLinux
committed
fix stuff
1 parent f1ee652 commit 208ec43

1 file changed

Lines changed: 48 additions & 73 deletions

File tree

‎index.html‎

Lines changed: 48 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,23 @@
55
<!-- Required meta tags for character set and responsive design -->
66
<meta charset="UTF-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
9-
<!-- SEO Meta Tags -->
10-
<title>Devubox-MX - Midweight Simple Stable Desktop OS</title>
118
<meta name="description"
129
content="Devubox-MX is a midweight, simple, and stable desktop OS based on Devuan. Fast, secure, and ready for modern computing.">
1310
<meta name="keywords" content="Linux, Devubox-MX, Devuan, Debian, Openbox, Operating System, Indonesia, Desktop OS">
1411
<meta name="author" content="Devubox-MX Team">
1512
<meta name="robots" content="index, follow">
1613
<meta name="google-site-verification" content="5NSUj4iUm8mQVvVLfs-nzIvBGkmw6tJR6EQUsfkQQM0" />
14+
15+
<!-- SEO Meta Tags -->
16+
<title>Devubox-MX - Midweight Simple Stable Desktop OS</title>
1717
<link rel="canonical" href="https://devuboxlinux.github.io/">
1818
<link rel='shortlink' href="https://devuboxlinux.github.io/" />
19+
20+
<!-- Performance Optimization: Preconnect to critical origins -->
21+
<link rel="preconnect" href="https://fonts.googleapis.com">
22+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
23+
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
24+
1925
<!-- Open Graph / Facebook Meta Tags -->
2026
<meta property="og:type" content="website">
2127
<meta property="og:url" content="https://devuboxlinux.github.io/">
@@ -36,14 +42,17 @@
3642
<!-- Favicon -->
3743
<link rel="icon" href="/favicon.ico" type="image/x-icon">
3844

45+
<!-- Google Fonts (with display=swap for performance) -->
46+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
47+
3948
<!-- Bootstrap CSS from CDN -->
40-
<!-- This link fetches the latest Bootstrap 5 styles -->
4149
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
4250

43-
<!-- Bootstrap Icons CDN -->
44-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
51+
<!-- Bootstrap Icons CDN - Optimized to be non-blocking -->
52+
<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
53+
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"></noscript>
4554

46-
<!-- Custom CSS for minor style adjustments and dark mode -->
55+
<!-- Custom CSS -->
4756
<style>
4857
:root {
4958
--body-bg-light: linear-gradient(to right, #e2e2e2, #c9d6ff);
@@ -167,11 +176,6 @@
167176
}
168177
</style>
169178

170-
<!-- Google Fonts -->
171-
<link rel="preconnect" href="https://fonts.googleapis.com">
172-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
173-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
174-
175179
</head>
176180

177181
<body>
@@ -196,8 +200,7 @@
196200
<li class="nav-item"><a class="nav-link" href="https://github.com/DevuboxLinux/Devubox-MX/">Source
197201
Code</a></li>
198202
<li class="nav-item ms-lg-2">
199-
<a class="nav-link theme-toggle" id="theme-toggle-btn" title="Toggle theme">
200-
<!-- Replaced SVG with Bootstrap Icons -->
203+
<a class="nav-link theme-toggle" id="theme-toggle-btn" title="Toggle theme" role="button" tabindex="0">
201204
<i class="bi bi-sun-fill sun-icon"></i>
202205
<i class="bi bi-moon-fill moon-icon"></i>
203206
</a>
@@ -216,7 +219,8 @@
216219
<div class="row align-items-center">
217220
<div class="col-lg-6 order-lg-2 mb-4 mb-lg-0 hero-image-container">
218221
<img src="Screenshot.webp" class="img-fluid rounded shadow hero-image-3d"
219-
alt="A screenshot of the Devubox-MX desktop, featuring a clean and modern interface with the Openbox window manager, a customized Tint2 panel, and various applications open.">
222+
alt="A screenshot of the Devubox-MX desktop, featuring a clean and modern interface with the Openbox window manager, a customized Tint2 panel, and various applications open."
223+
width="800" height="450" fetchpriority="high">
220224
</div>
221225
<div class="col-lg-6 order-lg-1">
222226
<h1 class="display-6 fw-bold">Introducing Devubox-MX</h1>
@@ -248,7 +252,7 @@ <h1 class="display-6 fw-bold">Introducing Devubox-MX</h1>
248252
<img src="https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/raw/refs/heads/master/Papirus/64x64/apps/hardinfo2.svg"
249253
class="card-img-top" alt="Midweight OS">
250254
<div class="card-body px-4 pb-4">
251-
<h5 class="card-title">Midweight & Fast</h5>
255+
<h2 class="card-title h5">Midweight & Fast</h2>
252256
<p class="card-text">Built with a customized Openbox window manager, Devubox-MX is designed
253257
to be fast and efficient. It runs smoothly on older 64-bit hardware (like the Core 2
254258
Duo) and uses only ~600MB of RAM, similar to XFCE.</p>
@@ -261,7 +265,7 @@ <h5 class="card-title">Midweight & Fast</h5>
261265
<img src="https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/raw/refs/heads/master/Papirus/64x64/apps/github.svg"
262266
class="card-img-top" alt="Community Driven">
263267
<div class="card-body px-4 pb-4">
264-
<h5 class="card-title">Community Driven</h5>
268+
<h2 class="card-title h5">Community Driven</h2>
265269
<p class="card-text">As an open-source project, our development is guided by user feedback.
266270
Join our forums to help shape the future of Devubox-MX.</p>
267271
</div>
@@ -273,7 +277,7 @@ <h5 class="card-title">Community Driven</h5>
273277
<img src="https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/raw/refs/heads/master/Papirus/64x64/apps/security-high.svg"
274278
class="card-img-top" alt="Secure OS">
275279
<div class="card-body px-4 pb-4">
276-
<h5 class="card-title">Secure & Reliable</h5>
280+
<h2 class="card-title h5">Secure & Reliable</h2>
277281
<p class="card-text">Based on the solid foundation of Devuan and MX Linux, Devubox-MX
278282
benefits from robust security features and a stable, reliable core system.</p>
279283
</div>
@@ -285,7 +289,7 @@ <h5 class="card-title">Secure & Reliable</h5>
285289
<img src="https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/raw/refs/heads/master/Papirus/64x64/apps/knemo.svg"
286290
class="card-img-top" alt="Preloaded Apps">
287291
<div class="card-body px-4 pb-4">
288-
<h5 class="card-title">Preloaded with Apps for Offline Use</h5>
292+
<h2 class="card-title h5">Preloaded with Apps for Offline Use</h2>
289293
<p class="card-text">It's ready out of the box with multimedia codecs, games, LibreOffice,
290294
printer support, and top apps like GIMP, Inkscape, and OBS Studio.</p>
291295
</div>
@@ -297,7 +301,7 @@ <h5 class="card-title">Preloaded with Apps for Offline Use</h5>
297301
<img src="https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/raw/refs/heads/master/Papirus/64x64/apps/jockey.svg"
298302
class="card-img-top" alt="Driver Compatibility">
299303
<div class="card-body px-4 pb-4">
300-
<h5 class="card-title">Broad Driver Compatibility</h5>
304+
<h2 class="card-title h5">Broad Driver Compatibility</h2>
301305
<p class="card-text">Includes many proprietary firmware packages from the Debian
302306
`non-free-firmware` repository for out-of-the-box hardware support. With Advanced
303307
Hardware Support (AHS), it also supports a wide range of modern hardware.</p>
@@ -310,7 +314,7 @@ <h5 class="card-title">Broad Driver Compatibility</h5>
310314
<img src="https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/raw/refs/heads/master/Papirus/64x64/apps/nvidia.svg"
311315
class="card-img-top" alt="NVIDIA Drivers">
312316
<div class="card-body px-4 pb-4">
313-
<h5 class="card-title">Easy NVIDIA Driver Installation</h5>
317+
<h2 class="card-title h5">Easy NVIDIA Driver Installation</h2>
314318
<p class="card-text">A simple one-click installer is included for proprietary NVIDIA drivers
315319
(requires an internet connection).</p>
316320
</div>
@@ -379,50 +383,8 @@ <h2>Devubox-MX is Built On:</h2>
379383

380384

381385
<!-- ======================= Scripts ======================= -->
382-
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
383-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
384-
385-
<!-- Countdown Timer Script -->
386-
<script>
387-
const countDownDate = new Date("Jan 1, 2026 00:00:00").getTime();
388-
const countdownElement = document.getElementById("countdown-timer");
389-
const downloadButton = document.getElementById("download-button");
390-
391-
const updateCountdown = () => {
392-
const now = new Date().getTime();
393-
const distance = countDownDate - now;
394-
395-
if (distance < 0) {
396-
if (countdownInterval) clearInterval(countdownInterval);
397-
countdownElement.innerHTML = "AVAILABLE NOW!";
398-
downloadButton.textContent = "Download";
399-
downloadButton.classList.remove("btn-primary");
400-
downloadButton.classList.add("btn-success");
401-
return;
402-
}
403-
404-
const releaseDate = new Date(countDownDate);
405-
const currentDate = new Date();
406-
let months = (releaseDate.getFullYear() - currentDate.getFullYear()) * 12;
407-
months -= currentDate.getMonth();
408-
months += releaseDate.getMonth();
409-
if (releaseDate.getDate() < currentDate.getDate()) {
410-
months--;
411-
}
412-
413-
let output = "Approx. ";
414-
if (months > 0) {
415-
output += `${months} month${months > 1 ? 's' : ''}`;
416-
} else {
417-
const days = Math.ceil(distance / (1000 * 60 * 60 * 24));
418-
output += `${days} day${days > 1 ? 's' : ''}`;
419-
}
420-
countdownElement.innerHTML = output;
421-
};
422-
423-
updateCountdown();
424-
const countdownInterval = setInterval(updateCountdown, 3600000);
425-
</script>
386+
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" defer></script>
387+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
426388

427389
<!-- Dark Mode Toggle Script -->
428390
<script>
@@ -446,13 +408,26 @@ <h2>Devubox-MX is Built On:</h2>
446408

447409
setTheme(getPreferredTheme())
448410

449-
const themeToggleButton = document.getElementById('theme-toggle-btn');
450-
451-
themeToggleButton.addEventListener('click', () => {
452-
const currentTheme = getStoredTheme() || getPreferredTheme();
453-
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
454-
setStoredTheme(newTheme);
455-
setTheme(newTheme);
411+
// Wait for DOMContentLoaded to ensure elements exist
412+
document.addEventListener('DOMContentLoaded', () => {
413+
const themeToggleButton = document.getElementById('theme-toggle-btn');
414+
415+
if (themeToggleButton) {
416+
themeToggleButton.addEventListener('click', () => {
417+
const currentTheme = getStoredTheme() || getPreferredTheme();
418+
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
419+
setStoredTheme(newTheme);
420+
setTheme(newTheme);
421+
});
422+
423+
// Add keyboard accessibility for the toggle button (which is an anchor)
424+
themeToggleButton.addEventListener('keydown', (e) => {
425+
if (e.key === 'Enter' || e.key === ' ') {
426+
e.preventDefault();
427+
themeToggleButton.click();
428+
}
429+
});
430+
}
456431
});
457432

458433
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@@ -465,4 +440,4 @@ <h2>Devubox-MX is Built On:</h2>
465440

466441
</body>
467442

468-
</html>
443+
</html>

0 commit comments

Comments
 (0)