From bb4ca0610dbe508be1c22d398a56b79530fb6c96 Mon Sep 17 00:00:00 2001 From: syntaxbullet Date: Tue, 10 Feb 2026 11:23:16 +0100 Subject: [PATCH] feat: Introduce new Sidebar and ControlPanel components, and update styling for TUI Segment, Slider, Toggle, and Button components. --- src/components/ControlPanel.astro | 411 ++++++++++++++++++++++ src/components/Sidebar.astro | 242 +++++++++++++ src/components/TuiButton.astro | 57 +-- src/components/TuiSegment.astro | 36 +- src/components/TuiSlider.astro | 35 +- src/components/TuiToggle.astro | 29 +- src/layouts/Layout.astro | 33 +- src/pages/index.astro | 566 +----------------------------- 8 files changed, 760 insertions(+), 649 deletions(-) create mode 100644 src/components/ControlPanel.astro create mode 100644 src/components/Sidebar.astro diff --git a/src/components/ControlPanel.astro b/src/components/ControlPanel.astro new file mode 100644 index 0000000..a62bb1f --- /dev/null +++ b/src/components/ControlPanel.astro @@ -0,0 +1,411 @@ +--- +import TuiSlider from "./TuiSlider.astro"; +import TuiSegment from "./TuiSegment.astro"; +import TuiToggle from "./TuiToggle.astro"; +import TuiButton from "./TuiButton.astro"; +--- + + + + diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro new file mode 100644 index 0000000..5dbf406 --- /dev/null +++ b/src/components/Sidebar.astro @@ -0,0 +1,242 @@ +--- + +--- + + + + diff --git a/src/components/TuiButton.astro b/src/components/TuiButton.astro index ed97f1e..4cc5c01 100644 --- a/src/components/TuiButton.astro +++ b/src/components/TuiButton.astro @@ -33,67 +33,70 @@ const { .tui-button { display: inline-flex; align-items: center; - gap: 4px; - background: none; - border: 1px solid rgba(255, 103, 0, 0.4); - color: var(--text-color); + gap: 6px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.7); font-family: inherit; font-size: 11px; - padding: 3px 10px; + padding: 4px 10px; cursor: pointer; - opacity: 0.8; - transition: all 0.15s; + transition: all 0.2s; user-select: none; + border-radius: 2px; } .tui-button:hover { - opacity: 1; - border-color: var(--text-color); - background: rgba(255, 103, 0, 0.1); + color: #fff; + border-color: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.08); + transform: translateY(-1px); } .tui-button:active { - background: rgba(255, 103, 0, 0.2); + background: rgba(255, 255, 255, 0.12); + transform: translateY(0); } .tui-button--primary { - border-color: var(--text-color); - background: rgba(255, 103, 0, 0.1); + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.2); + color: #fff; } .tui-button--primary:hover { - background: var(--text-color); - color: #000; + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.4); } .tui-button--subtle { border-color: transparent; + background: transparent; opacity: 0.6; } .tui-button--subtle:hover { - border-color: rgba(255, 103, 0, 0.3); + border-color: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.05); opacity: 1; } .tui-button-shortcut { font-size: 9px; - opacity: 0.6; - padding: 0 3px; - border: 1px solid currentColor; - line-height: 1.2; - border-radius: 2px; + opacity: 0.5; + padding: 1px 4px; + border: 1px solid rgba(255, 255, 255, 0.2); + line-height: 1; + border-radius: 3px; } .tui-button:hover .tui-button-shortcut { - opacity: 1; - } - - .tui-button--primary:hover .tui-button-shortcut { - border-color: #000; + opacity: 0.8; + border-color: rgba(255, 255, 255, 0.4); } .tui-button-label { - font-weight: bold; + font-weight: 500; + letter-spacing: 0.5px; } diff --git a/src/components/TuiSegment.astro b/src/components/TuiSegment.astro index c4757bd..f87c5bb 100644 --- a/src/components/TuiSegment.astro +++ b/src/components/TuiSegment.astro @@ -47,33 +47,37 @@ const { .tui-segment { display: flex; align-items: center; - gap: 8px; + gap: 12px; font-size: 11px; user-select: none; } .tui-segment-label { min-width: 3ch; - font-weight: bold; + font-weight: 700; + font-family: var(--font-mono); + color: rgba(255, 255, 255, 0.4); opacity: 0.7; } .tui-segment-options { display: flex; - border: 1px solid rgba(255, 103, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.02); + border-radius: 2px; + overflow: hidden; } .tui-segment-option { - background: none; + background: transparent; border: none; - border-right: 1px solid rgba(255, 103, 0, 0.2); - color: var(--text-color); + border-right: 1px solid rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.5); font-family: inherit; font-size: inherit; - padding: 2px 8px; + padding: 4px 10px; cursor: pointer; - opacity: 0.5; - transition: all 0.15s; + transition: all 0.2s; min-width: 3ch; text-align: center; } @@ -83,24 +87,24 @@ const { } .tui-segment-option:hover { - opacity: 0.8; - background: rgba(255, 103, 0, 0.1); + color: #fff; + background: rgba(255, 255, 255, 0.05); } .tui-segment-option.active { - background: var(--text-color); - color: #000; - opacity: 1; - font-weight: bold; + background: rgba(255, 255, 255, 0.15); + color: #fff; + font-weight: 600; } /* Hover the whole group */ .tui-segment:hover .tui-segment-label { opacity: 1; + color: rgba(255, 255, 255, 0.8); } .tui-segment:hover .tui-segment-options { - border-color: var(--text-color); + border-color: rgba(255, 255, 255, 0.2); } diff --git a/src/components/TuiSlider.astro b/src/components/TuiSlider.astro index f403ff6..e593816 100644 --- a/src/components/TuiSlider.astro +++ b/src/components/TuiSlider.astro @@ -63,15 +63,19 @@ const segments = 12; .tui-slider { display: flex; align-items: center; - gap: 6px; + gap: 8px; font-size: 11px; user-select: none; + color: rgba(255, 255, 255, 0.6); } .tui-slider-label { min-width: 3ch; - font-weight: bold; - opacity: 0.7; + font-weight: 700; + opacity: 0.5; + font-family: var(--font-mono); + color: rgba(255, 255, 255, 0.4); + transition: opacity 0.2s; } .tui-slider-track-wrapper { @@ -89,22 +93,24 @@ const segments = 12; .tui-slider-track { display: flex; - letter-spacing: -1px; - font-family: monospace; + letter-spacing: 2px; + font-family: var(--font-mono); + font-size: 10px; } .tui-slider-segment { transition: color 0.1s; - color: rgba(255, 103, 0, 0.25); + color: rgba(255, 255, 255, 0.1); } .tui-slider-segment.filled { - color: var(--text-color); + color: rgba(255, 255, 255, 0.6); } .tui-slider-segment.thumb { color: #fff; - text-shadow: 0 0 4px var(--text-color); + text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); + scale: 1.2; } .tui-slider-input { @@ -120,23 +126,26 @@ const segments = 12; } .tui-slider-value { - min-width: 3ch; + min-width: 4ch; text-align: right; - font-weight: bold; - opacity: 0.9; + font-weight: 400; + opacity: 0.8; + font-family: var(--font-mono); + color: rgba(255, 255, 255, 0.8); } /* Hover effect */ .tui-slider:hover .tui-slider-label { opacity: 1; + color: #fff; } .tui-slider:hover .tui-slider-segment { - color: rgba(255, 103, 0, 0.4); + color: rgba(255, 255, 255, 0.2); } .tui-slider:hover .tui-slider-segment.filled { - color: var(--text-color); + color: rgba(255, 255, 255, 0.8); } .tui-slider:hover .tui-slider-segment.thumb { diff --git a/src/components/TuiToggle.astro b/src/components/TuiToggle.astro index fc8c977..df23841 100644 --- a/src/components/TuiToggle.astro +++ b/src/components/TuiToggle.astro @@ -32,35 +32,36 @@ const { display: inline-flex; align-items: center; justify-content: center; - background: none; - border: 1px solid rgba(255, 103, 0, 0.3); - color: var(--text-color); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.5); font-family: inherit; font-size: 11px; - padding: 2px 8px; + padding: 4px 12px; cursor: pointer; - opacity: 0.5; - transition: all 0.15s; + transition: all 0.2s; user-select: none; min-width: 3ch; text-align: center; + border-radius: 2px; } .tui-toggle:hover { - opacity: 0.8; - background: rgba(255, 103, 0, 0.1); + color: #fff; + border-color: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.08); } .tui-toggle.active { - background: var(--text-color); - color: #000; - opacity: 1; - font-weight: bold; - border-color: var(--text-color); + background: rgba(255, 255, 255, 0.15); + color: #fff; + border-color: rgba(255, 255, 255, 0.4); + box-shadow: 0 0 10px rgba(255, 255, 255, 0.05); } .tui-toggle-label { - font-weight: bold; + font-weight: 600; + letter-spacing: 0.5px; } diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 47ff7c1..616328b 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,4 @@ --- -import Navbar from '../components/Navbar.astro'; - interface Props { title: string; showScroll?: boolean; @@ -15,29 +13,28 @@ const { title, showScroll = false } = Astro.props; - - + + + rel="stylesheet" + /> {title} - + - + - diff --git a/src/pages/index.astro b/src/pages/index.astro index cbc456f..1eae8c1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,115 +1,13 @@ --- import Layout from "../layouts/Layout.astro"; -import TuiSlider from "../components/TuiSlider.astro"; -import TuiSegment from "../components/TuiSegment.astro"; -import TuiToggle from "../components/TuiToggle.astro"; -import TuiButton from "../components/TuiButton.astro"; +import Sidebar from "../components/Sidebar.astro"; import Tooltip from "../components/Tooltip.astro"; +import ControlPanel from "../components/ControlPanel.astro"; ---
- - +
@@ -120,235 +18,7 @@ import Tooltip from "../components/Tooltip.astro";
-
-
- -
-
ADJUSTMENTS
-
- - - - - - - -
-
- - -
- - -
-
EFFECTS
-
- - - -
- -
- OUTPUT -
-
- - - -
-
- - -
- - -
-
-
ACTIONS
-
- - - -
- Q: - 0 -
-
-
- - -
- -
-
IMPORT / EXPORT
-
- - - - - - -
-
-
-
- - -
- N Next - R Reset - I Invert - C Color - D Dither - E Edges - S Charset -
-
+ @@ -462,127 +132,8 @@ import Tooltip from "../components/Tooltip.astro"; background: var(--bg-color); } - /* Sidebar (Left 25%) */ - .sidebar { - width: 25%; - min-width: 320px; - max-width: 480px; - border-right: 1px solid rgba(255, 255, 255, 0.1); - display: flex; - flex-direction: column; - justify-content: center; - background: #000; - position: relative; - z-index: 10; - box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5); - } - - .sidebar-content { - padding: 4rem 3rem; - display: flex; - flex-direction: column; - gap: 2.5rem; - } - - .brand-group { - display: flex; - flex-direction: column; - gap: 0.5rem; - } - - .brand-title { - font-size: 2.5rem; - font-weight: 900; - margin: 0; - line-height: 1; - letter-spacing: -1px; - color: #fff; - } - - .brand-subtitle { - font-size: 0.75rem; - color: rgba(255, 255, 255, 0.5); - font-family: var(--font-mono); - letter-spacing: 1px; - display: flex; - gap: 8px; - align-items: center; - flex-wrap: wrap; - } - - .muted { - color: rgba(255, 255, 255, 0.2); - } - - .brand-bio { - font-size: 1rem; - line-height: 1.6; - color: rgba(255, 255, 255, 0.8); - max-width: 400px; - } - - .sidebar-actions { - display: flex; - flex-direction: column; - gap: 0.75rem; - align-items: flex-start; - } - - .sidebar-link { - display: flex; - align-items: center; - gap: 12px; - color: rgba(255, 255, 255, 0.6); - text-decoration: none; - font-family: var(--font-mono); - font-size: 0.9rem; - padding: 4px 0; - transition: all 0.2s; - } - - .sidebar-link:hover { - color: var(--text-color); - transform: translateX(4px); - } - - .sidebar-link .icon { - width: 20px; - display: inline-block; - text-align: center; - } - - .control-panel-divider-h { - height: 1px; - width: 100%; - margin: 32px 0; - background: linear-gradient( - to right, - transparent 0%, - rgba(255, 255, 255, 0.1) 20%, - rgba(255, 255, 255, 0.3) 50%, - rgba(255, 255, 255, 0.1) 80%, - transparent 100% - ); - } - - .sidebar-social { - display: flex; - gap: 1.5rem; - margin-top: 1rem; - padding-top: 1.5rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); - } - - .sidebar-social a { - color: rgba(255, 255, 255, 0.4); - transition: color 0.2s; - } - - .sidebar-social a:hover { - color: #fff; - } - /* Workspace (Right 75%) */ + .ascii-workspace { flex-grow: 1; height: 100vh; @@ -636,92 +187,6 @@ import Tooltip from "../components/Tooltip.astro"; border-radius: 4px; } - /* Controls Footer */ - .controls-footer { - flex-shrink: 0; - background: rgba(0, 0, 0, 0.85); - border-top: 1px solid rgba(255, 255, 255, 0.1); - padding: 1rem 2rem; - backdrop-filter: blur(10px); - display: flex; - flex-direction: column; - gap: 1rem; - z-index: 20; - } - - #tui-controls { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0; - background: none; - box-shadow: none; - border: none; - } - - .control-panel-section { - padding: 0 20px; - } - - .control-panel-divider { - background: rgba(255, 255, 255, 0.1); - } - - .section-header { - font-size: 10px; - font-weight: 800; - opacity: 0.6; - letter-spacing: 2px; - margin-bottom: 8px; - text-transform: uppercase; - color: var(--text-color); - } - - .sliders-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px 16px; - } - - .toggles-row, - .segments-row, - .actions-row { - display: flex; - gap: 8px; - flex-wrap: wrap; - } - - .queue-display { - display: flex; - align-items: center; - gap: 4px; - font-size: 11px; - opacity: 0.6; - padding: 0 8px; - border-left: 1px solid rgba(255, 255, 255, 0.2); - } - - .shortcuts-hint { - display: flex; - justify-content: center; - gap: 16px; - font-size: 10px; - opacity: 0.4; - } - - .shortcuts-hint span { - display: flex; - align-items: center; - gap: 6px; - } - - .shortcuts-hint kbd { - border: 1px solid rgba(255, 255, 255, 0.2); - padding: 2px 4px; - border-radius: 3px; - font-size: 9px; - } - /* Responsive */ @media (max-width: 1024px) { .split-layout { @@ -729,27 +194,6 @@ import Tooltip from "../components/Tooltip.astro"; overflow-y: auto; } - .sidebar { - width: 100%; - max-width: none; - min-width: 0; - border-right: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - padding: 2rem 0; - } - - .sidebar-content { - padding: 1rem 2rem; - align-items: center; - text-align: center; - } - - .brand-subtitle, - .sidebar-actions { - justify-content: center; - align-items: center; - } - .ascii-workspace { height: 80vh; /* Give space for scroll */ }