Hugging Face's logo

Spaces:
Modzeroo
/
clipscompass-navigator
Running

App Files Community
Modzeroo commited on
Commit
97645ee
·
verified ·
1 Parent(s): 24d615f

make all the pages that are in nav bar and make it dynamic

Browse files
Files changed (7) hide show
  1. campaigns.html +152 -0
  2. dashboard.html +43 -6
  3. goals.html +145 -0
  4. index.html +30 -4
  5. leaderboard.html +141 -0
  6. login.html +21 -2
  7. register.html +21 -2
campaigns.html ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Campaigns - ClipsCompass</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#3B82F6',
16
+ secondary: '#1E40AF',
17
+ accent: '#10B981'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-gray-50">
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-sm border-b">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <i data-feather="compass" class="h-8 w-8 text-primary"></i>
32
+ <span class="ml-2 text-xl font-bold text-gray-900">ClipsCompass</span>
33
+ </div>
34
+ <div class="hidden md:ml-6 md:flex md:space-x-8" id="mainNavLinks">
35
+ <!-- Dynamic links will be inserted here by JavaScript -->
36
+ </div>
37
+ </div>
38
+ <div class="flex items-center space-x-4">
39
+ <span class="text-sm text-gray-700" id="userName"></span>
40
+ <div class="relative">
41
+ <button id="userMenuButton" class="flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
42
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="User profile">
43
+ </button>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </nav>
49
+
50
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
51
+ <div class="px-4 py-6 sm:px-0">
52
+ <div class="flex justify-between items-center mb-8">
53
+ <h1 class="text-2xl font-bold text-gray-900">Your Campaigns</h1>
54
+ <a href="/campaigns/new" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary">
55
+ <i data-feather="plus" class="h-4 w-4 mr-2"></i> New Campaign
56
+ </a>
57
+ </div>
58
+
59
+ <div class="bg-white shadow rounded-lg overflow-hidden">
60
+ <div class="divide-y divide-gray-200">
61
+ <!-- Campaign List - will be populated dynamically -->
62
+ <div id="campaignList" class="divide-y divide-gray-200"></div>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <script>
69
+ document.addEventListener('DOMContentLoaded', function() {
70
+ feather.replace();
71
+
72
+ // Navigation setup
73
+ const mainNavLinks = document.getElementById('mainNavLinks');
74
+ const currentPath = window.location.pathname;
75
+
76
+ const navItems = [
77
+ { path: '/dashboard', name: 'Dashboard', icon: 'home' },
78
+ { path: '/campaigns', name: 'Campaigns', icon: 'target' },
79
+ { path: '/leaderboard', name: 'Leaderboard', icon: 'trending-up' },
80
+ { path: '/goals', name: 'Goals', icon: 'award' }
81
+ ];
82
+
83
+ let navHTML = '';
84
+ navItems.forEach(item => {
85
+ const isActive = currentPath === item.path;
86
+ navHTML += `
87
+ <a href="${item.path}" class="${isActive ? 'border-primary text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
88
+ <i data-feather="${item.icon}" class="h-4 w-4 mr-1"></i>
89
+ ${item.name}
90
+ </a>
91
+ `;
92
+ });
93
+
94
+ mainNavLinks.innerHTML = navHTML;
95
+ feather.replace();
96
+
97
+ // Load user data
98
+ const userData = JSON.parse(localStorage.getItem('userData') || '{}');
99
+ if (userData.fullName) {
100
+ document.getElementById('userName').textContent = userData.fullName;
101
+ }
102
+
103
+ // Load campaigns (mock data)
104
+ const campaigns = [
105
+ { id: 1, name: 'Tech News Roundup', status: 'active', progress: 65, deadline: '2023-12-15' },
106
+ { id: 2, name: 'Social Media Highlights', status: 'active', progress: 42, deadline: '2023-12-20' },
107
+ { id: 3, name: 'Product Launches', status: 'completed', progress: 100, deadline: '2023-11-30' }
108
+ ];
109
+
110
+ const campaignList = document.getElementById('campaignList');
111
+ campaigns.forEach(campaign => {
112
+ const campaignItem = document.createElement('div');
113
+ campaignItem.className = 'p-6 hover:bg-gray-50 transition-colors';
114
+ campaignItem.innerHTML = `
115
+ <div class="flex items-center justify-between">
116
+ <div>
117
+ <h3 class="text-lg font-medium text-gray-900">${campaign.name}</h3>
118
+ <p class="mt-1 text-sm text-gray-500">Deadline: ${campaign.deadline}</p>
119
+ </div>
120
+ <div class="flex items-center space-x-4">
121
+ <span class="px-2 py-1 text-xs font-semibold rounded-full ${campaign.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">
122
+ ${campaign.status}
123
+ </span>
124
+ <div class="w-32">
125
+ <div class="flex justify-between text-xs text-gray-600 mb-1">
126
+ <span>Progress</span>
127
+ <span>${campaign.progress}%</span>
128
+ </div>
129
+ <div class="w-full bg-gray-200 rounded-full h-2">
130
+ <div class="bg-primary h-2 rounded-full" style="width: ${campaign.progress}%"></div>
131
+ </div>
132
+ </div>
133
+ <a href="/campaigns/${campaign.id}" class="text-primary hover:text-secondary">
134
+ <i data-feather="chevron-right" class="h-5 w-5"></i>
135
+ </a>
136
+ </div>
137
+ </div>
138
+ `;
139
+ campaignList.appendChild(campaignItem);
140
+ });
141
+
142
+ feather.replace();
143
+ });
144
+
145
+ function logout() {
146
+ localStorage.removeItem('isLoggedIn');
147
+ localStorage.removeItem('userData');
148
+ window.location.href = '/login';
149
+ }
150
+ </script>
151
+ </body>
152
+ </html>
dashboard.html CHANGED
@@ -32,11 +32,8 @@
32
  <i data-feather="compass" class="h-8 w-8 text-primary"></i>
