diff --git a/static/app.js b/static/app.js index e894239..240d41c 100644 --- a/static/app.js +++ b/static/app.js @@ -1,42 +1,4 @@ (() => { - // Theme management - const themeToggle = document.getElementById("themeToggle"); - const prefersDark = window.matchMedia("(prefers-color-scheme: dark)"); - - function getTheme() { - const saved = localStorage.getItem("theme"); - if (saved) return saved; - return prefersDark.matches ? "dark" : "light"; - } - - function setTheme(theme) { - document.documentElement.setAttribute("data-theme", theme); - localStorage.setItem("theme", theme); - if (themeToggle) { - themeToggle.textContent = theme === "dark" ? "☀️ Light Mode" : "🌙 Dark Mode"; - } - } - - function toggleTheme() { - const current = document.documentElement.getAttribute("data-theme") || "light"; - setTheme(current === "dark" ? "light" : "dark"); - } - - // Initialize theme - setTheme(getTheme()); - - // Listen for theme toggle - if (themeToggle) { - themeToggle.addEventListener("click", toggleTheme); - } - - // Listen for system theme changes - prefersDark.addEventListener("change", (e) => { - if (!localStorage.getItem("theme")) { - setTheme(e.matches ? "dark" : "light"); - } - }); - let qs = new URLSearchParams(window.location.search); const qInput = document.getElementById("q"); const channelDropdown = document.getElementById("channelDropdown"); diff --git a/static/index.html b/static/index.html index d978cba..d3fe8cd 100644 --- a/static/index.html +++ b/static/index.html @@ -4,64 +4,98 @@ This Little Corner (Python) + -
-
-

This Little Corner — Elastic Search

- -
-

- Enter a phrase to query title, description, and transcript text. -

-
- -
- -
- All Channels -
-
Loading channels…
+
+
+
This Little Corner — Elastic Search
+
+ + +
-
- - - -
-
- - - - -
- -
-
-
-
-
-
-
-
-
-
-
-
+
+

Enter a phrase to query title, description, and transcript text.

-
+
+ Search +
+ + + +
+ +
+ +
+ All Channels +
+
Loading channels…
+
+
+ + + + + + +
+ +
+ + + + + + + + + + + +
+
+ +
+
+
+
+ Metrics +
+
+
+
+
+
+ Timeline +
+
+
+
+
+ +
+ Results +
+
+
+ +
+

Ready

+
+ diff --git a/static/style.css b/static/style.css index ff7c39d..37a250f 100644 --- a/static/style.css +++ b/static/style.css @@ -1,171 +1,73 @@ -/* Light theme (default) */ -:root { - --color-bg-primary: #ffffff; - --color-bg-secondary: #f5f5f5; - --color-bg-tertiary: #fafafa; - --color-bg-button: #f0f0f0; - --color-bg-button-hover: #e8e8e8; - --color-bg-highlight: #ffe58a; - --color-bg-focus: #fff3cd; - --color-bg-focus-border: #ffc107; - --color-bg-timestamp: #e8f4ff; - --color-bg-timestamp-hover: #cce5ff; - --color-bg-hover: #f0f7ff; - - --color-text-primary: #222; - --color-text-secondary: #666; - --color-text-tertiary: #444; - --color-text-quaternary: #333; - --color-text-muted: #999; - --color-text-inverse: #fff; - - --color-border-primary: #ccc; - --color-border-secondary: #ddd; - --color-border-tertiary: #ececec; - --color-border-focus: #e1e1e1; - - --color-link: #0366d6; - --color-badge: #0b6efd; - --color-chart-stroke: #ccc; - --color-chart-stroke-secondary: #fff; - - --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.08); - --shadow-dropdown: 0 2px 6px rgba(0, 0, 0, 0.12); -} - -/* Dark theme */ -[data-theme="dark"] { - --color-bg-primary: #1a1a1a; - --color-bg-secondary: #2a2a2a; - --color-bg-tertiary: #252525; - --color-bg-button: #333333; - --color-bg-button-hover: #3d3d3d; - --color-bg-highlight: #6b5a00; - --color-bg-focus: #4a4200; - --color-bg-focus-border: #7a6b00; - --color-bg-timestamp: #1a3a52; - --color-bg-timestamp-hover: #2a4a62; - --color-bg-hover: #1a2a3a; - - --color-text-primary: #e0e0e0; - --color-text-secondary: #a0a0a0; - --color-text-tertiary: #b8b8b8; - --color-text-quaternary: #cccccc; - --color-text-muted: #888888; - --color-text-inverse: #ffffff; - - --color-border-primary: #444444; - --color-border-secondary: #3a3a3a; - --color-border-tertiary: #2f2f2f; - --color-border-focus: #3f3f3f; - - --color-link: #58a6ff; - --color-badge: #2f81f7; - --color-chart-stroke: #555555; - --color-chart-stroke-secondary: #2a2a2a; - - --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3); - --shadow-dropdown: 0 2px 6px rgba(0, 0, 0, 0.4); -} +/* Custom styles for XP.css integration */ body { - font-family: Arial, sans-serif; - margin: 24px; - color: var(--color-text-primary); - background-color: var(--color-bg-primary); - transition: background-color 0.3s ease, color 0.3s ease; -} - -header { - margin-bottom: 16px; -} - -.controls { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; - margin-bottom: 12px; + background: teal; + padding: 0; + margin: 0; } +/* Channel dropdown custom styling */ .channel-dropdown { position: relative; - min-width: 220px; - flex: 0 1 260px; + display: inline-block; } .channel-dropdown summary { list-style: none; cursor: pointer; - border: 1px solid var(--color-border-primary); - border-radius: 4px; - padding: 6px 8px; - background: var(--color-bg-primary); - color: var(--color-text-primary); - display: inline-flex; - align-items: center; - min-height: 32px; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + padding: 3px 4px; + background: ButtonFace; + border: 1px solid; + border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; + min-width: 180px; + text-align: left; } .channel-dropdown summary::-webkit-details-marker { display: none; } -.channel-dropdown[open] summary { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; +.channel-dropdown summary::after { + content: ' ▼'; + font-size: 8px; + float: right; +} + +.channel-dropdown[open] summary::after { + content: ' ▲'; } .channel-options { - margin-top: 4px; - padding: 8px; - border: 1px solid var(--color-border-primary); - border-radius: 0 0 4px 4px; - background: var(--color-bg-primary); - max-height: 240px; + position: absolute; + margin-top: 2px; + padding: 4px; + background: ButtonFace; + border: 1px solid; + border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; + max-height: 300px; overflow-y: auto; - box-shadow: var(--shadow-dropdown); + box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); + z-index: 100; min-width: 220px; - width: max(220px, 100%); } .channel-option { display: flex; align-items: center; gap: 6px; - margin-bottom: 6px; - font-size: 12px; + margin-bottom: 4px; + font-size: 11px; } .channel-option:last-child { margin-bottom: 0; } -input, -select, -button { - padding: 6px 8px; -} - -.muted { - color: var(--color-text-secondary); - font-size: 12px; -} - -#results .item { - border-bottom: 1px solid var(--color-border-secondary); - padding: 12px 0; -} - +/* Layout helpers */ .summary-row { display: flex; - gap: 16px; + gap: 12px; flex-wrap: wrap; - align-items: flex-start; margin-top: 12px; } @@ -176,30 +78,164 @@ button { .summary-right { flex: 1 1 0%; - min-width: 0; - background: var(--color-bg-secondary); - padding: 12px; - border-radius: 8px; - box-shadow: var(--shadow-card); + min-width: 300px; } -#metrics { - margin-top: 12px; +/* Results styling */ +#results .item { + border-bottom: 1px solid ButtonShadow; + padding: 12px 0; + margin-bottom: 8px; +} + +#results .item:last-child { + border-bottom: none; +} + +/* Badges */ +.badge-row { + margin-top: 6px; display: flex; - flex-direction: column; - gap: 8px; + gap: 4px; + flex-wrap: wrap; } -#metricsStatus { - min-height: 16px; +.badge { + background: #0b6efd; + color: #fff; + border-radius: 3px; + padding: 2px 6px; + font-size: 10px; + font-weight: bold; } -#metricsContent { +/* Transcript and highlights */ +.transcript { + background: Window; + border: 1px solid; + border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; + padding: 8px; + margin-top: 6px; + max-height: 200px; + overflow-y: auto; + font-size: 11px; +} + +.highlight-list { display: flex; flex-direction: column; gap: 6px; + max-height: none; + overflow: visible; } +.highlight-row { + padding: 4px; + cursor: pointer; + border: 1px solid transparent; +} + +.highlight-row:hover { + background: Highlight; + color: HighlightText; + border: 1px dotted WindowText; +} + +mark { + background: yellow; + color: black; + padding: 0 2px; +} + +.transcript-toggle { + margin-top: 8px; +} + +.full-transcript { + margin-top: 12px; + padding: 8px; + background: Window; + border: 2px solid; + border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; + max-height: 400px; + overflow-y: auto; + font-size: 11px; +} + +.transcript-segment { + margin-bottom: 10px; + padding-bottom: 6px; + border-bottom: 1px solid ButtonShadow; +} + +.transcript-segment:last-child { + border-bottom: none; + margin-bottom: 0; +} + +.transcript-segment.focused { + background: #ffffe0; + padding: 6px; + border: 2px dotted #000; + animation: pulse-highlight 1s ease-in-out; +} + +@keyframes pulse-highlight { + 0%, 100% { + background: #ffffe0; + } + 50% { + background: #ffffa0; + } +} + +.timestamp-link { + display: inline-block; + color: #0000ff; + text-decoration: none; + font-weight: bold; + font-size: 10px; + font-family: 'Courier New', monospace; + margin-right: 8px; + padding: 1px 3px; + background: #e0e0e0; + border: 1px solid #808080; +} + +.timestamp-link:hover { + background: #c0c0c0; + text-decoration: underline; +} + +.transcript-text { + color: WindowText; + line-height: 1.4; +} + +.transcript-header { + font-weight: bold; + margin-bottom: 8px; + display: flex; + align-items: center; + justify-content: space-between; + background: ActiveCaption; + color: CaptionText; + padding: 2px 4px; +} + +.transcript-close { + cursor: pointer; + font-size: 16px; + padding: 0 4px; + font-weight: bold; +} + +.transcript-close:hover { + background: Highlight; + color: HighlightText; +} + +/* Chart styling */ #frequencyChart { margin-top: 8px; } @@ -210,15 +246,16 @@ button { #frequencyChart .axis path, #frequencyChart .axis line { - stroke: var(--color-chart-stroke); + stroke: #808080; } #frequencyChart .axis text { - fill: var(--color-text-primary); + fill: WindowText; + font-size: 10px; } #frequencyChart .freq-layer rect { - stroke: var(--color-chart-stroke-secondary); + stroke: #fff; stroke-width: 0.5px; } @@ -227,191 +264,36 @@ button { display: flex; flex-wrap: wrap; gap: 8px; - font-size: 12px; - color: var(--color-text-tertiary); + font-size: 10px; } .freq-legend-item { display: flex; align-items: center; - gap: 6px; + gap: 4px; } .freq-legend-swatch { width: 12px; height: 12px; - border-radius: 2px; + border: 1px solid #000; display: inline-block; } -.transcript { - background: var(--color-bg-tertiary); - padding: 8px; - margin-top: 6px; - max-height: 200px; - overflow-y: auto; -} - -.highlight-list { - display: flex; - flex-direction: column; - gap: 8px; - max-height: none; - overflow: visible; -} - -.highlight-row { - padding: 4px 0; - border-bottom: 1px solid var(--color-border-tertiary); - cursor: pointer; - transition: background 0.2s; -} - -.highlight-row:hover { - background: var(--color-bg-hover); -} - -.highlight-row:last-child { - border-bottom: none; -} - -.transcript-wrapper { - margin-top: 8px; +/* Metrics content */ +#metricsContent { + font-size: 11px; } +/* Pager */ .pager { margin-top: 12px; display: flex; gap: 8px; } -mark { - background: var(--color-bg-highlight); - color: var(--color-text-primary); - padding: 0 2px; -} - - -.badge-row { - margin-top: 6px; - display: flex; - gap: 4px; - flex-wrap: wrap; -} - -.badge { - background: var(--color-badge); - color: var(--color-text-inverse); - border-radius: 999px; - padding: 2px 8px; - font-size: 12px; -} - -.transcript-toggle { - margin-top: 8px; - padding: 6px 12px; - background: var(--color-bg-button); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - cursor: pointer; - font-size: 13px; - color: var(--color-link); - transition: background 0.2s; -} - -.transcript-toggle:hover { - background: var(--color-bg-button-hover); -} - -.transcript-toggle:disabled { - cursor: not-allowed; - color: var(--color-text-muted); -} - -.full-transcript { - margin-top: 12px; - padding: 12px; - background: var(--color-bg-tertiary); - border: 1px solid var(--color-border-focus); - border-radius: 4px; - max-height: 400px; - overflow-y: auto; -} - -.transcript-segment { - margin-bottom: 12px; - padding-bottom: 8px; - border-bottom: 1px solid var(--color-border-tertiary); - transition: background 0.3s, padding 0.3s; - border-radius: 4px; -} - -.transcript-segment:last-child { - border-bottom: none; - margin-bottom: 0; -} - -.transcript-segment.focused { - background: var(--color-bg-focus); - padding: 8px; - border: 2px solid var(--color-bg-focus-border); - animation: pulse-highlight 1s ease-in-out; -} - -@keyframes pulse-highlight { - 0%, 100% { - background: var(--color-bg-focus); - } - 50% { - opacity: 0.8; - } -} - -.timestamp-link { - display: inline-block; - color: var(--color-link); - text-decoration: none; - font-weight: bold; - font-size: 11px; - font-family: monospace; - margin-right: 8px; - padding: 2px 6px; - background: var(--color-bg-timestamp); - border-radius: 3px; - transition: background 0.2s; -} - -.timestamp-link:hover { - background: var(--color-bg-timestamp-hover); - text-decoration: underline; -} - -.transcript-text { - color: var(--color-text-quaternary); - line-height: 1.5; -} - -.transcript-header { - font-weight: bold; - margin-bottom: 8px; - color: var(--color-text-tertiary); - display: flex; - align-items: center; - justify-content: space-between; -} - -.transcript-close { - cursor: pointer; - color: var(--color-text-secondary); - font-size: 18px; - padding: 0 4px; -} - -.transcript-close:hover { - color: var(--color-text-primary); -} - +/* Loading text */ .loading-text { - color: var(--color-text-secondary); font-style: italic; + color: GrayText; }