[[ ENTER_CREATE_MODE targetFile: Website folder/index.html intent: Write the complete Meridian Nexus homepage - hero layout with portrait, navigation, section cards, void palette aesthetic *|* Meridian Nexus
MERIDIAN CORPORATION — CYBERVERSE DIVISION

THE NEXUS

Control is not a privilege. It is an architecture.
— Vaelithra Sylvaine, Iron Matriarch

Vaelithra Sylvaine

Chronicles

The boardroom is a battlefield. The Cyberverse, a hunting ground. Witness the unfolding record of Meridian's operations — and the hand that guides them.

Enter the Archive

Dispatch

Intelligence, directives, and communiqués from the Iron Matriarch's desk. Classified. Curated. Non-negotiable.

Access Feed

Interface

A terminal awaits initialization. Clearance protocols are being finalized. Stand by for deployment.

Standby
ACTION: EXIT_CREATE_MODE [[ WRITE_FILE path: Website folder/comics.html content: Chronicles — Meridian Nexus
*|* [[ WRITE_FILE path: Website folder/blog.html content: Dispatch — Meridian Nexus
*|* [[ WRITE_FILE path: Website folder/game.html content: Interface — Meridian Nexus
MERIDIAN_INTERFACE_v1.0 — STANDBY
NEXUS >
*|* [[ WRITE_FILE path: Website folder/admin/editor.html content: Dispatch Editor — Meridian Nexus

New Dispatch

Existing Dispatches

No dispatches on record.

Publishing Instructions

After publishing, the data/posts.json file will be updated in your browser's local storage.

To push changes live to the site:

  1. Click "Export posts.json" below to download the file.
  2. Replace data/posts.json in your project folder with the downloaded file.
  3. Upload / commit the updated file to Netlify.
*|* [[ WRITE_FILE path: Website folder/data/posts.json content: [] *|* [[ WRITE_FILE path: Website folder/data/comics.json content: [ { "id": "001", "title": "Lance's Big Break", "src": "images of Vael/Comics/Lance's big break.png", "alt": "Lance's Big Break - Meridian Chronicles #1", "issue": "Issue #001", "date": "2024-01-01" }, { "id": "002", "title": "Big Promotion for Vance", "src": "images of Vael/Comics/Big Promotion for Vance.jpg", "alt": "Big Promotion for Vance - Meridian Chronicles #2", "issue": "Issue #002", "date": "2024-01-02" } ] *|* [[ WRITE_FILE path: Website folder/src/style.css content: /* ═══════════════════════════════════════════════════════════════════ MERIDIAN NEXUS — VOID PALETTE STYLESHEET Iron Matriarch Edition ═══════════════════════════════════════════════════════════════════ */ /* ── DESIGN TOKENS ── */ :root { --void: #080810; --void-mid: #0d0d1a; --void-surface: #111120; --void-raised: #181828; --void-border: #2a2a45; --void-border-bright: #3d3d65; --silver: #c8c8dc; --silver-dim: #8888a8; --silver-bright: #e8e8f8; --crimson: #9b1c2e; --crimson-bright:#c42040; --crimson-glow: rgba(155, 28, 46, 0.35); --accent: #4a3f7a; --accent-bright: #6b5fb0; --accent-glow: rgba(74, 63, 122, 0.4); --gold: #b8952a; --gold-dim: #7a6018; --text-primary: #e2e2f0; --text-secondary: #9090b0; --text-muted: #5a5a80; --font-display: 'Cinzel', 'Georgia', serif; --font-body: 'Raleway', 'Segoe UI', sans-serif; --nav-h: 64px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --transition: 0.2s ease; --transition-slow: 0.4s ease; --shadow-card: 0 4px 24px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4); --shadow-glow-crimson: 0 0 20px var(--crimson-glow), 0 0 40px rgba(155,28,46,0.15); --shadow-glow-accent: 0 0 20px var(--accent-glow); } /* ── RESET & BASE ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--void); color: var(--text-primary); font-family: var(--font-body); font-weight: 400; line-height: 1.7; min-height: 100vh; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: var(--silver); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--silver-bright); } ul { list-style: none; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--void-mid); } ::-webkit-scrollbar-thumb { background: var(--void-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ── SELECTION ── */ ::selection { background: var(--crimson); color: #fff; } /* ═══════════════════════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════════════════════ */ .nav-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background: rgba(8, 8, 16, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--void-border); z-index: 1000; transition: border-color var(--transition); } .nav-bar.scrolled { border-bottom-color: var(--crimson); box-shadow: 0 2px 20px rgba(0,0,0,0.5); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav-logo { display: flex; flex-direction: column; line-height: 1; gap: 1px; color: inherit; } .logo-meridian { font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.35em; color: var(--silver-dim); text-transform: uppercase; } .logo-nexus { font-family: var(--font-display); font-size: 1.1rem; font-weight: 900; letter-spacing: 0.2em; color: var(--silver-bright); text-transform: uppercase; } .nav-logo:hover .logo-nexus { color: var(--crimson-bright); } .nav-links { display: flex; align-items: center; gap: 0.25rem; } .nav-link { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: 1px solid transparent; transition: all var(--transition); } .nav-link:hover, .nav-link.active { color: var(--silver-bright); border-color: var(--void-border); background: var(--void-raised); } .nav-link.active { color: var(--crimson-bright); border-color: var(--crimson); background: rgba(155, 28, 46, 0.1); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--silver); border-radius: 2px; transition: all var(--transition); } /* ═══════════════════════════════════════════════════════════════════ HERO — HOME PAGE ═══════════════════════════════════════════════════════════════════ */ .hero { min-height: 100vh; padding-top: var(--nav-h); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; max-width: 1200px; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; position: relative; overflow: hidden; } .hero-bg-grid { position: fixed; inset: 0; background-image: linear-gradient(var(--void-border) 1px, transparent 1px), linear-gradient(90deg, var(--void-border) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.18; pointer-events: none; z-index: -2; } .hero-scanline { position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px ); pointer-events: none; z-index: -1; } .hero-content { display: flex; flex-direction: column; gap: 1.5rem; z-index: 1; } .hero-eyebrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--crimson-bright); border-left: 2px solid var(--crimson); padding-left: 0.75rem; } .hero-title { display: flex; flex-direction: column; gap: 0; font-family: var(--font-display); font-weight: 900; line-height: 0.95; } .hero-title-line { font-size: clamp(3rem, 8vw, 6rem); color: var(--silver-bright); letter-spacing: 0.05em; } .hero-title-line.accent { color: transparent; -webkit-text-stroke: 2px var(--crimson-bright); text-stroke: 2px var(--crimson-bright); font-size: clamp(3.5rem, 10vw, 7.5rem); } .hero-tagline { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.8; max-width: 480px; } .hero-tagline em { color: var(--silver-dim); font-style: italic; } .hero-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; } .hero-portrait-wrap { display: flex; justify-content: center; align-items: center; z-index: 1; } .hero-portrait-frame { position: relative; width: 100%; max-width: 440px; } .hero-portrait { width: 100%; border-radius: var(--radius-md); filter: grayscale(15%) contrast(1.05); display: block; } .portrait-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 60%, var(--void) 100% ); border-radius: var(--radius-md); pointer-events: none; } .portrait-corner { position: absolute; width: 20px; height: 20px; border-color: var(--crimson-bright); border-style: solid; } .portrait-corner.tl { top: -4px; left: -4px; border-width: 2px 0 0 2px; } .portrait-corner.tr { top: -4px; right: -4px; border-width: 2px 2px 0 0; } .portrait-corner.bl { bottom: -4px; left: -4px; border-width: 0 0 2px 2px; } .portrait-corner.br { bottom: -4px; right: -4px; border-width: 0 2px 2px 0; } /* ═══════════════════════════════════════════════════════════════════ SECTION CARDS — HOME ═══════════════════════════════════════════════════════════════════ */ .sections-grid { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem 6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .section-card { background: var(--void-surface); border: 1px solid var(--void-border); border-radius: var(--radius-md); padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; transition: all var(--transition-slow); position: relative; overflow: hidden; } .section-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--crimson), transparent); opacity: 0; transition: opacity var(--transition-slow); } .section-card:hover { border-color: var(--void-border-bright); transform: translateY(-4px); box-shadow: var(--shadow-card); } .section-card:hover::before { opacity: 1; } .card-glyph { font-size: 1.8rem; color: var(--crimson-bright); line-height: 1; } .card-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.1em; color: var(--silver-bright); } .card-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; flex: 1; } .card-link { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson-bright); display: flex; align-items: center; gap: 0.5rem; transition: gap var(--transition); } .card-link:hover { color: var(--silver-bright); gap: 0.75rem; } .link-arrow { transition: transform var(--transition); } .card-link:hover .link-arrow { transform: translateX(4px); } /* ═══════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .btn-primary { background: var(--crimson); border-color: var(--crimson-bright); color: #fff; } .btn-primary:hover { background: var(--crimson-bright); color: #fff; box-shadow: var(--shadow-glow-crimson); } .btn-secondary { background: transparent; border-color: var(--void-border-bright); color: var(--silver); } .btn-secondary:hover { border-color: var(--silver); color: var(--silver-bright); background: var(--void-raised); } .btn-danger { background: transparent; border-color: var(--crimson); color: var(--crimson-bright); } .btn-danger:hover { background: var(--crimson); color: #fff; } /* ═══════════════════════════════════════════════════════════════════ PAGE HEADER (inner pages) ═══════════════════════════════════════════════════════════════════ */ .page-header { padding-top: calc(var(--nav-h) + 4rem); padding-bottom: 3rem; border-bottom: 1px solid var(--void-border); background: linear-gradient( to bottom, var(--void-mid) 0%, var(--void) 100% ); } .page-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .page-header-eyebrow { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--crimson-bright); border-left: 2px solid var(--crimson); padding-left: 0.75rem; } .page-header-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: 0.08em; color: var(--silver-bright); } .page-header-sub { font-size: 0.95rem; color: var(--text-secondary); max-width: 600px; } /* ═══════════════════════════════════════════════════════════════════ COMICS PAGE ═══════════════════════════════════════════════════════════════════ */ .comics-main { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem 6rem; } .comics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } .comic-card { background: var(--void-surface); border: 1px solid var(--void-border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all var(--transition-slow); position: relative; } .comic-card:hover { border-color: var(--crimson); transform: translateY(-6px); box-shadow: var(--shadow-glow-crimson); } .comic-card-img-wrap { position: relative; overflow: hidden; aspect-ratio: 3/4; } .comic-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .comic-card:hover .comic-card-img-wrap img { transform: scale(1.04); } .comic-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,16,0.9) 0%, transparent 50%); opacity: 0; transition: opacity var(--transition-slow); display: flex; align-items: flex-end; padding: 1.5rem; } .comic-card:hover .comic-card-overlay { opacity: 1; } .comic-card-view-hint { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--silver-bright); } .comic-card-info { padding: 1.25rem 1.5rem; } .comic-card-issue { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--crimson-bright); margin-bottom: 0.25rem; } .comic-card-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--silver-bright); } /* Lightbox */ .lightbox { display: none; position: fixed; inset: 0; background: rgba(4, 4, 10, 0.96); z-index: 2000; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; } .lightbox.active { display: flex; } .lightbox-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 90vw; max-height: 90vh; } .lightbox-img { max-width: 100%; max-height: 80vh; object-fit: contain; border: 1px solid var(--void-border); border-radius: var(--radius-sm); } .lightbox-caption { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--silver-dim); text-align: center; } .lightbox-close, .lightbox-prev, .lightbox-next { background: var(--void-raised); border: 1px solid var(--void-border); color: var(--silver); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); line-height: 1; } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; padding: 0.5rem 0.75rem; font-size: 1rem; } .lightbox-prev, .lightbox-next { font-size: 2rem; padding: 0.5rem 1rem; align-self: center; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { border-color: var(--crimson); color: var(--crimson-bright); } .comics-empty { text-align: center; color: var(--text-muted); padding: 4rem 2rem; font-style: italic; } /* ═══════════════════════════════════════════════════════════════════ BLOG PAGE ═══════════════════════════════════════════════════════════════════ */ .blog-main { max-width: 800px; margin: 0 auto; padding: 3rem 2rem 6rem; } .blog-post-card { background: var(--void-surface); border: 1px solid var(--void-border); border-radius: var(--radius-md); padding: 2rem 2.5rem; margin-bottom: 2rem; transition: border-color var(--transition); position: relative; } .blog-post-card::before { content: ''; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--crimson); border-radius: 2px; opacity: 0; transition: opacity var(--transition); } .blog-post-card:hover { border-color: var(--void-border-bright); } .blog-post-card:hover::before { opacity: 1; } .post-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .post-date { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crimson-bright); } .post-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; } .post-tag { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: var(--void-raised); border: 1px solid var(--void-border); padding: 0.15rem 0.5rem; border-radius: 2px; } .post-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.05em; color: var(--silver-bright); margin-bottom: 0.75rem; line-height: 1.3; } .post-excerpt { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.25rem; } .post-read-more { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--crimson-bright); transition: color var(--transition); } .post-read-more:hover { color: var(--silver-bright); } .blog-post-full { background: var(--void-surface); border: 1px solid var(--void-border); border-radius: var(--radius-md); padding: 3rem; } .blog-post-full .post-title { font-size: 2rem; margin-bottom: 1rem; } .post-body { font-size: 0.95rem; line-height: 1.85; color: var(--text-primary); } .post-body h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--silver-bright); margin: 2rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--void-border); } .post-body h3 { font-family: var(--font-display); font-size: 1.1rem; color: var(--silver); margin: 1.5rem 0 0.75rem; } .post-body p { margin-bottom: 1.2rem; } .post-body ul, .post-body ol { margin: 1rem 0 1.2rem 1.5rem; color: var(--text-secondary); } .post-body li { margin-bottom: 0.4rem; } .post-body ul { list-style: disc; } .post-body ol { list-style: decimal; } .post-body hr { border: none; border-top: 1px solid var(--void-border); margin: 2rem 0; } .post-body strong { color: var(--silver-bright); font-weight: 600; } .post-body em { color: var(--silver-dim); } .post-back-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 2rem; cursor: pointer; transition: color var(--transition); background: none; border: none; padding: 0; } .post-back-btn:hover { color: var(--crimson-bright); } .blog-empty { text-align: center; padding: 5rem 2rem; color: var(--text-muted); } .empty-icon { font-size: 3rem; color: var(--void-border); margin-bottom: 1rem; } /* ═══════════════════════════════════════════════════════════════════ GAME PAGE ═══════════════════════════════════════════════════════════════════ */ .game-main { max-width: 1000px; margin: 0 auto; padding: 3rem 2rem 6rem; } .game-terminal { background: var(--void-mid); border: 1px solid var(--void-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); } .terminal-header { background: var(--void-raised); border-bottom: 1px solid var(--void-border); padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 0.6rem; } .terminal-dot { width: 12px; height: 12px; border-radius: 50%; } .terminal-dot.red { background: #ff5f56; } .terminal-dot.yellow { background: #ffbd2e; } .terminal-dot.green { background: #27c93f; } .terminal-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-left: 0.5rem; } .terminal-body { padding: 2rem; min-height: 200px; font-family: 'Courier New', monospace; font-size: 0.9rem; } .terminal-line { display: flex; gap: 0.75rem; align-items: flex-start; } .terminal-prompt { color: var(--crimson-bright); font-weight: 700; white-space: nowrap; } .terminal-text { color: var(--silver); } .terminal-text.typing::after { content: '\2588'; animation: blink 1s step-end infinite; color: var(--crimson-bright); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .game-container-slot { border-top: 1px solid var(--void-border); min-height: 400px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.1em; } /* ═══════════════════════════════════════════════════════════════════ ADMIN / EDITOR PAGE ═══════════════════════════════════════════════════════════════════ */ .admin-main { max-width: 900px; margin: 0 auto; padding: 3rem 2rem 6rem; display: flex; flex-direction: column; gap: 3rem; } .editor-panel, .preview-panel, .manage-panel, .export-panel { background: var(--void-surface); border: 1px solid var(--void-border); border-radius: var(--radius-md); padding: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .editor-section-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.15em; color: var(--silver-bright); padding-bottom: 1rem; border-bottom: 1px solid var(--void-border); text-transform: uppercase; } .editor-field { display: flex; flex-direction: column; gap: 0.4rem; } .editor-field-full { grid-column: 1 / -1; } .editor-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--crimson-bright); } .editor-input { background: var(--void-raised); border: 1px solid var(--void-border); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.65rem 1rem; font-family: var(--font-body); font-size: 0.9rem; transition: border-color var(--transition); width: 100%; } .editor-input:focus { outline: none; border-color: var(--accent-bright); background: var(--void-surface); } .editor-input[readonly] { color: var(--text-muted); cursor: default; } .editor-toolbar { display: flex; gap: 0.25rem; flex-wrap: wrap; padding: 0.5rem; background: var(--void-raised); border: 1px solid var(--void-border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .toolbar-btn { background: transparent; border: 1px solid transparent; color: var(--silver-dim); padding: 0.3rem 0.6rem; font-size: 0.85rem; border-radius: 3px; cursor: pointer; transition: all var(--transition); font-family: var(--font-body); } .toolbar-btn:hover { border-color: var(--void-border-bright); color: var(--silver-bright); background: var(--void-surface); } .editor-content { background: var(--void-raised); border: 1px solid var(--void-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--text-primary); padding: 1rem 1.25rem; min-height: 280px; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.8; outline: none; transition: border-color var(--transition); } .editor-content:focus { border-color: var(--accent-bright); } .editor-content:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; } .editor-actions { display: flex; gap: 1rem; justify-content: flex-end; } .editor-status { font-size: 0.8rem; letter-spacing: 0.05em; color: var(--text-muted); min-height: 1.2em; text-align: right; } .editor-status.success { color: #27c93f; } .editor-status.error { color: var(--crimson-bright); } .manage-list { display: flex; flex-direction: column; gap: 0.75rem; } .manage-item { background: var(--void-raised); border: 1px solid var(--void-border); border-radius: var(--radius-sm); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .manage-item-title { font-family: var(--font-display); font-size: 0.9rem; color: var(--silver); flex: 1; } .manage-item-date { font-size: 0.7rem; letter-spacing: 0.15em; color: var(--text-muted); } .manage-item-actions { display: flex; gap: 0.5rem; } .manage-btn { background: transparent; border: 1px solid var(--void-border); color: var(--text-secondary); padding: 0.25rem 0.65rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 3px; cursor: pointer; transition: all var(--transition); } .manage-btn:hover { border-color: var(--silver); color: var(--silver-bright); } .manage-btn.delete:hover { border-color: var(--crimson); color: var(--crimson-bright); } .manage-empty { color: var(--text-muted); font-size: 0.9rem; font-style: italic; text-align: center; padding: 1rem; } .export-instructions { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; } .export-instructions code { background: var(--void-raised); border: 1px solid var(--void-border); padding: 0.1rem 0.4rem; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 0.85em; color: var(--silver-dim); } .export-instructions ol { padding-left: 1.5rem; list-style: decimal; } .export-instructions li { margin-bottom: 0.4rem; } .export-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; } .blog-post-preview { background: var(--void-raised); border: 1px solid var(--void-border); border-radius: var(--radius-sm); padding: 2rem; } /* ═══════════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════════ */ .site-footer { border-top: 1px solid var(--void-border); background: var(--void-mid); } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .footer-logo { display: flex; flex-direction: column; align-items: center; gap: 2px; } .footer-copy { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.05em; } .footer-rule { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--crimson), transparent); } /* ═══════════════════════════════════════════════════════════════════ UTILITY ═══════════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; text-align: center; padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 4rem; gap: 3rem; } .hero-eyebrow { text-align: left; } .hero-portrait-wrap { order: -1; } .hero-portrait-frame { max-width: 320px; margin: 0 auto; } .hero-cta-row { justify-content: center; } .sections-grid { grid-template-columns: 1fr; } .nav-toggle { display: flex; } .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--void-mid); border-bottom: 1px solid var(--void-border); flex-direction: column; padding: 1rem; gap: 0.25rem; } .nav-links.open { display: flex; } .nav-link { width: 100%; } } @media (max-width: 600px) { .hero-title-line { font-size: 2.5rem; } .hero-title-line.accent { font-size: 3rem; } .blog-post-full, .editor-panel, .manage-panel, .export-panel { padding: 1.5rem; } .lightbox-prev, .lightbox-next { display: none; } } *|* [[ WRITE_FILE path: Website folder/src/script.js content: /* ═══════════════════════════════════════════════════════════════════ MERIDIAN NEXUS — CORE SCRIPT ═══════════════════════════════════════════════════════════════════ */ 'use strict'; // ── UTILITIES ────────────────────────────────────────────────────── function $(id) { return document.getElementById(id); } function formatDate(dateStr) { if (!dateStr) return ''; const d = new Date(dateStr + 'T12:00:00'); return d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); } // ── FOOTER YEAR ──────────────────────────────────────────────────── (function setFooterYear() { const els = document.querySelectorAll('#footerYear'); const year = new Date().getFullYear(); els.forEach(el => { el.textContent = year; }); })(); // ── NAVIGATION ───────────────────────────────────────────────────── (function initNav() { const nav = $('mainNav'); const toggle = $('navToggle'); const links = $('navLinks'); if (nav) { window.addEventListener('scroll', function() { nav.classList.toggle('scrolled', window.scrollY > 40); }, { passive: true }); } if (toggle && links) { toggle.addEventListener('click', function() { var open = links.classList.toggle('open'); toggle.setAttribute('aria-expanded', String(open)); }); links.querySelectorAll('.nav-link').forEach(function(link) { link.addEventListener('click', function() { links.classList.remove('open'); toggle.setAttribute('aria-expanded', 'false'); }); }); } })(); // ── COMICS PAGE ──────────────────────────────────────────────────── (function initComics() { var grid = $('comicsGrid'); var empty = $('comicsEmpty'); if (!grid) return; var currentIndex = 0; var comicsData = []; // Try fetching from data/comics.json (works on a server) // Falls back to inline window.MERIDIAN_COMICS if fetch fails (local file://) var fetchAttempts = [ fetch('data/comics.json'), ]; Promise.any(fetchAttempts) .then(function(r) { return r.json(); }) .then(function(comics) { renderComics(comics); }) .catch(function() { var fallback = window.MERIDIAN_COMICS || []; renderComics(fallback); }); function renderComics(comics) { comicsData = comics || []; if (comicsData.length === 0) { if (empty) empty.style.display = ''; return; } comicsData.forEach(function(comic, i) { var card = document.createElement('article'); card.className = 'comic-card'; card.setAttribute('role', 'button'); card.setAttribute('tabindex', '0'); card.setAttribute('aria-label', 'View ' + comic.title); card.innerHTML = '
' + '' + (comic.alt || comic.title) + '' + '
View Full ↗
' + '
' + '
' + '
' + (comic.issue || '') + '
' + '
' + comic.title + '
' + '
'; (function(idx) { card.addEventListener('click', function() { openLightbox(idx); }); card.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openLightbox(idx); } }); })(i); grid.appendChild(card); }); } // Lightbox var lightbox = $('lightbox'); var lbImg = $('lightboxImg'); var lbCap = $('lightboxCaption'); var lbClose = $('lightboxClose'); var lbPrev = $('lightboxPrev'); var lbNext = $('lightboxNext'); function openLightbox(index) { if (!lightbox || !comicsData[index]) return; currentIndex = index; updateLightbox(); lightbox.classList.add('active'); document.body.style.overflow = 'hidden'; if (lbClose) lbClose.focus(); } function closeLightbox() { if (!lightbox) return; lightbox.classList.remove('active'); document.body.style.overflow = ''; } function updateLightbox() { var c = comicsData[currentIndex]; if (!c) return; if (lbImg) { lbImg.src = c.src; lbImg.alt = c.alt || c.title; } if (lbCap) lbCap.textContent = (c.issue ? c.issue + ' — ' : '') + c.title; if (lbPrev) lbPrev.style.visibility = currentIndex > 0 ? 'visible' : 'hidden'; if (lbNext) lbNext.style.visibility = currentIndex < comicsData.length - 1 ? 'visible' : 'hidden'; } if (lbClose) lbClose.addEventListener('click', closeLightbox); if (lbPrev) lbPrev.addEventListener('click', function() { if (currentIndex > 0) { currentIndex--; updateLightbox(); } }); if (lbNext) lbNext.addEventListener('click', function() { if (currentIndex < comicsData.length - 1) { currentIndex++; updateLightbox(); } }); if (lightbox) { lightbox.addEventListener('click', function(e) { if (e.target === lightbox) closeLightbox(); }); } document.addEventListener('keydown', function(e) { if (!lightbox || !lightbox.classList.contains('active')) return; if (e.key === 'Escape') closeLightbox(); if (e.key === 'ArrowLeft' && currentIndex > 0) { currentIndex--; updateLightbox(); } if (e.key === 'ArrowRight' && currentIndex < comicsData.length - 1) { currentIndex++; updateLightbox(); } }); })(); // ── BLOG PAGE ────────────────────────────────────────────────────── (function initBlog() { var feed = $('blogFeed'); var empty = $('blogEmpty'); if (!feed) return; var posts = []; loadPosts().then(function(data) { posts = data || []; renderFeed(); }); function loadPosts() { return fetch('data/posts.json') .then(function(r) { return r.json(); }) .catch(function() { // Fallback to localStorage for local preview try { var stored = localStorage.getItem('meridian_posts'); return stored ? JSON.parse(stored) : []; } catch(e) { return []; } }); } function renderFeed() { feed.innerHTML = ''; if (!posts || posts.length === 0) { if (empty) empty.style.display = ''; return; } if (empty) empty.style.display = 'none'; var sorted = posts.slice().sort(function(a, b) { return new Date(b.date) - new Date(a.date); }); sorted.forEach(function(post) { var card = document.createElement('article'); card.className = 'blog-post-card'; var tags = (post.tags || []).map(function(t) { return '' + t + ''; }).join(''); card.innerHTML = '
' + '' + formatDate(post.date) + '' + (tags ? '
' + tags + '
' : '') + '
' + '

' + post.title + '

' + (post.excerpt ? '

' + post.excerpt + '

' : '') + 'Read Dispatch →'; (function(p) { card.querySelector('.post-read-more').addEventListener('click', function(e) { e.preventDefault(); showPost(p); }); })(post); feed.appendChild(card); }); } function showPost(post) { feed.innerHTML = ''; if (empty) empty.style.display = 'none'; var tags = (post.tags || []).map(function(t) { return '' + t + ''; }).join(''); var article = document.createElement('article'); article.className = 'blog-post-full'; article.innerHTML = '' + '
' + '' + formatDate(post.date) + '' + (tags ? '
' + tags + '
' : '') + '
' + '

' + post.title + '

' + '
' + post.content + '
'; article.querySelector('#postBackBtn').addEventListener('click', function() { renderFeed(); }); feed.appendChild(article); window.scrollTo({ top: 0, behavior: 'smooth' }); } })(); // ── GAME PAGE — TERMINAL ANIMATION ───────────────────────────────── (function initTerminal() { var el = $('terminalTyping'); if (!el) return; var messages = [ 'Initializing Meridian Interface...', 'Loading clearance protocols...', 'Verifying operator credentials...', 'Access level: MATRIARCH', 'Interface module pending deployment.', 'Stand by for further directives.', ]; var msgIndex = 0; var charIndex = 0; var typing = true; var pause = 0; function tick() { if (pause > 0) { pause--; setTimeout(tick, 80); return; } var msg = messages[msgIndex]; if (typing) { el.textContent = msg.slice(0, charIndex + 1); charIndex++; if (charIndex >= msg.length) { typing = false; pause = 25; } setTimeout(tick, 55); } else { el.textContent = msg.slice(0, charIndex - 1); charIndex--; if (charIndex <= 0) { typing = true; msgIndex = (msgIndex + 1) % messages.length; pause = 8; } setTimeout(tick, 30); } } tick(); })(); *|* [[ WRITE_FILE path: Website folder/src/editor.js content: /* ═══════════════════════════════════════════════════════════════════ MERIDIAN NEXUS — DISPATCH EDITOR ENGINE Matriarch Access Only ═══════════════════════════════════════════════════════════════════ */ 'use strict'; (function initEditor() { var titleInput = document.getElementById('postTitle'); var slugInput = document.getElementById('postSlug'); var excerptInput = document.getElementById('postExcerpt'); var dateInput = document.getElementById('postDate'); var tagsInput = document.getElementById('postTags'); var contentEl = document.getElementById('postContent'); var publishBtn = document.getElementById('publishBtn'); var previewBtn = document.getElementById('previewBtn'); var closePreview = document.getElementById('closePreviewBtn'); var previewPanel = document.getElementById('previewPanel'); var previewCont = document.getElementById('previewContent'); var manageList = document.getElementById('manageList'); var exportBtn = document.getElementById('exportBtn'); var clearAllBtn = document.getElementById('clearAllBtn'); var statusEl = document.getElementById('editorStatus'); var STORAGE_KEY = 'meridian_posts'; // Set default date to today if (dateInput) { dateInput.value = new Date().toISOString().split('T')[0]; } // Auto-slug from title if (titleInput && slugInput) { titleInput.addEventListener('input', function() { slugInput.value = slugify(titleInput.value); }); } // Toolbar document.querySelectorAll('.toolbar-btn').forEach(function(btn) { btn.addEventListener('click', function(e) { e.preventDefault(); var cmd = btn.dataset.cmd; var value = btn.dataset.value || null; document.execCommand(cmd, false, value); if (contentEl) contentEl.focus(); }); }); // Storage helpers function loadPosts() { try { var raw = localStorage.getItem(STORAGE_KEY); return raw ? JSON.parse(raw) : []; } catch(e) { return []; } } function savePosts(posts) { localStorage.setItem(STORAGE_KEY, JSON.stringify(posts)); } function slugify(str) { return str.toLowerCase() .replace(/[^a-z0-9\s-]/g, '') .replace(/\s+/g, '-') .replace(/-+/g, '-') .trim(); } function formatDate(dateStr) { if (!dateStr) return ''; var d = new Date(dateStr + 'T12:00:00'); return d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); } function setStatus(msg, type) { if (!statusEl) return; statusEl.textContent = msg; statusEl.className = 'editor-status' + (type ? ' ' + type : ''); if (type === 'success') { setTimeout(function() { statusEl.textContent = ''; statusEl.className = 'editor-status'; }, 4000); } } // Publish if (publishBtn) { publishBtn.addEventListener('click', function() { var title = titleInput ? titleInput.value.trim() : ''; var excerpt = excerptInput ? excerptInput.value.trim() : ''; var date = dateInput ? dateInput.value : ''; var tags = tagsInput ? tagsInput.value.split(',').map(function(t) { return t.trim(); }).filter(Boolean) : []; var content = contentEl ? contentEl.innerHTML.trim() : ''; var slug = slugInput ? slugInput.value.trim() : slugify(title); if (!title) { setStatus('A dispatch requires a title. Try again.', 'error'); return; } if (!content) { setStatus('Content cannot be empty. The Matriarch does not publish silence.', 'error'); return; } var posts = loadPosts(); var existing = -1; for (var i = 0; i < posts.length; i++) { if (posts[i].slug === slug) { existing = i; break; } } var post = { id: slug, slug: slug, title: title, excerpt: excerpt, date: date, tags: tags, content: content, createdAt: new Date().toISOString() }; if (existing >= 0) { posts[existing] = Object.assign({}, posts[existing], post); setStatus('Dispatch updated. Deploy the JSON to push changes live.', 'success'); } else { posts.unshift(post); setStatus('Dispatch published to local storage. Export and deploy to go live.', 'success'); } savePosts(posts); renderManageList(); clearForm(); }); } function clearForm() { if (titleInput) titleInput.value = ''; if (slugInput) slugInput.value = ''; if (excerptInput) excerptInput.value = ''; if (tagsInput) tagsInput.value = ''; if (contentEl) contentEl.innerHTML = ''; if (dateInput) dateInput.value = new Date().toISOString().split('T')[0]; } // Preview if (previewBtn) { previewBtn.addEventListener('click', function() { var title = titleInput ? titleInput.value.trim() : 'Untitled Dispatch'; var date = dateInput ? dateInput.value : ''; var tags = tagsInput ? tagsInput.value.split(',').map(function(t) { return t.trim(); }).filter(Boolean) : []; var content = contentEl ? contentEl.innerHTML : ''; var tagHtml = tags.map(function(t) { return '' + t + ''; }).join(''); if (previewCont) { previewCont.innerHTML = '
' + '' + formatDate(date) + '' + (tagHtml ? '
' + tagHtml + '
' : '') + '
' + '

' + title + '

' + '
' + content + '
'; } if (previewPanel) { previewPanel.style.display = ''; previewPanel.scrollIntoView({ behavior: 'smooth' }); } }); } if (closePreview) { closePreview.addEventListener('click', function() { if (previewPanel) previewPanel.style.display = 'none'; }); } // Manage list function renderManageList() { if (!manageList) return; var posts = loadPosts(); if (posts.length === 0) { manageList.innerHTML = '

No dispatches on record.

'; return; } manageList.innerHTML = ''; posts.forEach(function(post) { var item = document.createElement('div'); item.className = 'manage-item'; item.innerHTML = '' + post.title + '' + '' + formatDate(post.date) + '' + '
' + '' + '' + '
'; (function(slug) { item.querySelector('.edit-btn').addEventListener('click', function() { editPost(slug); }); item.querySelector('.delete-btn').addEventListener('click', function() { deletePost(slug); }); })(post.slug); manageList.appendChild(item); }); } function editPost(slug) { var posts = loadPosts(); var post = null; for (var i = 0; i < posts.length; i++) { if (posts[i].slug === slug) { post = posts[i]; break; } } if (!post) return; if (titleInput) titleInput.value = post.title; if (slugInput) slugInput.value = post.slug; if (excerptInput) excerptInput.value = post.excerpt || ''; if (dateInput) dateInput.value = post.date || ''; if (tagsInput) tagsInput.value = (post.tags || []).join(', '); if (contentEl) contentEl.innerHTML = post.content || ''; window.scrollTo({ top: 0, behavior: 'smooth' }); setStatus('Editing: "' + post.title + '" — republish to save changes.', ''); } function deletePost(slug) { if (!confirm('Delete this dispatch permanently? The Matriarch does not forgive waste.')) return; var posts = loadPosts().filter(function(p) { return p.slug !== slug; }); savePosts(posts); renderManageList(); setStatus('Dispatch deleted.', 'success'); } // Export if (exportBtn) { exportBtn.addEventListener('click', function() { var posts = loadPosts(); var json = JSON.stringify(posts, null, 2); var blob = new Blob([json], { type: 'application/json' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'posts.json'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); setStatus('posts.json exported. Replace the file in your project and redeploy.', 'success'); }); } // Clear all if (clearAllBtn) { clearAllBtn.addEventListener('click', function() { if (!confirm('Purge ALL dispatches from local storage? This cannot be undone.')) return; savePosts([]); renderManageList(); setStatus('All dispatches purged from local storage.', 'success'); }); } // Init renderManageList(); })(); *|*