33
  <span class="ml-2 text-xl font-bold text-gray-900">ClipsCompass</span>
34
  </div>
35
- <div class="hidden md:ml-6 md:flex md:space-x-8">
36
- <a href="/dashboard" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
37
- <a href="/campaigns" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Campaigns</a>
38
- <a href="/leaderboard" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Leaderboard</a>
39
- <a href="/goals" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Goals</a>
40
  </div>
41
  </div>
42
  <div class="flex items-center space-x-4">
@@ -51,7 +48,47 @@
51
  </div>
52
  </nav>
53
 
54
- <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  <div class="px-4 py-6 sm:px-0">
56
  <!-- Welcome Section -->
57
  <div class="mb-8">
 
32
  <i data-feather="compass" class="h-8 w-8 text-primary"></i>
33
  <span class="ml-2 text-xl font-bold text-gray-900">ClipsCompass</span>
34
  </div>
35
+ <div class="hidden md:ml-6 md:flex md:space-x-8" id="mainNavLinks">
36
+ <!-- Dynamic links will be inserted here by JavaScript -->
 
 
 
37
  </div>
38
  </div>
39
  <div class="flex items-center space-x-4">
 
48
  </div>
49
  </nav>
50
 
51
+ <script>
52
+ document.addEventListener('DOMContentLoaded', function() {
53
+ const mainNavLinks = document.getElementById('mainNavLinks');
54
+ const currentPath = window.location.pathname;
55
+
56
+ const navItems = [
57
+ { path: '/dashboard', name: 'Dashboard', icon: 'home' },
58
+ { path: '/campaigns', name: 'Campaigns', icon: 'target' },
59
+ { path: '/leaderboard', name: 'Leaderboard', icon: 'trending-up' },
60
+ { path: '/goals', name: 'Goals', icon: 'award' }
61
+ ];
62
+
63
+ let navHTML = '';
64
+ navItems.forEach(item => {
65
+ const isActive = currentPath === item.path;
66
+ navHTML += `
67
+ <a href="${item.path}" class="${isActive ? 'border-primary text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
68
+ <i data-feather="${item.icon}" class="h-4 w-4 mr-1"></i>
69
+ ${item.name}
70
+ </a>
71
+ `;
72
+ });
73
+
74
+ mainNavLinks.innerHTML = navHTML;
75
+ feather.replace();
76
+
77
+ // Load user data
78
+ const userData = JSON.parse(localStorage.getItem('userData') || '{}');
79
+ if (userData.fullName) {
80
+ document.getElementById('userName').textContent = userData.fullName;
81
+ document.getElementById('welcomeName').textContent = userData.fullName.split(' ')[0];
82
+ }
83
+ });
84
+
85
+ function logout() {
86
+ localStorage.removeItem('isLoggedIn');
87
+ localStorage.removeItem('userData');
88
+ window.location.href = '/login';
89
+ }
90
+ </script>
91
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
92
  <div class="px-4 py-6 sm:px-0">
