diff --git a/docs/planning/design-bible.md b/docs/planning/design-bible.md index 03fb247..2f9fda5 100644 --- a/docs/planning/design-bible.md +++ b/docs/planning/design-bible.md @@ -1,28 +1,31 @@ # โ„๏ธ๐Ÿ”ฅ FIREFROST GAMING: THE DESIGN BIBLE **Document ID:** FFG-PLN-002 -**Version:** 1.2 +**Version:** 2.0 **Created:** February 8, 2026 -**Last Updated:** February 12, 2026 (9:00 AM CST) +**Last Updated:** March 22, 2026 **Author:** Michael Krause -**Last Updated By:** The Chronicler +**Last Updated By:** Chronicler #39 **Status:** ๐ŸŸข CURRENT **Review Date:** Monthly -**Last Updated:** February 8, 2026 -**Maintained By:** Frostystyle (Michael) & Gingerfury (Meg) +**Last Updated:** March 22, 2026 +**Maintained By:** The Trinity (Michael, Meg, Holly) **Status:** Living Document --- -## 1. The Core Philosophy: "Choose Your Destiny" +## 1. The Core Philosophy: "Fire + Frost + Foundation" -Firefrost Gaming is built on the equilibrium of two opposing forces. We do not compromise on security, and we do not compromise on passion. Every asset we create must reflect this balance. +Firefrost Gaming is built on the balance of three elemental forces. We do not compromise on security, we do not compromise on passion, and we do not compromise on creative transformation. -* **The Frost (The Wizard):** Represents Logic, Stability, Security, and Technical Precision. -* **The Fire (The Emissary):** Represents Passion, Community, Warmth, and Authentic Connection. +* **The Frost (The Wizard - Michael):** Logic, Stability, Security, Technical Precision. Cool blue strategy. +* **The Fire (The Emissary - Meg):** Passion, Community, Warmth, Authentic Connection. Fierce orange energy. +* **The Arcane (The Catalyst - Holly):** Creative Transformation, Building, Innovation, Foundation. Vibrant purple synthesis. -**Tagline:** "Fire melts barriers. Frost builds foundations." +**The Trinity:** Where Fire's passion meets Frost's precision through Arcane's creativity, impossible things become real. + +**Tagline:** "Fire + Frost + Foundation = Where Love Builds Legacy" --- @@ -54,35 +57,76 @@ Firefrost Gaming is built on the equilibrium of two opposing forces. We do not c | `branding/backgrounds/fire-frost-collision.png` | Panoramic fire vortex meeting ice crystal formation โ€” white-hot energy at collision point | Login screens, Discord banners, website hero images, stream overlays | ### Brand Identity -- **Fire = Meg (GingerFury)** โ€” passion, energy, community warmth, fierce protection -- **Frost = Michael (FrostyStyle)** โ€” precision, architecture, cool strategy, deep knowledge -- **The collision point** โ€” where fire meets frost, where their strengths combine. That's Firefrost Gaming. -- **Typography:** "FIRE" in cold steel/blue tones, "FROST" in warm orange/fire tones โ€” intentional contrast swap -- **Dragon motif:** Fire dragon in the logo represents both power and guardianship +- **Fire = Meg (GingerFury/The Emissary)** โ€” Passion, energy, community warmth, fierce protection. Orange/amber tones. +- **Frost = Michael (FrostyStyle/The Wizard)** โ€” Precision, architecture, cool strategy, deep knowledge. Teal/cyan tones. +- **Arcane = Holly (unicorn20089/The Catalyst)** โ€” Creative transformation, building, innovation, foundation. Purple/violet tones. +- **The Trinity** โ€” Where Fire meets Frost through Arcane, three elements in perfect balance. +- **Typography:** "FIRE" in warm tones, "FROST" in cool tones, "ARCANE" in vibrant purple +- **Dragon motif:** Fire dragon in the logo represents power, guardianship, and the fusion of elements ## 2. Visual Identity & Color Palette -We use high-contrast color theory to signal to the user exactly where they are in the network. +The Trinity of elemental forces, each with a distinct color family. -### A. The Frost Palette (Technical/All-Ages) -*Used for: Main Website, Tutorials, Gitea, Project Logs, and General Community.* +### A. The Fire Palette (Meg/The Emissary - Passion & Community) +*Primary Brand Colors - Used for: Community content, social media, fire-path servers* + +| Element | Hex Code | RGB | Usage | +|---------|----------|-----|-------| +| **Primary** | `#FF6B35` | rgb(255, 107, 53) | Main Fire orange - headings, CTAs, fire branding | +| **Secondary** | `#F7931E` | rgb(247, 147, 30) | Warm accent - highlights, hover states | +| **Accent** | #FFA500` | rgb(255, 165, 0) | Bright amber - emphasis, alerts | +| **Text** | `#FFFFFF` | rgb(255, 255, 255) | White text on fire backgrounds | + +**Fire Gradient:** `linear-gradient(135deg, #FF6B35 0%, #FFA500 100%)` + +### B. The Frost Palette (Michael/The Wizard - Precision & Technical) +*Primary Brand Colors - Used for: Technical content, documentation, frost-path servers* + +| Element | Hex Code | RGB | Usage | +|---------|----------|-----|-------| +| **Primary** | `#4ECDC4` | rgb(78, 205, 196) | Main Frost teal - headings, links, frost branding | +| **Secondary** | `#45B7D1` | rgb(69, 183, 209) | Cool accent - highlights, technical elements | +| **Accent** | `#00CED1` | rgb(0, 206, 209) | Bright cyan - emphasis, code blocks | +| **Text** | `#FFFFFF` | rgb(255, 255, 255) | White text on frost backgrounds | + +**Frost Gradient:** `linear-gradient(135deg, #4ECDC4 0%, #00CED1 100%)` + +### C. The Arcane Palette (Holly/The Catalyst - Creative Transformation) +*Primary Brand Colors - Used for: Building content, creative showcases, catalyst elements* + +| Element | Hex Code | RGB | Usage | +|---------|----------|-----|-------| +| **Primary** | `#A855F7` | rgb(168, 85, 247) | Main Arcane purple - headings, catalyst branding | +| **Secondary** | `#9D4EDD` | rgb(157, 78, 221) | Bright violet - highlights, creative accents | +| **Accent** | `#C77DFF` | rgb(199, 125, 255) | Light amethyst - soft touches, backgrounds | +| **Dark** | `#7F00FF` | rgb(127, 0, 255) | Deep purple - text, borders, strong contrast | + +**Arcane Gradient:** `linear-gradient(135deg, #A855F7 0%, #C77DFF 100%)` + +### D. The Trinity Gradients (Combined Elements) + +**Fire + Frost (Classic):** +`linear-gradient(135deg, #FF6B35 0%, #4ECDC4 100%)` +*Used for: Main branding, homepage hero, unified messaging* + +**Fire + Frost + Arcane (Full Trinity):** +`linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%)` +*Used for: Founder content, trinity imagery, special occasions* + +**Arcane Storm (Holly's Signature):** +`linear-gradient(135deg, #7F00FF 0%, #A855F7 50%, #C77DFF 100%)` +*Used for: Build showcases, Holly's content, creative projects* + +### E. Neutral Palette (Universal) +*Used across all content types* | Element | Hex Code | Usage | |---------|----------|-------| -| **Primary** | `#00E5FF` | Electric Cyan - Headings, Active Links | -| **Secondary** | `#01579B` | Deep Navy - Buttons, Nav Backgrounds | -| **Background** | `#0A0A0A` | Obsidian Black - Main Page Background | -| **Text** | `#FFFFFF` | Pure White - High Readability Body Text | - -### B. The Fire Palette (Ignis/18+) -*Used for: /ignis route, Mature Community Space, and Veteran Socials.* - -| Element | Hex Code | Usage | -|---------|----------|-------| -| **Primary** | `#FF3D00` | Deep Orange/Red - Alerts, Fire Path Links | -| **Secondary** | `#BF360C` | Burnt Umber - Borders, Secondary Accents | -| **Background** | `#120000` | Blood Black - Gated Section Background | -| **Accent** | `#FFD600` | Amber Gold - Important Calls to Action | +| **Dark** | `#1a1a1a` | Main backgrounds, dark mode | +| **Gray** | `#6b7280` | Secondary text, borders, subtle elements | +| **Light** | `#f3f4f6` | Light backgrounds, cards, containers | +| **White** | `#ffffff` | Primary text on dark, pure backgrounds | --- diff --git a/tools/ghost-page-builder/README.md b/tools/ghost-page-builder/README.md new file mode 100644 index 0000000..f72d531 --- /dev/null +++ b/tools/ghost-page-builder/README.md @@ -0,0 +1,159 @@ +# Ghost Page Builder Tool + +**Created:** March 22, 2026 +**Version:** 1.0 +**Author:** Chronicler #39 +**Task:** #70 + +--- + +## Overview + +Interactive React tool for previewing Ghost CMS page HTML with Fire/Frost CSS before publishing. Eliminates the edit-paste-preview-repeat cycle. + +## Features + +- **Live HTML Editor** with syntax highlighting +- **Real-time Preview** with Fire/Frost CSS applied +- **Viewport Toggle** (Desktop 1200px / Tablet 768px / Mobile 375px) +- **Sample Templates** (Blank, Simple, Two Column, Card Grid) +- **Auto-save** to localStorage +- **Copy to Clipboard** for easy Ghost Admin pasting +- **Tab Key Support** (inserts 2 spaces, maintains cursor position) + +## Usage + +### Quick Start + +1. Open `ghost-page-builder.jsx` in Claude (upload to chat) +2. Claude will render it as an interactive artifact +3. Start typing HTML in the left pane +4. See live preview in the right pane +5. Toggle viewport to test mobile/tablet +6. Click "Copy HTML" when satisfied +7. Paste into Ghost Admin โ†’ Publish + +### Sample Workflow + +**Creating an "About" page:** +1. Load "Simple Page" template +2. Edit title: `

