`mockups/069-peaceful-protest.html`

74 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>peaceful-protest-poster — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&amp;family=Source+Sans+Pro:wght@400;600&amp;display=swap">
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Source Sans Pro', sans-serif; background: #fbf6e9; color: #1a1a1a; }
    body { display: flex; flex-direction: column; }
    header { position: fixed; top: 0; left: 0; right: 0; height: 60px; background: #1a1a1a; display: flex; align-items: center; padding: 0 24px; }
    header h1 { font-family: 'Bebas Neue', cursive; font-size: 24px; margin: 0; color: #fcd13e; }
    header .project-picker { margin-left: auto; padding: 8px 16px; background: #3a3a3a; border-radius: 4px; color: #fbf6e9; }
    header .status { margin-left: 16px; padding: 4px 8px; background: #a83232; color: #fbf6e9; border-radius: 4px; font-size: 12px; }
    main { display: flex; flex: 1; margin-top: 60px; }
    .left-pane { width: 40%; padding: 24px; overflow-y: auto; }
    .chat-log { display: flex; flex-direction: column; gap: 12px; }
    .chat-message { padding: 12px 16px; border-radius: 8px; background: #fcd13e; color: #1a1a1a; max-width: 70%; }
    .chat-message.user { align-self: flex-end; background: #a83232; color: #fbf6e9; }
    .chat-input { margin-top: 24px; display: flex; }
    .chat-input input { flex: 1; padding: 12px; font-size: 14px; }
    .chat-input button { padding: 12px 24px; background: #1a1a1a; color: #fbf6e9; border: none; border-radius: 4px; margin-left: 8px; }
    .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
    .panel { background: #fbf6e9; border: 2px solid #3a3a3a; padding: 24px; }
    .panel h2 { font-family: 'Bebas Neue', cursive; font-size: 18px; margin: 0 0 16px; color: #a83232; }
    .panel-content { font-size: 14px; line-height: 1.5; }
    .panel-content::before { content: "“”; font-size: 24px; }
    .panel-content::after { content: "”"; }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN STUDIO</h1>
    <select class="project-picker">
      <option>HORMUZ 2024</option>
      <option>ECHOES OF JUSTICE</option>
      <option>RED LINE REBELLION</option>
    </select>
    <span class="status">IDLE</span>
  </header>
  <main>
    <div class="left-pane">
      <div class="chat-log">
        <div class="chat-message user">/run-topic: climate justice</div>
        <div class="chat-message">SYSTEM: TOPIC "CLIMATE JUSTICE" LOADED. READY TO STAMPEDEN.</div>
        <div class="chat-message user">/stampede: 3</div>
        <div class="chat-message">SYSTEM: STAMPEDEN INITIATED. 3 VIBRANT POSTERS GENERATED. DEMANDS AMPLIFIED.</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="TYPE YOUR DEMAND HERE">
        <button>SEND</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="panel">
        <h2>PREVIEW</h2>
        <div class="panel-content">WE THE PEOPLE STAND UNITED. NO MORE SILENCE. NO MORE COMPROMISE. DEMAND JUSTICE NOW.</div>
      </div>
      <div class="panel">
        <h2>PAPER</h2>
        <div class="panel-content">DRAFT: "THE WALLS OF INJUSTICE WILL FALL. WE DEMAND TRANSPARENCY IN POLICE ACCOUNTABILITY."</div>
      </div>
      <div class="panel">
        <h2>FIGMA</h2>
        <div class="panel-content">LAYER NAME: "PROTEST SIGN 01". STROKE: #a83232. FILL: #fcd13e. TEXT: "NOW IS THE TIME."</div>
      </div>
      <div class="panel">
        <h2>CANVA</h2>
        <div class="panel-content">TEMPLATE: "MARCH POSTER". PLACEHOLDER TEXT: "JOIN THE STAMPEDEN. DEMAND YOUR RIGHTS."</div>
      </div>
    </div>
  </main>
</body>
</html>