93
  <!-- Welcome Section -->
94
  <div class="mb-8">
goals.html ADDED
@@ -0,0 +1,145 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Goals - ClipsCompass</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#3B82F6',
16
+ secondary: '#1E40AF',
17
+ accent: '#10B981'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-gray-50">
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-sm border-b">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <i data-feather="compass" class="h-8 w-8 text-primary"></i>
32
+ <span class="ml-2 text-xl font-bold text-gray-900">ClipsCompass</span>
33
+ </div>
34
+ <div class="hidden md:ml-6 md:flex md:space-x-8" id="mainNavLinks">
35
+ <!-- Dynamic links will be inserted here by JavaScript -->
36
+ </div>
37
+ </div>
38
+ <div class="flex items-center space-x-4">
39
+ <span class="text-sm text-gray-700" id="userName"></span>
40
+ <div class="relative">
41
+ <button id="userMenuButton" class="flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
42
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="User profile">
43
+ </button>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </nav>
49
+
50
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
51
+ <div class="px-4 py-6 sm:px-0">
52
+ <div class="flex justify-between items-center mb-8">
53
+ <h1 class="text-2xl font-bold text-gray-900">Your Goals</h1>
54
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary">
55
+ <i data-feather="plus" class="h-4 w-4 mr-2"></i> Set New Goal
56
+ </button>
57
+ </div>
58
+
59
+ <div class="bg-white shadow rounded-lg overflow-hidden">
60
+ <div class="divide-y divide-gray-200">
61
+ <!-- Goals will be populated dynamically -->
62
+ <div id="goalsList"></div>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <script>
69
+ document.addEventListener('DOMContentLoaded', function() {
70
+ feather.replace();
71
+
72
+ // Navigation setup
73
+ const mainNavLinks = document.getElementById('mainNavLinks');
74
+ const currentPath = window.location.pathname;
75
+
76
+ const navItems = [
77
+ { path: '/dashboard', name: 'Dashboard', icon: 'home' },
78
+ { path: '/campaigns', name: 'Campaigns', icon: 'target' },
79
+ { path: '/leaderboard', name: 'Leaderboard', icon: 'trending-up' },
80
+ { path: '/goals', name: 'Goals', icon: 'award' }
81
+ ];
82
+
83
+ let navHTML = '';
84
+ navItems.forEach(item => {
85
+ const isActive = currentPath === item.path;
86
+ navHTML += `
87
+ <a href="${item.path}" class="${isActive ? 'border-primary text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
88
+ <i data-feather="${item.icon}" class="h-4 w-4 mr-1"></i>
89
+ ${item.name}
90
+ </a>
91
+ `;
92
+ });
93
+
94
+ mainNavLinks.innerHTML = navHTML;
95
+ feather.replace();
96
+
97
+ // Load user data
98
+ const userData = JSON.parse(localStorage.getItem('userData') || '{}');
99
+ if (userData.fullName) {
100
+ document.getElementById('userName').textContent = userData.fullName;
101
+ }
102
+
103
+ // Load goals data (mock data)
104
+ const goals = [
105
+ { id: 1, title: 'Daily Target', current: 12, target: 15, period: 'day' },
106
+ { id: 2, title: 'Weekly Goal', current: 42, target: 50, period: 'week' },
107
+ { id: 3, title: 'Monthly Objective', current: 165, target: 200, period: 'month' }
108
+ ];
109
+
110
+ const goalsList = document.getElementById('goalsList');
111
+ goals.forEach(goal => {
112
+ const progress = Math.min(100, Math.round((goal.current / goal.target) * 100));
113
+ const goalItem = document.createElement('div');
114
+ goalItem.className = 'p-6 hover:bg-gray-50 transition-colors';
115
+ goalItem.innerHTML = `
116
+ <div>
117
+ <div class="flex justify-between items-center mb-2">
118
+ <h3 class="text-lg font-medium text-gray-900">${goal.title}</h3>
119
+ <span class="text-sm font-medium ${progress >= 100 ? 'text-accent' : 'text-primary'}">
120
+ ${goal.current}/${goal.target} (${progress}%)
121
+ </span>
122
+ </div>
123
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
124
+ <div class="bg-primary h-2.5 rounded-full" style="width: ${progress}%"></div>
125
+ </div>
126
+ <div class="mt-2 flex justify-between text-xs text-gray-500">
127
+ <span>${goal.period === 'day' ? 'Today' : goal.period === 'week' ? 'This week' : 'This month'}</span>
128
+ <span>${progress >= 100 ? 'Completed!' : `${goal.target - goal.current} to go`}</span>
129
+ </div>
130
+ </div>
131
+ `;
132
+ goalsList.appendChild(goalItem);
133
+ });
134
+
135
+ feather.replace();
136
+ });
137
+
138
+ function logout() {
139
+ localStorage.removeItem('isLoggedIn');
140
+ localStorage.removeItem('userData');
141
+ window.location.href = '/login';
142
+ }
143
+ </script>
144
+ </body>
145
+ </html>
index.html CHANGED
@@ -34,15 +34,41 @@
34
  <span class="ml-2 text-xl font-bold text-gray-900">ClipsCompass</span>
