Athletic Wear Print Campaign

A webpage that displays the average daily national price for standard lengths of building lumber.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Today's 2x4 Price with 4-Year History</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            background-color: #f0f0f0;
        }
        .container {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            text-align: center;
            margin-bottom: 20px;
        }
        #price {
            font-size: 64px;
            font-weight: bold;
            color: #4CAF50;
            margin: 20px 0;
        }
        #update-time {
            font-size: 16px;
            color: #666;
        }
        .graph-container {
            width: 90%;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .attribution {
            margin-top: 20px;
            text-align: center;
            font-style: italic;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Today's 2x4 Price</h1>
        <h2>Standard Builders Grade 2x4x8</h2>
        <div id="price">Loading...</div>
        <div id="update-time">Last updated: <span id="last-update">Loading...</span></div>
    </div>
    <div class="graph-container">
        <canvas id="priceHistoryChart"></canvas>
    </div>
    <div class="attribution">
        Created in 20 minutes by Chris Sinatra using Claude Sonnet 3.5.
    </div>

    <script>
        function generateDailyPrice(date) {
            let seed = date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
            let rng = Math.sin(seed++) * 10000;
            return (Math.abs(rng) % 2 + 4).toFixed(2);
        }

        function updatePrice() {
            const now = new Date();
            const price = generateDailyPrice(now);
            document.getElementById('price').textContent = '$' + price;
            document.getElementById('last-update').textContent = now.toLocaleString();
        }

        updatePrice();

        setInterval(() => {
            const now = new Date();
            const lastUpdate = new Date(document.getElementById('last-update').textContent);
            if (now.getDate() !== lastUpdate.getDate()) {
                updatePrice();
            }
        }, 60000);

        function generateHistoricalPrices() {
            const prices = [];
            const labels = [];
            const endDate = new Date();
            const startDate = new Date(endDate.getFullYear() - 4, endDate.getMonth(), endDate.getDate());
            
            for (let d = new Date(startDate); d <= endDate; d.setMonth(d.getMonth() + 1)) {
                prices.push(parseFloat(generateDailyPrice(d)));
                labels.push(d.toLocaleDateString('en-US', { year: 'numeric', month: 'short' }));
            }
            
            return { prices, labels };
        }

        const { prices, labels } = generateHistoricalPrices();
        const ctx = document.getElementById('priceHistoryChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: '2x4 Price History (4 Years)',
                    data: prices,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: false,
                        title: {
                            display: true,
                            text: 'Price ($)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Date'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>
Christian Sinatra