144 lines
6.4 KiB
HTML
144 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Miasma OS</title>
|
||
<link rel="icon" href="https://git.miasma-os.com/miasma/miasma-site/src/commit/589e0e52f7c99af8c70275a04f98d3fce036f971/assets/miasma-cyber.png">
|
||
<style>
|
||
/* ── Kanagawa‑Dragon palette ──────────────────────────────────────── */
|
||
:root {
|
||
--bg : #1f1f28; /* background */
|
||
--fg : #c0c0d0; /* foreground (text) */
|
||
--blue : #7aa2f7;
|
||
--cyan : #7dcfff;
|
||
--green : #9ece6a;
|
||
--orange : #ff9e64;
|
||
--purple : #bb9af7;
|
||
--red : #e27878;
|
||
--yellow : #e0af68;
|
||
}
|
||
|
||
/* ── Fake tiling (add later) ─────────────────────────────────────────────────── */
|
||
/* .page {
|
||
position: absolute;
|
||
inset: 0;
|
||
padding: 4rem 2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #222;
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
transition:
|
||
opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
|
||
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
|
||
pointer-events: none;
|
||
} */
|
||
/*
|
||
.page.active {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
pointer-events: auto;
|
||
} */
|
||
|
||
/* ── Global layout ─────────────────────────────────────────────────── */
|
||
html,body{margin:0;height:100%;font-family:monospace;background:var(--bg);color:var(--fg);}
|
||
#container{display:flex;flex-direction:column;height:100%;}
|
||
header{padding:0.8rem 1rem;background:var(--bg);border-bottom:1px solid var(--blue);}
|
||
h1{margin:0;font-size:1.2rem;color:var(--blue);}
|
||
nav{display:flex;background:var(--bg);border-bottom:1px solid var(--blue);}
|
||
nav button{
|
||
flex:1;padding:0.6rem 0;background:none;border:none;color:var(--fg);
|
||
cursor:pointer;transition:background .2s;
|
||
}
|
||
nav button.active{background:var(--blue);color:#fff;}
|
||
nav button:hover:not(.active){background:rgba(122,162,247,.2);}
|
||
|
||
/* ── Terminal‑style window ───────────────────────────────────────────── */
|
||
#terminal{
|
||
flex:1;padding:1rem;overflow:auto;
|
||
background:var(--bg);
|
||
box-shadow: inset 0 0 0 2px var(--blue);
|
||
}
|
||
.prompt{color:var(--cyan);}
|
||
.cmd{color:var(--green);}
|
||
.link{color:var(--yellow);text-decoration:none;}
|
||
.link:hover{text-decoration:underline;}
|
||
pre.ascii-art {
|
||
font-family: "Courier New", monospace;
|
||
font-size: 14px;
|
||
line-height: 1.2;
|
||
white-space: pre;
|
||
margin: 0;
|
||
color:var(--yellow);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="container">
|
||
<header><h1>Miasma OS</h1></header>
|
||
<nav>
|
||
<button id="tab-home" class="active">Home</button>
|
||
<button id="tab-git">User Repository</button>
|
||
<button id="tab-wiki">Wiki</button>
|
||
<button id="tab-about">About</button>
|
||
</nav>
|
||
<div id="terminal">
|
||
<pre class=ascii-art>
|
||
|
||
.
|
||
t ;W
|
||
.. : Ej .. f#E .. : ..
|
||
,W, .Et E#, ;W, .E#f ,W, .Et ;W,
|
||
t##, ,W#t E#t j##, iWW; t##, ,W#t j##,
|
||
L###, j###t E#t G###, L##Lffi L###, j###t G###,
|
||
.E#j##, G#fE#t E#t :E####, tLLG##L .E#j##, G#fE#t :E####,
|
||
;WW; ##,:K#i E#t E#t ;W#DG##, ,W#i ;WW; ##,:K#i E#t ;W#DG##,
|
||
j#E. ##f#W, E#t E#t j###DW##, j#E. j#E. ##f#W, E#t j###DW##,
|
||
.D#L ###K: E#t E#t G##i,,G##, .D#j .D#L ###K: E#t G##i,,G##,
|
||
:K#t ##D. E#t E#t :K#K: L##, ,WK, :K#t ##D. E#t :K#K: L##,
|
||
... #G .. E#t ;##D. L##, EG. ... #G .. ;##D. L##,
|
||
j ,;. ,,, .,, , j ,,, .,,
|
||
</pre>
|
||
|
||
<div id="content-home">
|
||
<p><span class="prompt">➜</span> <span class="cmd">~/coming-soon</span></p>
|
||
<p>Welcome to <strong>Miasma OS</strong> - An atomic Fedora spin focused on musicians and music producers.</p>
|
||
<p><strong>Overview:</strong></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const tabHome = document.getElementById('tab-home');
|
||
const tabGit = document.getElementById('tab-git');
|
||
const tabWiki = document.getElementById('tab-wiki');
|
||
const tabAbout = document.getElementById('tab-about');
|
||
const cntHome = document.getElementById('content-home');
|
||
const cntGit = document.getElementById('content-git');
|
||
const cntWiki = document.getElementById('content-wiki');
|
||
const cntAbout = document.getElementById('content-about');
|
||
|
||
tabHome.addEventListener('click',()=>{
|
||
tabHome.classList.add('active'); tabWiki.classList.remove('active'); tabGit.classList.remove('active');tabAbout.classList.remove('active');
|
||
cntHome.style.display='block'; cntWiki.style.display='none'; cntGit.style.display='none';cntAbout.style.display='none';
|
||
});
|
||
tabGit.addEventListener('click',()=>{
|
||
tabGit.classList.add('active'); tabWiki.classList.remove('active');tabHome.classList.remove('active');tabAbout.classList.remove('active');
|
||
cntGit.style.display='block'; cntWiki.style.display='none';cntHome.style.display='none';cntAbout.style.display='none';
|
||
});
|
||
tabWiki.addEventListener('click',()=>{
|
||
tabWiki.classList.add('active'); tabGit.classList.remove('active');tabHome.classList.remove('active');tabAbout.classList.remove('active');
|
||
cntWiki.style.display='block'; cntGit.style.display='none';cntHome.style.display='none';cntAbout.style.display='none';
|
||
});
|
||
tabAbout.addEventListener('click',()=>{
|
||
tabAbout.classList.add('active'); tabWiki.classList.remove('active'); tabGit.classList.remove('active');tabHome.classList.remove('active');
|
||
cntAbout.style.display='block'; cntWiki.style.display='none'; cntGit.style.display='none';cntHome.style.display='none';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
|