The Autonomous Developer & Homelab Suite, Save $32

I have generated a fully functional, single-file Weight Tracker application. It includes a responsive Tailwind CSS layout, a persistent dark mode toggle, and state management for logging weight entries.

Single-File Weight Tracker

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VibeTrack - Weight Monitor</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
        }
    </script>
</head>
<body class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 min-h-screen transition-colors duration-200">
    <div class="max-w-xl mx-auto py-10 px-4">
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold tracking-tight">VibeTrack</h1>
            <button id="themeToggle" class="p-2 bg-slate-200 dark:bg-slate-800 rounded-lg hover:ring-2 ring-blue-500 transition-all">
                <span class="dark:hidden">🌙 Dark</span>
                <span class="hidden dark:inline">☀️ Light</span>
            </button>
        </header>

        <section class="bg-white dark:bg-slate-800 p-6 rounded-2xl shadow-xl border border-slate-200 dark:border-slate-700 mb-8">
            <form id="weightForm" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium mb-1">Current Weight (kg)</label>
                    <input type="number" step="0.1" id="weightInput" required class="w-full p-3 rounded-lg bg-slate-100 dark:bg-slate-700 border-none focus:ring-2 focus:ring-blue-500 outline-none">
                </div>
                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors">
                    Log Entry
                </button>
            </form>
        </section>

        <section>
            <h2 class="text-xl font-semibold mb-4">History</h2>
            <ul id="historyList" class="space-y-3">
                <!-- Entries will appear here -->
            </ul>
        </section>
    </div>

    <script>
        const form = document.getElementById('weightForm');
        const list = document.getElementById('historyList');
        const themeToggle = document.getElementById('themeToggle');
        let entries = JSON.parse(localStorage.getItem('weights') || '[]');

        function render() {
            list.innerHTML = entries.map((e, i) => `
                <li class="flex justify-between items-center bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700">
                    <span class="font-mono font-medium">${e.weight} kg</span>
                    <span class="text-sm text-slate-500">${new Date(e.date).toLocaleDateString()}</span>
                </li>
            `).reverse().join('');
            localStorage.setItem('weights', JSON.stringify(entries));
        }

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            entries.push({ weight: document.getElementById('weightInput').value, date: new Date() });
            form.reset();
            render();
        });

        themeToggle.addEventListener('click', () => {
            document.documentElement.classList.toggle('dark');
        });

        render();
    </script>
</body>
</html>

Next steps

• Save the code block above as index.html and open it in any modern browser.
• Add Chart.js via CDN in the <head> to visualize the weight trend over time.
• Connect the data to a backend API or Firebase for multi-device synchronization.