Hugging Face's logo

Spaces:
Modzeroo
/
clipscompass-navigator
Running

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

We’re building an internal campaign management web app for a small 6-member clipping/content team called ClipsCompass.

Browse files

The app includes authentication (login/register), dashboard with leaderboard (daily/weekly/monthly), campaign tracking (added/removed/updates), personal goals, and phase progress bars.
There are two user roles — Team Leader (can manage members, assign/update campaigns) and Member (can view tasks, update progress).
Tech stack: of your choice but understand it we need a database and fully dynamic website.
The design should be minimal, functional, and team-focused.
Your job: generate, optimize, and fix frontend/backend code step-by-step, keeping the system lightweight and easy to maintain.

Files changed (5) hide show
  1. README.md +7 -3
  2. dashboard.html +216 -0
  3. index.html +155 -19
  4. login.html +85 -0
  5. register.html +99 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Clipscompass Navigator
3
- emoji: 🔥
4
  colorFrom: purple
5
  colorTo: purple
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: ClipsCompass Navigator 🧭
 
3
  colorFrom: purple
4
  colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
dashboard.html ADDED
@@ -0,0 +1,216 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Dashboard - 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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#3B82F6',
17
+ secondary: '#1E40AF',
18
+ accent: '#10B981'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body class="bg-gray-50">
26
+ <!-- Navigation -->
27
+ <nav class="bg-white shadow-sm border-b">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-16">
30
+ <div class="flex items-center">
31
+ <div class="flex-shrink-0 flex items-center">
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">
43
+ <span class="text-sm text-gray-700" id="userName">John Doe</span>
44
+ <div class="relative">
45
+ <button id="userMenuButton" class="flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
46
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="User profile">
47
+ </button>
48
+ </div>
49
+ </div>
50
+ </div>
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">
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
+
194
+ <script>
195
+ feather.replace();
196
+
197
+ // Mock data for dashboard
198
+ document.addEventListener('DOMContentLoaded', function() {
199
+ // Simulate API call to get user data
200
+ setTimeout(() => {
201
+ document.getElementById('userName').textContent = 'Sarah Chen';
202
+ document.getElementById('welcomeName').textContent = 'Sarah';
203
+ document.getElementById('activeCampaigns').textContent = '15';
204
+ document.getElementById('completedToday').textContent = '12';
205
+ document.getElementById('weeklyProgress').textContent = '85%';
206
+ document.getElementById('teamRank').textContent = '#1';
207
+
208
+ // Update progress bars
209
+ document.getElementById('dailyGoalProgress').textContent = '12/15';
210
+ document.getElementById('weeklyTargetProgress').textContent = '42/50';
211
+ document.getElementById('monthlyObjectiveProgress').textContent = '165/200';
212
+ }, 500);
213
+ });
214
+ </script>
215
+ </body>
216
+ </html>
index.html CHANGED
@@ -1,19 +1,155 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>ClipsCompass - Campaign Management</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 src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#3B82F6',
18
+ secondary: '#1E40AF',
19
+ accent: '#10B981'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ </head>
26
+ <body class="bg-gray-50 min-h-screen">
27
+ <!-- Navigation -->
28
+ <nav class="bg-white shadow-sm border-b">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <div class="flex justify-between h-16">
31
+ <div class="flex items-center">
32
+ <div class="flex-shrink-0 flex items-center">
33
+ <i data-feather="compass" class="h-8 w-8 text-primary"></i>
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">
49
+ <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
50
+ <div class="sm:text-center lg:text-left">
51
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
52
+ <span class="block">Streamline Your</span>
53
+ <span class="block text-primary">Content Campaigns</span>
54
+ </h1>
55
+ <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
56
+ ClipsCompass helps your clipping team manage campaigns, track progress, and achieve goals with precision and clarity.
57
+ </p>
58
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
59
+ <div class="rounded-md shadow">
60
+ <a href="/register" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-secondary md:py-4 md:text-lg md:px-10">
61
+ Get Started
62
+ </a>
63
+ </div>
64
+ <div class="mt-3 sm:mt-0 sm:ml-3">
65
+ <a href="/login" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
66
+ Sign In
67
+ </a>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </main>
72
+ </div>
73
+ </div>
74
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
75
+ <div class="h-56 w-full bg-gradient-to-r from-primary to-accent sm:h-72 md:h-96 lg:w-full lg:h-full"></div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Features Section -->
80
+ <div class="py-12 bg-white">
81
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
82
+ <div class="lg:text-center">
83
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Features</h2>
84
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
85
+ Built for Content Teams
86
+ </p>
87
+ </div>
88
+
89
+ <div class="mt-10">
90
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
91
+ <div class="flex">
92
+ <div class="flex-shrink-0">
93
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
94
+ <i data-feather="trending-up"></i>
95
+ </div>
96
+ </div>
97
+ <div class="ml-4">
98
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Leaderboards</h3>
99
+ <p class="mt-2 text-base text-gray-500">
100
+ Track daily, weekly, and monthly performance with interactive leaderboards.
101
+ </p>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="flex">
106
+ <div class="flex-shrink-0">
107
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
108
+ <i data-feather="target"></i>
109
+ </div>
110
+ </div>
111
+ <div class="ml-4">
112
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Campaign Tracking</h3>
113
+ <p class="mt-2 text-base text-gray-500">
114
+ Manage campaigns with real-time updates and progress tracking.
115
+ </p>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="flex">
120
+ <div class="flex-shrink-0">
121
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
122
+ <i data-feather="award"></i>
123
+ </div>
124
+ </div>
125
+ <div class="ml-4">
126
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Personal Goals</h3>
127
+ <p class="mt-2 text-base text-gray-500">
128
+ Set and achieve personal targets with visual progress indicators.
129
+ </p>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="flex">
134
+ <div class="flex-shrink-0">
135
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
136
+ <i data-feather="users"></i>
137
+ </div>
138
+ </div>
139
+ <div class="ml-4">
140
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Role Management</h3>
141
+ <p class="mt-2 text-base text-gray-500">
142
+ Team Leaders can manage members and assign campaigns efficiently.
143
+ </p>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <script>
152
+ feather.replace();
153
+ </script>
154
+ </body>
155
+ </html>
login.html ADDED
@@ -0,0 +1,85 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Login - 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 min-h-screen flex items-center justify-center">
25
+ <div class="max-w-md w-full space-y-8">
26
+ <div>
27
+ <div class="flex justify-center">
28
+ <i data-feather="compass" class="h-12 w-12 text-primary"></i>
29
+ </div>
30
+ <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
31
+ Sign in to your account
32
+ </h2>
33
+ <p class="mt-2 text-center text-sm text-gray-600">
34
+ Or
35
+ <a href="/register" class="font-medium text-primary hover:text-secondary">
36
+ create a new account
37
+ </a>
38
+ </p>
39
+ </div>
40
+ <form class="mt-8 space-y-6" action="/api/login" method="POST">
41
+ <div class="rounded-md shadow-sm -space-y-px">
42
+ <div>
43
+ <label for="email" class="sr-only">Email address</label>
44
+ <input id="email" name="email" type="email" autocomplete="email" required
45
+ class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
46
+ placeholder="Email address">
47
+ </div>
48
+ <div>
49
+ <label for="password" class="sr-only">Password</label>
50
+ <input id="password" name="password" type="password" autocomplete="current-password" required
51
+ class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
52
+ placeholder="Password">
53
+ </div>
54
+ </div>
55
+
56
+ <div class="flex items-center justify-between">
57
+ <div class="flex items-center">
58
+ <input id="remember-me" name="remember-me" type="checkbox"
59
+ class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
60
+ <label for="remember-me" class="ml-2 block text-sm text-gray-900">
61
+ Remember me
62
+ </label>
63
+ </div>
64
+
65
+ <div class="text-sm">
66
+ <a href="#" class="font-medium text-primary hover:text-secondary">
67
+ Forgot your password?
68
+ </a>
69
+ </div>
70
+ </div>
71
+
72
+ <div>
73
+ <button type="submit"
74
+ class="group relative w-full flex justify-center py-2 px-4 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">
75
+ Sign in
76
+ </button>
77
+ </div>
78
+ </form>
79
+ </div>
80
+
81
+ <script>
82
+ feather.replace();
83
+ </script>
84
+ </body>
85
+ </html>
register.html ADDED
@@ -0,0 +1,99 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Register - 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 min-h-screen flex items-center justify-center">
25
+ <div class="max-w-md w-full space-y-8">
26
+ <div>
27
+ <div class="flex justify-center">
28
+ <i data-feather="compass" class="h-12 w-12 text-primary"></i>
29
+ </div>
30
+ <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
31
+ Create your account
32
+ </h2>
33
+ <p class="mt-2 text-center text-sm text-gray-600">
34
+ Or
35
+ <a href="/login" class="font-medium text-primary hover:text-secondary">
36
+ sign in to existing account
37
+ </a>
38
+ </p>
39
+ </div>
40
+ <form class="mt-8 space-y-6" action="/api/register" method="POST">
41
+ <div class="rounded-md shadow-sm space-y-4">
42
+ <div>
43
+ <label for="fullName" class="sr-only">Full Name</label>
44
+ <input id="fullName" name="fullName" type="text" autocomplete="name" required
45
+ class="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
46
+ placeholder="Full Name">
47
+ </div>
48
+ <div>
49
+ <label for="email" class="sr-only">Email address</label>
50
+ <input id="email" name="email" type="email" autocomplete="email" required
51
+ class="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
52
+ placeholder="Email address">
53
+ </div>
54
+ <div>
55
+ <label for="role" class="sr-only">Role</label>
56
+ <select id="role" name="role" required
57
+ class="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm">
58
+ <option value="">Select Role</option>
59
+ <option value="member">Member</option>
60
+ <option value="leader">Team Leader</option>
61
+ </select>
62
+ </div>
63
+ <div>
64
+ <label for="password" class="sr-only">Password</label>
65
+ <input id="password" name="password" type="password" autocomplete="new-password" required
66
+ class="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
67
+ placeholder="Password">
68
+ </div>
69
+ <div>
70
+ <label for="confirmPassword" class="sr-only">Confirm Password</label>
71
+ <input id="confirmPassword" name="confirmPassword" type="password" autocomplete="new-password" required
72
+ class="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
73
+ placeholder="Confirm Password">
74
+ </div>
75
+ </div>
76
+
77
+ <div class="flex items-center">
78
+ <input id="agree-terms" name="agree-terms" type="checkbox" required
79
+ class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
80
+ <label for="agree-terms" class="ml-2 block text-sm text-gray-900">
81
+ I agree to the
82
+ <a href="#" class="font-medium text-primary hover:text-secondary">terms and conditions</a>
83
+ </label>
84
+ </div>
85
+
86
+ <div>
87
+ <button type="submit"
88
+ class="group relative w-full flex justify-center py-2 px-4 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">
89
+ Create Account
90
+ </button>
91
+ </div>
92
+ </form>
93
+ </div>
94
+
95
+ <script>
96
+ feather.replace();
97
+ </script>
98
+ </body>
99
+ </html>