`mockups/077-truck-stop-diner.html`

193 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>truck-stop-diner — 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: #fbf6e9;
      color: #1a1a1a;
      height: 100%;
      width: 100%;
      overflow-x: hidden;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 3rem;
      background: #fbf6e9;
      border-bottom: 2px solid #a83232;
      font-family: 'Bungee Inline', cursive;
      position: relative;
    }
    header h1 {
      font-size: 2.2rem;
      margin: 0;
      color: #0e2a47;
    }
    .project-picker, .status {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1rem;
    }
    .project-picker {
      padding: 0.5rem 1rem;
      background: #1a1a1a;
      color: #fcd13e;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 1rem;
    }
    .status {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fcd13e;
      margin-left: 1rem;
    }
    .container {
      display: flex;
      height: calc(100% - 60px);
    }
    .chat-pane {
      width: 40%;
      padding: 2rem;
      background: #1a1a1a;
      color: #fbf6e9;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    .chat-messages {
      flex: 1;
      margin-bottom: 1rem;
    }
    .message {
      margin: 1rem 0;
      padding: 1rem;
      background: #a83232;
      border-radius: 6px;
      max-width: 70%;
      word-wrap: break-word;
    }
    .message.user {
      background: #fcd13e;
      align-self: flex-end;
    }
    .chat-input {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }
    .chat-input input {
      flex: 1;
      padding: 0.75rem;
      border: none;
      border-radius: 4px;
      background: #fbf6e9;
      color: #1a1a1a;
    }
    .chat-input button {
      padding: 0.75rem 1.5rem;
      background: #0e2a47;
      color: #fcd13e;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      padding: 2rem;
    }
    .panel {
      background: #fbf6e9;
      border: 2px solid #a83232;
      border-radius: 6px;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
    }
    .panel-header {
      font-family: 'Bungee Inline', cursive;
      font-size: 1.4rem;
      color: #0e2a47;
      margin-bottom: 1rem;
    }
    .panel-body {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #1a1a1a;
    }
    .panel-body::before {
      content: " ";
      display: block;
      height: 10px;
      background: #fcd13e;
      margin-bottom: 1rem;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN</h1>
    <div>
      <select class="project-picker">
        <option>Midnight Neon</option>
        <option>Steel Dust</option>
        <option>Highway Echoes</option>
      </select>
      <div class="status"></div>
    </div>
  </header>
  <div class="container">
    <div class="chat-pane">
      <div class="chat-messages">
        <div class="message user">/run-topic "neon signage"</div>
        <div class="message">Alright, let's light up the road. Got a flicker in the corner of your eye? That's the sign.</div>
        <div class="message user">/stampede "truck stop menu"</div>
        <div class="message">Sausage, eggs, and a side of stories. The waitress says the coffee's strong enough to wake the dead.</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Order up...">
        <button>Press to Send</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-body">
          The neon sign flickers as the waitress scribbles 'Specials' on the chalkboard. Today's feature: 'Double Biscuit Stack with Syrup.'
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">
          The waitress drops a napkin with a hastily drawn map to the back parking lot. 'Where you headed?' she asks, eyes on the coffee cup.
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">
          The waitress's tattoo of a truck glows under the diner's lights. 'This is the route,' she says, pointing to the ink.
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">
          The waitress's apron is covered in doodles of burgers and pie. 'This is the menu,' she says, handing over a napkin with a smudge of ketchup.
        </div>
      </div>
    </div>
  </div>
</body>
</html>