`data/artifacts/15fb25164101/qwen25-7b.html`

157 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop by Color</title>
<style>
:root {
  --bg: #f7efe6;
  --ink: #3a2c22;
  --accent: #c65f38;
  --line: 1px solid rgba(0,0,0,.12);
  --shadow: 0 8px 24px rgba(0,0,0,.12), hover 0 16px 48px rgba(0,0,0,.18), glow = 0 0 24px var(--accent)@35%;
  --ease: cubic-bezier(.22,1,.36,1);
}

body {
  font-family: 'Didot', serif;
  background-color: var(--bg);
  color: var(--ink);
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg);
  color: var(--ink);
  padding: 24px;
}

header .wordmark {
  font-family: 'Didot', serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  max-width: 220px;
}

header nav {
  display: flex;
  gap: 16px;
}

section {
  padding-top: 96px;
  display: grid;
  place-items: center;
  gap: 32px;
}

.color-wheel {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--bg);
  position: relative;
}

.patterns {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 16px;
}

.patterns img {
  width: 100%;
  border-radius: 14px;
}

.share-bar {
  background-color: var(--bg);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
</head>
<body>
<header>
  <div class="wordmark">DESIGNER WALLCOVERINGS</div>
  <nav>
    <button>SHARE</button>
  </nav>
</header>

<section>
  <div class="color-wheel">
    <canvas id="colorWheel"></canvas>
    <div class="patterns" id="patterns">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAoASsrFzs+rQMAAAAAElFTkSuQmCC" alt="Pattern 1">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAoASsrFzs+rQMAAAAAElFTkSuQmCC" alt="Pattern 2">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAoASsrFzs+rQMAAAAAElFTkSuQmCC" alt="Pattern 3">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAoASsrFzs+rQMAAAAAElFTkSuQmCC" alt="Pattern 4">
    </div>
  </div>
</section>

<script>
const colorWheel = document.getElementById('colorWheel');
const patterns = document.getElementById('patterns');

let hue = 0;
const colors = ['#c65f38', '#e0a458'];

function drawColorWheel() {
  const ctx = colorWheel.getContext('2d');
  ctx.clearRect(0, 0, colorWheel.width, colorWheel.height);
  ctx.beginPath();
  ctx.arc(colorWheel.width / 2, colorWheel.height / 2, Math.min(colorWheel.width / 2 - 16, colorWheel.height / 2 - 16), 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.strokeStyle = 'var(--line)';
  ctx.stroke();
  ctx.fillStyle = `hsl(${hue}, 85%, 40%)`;
  ctx.fill();
}

function updatePatterns() {
  const patternsHTML = colors.map(color => `
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAoASsrFzs+rQMAAAAAElFTkSuQmCC" alt="Pattern">
  `).join('');
  patterns.innerHTML = patternsHTML;
}

function handleWheelDrag(event) {
  const rect = colorWheel.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  if (x >= rect.width / 2 && y >= rect.height / 2) {
    hue = Math.round((360 * ((x - rect.width / 4) / (rect.width / 2))) % 360);
  }

  drawColorWheel();
}

colorWheel.addEventListener('mousedown', handleWheelDrag);
colorWheel.addEventListener('touchstart', handleWheelDrag);

drawColorWheel();
updatePatterns();

setInterval(() => {
  hue = (hue + 1) % 360;
  drawColorWheel();
}, 500);
</script>
</body>
</html>