LithosAnanke/site/com/canvas/TryIt.dc.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>StarshipOS — Try it</title>
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&amp;family=Exo+2:wght@600;700&amp;display=swap" rel="stylesheet">
<style>
body{margin:0;background:#0A1222}
a{color:#F5891F}a:hover{color:#FFB061}
</style>
</helmet>
<div style="background: #0A1222; color: #EEF2F7; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; line-height: 1.6; min-height: 100vh">

<header style="border-bottom: 1px solid #22324D">
<nav aria-label="Main" style="max-width: 1120px; margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px">
<a href="Main.dc.html" style="font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 22px; color: #EEF2F7; text-decoration: none; letter-spacing: 0.02em">starship<span style="color: {{accent}}">OS</span></a>
<div style="display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px">
<a href="Main.dc.html" style="color: #C8D1DE; text-decoration: none">Home</a>
<a href="TryIt.dc.html" aria-current="page" style="color: #EEF2F7; text-decoration: none; border-bottom: 2px solid {{accent}}">Try it</a>
<a href="Inquiries.dc.html" style="color: #C8D1DE; text-decoration: none">Inquiries</a>
<a href="https://starshipos.org" style="color: {{accent}}; text-decoration: none">Contributors →</a>
</div>
</nav>
</header>

<section style="max-width: 1120px; margin: 0 auto; padding: 80px 24px 32px">
<p style="margin: 0 0 12px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #4FD1B0">ok&gt; try it</p>
<h1 style="margin: 0 0 16px; font-family: 'Exo 2', sans-serif; font-size: clamp(36px, 5vw, 56px); line-height: 1.1">A StarshipOS machine of your own.</h1>
<p style="margin: 0; max-width: 680px; font-size: 18px; color: #C8D1DE">Not a recording, not a simulation of StarshipOS: the console below is a real machine, started just for you and already at its prompt. You are Zuse, the superuser — of a machine that exists only for your session. There is nothing to break, and nothing you do is kept.</p>
</section>

<section aria-label="The console" style="max-width: 1120px; margin: 0 auto; padding: 24px 24px 48px">
<div style="background: #050A14; border: 1px solid #34486A; border-radius: 8px; overflow: hidden">
<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #22324D; background: #0E182B; font-size: 13px; color: #A3AEC2">
<span style="display: flex; align-items: center; gap: 10px"><span aria-hidden="true" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #4FD1B0"></span>StarshipOS · amd64 · your session</span>
<span>try.starshipos-f18.com</span>
</div>
<div style="padding: 24px; min-height: 360px; font-size: 15px; line-height: 1.7; color: #EEF2F7; overflow-x: auto">
<div style="color: #A3AEC2">StarshipOS -- starting a throwaway machine, yours for up to 30 minutes. Nothing you do is kept.</div>
<div style="color: #A3AEC2">Try:  3 4 + .      : SQUARE DUP * ;  7 SQUARE .</div>
<div style="color: #A3AEC2; margin-bottom: 12px">Ready -- type a line and press Enter.</div>
<div><span style="color: #FFA500">[zuse@Hera]</span> <span style="color: #55FFFF">ok&gt;</span> 3 4 + .</div>
<div><span style="color: #FFA500">[zuse@Hera]</span> 7  ok</div>
<div><span style="color: #FFA500">[zuse@Hera]</span> <span style="color: #55FFFF">ok&gt;</span> : SQUARE DUP * ;  7 SQUARE .</div>
<div><span style="color: #FFA500">[zuse@Hera]</span> 49  ok</div>
<div><span style="color: #FFA500">[zuse@Hera]</span> <span style="color: #55FFFF">ok&gt;</span> <span aria-hidden="true" style="display: inline-block; width: 9px; height: 18px; vertical-align: text-bottom; background: #EEF2F7"></span></div>
</div>
</div>
<p style="margin: 12px 0 0; font-size: 13px; color: #A3AEC2">[LIVE CONSOLE] On the site this panel is the machine itself — the console of try.starshipos-f18.com, embedded. If it does not connect, every machine is in use; try again in a few minutes.</p>
</section>

<section aria-label="Your machine" style="border-top: 1px solid #22324D; border-bottom: 1px solid #22324D; background: #0E182B">
<div style="max-width: 1120px; margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px">
<div><div style="font-family: 'Exo 2', sans-serif; font-size: 32px; font-weight: 700; color: {{accent}}">Zuse</div><div style="font-size: 14px; color: #A3AEC2">the superuser, of this machine only</div></div>
<div><div style="font-family: 'Exo 2', sans-serif; font-size: 32px; font-weight: 700; color: {{accent}}">amd64</div><div style="font-size: 14px; color: #A3AEC2">LithosAnanke v2.1.0 · StarForth v4</div></div>
<div><div style="font-family: 'Exo 2', sans-serif; font-size: 32px; font-weight: 700; color: {{accent}}">30 min</div><div style="font-size: 14px; color: #A3AEC2">then it is gone; reload for a new one</div></div>
<div><div style="font-family: 'Exo 2', sans-serif; font-size: 32px; font-weight: 700; color: {{accent}}">Offline</div><div style="font-size: 14px; color: #A3AEC2">no network inside the machine</div></div>
</div>
</section>

<section aria-labelledby="try-h" style="max-width: 1120px; margin: 0 auto; padding: 96px 24px 48px">
<p style="margin: 0 0 12px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: {{accent}}">Things to try</p>
<h2 id="try-h" style="margin: 0 0 16px; font-family: 'Exo 2', sans-serif; font-size: 40px; line-height: 1.15; max-width: 760px">StarshipOS speaks FORTH.</h2>
<p style="margin: 0 0 40px; max-width: 680px; color: #C8D1DE">Type a line and press Enter. When the machine has done it, it answers ok.</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px">
<article style="background: #111C30; border: 1px solid #22324D; border-radius: 6px; padding: 28px">
<p style="margin: 0 0 4px; font-size: 13px; color: #A3AEC2">You type</p>
<p style="margin: 0 0 16px; font-size: 20px; color: #EEF2F7">3 4 + .</p>
<p style="margin: 0 0 4px; font-size: 13px; color: #A3AEC2">It answers</p>
<p style="margin: 0 0 16px; font-size: 20px; color: {{accent}}">7  ok</p>
<p style="margin: 0; font-size: 14px; color: #C8D1DE">Numbers go on a stack; + adds the top two; . prints the result.</p>
</article>
<article style="background: #111C30; border: 1px solid #22324D; border-radius: 6px; padding: 28px">
<p style="margin: 0 0 4px; font-size: 13px; color: #A3AEC2">You type</p>
<p style="margin: 0 0 16px; font-size: 20px; color: #EEF2F7">: SQUARE DUP * ;</p>
<p style="margin: 0 0 4px; font-size: 13px; color: #A3AEC2">It answers</p>
<p style="margin: 0 0 16px; font-size: 20px; color: {{accent}}">ok</p>
<p style="margin: 0; font-size: 14px; color: #C8D1DE">You have just taught the machine a new word, SQUARE.</p>
</article>
<article style="background: #111C30; border: 1px solid #22324D; border-radius: 6px; padding: 28px">
<p style="margin: 0 0 4px; font-size: 13px; color: #A3AEC2">You type</p>
<p style="margin: 0 0 16px; font-size: 20px; color: #EEF2F7">7 SQUARE .</p>
<p style="margin: 0 0 4px; font-size: 13px; color: #A3AEC2">It answers</p>
<p style="margin: 0 0 16px; font-size: 20px; color: {{accent}}">49  ok</p>
<p style="margin: 0; font-size: 14px; color: #C8D1DE">…and used it, as if it had always been there.</p>
</article>
</div>
</section>

<section style="max-width: 1120px; margin: 0 auto; padding: 48px 24px">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; border-top: 1px solid #22324D; padding-top: 48px">
<div><h3 style="margin: 0 0 8px; font-size: 16px; color: #EEF2F7">A machine of your own</h3><p style="margin: 0; font-size: 14px; color: #A3AEC2">Resumed at its prompt from one that booted, passed its 538 power-on self-tests and logged Zuse in — so you never wait for a boot.</p></div>
<div><h3 style="margin: 0 0 8px; font-size: 16px; color: #EEF2F7">The latest green build</h3><p style="margin: 0; font-size: 14px; color: #A3AEC2">Always the most recent build that booted on amd64, aarch64 and riscv64 and passed every acceptance check.</p></div>
<div><h3 style="margin: 0 0 8px; font-size: 16px; color: #EEF2F7">A Zuse of its own</h3><p style="margin: 0; font-size: 14px; color: #A3AEC2">Zuse is whoever holds the identity drive. Here it is a demo Zuse minted for this page alone — not anyone's real identity.</p></div>
<div><h3 style="margin: 0 0 8px; font-size: 16px; color: #EEF2F7">Gone when you go</h3><p style="margin: 0; font-size: 14px; color: #A3AEC2">Close the page, or let 30 minutes pass, and the machine is stopped and discarded. The next visitor starts clean.</p></div>
</div>
</section>

<section style="max-width: 1120px; margin: 0 auto; padding: 48px 24px 96px">
<div style="background: #111C30; border: 1px solid #22324D; border-radius: 6px; padding: 40px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center">
<div style="flex: 999 1 480px; min-width: 0">
<p style="margin: 0 0 12px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: {{accent}}">A small server</p>
<h2 style="margin: 0 0 16px; font-family: 'Exo 2', sans-serif; font-size: 32px; line-height: 1.2">Emulated, so a little slower.</h2>
<p style="margin: 0; color: #C8D1DE">The demo runs in an emulator on a modest server: slower than StarshipOS on real hardware, and only a few machines at once. The real thing boots straight from firmware, with nothing beneath it.</p>
</div>
<div style="flex: 1 1 220px; display: flex; flex-direction: column; gap: 12px">
<a href="Main.dc.html" style="display: inline-block; padding: 14px 20px; background: {{accent}}; color: #0A1222; font-weight: 700; text-decoration: none; border-radius: 4px; text-align: center">How it works</a>
<a href="https://gitea.starshipos-f18.org/rajames/LithosAnanke" style="display: inline-block; padding: 14px 20px; border: 1px solid #34486A; color: #EEF2F7; text-decoration: none; border-radius: 4px; text-align: center">Read the source</a>
</div>
</div>
</section>

<footer style="border-top: 1px solid #22324D">
<div style="max-width: 1120px; margin: 0 auto; padding: 32px 24px; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: 13px; color: #A3AEC2">
<span>© 2026 Robert Allan James · A Starship Foundation project (in formation)</span>
<span style="display: flex; flex-wrap: wrap; gap: 24px"><a href="Main.dc.html" style="color: #C8D1DE">Home</a><a href="Inquiries.dc.html" style="color: #C8D1DE">Inquiries</a><a href="https://starshipos.org" style="color: #C8D1DE">starshipos.org</a></span>
</div>
</footer>

</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"accent":{"editor":"color","default":"#F5891F","options":["#F5891F","#5FD3C4","#8FB8FF"]},"$preview":{"width":1280,"height":2900}}'>
class Component extends DCLogic {
  renderVals() {
    return { accent: this.props.accent ?? '#F5891F' };
  }
}
</script>
</body>
</html>