`mockups/072-candy-shop.html`

187 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>candy-shop-window — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Inter:wght@400;600&display=swap">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Inter', sans-serif;
      background-color: #fff0f5;
      color: #1a1a1a;
      overflow-x: hidden;
    }
    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 40px;
      background: #ff80ab;
      color: #fff0f5;
      font-family: 'Bungee Outline', cursive;
      font-size: 2rem;
      position: relative;
      z-index: 1000;
    }
    header select {
      padding: 8px 12px;
      margin-left: 20px;
      background: #fff0f5;
      color: #1a1a1a;
      border: 2px solid #ffd54f;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
    }
    header .status {
      padding: 6px 12px;
      border-radius: 20px;
      background: #7fffd4;
      color: #1a1a1a;
      font-size: 0.8rem;
    }
    main {
      display: flex;
      flex: 1;
      overflow: auto;
    }
    .left-pane {
      width: 40%;
      padding: 40px;
      background: #fff0f5;
      border-right: 2px solid #ffd54f;
      display: flex;
      flex-direction: column;
    }
    .chat-log {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 20px;
    }
    .chat-message {
      margin: 12px 0;
    }
    .chat-message.user {
      text-align: right;
    }
    .chat-message.system {
      text-align: left;
    }
    .chat-input {
      display: flex;
      border: 2px solid #ff80ab;
      border-radius: 24px;
      padding: 12px;
      background: #fff0f5;
      font-size: 1rem;
    }
    .chat-input input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-family: 'Inter', sans-serif;
    }
    .chat-input button {
      background: none;
      border: none;
      color: #ff80ab;
      font-size: 1.2rem;
      cursor: pointer;
    }
    .right-pane {
      width: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 20px;
      padding: 40px;
    }
    .panel {
      background: #fff0f5;
      border: 2px solid #ffd54f;
      border-radius: 16px;
      padding: 24px;
      display: flex;
      flex-direction: column;
    }
    .panel-header {
      font-family: 'Bungee Outline', cursive;
      font-size: 1.5rem;
      color: #ff80ab;
      margin-bottom: 16px;
    }
    .panel-body {
      font-size: 1rem;
      line-height: 1.6;
    }
    .panel-body code {
      background: #7fffd4;
      padding: 2px 6px;
      border-radius: 6px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN STUDIO</span>
    <div>
      <select>
        <option>Rainbow Marshmallows</option>
        <option>Gumball Galaxy</option>
        <option>Jawbreaker Jamboree</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <main>
    <div class="left-pane">
      <div class="chat-log">
        <div class="chat-message user">/run-topic: Candy Shop Carnival</div>
        <div class="chat-message system">**Agent:** Alright, let's throw a carnival! 🎪 We'll need cotton candy clouds, ticket booths with jawbreaker prizes, and a rollercoaster made of licorice.</div>
        <div class="chat-message user">/stampede: Gumball Explosion</div>
        <div class="chat-message system">**Agent:** Warning! Gumball machine overload detected. Initiating rainbow-colored gum ball tsunami. 🌈 Expect 10,000 gumballs per second. (Please wear a helmet.)</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type a command...">
        <button>🪄</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-body">
          A shimmering wrapper of rainbow stripes, with a 'Taste the Rainbow' logo. Inside: a single, perfectly round gum ball, glowing with neon hues. (Available in 1000+ flavors, including 'Grandma's Secret Recipe.')
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">
          Sketches of candy wrappers in a notebook. Notes: "Use more glitter," "Make the 'Jawbreaker' font bolder," "Add a 'limited edition' hologram sticker." (Current page: 42 of 1000.)
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">
          Design prototype: A candy shop interface with a 'Buy Now' button that changes color every 2 seconds. Prototype includes a 3D model of a gumball machine with a 'Click to Pop' animation.
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">
          Template: 'Gumball Explosion' social media post. Features a 3D render of gumballs bursting from a machine, with text: "Two for a quarter! 🎉" (Includes 100+ emoji stickers and 50 filter options.)
        </div>
      </div>
    </div>
  </main>
</body>
</html>