35
  </div>
36
  </div>
37
- <div class="flex items-center space-x-4">
38
- <a href="/login" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Login</a>
39
- <a href="/register" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-secondary">Register</a>
40
  </div>
41
  </div>
42
  </div>
43
  </nav>
44
 
45
- <!-- Hero Section -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  <div class="relative bg-white overflow-hidden">
47
  <div class="max-w-7xl mx-auto">
48
  <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
 
34
  <span class="ml-2 text-xl font-bold text-gray-900">ClipsCompass</span>
35
  </div>
36
  </div>
37
+ <div id="navLinks" class="flex items-center space-x-4">
38
+ <!-- Dynamic links will be inserted here by JavaScript -->
 
39
  </div>
40
  </div>
41
  </div>
42
  </nav>
43
 
44
+ <script>
45
+ document.addEventListener('DOMContentLoaded', function() {
46
+ const navLinks = document.getElementById('navLinks');
47
+ const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
48
+
49
+ if (isLoggedIn) {
50
+ navLinks.innerHTML = `
51
+ <a href="/dashboard" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
52
+ <a href="/campaigns" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Campaigns</a>
53
+ <a href="/leaderboard" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Leaderboard</a>
54
+ <a href="/goals" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Goals</a>
55
+ <button onclick="logout()" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-secondary">Logout</button>
56
+ `;
57
+ } else {
58
+ navLinks.innerHTML = `
59
+ <a href="/login" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Login</a>
60
+ <a href="/register" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-secondary">Register</a>
61
+ `;
62
+ }
63
+ });
64
+
65
+ function logout() {
66
+ localStorage.removeItem('isLoggedIn');
67
+ localStorage.removeItem('userData');
68
+ window.location.href = '/login';
69
+ }
70
+ </script>
71
+ <!-- Hero Section -->
72
  <div class="relative bg-white overflow-hidden">
