Download index.html from sannlynnhtun-coding/beading-tracker: direct link, hf CLI and curl.
- Browser
- Download file 65.2 kB
-
https://huggingface.co/spaces/sannlynnhtun-coding/beading-tracker/resolve/main/index.html
- Command line
-
hf download hf://spaces/sannlynnhtun-coding/beading-tracker/index.html
-
curl -L -o index.html https://huggingface.co/spaces/sannlynnhtun-coding/beading-tracker/resolve/main/index.html
65.2 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Winter Beading Tracker</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .sidebar-link.active { | |
| background-color: rgba(59, 130, 246, 0.1); | |
| border-left: 4px solid rgb(59, 130, 246); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| #vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.1; | |
| } | |
| .task-checkbox:checked + .task-label { | |
| text-decoration: line-through; | |
| color: #9CA3AF; | |
| } | |
| .event-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div id="vanta-bg"></div> | |
| <!-- Sidebar Navigation --> | |
| <div class="flex h-screen overflow-hidden"> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-white border-r border-gray-200"> | |
| <div class="flex items-center justify-center h-16 px-4 bg-indigo-600"> | |
| <div class="flex items-center"> | |
| <i data-feather="compass" class="text-white mr-2"></i> | |
| <span class="text-white font-semibold text-lg">Beading Tracker</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow overflow-y-auto"> | |
| <div class="px-4 py-4"> | |
| <div class="flex items-center space-x-4 p-2 rounded-lg bg-indigo-50"> | |
| <img class="w-10 h-10 rounded-full" src="http://static.photos/people/200x200/1" alt="User"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900">Beading Enthusiast</p> | |
| <p class="text-xs text-gray-500">Premium Member</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 px-2 space-y-1"> | |
| <a href="#dashboard" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100 active"> | |
| <i data-feather="home" class="mr-3 text-indigo-600"></i> | |
| Dashboard | |
| </a> | |
| <a href="#events" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="calendar" class="mr-3 text-indigo-600"></i> | |
| My Events | |
| </a> | |
| <a href="#tasks" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="check-square" class="mr-3 text-indigo-600"></i> | |
| Daily Tasks | |
| </a> | |
| <a href="#progress" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="trending-up" class="mr-3 text-indigo-600"></i> | |
| Progress | |
| </a> | |
| <a href="#reminders" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="bell" class="mr-3 text-indigo-600"></i> | |
| Reminders | |
| </a> | |
| <a href="#community" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="users" class="mr-3 text-indigo-600"></i> | |
| Community | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700"> | |
| <i data-feather="plus" class="mr-2"></i> | |
| New Event | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Mobile header --> | |
| <div class="md:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <h1 class="text-lg font-medium text-gray-900">Beading Tracker</h1> | |
| <div class="flex items-center space-x-4"> | |
| <i data-feather="bell"></i> | |
| <img class="w-8 h-8 rounded-full" src="http://static.photos/people/200x200/1" alt="User"> | |
| </div> | |
| </div> | |
| <!-- Content sections --> | |
| <div class="flex-1 overflow-y-auto p-4 md:p-8"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="mb-12"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2> | |
| <div class="text-sm text-gray-500">Today: <span class="font-medium">Nov 15, 2023</span></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Events</p> | |
| <p class="text-2xl font-bold text-gray-800 mt-1">3</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-indigo-50 text-indigo-600"> | |
| <i data-feather="calendar"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Tasks Today</p> | |
| <p class="text-2xl font-bold text-gray-800 mt-1">4/6</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-50 text-green-600"> | |
| <i data-feather="check-circle"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Days Left</p> | |
| <p class="text-2xl font-bold text-gray-800 mt-1">45</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-50 text-yellow-600"> | |
| <i data-feather="clock"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Community</p> | |
| <p class="text-2xl font-bold text-gray-800 mt-1">12</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-50 text-purple-600"> | |
| <i data-feather="users"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 lg:col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Current Progress</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-gray-100 rounded-md">Week</button> | |
| <button class="px-3 py-1 text-xs bg-indigo-600 text-white rounded-md">Month</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 rounded-md">Year</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <!-- Chart placeholder --> | |
| <div class="flex items-center justify-center h-full bg-gray-50 rounded-lg"> | |
| <p class="text-gray-400">Progress chart will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Upcoming Tasks</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 rounded-full bg-indigo-600"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Beading Session</p> | |
| <p class="text-xs text-gray-500">Today, 9:00 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 rounded-full bg-green-600"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Design Patterns</p> | |
| <p class="text-xs text-gray-500">Today, 2:00 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-600"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Cleaning Beads</p> | |
| <p class="text-xs text-gray-500">Tomorrow, 10:00 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 rounded-full bg-purple-600"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Packaging</p> | |
| <p class="text-xs text-gray-500">Tomorrow, 4:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Events Section --> | |
| <section id="events" class="mb-12 hidden"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">My Events</h2> | |
| <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700"> | |
| <i data-feather="plus" class="mr-2"></i> | |
| New Event | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Event Card 1 --> | |
| <div class="event-card bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('http://static.photos/craft/640x360/1')"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Winter Beading Challenge</h3> | |
| <p class="text-sm text-gray-500 mt-1">Nov 1 - Dec 31, 2023</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| Active | |
| </span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-3">Complete 300 beads during winter season with daily tracking and community support.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="users" class="w-3 h-3 mr-1"></i> 12 | |
| </span> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="heart" class="w-3 h-3 mr-1"></i> 24 | |
| </span> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Public | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 2 --> | |
| <div class="event-card bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('http://static.photos/craft/640x360/2')"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Personal Beading Goal</h3> | |
| <p class="text-sm text-gray-500 mt-1">Nov 10 - Dec 20, 2023</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| Active | |
| </span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-3">Private project to create 5 new beading patterns before the holidays.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="users" class="w-3 h-3 mr-1"></i> 1 | |
| </span> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| Private | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 3 --> | |
| <div class="event-card bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('http://static.photos/craft/640x360/3')"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Holiday Gift Project</h3> | |
| <p class="text-sm text-gray-500 mt-1">Dec 1 - Dec 24, 2023</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> | |
| Upcoming | |
| </span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-3">Create handmade beaded gifts for family and friends this holiday season.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="users" class="w-3 h-3 mr-1"></i> 5 | |
| </span> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="heart" class="w-3 h-3 mr-1"></i> 8 | |
| </span> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Public | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tasks Section --> | |
| <section id="tasks" class="mb-12 hidden"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Daily Tasks</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Today</option> | |
| <option>Tomorrow</option> | |
| <option>This Week</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700"> | |
| <i data-feather="plus" class="mr-2"></i> | |
| Add Task | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden"> | |
| <div class="grid grid-cols-12 border-b border-gray-200 bg-gray-50"> | |
| <div class="col-span-1 px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider"></div> | |
| <div class="col-span-5 px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Task</div> | |
| <div class="col-span-3 px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Time</div> | |
| <div class="col-span-2 px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Event</div> | |
| <div class="col-span-1 px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider"></div> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Task 1 --> | |
| <div class="grid grid-cols-12 hover:bg-gray-50"> | |
| <div class="col-span-1 px-4 py-4 flex items-center"> | |
| <input type="checkbox" class="task-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="col-span-5 px-4 py-4"> | |
| <label class="task-label block text-sm font-medium text-gray-800">Beading Session - Pattern #5</label> | |
| <p class="text-xs text-gray-500 mt-1">Complete the fifth pattern in the winter collection</p> | |
| </div> | |
| <div class="col-span-3 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-800">9:00 AM - 11:00 AM</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 px-4 py-4"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800"> | |
| Winter Challenge | |
| </span> | |
| </div> | |
| <div class="col-span-1 px-4 py-4 flex items-center justify-end"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Task 2 --> | |
| <div class="grid grid-cols-12 hover:bg-gray-50"> | |
| <div class="col-span-1 px-4 py-4 flex items-center"> | |
| <input type="checkbox" class="task-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| </div> | |
| <div class="col-span-5 px-4 py-4"> | |
| <label class="task-label block text-sm font-medium text-gray-800">Design New Pattern</label> | |
| <p class="text-xs text-gray-500 mt-1">Sketch ideas for holiday-themed pattern</p> | |
| </div> | |
| <div class="col-span-3 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-800">2:00 PM - 3:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 px-4 py-4"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Personal Goal | |
| </span> | |
| </div> | |
| <div class="col-span-1 px-4 py-4 flex items-center justify-end"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Task 3 --> | |
| <div class="grid grid-cols-12 hover:bg-gray-50"> | |
| <div class="col-span-1 px-4 py-4 flex items-center"> | |
| <input type="checkbox" class="task-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="col-span-5 px-4 py-4"> | |
| <label class="task-label block text-sm font-medium text-gray-800">Clean Beading Tools</label> | |
| <p class="text-xs text-gray-500 mt-1">Organize and clean all tools and materials</p> | |
| </div> | |
| <div class="col-span-3 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-800">4:30 PM - 5:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 px-4 py-4"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800"> | |
| Winter Challenge | |
| </span> | |
| </div> | |
| <div class="col-span-1 px-4 py-4 flex items-center justify-end"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Task 4 --> | |
| <div class="grid grid-cols-12 hover:bg-gray-50"> | |
| <div class="col-span-1 px-4 py-4 flex items-center"> | |
| <input type="checkbox" class="task-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="col-span-5 px-4 py-4"> | |
| <label class="task-label block text-sm font-medium text-gray-800">Package Completed Items</label> | |
| <p class="text-xs text-gray-500 mt-1">Prepare finished pieces for gifting</p> | |
| </div> | |
| <div class="col-span-3 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-800">6:00 PM - 6:30 PM</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 px-4 py-4"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| Holiday Gifts | |
| </span> | |
| </div> | |
| <div class="col-span-1 px-4 py-4 flex items-center justify-end"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Progress Section --> | |
| <section id="progress" class="mb-12 hidden"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Progress Tracking</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Winter Beading Challenge</option> | |
| <option>Personal Beading Goal</option> | |
| <option>Holiday Gift Project</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Completion Stats</h3> | |
| <div class="flex items-center justify-center"> | |
| <div class="relative w-40 h-40"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> | |
| <circle class="text-indigo-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="75.36" /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-2xl font-bold text-gray-800">70%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-sm font-medium text-gray-600">Completed Tasks</span> | |
| <span class="text-sm font-medium text-gray-800">35/50</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm font-medium text-gray-600">Days Completed</span> | |
| <span class="text-sm font-medium text-gray-800">45/90</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm font-medium text-gray-600">Days Remaining</span> | |
| <span class="text-sm font-medium text-gray-800">45</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 lg:col-span-2"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Calendar View</h3> | |
| <div class="mb-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 rounded-md hover:bg-gray-100"> | |
| <i data-feather="chevron-left" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| <span class="font-medium text-gray-800">November 2023</span> | |
| <button class="p-1 rounded-md hover:bg-gray-100"> | |
| <i data-feather="chevron-right" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| </div> | |
| <button class="px-3 py-1 text-sm bg-indigo-600 text-white rounded-md">Today</button> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1"> | |
| <div class="text-center text-xs font-medium text-gray-500 py-2">Sun</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-2">Mon</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-2">Tue</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-2">Wed</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-2">Thu</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-2">Fri</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-2">Sat</div> | |
| <!-- Calendar days --> | |
| <div class="h-12"></div> | |
| <div class="h-12"></div> | |
| <div class="h-12"></div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center bg-indigo-50"> | |
| <span class="text-xs font-medium text-indigo-800">1</span> | |
| <div class="flex mt-1"> | |
| <div class="w-2 h-2 rounded-full bg-indigo-600"></div> | |
| </div> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">2</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">3</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">4</span> | |
| </div> | |
| <!-- Week 2 --> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">5</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center bg-green-50"> | |
| <span class="text-xs font-medium text-green-800">6</span> | |
| <div class="flex mt-1"> | |
| <div class="w-2 h-2 rounded-full bg-green-600"></div> | |
| </div> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center bg-indigo-50"> | |
| <span class="text-xs font-medium text-indigo-800">7</span> | |
| <div class="flex mt-1"> | |
| <div class="w-2 h-2 rounded-full bg-indigo-600"></div> | |
| </div> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">8</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">9</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">10</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">11</span> | |
| </div> | |
| <!-- Week 3 --> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">12</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">13</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center bg-indigo-50"> | |
| <span class="text-xs font-medium text-indigo-800">14</span> | |
| <div class="flex mt-1"> | |
| <div class="w-2 h-2 rounded-full bg-indigo-600"></div> | |
| </div> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center bg-indigo-50"> | |
| <span class="text-xs font-medium text-indigo-800">15</span> | |
| <div class="flex mt-1"> | |
| <div class="w-2 h-2 rounded-full bg-indigo-600"></div> | |
| <div class="w-2 h-2 rounded-full bg-green-600 ml-1"></div> | |
| </div> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">16</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">17</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">18</span> | |
| </div> | |
| <!-- Week 4 --> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">19</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">20</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">21</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">22</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">23</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">24</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">25</span> | |
| </div> | |
| <!-- Week 5 --> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">26</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">27</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">28</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">29</span> | |
| </div> | |
| <div class="h-12 border rounded-md flex flex-col items-center justify-center"> | |
| <span class="text-xs font-medium text-gray-800">30</span> | |
| </div> | |
| <div class="h-12"></div> | |
| <div class="h-12"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reminders Section --> | |
| <section id="reminders" class="mb-12 hidden"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Reminders & Alarms</h2> | |
| <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700"> | |
| <i data-feather="plus" class="mr-2"></i> | |
| New Reminder | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden"> | |
| <div class="grid grid-cols-12 border-b border-gray-200 bg-gray-50"> | |
| <div class="col-span-6 px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Reminder</div> | |
| <div class="col-span-3 px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Time</div> | |
| <div class="col-span-2 px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Type</div> | |
| <div class="col-span-1 px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider"></div> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Reminder 1 --> | |
| <div class="grid grid-cols-12 hover:bg-gray-50"> | |
| <div class="col-span-6 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="p-2 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i data-feather="bell" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-800">Morning Beading Session</p> | |
| <p class="text-xs text-gray-500 mt-1">Daily reminder for your morning beading practice</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-span-3 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-800">9:00 AM</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 px-4 py-4"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800"> | |
| Daily | |
| </span> | |
| </div> | |
| <div class="col-span-1 px-4 py-4 flex items-center justify-end"> | |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> | |
| <input type="checkbox" name="toggle" id="toggle1" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/> | |
| <label for="toggle1" class="toggle-label block overflow-hidden h-6 rounded-full bg-indigo-600 cursor-pointer"></label> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Reminder 2 --> | |
| <div class="grid grid-cols-12 hover:bg-gray-50"> | |
| <div class="col-span-6 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600"> | |
| <i data-feather="mail" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-800">Weekly Progress Report</p> | |
| <p class="text-xs text-gray-500 mt-1">Summary of your weekly beading progress</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-span-3 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-800">Sunday, 6:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 px-4 py-4"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Weekly | |
| </span> | |
| </div> | |
| <div class="col-span-1 px-4 py-4 flex items-center justify-end"> | |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> | |
| <input type="checkbox" name="toggle" id="toggle2" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/> | |
| <label for="toggle2" class="toggle-label block overflow-hidden h-6 rounded-full bg-green-600 cursor-pointer"></label> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Reminder 3 --> | |
| <div class="grid grid-cols-12 hover:bg-gray-50"> | |
| <div class="col-span-6 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i data-feather="alert-triangle" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-800">Supply Check</p> | |
| <p class="text-xs text-gray-500 mt-1">Reminder to check your beading supplies</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-span-3 px-4 py-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-800">1st of Month</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 px-4 py-4"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| Monthly | |
| </span> | |
| </div> | |
| <div class="col-span-1 px-4 py-4 flex items-center justify-end"> | |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> | |
| <input type="checkbox" name="toggle" id="toggle3" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="toggle3" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="mb-12 hidden"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Community Events</h2> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Popular</option> | |
| <option>Newest</option> | |
| <option>Ending Soon</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Community Event 1 --> | |
| <div class="event-card bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('http://static.photos/craft/640x360/4')"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Global Beading Challenge</h3> | |
| <p class="text-sm text-gray-500 mt-1">Dec 1 - Dec 31, 2023</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| Active | |
| </span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-3">Join thousands of beaders worldwide in this annual winter challenge. Complete 1 bead per day!</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="users" class="w-3 h-3 mr-1"></i> 1,245 | |
| </span> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="heart" class="w-3 h-3 mr-1"></i> 3,567 | |
| </span> | |
| </div> | |
| <button class="px-3 py-1 text-xs bg-indigo-600 text-white rounded-md hover:bg-indigo-700"> | |
| Join | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Event 2 --> | |
| <div class="event-card bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('http://static.photos/craft/640x360/5')"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Holiday Ornament Exchange</h3> | |
| <p class="text-sm text-gray-500 mt-1">Nov 20 - Dec 15, 2023</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| Active | |
| </span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-3">Create and exchange handmade beaded ornaments with other participants worldwide.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="users" class="w-3 h-3 mr-1"></i> 876 | |
| </span> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="heart" class="w-3 h-3 mr-1"></i> 2,134 | |
| </span> | |
| </div> | |
| <button class="px-3 py-1 text-xs bg-indigo-600 text-white rounded-md hover:bg-indigo-700"> | |
| Join | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Event 3 --> | |
| <div class="event-card bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('http://static.photos/craft/640x360/6')"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">New Year's Resolution</h3> | |
| <p class="text-sm text-gray-500 mt-1">Jan 1 - Mar 31, 2024</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> | |
| Upcoming | |
| </span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-3">Start your beading journey in the new year with this 3-month guided challenge.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="users" class="w-3 h-3 mr-1"></i> 342 | |
| </span> | |
| <span class="inline-flex items-center text-xs text-gray-500"> | |
| <i data-feather="heart" class="w-3 h-3 mr-1"></i> 789 | |
| </span> | |
| </div> | |
| <button class="px-3 py-1 text-xs bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300"> | |
| Notify Me | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize AOS animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0xf8fafc, | |
| size: 0.80 | |
| }); | |
| // Navigation between sections | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Show dashboard by default | |
| document.querySelector('#dashboard').classList.remove('hidden'); | |
| // Handle sidebar navigation | |
| const links = document.querySelectorAll('.sidebar-link'); | |
| links.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Remove active class from all links | |
| links.forEach(l => l.classList.remove('active')); | |
| // Add active class to clicked link | |
| this.classList.add('active'); | |
| // Hide all sections | |
| const sections = document.querySelectorAll('section'); | |
| sections.forEach(section => section.classList.add('hidden')); | |
| // Show the selected section | |
| const target = this.getAttribute('href'); | |
| document.querySelector(target).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| }); | |
| // Task checkbox functionality | |
| document.addEventListener('change', function(e) { | |
| if (e.target.classList.contains('task-checkbox')) { | |
| const label = e.target.nextElementSibling; | |
| if (e.target.checked) { | |
| label.classList.add('line-through', 'text-gray-400'); | |
| } else { | |
| label.classList.remove('line-through', 'text-gray-400'); | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |