daniel/MontaukOS
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: montaukos.org web improvements

Browse Source
This commit is contained in:
Daniel Hammer
2026-04-18 17:18:05 +02:00
parent ee47e5d68f
commit 68464af440
7 changed files with 353 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
montaukos.org/index.html
+161 -14
View File
@@ -80,46 +80,107 @@
.app-item a:hover {
text-decoration: underline;
}
.slideshow {
margin: 0 0 1em;
}
.slideshow-frame {
position: relative;
}
.slideshow-frame img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: contain;
}
.slideshow-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 1px solid #999;
background: rgba(255, 255, 255, 0.9);
color: #222;
padding: 0.35em 0.55em;
cursor: pointer;
font: inherit;
}
.slideshow-button:hover {
background: #fff;
}
.slideshow-button.prev {
left: 0.75em;
}
.slideshow-button.next {
right: 0.75em;
}
.slideshow-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
margin-top: 0.6em;
flex-wrap: wrap;
}
.slideshow-caption {
margin: 0;
}
.slideshow-dots {
display: flex;
gap: 0.4em;
}
.slideshow-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #999;
background: #ddd;
padding: 0;
}
.slideshow-dot.active {
background: #0066CC;
border-color: #004499;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Applications</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#about">About</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#applications">Applications</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="docs/index.html">Documentation</a></li>
</ul>
</div>
<div class="main">
<div class="center">
<h1>MontaukOS</h1>
<p>Modern and unique operating bare metal operating system</p>
<p>Modern and unique bare metal operating system</p>
</div>
<hr>
<h2>About</h2>
<h2 id="about">About</h2>
<p>
MontaukOS is a novel multi-user operating system that runs on bare metal.
It features its own preemptive multitasking kernel and modern userspace with its own desktop environment,
targeting both emulators and real hardware.
</p>
<h2>Features</h2>
<br>
<p>
MontaukOS is <strong>not</strong> Linux, nor is it Unix-like. Rather, it uses its own custom Montauk kernel with its own architecture and design.
</p>
<hr>
<h2 id="features">Features</h2>
<ul style="margin: 0 0 0.5em;">
<li>Real hardware support: Intel GPU, e100e Ethernet, HDA audio, Bluetooth</li>
<li>Storage: AHCI/NVMe SSDs, GPT partitions, ext2 and FAT32 filesystems</li>
<li>ACPI support including S3 sleep and shutdown</li>
<li>ACPI support including support for shutdown and partial support for S3 sleep</li>
<li>USB and PS/2 input device support</li>
<li>Desktop environment with 12+ applications</li>
</ul>
<h2>Applications</h2>
<h2 id="applications">Applications</h2>
<br>
<div class="app-grid">
<div class="app-item">
@@ -152,12 +213,98 @@ targeting both emulators and real hardware.
</div>
</div>
<br><br>
<hr>
<h2 id="screenshots">Screenshots</h2>
<div class="slideshow">
<div class="slideshow-frame">
<img id="slideshow-image" src="images/mtk_doomgame.png" alt="MontaukOS screenshot showing DOOM running in the desktop environment">
<button type="button" class="slideshow-button prev" id="slideshow-prev" aria-label="Show previous screenshot">&lt;</button>
<button type="button" class="slideshow-button next" id="slideshow-next" aria-label="Show next screenshot">&gt;</button>
</div>
<div class="slideshow-meta">
<p class="slideshow-caption" id="slideshow-caption">DOOM running inside MontaukOS.</p>
<div class="slideshow-dots" id="slideshow-dots" aria-label="Screenshot selector"></div>
</div>
</div>
<hr>
<div class="center">
<a href="#">Releases</a></p>
<a href="downloads.html">Releases</a>
</div>
<hr>
<br>
<div class="center"><p>Copyright &copy; 2025-2026 Montauk Operating System</p></div>
</div>
<script>
const slideshowItems = [
{
src: 'images/mtk_doomgame.png',
alt: 'MontaukOS screenshot showing DOOM running in the desktop environment',
caption: 'DOOM running inside MontaukOS.'
},
{
src: 'images/mtk_procmgr_devexplorer.png',
alt: 'MontaukOS screenshot showing Process Manager and Developer Explorer',
caption: 'Process Manager and Developer Explorer open on the MontaukOS desktop.'
}
];
const slideshowImage = document.getElementById('slideshow-image');
const slideshowCaption = document.getElementById('slideshow-caption');
const slideshowDots = document.getElementById('slideshow-dots');
const slideshowPrev = document.getElementById('slideshow-prev');
const slideshowNext = document.getElementById('slideshow-next');
let slideshowIndex = 0;
function renderSlideshow(index) {
const item = slideshowItems[index];
slideshowImage.src = item.src;
slideshowImage.alt = item.alt;
slideshowCaption.textContent = item.caption;
Array.from(slideshowDots.children).forEach(function(dot, dotIndex) {
dot.classList.toggle('active', dotIndex === index);
dot.setAttribute('aria-current', dotIndex === index ? 'true' : 'false');
});
}
function showSlide(index) {
slideshowIndex = (index + slideshowItems.length) % slideshowItems.length;
renderSlideshow(slideshowIndex);
}
if (slideshowItems.length === 0) {
slideshowImage.remove();
slideshowCaption.textContent = 'Screenshots will appear here when they are added to the site.';
slideshowPrev.hidden = true;
slideshowNext.hidden = true;
} else {
slideshowItems.forEach(function(item, index) {
const dot = document.createElement('span');
dot.className = 'slideshow-dot';
dot.setAttribute('aria-hidden', 'true');
slideshowDots.appendChild(dot);
});
slideshowPrev.addEventListener('click', function() {
showSlide(slideshowIndex - 1);
});
slideshowNext.addEventListener('click', function() {
showSlide(slideshowIndex + 1);
});
if (slideshowItems.length === 1) {
slideshowPrev.hidden = true;
slideshowNext.hidden = true;
}
renderSlideshow(slideshowIndex);
}
</script>
</body>
</html>