← back to Model Arena
data/artifacts/193230252710/hf-qwen-coder-32b.html
195 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mood Board Generator</title>
<style>
:root {
--bg: #faf8f4;
--surface: #ffffff;
--text: #1c1a17;
--muted: #9b948a;
--accent1: #b0472e;
--accent2: #2f4c39;
--line: 1px solid var(--muted);
--shadow: 0 8px 24px rgba(0,0,0,.12);
--hover-shadow: 0 16px 48px rgba(0,0,0,.18);
--glow: 0 0 24px rgba(var(--accent1-rgb), .35);
--ease: cubic-bezier(.22,1,.36,1);
}
body {
margin: 0;
font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
padding-top: 64px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--bg);
z-index: 10;
padding: 24px;
box-shadow: var(--shadow);
}
.wordmark {
font-family: 'Playfair Display', Georgia, serif;
font-size: 67px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text);
margin: 0;
}
main {
width: 1080px;
height: 1350px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
padding: 96px;
}
.card {
background-color: var(--surface);
border-radius: 14px;
box-shadow: var(--shadow);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--hover-shadow);
}
.hero-pattern {
width: 200px;
height: 200px;
background-image: repeating-linear-gradient(45deg, var(--accent1), var(--accent1) 5px, transparent 5px, transparent 10px);
}
.color-chip {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 8px;
box-shadow: inset 0 2px 4px rgba(0,0,0,.1), var(--glow);
}
.color-chip:nth-child(1) { background-color: #c9a961; }
.color-chip:nth-child(2) { background-color: #7d6a45; }
.color-chip:nth-child(3) { background-color: #b0472e; }
.type-pairing {
font-family: 'Playfair Display', Georgia, serif;
font-size: 28px;
line-height: 1.2;
text-align: center;
margin-top: 16px;
color: var(--text);
}
.texture-tile {
width: 150px;
height: 150px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0L24 24H0L12 0Z" fill="var(--accent2)" /></svg>');
background-size: cover;
}
.controls {
position: fixed;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 16px;
}
button {
font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 12px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--text);
background-color: var(--surface);
border: var(--line);
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: box-shadow .2s var(--ease);
}
button:hover {
box-shadow: var(--hover-shadow);
}
</style>
</head>
<body>
<header>
<h1 class="wordmark">DESIGNER WALLCOVERINGS</h1>
</header>
<main id="board">
<div class="card">
<div class="hero-pattern"></div>
</div>
<div class="card">
<div class="color-chip"></div>
<div class="color-chip"></div>
<div class="color-chip"></div>
</div>
<div class="card">
<p class="type-pairing">Elegance Meets Comfort</p>
</div>
<div class="card">
<div class="texture-tile"></div>
</div>
</main>
<div class="controls">
<button onclick="regenerateBoard()">REGENERATE</button>
</div>
<script>
const patterns = [
'repeating-linear-gradient(45deg, var(--accent1), var(--accent1) 5px, transparent 5px, transparent 10px)',
'radial-gradient(circle at center, var(--accent2), var(--surface))',
'linear-gradient(to bottom right, var(--accent1), var(--accent2))'
];
const colors = [
['#c9a961', '#7d6a45', '#b0472e'],
['#8d7bb0', '#ff2e88', '#00e5ff'],
['#e0a458', '#c65f38', '#a08c7a']
];
const texts = [
'Elegance Meets Comfort',
'Timeless Elegance',
'Luxury Living'
];
const textures = [
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0L24 24H0L12 0Z" fill="var(--accent2)" /></svg>',
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="10" fill="var(--accent1)"/></svg>',
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h16v2H4V4zm0 10h16v2H4v-2zm0 6h16v2H4v-2z" fill="var(--accent2)"/></svg>'
];
function regenerateBoard() {
const board = document.getElementById('board');
const cards = Array.from(board.children);
const randomPattern = patterns[Math.floor(Math.random() * patterns.length)];
const randomColors = colors[Math.floor(Math.random() * colors.length)];
const randomText = texts[Math.floor(Math.random() * texts.length)];
const randomTexture = textures[Math.floor(Math.random() * textures.length)];
cards[0].querySelector('.hero-pattern').style.backgroundImage = randomPattern;
const chips = cards[1].querySelectorAll('.color-chip');
chips.forEach((chip, index) => {
chip.style.backgroundColor = randomColors[index];
});
cards[2].querySelector('.type-pairing').textContent = randomText;
cards[3].querySelector('.texture-tile').style.backgroundImage = `url('${randomTexture}')`;
}
regenerateBoard();
</script>
</body>
</html>