Skip to content

Commit 274f851

Browse files
DevuboxLinuxDevuboxLinux
authored
Create index.html
0 parents  commit 274f851

1 file changed

Lines changed: 320 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 320 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags for character set and responsive design -->
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!-- SEO Meta Tags -->
9+
<title>PlaceholderOS - Midweight Simple Stable Desktop OS</title>
10+
<meta name="description" content="PlaceholderOS is a midweight, simple, and stable desktop OS based on Devuan. Fast, secure, and ready for modern computing.">
11+
<meta name="keywords" content="Linux, PlaceholderOS, Devuan, Debian, Openbox, Operating System, Indonesia, Desktop OS">
12+
<meta name="author" content="PlaceholderOS Team">
13+
<meta name="robots" content="index, follow">
14+
<link rel="canonical" href="https://PlaceholderOS.example.com/">
15+
<link rel='shortlink' href="https://PlaceholderOS.example.com/"/>
16+
<!-- Open Graph / Facebook Meta Tags -->
17+
<meta property="og:type" content="website">
18+
<meta property="og:url" content="https://PlaceholderOS.example.com/">
19+
<meta property="og:title" content="PlaceholderOS - Midweight Simple Stable Desktop OS">
20+
<meta property="og:description" content="PlaceholderOS is a midweight, simple, and stable desktop OS based on Devuan. Fast, secure, and ready for modern computing.">
21+
<meta property="og:image" content="https://placehold.co/1200x630/55595c/ffffff?text=PlaceholderOS">
22+
<meta property="og:site_name" content="PlaceholderOS">
23+
24+
<!-- Twitter Card Meta Tags -->
25+
<meta name="twitter:card" content="summary_large_image">
26+
<meta name="twitter:url" content="https://PlaceholderOS.example.com/">
27+
<meta name="twitter:title" content="PlaceholderOS - Midweight Simple Stable Desktop OS">
28+
<meta name="twitter:description" content="PlaceholderOS is a midweight, simple, and stable desktop OS based on Devuan. Fast, secure, and ready for modern computing.">
29+
<meta name="twitter:image" content="https://placehold.co/1200x630/55595c/ffffff?text=PlaceholderOS">
30+
31+
<!-- Favicon -->
32+
<link rel="icon" href="/favicon.ico" type="image/x-icon">
33+
34+
<!-- Bootstrap CSS from CDN -->
35+
<!-- This link fetches the latest Bootstrap 5 styles -->
36+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" xintegrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
37+
38+
<!-- Custom CSS for minor style adjustments -->
39+
<style>
40+
/* Make the body have a light gray background */
41+
body {
42+
background: linear-gradient(to right, #e2e2e2, #c9d6ff); /* Adds the gradient */
43+
background-color: #f8f9fa; /* Fallback for older browsers */
44+
font-family: 'Inter', sans-serif; /* A clean, modern font */
45+
}
46+
/* Style for the main content area */
47+
.main-content {
48+
padding-top: 3rem;
49+
padding-bottom: 3rem;
50+
}
51+
/* Style for the footer */
52+
.footer {
53+
background-color: #343a40;
54+
color: white;
55+
padding: 1.5rem 0;
56+
text-align: center;
57+
}
58+
.hero-section {
59+
background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
60+
backdrop-filter: blur(10px); /* Frosted glass effect */
61+
}
62+
.card-img-top {
63+
height: 180px;
64+
object-fit: cover; /* Ensures images cover the area without distortion */
65+
}
66+
#countdown-timer {
67+
color: #343a40;
68+
}
69+
</style>
70+
71+
<!-- Google Fonts -->
72+
<link rel="preconnect" href="https://fonts.googleapis.com">
73+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
74+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
75+
76+
</head>
77+
<body>
78+
79+
<!-- ======================= Navbar ======================= -->
80+
<!-- The 'sticky-top' class makes the navbar persistent on scroll -->
81+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top">
82+
<div class="container-fluid">
83+
<!-- Website Brand/Logo -->
84+
<a class="navbar-brand fw-bold" href="#">PlaceholderOS</a>
85+
86+
<!-- Hamburger Menu Button -->
87+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
88+
<span class="navbar-toggler-icon"></span>
89+
</button>
90+
91+
<!-- Collapsible Navigation Links -->
92+
<div class="collapse navbar-collapse" id="navbarNav">
93+
<ul class="navbar-nav ms-auto">
94+
<li class="nav-item">
95+
<a class="nav-link active" aria-current="page" href="#">Home</a>
96+
</li>
97+
<li class="nav-item">
98+
<a class="nav-link" href="features">Features</a>
99+
</li>
100+
<li class="nav-item">
101+
<a class="nav-link" href="download">Download</a>
102+
</li>
103+
<li class="nav-item">
104+
<a class="nav-link" href="https://github.com/PlaceholderOS/PlaceholderOS/wiki/Install-Guide">Install Guide</a>
105+
</li>
106+
<li class="nav-item">
107+
<a class="nav-link" href="https://github.com/PlaceholderOS/PlaceholderOS/discussions">Forum</a>
108+
</li>
109+
<li class="nav-item">
110+
<a class="nav-link" href="https://github.com/PlaceholderOS/PlaceholderOS">Source Code</a>
111+
</li>
112+
</ul>
113+
</div>
114+
</div>
115+
</nav>
116+
117+
<!-- ======================= Main Content ======================= -->
118+
<main class="main-content">
119+
<div class="container">
120+
<!-- Hero Section -->
121+
<div class="p-5 mb-4 rounded-3 hero-section">
122+
<div class="container-fluid">
123+
<div class="row align-items-center">
124+
<!-- Image: Appears first in code to be on top on mobile, but second on desktop via 'order-lg-2' -->
125+
<div class="col-lg-5 order-lg-2 mb-4 mb-lg-0">
126+
<img src="https://placehold.co/600x400/55595c/ffffff?text=PlaceholderOS" class="img-fluid rounded shadow" alt="PlaceholderOS Desktop Placeholder">
127+
</div>
128+
<!-- Text content: Appears second in code, but first on desktop via 'order-lg-1' -->
129+
<div class="col-lg-7 order-lg-1">
130+
<h1 class="display-5 fw-bold">Introducing PlaceholderOS</h1>
131+
<p class="fs-5 text-muted">A Midweight, Simple, and Stable Desktop OS</p>
132+
<p class="fs-4">PlaceholderOS is an open-source Linux distribution based on Devuan OS (a version of Debian that doesn't use systemd). It features a customized Openbox window manager that provides a complete desktop environment, including a taskbar, system tray, and more.</p>
133+
<!-- Countdown Timer and Button Container -->
134+
<div class="mt-4">
135+
<p class="fs-5 mb-2">Estimated release: August 30, 2025. This date is subject to change.</p>
136+
<div id="countdown-timer" class="fs-3 mb-3 fw-bold"></div>
137+
<a href="/download" id="download-button" class="btn btn-primary btn-lg" role="button">Download (Not available yet)</a>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
144+
<!-- Responsive Grid System with Linux-related content -->
145+
<div class="row text-center">
146+
<!-- Card 1 -->
147+
<div class="col-lg-4 col-md-6 mb-4">
148+
<div class="card h-100 shadow-sm">
149+
<img src="https://placehold.co/400x250/3498db/ffffff?text=Midweight" class="card-img-top" alt="Midweight OS">
150+
<div class="card-body">
151+
<h5 class="card-title">Midweight & Fast</h5>
152+
<p class="card-text">Built with a customized Openbox window manager, PlaceholderOS is designed to be fast and efficient, running smoothly even on older 64-bit hardware (like the Core 2 Duo).</p>
153+
</div>
154+
</div>
155+
</div>
156+
<!-- Card 2 -->
157+
<div class="col-lg-4 col-md-6 mb-4">
158+
<div class="card h-100 shadow-sm">
159+
<img src="https://placehold.co/400x250/2ecc71/ffffff?text=Community" class="card-img-top" alt="Community Driven">
160+
<div class="card-body">
161+
<h5 class="card-title">Community Driven</h5>
162+
<p class="card-text">As an open-source project, our development is guided by user feedback. Join our forums to help shape the future of PlaceholderOS.</p>
163+
</div>
164+
</div>
165+
</div>
166+
<!-- Card 3 -->
167+
<div class="col-lg-4 col-md-6 mb-4">
168+
<div class="card h-100 shadow-sm">
169+
<img src="https://placehold.co/400x250/e74c3c/ffffff?text=Secure" class="card-img-top" alt="Secure OS">
170+
<div class="card-body">
171+
<h5 class="card-title">Secure & Reliable</h5>
172+
<p class="card-text">Based on the solid foundation of Devuan/Debian Linux, PlaceholderOS benefits from robust security features and a stable, reliable core system.</p>
173+
</div>
174+
</div>
175+
</div>
176+
<!-- Card 4 -->
177+
<div class="col-lg-4 col-md-6 mb-4">
178+
<div class="card h-100 shadow-sm">
179+
<img src="https://placehold.co/400x250/9b59b6/ffffff?text=Offline-Ready" class="card-img-top" alt="Preloaded Apps">
180+
<div class="card-body">
181+
<h5 class="card-title">Preloaded with Apps for Offline Use</h5>
182+
<p class="card-text">It's ready out of the box with multimedia codecs, games, LibreOffice, printer support, and top apps like GIMP, Inkscape, VLC, and OBS Studio.</p>
183+
</div>
184+
</div>
185+
</div>
186+
<!-- Card 5 -->
187+
<div class="col-lg-4 col-md-6 mb-4">
188+
<div class="card h-100 shadow-sm">
189+
<img src="https://placehold.co/400x250/f1c40f/ffffff?text=Drivers" class="card-img-top" alt="Driver Compatibility">
190+
<div class="card-body">
191+
<h5 class="card-title">Broad Driver Compatibility</h5>
192+
<p class="card-text">Includes many proprietary firmware packages from the Debian non-free repository for out-of-the-box hardware support.</p>
193+
</div>
194+
</div>
195+
</div>
196+
<!-- Card 6 -->
197+
<div class="col-lg-4 col-md-6 mb-4">
198+
<div class="card h-100 shadow-sm">
199+
<img src="https://placehold.co/400x250/e67e22/ffffff?text=NVIDIA" class="card-img-top" alt="NVIDIA Drivers">
200+
<div class="card-body">
201+
<h5 class="card-title">Easy NVIDIA Driver Installation</h5>
202+
<p class="card-text">A simple one-click installer is included for proprietary NVIDIA drivers (requires an internet connection).</p>
203+
</div>
204+
</div>
205+
</div>
206+
</div>
207+
<!-- Adding extra content to demonstrate scrolling -->
208+
<div class="p-5 my-4 bg-light rounded-3">
209+
<h2>Meet the PlaceholderOS Desktop Environment (Based on Openbox)</h2>
210+
<p>Our midweight desktop environment aims to be fast and resource-efficient, while still being attractive and user-friendly. It augments the native Openbox configuration with unique features:</p>
211+
<ul>
212+
<li>Placeholder: Feature 1 description goes here.</li>
213+
<li>Placeholder: Feature 2 description goes here.</li>
214+
<li>Placeholder: Feature 3 description goes here.</li>
215+
</ul>
216+
<p>It supports a wide range of hardware, from older 64-bit laptops to modern desktops.</p>
217+
</div>
218+
</div>
219+
</main>
220+
221+
<!-- ======================= Footer ======================= -->
222+
<footer class="footer">
223+
<div class="container">
224+
<p>&copy; 2025 PlaceholderOS. All Rights Reserved. Licensed under MIT. Made with love in Indonesia.</p>
225+
</div>
226+
</footer>
227+
228+
229+
<!-- ======================= Scripts ======================= -->
230+
<!-- Placed at the end of the body to allow the page content to load first -->
231+
232+
<!-- jQuery (Not required by Bootstrap 5, but included as per your request) -->
233+
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDiC/RI=" crossorigin="anonymous"></script>
234+
235+
<!-- Bootstrap Bundle JS (includes Popper.js for tooltips, popovers, and dropdowns) -->
236+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" xintegrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
237+
238+
<!-- Countdown Timer Script -->
239+
<script>
240+
// Set the date we're counting down to
241+
const countDownDate = new Date("Aug 30, 2025 00:00:00").getTime();
242+
243+
// Get the elements to update
244+
const countdownElement = document.getElementById("countdown-timer");
245+
const downloadButton = document.getElementById("download-button");
246+
247+
// Update the count down every hour to be less distracting
248+
const x = setInterval(function() {
249+
250+
// Get today's date and time
251+
const now = new Date();
252+
const distance = countDownDate - now.getTime();
253+
254+
// If the count down is finished, show release text
255+
if (distance < 0) {
256+
clearInterval(x);
257+
countdownElement.innerHTML = "AVAILABLE NOW!";
258+
downloadButton.textContent = "Download";
259+
downloadButton.classList.remove("btn-primary");
260+
downloadButton.classList.add("btn-success");
261+
return; // Exit the function
262+
}
263+
264+
// --- New logic for an estimated, less precise countdown ---
265+
const releaseDate = new Date(countDownDate);
266+
267+
// Calculate the difference in months
268+
let months = (releaseDate.getFullYear() - now.getFullYear()) * 12;
269+
months -= now.getMonth();
270+
months += releaseDate.getMonth();
271+
272+
// Adjust for days
273+
if (releaseDate.getDate() < now.getDate()) {
274+
months--;
275+
}
276+
277+
const days = Math.floor((distance % (1000 * 60 * 60 * 24 * 30.44)) / (1000 * 60 * 60 * 24));
278+
279+
let output = "Approx. ";
280+
if (months > 0) {
281+
output += `${months} month${months > 1 ? 's' : ''}`;
282+
}
283+
284+
// Display the result
285+
countdownElement.innerHTML = output;
286+
287+
}, 3600000); // Update every hour
288+
289+
// Run once immediately on page load
290+
(function(){
291+
const now = new Date();
292+
const distance = countDownDate - now.getTime();
293+
if (distance < 0) {
294+
clearInterval(x);
295+
countdownElement.innerHTML = "AVAILABLE NOW!";
296+
downloadButton.textContent = "Download";
297+
downloadButton.classList.remove("btn-primary");
298+
downloadButton.classList.add("btn-success");
299+
return;
300+
}
301+
const releaseDate = new Date(countDownDate);
302+
let months = (releaseDate.getFullYear() - now.getFullYear()) * 12;
303+
months -= now.getMonth();
304+
months += releaseDate.getMonth();
305+
if (releaseDate.getDate() < now.getDate()) {
306+
months--;
307+
}
308+
let output = "Approx. ";
309+
if (months > 0) {
310+
output += `${months} month${months > 1 ? 's' : ''}`;
311+
} else {
312+
const days = Math.ceil(distance / (1000 * 60 * 60 * 24));
313+
output += `${days} day${days > 1 ? 's' : ''}`;
314+
}
315+
countdownElement.innerHTML = output;
316+
})();
317+
</script>
318+
319+
</body>
320+
</html>

0 commit comments

Comments
 (0)