`data/artifacts/25835bfaba3a/qwen25-7b.html`

193 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: #f7efe6;
    --ink: #3a2c22;
    --accent: #c65f38;
    --line: 1px solid rgba(0,0,0,.1);
    --shadow: 0 8px 24px rgba(0,0,0,.12), hover 0 16px 48px rgba(0,0,0,.18);
    --ease: cubic-bezier(.22,1,.36,1) both;
}

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: 'Didot', 'Bodoni MT', Georgia, serif;
    margin: 0;
    padding: 96px;
    overflow-x: hidden;
}

header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 48px;
}

header span {
    font-size: 32px;
    line-height: 1.15em;
    letter-spacing: .18em;
    text-transform: uppercase;
}

section {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
    background-color: var(--bg);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform .7s ease, box-shadow .35s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow) 0 16px 48px rgba(0,0,0,.18);
}

.result-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow);
    display: none;
}

.result-card h1 {
    font-size: 38px;
    margin-bottom: 16px;
}

.result-card .winner {
    font-size: 24px;
    color: var(--accent);
}

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

.fade-up-enter-active, .fade-up-leave-active {
    transition: all .7s ease;
}
.fade-up-enter-from, .fade-up-leave-to {
    opacity: 0;
    transform: translateY(28px);
}
</style>
</head>
<body>

<header>
    <span>DESIGNER WALLCOVERINGS</span>
</header>

<section id="bracket">
    <!-- Quarterfinals -->
    <div class="card" onclick="advance('Damask', 'Toile')"><span>Damask</span><span>Toile</span></div>
    <div class="card" onclick="advance('Ikat', 'Chinoiserie')"><span>Ikat</span><span>Chinoiserie</span></div>
    <div class="card" onclick="advance('Art Deco', 'Boho')"><span>Art Deco</span><span>Boho</span></div>
    <div class="card" onclick="advance('Coastal', 'Grandmillennial')"><span>Coastal</span><span>Grandmillennial</span></div>

    <!-- Semifinals -->
    <div id="semifinal1" class="card" style="display: none;"><span id="winner-semifinal1"></span></div>
    <div id="semifinal2" class="card" style="display: none;"><span id="winner-semifinal2"></span></div>

    <!-- Final -->
    <div id="final" class="card" style="display: none;"><span id="winner-final"></span></div>

    <!-- Result Card -->
    <div id="result-card" class="result-card">
        <h1>Champion</h1>
        <p id="champion"></p>
    </div>
</section>

<script>
let damaskWins = 0;
let toileWins = 0;
let ikatWins = 0;
let chinoiserieWins = 0;
let artDecoWins = 0;
let bohoWins = 0;
let coastalWins = 0;
let grandmillennialWins = 0;

function advance(style1, style2) {
    const card1 = document.querySelector(`.card:contains('${style1}')`);
    const card2 = document.querySelector(`.card:contains('${style2}')`);

    if (Math.random() > 0.5) {
        card1.classList.add('fade-up-enter-active');
        setTimeout(() => {
            card1.style.display = 'none';
            if (card1 === document.querySelector('.card:contains(Damask)')) damaskWins++;
            else if (card1 === document.querySelector('.card:contains(Toile)')) toileWins++;
            advanceWinner(style1);
        }, 700);
    } else {
        card2.classList.add('fade-up-enter-active');
        setTimeout(() => {
            card2.style.display = 'none';
            if (card2 === document.querySelector('.card:contains(Ikat)')) ikatWins++;
            else if (card2 === document.querySelector('.card:contains(Chinoiserie)')) chinoiserieWins++;
            advanceWinner(style2);
        }, 700);
    }
}

function advanceWinner(winner) {
    const semifinal1 = document.getElementById('semifinal1');
    const semifinal2 = document.getElementById('semifinal2');

    if (damaskWins > toileWins) {
        semifinal1.textContent = 'Damask';
    } else {
        semifinal1.textContent = 'Toile';
    }

    if (ikatWins > chinoiserieWins) {
        semifinal2.textContent = 'Ikat';
    } else {
        semifinal2.textContent = 'Chinoiserie';
    }

    const finalWinner = document.getElementById('winner-final');
    if (semifinal1.textContent === 'Damask' && semifinal2.textContent === 'Ikat') {
        finalWinner.textContent = 'Damask';
    } else if (semifinal1.textContent === 'Toile' && semifinal2.textContent === 'Ikat') {
        finalWinner.textContent = 'Ikat';
    }

    const resultCard = document.getElementById('result-card');
    resultCard.style.display = 'block';

    setTimeout(() => {
        resultCard.querySelector('#champion').textContent = finalWinner.textContent;
    }, 700);
}

advance('Damask', 'Toile');
</script>

</body>
</html>