`mockups/050-circus-broadside.html`

202 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>circus-broadside-1920 — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Source+Sans+Pro:wght@400;600&display=swap">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Source Sans Pro', sans-serif;
      background-color: #fdfaf0;
      color: #1a1a1a;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 40px;
      background: #0a4d3c;
      color: #ffd700;
      font-size: 24px;
      font-weight: 600;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
    }
    header h1 {
      font-family: 'Bungee Inline', cursive;
      font-size: 32px;
      color: #a83232;
    }
    .project-picker, .status {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 16px;
      background: #ffd700;
      color: #0a4d3c;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
    }
    .status {
      background: #a83232;
      color: #fdfaf0;
    }
    main {
      display: flex;
      height: calc(100% - 60px);
      margin-top: 60px;
    }
    .chat-pane {
      width: 40%;
      padding: 40px;
      background: #fdfaf0;
      overflow-y: auto;
      border-right: 2px solid #0a4d3c;
    }
    .chat-log {
      display: flex;
      flex-direction: column;
      gap: 20px;
      height: 100%;
    }
    .message {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .user {
      color: #a83232;
      font-weight: 600;
    }
    .system {
      color: #0a4d3c;
      font-style: italic;
    }
    .input-bar {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }
    .input-bar input {
      flex: 1;
      padding: 10px;
      font-size: 16px;
      border: 2px solid #ffd700;
      border-radius: 4px;
    }
    .input-bar button {
      padding: 10px 20px;
      background: #a83232;
      color: #fdfaf0;
      border: none;
      border-radius: 4px;
      font-weight: 600;
      cursor: pointer;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 20px;
      padding: 40px;
    }
    .panel {
      background: #ffd700;
      color: #0a4d3c;
      border: 2px solid #a83232;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      padding: 20px;
      overflow: hidden;
    }
    .panel h2 {
      font-family: 'Bungee Inline', cursive;
      font-size: 24px;
      margin-bottom: 20px;
      color: #a83232;
    }
    .panel-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      background: #fdfaf0;
      border: 1px solid #0a4d3c;
      padding: 20px;
    }
    .panel-content::before {
      content: '';
      display: block;
      height: 100px;
      width: 100px;
      background: #0a4d3c;
      margin: 0 auto 20px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN</h1>
    <div>
      <div class="project-picker">PROJECT: &nbsp;<span>THE RED HORSE</span></div>
      <div class="status">idle</div>
    </div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-log">
        <div class="message">
          <div class="user">AGENT</div>
          <div class="system">/run-topic "the great stampede of 1920"</div>
        </div>
        <div class="message">
          <div class="user">SYSTEM</div>
          <div class="system">Initiating thematic resonance with circus broadsides of the golden age. Expect clowns, fire, and a very confused elephant.</div>
        </div>
        <div class="message">
          <div class="user">AGENT</div>
          <div class="system">/stampede "velvet ropes" "shattered glass"</div>
        </div>
        <div class="message">
          <div class="user">SYSTEM</div>
          <div class="system">Stampede protocol engaged. Generating chaos with velvet ropes and shattered glass. Proceed with caution, dear user.</div>
        </div>
      </div>
      <div class="input-bar">
        <input type="text" placeholder="type /help for commands">
        <button>SEND</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <h2>PREVIEW</h2>
        <div class="panel-content">A GIGANTIC CIRCUS POSTER IN BOLD REDS AND GOLD, FEATURING A HORSE WITH A HUMAN FACE, STANDING ON A ROLLERCOASTER, WITH THE WORDS "STEP RIGHT UP" IN BUNGEE FONT.</div>
      </div>
      <div class="panel">
        <h2>PAPER</h2>
        <div class="panel-content">ACT ONE: THE ENTRANCE OF THE RED HORSE. THE CROWD GASPS AS THE HORSE, WILD AND UNLEASHED, STOMPED ACROSS THE STAGE, ITS EYES BURNING WITH THE FIRE OF A THOUSAND SUNS.</div>
      </div>
      <div class="panel">
        <h2>FIGMA</h2>
        <div class="panel-content">LAYERED DESIGN WITH A CIRCUS LOGO (A HORSE IN A CAGE), STANDS IN GOLD, AND A BACKDROP OF A STORMY SKY. TEXT: "RIDE THE STORM" IN BUNGEE FONT.</div>
      </div>
      <div class="panel">
        <h2>CANVA</h2>
        <div class="panel-content">A COLLAGE OF A CLOWN SMILING, A TIGER ROARING, AND A FLYING TRAPEZE ARTIST. TEXT: "RIDE THE STORM" IN GOLD, "THE GREAT HORSEMAN" IN RED.</div>
      </div>
    </div>
  </main>
</body>
</html>