`mockups/031-japanese-tofu-shop.html`

182 lines
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=1440, height=900">
    <title>japanese-tofu-shop-sign — Four Horsemen Studio</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap">
    <style>
        body {
            background-color: #fffaf0;
            color: #1a1a1a;
            font-family: 'Noto Sans JP', sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        .container {
            width: 1440px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

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

        header h1 {
            font-family: 'Noto Serif JP', serif;
            font-weight: 700;
            margin: 0;
        }

        .project-picker {
            display: inline-block;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.9em;
        }

        .status {
            font-size: 0.8em;
        }

        .main-content {
            display: flex;
            height: calc(100vh - 60px); /* Adjust as needed */
            margin-top: 20px;
        }

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

        .chat-log {
            height: calc(100% - 40px); /* Adjust for chat input */
            padding-bottom: 10px;
            border-bottom: 1px solid #3a4a2c;
        }

        .chat-message {
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
        }

        .chat-input {
            background-color: #fffaf0;
            border: 1px solid #3a4a2c;
            padding: 10px;
            border-radius: 5px;
            width: 100%;
            box-sizing: border-box;
            margin-top: 10px;
        }

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

        .panel {
            background-color: #e8dcc4;
            padding: 20px;
            border-radius: 5px;
            box-sizing: border-box;
            height: 100%;
        }

        .panel h2 {
            font-family: 'Noto Serif JP', serif;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 15px;
            color: #1a1a1a;
        }

        .panel p {
            font-size: 0.9em;
            color: #3a4a2c;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>四 Horsemen</h1>
            <div class="project-picker">
                <select>
                    <option value="project1">Kitsune's Feast</option>
                    <option value="project2">Sakura Bloom</option>
                    <option value="project3">Stone Lantern</option>
                </select>
            </div>
            <span class="status">idle</span>
        </header>

        <div class="main-content">
            <div class="left-pane">
                <h2>Chat Log</h2>
                <div class="chat-log">
                    <div class="chat-message">
                        <span style="font-weight: bold;">Operator:</span> /run-topic "Gathering of the Elders"
                    </div>
                    <div class="chat-message">
                        <span style="font-weight: bold;">Agent 12:</span>  Acknowledged. Beginning topic assembly.
                    </div>
                    <div class="chat-message">
                        <span style="font-weight: bold;">Operator:</span> /stampede "Ancient Ritual" - priority level 3.
                    </div>
                    <div class="chat-message">
                        <span style="font-weight: bold;">Agent 12:</span> Stampede initiated. Monitoring energy flow.
                    </div>
                    <div class="chat-message">
                        <span style="font-weight: bold;">Agent 17:</span>  Warning: Harmonic resonance unstable. Recommend recalibration.
                    </div>
                </div>
                <div class="chat-input">
                    <input type="text" placeholder="Type message here...">
                </div>
            </div>

            <div class="right-pane">
                <div class="panel">
                    <h2>Preview</h2>
                    <p>A small window to glimpse the emerging form.  A fleeting image, like moonlight on water.  Adjust settings with care.</p>
                </div>
                <div class="panel">
                    <h2>Paper</h2>
                    <p>The raw sketches.  The initial lines.  A record of the genesis, before the refinement.  A reminder of the humble beginnings.</p>
                </div>
                <div class="panel">
                    <h2>Figma</h2>
                    <p>The digital clay.  Where forms are molded and refined.  A collaborative space for the shaping of the visible.</p>
                </div>
                <div class="panel">
                    <h2>Canva</h2>
                    <p>For the final presentation.  The polished facade.  The outward expression of the inner work. A touch of beauty for the world.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>