1
0
Fork 0
isopod.cool/desktop.html
2023-01-09 14:30:45 -07:00

78 lines
7.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>niceopodOS</title>
<link href="desktop.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<header>
<nav>
<a href="https://deeptwisty.com/"><img src="deeptwisty.png" style="width:24px;height:24px;"/></a>
<div id="apps" class="systray">
<button class="navbutton" onclick="openwindow('about')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="24" fill="currentColor"><path d="M4 0h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm1.229 16H4a2 2 0 0 1-.813-.172 5.58 5.58 0 0 1 3.347-3.758 1 1 0 1 1 .733 1.86A3.579 3.579 0 0 0 5.229 18zm9.512 0a3.658 3.658 0 0 0-2.097-2.066 1 1 0 1 1 .712-1.868 5.659 5.659 0 0 1 3.437 3.77A1.993 1.993 0 0 1 16 18h-1.26zM10 4a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V8a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V8a2 2 0 0 0-2-2z"></path></svg></button>
<button class="navbutton" onclick="openwindow('blog')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -1.5 24 24" width="24" fill="currentColor"><path d="M13.89 10.808l3.616-3.616a3 3 0 0 0-4.243-4.242L11.77 4.444l.598 2.23.896-.896a1 1 0 1 1 1.415 1.414L11.66 10.21l2.23.598zm-1.633 1.633l-2.23-.598-2.74 2.74 2.66.169 2.31-2.311zm-2.12-6.364L5.71 10.502l.163 2.665 4.86-4.86-.598-2.23zM5.403 16.466L1.95 19.92a1 1 0 0 1-1.414-1.414l3.45-3.45-.326-5.331 8.19-8.19a5 5 0 1 1 7.07 7.072l-8.198 8.198-5.318-.34z"></path></svg></button>
<button class="navbutton" onclick="openwindow('links')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" width="24" fill="currentColor"><path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path></svg></button>
<button class="navbutton" onclick="openwindow('stats')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -4 24 24" width="24" fill="currentColor"><path d="M1 0a1 1 0 0 1 1 1v14a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1zm12 4a1 1 0 0 1 1 1v10a1 1 0 0 1-2 0V5a1 1 0 0 1 1-1zM7 8a1 1 0 0 1 1 1v6a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path></svg></button>
<button class="navbutton" onclick="openwindow('stuff')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="24" fill="currentColor"><path d="M10.83 2H17a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h5c1.306 0 2.417.835 2.83 2zM17 4H9.415l-.471-1.334A1.001 1.001 0 0 0 8 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"></path><path d="M1 5h18v2H1z"></path></svg></button>
<button class="navbutton" onclick="openwindow('more')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-9 -2 24 24" width="24" fill="currentColor"><path d="M3 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 2a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 14a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0-5a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path></svg></button>
</div>
</nav>
<div class="systray"><p>niceopodOS alpha v1.0</p></div>
<div class="systray"><p id="date"><script type="text/javascript">const d = new Date; document.write(`${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`);</script></p></div>
<div class="systray" style="padding: 0;">
<input id="settingsbutton" type="checkbox" style="display: none;">
<label for="settingsbutton" class="navbutton"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="24" fill="currentColor"><path d="M20 8.163A2.106 2.106 0 0 0 18.926 10c0 .789.433 1.476 1.074 1.837l-.717 2.406a2.105 2.105 0 0 0-2.218 3.058l-2.062 1.602A2.104 2.104 0 0 0 11.633 20l-3.29-.008a2.104 2.104 0 0 0-3.362-1.094l-2.06-1.615A2.105 2.105 0 0 0 .715 14.24L0 11.825A2.106 2.106 0 0 0 1.051 10C1.051 9.22.63 8.54 0 8.175L.715 5.76a2.105 2.105 0 0 0 2.207-3.043L4.98 1.102A2.104 2.104 0 0 0 8.342.008L11.634 0a2.104 2.104 0 0 0 3.37 1.097l2.06 1.603a2.105 2.105 0 0 0 2.218 3.058L20 8.162zM14.823 3.68c0-.063.002-.125.005-.188l-.08-.062a4.103 4.103 0 0 1-4.308-1.428l-.904.002a4.1 4.1 0 0 1-4.29 1.43l-.095.076A4.108 4.108 0 0 1 2.279 7.6a4.1 4.1 0 0 1 .772 2.399c0 .882-.28 1.715-.772 2.4a4.108 4.108 0 0 1 2.872 4.09l.096.075a4.104 4.104 0 0 1 4.289 1.43l.904.002a4.1 4.1 0 0 1 4.307-1.428l.08-.062A4.108 4.108 0 0 1 17.7 12.4a4.102 4.102 0 0 1-.773-2.4c0-.882.281-1.716.773-2.4a4.108 4.108 0 0 1-2.876-3.919zM10 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg></label>
<div id="settingspanel">
<table>
<thead>
<tr><td colspan="2" style="text-align: center;">Settings</td></tr>
</thead>
<tbody>
<tr>
<td><label for="bginput">Wallpaper</label></td>
<td><input placeholder="Image URL" value="https://i.redd.it/abhfagc5t4591.jpg" id="bginput"></td>
</tr>
<tr>
<td><label for="bcinput">Text Color</label></td>
<td><input placeholder="Hex Code" value="#ffffff" id="tcinput"></td>
</tr>
<tr>
<td><label for="bcinput">UI Color</label></td>
<td><input placeholder="Hex Code" value="#000000bf" id="bcinput"></td>
</tr>
<tr>
<td><label for="brinput">Rounding</label></td>
<td><input type="number" step="0.05" min="0" max="1" placeholder="Value from 0-1" value="1" id="brinput"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><script type="text/javascript">
function update() {
changeRootVar('bgimage', `url(${document.getElementById('bginput').value})`);
changeRootVar('txtcolor', `#${document.getElementById('tcinput').value.replace('#', '')}`);
changeRootVar('uicolor', `#${document.getElementById('bcinput').value.replace('#', '')}`);
changeRootVar('borderrounding', document.getElementById('brinput').value);
}
window.onload = function() { update(); };
</script>
<button onclick="update();">Apply</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</header>
<main id="desktop">
<noscript><div class="window" style="display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #00000077; color: whitesmoke;"><h1>Shockingly, this page doesn't work without Javascript.</h1><h3 style="margin-top: 0">Sorry about that.</h3><p>You can view a normal homepage without all the flashy interactive junk <a href="index.html">here</a>.</p></div></noscript>
</main>
<!--img src="images/isopod_with_aviators.png" style="z-index: 1; position: absolute; right: 22%; top: 59%; width: 6rem; transform: rotate(-20deg);" />
<a target="_blank" href="https://wobble.town/visit/93" style="z-index: 1; position:absolute; top: 63%; right: 19%; font-size: 0;" title="charles"><img src="https://wobble.town/visit/93/wobble.gif" style="width: 48px; image-rendering: pixelated; filter:hue-rotate(20deg) brightness(110%) drop-shadow(1px 1px 0 #00000088);"></a-->
<script src="desktop.js"></script>
<script type="text/javascript">
window['CboxReady'] = function (Cbox) {
Cbox('button', '3-3517193-ZPAfDN');
}
</script>
<script src="https://static.cbox.ws/embed/2.js" async></script>
</body>
</html>