`data/artifacts/193230252710/hermes3-8b.html`

214 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Luxury Wallcovering Mood Board Generator</title>
  <style>
    :root {
      --bg: #faf8f4;
      --surface: #ffffff;
      --text: #1c1a17;
      --muted: #9b948a;
      --accent-primary: #b0472e;
      --accent-secondary: #2f4c39;
      --line: 1px solid var(--text);
      --shadow-card: 0 8px 24px rgba(0, 0, 0, .12);
      --shadow-hover: 0 16px 48px rgba(0, 0, 0, .18);
      --glow: 0 0 24px var(--accent-primary) at 35%;
      --ease-in-out-quart: cubic-bezier(.22, 1, .36, 1);
    }

    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      margin: 0;
      padding: 64px;
    }

    header {
      display: flex;
      align-items: center;
      margin-bottom: 32px;
    }

    .wordmark {
      font-family: 'Cormorant Garamond', serif;
      font-size: 48px;
      letter-spacing: .18em;
      margin-right: 24px;
    }

    h1 {
      font-weight: normal;
      margin: 0;
    }

    h2 {
      font-family: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
      font-size: 42px;
      letter-spacing: .15em;
      margin: 32px 0 16px;
    }

    section {
      background-color: var(--surface);
      border-radius: 14px;
      box-shadow: var(--shadow-card);
      display: grid;
      gap: 24px;
      padding: 32px;
    }

    .pattern {
      background-size: cover;
      border-radius: 8px;
      box-shadow: var(--glow);
      cursor: pointer;
      display: flex;
      gap: 16px;
      justify-content: space-between;
      min-height: 120px;
      padding: 0 24px;
    }

    .pattern:hover {
      box-shadow: var(--shadow-hover);
    }

    .color-chip {
      align-items: center;
      background-color: var(--accent-primary);
      border-radius: 50%;
      display: flex;
      height: 40px;
      justify-content: center;
      min-width: 40px;
      font-weight: bold;
    }

    .label {
      color: var(--surface);
      margin-left: 8px;
      white-space: nowrap;
    }
  </style>
</head>
<body>
<header>
  <div class="wordmark">DESIGNER WALLCOVERINGS</div>
  <h1>Luxury Wallcovering Mood Board Generator</h1>
</header>

<div class="controls">
  <label for="theme">Select a theme:</label>
  <select id="theme">
    <option value="classic">Classic</option>
    <option value="coastal">Coastal</option>
    <option value="moody">Moody</option>
    <option value="botanical">Botanical</option>
  </select>

  <button id="regenerate" class="btn">Regenerate</button>
</div>

<div class="mood-board">
  <section>
    <h2>Hero Pattern</h2>
    <div class="pattern" style="--hero-bg: #8a8578;"></div>
  </section>

  <section>
    <h2>Color Palette</h2>
    <div class="pattern">
      <div class="color-chip"></div><span class="label muted">Muted</span>
    </div>
    <div class="pattern">
      <div class="color-chip" style="--accent-bg: #c9a961;"></div><span class="label accent-primary">Accent 1</span>
    </div>
    <div class="pattern">
      <div class="color-chip" style="--text-bg: #7d6a45;"></div><span class="label text">Text</span>
    </div>
  </section>

  <section>
    <h2>Type Pairing</h2>
    <div class="pattern">
      <div class="color-chip"></div><span class="label display">Display Serif</span>
    </div>
    <div class="pattern">
      <div class="color-chip" style="--body-bg: #f5f2ea;"></div><span class="label body">Body Sans</span>
    </div>
  </section>

  <section>
    <h2>Texture Tile</h2>
    <div class="pattern" style="--tile-bg: #d3cdbe;"></div>
  </section>
</div>

<script>
  const themes = {
    classic: {heroBg: "#f5f2ea", colorChips: ["#a58db8", "#c9a961", "#7d6a45"], textBg: "#f5f2ea"},
    coastal: {heroBg: "#f0fff4", colorChips: ["#87cefa", "#20b2aa", "#008000"], textBg: "#f0fff4"}, 
    moody: {heroBg: "#8a8578", colorChips: ["#d8b3da", "#c9a961", "#7d6a45"], textBg: "#17171c"},
    botanical: {heroBg: "#f5f2ea", colorChips: ["#87d37d", "#e0e865", "#ffd700"], textBg: "#8a8578"}
  };

  const moodBoard = document.querySelector(".mood-board");

  function generateMoodBoard(theme) {
    const heroPattern = `linear-gradient(45deg, var(--hero-bg), var(--hero-bg) 25%, transparent 25%), 
                         linear-gradient(-45deg, var(--hero-bg), var(--hero-bg) 25%, transparent 25%),
                         linear-gradient(45deg, transparent 75%, var(--hero-bg) 75%),
                         linear-gradient(-45deg, transparent 75%, var(--hero-bg) 75%)`;
    
    const colorChips = themes[theme].colorChips.map((bg, index) => `
      <div class="pattern">
        <div class="color-chip" style="--background-color: ${bg}"></div><span class="label">
          ${index === 0 ? "Muted" : index === 1 ? "Accent 1" : "Text"}
        </span>
      </div>`);

    const bodyBg = themes[theme].textBg;

    moodBoard.innerHTML = `
      <section>
        <h2>Hero Pattern</h2>
        <div class="pattern" style="--hero-bg: ${themes[theme].heroBg}; background-size: cover; background-origin: content;"></div>
      </section>

      <section>
        ${colorChips.join("\n")}
      </section>

      <section>
        <h2>Type Pairing</h2>
        <div class="pattern">
          <div class="color-chip" style="--body-bg: ${bodyBg};"></div><span class="label display">Display Serif</span>
        </div>
        <div class="pattern">
          <div class="color-chip" style="--background-color: #ffffff;"></div><span class="label body">Body Sans</span>
        </div>
      </section>

      <section>
        <h2>Texture Tile</h2>
        <div class="pattern" style="--tile-bg: #d3cdbe; background-size: cover; background-origin: content;"></div>
      </section>
    `;

    document.body.style.backgroundColor = themes[theme].bg;
  }

  const themeSelect = document.querySelector("#theme");
  const regenerateButton = document.querySelector("#regenerate");

  themeSelect.addEventListener("change", () => generateMoodBoard(themeSelect.value));
  regenerateButton.addEventListener("click", () => generateMoodBoard(themeSelect.value));

  generateMoodBoard(themeSelect.value);
</script>
</body>
</html>