initial commit

.gitignore

@@ -0,0 +1,24 @@
+# macOS
+.DS_Store
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.egg-info/
+.eggs/
+build/
+dist/
+.venv/
+venv/
+env/
+*.log
+
+# Docker
+*.env
+docker-compose.override.yml
+
+# Editors / IDEs
+.vscode/
+.idea/
+*.swp

IDEA.md

@@ -0,0 +1 @@
+Taking extensive screenshots of the two seperate whitelabel sites for marketing.

README.md

@@ -0,0 +1,86 @@
+# FlowerCMS — Marketing Screenshots
+
+White-label CMS demo sites for broadcasters. Two stations, one platform.
+
+---
+
+## Sites
+
+| # | Station | Brand Name | URL | Local Port |
+|---|---|---|---|---|
+| 1 | **KMTN** | KMountain Flower Radio | http://kmtn.westerntechnologies.duckdns.org | http://localhost:4200 |
+| 2 | **KRY2** | Fire FM | http://staylit.westerntechnologies.duckdns.org | http://localhost:4201 |
+
+Both sites run via Docker Compose behind Nginx Proxy Manager.
+
+## Admin Access
+
+**Login page:** append `/admin` to any site URL (e.g. `http://kmtn.westerntechnologies.duckdns.org/admin`)
+
+| Field | Value |
+|---|---|
+| Username | `admin` |
+| Password | `123` |
+
+Admin dashboard tabs: **Shows · Events · History · Team · Community · Station · Theme · Underwriters · Mobile Builds · Stats**
+
+## Docker Services
+
+| Container | Image | Ports |
+|---|---|---|
+| `kmtnflower-frontend-1` | kmtnflower-frontend | 0.0.0.0:4200 → 80 |
+| `kmtnflower-api-1` | kmtnflower-api | 8000 (internal) |
+| `kmtnflower-db-1` | postgres:16-alpine | 5432 (internal) |
+| `kmtnflower-build-1` | kmtnflower-build | 22 (internal) |
+| `kryz-frontend-1` | kryz-frontend | 0.0.0.0:4201 → 80 |
+| `kryz-api-1` | kryz-api | 8000 (internal) |
+| `kryz-db-1` | postgres:16-alpine | 5432 (internal) |
+| `kryz-build-1` | kryz-build | 22 (internal) |
+
+## Screenshot Files
+
+All images are 500px wide, JPEG, captured at 1.5× zoom.
+
+| File | Source | Used In |
+|---|---|---|
+| `homepage.jpg` | KMTN public homepage | marketing.html (hero + player) |
+| `schedule.jpg` | KMTN schedule page | marketing.html |
+| `about.jpg` | KMTN about page | marketing.html |
+| `events.jpg` | KMTN events page | marketing.html |
+| `contact.jpg` | KMTN contact page | marketing.html |
+| `admin_dashboard.jpg` | KMTN admin — Shows tab | marketing.html |
+| `admin_theme.jpg` | KMTN admin — Theme tab | marketing.html |
+| `admin_mobile_builds.jpg` | KMTN admin — Mobile Builds tab | marketing.html |
+| `kmtn_homepage.jpg` | KMTN homepage (white-label showcase) | marketing.html |
+| `staylit_homepage.jpg` | Fire FM homepage (white-label showcase) | marketing.html |
+
+## How to Recapture Screenshots
+
+1. Open site in browser at the URL above.
+2. Sign in at `/admin` with `admin` / `123`.
+3. In DevTools Console, set zoom:
+   ```js
+   document.body.style.zoom = '1.5';
+   document.documentElement.style.zoom = '1.5';
+   ```
+4. Click the desired admin tab.
+5. Capture screenshot (browser_vision or OS screencapture).
+6. Resize to 500px wide, convert to JPEG:
+   ```bash
+   sips --resampleWidth 500 input.png --out tmp.png
+   sips -s format jpeg tmp.png --out output.jpg
+   ```
+
+## Serving Locally
+
+```bash
+cd "/Users/kyle/Desktop/kmtnflower shots"
+python3 -m http.server 8899
+# Open http://localhost:8899
+```
+
+## Project Root
+
+```
+/Users/kyle/Documents/kmtnflower/
+```

convert.py

@@ -0,0 +1,20 @@
+#!/usr/bin/env python3
+import subprocess
+import os
+
+dir_path = "/Users/kyle/Desktop/kmtnflower shots"
+names = ["kmtn_homepage", "staylit_homepage"]
+
+for name in names:
+    png = os.path.join(dir_path, f"{name}.png")
+    jpg = os.path.join(dir_path, f"{name}.jpg")
+    tmp = os.path.join(dir_path, f"{name}_tmp.png")
+    
+    subprocess.run(["sips", "--resampleWidth", "500", png, "--out", tmp], check=True)
+    subprocess.run(["sips", "-s", "format", "jpeg", tmp, "--out", jpg], check=True)
+    os.remove(tmp)
+    
+    nw = subprocess.check_output(["sips", "-g", "pixelWidth", jpg]).decode().strip().split()[-1]
+    nh = subprocess.check_output(["sips", "-g", "pixelHeight", jpg]).decode().strip().split()[-1]
+    sz = os.path.getsize(jpg)
+    print(f"{name}.jpg: {nw}x{nh} ({sz/1024:.0f} KB)")

