`mockups/022-phosphor-terminal.html`

145 lines
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>phosphor-terminal — Four Horsemen Studio</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=JetBrains+Mono:wght@400;700&display=swap">
    <style>
        body {
            background-color: #0a0a0a;
            color: #33ff33;
            font-family: 'VT323', monospace;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            height: 900px;
        }

        .header {
            background-color: #000000;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .brand {
            font-size: 1.5em;
            color: #00aa00;
        }

        .project-picker {
            display: inline-block;
            background-color: #000000;
            color: #33ff33;
            padding: 5px 10px;
            border-radius: 3px;
        }

        .status {
            font-size: 0.8em;
        }

        .main-content {
            display: flex;
            height: 100%;
        }

        .left-pane {
            width: 40%;
            background-color: #000000;
            padding: 20px;
            height: 100%;
            overflow-y: auto;
        }

        .chat-log {
            margin-bottom: 20px;
        }

        .chat-input {
            background-color: #000000;
            color: #33ff33;
            padding: 10px;
            border: none;
            width: 100%;
            box-sizing: border-box;
        }

        .right-pane {
            width: 60%;
            background-color: #000000;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
            height: 100%;
        }

        .panel {
            background-color: #005f00;
            padding: 20px;
            border-radius: 5px;
            color: #33ff33;
        }

        .panel h3 {
            font-size: 1.2em;
            margin-top: 0;
            margin-bottom: 10px;
        }

        .panel p {
            font-family: 'JetBrains Mono', monospace;
            line-height: 1.4;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="brand">HORMUZ</div>
        <div class="project-picker">
            <select>
                <option>Project Chimera</option>
                <option>Operation Nightingale</option>
                <option>Genesis Protocol</option>
            </select>
        </div>
        <div class="status">idle</div>
    </div>

    <div class="main-content">
        <div class="left-pane">
            <div class="chat-log">
                <div class="chat-message">C:\&gt; /run-topic "Deep Dive: Structural Integrity of the Xylo-Resonance Field"</div>
                <div class="chat-message">Daemon: Topic initiated. Monitoring parameters.</div>
                <div class="chat-message">C:\&gt; /stampede "Optimize resource allocation for Phase 3 deployment."</div>
                <div class="chat-message">Daemon: Stampede protocol engaged. Prioritizing core functions.</div>
                <div class="chat-message">C:\&gt; Query: Current entropy levels in Sector Gamma-7?</div>
                <div class="chat-message">Daemon: Entropy levels at 0.78. Within acceptable thresholds.</div>
            </div>
            <input type="text" class="chat-input" placeholder="C:\&gt;">
        </div>

        <div class="right-pane">
            <div class="panel">
                <h3>Preview</h3>
                <p>Initiating spectral analysis... Awaiting rendering directives from the Core. Expect visual artifacts. Recalibrating display parameters.</p>
            </div>
            <div class="panel">
                <h3>Paper</h3>
                <p>Accessing archival documentation. Querying for "Project Nightingale - Contingency Protocols." Correlating data with known anomalies. Outputting to temporal log.</p>
            </div>
            <div class="panel">
                <h3>Figma</h3>
                <p>Synchronizing design matrix. Detecting inconsistencies in layer hierarchy. Reconciling with established nomenclature. Commencing automated correction sequence.</p>
            </div>
            <div class="panel">
                <h3>Canva</h3>
                <p>Analyzing template coherence. Identifying potential aesthetic deviations. Flagging for review by Lead Art Director. Generating anomaly report.</p>
            </div>
        </div>
    </div>
</body>
</html>