About Firefrost Gaming

` +3. Add content paragraphs +4. Toggle to Mobile view to check responsive layout +5. Click "Copy HTML" +6. Open Ghost Admin โ†’ Pages โ†’ New Page +7. Paste HTML into HTML card +8. Publish + +### Fire/Frost/Arcane CSS Classes + +The tool includes the complete Trinity color system: + +**Fire Colors (Meg/The Emissary):** +- `.fire-text` - Fire orange text (#FF6B35) +- `.fire-gradient` - Fire gradient background +- `.fire-border` - Fire orange border + +**Arcane Colors (Holly/The Catalyst):** +- `.arcane-text` - Arcane purple text (#A855F7) +- `.arcane-gradient` - Arcane gradient background +- `.arcane-border` - Arcane purple border + +**Frost Colors (Michael/The Wizard):** +- `.frost-text` - Frost teal text (#4ECDC4) +- `.frost-gradient` - Frost gradient background +- `.frost-border` - Frost teal border + +**Trinity Gradients:** +- `.fire-frost-gradient` - Classic Fire+Frost +- `.trinity-gradient` - Fire+Arcane+Frost (full trinity) +- `.arcane-storm-gradient` - Holly's signature gradient + +**Example:** +```html +

๐Ÿ”ฅ Fire Section

+

Community-focused content...

+ +

โšก Arcane Section

+

Creative, building content...

+ +

โ„๏ธ Frost Section

+

Technical content...

+``` + +## Technical Details + +**Architecture:** +- React artifact (single `.jsx` file) +- Split-pane layout (editor + preview) +- Iframe with `srcdoc` for isolated preview +- Two-state pattern (instant input + 500ms debounced preview) +- LocalStorage persistence + +**CSS Injection Order:** +1. Ghost Theme CSS (Source v1.5.2) - via CDN +2. Fire/Frost Custom CSS - embedded + +**Ghost Compatibility:** +- Uses `.gh-body` and `.gh-content` wrapper classes +- Matches Ghost typography and spacing +- Supports Ghost embed cards (Twitter, YouTube, etc.) + +**Sandbox Flags:** +- `allow-same-origin` - Required for CSS loading +- `allow-scripts` - Required for Ghost embed cards + +## Architecture Consultation + +This tool was built following architectural guidance from Gemini AI. See full consultation documentation: + +**File:** `docs/tasks/ghost-page-builder/gemini-consultation.md` + +**Key decisions:** +- Use iframe `srcdoc` (not direct document manipulation) +- Skip CodeMirror for V1 (use styled textarea) +- Viewport via container resizing (not CSS scale) +- Tab key intercept with React state timing fix + +## Troubleshooting + +### Preview doesn't update +- Check browser console for errors +- Ensure you're using a modern browser (Chrome, Firefox, Edge) +- Try refreshing the page + +### Tab key moves focus instead of inserting spaces +- This is a browser issue - the handler should intercept +- Report as bug if persistent + +### Copy button doesn't work +- Browser may block clipboard access +- Grant clipboard permissions when prompted +- Try manually selecting and copying + +### Preview doesn't match Ghost +- Ensure Ghost wrapper classes are present (`.gh-content`) +- Check that Fire/Frost CSS is loading +- Verify Ghost theme CSS CDN link is accessible + +## Files + +- `ghost-page-builder.jsx` - Main React artifact (350+ lines) +- `README.md` - This file +- `../docs/tasks/ghost-page-builder/gemini-consultation.md` - Architecture consultation + +## Related Tasks + +- **Task #70:** Ghost Page Builder Tool (this tool) +- **Task #69:** Ghost Website Core Pages (uses this tool) +- **Task #52:** Ghost Homepage Content (uses this tool) + +## Version History + +| Version | Date | Changes | +|---------|------|---------| +| 1.0 | 2026-03-22 | Initial release following Gemini consultation | + +--- + +**Fire + Frost + Foundation = Where Love Builds Legacy** ๐Ÿ’™๐Ÿ”ฅโ„๏ธ diff --git a/tools/ghost-page-builder/ghost-page-builder.jsx b/tools/ghost-page-builder/ghost-page-builder.jsx new file mode 100644 index 0000000..fbc2e58 --- /dev/null +++ b/tools/ghost-page-builder/ghost-page-builder.jsx @@ -0,0 +1,450 @@ +import React, { useState, useEffect } from 'react'; + +// Fire/Frost/Arcane CSS definitions (injected into preview) +const FIRE_FROST_CSS = ` + :root { + /* Fire Colors (Meg/The Emissary) */ + --fire-primary: #FF6B35; + --fire-secondary: #F7931E; + --fire-accent: #FFA500; + + /* Frost Colors (Michael/The Wizard) */ + --frost-primary: #4ECDC4; + --frost-secondary: #45B7D1; + --frost-accent: #00CED1; + + /* Arcane Colors (Holly/The Catalyst) */ + --arcane-primary: #A855F7; + --arcane-secondary: #9D4EDD; + --arcane-accent: #C77DFF; + --arcane-dark: #7F00FF; + + /* Neutral Colors */ + --neutral-dark: #1a1a1a; + --neutral-gray: #6b7280; + --neutral-light: #f3f4f6; + } + + /* Fire/Frost/Arcane Gradient Utilities */ + .fire-frost-gradient { + background: linear-gradient(135deg, #FF6B35 0%, #4ECDC4 100%); + } + + .fire-gradient { + background: linear-gradient(135deg, #FF6B35 0%, #FFA500 100%); + } + + .frost-gradient { + background: linear-gradient(135deg, #4ECDC4 0%, #00CED1 100%); + } + + .arcane-gradient { + background: linear-gradient(135deg, #A855F7 0%, #C77DFF 100%); + } + + .trinity-gradient { + background: linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%); + } + + .arcane-storm-gradient { + background: linear-gradient(135deg, #7F00FF 0%, #A855F7 50%, #C77DFF 100%); + } + + /* Typography Colors */ + .fire-text { + color: var(--fire-primary); + } + + .frost-text { + color: var(--frost-primary); + } + + .arcane-text { + color: var(--arcane-primary); + } + + /* Border Utilities */ + .fire-border { + border-color: var(--fire-primary); + } + + .frost-border { + border-color: var(--frost-primary); + } + + .arcane-border { + border-color: var(--arcane-primary); + } + + /* Common Ghost page styles */ + .gh-content { + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; + } + + .gh-content h1 { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1.5rem; + line-height: 1.2; + } + + .gh-content h2 { + font-size: 2rem; + font-weight: 600; + margin: 2rem 0 1rem; + line-height: 1.3; + } + + .gh-content p { + font-size: 1.125rem; + line-height: 1.75; + margin-bottom: 1.5rem; + } + + .gh-content a { + color: var(--fire-primary); + text-decoration: underline; + } + + .gh-content a:hover { + color: var(--frost-primary); + } +`; + +// Sample templates with Ghost wrapper classes +const SAMPLE_TEMPLATES = { + blank: { + name: 'Blank Page', + html: '

Page Title

\n

Start writing your content here...

' + }, + simple: { + name: 'Simple Page', + html: `

Welcome to Firefrost Gaming

+

This is a simple page template with basic structure.

+ +

Section Heading

+

Add your content here. This template includes proper Ghost content classes for consistent styling.

+ +

You can add more paragraphs, headings, and content as needed.

` + }, + twoColumn: { + name: 'Trinity Layout (3 Columns)', + html: `

The Trinity

+ +
+
+

๐Ÿ”ฅ Fire Path

+

Meg - The Emissary

+

Community-focused content goes here. Passionate, warm, welcoming.

+ +
+ +
+

โšก Arcane Path

+

Holly - The Catalyst

+

Creative, building-focused content. Innovation, transformation, foundation.

+ +
+ +
+

โ„๏ธ Frost Path

+

Michael - The Wizard

+

Technical, precise content goes here. Cool, calculated, systematic.

+ +
+
` + }, + cardGrid: { + name: 'Trinity Card Grid', + html: `

The Trinity - Fire + Arcane + Frost

+

Showcase the three elemental forces.

+ +
+
+

๐Ÿ”ฅ Fire - The Emissary

+

Passion, community, warmth. Meg brings the heart and the people.

+
+ +
+

โšก Arcane - The Catalyst

+

Creative transformation, building, innovation. Holly brings the foundation.

+
+ +
+

โ„๏ธ Frost - The Wizard

+

Precision, technical excellence, strategy. Michael brings the architecture.

+
+
` + } +}; + +// Helper function to generate preview HTML for iframe srcdoc +const generatePreviewHtml = (htmlContent) => { + return ` + + + + + Ghost Preview + + + + + + + + +
+ ${htmlContent} +
+ +`; +}; + +export default function GhostPageBuilder() { + // Two-state pattern: instant input + debounced preview + const [htmlInput, setHtmlInput] = useState(''); + const [debouncedHtml, setDebouncedHtml] = useState(''); + const [viewport, setViewport] = useState('desktop'); + const [copied, setCopied] = useState(false); + + // Load saved draft from localStorage on mount + useEffect(() => { + const saved = localStorage.getItem('firefrost_ghost_draft'); + if (saved) { + setHtmlInput(saved); + setDebouncedHtml(saved); + } else { + // Start with simple template if no saved draft + setHtmlInput(SAMPLE_TEMPLATES.simple.html); + setDebouncedHtml(SAMPLE_TEMPLATES.simple.html); + } + }, []); + + // Debounce preview updates and auto-save to localStorage + useEffect(() => { + const timer = setTimeout(() => { + setDebouncedHtml(htmlInput); + localStorage.setItem('firefrost_ghost_draft', htmlInput); + }, 500); + + return () => clearTimeout(timer); + }, [htmlInput]); + + // Tab key handler for textarea + const handleKeyDown = (e) => { + if (e.key === 'Tab') { + e.preventDefault(); + + const start = e.target.selectionStart; + const end = e.target.selectionEnd; + + // Insert two spaces at cursor position + const newValue = htmlInput.substring(0, start) + " " + htmlInput.substring(end); + + setHtmlInput(newValue); + + // Move cursor after inserted spaces (wait for React state update) + setTimeout(() => { + e.target.selectionStart = e.target.selectionEnd = start + 2; + }, 0); + } + }; + + // Copy HTML to clipboard + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(htmlInput); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error('Failed to copy:', err); + } + }; + + // Load sample template + const loadTemplate = (templateKey) => { + setHtmlInput(SAMPLE_TEMPLATES[templateKey].html); + }; + + // Clear editor + const handleReset = () => { + if (confirm('Clear the editor? Your current work will be lost.')) { + setHtmlInput(''); + localStorage.removeItem('firefrost_ghost_draft'); + } + }; + + // Viewport dimensions + const viewportWidths = { + desktop: '100%', + tablet: '768px', + mobile: '375px' + }; + + return ( +
+ {/* Header */} +
+

๐Ÿ”ฅโšกโ„๏ธ Ghost Page Builder

+

Live preview with Fire + Arcane + Frost CSS

+
+ + {/* Toolbar */} +
+ {/* Sample Templates Dropdown */} +
+ + +
+ + {/* Viewport Toggle */} +
+ +
+ + + +
+
+ + {/* Spacer */} +
+ + {/* Action Buttons */} + + + +
+ + {/* Main Content: Split Pane */} +
+ {/* Left: Editor */} +
+
+ HTML Editor +
+