`mockups/081-fishing-charter.html`

178 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fishing-charter-board — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter&display=swap">
  <style>
    html { height: 100%; }
    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
      background-color: #0e2a47;
      color: #dcd0a8;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 32px;
      background: linear-gradient(135deg, #0e2a47, #7fb069);
      color: #fdfaf0;
      font-family: 'Special Elite', cursive;
      font-size: 1.8em;
      position: relative;
      z-index: 10;
    }
    header select {
      padding: 8px 12px;
      background: #dcd0a8;
      color: #0e2a47;
      border: none;
      border-radius: 4px;
      font-size: 1em;
      margin-left: 16px;
    }
    header .status {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.9em;
      background: #bf3922;
      color: #fdfaf0;
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      background: #0e2a47;
      display: flex;
      flex-direction: column;
      padding: 24px;
      overflow-y: auto;
    }
    .chat-messages {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 24px;
    }
    .message {
      background: #dcd0a8;
      padding: 12px 16px;
      border-radius: 8px;
      max-width: 80%;
      word-wrap: break-word;
      font-size: 0.95em;
    }
    .message.user {
      align-self: flex-end;
      background: #7fb069;
    }
    .chat-input {
      display: flex;
      gap: 8px;
      input {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 4px;
        background: #dcd0a8;
        color: #0e2a47;
      }
      button {
        padding: 10px 16px;
        background: #bf3922;
        color: #fdfaf0;
        border: none;
        border-radius: 4px;
        font-weight: bold;
      }
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 24px;
      padding: 24px;
      overflow-y: auto;
    }
    .panel {
      background: #fdfaf0;
      border: 2px solid #dcd0a8;
      border-radius: 8px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .panel-header {
      font-family: 'Special Elite', cursive;
      font-size: 1.2em;
      color: #bf3922;
    }
    .panel-body {
      font-size: 0.95em;
      line-height: 1.4;
      color: #0e2a47;
    }
    .panel-body::before {
      content: "• ";
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN STUDIO</span>
    <div>
      <select>
        <option>Project Delta</option>
        <option>Horizon 2025</option>
        <option>Tidal UI</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-messages">
        <div class="message user">Captain's Log: 06:00, anchor raised. /run-topic: 'Morning Catch'</div>
        <div class="message">[System] Topic 'Morning Catch' initiated. Deploying drift net protocols.</div>
        <div class="message user">/stampede: 'Rough Seas' scenario</div>
        <div class="message">[System] Warning: 40lb tuna detected. Adjusting buoyancy parameters.</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type /help for commands">
        <button>Send</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-body">Current mockup: 3D rendered fishing net with biodegradable polymer filaments. Tension at 120% capacity.</div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">Sketches of hull design with hydrodynamic curves. Note: add 2 more anchor points to stern.</div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">Prototype: interactive sonar display. Current issue: false readings during dawn twilight.</div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">Social media template: "Hooked on Design" campaign. Add 3 more fish icons to the collage.</div>
      </div>
    </div>
  </main>
</body>
</html>