73
  <div class="max-w-7xl mx-auto">
74
  <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
leaderboard.html ADDED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Leaderboard - ClipsCompass</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#3B82F6',
16
+ secondary: '#1E40AF',
17
+ accent: '#10B981'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-gray-50">
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-sm border-b">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <i data-feather="compass" class="h-8 w-8 text-primary"></i>
32
+ <span class="ml-2 text-xl font-bold text-gray-900">ClipsCompass</span>
33
+ </div>
34
+ <div class="hidden md:ml-6 md:flex md:space-x-8" id="mainNavLinks">
35
+ <!-- Dynamic links will be inserted here by JavaScript -->
36
+ </div>
37
+ </div>
38
+ <div class="flex items-center space-x-4">
39
+ <span class="text-sm text-gray-700" id="userName"></span>
40
+ <div class="relative">
41
+ <button id="userMenuButton" class="flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
42
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="User profile">
43
+ </button>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </nav>
49
+
50
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
51
+ <div class="px-4 py-6 sm:px-0">
52
+ <div class="mb-8">
53
+ <h1 class="text-2xl font-bold text-gray-900">Leaderboard</h1>
54
+ <p class="text-gray-600">Top performers this week</p>
55
+ </div>
56
+
57
+ <div class="bg-white shadow rounded-lg overflow-hidden">
58
+ <div class="divide-y divide-gray-200">
59
+ <!-- Leaderboard will be populated dynamically -->
60
+ <div id="leaderboardList"></div>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <script>
67
+ document.addEventListener('DOMContentLoaded', function() {
68
+ feather.replace();
69
+
70
+ // Navigation setup
71
+ const mainNavLinks = document.getElementById('mainNavLinks');
72
+ const currentPath = window.location.pathname;
73
+
74
+ const navItems = [
75
+ { path: '/dashboard', name: 'Dashboard', icon: 'home' },
76
+ { path: '/campaigns', name: 'Campaigns', icon: 'target' },
77
+ { path: '/leaderboard', name: 'Leaderboard', icon: 'trending-up' },
78
+ { path: '/goals', name: 'Goals', icon: 'award' }
79
+ ];
80
+
81
+ let navHTML = '';
82
+ navItems.forEach(item => {
83
+ const isActive = currentPath === item.path;
84
+ navHTML += `
85
+ <a href="${item.path}" class="${isActive ? 'border-primary text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
86
+ <i data-feather="${item.icon}" class="h-4 w-4 mr-1"></i>
87
+ ${item.name}
88
+ </a>
89
+ `;
90
+ });
91
+
92
+ mainNavLinks.innerHTML = navHTML;
93
+ feather.replace();
94
+
95
+ // Load user data
96
+ const userData = JSON.parse(localStorage.getItem('userData') || '{}');
97
+ if (userData.fullName) {
98
+ document.getElementById('userName').textContent = userData.fullName;
99
+ }
100
+
101
+ // Load leaderboard data (mock data)
102
+ const leaderboardData = [
103
+ { rank: 1, name: 'Sarah Chen', points: 1245, avatar: 'http://static.photos/people/200x200/1' },
104
+ { rank: 2, name: 'Alex Johnson', points: 1089, avatar: 'http://static.photos/people/200x200/2' },
105
+ { rank: 3, name: 'Maria Garcia', points: 975, avatar: 'http://static.photos/people/200x200/3' },
106
+ { rank: 4, name: 'James Wilson', points: 856, avatar: 'http://static.photos/people/200x200/4' },
107
+ { rank: 5, name: 'Emma Davis', points: 789, avatar: 'http://static.photos/people/200x200/5' }
108
+ ];
109
+
110
+ const leaderboardList = document.getElementById('leaderboardList');
111
+ leaderboardData.forEach(user => {
112
+ const isCurrentUser = user.name === userData.fullName;
113
+ const userItem = document.createElement('div');
114
+ userItem.className = `p-4 ${isCurrentUser ? 'bg-primary/10' : 'hover:bg-gray-50'} transition-colors`;
115
+ userItem.innerHTML = `
116
+ <div class="flex items-center justify-between">
117
+ <div class="flex items-center">
118
+ <span class="text-lg font-medium ${user.rank <= 3 ? 'text-yellow-500' : 'text-gray-700'} mr-4 w-6 text-center">${user.rank}</span>
119
+ <img class="h-10 w-10 rounded-full" src="${user.avatar}" alt="${user.name}">
120
+ <div class="ml-4">
121
+ <h3 class="text-sm font-medium text-gray-900">${user.name}</h3>
122
+ <p class="text-sm text-gray-500">${user.points} points</p>
123
+ </div>
124
+ </div>
125
+ ${user.rank <= 3 ? `<i data-feather="award" class="h-5 w-5 ${user.rank === 1 ? 'text-yellow-500' : user.rank === 2 ? 'text-gray-400' : 'text-yellow-700'}"></i>` : ''}
126
+ </div>
127
+ `;
128
+ leaderboardList.appendChild(userItem);
129
+ });
130
+
131
+ feather.replace();
132
+ });
133
+
134
+ function logout() {
135
+ localStorage.removeItem('isLoggedIn');
136
+ localStorage.removeItem('userData');
137
+ window.location.href = '/login';
138
+ }
139
+ </script>
140
+ </body>
141
+ </html>
login.html CHANGED
@@ -77,9 +77,28 @@
77
  </div>