server.py

@@ -0,0 +1,11 @@
+#!/usr/bin/env python3
+import http.server
+import socketserver
+
+PORT = 8899
+
+Handler = http.server.SimpleHTTPRequestHandler
+
+with socketserver.TCPServer(("", PORT), Handler) as httpd:
+    print(f"Serving HTTP on port {PORT} (http://localhost:{PORT}/)")
+    httpd.serve_forever()

site-screenshots.html

@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>KMountain Flower Radio — Site Screenshots</title>
+<style>
+  :root {
+    --bg: #faf6f0;
+    --card: #ffffff;
+    --text: #3a3632;
+    --muted: #8a8580;
+    --primary: #1a3a5c;
+    --primary-light: #2a5a8c;
+    --accent: #e87a2e;
+    --border: #e5e0d8;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.6;
+  }
+
+  /* Hero header */
+  .hero {
+    background: linear-gradient(135deg, var(--primary) 0%, #0e2440 100%);
+    color: #fff;
+    padding: 60px 40px 50px;
+    text-align: center;
+  }
+  .hero h1 {
+    font-size: 2.4rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    margin-bottom: 8px;
+  }
+  .hero h1 span { color: var(--accent); }
+  .hero p {
+    font-size: 1.1rem;
+    opacity: 0.8;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  .hero .badge {
+    display: inline-block;
+    margin-top: 16px;
+    background: rgba(255,255,255,0.12);
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 20px;
+    padding: 6px 18px;
+    font-size: 0.85rem;
+    letter-spacing: 0.3px;
+  }
+
+  /* Section titles */
+  .section-title {
+    padding: 40px 40px 0;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .section-title h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .section-title h2::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 24px;
+    background: var(--accent);
+    border-radius: 2px;
+  }
+  .section-title p {
+    color: var(--muted);
+    margin-top: 4px;
+    font-size: 0.95rem;
+  }
+
+  /* Grid */
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
+    gap: 32px;
+    padding: 28px 40px 60px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  @media (max-width: 580px) {
+    .grid { grid-template-columns: 1fr; padding: 20px; gap: 24px; }
+  }
+
+  /* Card */
+  .card {
+    background: var(--card);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
+    border: 1px solid var(--border);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  .card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.06);
+  }
+  .card img {
+    width: 100%;
+    display: block;
+    border-bottom: 1px solid var(--border);
+  }
+  .card-body {
+    padding: 18px 22px 22px;
+  }
+  .card-body .label {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--accent);
+    background: rgba(232,122,46,0.1);
+    padding: 3px 10px;
+    border-radius: 4px;
+    margin-bottom: 8px;
+  }
+  .card-body .label.admin {
+    color: var(--primary-light);
+    background: rgba(42,90,140,0.1);
+  }
+  .card-body h3 {
+    font-size: 1.05rem;
+    font-weight: 600;
+    margin-bottom: 6px;
+    color: var(--primary);
+  }
+  .card-body p {
+    font-size: 0.88rem;
+    color: var(--muted);
+    line-height: 1.55;
+  }
+
+  /* Footer */
+  footer {
+    text-align: center;
+    padding: 30px 40px 40px;
+    color: var(--muted);
+    font-size: 0.82rem;
+    border-top: 1px solid var(--border);
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+</style>
+</head>
+<body>
+
+<div class="hero">
+  <h1>K<span>Mtn</span> Flower Radio</h1>
+  <p>Complete site walkthrough — public pages and admin dashboard</p>
+  <div class="badge">kryz.westerntechnologies.duckdns.org &middot; 14 screenshots</div>
+</div>
+
+<!-- PUBLIC PAGES -->
+<div class="section-title">
+  <h2>Public Pages</h2>
+  <p>Front-end pages visible to visitors</p>
+</div>
+<div class="grid">
+
+  <div class="card">
+    <img src="./browser_screenshot_21bf19f764e948cfbae5a57a3767c880.png" alt="Homepage">
+    <div class="card-body">
+      <div class="label">Page 1</div>
+      <h3>Homepage</h3>
+      <p>Mountain landscape hero, "KMountain Flower Radio" branding, View Schedule CTA, live stream indicator, underwriter placeholders, and full footer with social links.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_b7e4006d9cf6457a8d40db7eac35a786.png" alt="About page">
+    <div class="card-body">
+      <div class="label">Page 2</div>
+      <h3>About</h3>
+      <p>Core values (Music, Community, Reach, Mission), history timeline (1987&ndash;2008), and team profiles for 4 key staff members.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_43f2ede9e9b6467da64c384bb464beaf.png" alt="Schedule page">
+    <div class="card-body">
+      <div class="label">Page 3</div>
+      <h3>Schedule</h3>
+      <p>10 program cards with show titles, hosts, genres, and time slots — from Morning Mountain Mist through Weekend Sunrise.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_4867d71acefb47a4a5a20b0792114528.png" alt="Events page">
+    <div class="card-body">
+      <div class="label">Page 4</div>
+      <h3>Events</h3>
+      <p>4 upcoming events: Summer Sounds Festival (Jul 12), Annual Fundraiser Gala (Aug 5), Volunteer Open House (Sep 18), Harvest Moon Broadcast (Oct 30).</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_38c1b3d26c354eb3a6a50d1e17cb5545.png" alt="Contact page">
+    <div class="card-body">
+      <div class="label">Page 5</div>
+      <h3>Contact</h3>
+      <p>Contact form (name, email, subject, message), studio address at 42 Pine St, phone number, email, and frequency info.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_3e603078f20a4e68a9dd56821b1bad4e.png" alt="Sign In page">
+    <div class="card-body">
+      <div class="label">Page 6</div>
+      <h3>Sign In</h3>
+      <p>Admin login form with username and password fields, flower logo header, and "Admin access for KMountain Flower Radio" subtitle.</p>
+    </div>
+  </div>
+
+</div>
+
+<!-- ADMIN DASHBOARD -->
+<div class="section-title">
+  <h2>Admin Dashboard</h2>
+  <p>Logged-in management interface (username: admin)</p>
+</div>
+<div class="grid">
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_13e3b50673794164b10881a7cde0d944.png" alt="Dashboard overview">
+    <div class="card-body">
+      <div class="label admin">Admin &mdash; 7</div>
+      <h3>Dashboard Overview</h3>
+      <p>Tab navigation for all admin sections (Shows, Events, History, Team, Community, Station, Theme, Underwriters, Mobile Builds, Stats) with the Shows table visible.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_503c4383e8c6466f8bd32e70bc976b0c.png" alt="Shows management">
+    <div class="card-body">
+      <div class="label admin">Admin &mdash; 8</div>
+      <h3>Shows (10)</h3>
+      <p>Full shows management table with Edit/Delete actions: Morning Mountain Mist, Community Roundup, Bluegrass Trails, Lunchtime Jazz, Folk Roots Hour, Afternoon Acoustics, Evening Echoes, Classical Mountains, Night Owl Session, Weekend Sunrise.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_93e33401ba5f4e75b486995dbb909256.png" alt="Events management">
+    <div class="card-body">
+      <div class="label admin">Admin &mdash; 9</div>
+      <h3>Events (4)</h3>
+      <p>Events management table with date, title, location, and active status. All 4 events active. Add Event button available.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_ad98ed0d72444accb8b86bd741c76026.png" alt="History timeline">
+    <div class="card-body">
+      <div class="label admin">Admin &mdash; 10</div>
+      <h3>History Timeline (4)</h3>
+      <p>1987 &ldquo;The Idea Takes Root&rdquo;, 1991 &ldquo;FCC License Granted&rdquo;, 1995 &ldquo;First Broadcast&rdquo;, 2008 &ldquo;Studio Expansion&rdquo; — each with Edit/Delete controls.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_0ae9d99c496643268975d724943b63b1.png" alt="Team management">
+    <div class="card-body">
+      <div class="label admin">Admin &mdash; 11</div>
+      <h3>Team Members (4)</h3>
+      <p>Margaret Ellis (Board Chair), James Whitfield (General Manager), Dr. Priya Nair (Program Director), Carlos Mendez (Community Outreach Coordinator).</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_f27993f84b854693b122bcaa39aa4cb5.png" alt="Community highlights">
+    <div class="card-body">
+      <div class="label admin">Admin &mdash; 12</div>
+      <h3>Community Highlights (4)</h3>
+      <p>Our Music 🎵, Our Community 🤝, Our Reach 📡, Our Mission 🌱 — each with icons, ordering, and active status.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_96d8590746bb4bb8a84be5d9d0bd5576.png" alt="Station configuration">
+    <div class="card-body">
+      <div class="label admin">Admin &mdash; 13</div>
+      <h3>Station Configuration</h3>
+      <p>Callsign KMTN, frequency 98.7 FM, founded 1987, email, phone, website. Donation URL and app store URLs not yet configured. Edit Config button.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="file:///Users/kyle/Desktop/kmtnflower%20shots/browser_screenshot_228777a2402e461d91b651c00010d9dc.png" alt="Theme customization">
+    <div class="card-body">
+      <div class="label admin">Admin &mdash; 14</div>
+      <h3>Theme &amp; Color Palette</h3>
+      <p>Harmony settings (Complementary), 14 color swatches — primary blues (#1a3a5c), accent oranges (#e87a2e), functional colors. Warning triangles on Success/Danger colors. Reset / Auto-Fix / Save buttons.</p>
+    </div>
+  </div>
+
+</div>
+
+<footer>
+  Generated for KMountain Flower Radio &middot; kryz.westerntechnologies.duckdns.org &middot; 2026-07-08
+</footer>
+
+</body>
+</html>