`data/artifacts/25835bfaba3a/hermes3-8b.html`

130 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Style Showdown</title>
    <style>
        :root {
            --bg: #faf8f4;
            --surface: #ffffff;
            --text: #1c1a17;
            --muted: #9b948a;
            --accent-1: #b0472e;
            --accent-2: #2f4c39;
            --line: 1px solid #ccc;
            --shadow-light: 0 8px 24px rgba(255, 255, 255, .12);
            --shadow-hover: 0 16px 48px rgba(255, 255, 255, .18);
            --ease-out: cubic-bezier(.22, 1, .36, 1);
            --fade-in: 0.7s #{'linear'};
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.5;
        }

        header {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 32px;
            background-color: var(--bg);
        }

        .wordmark {
            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
            color: #000;
            letter-spacing: .15em;
            margin-right: 16px;
        }

        h1 {
            font-size: 50px;
            margin: 0;
        }

        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 24px;
            color: var(--muted);
        }

        button {
            background-color: transparent;
            border: none;
            font-size: 16px;
            cursor: pointer;
            transition: .3s;
        }

        button:hover {
            filter: brightness(90%);
        }

        section {
            padding: 96px;
            background-color: var(--surface);
            box-shadow: var(--shadow-light);
            border-radius: 14px;
        }

        .matchup {
            display: flex;
            justify-content: center;
            gap: 24px;
            align-items: center;
        }

        .swatch {
            width: 260px;
            height: 180px;
            background-size: cover;
            border-radius: 14px;
            box-shadow: var(--shadow-hover);
            transition: .3s;
        }

        .swatch:nth-child(1) { background-image: radial-gradient(circle, #ff6b6b 0%, #f9d8cb 100%); }
        .swatch:nth-child(2) { background-image: linear-gradient(to top right, #eade48, #5ab0a9); }
        .swatch:nth-child(3) { background-image: radial-gradient(circle, #7c4def 0%, #fdeff6 100%); }
        .swatch:nth-child(4) { background-image: linear-gradient(to right top, #e52e71, #d73e48); }
        .swatch:nth-child(5) { background-image: radial-gradient(circle, #c1a8ca 0%, #f3eadb 100%); }
        .swatch:nth-child(6) { background-image: linear-gradient(to top right, #e9f2fb 0%, #d7edft 100%); }
        .swatch:nth-child(7) { background-image: radial-gradient(circle, #aeeeee 0%, #b3fff2 100%); }
        .swatch:nth-child(8) { background-image: linear-gradient(to top right, #ec5e22 0%, #ef6c29 100%); }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: none; }
        }

        .animate-fade-in {
            animation: fadeIn var(--fade-in) both;
        }

    </style>
</head>
<body>

<header>
    <div class="wordmark">DESIGNER WALLCOVERINGS</div>
    <h1>Style Showdown</h1>
</header>

<section id="round-1">
    <div class="matchup animate-fade-in">
        <div class="swatch"></div>
        <div class="swatch"></div>
    </div>
    <!-- Repeat .matchup 3 more times -->
</section>

<!-- Add JS here for interactivity -->

</body>
</html>