Something went wrong. Try again.
A warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. digitalrust.katsuricata.com
theme color-scheme color-theme warm color
Something went wrong. Try again.
3.7 kB · 103 lines
Svelte
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104<section class="ui-components" aria-labelledby="ui-components-heading"> <h2 id="ui-components-heading" class="section-title">UI Components</h2> <p class="section-copy"> The Digital Rust UI Specification: chunky hardware panel switches, recessed input wells, and the press-and-release cycle. Rest carries an offset shadow and inner-highlight bevel; hover lifts toward the light; active drives the element into the rack. <a href="/ui/">Full component gallery →</a> </p> <div class="ui-components-grid"> <div class="component-panel" aria-label="Buttons"> <h3>Buttons</h3> <div class="component-row"> <button class="btn btn-primary" type="button">Save Changes</button> <button class="btn" type="button">Discard</button> </div> <div class="component-row"> <button class="btn btn-success" type="button">Apply Patch</button> <button class="btn btn-warning" type="button">Force Push</button> <button class="btn btn-error" type="button">Kill Process</button> </div> <div class="component-row"> <button class="btn" type="button" disabled>Offline</button> </div> <p class="component-note"> rest: offset-sm + bevel · hover: lift(-2px,-2px) + offset grows · active: press(2px,2px) + collapse </p> </div>
<div class="component-panel" aria-label="Inputs"> <h3>Inputs — Recessed Wells</h3> <div class="dr-field"> <label for="demo-hostname">Hostname</label> <input class="dr-input" id="demo-hostname" type="text" placeholder="mainframe.local" /> </div> <div class="dr-field"> <label for="demo-port">Port</label> <input class="dr-input" id="demo-port" type="text" value="22" aria-invalid="true" /> <p class="field-error">✗ Connection refused on port 22</p> </div> <p class="component-note"> Event Horizon well · no offset shadow · hover: the wall one step further from the surface · focus: the hover wall + the focus ring </p> </div>
<div class="component-panel" aria-label="Switches"> <h3>Checkbox & Toggle</h3> <div class="component-row"> <label class="dr-checkbox" ><input type="checkbox" checked /> Enable telemetry scrubbing</label > </div> <div class="component-row"> <label class="dr-checkbox"><input type="checkbox" /> Mount /dev/rust</label> </div> <div class="component-row"> <label class="dr-toggle"><input type="checkbox" checked /> Thermal limiter</label> </div> <div class="component-row"> <label class="dr-toggle"><input type="checkbox" /> Overclock bus</label> </div> <p class="component-note"> checkbox runs the full press cycle · toggle thumb slides on a railed track </p> </div>
<div class="component-panel" aria-label="Tabs"> <h3>Tabs</h3> <div class="dr-tabs"> <div class="dr-tab-bar" role="tablist"> <button class="dr-tab active" role="tab" aria-selected="true" type="button" >main.rs</button > <button class="dr-tab" role="tab" aria-selected="false" type="button" >spec.toml</button > <button class="dr-tab" role="tab" aria-selected="false" type="button" >DRIFT.log</button > </div> <div class="dr-tab-body"> active tab: Null Pointer bg + Digital Rust power rail · hover: Bad Sector fill </div> </div> <div class="dr-statusbar" style:margin-top="var(--dr-space-md)" style:border-radius="var(--dr-radius)" style:border="var(--dr-border)" > <span>digitalrust@entropy</span> <span class="status-warning">CPU 42%</span> <span class="status-success">Git✓</span> </div> </div> </div></section>