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.
6.8 kB · 282 lines
Svelte
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283<section class="ui-lab" aria-labelledby="ui-heading"> <h2 id="ui-heading" class="section-title">Editor & UI Surfaces</h2> <div class="ui-grid advanced"> <div class="mini-editor" aria-label="Editor chrome demo"> <div class="editor-header"> <div class="tabs"> <span class="tab active">main.rs</span> <span class="tab">diagnostics.ts</span> <span class="tab">README.md</span> </div> <span class="tab-indicator">● MOD</span> </div> <div class="editor-body"> <div class="gutter"> <span class="line-number active">42</span> <span class="line-number">43</span> <span class="line-number">44</span> <span class="line-number">45</span> </div> <div class="code-lines"> <div class="code-line"><span class="decorator">#[cfg(test)]</span></div> <div class="code-line"> <span class="keyword">fn</span> <span class="function">assert_entropy</span><span class="punctuation" >()</span > <span class="punctuation">{</span> </div> <div class="code-line"> <span class="operator">··</span><span class="support">assert_eq</span><span class="punctuation">(</span ><span class="literal">true</span><span class="punctuation">,</span> <span class="literal">true</span><span class="punctuation">);</span> </div> <div class="code-line"><span class="punctuation">}</span></div> </div> </div> <div class="status-bar"> <span class="status-item">Rust Analyzer</span> <span class="status-item warning">CPU 42%</span> <span class="status-item success">Git✓</span> </div> </div>
<div class="panel demo-panel" aria-label="Diff view"> <h3>Diff Indicators</h3> <div class="diff-legend"> <span class="badge add">Git Added</span> <span class="badge mod">Git Modified</span> <span class="badge del">Git Deleted</span> </div> <div class="diff-block"> <div class="diff-line add">+ Memory Leek · bg 15%</div> <div class="diff-line mod">~ Dead Thread · bg 10%</div> <div class="diff-line del">- Amber Alert · bg 15%</div> </div> </div>
<div class="panel demo-panel" aria-label="Diagnostics"> <h3>Diagnostics</h3> <ul class="diagnostic-list"> <li class="diagnostic error"> ✗ Kernel panic detected: wavy Amber Alert underline </li> <li class="diagnostic warning">⚠ Deprecated API: Stack Overglow underline</li> <li class="diagnostic info">ℹ Hint bubbles use Dead Thread</li> </ul> <div class="hint-row"> <span class="hint">Inlay hint</span> <span class="hint">parameter: rust</span> </div> </div> </div></section>
<style> .ui-lab { margin-top: var(--dr-space-2xl); }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dr-space-xl); margin-top: var(--dr-space-lg); }
.ui-grid.advanced { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mini-editor { background: var(--dr-surface-secondary); border: var(--dr-border); border-radius: var(--dr-radius); box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); display: flex; flex-direction: column; gap: var(--dr-space-sm); padding: var(--dr-space-sm); }
.editor-header { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--dr-border); padding-bottom: var(--dr-space-xs); }
.tabs { display: flex; gap: var(--dr-space-sm); }
.tab { padding: var(--dr-space-xs) var(--dr-space-sm); border-radius: var(--dr-radius-sm) var(--dr-radius-sm) 0 0; background: var(--dr-surface-base); color: var(--dr-text-secondary); font-size: var(--dr-text-xs); }
.tab.active { background: var(--dr-surface-elevated); color: var(--dr-text-primary); border-bottom: 2px solid var(--dr-accent); }
.tab-indicator { color: var(--dr-warning); font-size: var(--dr-text-xs); }
.editor-body { display: flex; background: var(--dr-surface-base); border: var(--dr-border); border-radius: var(--dr-radius); }
.gutter { background: var(--dr-surface-secondary); padding: var(--dr-space-sm); border-right: var(--dr-border-subtle); display: flex; flex-direction: column; gap: 0.25rem; }
.line-number { color: var(--dr-surface-highlight); font-size: var(--dr-text-xs); }
.line-number.active { color: var(--dr-text-secondary); }
.code-lines { padding: var(--dr-space-sm) var(--dr-space-md); display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.code-line { font-family: var(--dr-font-mono); }
.status-bar { display: flex; gap: var(--dr-space-sm); font-family: var(--dr-font-mono); font-size: var(--dr-text-xs); background: var(--dr-surface-hot); padding: var(--dr-space-xs) var(--dr-space-sm); border-radius: var(--dr-radius-sm); }
.status-item { color: var(--dr-on-hot-text); }
.status-item.warning { color: var(--dr-on-hot-warning); }
.status-item.success { color: var(--dr-on-hot-success); }
.panel.demo-panel { background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius); padding: var(--dr-space-md); box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); }
.panel h3 { margin-top: 0; color: var(--dr-heading); letter-spacing: 0.05em; text-transform: uppercase; font-size: var(--dr-text-sm); font-family: var(--dr-font-heading); font-weight: 700; }
.diff-legend { display: flex; gap: var(--dr-space-sm); flex-wrap: wrap; margin-bottom: var(--dr-space-sm); }
.diff-block { border: var(--dr-border); border-radius: var(--dr-radius); overflow: hidden; }
.diff-line { padding: 0.35rem var(--dr-space-sm); font-size: var(--dr-text-sm); }
.diff-line.add { background: var(--memory-leek-15); color: var(--dr-text-primary); }
.diff-line.mod { background: var(--dead-thread-10); color: var(--dr-text-primary); }
.diff-line.del { background: var(--amber-alert-15); color: var(--dr-text-quiet); }
.diagnostic-list { list-style: none; padding: 0; margin: 0 0 var(--dr-space-sm); }
.diagnostic { margin-bottom: 0.4rem; font-size: var(--dr-text-sm); }
.diagnostic.error { color: var(--dr-danger-text); text-decoration: underline wavy var(--dr-danger-text); }
.diagnostic.warning { color: var(--dr-warning); text-decoration: underline wavy var(--dr-warning); }
.diagnostic.info { color: var(--dr-info); }
.hint-row { display: flex; gap: var(--dr-space-sm); }
.hint { font-size: var(--dr-text-xs); color: var(--dr-text-muted); background: var(--bad-sector-20); padding: var(--dr-space-xs) var(--dr-space-sm); border-radius: var(--dr-radius-sm); font-style: italic; }</style>