543 lines
31 KiB
HTML
543 lines
31 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SkillHub - Find Local Classes & Workshops</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
'sans': ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
primary: '#2563eb',
|
|
secondary: '#10b981',
|
|
accent: '#f59e0b',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-50 font-sans">
|
|
|
|
<!-- @COMPONENT: Header [navigation, logo, user menu] -->
|
|
<header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<h1 class="text-xl font-bold text-primary">SkillHub</h1>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="p-2 text-gray-600 hover:text-primary" data-event="click:toggleSearch">
|
|
<i class="fas fa-search text-lg"></i>
|
|
</button>
|
|
<button class="p-2 text-gray-600 hover:text-primary" data-event="click:showNotifications">
|
|
<i class="fas fa-bell text-lg"></i>
|
|
<span class="absolute -mt-2 -mr-1 bg-accent text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
|
|
</button>
|
|
<button class="p-2 text-gray-600 hover:text-primary" data-event="click:showProfile">
|
|
<i class="fas fa-user-circle text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- @END_COMPONENT: Header -->
|
|
|
|
<!-- @COMPONENT: SearchBar [location, category, keyword filters] -->
|
|
<div class="bg-white shadow-sm border-b border-gray-100 p-4" id="searchSection">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="space-y-4">
|
|
<div class="relative">
|
|
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
<input type="text" placeholder="Search classes, workshops, skills..."
|
|
class="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-200 rounded-xl text-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
data-bind="searchQuery" data-mock="true">
|
|
</div>
|
|
|
|
<div class="flex space-x-3 overflow-x-auto pb-2">
|
|
<button class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-full whitespace-nowrap border-2 border-transparent hover:border-primary"
|
|
data-event="click:filterLocation">
|
|
<i class="fas fa-map-marker-alt mr-2"></i>
|
|
<span data-bind="selectedLocation">Near me</span>
|
|
</button>
|
|
<button class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-full whitespace-nowrap border-2 border-transparent hover:border-primary"
|
|
data-event="click:filterCategory">
|
|
<i class="fas fa-tags mr-2"></i>
|
|
<span data-bind="selectedCategory">All categories</span>
|
|
</button>
|
|
<button class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-full whitespace-nowrap border-2 border-transparent hover:border-primary"
|
|
data-event="click:filterTime">
|
|
<i class="fas fa-clock mr-2"></i>
|
|
<span data-bind="selectedTime">Anytime</span>
|
|
</button>
|
|
<button class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-full whitespace-nowrap border-2 border-transparent hover:border-primary"
|
|
data-event="click:filterAvailability">
|
|
<i class="fas fa-check-circle mr-2"></i>
|
|
Available now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- @END_COMPONENT: SearchBar -->
|
|
|
|
<!-- @COMPONENT: QuickCategories [popular skill categories] -->
|
|
<section class="px-4 py-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">Popular Categories</h2>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
<!-- @MAP: categories.map(category => ( -->
|
|
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow cursor-pointer"
|
|
data-event="click:selectCategory" data-mock="true">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-code text-primary text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900" data-bind="category.name">Tech Skills</span>
|
|
<p class="text-xs text-gray-500 mt-1" data-bind="category.count">120+ classes</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow cursor-pointer"
|
|
data-event="click:selectCategory" data-mock="true">
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-chart-line text-secondary text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900" data-bind="category.name">Business</span>
|
|
<p class="text-xs text-gray-500 mt-1" data-bind="category.count">85+ classes</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow cursor-pointer"
|
|
data-event="click:selectCategory" data-mock="true">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-palette text-purple-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900" data-bind="category.name">Creative</span>
|
|
<p class="text-xs text-gray-500 mt-1" data-bind="category.count">65+ classes</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow cursor-pointer"
|
|
data-event="click:selectCategory" data-mock="true">
|
|
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-tools text-accent text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900" data-bind="category.name">Trades</span>
|
|
<p class="text-xs text-gray-500 mt-1" data-bind="category.count">45+ classes</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow cursor-pointer"
|
|
data-event="click:selectCategory" data-mock="true">
|
|
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-heartbeat text-red-500 text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900" data-bind="category.name">Healthcare</span>
|
|
<p class="text-xs text-gray-500 mt-1" data-bind="category.count">38+ classes</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow cursor-pointer"
|
|
data-event="click:selectCategory" data-mock="true">
|
|
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-language text-indigo-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900" data-bind="category.name">Languages</span>
|
|
<p class="text-xs text-gray-500 mt-1" data-bind="category.count">52+ classes</p>
|
|
</div>
|
|
<!-- @END_MAP )) -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- @END_COMPONENT: QuickCategories -->
|
|
|
|
<!-- @COMPONENT: FeaturedClasses [highlighted classes with real-time availability] -->
|
|
<section class="px-4 py-6 bg-white">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-lg font-semibold text-gray-900">Featured Classes</h2>
|
|
<button class="text-primary text-sm font-medium hover:text-blue-700" data-event="click:viewAllFeatured">
|
|
View all <i class="fas fa-arrow-right ml-1"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<!-- @MAP: featuredClasses.map(class => ( -->
|
|
<div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow" data-mock="true">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold text-gray-900 text-lg mb-1" data-bind="class.title">
|
|
Web Development Bootcamp
|
|
</h3>
|
|
<p class="text-gray-600 text-sm mb-2" data-bind="class.provider">
|
|
TechSpace Academy
|
|
</p>
|
|
<div class="flex items-center text-sm text-gray-500 mb-2">
|
|
<i class="fas fa-map-marker-alt mr-1"></i>
|
|
<span data-bind="class.location">Downtown Seattle, WA</span>
|
|
<span class="mx-2">•</span>
|
|
<i class="fas fa-clock mr-1"></i>
|
|
<span data-bind="class.duration">12 weeks</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="flex items-center justify-end mb-1">
|
|
<span class="text-xs bg-secondary text-white px-2 py-1 rounded-full" data-bind="class.availability">
|
|
3 spots left
|
|
</span>
|
|
</div>
|
|
<div class="text-lg font-bold text-gray-900" data-bind="class.price">$2,499</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center">
|
|
<div class="flex text-yellow-400 text-sm mr-2">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
<span class="text-sm text-gray-600" data-bind="class.rating">4.8 (124 reviews)</span>
|
|
</div>
|
|
<div class="text-sm text-gray-500" data-bind="class.startDate">
|
|
Starts Jan 15
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-3">
|
|
<button class="flex-1 bg-primary text-white py-3 rounded-xl font-medium text-center hover:bg-blue-700 transition-colors"
|
|
data-event="click:enrollNow">
|
|
Enroll Now
|
|
</button>
|
|
<button class="px-4 py-3 border border-gray-200 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
|
|
data-event="click:saveClass">
|
|
<i class="fas fa-bookmark"></i>
|
|
</button>
|
|
<button class="px-4 py-3 border border-gray-200 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
|
|
data-event="click:shareClass">
|
|
<i class="fas fa-share"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow" data-mock="true">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold text-gray-900 text-lg mb-1" data-bind="class.title">
|
|
Digital Marketing Fundamentals
|
|
</h3>
|
|
<p class="text-gray-600 text-sm mb-2" data-bind="class.provider">
|
|
Marketing Pro Institute
|
|
</p>
|
|
<div class="flex items-center text-sm text-gray-500 mb-2">
|
|
<i class="fas fa-map-marker-alt mr-1"></i>
|
|
<span data-bind="class.location">Capitol Hill, Seattle</span>
|
|
<span class="mx-2">•</span>
|
|
<i class="fas fa-clock mr-1"></i>
|
|
<span data-bind="class.duration">6 weeks</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="flex items-center justify-end mb-1">
|
|
<span class="text-xs bg-accent text-white px-2 py-1 rounded-full" data-bind="class.availability">
|
|
8 spots left
|
|
</span>
|
|
</div>
|
|
<div class="text-lg font-bold text-gray-900" data-bind="class.price">$899</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center">
|
|
<div class="flex text-yellow-400 text-sm mr-2">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="far fa-star"></i>
|
|
</div>
|
|
<span class="text-sm text-gray-600" data-bind="class.rating">4.6 (89 reviews)</span>
|
|
</div>
|
|
<div class="text-sm text-gray-500" data-bind="class.startDate">
|
|
Starts Jan 22
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-3">
|
|
<button class="flex-1 bg-primary text-white py-3 rounded-xl font-medium text-center hover:bg-blue-700 transition-colors"
|
|
data-event="click:enrollNow">
|
|
Enroll Now
|
|
</button>
|
|
<button class="px-4 py-3 border border-gray-200 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
|
|
data-event="click:saveClass">
|
|
<i class="fas fa-bookmark"></i>
|
|
</button>
|
|
<button class="px-4 py-3 border border-gray-200 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
|
|
data-event="click:shareClass">
|
|
<i class="fas fa-share"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow" data-mock="true">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold text-gray-900 text-lg mb-1" data-bind="class.title">
|
|
Certified Nursing Assistant
|
|
</h3>
|
|
<p class="text-gray-600 text-sm mb-2" data-bind="class.provider">
|
|
Seattle Health Training Center
|
|
</p>
|
|
<div class="flex items-center text-sm text-gray-500 mb-2">
|
|
<i class="fas fa-map-marker-alt mr-1"></i>
|
|
<span data-bind="class.location">Bellevue, WA</span>
|
|
<span class="mx-2">•</span>
|
|
<i class="fas fa-clock mr-1"></i>
|
|
<span data-bind="class.duration">8 weeks</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="flex items-center justify-end mb-1">
|
|
<span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full" data-bind="class.availability">
|
|
Almost full
|
|
</span>
|
|
</div>
|
|
<div class="text-lg font-bold text-gray-900" data-bind="class.price">$1,299</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center">
|
|
<div class="flex text-yellow-400 text-sm mr-2">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
<span class="text-sm text-gray-600" data-bind="class.rating">4.9 (156 reviews)</span>
|
|
</div>
|
|
<div class="text-sm text-gray-500" data-bind="class.startDate">
|
|
Starts Feb 5
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-3">
|
|
<button class="flex-1 bg-primary text-white py-3 rounded-xl font-medium text-center hover:bg-blue-700 transition-colors"
|
|
data-event="click:enrollNow">
|
|
Enroll Now
|
|
</button>
|
|
<button class="px-4 py-3 border border-gray-200 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
|
|
data-event="click:saveClass">
|
|
<i class="fas fa-bookmark"></i>
|
|
</button>
|
|
<button class="px-4 py-3 border border-gray-200 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
|
|
data-event="click:shareClass">
|
|
<i class="fas fa-share"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- @END_MAP )) -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- @END_COMPONENT: FeaturedClasses -->
|
|
|
|
<!-- @COMPONENT: QuickActions [shortcuts for common tasks] -->
|
|
<section class="px-4 py-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h2>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<button class="bg-white border border-gray-200 rounded-xl p-4 text-center hover:shadow-md transition-shadow"
|
|
data-event="click:findNearMe">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-location-arrow text-primary text-xl"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-900">Find Near Me</span>
|
|
<p class="text-xs text-gray-500 mt-1">Classes within 10 miles</p>
|
|
</button>
|
|
|
|
<button class="bg-white border border-gray-200 rounded-xl p-4 text-center hover:shadow-md transition-shadow"
|
|
data-event="click:availableToday">
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-calendar-day text-secondary text-xl"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-900">Available Today</span>
|
|
<p class="text-xs text-gray-500 mt-1">Start immediately</p>
|
|
</button>
|
|
|
|
<button class="bg-white border border-gray-200 rounded-xl p-4 text-center hover:shadow-md transition-shadow"
|
|
data-event="click:savedClasses">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-bookmark text-purple-600 text-xl"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-900">Saved Classes</span>
|
|
<p class="text-xs text-gray-500 mt-1" data-bind="savedCount">12 saved</p>
|
|
</button>
|
|
|
|
<button class="bg-white border border-gray-200 rounded-xl p-4 text-center hover:shadow-md transition-shadow"
|
|
data-event="click:myProgress">
|
|
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-chart-line text-accent text-xl"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-900">My Progress</span>
|
|
<p class="text-xs text-gray-500 mt-1">Track your learning</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- @END_COMPONENT: QuickActions -->
|
|
|
|
<!-- @COMPONENT: ContentManagement [admin interface for easy updates] -->
|
|
<section class="px-4 py-6 bg-gray-100 border-t-4 border-accent" id="adminSection" style="display: none;" data-implementation="Show only for admin users">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg font-semibold text-gray-900">
|
|
<i class="fas fa-cog mr-2"></i>Content Management
|
|
</h2>
|
|
<button class="text-sm text-gray-600 hover:text-gray-800" data-event="click:toggleAdmin">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200">
|
|
<div class="flex items-center mb-3">
|
|
<i class="fas fa-plus-circle text-secondary text-xl mr-3"></i>
|
|
<h3 class="font-medium">Add New Class</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-4">Create and publish new classes or workshops</p>
|
|
<button class="w-full bg-secondary text-white py-2 rounded-lg hover:bg-green-600 transition-colors"
|
|
data-event="click:addNewClass">
|
|
Add Class
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200">
|
|
<div class="flex items-center mb-3">
|
|
<i class="fas fa-edit text-primary text-xl mr-3"></i>
|
|
<h3 class="font-medium">Edit Content</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-4">Update class details, availability, and pricing</p>
|
|
<button class="w-full bg-primary text-white py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
|
data-event="click:editContent">
|
|
Edit Classes
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200">
|
|
<div class="flex items-center mb-3">
|
|
<i class="fas fa-chart-bar text-accent text-xl mr-3"></i>
|
|
<h3 class="font-medium">Analytics</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-4">View enrollment stats and user engagement</p>
|
|
<button class="w-full bg-accent text-white py-2 rounded-lg hover:bg-yellow-600 transition-colors"
|
|
data-event="click:viewAnalytics">
|
|
View Reports
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- @STATE: realtimeUpdates:boolean = true -->
|
|
<div class="mt-6 bg-white rounded-xl p-4 border border-gray-200">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h3 class="font-medium">Real-time Availability Updates</h3>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" checked class="sr-only peer" data-bind="realtimeUpdates">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
|
</label>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Automatically sync class availability across all platforms</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- @END_COMPONENT: ContentManagement -->
|
|
|
|
<!-- @COMPONENT: BottomNavigation [mobile-optimized navigation] -->
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg md:hidden">
|
|
<div class="grid grid-cols-5 h-16">
|
|
<button class="flex flex-col items-center justify-center text-primary border-t-2 border-primary"
|
|
data-event="click:goHome">
|
|
<i class="fas fa-home text-lg"></i>
|
|
<span class="text-xs mt-1">Home</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center text-gray-600 hover:text-primary"
|
|
data-event="click:goSearch">
|
|
<i class="fas fa-search text-lg"></i>
|
|
<span class="text-xs mt-1">Search</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center text-gray-600 hover:text-primary"
|
|
data-event="click:goSaved">
|
|
<i class="fas fa-bookmark text-lg"></i>
|
|
<span class="text-xs mt-1">Saved</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center text-gray-600 hover:text-primary"
|
|
data-event="click:goProgress">
|
|
<i class="fas fa-chart-line text-lg"></i>
|
|
<span class="text-xs mt-1">Progress</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center text-gray-600 hover:text-primary"
|
|
data-event="click:goProfile">
|
|
<i class="fas fa-user text-lg"></i>
|
|
<span class="text-xs mt-1">Profile</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<!-- @END_COMPONENT: BottomNavigation -->
|
|
|
|
<!-- @FUNCTIONALITY: Add floating action button for quick class submission by providers -->
|
|
<button class="fixed bottom-20 right-4 md:bottom-6 w-14 h-14 bg-accent text-white rounded-full shadow-lg hover:shadow-xl transition-shadow flex items-center justify-center"
|
|
data-event="click:quickSubmit"
|
|
data-implementation="Should open a form for providers to quickly submit new classes">
|
|
<i class="fas fa-plus text-xl"></i>
|
|
</button>
|
|
|
|
<script>
|
|
// TODO: Implement business logic, API calls, and state management
|
|
|
|
(function() {
|
|
// Mock real-time availability updates
|
|
function updateAvailability() {
|
|
const availabilityBadges = document.querySelectorAll('[data-bind="class.availability"]');
|
|
const statuses = ['3 spots left', '8 spots left', 'Almost full', 'Available now', '1 spot left'];
|
|
const colors = ['bg-secondary', 'bg-accent', 'bg-red-100 text-red-800', 'bg-green-500', 'bg-red-500'];
|
|
|
|
availabilityBadges.forEach(badge => {
|
|
if (Math.random() < 0.1) { // 10% chance to update
|
|
const randomIndex = Math.floor(Math.random() * statuses.length);
|
|
badge.textContent = statuses[randomIndex];
|
|
badge.className = `text-xs text-white px-2 py-1 rounded-full ${colors[randomIndex]}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Simulate real-time updates every 30 seconds
|
|
setInterval(updateAvailability, 30000);
|
|
|
|
// Touch-friendly interaction feedback
|
|
document.addEventListener('touchstart', function(e) {
|
|
if (e.target.matches('button, .cursor-pointer')) {
|
|
e.target.style.transform = 'scale(0.95)';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('touchend', function(e) {
|
|
if (e.target.matches('button, .cursor-pointer')) {
|
|
e.target.style.transform = 'scale(1)';
|
|
}
|
|
});
|
|
|
|
// Show admin section for demo (normally would check user permissions)
|
|
setTimeout(() => {
|
|
if (window.location.hash === '#admin') {
|
|
document.getElementById('adminSection').style.display = 'block';
|
|
}
|
|
}, 1000);
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |