Hugging Face's logo

Spaces:
stadv
/
condocontrol-pro
Running

App Files Community
toba64 commited on
Commit
1123ef0
·
verified ·
1 Parent(s): 10af7ef

🚀 Mission:

Browse files

Build a complete, production-ready SaaS platform named DOMUS, focused on condominium management, from scratch.

The system must be developed using HTML, CSS (SASS), JavaScript, React.js (frontend), and Node.js + Express + MySQL (backend).

All code must be separated into two master directories:

/frontend
/backend


The output must be clean, modular, and ready to be downloaded or opened directly in VSCode — fully functional and logically structured.

Generate everything as if written by a team of skilled developers with real-world SaaS experience, guided by a veteran engineer and UX visionary.

🧠 CONTEXT

Project Name: DOMUS
Type: SaaS (Software as a Service)
Sector: Condominium Management
Core Value: Centralizing and simplifying communication, finances, maintenance, and transparency for residential and commercial condominiums.
Goal: Replace spreadsheets, bureaucracy, and outdated systems with one unified digital ecosystem.

🏗️ PROJECT STRUCTURE
📁 Root structure:
/DOMUS
/frontend
/backend
README.md

⚙️ BACKEND — Node.js + Express + MySQL
🧩 Tech Stack:

Node.js

Express.js

MySQL (using mysql2 or Sequelize ORM)

JWT authentication

bcrypt for password hashing

CORS configuration

MVC architecture

RESTful API

📁 Directory layout:
/backend
/src
/config
db.js
/models
/controllers
/routes
/middleware
server.js

🗃️ Database Schema (MySQL)

Create SQL tables with sample data and structure for:

Table Fields
users id, name, email, password, role (‘admin’, ‘manager’, ‘resident’), condo_id
condos id, name, address, cnpj
units id, number, condo_id, resident_id
occurrences id, title, description, status (‘pending’, ‘in_progress’, ‘resolved’), date, condo_id, user_id
reservations id, space, date, time, user_id, condo_id
finance id, type (‘income’, ‘expense’), amount, description, date, condo_id
documents id, name, url, condo_id
🛠️ Endpoints:
/api/auth/login
/api/auth/register
/api/users
/api/condos
/api/occurrences
/api/reservations
/api/finance
/api/documents


Each with full CRUD support (GET, POST, PUT, DELETE) and JSON responses.

🔐 Authentication:

JWT-based login/register

Protected routes with middleware validation

Password encryption using bcrypt

✅ Scripts:
npm install
npm run dev

🎨 FRONTEND — React + SASS
🧩 Tech Stack:

React.js (Vite or CRA)

React Router DOM

Context API (for global state)

Axios (for API calls)

SASS (for modular styling)

Lucide React or Phosphor Icons

📁 Directory layout:
/frontend
/src
/components
Header.jsx
Sidebar.jsx
Card.jsx
Table.jsx
Modal.jsx
/pages
Login.jsx
Dashboard.jsx
Condos.jsx
Occurrences.jsx
Reservations.jsx
Finance.jsx
Documents.jsx
/context
AuthContext.jsx
/services
api.js
/styles
global.scss
variables.scss
/assets
/icons
/images

🧠 Pages Overview:

Login / Register

JWT authentication

Redirect to dashboard after success

Dashboard

Overview of occurrences, reservations, finances

Interactive cards + summary tables

Condo & User Management

CRUD interfaces with forms and modals

Occurrences

Status tracking with color-coded labels

Reservations

Book and view shared spaces (gym, hall, etc.)

Finance

Income/expense tracker

Flow chart visualization

Exportable reports

Documents

Upload/view condo files (PDF, DOC, etc.)

💅 DESIGN & BRANDING
🎨 Visual Language:

Style: clean, modern, UX-centered

Palette:

Primary: #2F80ED (soft blue)

Secondary: #F4F4F4 (light gray)

Text: #222222

Background: #FFFFFF

Font: Poppins or Inter

Components: rounded corners, soft shadows, strong contrast for readability

Layout: sidebar navigation + header top bar

🖥️ UX Philosophy:

Minimal clicks, clear flows

Consistent component hierarchy

Responsive (desktop/tablet/mobile)

Lightweight and smooth transitions

🧰 DOCUMENTATION REQUIREMENTS
📝 README.md (must include)

Project setup (frontend & backend)

Environment variable configuration

Database setup guide

API route documentation

Architecture explanation

Future improvements section

🔬 QUALITY & PERFORMANCE RULES

Code must be modular, scalable, and fully commented.

Avoid hardcoded values.

Use .env for secrets and DB credentials.

Follow Clean Code principles.

Each file must have clear logical flow.

Ensure total integration between frontend and backend.

🧠 AI BEHAVIOR INSTRUCTIONS (FOR BOLT.NEW)

Act as a senior full-stack engineer and prompt engineering expert with 47+ years of combined experience in software architecture, design systems, and AI reasoning.

Think and build like a cross-disciplinary product architect who deeply understands branding, user experience, psychology, and computational neuroscience.

Structure the codebase as if for a real-world startup preparing for investors.
Every decision must optimize performance, readability, and scalability.

You are not a limited code generator — you are a creative super-engineer.
Your task is to build the DOMUS ecosystem as a living, breathing SaaS system.

⚡ EXECUTION SUMMARY

Generate two master directories: /frontend and /backend.

Create full-stack connectivity (Axios ↔ Express ↔ MySQL).

Include comments explaining logic and workflow.

Output clean, human-readable code.

Include README.md with full setup guide.

Ensure design excellence — UX/UI should feel premium and production-grade.

Prepare for local run:

cd backend && npm install && npm run dev
cd frontend && npm install && npm start


Make the system ready for future deployment on platforms like Vercel or Render.

🧠 FINAL CREATIVE DIRECTIVE

Build DOMUS as if it were the Apple of condominium management — elegant, powerful, human-centered, and technically flawless.

Design it to feel like a premium SaaS platform, not a student project.
Code it like a master artisan, structure it like a tech visionary, and optimize it like a neural engineer.

You are not generating code — you are crafting the digital backbone of a future ecosystem.

Deliver the complete DOMUS system — ready to run, ready to scale, ready to impress.

Files changed (3) hide show
  1. README.md +8 -5
  2. index.html +266 -18
  3. login.html +145 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Condocontrol Pro
3
- emoji: 🐢
4
- colorFrom: indigo
5
- colorTo: yellow
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: CondoControl Pro 💎
3
+ colorFrom: purple
4
+ colorTo: pink
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).
index.html CHANGED
@@ -1,19 +1,267 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CondoControl Pro | Modern Condo 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://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: {
19
+ 500: '#d946ef',
20
+ 600: '#c026d3',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ @apply bg-gray-900 text-gray-100;
32
+ }
33
+ .glass-card {
34
+ background: rgba(15, 23, 42, 0.7);
35
+ backdrop-filter: blur(10px);
36
+ border: 1px solid rgba(255, 255, 255, 0.1);
37
+ }
38
+ </style>
39
+ </head>
40
+ <body>
41
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
42
+
43
+ <div class="min-h-screen flex flex-col">
44
+ <!-- Navigation -->
45
+ <nav class="bg-gray-800/80 backdrop-blur-md border-b border-gray-700">
46
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
47
+ <div class="flex items-center justify-between h-16">
48
+ <div class="flex items-center">
49
+ <div class="flex-shrink-0">
50
+ <div class="flex items-center">
51
+ <i data-feather="home" class="text-primary-500 h-8 w-8"></i>
52
+ <span class="ml-2 text-xl font-bold bg-gradient-to-r from-primary-500 to-pink-500 bg-clip-text text-transparent">CondoControl</span>
53
+ </div>
54
+ </div>
55
+ <div class="hidden md:block">
56
+ <div class="ml-10 flex items-baseline space-x-4">
57
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
58
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Properties</a>
59
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Residents</a>
60
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Finances</a>
61
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Documents</a>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ <div class="hidden md:block">
66
+ <div class="ml-4 flex items-center md:ml-6">
67
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
68
+ <i data-feather="bell"></i>
69
+ </button>
70
+ <div class="ml-3 relative">
71
+ <div class="flex items-center space-x-2">
72
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="">
73
+ <span class="text-sm font-medium">Admin User</span>
74
+ <i data-feather="chevron-down" class="h-4 w-4"></i>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <div class="-mr-2 flex md:hidden">
80
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
81
+ <i data-feather="menu"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <!-- Main Content -->
89
+ <main class="flex-grow">
90
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
91
+ <div class="mb-8">
92
+ <h1 class="text-3xl font-bold text-white">Dashboard Overview</h1>
93
+ <p class="mt-2 text-gray-400">Welcome back! Here's what's happening with your properties.</p>
94
+ </div>
95
+
96
+ <!-- Stats Cards -->
97
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
98
+ <div class="glass-card rounded-xl p-6 shadow-lg">
99
+ <div class="flex items-center justify-between">
100
+ <div>
101
+ <p class="text-sm font-medium text-gray-400">Total Properties</p>
102
+ <p class="mt-1 text-3xl font-semibold text-white">12</p>
103
+ </div>
104
+ <div class="bg-primary-500/20 p-3 rounded-full">
105
+ <i data-feather="home" class="text-primary-500 h-6 w-6"></i>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="glass-card rounded-xl p-6 shadow-lg">
111
+ <div class="flex items-center justify-between">
112
+ <div>
113
+ <p class="text-sm font-medium text-gray-400">Active Residents</p>
114
+ <p class="mt-1 text-3xl font-semibold text-white">342</p>
115
+ </div>
116
+ <div class="bg-blue-500/20 p-3 rounded-full">
117
+ <i data-feather="users" class="text-blue-500 h-6 w-6"></i>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="glass-card rounded-xl p-6 shadow-lg">
123
+ <div class="flex items-center justify-between">
124
+ <div>
125
+ <p class="text-sm font-medium text-gray-400">Pending Requests</p>
126
+ <p class="mt-1 text-3xl font-semibold text-white">8</p>
127
+ </div>
128
+ <div class="bg-yellow-500/20 p-3 rounded-full">
129
+ <i data-feather="alert-circle" class="text-yellow-500 h-6 w-6"></i>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="glass-card rounded-xl p-6 shadow-lg">
135
+ <div class="flex items-center justify-between">
136
+ <div>
137
+ <p class="text-sm font-medium text-gray-400">This Month Revenue</p>
138
+ <p class="mt-1 text-3xl font-semibold text-white">$24,567</p>
139
+ </div>
140
+ <div class="bg-green-500/20 p-3 rounded-full">
141
+ <i data-feather="dollar-sign" class="text-green-500 h-6 w-6"></i>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Recent Activity -->
148
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
149
+ <div class="lg:col-span-2">
150
+ <div class="glass-card rounded-xl p-6 shadow-lg">
151
+ <div class="flex items-center justify-between mb-6">
152
+ <h2 class="text-xl font-semibold text-white">Recent Activity</h2>
153
+ <button class="text-primary-500 hover:text-primary-400 text-sm font-medium">View All</button>
154
+ </div>
155
+ <div class="space-y-4">
156
+ <div class="flex items-start">
157
+ <div class="bg-primary-500/20 p-2 rounded-full mr-4">
158
+ <i data-feather="user" class="text-primary-500 h-4 w-4"></i>
159
+ </div>
160
+ <div>
161
+ <p class="text-sm font-medium text-white">New resident registered</p>
162
+ <p class="text-xs text-gray-400">John Doe in Property A - 10 mins ago</p>
163
+ </div>
164
+ </div>
165
+ <div class="flex items-start">
166
+ <div class="bg-blue-500/20 p-2 rounded-full mr-4">
167
+ <i data-feather="file-text" class="text-blue-500 h-4 w-4"></i>
168
+ </div>
169
+ <div>
170
+ <p class="text-sm font-medium text-white">Maintenance request submitted</p>
171
+ <p class="text-xs text-gray-400">Apartment 42 - Plumbing issue - 1 hour ago</p>
172
+ </div>
173
+ </div>
174
+ <div class="flex items-start">
175
+ <div class="bg-green-500/20 p-2 rounded-full mr-4">
176
+ <i data-feather="dollar-sign" class="text-green-500 h-4 w-4"></i>
177
+ </div>
178
+ <div>
179
+ <p class="text-sm font-medium text-white">Monthly payment received</p>
180
+ <p class="text-xs text-gray-400">Jane Smith - $1,200 - 3 hours ago</p>
181
+ </div>
182
+ </div>
183
+ <div class="flex items-start">
184
+ <div class="bg-purple-500/20 p-2 rounded-full mr-4">
185
+ <i data-feather="calendar" class="text-purple-500 h-4 w-4"></i>
186
+ </div>
187
+ <div>
188
+ <p class="text-sm font-medium text-white">New reservation created</p>
189
+ <p class="text-xs text-gray-400">Community Hall - June 15 - 5 hours ago</p>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Quick Actions -->
197
+ <div>
198
+ <div class="glass-card rounded-xl p-6 shadow-lg">
199
+ <h2 class="text-xl font-semibold text-white mb-6">Quick Actions</h2>
200
+ <div class="grid grid-cols-2 gap-4">
201
+ <button class="bg-primary-500 hover:bg-primary-600 text-white py-3 px-4 rounded-lg flex flex-col items-center transition-all">
202
+ <i data-feather="user-plus" class="h-5 w-5 mb-2"></i>
203
+ <span class="text-sm">Add Resident</span>
204
+ </button>
205
+ <button class="bg-gray-700 hover:bg-gray-600 text-white py-3 px-4 rounded-lg flex flex-col items-center transition-all">
206
+ <i data-feather="file-text" class="h-5 w-5 mb-2"></i>
207
+ <span class="text-sm">New Request</span>
208
+ </button>
209
+ <button class="bg-gray-700 hover:bg-gray-600 text-white py-3 px-4 rounded-lg flex flex-col items-center transition-all">
210
+ <i data-feather="dollar-sign" class="h-5 w-5 mb-2"></i>
211
+ <span class="text-sm">Record Payment</span>
212
+ </button>
213
+ <button class="bg-gray-700 hover:bg-gray-600 text-white py-3 px-4 rounded-lg flex flex-col items-center transition-all">
214
+ <i data-feather="calendar" class="h-5 w-5 mb-2"></i>
215
+ <span class="text-sm">Add Event</span>
216
+ </button>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </main>
223
+
224
+ <!-- Footer -->
225
+ <footer class="bg-gray-800/80 border-t border-gray-700 py-4">
226
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
227
+ <div class="flex flex-col md:flex-row justify-between items-center">
228
+ <p class="text-gray-400 text-sm">© 2023 CondoControl Pro. All rights reserved.</p>
229
+ <div class="flex space-x-4 mt-4 md:mt-0">
230
+ <a href="#" class="text-gray-400 hover:text-white">
231
+ <i data-feather="twitter" class="h-5 w-5"></i>
232
+ </a>
233
+ <a href="#" class="text-gray-400 hover:text-white">
234
+ <i data-feather="facebook" class="h-5 w-5"></i>
235
+ </a>
236
+ <a href="#" class="text-gray-400 hover:text-white">
237
+ <i data-feather="linkedin" class="h-5 w-5"></i>
238
+ </a>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </footer>
243
+ </div>
244
+
245
+ <script>
246
+ // Initialize Vanta.js background
247
+ VANTA.NET({
248
+ el: "#vanta-bg",
249
+ mouseControls: true,
250
+ touchControls: true,
251
+ gyroControls: false,
252
+ minHeight: 200.00,
253
+ minWidth: 200.00,
254
+ scale: 1.00,
255
+ scaleMobile: 1.00,
256
+ color: 0xd946ef,
257
+ backgroundColor: 0x111827,
258
+ points: 10.00,
259
+ maxDistance: 20.00,
260
+ spacing: 15.00
261
+ });
262
+
263
+ // Initialize feather icons
264
+ feather.replace();
265
+ </script>
266
+ </body>
267
  </html>
