`data/artifacts/193230252710/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>DESIGNER WALLCOVERINGS Mood Board</title>
<style>
:root {
    --bg: #0d0d0f;
    --surface: #17171c;
    --text: #f5f2ea;
    --muted: #8a8578;
    --accent: #c9a961;
    --line: 1px solid rgba(255, 255, 255, 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(--text);
    font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

header {
    text-align: left;
    font-size: 48px;
    letter-spacing: .18em;
    margin-bottom: 24px;
}

canvas {
    width: 1080px;
    height: 1350px;
    background-color: var(--surface);
    position: relative;
    z-index: 1;
}

.regenerate {
    font-size: 16px;
    letter-spacing: .15em;
    text-transform: uppercase;
    border: none;
    padding: 8px 24px;
    cursor: pointer;
    background-color: var(--accent);
    color: #fff;
    margin-top: 24px;
}

.regenerate:hover {
    transform: scale(1.05);
}
</style>
</head>
<body>
<header>DESIGNER WALLCOVERINGS</header>
<canvas id="moodBoardCanvas"></canvas>

<script>
const canvas = document.getElementById('moodBoardCanvas');
const ctx = canvas.getContext('2d');

// Define the mood board elements
const elements = [
    {
        type: 'pattern',
        x: 100,
        y: 100,
        width: 300,
        height: 300,
        color: var(--accent),
        opacity: .5,
        scale: 1.2
    },
    {
        type: 'colorChip',
        x: 450,
        y: 100,
        width: 100,
        height: 100,
        text: "Mocha",
        color: var(--accent)
    },
    {
        type: 'typePairing',
        x: 650,
        y: 100,
        width: 200,
        height: 200,
        text: "Didot / Bodoni MT"
    },
    {
        type: 'textureTile',
        x: 850,
        y: 100,
        width: 300,
        height: 300,
        color: var(--surface)
    }
];

// Draw the elements
function drawElement(element) {
    if (element.type === 'pattern') {
        ctx.beginPath();
        ctx.arc(element.x, element.y, 150, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${parseInt(Math.random() * 256)}, ${parseInt(Math.random() * 256)}, ${parseInt(Math.random() * 256)}, ${element.opacity})`;
        ctx.fill();
    } else if (element.type === 'colorChip') {
        ctx.fillStyle = element.color;
        ctx.fillRect(element.x, element.y, element.width, element.height);
        ctx.fillStyle = var(--text);
        ctx.font = "18px 'Didot', serif";
        ctx.fillText(element.text, element.x + 5, element.y + 30);
    } else if (element.type === 'typePairing') {
        ctx.fillStyle = var(--text);
        ctx.font = "24px 'Didot', serif";
        ctx.fillText(element.text, element.x, element.y + 100);
    } else if (element.type === 'textureTile') {
        ctx.fillStyle = element.color;
        ctx.fillRect(element.x, element.y, element.width, element.height);
    }
}

// Draw the elements
elements.forEach(drawElement);

const regenerateButton = document.createElement('button');
regenerateButton.innerText = "Regenerate";
regenerateButton.className = "regenerate";

canvas.appendChild(regenerateButton);

function regenerate() {
    const regenerateElements = () => {
        elements.forEach((element, index) => {
            element.x += (Math.random() - 0.5) * 100;
            element.y += (Math.random() - 0.5) * 100;
            element.scale *= Math.random() + 0.95;
        });
    };

    regenerateElements();
}

regenerateButton.addEventListener('click', regenerate);
</script>
</body>
</html>