`mockups/037-polish-poster-1960.html`

211 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>polish-poster-school — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Inter:wght@400;600&display=swap">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background-color: #1a1a1a;
      color: #fdfaf3;
      font-family: 'Inter', sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }
    header {
      background: linear-gradient(90deg, #ff4081, #00bcd4);
      color: #1a1a1a;
      padding: 16px 32px;
      font-family: 'Bungee Inline', cursive;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 10;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    header h1 {
      font-size: 24px;
      text-shadow: 1px 1px 2px #000;
    }
    .project-picker {
      position: relative;
      margin: 0 20px;
    }
    .project-picker select {
      background: #fdfaf3;
      color: #1a1a1a;
      padding: 8px 12px;
      border: 2px solid #ffd700;
      border-radius: 4px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0L10 3L0 6z' fill='%231a1a1a'/></svg>");
      background-repeat: no-repeat;
      background-position: right 8px center;
    }
    .status-indicator {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      background: #ffd700;
      color: #1a1a1a;
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      background: #00bcd4;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .chat-log {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background: #1a1a1a;
      color: #ff4081;
      font-family: 'Inter', sans-serif;
    }
    .chat-log .message {
      margin: 10px 0;
      padding: 10px;
      background: #fdfaf3;
      border-left: 4px solid #ff4081;
      border-radius: 6px;
      max-width: 70%;
    }
    .chat-input {
      padding: 16px;
      display: flex;
      gap: 10px;
      background: #ff4081;
      color: #1a1a1a;
    }
    .chat-input input {
      flex: 1;
      padding: 10px;
      border: 2px solid #00bcd4;
      border-radius: 6px;
      font-size: 14px;
    }
    .chat-input button {
      background: #00bcd4;
      color: #1a1a1a;
      border: none;
      padding: 10px 16px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 16px;
      padding: 20px;
      background: #ff4081;
      color: #1a1a1a;
    }
    .panel {
      background: #fdfaf3;
      padding: 20px;
      border: 2px solid #ffd700;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
    }
    .panel h2 {
      font-family: 'Bungee Inline', cursive;
      margin-bottom: 12px;
      color: #00bcd4;
    }
    .panel .content {
      font-size: 14px;
      line-height: 1.6;
      color: #1a1a1a;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .panel .content::before {
      content: "Папирьё: 1920-х, шрифты в бегстве, краска кричит.";
      display: block;
      margin-bottom: 10px;
      color: #00bcd4;
      font-weight: bold;
    }
    .panel .content::after {
      content: "Смех в ритме танцующих теней. Красный солнце падает на золотые зерна.";
      display: block;
      color: #ffd700;
    }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN / HORMUZ</h1>
    <div class="project-picker">
      <select>
        <option>Project Agitprop</option>
        <option>Stampede 2023</option>
        <option>Cyanide Canvases</option>
      </select>
    </div>
    <div class="status-indicator">idle</div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-log">
        <div class="message">/run-topic "Soviet propaganda posters"</div>
        <div class="message">Initiating stampede of 1950s agitprop motifs. Expect 3D text and hammer-sickle gradients.</div>
        <div class="message">/stampede "Neon agitprop"</div>
        <div class="message">Injecting 1980s synthwave into the design matrix. Warning: excessive glitter.</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">
        <h2>Preview</h2>
        <div class="content">
          <p>Красный солнце падает на золотые зерна. Тени танцуют в ритме бархатного ветра.</p>
          <p>Граффити на стенах хрипит, как старый фильм. Бархатные тени, как танцующие тени.</p>
        </div>
      </div>
      <div class="panel">
        <h2>Paper</h2>
        <div class="content">
          <p>Папирьё: 1920-х, шрифты в бегстве, краска кричит.</p>
          <p>Красный солнце, как в кинотеатре 1920-х. Краска кричит, как старый фильм.</p>
        </div>
      </div>
      <div class="panel">
        <h2>Figma</h2>
        <div class="content">
          <p>3D text, как из 1950-х. Граффити на стенах, как в кинотеатре 1980-х.</p>
          <p>Голубой свет, как в кинотеатре 1980-х. Красный солнце, как в кинотеатре 1920-х.</p>
        </div>
      </div>
      <div class="panel">
        <h2>Canvas</h2>
        <div class="content">
          <p>Красный солнце, как в кинотеатре 1920-х. Граффити на стенах, как в кинотеатре 1980-х.</p>
          <p>Бархатные тени, как танцующие тени. Краска кричит, как старый фильм.</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>