| <!DOCTYPE html> |
| <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> |
| |
| |
| <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> |
|
|
| |
| <div class="flex flex-col flex-1 overflow-hidden"> |
| |
| <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> |
|
|
| |
| <div class="flex-1 overflow-y-auto p-4 md:p-8"> |
| |
| <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"> |
| |
| <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> |
|
|
| |
| <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"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
| |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| |
| |
| 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 |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| document.querySelector('#dashboard').classList.remove('hidden'); |
| |
| |
| const links = document.querySelectorAll('.sidebar-link'); |
| links.forEach(link => { |
| link.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| |
| links.forEach(l => l.classList.remove('active')); |
| |
| |
| this.classList.add('active'); |
| |
| |
| const sections = document.querySelectorAll('section'); |
| sections.forEach(section => section.classList.add('hidden')); |
| |
| |
| const target = this.getAttribute('href'); |
| document.querySelector(target).classList.remove('hidden'); |
| }); |
| }); |
| |
| |
| feather.replace(); |
| }); |
| |
| |
| 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> |
|
|