78
  </form>
79
  </div>
80
-
81
  <script>
82
- feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  </script>
84
  </body>
85
  </html>
 
77
  </div>
78
  </form>
79
  </div>
 
80
  <script>
81
+ document.addEventListener('DOMContentLoaded', function() {
82
+ feather.replace();
83
+
84
+ // Handle login form submission
85
+ const loginForm = document.querySelector('form');
86
+ if (loginForm) {
87
+ loginForm.addEventListener('submit', function(e) {
88
+ e.preventDefault();
89
+
90
+ // Simulate successful login
91
+ localStorage.setItem('isLoggedIn', 'true');
92
+ localStorage.setItem('userData', JSON.stringify({
93
+ fullName: 'Demo User',
94
+ email: document.getElementById('email').value,
95
+ role: 'member'
96
+ }));
97
+
98
+ window.location.href = '/dashboard';
99
+ });
100
+ }
101
+ });
102
  </script>
103
  </body>
104
  </html>
register.html CHANGED
@@ -91,9 +91,28 @@
91
  </div>
92
  </form>
93
  </div>
94
-
95
  <script>
96
- feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  </script>
98
  </body>
99
  </html>
 
91
  </div>
92
  </form>
93
  </div>
 
94
  <script>
95
+ document.addEventListener('DOMContentLoaded', function() {
96
+ feather.replace();
97
+
98
+ // Handle registration form submission
99
+ const registerForm = document.querySelector('form');
100
+ if (registerForm) {
101
+ registerForm.addEventListener('submit', function(e) {
102
+ e.preventDefault();
103
+
104
+ // Simulate successful registration
105
+ localStorage.setItem('isLoggedIn', 'true');
106
+ localStorage.setItem('userData', JSON.stringify({
107
+ fullName: document.getElementById('fullName').value,
108
+ email: document.getElementById('email').value,
109
+ role: document.getElementById('role').value
110
+ }));
111
+
112
+ window.location.href = '/dashboard';
113
+ });
114
+ }
115
+ });
116
  </script>
117
  </body>
118
  </html>