Brunninn/habithero-windows-forms-edition

1 2// Figma link - replace with your actual Figma file link3const FIGMA_LINK = "https://www.figma.com/file/examplelink";4// Progress bar animation5window.addEventListener('scroll', function() {6    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;7    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;8    const scrollProgress = (scrollTop / scrollHeight) * 100;9    document.querySelector('.progress-bar div').style.width = scrollProgress + '%';10});11 12document.addEventListener('DOMContentLoaded', function() {13// Sample data for history14    const historyData = [15        { date: '01/06/2023', water: true, exercise: true, food: true, supplements: false },16        { date: '02/06/2023', water: true, exercise: false, food: true, supplements: true },17        { date: '03/06/2023', water: true, exercise: true, food: false, supplements: true },18        { date: '04/06/2023', water: false, exercise: false, food: true, supplements: false },19        { date: '05/06/2023', water: true, exercise: true, food: true, supplements: true },20    ];21 22    // Populate history table23    const historyTable = document.getElementById('history-table');24    historyData.forEach(entry => {25        const row = document.createElement('tr');26        row.className = 'border-b border-gray-200 hover:bg-gray-50';27        28        row.innerHTML = `29            <td class="px-4 py-3">${entry.date}</td>30            <td class="px-4 py-3">${getStatusIcon(entry.water)}</td>31            <td class="px-4 py-3">${getStatusIcon(entry.exercise)}</td>32            <td class="px-4 py-3">${getStatusIcon(entry.food)}</td>33            <td class="px-4 py-3">${getStatusIcon(entry.supplements)}</td>34        `;35        36        historyTable.appendChild(row);37    });38// Function to get status icon39function getStatusIcon(completed) {40    return completed 41        ? '<i data-feather="check-circle" class="text-green-500"></i>' 42        : '<i data-feather="x-circle" class="text-red-500"></i>';43}44 45// Smooth scroll for anchor links46document.querySelectorAll('a[href^="#"]').forEach(anchor => {47    anchor.addEventListener('click', function (e) {48        e.preventDefault();49        document.querySelector(this.getAttribute('href')).scrollIntoView({50            behavior: 'smooth'51        });52    });53});54// Refresh feather icons after dynamic content is added55    feather.replace();56});57 58// Handle habit completion59document.addEventListener('click', function(e) {60    if (e.target.closest('.habit-check')) {61        const habitCard = e.target.closest('.habit-card');62        habitCard.classList.toggle('completed');63        habitCard.classList.toggle('bg-opacity-100');64        habitCard.classList.toggle('bg-opacity-30');65        66        // Update UI67        const icon = habitCard.querySelector('.habit-icon');68        if (habitCard.classList.contains('completed')) {69            icon.classList.remove('text-gray-400');70            icon.classList.add('text-white');71        } else {72            icon.classList.add('text-gray-400');73            icon.classList.remove('text-white');74        }75        76        feather.replace();77    }78});