`mockups/079-highway-mile-marker.html`

197 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>highway-mile-marker — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter&display=swap">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
      background-color: #3a4a2c;
      color: #fdfaf0;
      height: 900px;
      width: 1440px;
      display: flex;
      flex-direction: column;
      font-size: 16px;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 40px;
      background-color: #1a1a1a;
      border-bottom: 2px solid #7fb069;
      font-family: 'Bebas Neue', cursive;
      font-size: 28px;
    }
    header select {
      padding: 8px 12px;
      font-size: 16px;
      background-color: #fdfaf0;
      color: #3a4a2c;
      border: 2px solid #fcd13e;
      border-radius: 4px;
      margin-left: 20px;
    }
    header .status {
      font-size: 18px;
      padding: 8px 16px;
      background-color: #7fb069;
      border-radius: 4px;
    }
    .main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      border-right: 2px solid #fcd13e;
      display: flex;
      flex-direction: column;
      padding: 20px;
      overflow-y: auto;
    }
    .chat-log {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }
    .message {
      background-color: #1a1a1a;
      padding: 12px 16px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
    }
    .message.user {
      background-color: #fcd13e;
      color: #3a4a2c;
    }
    .message .timestamp {
      font-size: 12px;
      color: #7fb069;
      margin-bottom: 4px;
    }
    .chat-input {
      display: flex;
      gap: 10px;
    }
    .chat-input input {
      flex: 1;
      padding: 10px;
      font-size: 16px;
      border: 2px solid #fcd13e;
      border-radius: 4px;
      background-color: #1a1a1a;
      color: #fdfaf0;
    }
    .chat-input button {
      padding: 10px 20px;
      background-color: #fcd13e;
      color: #3a4a2c;
      border: none;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 20px;
      padding: 20px;
    }
    .panel {
      background-color: #1a1a1a;
      border: 2px solid #7fb069;
      border-radius: 6px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .panel-header {
      font-family: 'Bebas Neue', cursive;
      font-size: 20px;
      color: #fcd13e;
    }
    .panel-body {
      font-size: 16px;
      color: #fdfaf0;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN STUDIO</span>
    <div>
      <select>
        <option>PROJECT HORMUZ</option>
        <option>PROJECT TIGRIS</option>
        <option>PROJECT ZAGROS</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <div class="main">
    <div class="chat-pane">
      <div class="chat-log">
        <div class="message user">
          <div class="timestamp">MILE 412 • 14:32</div>
          <div>/run-topic "ancient trade routes"</div>
        </div>
        <div class="message">
          <div class="timestamp">MILE 412 • 14:33</div>
          <div>TOPIC: ANCIENT TRADE ROUTES • STATUS: INITIATED</div>
        </div>
        <div class="message user">
          <div class="timestamp">MILE 412 • 14:35</div>
          <div>/stampede generate 3</div>
        </div>
        <div class="message">
          <div class="timestamp">MILE 412 • 14:36</div>
          <div>STAMPEDE: 3 UNITS DEPLOYED • NEXT CHECKPOINT: MILE 428</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="TYPE /COMMAND OR MESSAGE">
        <button>SEND</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <div class="panel-header">PREVIEW</div>
        <div class="panel-body">
          CURRENTLY UNASSIGNED. NEXT EXIT: 28. ROAD CONDITIONS: CLEAR. LAST CHECKPOINT: MILE 412.
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">PAPER</div>
        <div class="panel-body">
          LAST CHECKPOINT AT MILE 412. NEXT REST STOP: 28. ROAD CLOSED AHEAD. USE ALTERNATE ROUTE.
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">FIGMA</div>
        <div class="panel-body">
          BLUEPRINTS FOR MILE 428. STAMPEDE PATHS MARKED. CONSTRUCTION ZONES: 2.5 MILES AHEAD.
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">CANVA</div>
        <div class="panel-body">
          VISUALS FOR EXIT 14. ROAD MAPS UPDATED. TRAFFIC LIGHTS: RED AT MILE 415. GREEN AT 420.
        </div>
      </div>
    </div>
  </div>
</body>
</html>