`mockups/014-newspaper-front.html`

208 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>newspaper-front-page — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Serif+Pro:wght@400&display=swap">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 1440px;
      height: 900px;
      background: #fdfaf3;
      font-family: 'Source Serif Pro', serif;
      color: #1a1a1a;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    header {
      height: 60px;
      background: #1a1a1a;
      color: #fdfaf3;
      display: flex;
      align-items: center;
      padding: 0 20px;
      font-family: 'Playfair Display', serif;
      font-size: 24px;
      position: relative;
    }
    header select {
      margin-left: 20px;
      padding: 5px 10px;
      background: #222;
      color: #fff;
      border: none;
      font-size: 14px;
    }
    header .status {
      position: absolute;
      right: 20px;
      padding: 4px 12px;
      background: #a83232;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }
    main {
      flex: 1;
      display: flex;
      overflow: hidden;
    }
    .left-pane {
      width: 40%;
      background: #fdfaf3;
      border-right: 1px solid #666;
      display: flex;
      flex-direction: column;
    }
    .chat-log {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      font-size: 14px;
    }
    .chat-message {
      margin-bottom: 12px;
    }
    .chat-message.user {
      text-align: right;
    }
    .chat-message.system {
      text-align: left;
    }
    .chat-message .timestamp {
      color: #666;
      font-size: 10px;
      margin-right: 8px;
    }
    .chat-input {
      border-top: 1px solid #666;
      padding: 12px;
      display: flex;
    }
    .chat-input input {
      flex: 1;
      padding: 6px;
      font-size: 14px;
      border: none;
      outline: none;
    }
    .chat-input button {
      padding: 6px 12px;
      background: #1a1a1a;
      color: #fff;
      border: none;
      font-size: 12px;
      cursor: pointer;
    }
    .right-pane {
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 12px;
      padding: 16px;
    }
    .panel {
      background: #fff;
      border: 1px solid #666;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .panel-header {
      padding: 12px;
      background: #222;
      color: #fff;
      font-family: 'Playfair Display', serif;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .panel-body {
      flex: 1;
      padding: 16px;
      font-size: 14px;
      line-height: 1.5;
      color: #222;
    }
    .panel-body h3 {
      margin: 0 0 8px;
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      color: #a83232;
    }
  </style>
</head>
<body>
  <header>
    FOUR HORSEMEN STUDIO
    <select>
      <option>Project Hail Mary</option>
      <option>Project Titan</option>
      <option>Project Echo</option>
    </select>
    <div class="status">idle</div>
  </header>
  <main>
    <div class="left-pane">
      <div class="chat-log">
        <div class="chat-message user">
          <span class="timestamp">14:32</span>
          <strong>/run-topic</strong> "Neon Cyberpunk Aesthetic"
        </div>
        <div class="chat-message system">
          <span class="timestamp">14:33</span>
          <em>Agent:</em> Initializing generative workflow for "Neon Cyberpunk Aesthetic"...
        </div>
        <div class="chat-message user">
          <span class="timestamp">14:34</span>
          <strong>/stampede</strong> "Generate 3 variants"
        </div>
        <div class="chat-message system">
          <span class="timestamp">14:35</span>
          <em>Agent:</em> Processing 3 variant requests. Estimated completion: 1 minute 23 seconds.
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type a command or message...">
        <button>Send</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-body">
          <h3>BREAKING: AI Takes Over Design Workflow</h3>
          <p>Four Horsemen's new agent system has completed its first full-cycle design task, generating a complete branding package in under 90 seconds. The prototype features a bold neon color palette and glitch-art typography.</p>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">
          <h3>AGENT SYSTEM UPDATE</h3>
          <p><em>Byline:</em> <strong>Marla Voss</strong> | <em>Dateline:</em> 04/05/2024</p>
          <p>The latest iteration of our design orchestrator has passed its first stress test, handling 12 concurrent design requests across multiple platforms. The system's ability to synthesize user input into coherent design outputs is nothing short of revolutionary.</p>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">
          <h3>PROTOTYPE FRAMEWORK</h3>
          <p>Current mockup includes: 3D neon text components, responsive grid layouts, and AI-generated vector illustrations. The prototype is being stress-tested in a closed environment with 24/7 monitoring.</p>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">
          <h3>USER-FACING TOOLS</h3>
          <p>Integration with Canva's API is in progress. The system will allow users to generate and export design assets directly from the orchestrator interface, with real-time collaboration features enabled by default.</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>