filipriec/Tui-pages-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website created

Browse Source
This commit is contained in:
Priec
2026-06-01 20:01:15 +02:00
commit d8b622860c
15 changed files with 1830 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
static/css/site.css Normal file
View File

@@ -0,0 +1,266 @@
/* ==========================================================================
tui-pages website — custom layer on top of Tailwind + DaisyUI
Loaded AFTER Tailwind Play CDN compiles and DaisyUI prebuilt.
Keep this small. Tailwind utility classes do the heavy lifting.
========================================================================== */
/* ---------- Smooth scroll, native feel ----------------------------------- */
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* ---------- Theme (default to dark) -------------------------------------- */
:root {
color-scheme: dark light;
--tp-accent: #b7410e;
--tp-accent-fg: #fff5f0;
--tp-grid-line: rgba(63, 63, 70, 0.35);
--tp-hero-from: #0b0b0f;
--tp-hero-to: #18181b;
}
:root[data-theme="light"] {
--tp-accent: #93330c;
--tp-accent-fg: #fff5f0;
--tp-grid-line: rgba(228, 228, 231, 0.7);
--tp-hero-from: #fafafa;
--tp-hero-to: #f4f4f5;
}
/* ---------- Body --------------------------------------------------------- */
body {
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
font-feature-settings: 'cv11', 'ss01', 'ss03';
}
/* ---------- View Transitions (progressive enhancement) ------------------ */
@supports (view-transition-name: foo) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 220ms;
}
}
/* ---------- Hero --------------------------------------------------------- */
.tp-hero {
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(183, 65, 14, 0.15), transparent 70%),
linear-gradient(180deg, var(--tp-hero-from) 0%, var(--tp-hero-to) 100%);
position: relative;
isolation: isolate;
}
.tp-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--tp-grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--tp-grid-line) 1px, transparent 1px);
background-size: 56px 56px;
background-position: -1px -1px;
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 30%, transparent 80%);
pointer-events: none;
z-index: -1;
}
/* Subtle floating code lines in the hero, behind the content */
.tp-hero-glow {
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
opacity: 0.6;
background:
radial-gradient(circle at 15% 30%, rgba(183, 65, 14, 0.08), transparent 35%),
radial-gradient(circle at 85% 70%, rgba(126, 231, 135, 0.05), transparent 35%);
}
/* ---------- Cursor caret animation --------------------------------------- */
@keyframes tp-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
.tp-cursor {
display: inline-block;
width: 0.55em;
height: 1em;
background: var(--tp-accent);
margin-left: 0.15em;
vertical-align: -0.12em;
animation: tp-blink 1.1s steps(1) infinite;
}
/* ---------- Soft float for the hero terminal ----------------------------- */
@keyframes tp-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.tp-float {
animation: tp-float 6s ease-in-out infinite;
}
/* ---------- Glass nav ---------------------------------------------------- */
.tp-nav {
background: rgba(9, 9, 11, 0.65);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}
:root[data-theme="light"] .tp-nav {
background: rgba(255, 255, 255, 0.7);
border-bottom-color: rgba(228, 228, 231, 0.7);
}
/* ---------- Feature cards ------------------------------------------------ */
.tp-card {
position: relative;
background: rgba(24, 24, 27, 0.5);
border: 1px solid rgba(63, 63, 70, 0.5);
border-radius: 1rem;
padding: 1.5rem;
transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.tp-card:hover {
border-color: rgba(183, 65, 14, 0.6);
background: rgba(24, 24, 27, 0.75);
transform: translateY(-2px);
}
:root[data-theme="light"] .tp-card {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(228, 228, 231, 0.8);
}
:root[data-theme="light"] .tp-card:hover {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(183, 65, 14, 0.4);
}
.tp-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
background: rgba(183, 65, 14, 0.12);
color: var(--tp-accent);
border: 1px solid rgba(183, 65, 14, 0.25);
margin-bottom: 1rem;
}
/* ---------- Code blocks (kitchen sink — hljs + custom) ------------------ */
.tp-code {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85rem;
line-height: 1.6;
tab-size: 4;
}
.tp-code pre {
background: #0b0b0f;
border: 1px solid rgba(63, 63, 70, 0.5);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
overflow-x: auto;
margin: 0;
}
.tp-code pre code.hljs {
background: transparent;
padding: 0;
}
/* ---------- Inline kbd --------------------------------------------------- */
.tp-kbd {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.5rem;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid rgba(63, 63, 70, 0.7);
border-bottom-width: 2px;
border-radius: 0.375rem;
background: rgba(39, 39, 42, 0.6);
color: #f4f4f5;
line-height: 1;
}
:root[data-theme="light"] .tp-kbd {
background: #fff;
color: #18181b;
border-color: #d4d4d8;
}
/* ---------- Terminal window wrapper -------------------------------------- */
.tp-terminal {
position: relative;
border-radius: 0.875rem;
background: #0b0b0f;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 30px 60px -20px rgba(0, 0, 0, 0.6),
0 18px 36px -18px rgba(0, 0, 0, 0.5);
overflow: hidden;
border: 1px solid rgba(63, 63, 70, 0.4);
}
.tp-terminal::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
/* ---------- Selection --------------------------------------------------- */
::selection {
background: var(--tp-accent);
color: var(--tp-accent-fg);
}
/* ---------- Focus ring -------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--tp-accent);
outline-offset: 2px;
border-radius: 0.25rem;
}
/* ---------- Scrollbar (subtle) ----------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(63, 63, 70, 0.6);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(82, 82, 91, 0.8); background-clip: padding-box; }
/* ---------- No-FOUC theme flash ----------------------------------------- */
html:not([data-theme]) body { background: #09090b; }
:root[data-theme="light"] body { background: #fafafa; }
/* ---------- Alpine x-cloak (prevents flash of un-initialised content) --- */
[x-cloak] { display: none !important; }
/* ---------- DaisyUI overrides for our theme ----------------------------- */
/* Bring DaisyUI's primary to our accent so .btn-primary etc. look on-brand. */
[data-theme="night"] {
--p: 28 70% 36%;
--pc: 0 0% 100%;
--b1: 240 5% 8%;
--b2: 240 4% 12%;
--b3: 240 4% 16%;
--bc: 0 0% 96%;
}

7
static/img/favicon.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="tui-pages">
<rect width="32" height="32" rx="7" fill="#09090b"/>
<path d="M9.5 11.5 L14.5 16 L9.5 20.5" stroke="#f4f4f5" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<rect x="17.5" y="11.5" width="3" height="9" fill="#b7410e">
<animate attributeName="opacity" values="1;0;1" dur="1.1s" repeatCount="indefinite"/>
</rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 481 B

11
static/img/logo.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="172" height="36" viewBox="0 0 172 36" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="tui-pages">
<style>
.wm { font: 700 22px/1 ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; fill: #f4f4f5; letter-spacing: -0.5px; }
.cur { fill: #b7410e; }
</style>
<text x="0" y="25" class="wm">tui-pages</text>
<rect class="cur" x="132" y="8" width="3" height="22">
<animate attributeName="opacity" values="1;0;1" dur="1.1s" repeatCount="indefinite"/>
</rect>
<rect class="cur" x="139" y="8" width="3" height="22"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 579 B

43
static/img/og-image.svg Normal file
View File

@@ -0,0 +1,43 @@
<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="tui-pages — a complete framework for building TUIs in Rust">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0b0b0f"/>
<stop offset="100%" stop-color="#18181b"/>
</linearGradient>
<radialGradient id="glow" cx="50%" cy="0%" r="60%">
<stop offset="0%" stop-color="#b7410e" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#b7410e" stop-opacity="0"/>
</radialGradient>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#27272a" stroke-width="1" stroke-opacity="0.3"/>
</pattern>
</defs>
<rect width="1200" height="630" fill="url(#bg)"/>
<rect width="1200" height="630" fill="url(#grid)"/>
<rect width="1200" height="630" fill="url(#glow)"/>
<g transform="translate(80, 90)">
<text font-family="ui-monospace, 'JetBrains Mono', monospace" font-weight="700" font-size="22" fill="#f4f4f5" x="0" y="0">tui-pages</text>
<rect x="140" y="-15" width="4" height="24" fill="#b7410e"/>
</g>
<text font-family="Inter, system-ui, sans-serif" font-weight="700" font-size="84" fill="#f4f4f5" x="80" y="280" letter-spacing="-2">
A framework for
</text>
<text font-family="Inter, system-ui, sans-serif" font-weight="700" font-size="84" fill="#b7410e" x="80" y="370" letter-spacing="-2">
building TUIs in Rust.
</text>
<text font-family="Inter, system-ui, sans-serif" font-weight="400" font-size="28" fill="#a1a1aa" x="80" y="440">
Pre-programmed focus, keymaps, and page navigation.
</text>
<text font-family="Inter, system-ui, sans-serif" font-weight="400" font-size="28" fill="#a1a1aa" x="80" y="480">
Stop rewriting the same architecture for every project.
</text>
<g transform="translate(80, 540)">
<rect x="0" y="0" width="280" height="56" rx="8" fill="#18181b" stroke="#3f3f46"/>
<text font-family="ui-monospace, 'JetBrains Mono', monospace" font-size="20" fill="#f4f4f5" x="20" y="36">$ cargo add tui-pages</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

52
static/img/terminal-canvas.svg Normal file
View File

@@ -0,0 +1,52 @@
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/canvas terminal screenshot">
<style>
.bg { fill: #18181b; }
.chrome { fill: #27272a; }
.dot { fill: #52525b; }
.field { fill: #0e0e10; stroke: #3f3f46; stroke-width: 1; }
.field-focus { fill: #1c130f; stroke: #b7410e; stroke-width: 2; }
.btn { fill: #b7410e; }
.sep { stroke: #27272a; stroke-width: 1; }
text { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; fill: #f4f4f5; }
.t-md { font-size: 14px; }
.t-sm { font-size: 12px; }
.t-xs { font-size: 11px; }
.muted { fill: #a1a1aa; }
.dim { fill: #71717a; }
.label { fill: #a1a1aa; letter-spacing: 0.08em; }
.btn-fg { fill: #fff5f0; }
</style>
<rect class="bg" width="640" height="400" rx="12"/>
<rect class="chrome" width="640" height="36" rx="12"/>
<rect class="chrome" y="24" width="640" height="12"/>
<line class="sep" x1="0" y1="36" x2="640" y2="36"/>
<circle class="dot" cx="20" cy="18" r="5.5"/>
<circle class="dot" cx="40" cy="18" r="5.5"/>
<circle class="dot" cx="60" cy="18" r="5.5"/>
<text x="320" y="22" text-anchor="middle" font-size="11" class="dim">examples/canvas — login page</text>
<text x="40" y="80" font-size="20" font-weight="700">Sign in</text>
<text x="40" y="104" font-size="12" class="muted">Use Tab to move between fields. Enter to submit.</text>
<text x="40" y="156" font-size="10" class="label">USERNAME</text>
<rect class="field-focus" x="40" y="164" width="560" height="38" rx="6"/>
<text x="56" y="189" font-size="14">filip</text>
<rect x="92" y="172" width="2" height="22" fill="#b7410e">
<animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/>
</rect>
<text x="40" y="232" font-size="10" class="label">PASSWORD</text>
<rect class="field" x="40" y="240" width="560" height="38" rx="6"/>
<text x="56" y="265" font-size="14" class="muted">••••••••••••</text>
<rect class="btn" x="40" y="300" width="140" height="38" rx="6"/>
<text x="110" y="324" text-anchor="middle" font-size="13" class="btn-fg" font-weight="600">Sign in</text>
<text x="200" y="324" font-size="11" class="dim">esc · cancel</text>
<line class="sep" x1="0" y1="358" x2="640" y2="358"/>
<text x="20" y="380" font-size="11" class="dim">tab next · shift+tab prev · enter submit</text>
<text x="620" y="380" text-anchor="end" font-size="11" class="dim">canvas feature enabled</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

57
static/img/terminal-default.svg Normal file
View File

@@ -0,0 +1,57 @@
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/default terminal screenshot">
<style>
.bg { fill: #18181b; }
.chrome { fill: #27272a; }
.dot { fill: #52525b; }
.sep { stroke: #27272a; stroke-width: 1; }
.tab { fill: #18181b; }
text { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; fill: #f4f4f5; }
.t-md { font-size: 15px; }
.t-sm { font-size: 13px; }
.t-xs { font-size: 11px; }
.muted { fill: #a1a1aa; }
.dim { fill: #71717a; }
.sel-bg { fill: #b7410e; }
.sel-fg { fill: #fff5f0; }
</style>
<rect class="bg" width="640" height="400" rx="12"/>
<rect class="chrome" width="640" height="36" rx="12"/>
<rect class="chrome" y="24" width="640" height="12"/>
<line class="sep" x1="0" y1="36" x2="640" y2="36"/>
<circle class="dot" cx="20" cy="18" r="5.5"/>
<circle class="dot" cx="40" cy="18" r="5.5"/>
<circle class="dot" cx="60" cy="18" r="5.5"/>
<text x="320" y="22" text-anchor="middle" font-size="11" class="dim">examples/default — cargo run</text>
<text x="20" y="68" font-size="14" class="muted">Pages:</text>
<rect class="sel-bg" x="80" y="55" width="60" height="20" rx="3"/>
<text x="110" y="69" text-anchor="middle" font-size="12" class="sel-fg" font-weight="600">Home</text>
<text x="150" y="69" font-size="12" class="muted">Settings</text>
<text x="220" y="69" font-size="12" class="muted">About</text>
<text x="270" y="69" font-size="12" class="muted">Quit</text>
<line class="sep" x1="0" y1="92" x2="640" y2="92"/>
<text x="20" y="120" font-size="18" font-weight="700">Home</text>
<text x="20" y="142" font-size="11" class="dim">Choose a section to open.</text>
<line class="sep" x1="0" y1="160" x2="640" y2="160"/>
<g font-size="14">
<rect class="sel-bg" x="0" y="170" width="640" height="34"/>
<text x="32" y="192" class="sel-fg" font-weight="600">▸ Dashboard</text>
<text x="600" y="192" text-anchor="end" class="sel-fg" font-size="11">enter</text>
<text x="32" y="226" class="muted"> Accounts</text>
<text x="32" y="254" class="muted"> Transactions</text>
<text x="32" y="282" class="muted"> Reports</text>
<text x="32" y="310" class="muted"> Settings</text>
</g>
<line class="sep" x1="0" y1="358" x2="640" y2="358"/>
<text x="20" y="380" font-size="11" class="dim">↑↓ move · enter select · q quit</text>
<text x="620" y="380" text-anchor="end" font-size="11" class="dim">tui-pages v0.7.2</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

71
static/img/terminal-keybindings.svg Normal file
View File

@@ -0,0 +1,71 @@
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/keybindings terminal screenshot">
<style>
.bg { fill: #18181b; }
.chrome { fill: #27272a; }
.dot { fill: #52525b; }
.kbd { fill: #27272a; stroke: #3f3f46; stroke-width: 1; }
.modal { fill: #1f1f23; stroke: #b7410e; stroke-width: 2; }
.sep { stroke: #27272a; stroke-width: 1; }
text { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; fill: #f4f4f5; }
.t-sm { font-size: 12px; }
.t-xs { font-size: 11px; }
.muted { fill: #a1a1aa; }
.dim { fill: #71717a; }
</style>
<rect class="bg" width="640" height="400" rx="12"/>
<rect class="chrome" width="640" height="36" rx="12"/>
<rect class="chrome" y="24" width="640" height="12"/>
<line class="sep" x1="0" y1="36" x2="640" y2="36"/>
<circle class="dot" cx="20" cy="18" r="5.5"/>
<circle class="dot" cx="40" cy="18" r="5.5"/>
<circle class="dot" cx="60" cy="18" r="5.5"/>
<text x="320" y="22" text-anchor="middle" font-size="11" class="dim">examples/keybindings — modal open</text>
<!-- dimmed background content -->
<text x="40" y="80" font-size="14" class="dim">▸ Accounts</text>
<text x="40" y="108" font-size="14" class="dim"> Transactions</text>
<text x="40" y="136" font-size="14" class="dim"> Reports</text>
<text x="40" y="164" font-size="14" class="dim"> Settings</text>
<text x="40" y="320" font-size="11" class="dim">Press ? for help</text>
<!-- modal -->
<rect class="modal" x="120" y="60" width="400" height="280" rx="10"/>
<text x="140" y="94" font-size="14" font-weight="700">Keybindings</text>
<line class="sep" x1="140" y1="104" x2="500" y2="104"/>
<text x="140" y="130" font-size="11" class="muted">MOVEMENT</text>
<rect class="kbd" x="140" y="140" width="34" height="24" rx="4"/>
<text x="157" y="157" text-anchor="middle" font-size="12">j</text>
<text x="184" y="157" font-size="12" class="muted">move down</text>
<rect class="kbd" x="140" y="170" width="34" height="24" rx="4"/>
<text x="157" y="187" text-anchor="middle" font-size="12">k</text>
<text x="184" y="187" font-size="12" class="muted">move up</text>
<rect class="kbd" x="140" y="200" width="34" height="24" rx="4"/>
<text x="157" y="217" text-anchor="middle" font-size="12">gg</text>
<text x="184" y="217" font-size="12" class="muted">top of list</text>
<text x="290" y="130" font-size="11" class="muted">ACTIONS</text>
<rect class="kbd" x="290" y="140" width="60" height="24" rx="4"/>
<text x="320" y="157" text-anchor="middle" font-size="11">enter</text>
<text x="360" y="157" font-size="12" class="muted">select</text>
<rect class="kbd" x="290" y="170" width="34" height="24" rx="4"/>
<text x="307" y="187" text-anchor="middle" font-size="11">/</text>
<text x="334" y="187" font-size="12" class="muted">search</text>
<rect class="kbd" x="290" y="200" width="60" height="24" rx="4"/>
<text x="320" y="217" text-anchor="middle" font-size="11">ctrl+s</text>
<text x="360" y="217" font-size="12" class="muted">save</text>
<line class="sep" x1="140" y1="300" x2="500" y2="300"/>
<text x="320" y="322" text-anchor="middle" font-size="11" class="dim">press esc to close</text>
<line class="sep" x1="0" y1="358" x2="640" y2="358"/>
<text x="20" y="380" font-size="11" class="dim">esc close · ? toggle this dialog</text>
<text x="620" y="380" text-anchor="end" font-size="11" class="dim">dialog feature enabled</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB