add website
This commit is contained in:
+267
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="MontaukOS">
|
||||
<title>MontaukOS</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
}
|
||||
p { margin: 0 0 0.5em; }
|
||||
h2 { margin: 0.5em 0; }
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar li {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.sidebar a {
|
||||
color: #0066CC;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.sidebar a:hover {
|
||||
color: #004499;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
a { color: #0000EE; }
|
||||
a:visited { color: #0066CC; }
|
||||
hr { border-style: solid; border-width: 1px 0 0 0; border-color: #999; }
|
||||
pre { background: #f0f0f0; padding: 0.5em; overflow-x: auto; }
|
||||
.center { text-align: center; }
|
||||
.box {
|
||||
border: 1px solid #999;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 0 1em;
|
||||
margin: 0;
|
||||
}
|
||||
.app-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
.app-item img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: block;
|
||||
}
|
||||
.app-item a {
|
||||
color: #0000EE;
|
||||
text-decoration: none;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
body {
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding: 1em 0.75em;
|
||||
}
|
||||
.sidebar {
|
||||
width: auto;
|
||||
}
|
||||
.sidebar ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 1em;
|
||||
}
|
||||
.sidebar hr {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="sidebar">
|
||||
<ul>
|
||||
<li><a href="index.html" class="current">Home</a></li>
|
||||
<li><a href="downloads.html">Downloads</a></li>
|
||||
<li><a href="docs/index.html">Documentation</a></li>
|
||||
<li><a href="https://git.montaukos.org/daniel/MontaukOS/issues">Issue tracker</a></li>
|
||||
<li><a href="https://git.montaukos.org/daniel/MontaukOS">Git</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="center">
|
||||
<h1>MontaukOS</h1>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h2 id="about">About</h2>
|
||||
<p>
|
||||
MontaukOS is a multi-user, multitasking operating system that runs on bare metal.
|
||||
It features its own kernel and modern userspace with its own desktop environment,
|
||||
targeting both emulators and real hardware.
|
||||
</p>
|
||||
<p style="text-align: center;""><a href="downloads.html">Downloads & release notes</a> | <a href="docs/tutorials/initialsetup.html">Setup tutorial</a></p>
|
||||
<p>
|
||||
</p>
|
||||
<hr>
|
||||
<br>
|
||||
<a href="images/montaukos-demo.jpg"><img src="images/montaukos-demo.jpg" width=800 alt=""></a>
|
||||
<p style="text-align: center;">Screenshot of MontaukOS 0.1.8</p>
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
<div class="center"><p>Copyright © 2025-2026 Montauk Operating System Project</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 Device Explorer',
|
||||
caption: 'Process Manager and Device 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>
|
||||
Reference in New Issue
Block a user