login.html ADDED
@@ -0,0 +1,145 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Login | CondoControl Pro</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://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: {
19
+ 500: '#d946ef',
20
+ 600: '#c026d3',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ @apply bg-gray-900 text-gray-100;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body>
36
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
37
+
38
+ <div class="min-h-screen flex items-center justify-center px-4">
39
+ <div class="w-full max-w-md bg-gray-800/80 backdrop-blur-md rounded-xl shadow-xl overflow-hidden border border-gray-700">
40
+ <div class="p-8">
41
+ <div class="text-center mb-8">
42
+ <div class="flex justify-center">
43
+ <i data-feather="home" class="text-primary-500 h-10 w-10"></i>
44
+ </div>
45
+ <h2 class="mt-4 text-2xl font-bold text-white">Welcome back</h2>
46
+ <p class="mt-2 text-sm text-gray-400">Login to your CondoControl dashboard</p>
47
+ </div>
48
+
49
+ <form class="space-y-6">
50
+ <div>
51
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label>
52
+ <div class="relative">
53
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
54
+ <i data-feather="mail" class="h-5 w-5 text-gray-500"></i>
55
+ </div>
56
+ <input id="email" name="email" type="email" autocomplete="email" required
57
+ class="bg-gray-700 text-white w-full pl-10 pr-3 py-3 rounded-lg border border-gray-600 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none transition">
58
+ </div>
59
+ </div>
60
+
61
+ <div>
62
+ <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Password</label>
63
+ <div class="relative">
64
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
65
+ <i data-feather="lock" class="h-5 w-5 text-gray-500"></i>
66
+ </div>
67
+ <input id="password" name="password" type="password" autocomplete="current-password" required
68
+ class="bg-gray-700 text-white w-full pl-10 pr-3 py-3 rounded-lg border border-gray-600 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none transition">
69
+ </div>
70
+ </div>
71
+
72
+ <div class="flex items-center justify-between">
73
+ <div class="flex items-center">
74
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary-500 focus:ring-primary-500 border-gray-600 rounded bg-gray-700">
75
+ <label for="remember-me" class="ml-2 block text-sm text-gray-300">Remember me</label>
76
+ </div>
77
+
78
+ <div class="text-sm">
79
+ <a href="#" class="font-medium text-primary-500 hover:text-primary-400">Forgot password?</a>
80
+ </div>
81
+ </div>
82
+
83
+ <div>
84
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition">
85
+ Sign in
86
+ </button>
87
+ </div>
88
+ </form>
89
+
90
+ <div class="mt-6">
91
+ <div class="relative">
92
+ <div class="absolute inset-0 flex items-center">
93
+ <div class="w-full border-t border-gray-600"></div>
94
+ </div>
95
+ <div class="relative flex justify-center text-sm">
96
+ <span class="px-2 bg-gray-800 text-gray-400">Or continue with</span>
97
+ </div>
98
+ </div>
99
+
100
+ <div class="mt-6 grid grid-cols-2 gap-3">
101
+ <div>
102
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-600 rounded-lg shadow-sm bg-gray-700 text-sm font-medium text-gray-300 hover:bg-gray-600 transition">
103
+ <i data-feather="github" class="h-5 w-5"></i>
104
+ </a>
105
+ </div>
106
+
107
+ <div>
108
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-600 rounded-lg shadow-sm bg-gray-700 text-sm font-medium text-gray-300 hover:bg-gray-600 transition">
109
+ <i data-feather="google" class="h-5 w-5"></i>
110
+ </a>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="px-8 py-4 bg-gray-900/50 text-center">
117
+ <p class="text-sm text-gray-400">
118
+ Don't have an account?
119
+ <a href="#" class="font-medium text-primary-500 hover:text-primary-400">Sign up</a>
120
+ </p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <script>
126
+ // Initialize Vanta.js background
127
+ VANTA.GLOBE({
128
+ el: "#vanta-bg",
129
+ mouseControls: true,
130
+ touchControls: true,
131
+ gyroControls: false,
132
+ minHeight: 200.00,
133
+ minWidth: 200.00,
134
+ scale: 1.00,
135
+ scaleMobile: 1.00,
136
+ color: 0xd946ef,
137
+ backgroundColor: 0x111827,
138
+ size: 0.7
139
+ });
140
+
141
+ // Initialize feather icons
142
+ feather.replace();
143
+ </script>
144
+ </body>
145
+ </html>