Hugging Face's logo

Spaces:
Modzeroo
/
clipscompass-navigator
Running

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

modify it and make it responsive

Browse files
Files changed (1) hide show
  1. dashboard.html +78 -82
dashboard.html CHANGED
@@ -58,136 +58,132 @@
58
  <h1 class="text-2xl font-bold text-gray-900">Welcome back, <span id="welcomeName">John</span>!</h1>
59
  <p class="text-gray-600">Here's your campaign overview for today</p>
60
  </div>
61
-
62
  <!-- Stats Grid -->
63
- <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
64
- <div class="bg-white overflow-hidden shadow rounded-lg">
65
- <div class="px-4 py-5 sm:p-6">
66
  <div class="flex items-center">
67
- <div class="flex-shrink-0">
68
- <i data-feather="target" class="h-6 w-6 text-primary"></i>
 
 
 
 
69
  </div>
70
- <div class="ml-5 w-0 flex-1">
71
- <dl>
72
- <dt class="text-sm font-medium text-gray-500 truncate">Active Campaigns</dt>
73
- <dd class="text-lg font-medium text-gray-900" id="activeCampaigns">12</dd>
74
  </div>
75
  </div>
76
  </div>
77
- <div class="bg-white overflow-hidden shadow rounded-lg">
78
- <div class="px-4 py-5 sm:p-6">
79
  <div class="flex items-center">
80
- <div class="flex-shrink-0">
81
- <i data-feather="check-circle" class="h-6 w-6 text-accent"></i>
 
 
 
 
82
  </div>
83
- <div class="ml-5 w-0 flex-1">
84
- <dl>
85
- <dt class="text-sm font-medium text-gray-500 truncate">Completed Today</dt>
86
- <dd class="text-lg font-medium text-gray-900" id="completedToday">8</dd>
87
  </div>
88
  </div>
89
  </div>
90
- <div class="bg-white overflow-hidden shadow rounded-lg">
91
- <div class="px-4 py-5 sm:p-6">
92
  <div class="flex items-center">
93
- <div class="flex-shrink-0">
94
- <i data-feather="trending-up" class="h-6 w-6 text-primary"></i>
 
 
 
 
95
  </div>
96
- <div class="ml-5 w-0 flex-1">
97
- <dl>
98
- <dt class="text-sm font-medium text-gray-500 truncate">Weekly Progress</dt>
99
- <dd class="text-lg font-medium text-gray-900" id="weeklyProgress">75%</dd>
100
  </div>
101
  </div>
102
  </div>
103
- <div class="bg-white overflow-hidden shadow rounded-lg">
104
- <div class="px-4 py-5 sm:p-6">
105
  <div class="flex items-center">
106
- <div class="flex-shrink-0">
107
- <i data-feather="award" class="h-6 w-6 text-yellow-500"></i>
 
 
 
 
108
  </div>
109
- <div class="ml-5 w-0 flex-1">
110
- <dl>
111
- <dt class="text-sm font-medium text-gray-500 truncate">Team Rank</dt>
112
- <dd class="text-lg font-medium text-gray-900" id="teamRank">#2</dd>
113
  </div>
114
  </div>
115
  </div>
116
  </div>
117
-
118
  <!-- Progress Section -->
119
- <div class="mt-8 grid grid-cols-1 gap-5 lg:grid-cols-2">
120
  <!-- Personal Progress -->
121
  <div class="bg-white shadow rounded-lg">
122
- <div class="px-4 py-5 sm:p-6">
123
- <h3 class="text-lg leading-6 font-medium text-gray-900">Personal Progress</h3>
124
- <div class="mt-4 space-y-4">
125
  <div>
126
- <div class="flex justify-between text-sm text-gray-600 mb-1">
127
  <span>Daily Goal</span>
128
  <span id="dailyGoalProgress">8/10</span>
129
  </div>
130
- <div class="w-full bg-gray-200 rounded-full h-2">
131
- <div class="bg-primary h-2 rounded-full" style="width: 80%"></div>
132
- </div>
133
  <div>
134
- <div class="flex justify-between text-sm text-gray-600 mb-1">
135
  <span>Weekly Target</span>
136
  <span id="weeklyTargetProgress">35/50</span>
137
  </div>
138
- <div class="w-full bg-gray-200 rounded-full h-2">
139
- <div class="bg-accent h-2 rounded-full" style="width: 70%"></div>
140
- </div>
141
  <div>
142
- <div class="flex justify-between text-sm text-gray-600 mb-1">
143
  <span>Monthly Objective</span>
144
  <span id="monthlyObjectiveProgress">120/200</span>
145
  </div>
146
- <div class="w-full bg-gray-200 rounded-full h-2">
147
- <div class="bg-secondary h-2 rounded-full" style="width: 60%"></div>
148
- </div>
149
  </div>
150
  </div>
151
-
152
  <!-- Recent Activity -->
153
  <div class="bg-white shadow rounded-lg">
154
- <div class="px-4 py-5 sm:p-6">
155
- <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Activity</h3>
156
- <div class="mt-4 space-y-3" id="recentActivity">
157
- <div class="flex items-center text-sm">
158
- <i data-feather="check" class="h-4 w-4 text-accent mr-2"></i>
159
- <span>Completed campaign "Tech News Roundup"</span>
160
  </div>
161
- <div class="flex items-center text-sm">
162
- <i data-feather="plus" class="h-4 w-4 text-primary mr-2"></i>
163
- <span>Started new campaign "Social Media Highlights"</span>
164
  </div>
165
- <div class="flex items-center text-sm">
166
- <i data-feather="award" class="h-4 w-4 text-yellow-500 mr-2"></i>
167
- <span>Reached weekly goal milestone</span>
168
  </div>
169
- </div>
170
  </div>
171
  </div>
172
  </div>
173
-
174
  <!-- Quick Actions -->
175
- <div class="mt-8">
176
- <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Quick Actions</h3>
177
- <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
178
- <a href="/campaigns" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
179
- <i data-feather="plus" class="h-4 w-4 mr-2"></i>
180
- New Campaign
181
- </a>
182
- <a href="/goals" class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
183
- <i data-feather="target" class="h-4 w-4 mr-2"></i>
184
- Set Goals
185
- </a>
186
- <a href="/leaderboard" class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
187
- <i data-feather="trending-up" class="h-4 w-4 mr-2"></i>
188
- View Leaderboard
189
- </a>
190
- </div>
191
  </div>
192
  </div>
193
 
 
58
  <h1 class="text-2xl font-bold text-gray-900">Welcome back, <span id="welcomeName">John</span>!</h1>
59
  <p class="text-gray-600">Here's your campaign overview for today</p>
60
  </div>
 
61
  <!-- Stats Grid -->
62
+ <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
63
+ <div class="bg-white overflow-hidden shadow rounded-lg transition-transform hover:scale-105">
64
+ <div class="p-4 sm:p-6">
65
  <div class="flex items-center">
66
+ <div class="flex-shrink-0 bg-primary/10 p-2 rounded-full">
67
+ <i data-feather="target" class="h-5 w-5 sm:h-6 sm:w-6 text-primary"></i>
68
+ </div>
69
+ <div class="ml-4 flex-1 min-w-0">
70
+ <dt class="text-xs sm:text-sm font-medium text-gray-500 truncate">Active Campaigns</dt>
71
+ <dd class="text-base sm:text-lg font-semibold text-gray-900" id="activeCampaigns">12</dd>
72
  </div>
 
 
 
 
73
  </div>
74
  </div>
75
  </div>
76
+ <div class="bg-white overflow-hidden shadow rounded-lg transition-transform hover:scale-105">
77
+ <div class="p-4 sm:p-6">
78
  <div class="flex items-center">
79
+ <div class="flex-shrink-0 bg-accent/10 p-2 rounded-full">
80
+ <i data-feather="check-circle" class="h-5 w-5 sm:h-6 sm:w-6 text-accent"></i>
81
+ </div>
82
+ <div class="ml-4 flex-1 min-w-0">
83
+ <dt class="text-xs sm:text-sm font-medium text-gray-500 truncate">Completed Today</dt>
84
+ <dd class="text-base sm:text-lg font-semibold text-gray-900" id="completedToday">8</dd>
85
  </div>
 
 
 
 
86
  </div>
87
  </div>
88
  </div>
89
+ <div class="bg-white overflow-hidden shadow rounded-lg transition-transform hover:scale-105">
90
+ <div class="p-4 sm:p-6">
91
  <div class="flex items-center">
92
+ <div class="flex-shrink-0 bg-primary/10 p-2 rounded-full">
93
+ <i data-feather="trending-up" class="h-5 w-5 sm:h-6 sm:w-6 text-primary"></i>
94
+ </div>
95
+ <div class="ml-4 flex-1 min-w-0">
96
+ <dt class="text-xs sm:text-sm font-medium text-gray-500 truncate">Weekly Progress</dt>
97
+ <dd class="text-base sm:text-lg font-semibold text-gray-900" id="weeklyProgress">75%</dd>
98
  </div>
 
 
 
 
99
  </div>
100
  </div>
101
  </div>
102
+ <div class="bg-white overflow-hidden shadow rounded-lg transition-transform hover:scale-105">
103
+ <div class="p-4 sm:p-6">
104
  <div class="flex items-center">
105
+ <div class="flex-shrink-0 bg-yellow-500/10 p-2 rounded-full">
106
+ <i data-feather="award" class="h-5 w-5 sm:h-6 sm:w-6 text-yellow-500"></i>
107
+ </div>
108
+ <div class="ml-4 flex-1 min-w-0">
109
+ <dt class="text-xs sm:text-sm font-medium text-gray-500 truncate">Team Rank</dt>
110
+ <dd class="text-base sm:text-lg font-semibold text-gray-900" id="teamRank">#2</dd>
111
  </div>
 
 
 
 
112
  </div>
113
  </div>
114
  </div>
115
  </div>
 
116
  <!-- Progress Section -->
117
+ <div class="mt-6 sm:mt-8 grid grid-cols-1 gap-4 sm:gap-5 lg:grid-cols-2">
118
  <!-- Personal Progress -->
119
  <div class="bg-white shadow rounded-lg">
120
+ <div class="p-4 sm:p-6">
121
+ <h3 class="text-base sm:text-lg leading-6 font-medium text-gray-900">Personal Progress</h3>
122
+ <div class="mt-3 sm:mt-4 space-y-3 sm:space-y-4">
123
  <div>
124
+ <div class="flex justify-between text-xs sm:text-sm text-gray-600 mb-1">
125
  <span>Daily Goal</span>
126
  <span id="dailyGoalProgress">8/10</span>
127
  </div>
128
+ <div class="w-full bg-gray-200 rounded-full h-1.5 sm:h-2">
129
+ <div class="bg-primary h-1.5 sm:h-2 rounded-full" style="width: 80%"></div>
130
+ </div>
131
  <div>
132
+ <div class="flex justify-between text-xs sm:text-sm text-gray-600 mb-1">
133
  <span>Weekly Target</span>
134
  <span id="weeklyTargetProgress">35/50</span>
135
  </div>
136
+ <div class="w-full bg-gray-200 rounded-full h-1.5 sm:h-2">
137
+ <div class="bg-accent h-1.5 sm:h-2 rounded-full" style="width: 70%"></div>
138
+ </div>
139
  <div>
140
+ <div class="flex justify-between text-xs sm:text-sm text-gray-600 mb-1">
141
  <span>Monthly Objective</span>
142
  <span id="monthlyObjectiveProgress">120/200</span>
143
  </div>
144
+ <div class="w-full bg-gray-200 rounded-full h-1.5 sm:h-2">
145
+ <div class="bg-secondary h-1.5 sm:h-2 rounded-full" style="width: 60%"></div>
146
+ </div>
147
  </div>
148
  </div>
 
149
  <!-- Recent Activity -->
150
  <div class="bg-white shadow rounded-lg">
151
+ <div class="p-4 sm:p-6">
152
+ <h3 class="text-base sm:text-lg leading-6 font-medium text-gray-900">Recent Activity</h3>
153
+ <div class="mt-3 sm:mt-4 space-y-2 sm:space-y-3" id="recentActivity">
154
+ <div class="flex items-center text-xs sm:text-sm">
155
+ <i data-feather="check" class="h-3 w-3 sm:h-4 sm:w-4 text-accent mr-2"></i>
156
+ <span class="truncate">Completed campaign "Tech News Roundup"</span>
157
  </div>
158
+ <div class="flex items-center text-xs sm:text-sm">
159
+ <i data-feather="plus" class="h-3 w-3 sm:h-4 sm:w-4 text-primary mr-2"></i>
160
+ <span class="truncate">Started new campaign "Social Media Highlights"</span>
161
  </div>
162
+ <div class="flex items-center text-xs sm:text-sm">
163
+ <i data-feather="award" class="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500 mr-2"></i>
164
+ <span class="truncate">Reached weekly goal milestone</span>
165
  </div>
166
+ </div>
167
  </div>
168
  </div>
169
  </div>
 
170
  <!-- Quick Actions -->
171
+ <div class="mt-6 sm:mt-8">
172
+ <h3 class="text-base sm:text-lg leading-6 font-medium text-gray-900 mb-3 sm:mb-4">Quick Actions</h3>
173
+ <div class="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
174
+ <a href="/campaigns" class="inline-flex items-center justify-center px-3 py-1.5 sm:px-4 sm:py-2 border border-transparent text-xs sm:text-sm font-medium rounded-md text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
175
+ <i data-feather="plus" class="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2"></i>
176
+ New Campaign
177
+ </a>
178
+ <a href="/goals" class="inline-flex items-center justify-center px-3 py-1.5 sm:px-4 sm:py-2 border border-gray-300 text-xs sm:text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
179
+ <i data-feather="target" class="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2"></i>
180
+ Set Goals
181
+ </a>
182
+ <a href="/leaderboard" class="inline-flex items-center justify-center px-3 py-1.5 sm:px-4 sm:py-2 border border-gray-300 text-xs sm:text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
183
+ <i data-feather="trending-up" class="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2"></i>
184
+ View Leaderboard
185
+ </a>
186
+ </div>
187
  </div>
188
  </div>
189