From 8daf38b4e9a54362b6f4f832fc946988f18b4683 Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Mon, 13 Oct 2025 01:01:55 +0300 Subject: [PATCH] Implement Phase 1: Complete static HTML structure with enhanced UI elements --- docs/dev-plan.md | 22 +++-- index.html | 149 +++++++++++++++++++++++++++++++++ src/styles.css | 212 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 376 insertions(+), 7 deletions(-) create mode 100644 index.html create mode 100644 src/styles.css diff --git a/docs/dev-plan.md b/docs/dev-plan.md index d1b585a..d740a9f 100644 --- a/docs/dev-plan.md +++ b/docs/dev-plan.md @@ -51,17 +51,25 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu --- -### **Phase 1: Static HTML Structure** +### **Phase 1: Static HTML Structure** ✅ **COMPLETE** **Goal**: Basic three-panel layout with placeholder content -- [ ] Create `index.html` with basic structure -- [ ] Add minimal CSS for three-column flexbox layout -- [ ] Add placeholder divs for: snippet list, editor, preview -- [ ] Add vertical toggle button strip on far right (3 buttons) -- [ ] Test that layout renders at correct proportions +- [x] Create `index.html` with basic structure +- [x] Add minimal CSS for three-column flexbox layout +- [x] Add placeholder divs for: snippet list, editor, preview +- [x] Add vertical toggle button strip (moved to left side with emoji icons) +- [x] Test that layout renders at correct proportions **Deliverable**: Static page with three visible sections + toggle buttons +**Additional Enhancements Made**: +- Added header with site branding (🔭 Astrolabe) and quick action links +- Applied retro Windows 2000 aesthetic with square edges and classic colors +- Implemented basic toggle functionality for show/hide panels +- Added snippet selection highlighting +- Used emoji icons for better UX (📄 ✏️ 👁️) +- Optimized font sizes for better readability + --- ### **Phase 2: Resizable Panels** @@ -260,5 +268,5 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu --- -**Current Phase**: Phase 1 - Static HTML Structure +**Current Phase**: Phase 2 - Resizable Panels **Status**: Ready to begin implementation \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..84d49e0 --- /dev/null +++ b/index.html @@ -0,0 +1,149 @@ + + + + + + + Astrolabe - Vega-Lite Snippet Manager + + + + + +
+
+ 🔭 + Astrolabe +
+
+ New + Import + Export + Help +
+
+ +
+ +
+ + + +
+ +
+ +
+
+ Snippets +
+
+
    +
  • +
    2025-10-13_14-23-45
    +
    Oct 13, 2:23 PM
    +
    • +
  • +
    2025-10-12_09-15-30
    +
    Oct 12, 9:15 AM
    +
    • +
  • +
    2025-10-11_16-42-18
    +
    Oct 11, 4:42 PM
    +
    • +
+
+ Click to select a snippet +
+
+
+ + +
+
+ Editor +
+
+
+
+ Monaco Editor will load here +
+
+ JSON schema validation • Autocomplete • Syntax highlighting +
+
+
+
+ + +
+
+ Preview +
+
+
+
+ Vega-Lite visualization will render here +
+
+ Live preview • Auto-refresh • Error display +
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..724ea81 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,212 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'MS Sans Serif', Tahoma, sans-serif; + height: 100vh; + overflow: hidden; + background: #c0c0c0; + display: flex; + flex-direction: column; +} + +.header { + background: #c0c0c0; + border-bottom: 2px solid #808080; + padding: 6px 12px; + display: flex; + align-items: center; + justify-content: space-between; + height: 36px; + flex-shrink: 0; +} + +.header-left { + display: flex; + align-items: center; + gap: 10px; +} + +.header-icon { + font-size: 20px; +} + +.header-title { + font-size: 14px; + font-weight: bold; + color: #000000; +} + +.header-links { + display: flex; + gap: 16px; +} + +.header-link { + font-size: 12px; + color: #000000; + text-decoration: underline; + cursor: pointer; +} + +.header-link:hover { + background: #316ac5; + color: #ffffff; +} + +.app-container { + display: flex; + height: calc(100vh - 36px); + width: 100vw; +} + +.toggle-strip { + display: flex; + flex-direction: column; + background: #c0c0c0; + width: 32px; + border-right: 2px solid #808080; +} + +.main-panels { + display: flex; + flex: 1; + min-width: 0; +} + +.panel { + display: flex; + flex-direction: column; + border-right: 2px solid #808080; + background: #c0c0c0; + min-width: 200px; +} + +.panel:last-child { + border-right: none; +} + +.panel-header { + padding: 8px 12px; + background: #c0c0c0; + border-bottom: 2px solid #808080; + font-weight: normal; + font-size: 12px; + color: #000000; +} + +.panel-content { + flex: 1; + padding: 8px; + overflow: auto; + background: #ffffff; + border: 1px inset #c0c0c0; +} + +/* Panel sizing */ +.snippet-panel { + flex: 0 0 25%; +} + +.editor-panel { + flex: 0 0 50%; +} + +.preview-panel { + flex: 0 0 25%; +} + +/* Toggle buttons */ +.toggle-btn { + background: #c0c0c0; + border: 2px outset #c0c0c0; + color: #000000; + padding: 6px; + cursor: pointer; + font-size: 16px; + height: 32px; + width: 32px; + display: flex; + align-items: center; + justify-content: center; +} + +.toggle-btn:hover { + background: #d4d0c8; +} + +.toggle-btn:active { + border: 2px inset #c0c0c0; +} + +.toggle-btn.active { + background: #d4d0c8; + border: 2px inset #c0c0c0; +} + +/* Placeholder content styling */ +.placeholder { + color: #808080; + font-style: italic; + text-align: center; + margin-top: 40px; + font-size: 12px; +} + +.snippet-list { + list-style: none; +} + +.snippet-item { + padding: 4px 8px; + border: 1px solid #808080; + margin-bottom: 2px; + cursor: pointer; + background: #ffffff; +} + +.snippet-item:hover { + background: #316ac5; + color: #ffffff; +} + +.snippet-item.selected { + background: #316ac5; + color: #ffffff; +} + +.snippet-name { + font-weight: normal; + font-size: 12px; +} + +.snippet-date { + font-size: 11px; + color: inherit; + margin-top: 1px; +} + +.editor-placeholder { + background: #ffffff; + border: 2px inset #c0c0c0; + height: 300px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin: 8px; +} + +.preview-placeholder { + background: #ffffff; + border: 2px inset #c0c0c0; + height: 300px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin: 8px; +} \ No newline at end of file