Skip to content

Commit 4a8a930

Browse files
neoapps-devneoapps-dev
authored
feat: revamp website design (#4)
* feat: revamp website design * feat: new website * feat: new website * revert: delete install.sh
1 parent 4a57a56 commit 4a8a930

3 files changed

Lines changed: 393 additions & 185 deletions

File tree

‎download.html‎

Lines changed: 65 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,81 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>ObsidianOS Installation</title>
77
<link rel="stylesheet" href="styles.css">
8-
<link rel="icon" href="/icon.png" type="image/png" />
8+
<link rel="icon" href="/logo.png" type="image/png">
99
</head>
1010
<body>
11+
<div class="background-container"></div>
12+
<div class="mouse-follower mouse-follower-1"></div>
13+
<div class="mouse-follower mouse-follower-2"></div>
14+
<div class="mouse-follower mouse-follower-3"></div>
1115
<nav>
12-
<div class="nav-left">
13-
<img src="logo.png" alt="ObsidianOS Logo" class="nav-logo">
16+
<div class="nav-container">
17+
<div class="nav-left">
18+
<img src="logo.png" alt="ObsidianOS Logo" class="nav-logo">
19+
<a href="/" class="nav-title">ObsidianOS</a>
20+
</div>
1421
<div class="nav-links">
15-
<a href="/">Home</a>
16-
<b><a href="/download.html">Install</a></b>
22+
<a href="/download.html">Install</a>
1723
<a href="/docs/">Docs</a>
18-
<a href="https://github.com/Obsidian-OS/">GitHub</a>
19-
<a href="https://www.reddit.com/r/obsidian_OS/">Reddit</a>
20-
<a href="https://discord.gg/AsYgAzSZ">Discord</a>
24+
<a href="https://github.com/Obsidian-OS/" target="_blank" rel="noopener noreferrer">GitHub</a>
25+
<a href="https://www.reddit.com/r/obsidian_OS/" target="_blank" rel="noopener noreferrer">Reddit</a>
26+
<a href="https://discord.gg/AsYgAzSZ" target="_blank" rel="noopener noreferrer">Discord</a>
2127
</div>
2228
</div>
2329
</nav>
24-
<header>
25-
<img src="logo.png" alt="ObsidianOS Logo" class="logo">
26-
<h1>Install ObsidianOS</h1>
27-
<p></p>
28-
</header>
2930
<main>
30-
<p>
31-
As ObsidianOS is image-based, the installation is quite diffrent than Arch.<br>
32-
<ol>
33-
<li><a href="https://github.com/Obsidian-OS/archiso">Create your own ISO</a> or get one from the button below</li>
34-
<li>Install <a href="https://github.com/Obsidian-OS/mkobsidiansfs">mkobsidiansfs</a> and <a href="https://github.com/Obsidian-OS/obsidianctl">obsidianctl</a> to install ObsidianOS on a disk from an Arch host.</li>
35-
<li><b>NEW!</b> From an existing arch host, run <pre><code>sudo bash -c "$(curl -fsSL https://arbs.obsidianos.xyz)"</code></pre></li>
36-
</ol>
37-
Then you will need to follow the <a href="/docs/install">installation guide</a>.
38-
</p>
39-
<a href="https://sourceforge.net/projects/obsidianos/files/latest/download" class="download-btn">Download prebuilt ISOs</a>
31+
<header>
32+
<h1 class="main-title">Install ObsidianOS</h1>
33+
<p class="subtitle">Get up and running with the future of Arch Linux.</p>
34+
</header>
35+
<section class="install-options">
36+
<div class="install-card">
37+
<h2>Option 1: Pre-built ISO</h2>
38+
<p>The easiest way to get started. Download a pre-built ISO and follow our installation guide.</p>
39+
<a href="https://sourceforge.net/projects/obsidianos/files/latest/download" class="download-btn">Download ISO</a>
40+
</div>
41+
<div class="install-card">
42+
<h2>Option 2: Build Your Own</h2>
43+
<p>For advanced users who want to customize their installation. Create your own ISO from scratch.</p>
44+
<a href="https://github.com/Obsidian-OS/archiso" class="download-btn">Build from Source</a>
45+
</div>
46+
<div class="install-card">
47+
<h2>Option 3: Arch-based Installer</h2>
48+
<p>Install ObsidianOS directly from an existing Arch Linux system using our installer script.</p>
49+
<pre><code>sudo bash -c "$(curl -fsSL https://arbs.obsidianos.xyz)"</code></pre>
50+
</div>
51+
</section>
52+
<section class="post-install">
53+
<h2>Next Steps</h2>
54+
<p>After installation, be sure to check out our comprehensive documentation for configuration and usage guides.</p>
55+
<a href="/docs/install" class="download-btn">Installation Guide</a>
56+
</section>
57+
<section class="community">
58+
<h2>Join the Community</h2>
59+
<p>Have questions or want to connect with other users? Join our community on Reddit or Discord.</p>
60+
<div class="community-links">
61+
<a href="https://www.reddit.com/r/obsidian_OS/" target="_blank" rel="noopener noreferrer" class="community-link">Reddit</a>
62+
<a href="https://discord.gg/AsYgAzSZ" target="_blank" rel="noopener noreferrer" class="community-link">Discord</a>
63+
</div>
64+
</section>
4065
</main>
4166
<footer>
42-
&copy; 2025 ObsidianOS Project — <a href="/docs/" style="color:#9b59b6;">Docs</a> | <a href="https://github.com/Obsidian-OS/" style="color:#1f6feb;">GitHub</a>
67+
<p>&copy; 2025 ObsidianOS Project</p>
68+
<div class="footer-links">
69+
<a href="/docs/">Docs</a>
70+
<a href="https://github.com/Obsidian-OS/" target="_blank" rel="noopener noreferrer">GitHub</a>
71+
</div>
4372
</footer>
73+
<script>
74+
const followers = document.querySelectorAll('.mouse-follower');
75+
document.addEventListener('mousemove', (e) => {
76+
followers.forEach((follower, index) => {
77+
setTimeout(() => {
78+
follower.style.left = e.pageX + 'px';
79+
follower.style.top = e.pageY + 'px';
80+
}, index * 100);
81+
});
82+
});
83+
</script>
4484
</body>
45-
</html>
85+
</html>

‎index.html‎

Lines changed: 58 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,75 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>ObsidianOS</title>
77
<link rel="stylesheet" href="styles.css">
8-
<link rel="icon" href="/logo.png" type="image/png" />
8+
<link rel="icon" href="/logo.png" type="image/png">
99
</head>
1010
<body>
11+
<div class="background-container"></div>
12+
<div class="mouse-follower mouse-follower-1"></div>
13+
<div class="mouse-follower mouse-follower-2"></div>
14+
<div class="mouse-follower mouse-follower-3"></div>
1115
<nav>
12-
<div class="nav-left">
13-
<img src="logo.png" alt="ObsidianOS Logo" class="nav-logo">
16+
<div class="nav-container">
17+
<div class="nav-left">
18+
<img src="logo.png" alt="ObsidianOS Logo" class="nav-logo">
19+
<a href="/" class="nav-title">ObsidianOS</a>
20+
</div>
1421
<div class="nav-links">
15-
<b><a href="/">Home</a></b>
16-
<a href="/download.html">Install</a>
22+
<a href="/download">Install</a>
1723
<a href="/docs/">Docs</a>
18-
<a href="https://github.com/Obsidian-OS/">GitHub</a>
19-
<a href="https://www.reddit.com/r/obsidian_OS/">Reddit</a>
20-
<a href="https://discord.gg/AsYgAzSZ">Discord</a>
24+
<a href="https://github.com/Obsidian-OS/" target="_blank" rel="noopener noreferrer">GitHub</a>
25+
<a href="https://www.reddit.com/r/obsidian_OS/" target="_blank" rel="noopener noreferrer">Reddit</a>
26+
<a href="https://discord.gg/AsYgAzSZ" target="_blank" rel="noopener noreferrer">Discord</a>
2127
</div>
2228
</div>
2329
</nav>
24-
<header>
25-
<img src="logo.png" alt="ObsidianOS Logo" class="logo">
26-
<h1>ObsidianOS</h1>
27-
<p>The Arch-based distro with A/B partitioning</p>
28-
</header>
2930
<main>
30-
<p>
31-
ObsidianOS is an Arch-based GNU/Linux distro with an A/B partition style.<br>
32-
If a package has a breaking change that causes some issues, you can just reboot into the second partition and restore the first one.<br>
33-
All of this is done without BTRFS relying on the stability of ext4.<br>
34-
</p>
35-
<a href="/download.html" class="download-btn">Install</a>
31+
<header>
32+
<img src="logo.png" alt="ObsidianOS Logo" class="logo">
33+
<h1 class="main-title">ObsidianOS</h1>
34+
<p class="subtitle">The Arch-based distro with A/B partitioning</p>
35+
</header>
36+
<section class="features">
37+
<div class="feature-card">
38+
<h2>A/B Partitioning</h2>
39+
<p>With A/B partitioning, updates are atomic. If an update fails, you can simply reboot into the previous partition, ensuring your system is always bootable.</p>
40+
</div>
41+
<div class="feature-card">
42+
<h2>Arch-Based</h2>
43+
<p>Enjoy the power and flexibility of Arch Linux, with access to the latest software and a massive repository of packages through the AUR.</p>
44+
</div>
45+
<div class="feature-card">
46+
<h2>Stable and Reliable</h2>
47+
<p>Built on the stability of ext4, ObsidianOS provides a reliable computing experience without the complexities of other filesystems.</p>
48+
</div>
49+
</section>
50+
<a href="/download.html" class="download-btn">Install Now</a>
51+
<section class="community">
52+
<h2>Join the Community</h2>
53+
<p>Have questions or want to connect with other users? Join our community on Reddit or Discord.</p>
54+
<div class="community-links">
55+
<a href="https://www.reddit.com/r/obsidian_OS/" target="_blank" rel="noopener noreferrer" class="community-link">Reddit</a>
56+
<a href="https://discord.gg/AsYgAzSZ" target="_blank" rel="noopener noreferrer" class="community-link">Discord</a>
57+
</div>
58+
</section>
3659
</main>
3760
<footer>
38-
&copy; 2025 ObsidianOS Project — <a href="/docs/" style="color:#9b59b6;">Docs</a> | <a href="https://github.com/Obsidian-OS/" style="color:#1f6feb;">GitHub</a>
61+
<p>&copy; 2025 ObsidianOS Project</p>
62+
<div class="footer-links">
63+
<a href="/docs/">Docs</a>
64+
<a href="https://github.com/Obsidian-OS/" target="_blank" rel="noopener noreferrer">GitHub</a>
65+
</div>
3966
</footer>
67+
<script>
68+
const followers = document.querySelectorAll('.mouse-follower');
69+
document.addEventListener('mousemove', (e) => {
70+
followers.forEach((follower, index) => {
71+
setTimeout(() => {
72+
follower.style.left = e.pageX + 'px';
73+
follower.style.top = e.pageY + 'px';
74+
}, index * 100);
75+
});
76+
});
77+
</script>
4078
</body>
4179
</html>

0 commit comments

Comments
 (0)