Hugging Face's logo

Spaces:
erkinalp
/
codewiz-ai-studio
Running

App Files Community
erkinalp commited on
Commit
fe44f69
·
verified ·
1 Parent(s): 5bda8a3

lolololol

Browse files
Files changed (9) hide show
  1. README.md +8 -5
  2. components/footer.js +89 -0
  3. components/navbar.js +136 -0
  4. components/sidebar.js +210 -0
  5. index.html +271 -19
  6. projects.html +263 -0
  7. script.js +194 -0
  8. settings.html +229 -0
  9. style.css +140 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codewiz Ai Studio
3
- emoji: 🐠
4
- colorFrom: gray
5
- colorTo: pink
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: CodeWiz AI Studio 🪄
3
+ colorFrom: purple
4
+ colorTo: gray
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://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ margin-top: auto;
9
+ }
10
+
11
+ footer {
12
+ background: white;
13
+ border-top: 1px solid #e5e7eb;
14
+ padding: 1.5rem 0;
15
+ margin-top: 3rem;
16
+ }
17
+
18
+ .footer-content {
19
+ max-width: 100%;
20
+ margin: 0 auto;
21
+ padding: 0 1rem;
22
+ display: flex;
23
+ flex-direction: column;
24
+ align-items: center;
25
+ gap: 1rem;
26
+ }
27
+
28
+ @media (min-width: 768px) {
29
+ .footer-content {
30
+ flex-direction: row;
31
+ justify-content: space-between;
32
+ padding: 0 2rem;
33
+ }
34
+ }
35
+
36
+ .copyright {
37
+ color: #6b7280;
38
+ font-size: 0.875rem;
39
+ }
40
+
41
+ .footer-links {
42
+ display: flex;
43
+ gap: 1.5rem;
44
+ }
45
+
46
+ .footer-links a {
47
+ color: #6b7280;
48
+ text-decoration: none;
49
+ font-size: 0.875rem;
50
+ transition: color 0.2s;
51
+ }
52
+
53
+ .footer-links a:hover {
54
+ color: #3b82f6;
55
+ }
56
+
57
+ .version {
58
+ background: #f3f4f6;
59
+ color: #6b7280;
60
+ padding: 0.25rem 0.75rem;
61
+ border-radius: 1rem;
62
+ font-size: 0.75rem;
63
+ font-family: 'JetBrains Mono', monospace;
64
+ }
65
+ </style>
66
+
67
+ <footer>
68
+ <div class="footer-content">
69
+ <div class="copyright">
70
+ © 2024 DevinAI Clone. All rights reserved.
71
+ </div>
72
+
73
+ <div class="footer-links">
74
+ <a href="#">Privacy Policy</a>
75
+ <a href="#">Terms of Service</a>
76
+ <a href="#">Documentation</a>
77
+ <a href="#">Contact</a>
78
+ </div>
79
+
80
+ <div class="version">
81
+ v1.2.3 • AI Engine v4.7
82
+ </div>
83
+ </div>
84
+ </footer>
85
+ `;
86
+ }
87
+ }
88
+
89
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,136 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ position: fixed;
9
+ top: 0;
10
+ left: 0;
11
+ right: 0;
12
+ z-index: 50;
13
+ height: 64px;
14
+ }
15
+
16
+ nav {
17
+ background: white;
18
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
19
+ height: 100%;
20
+ }
21
+
22
+ .container {
23
+ max-width: 100%;
24
+ margin: 0 auto;
25
+ padding: 0 1rem;
26
+ height: 100%;
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: space-between;
30
+ }
31
+
32
+ .logo {
33
+ font-size: 1.5rem;
34
+ font-weight: 700;
35
+ background: linear-gradient(135deg, #3b82f6, #6366f1);
36
+ -webkit-background-clip: text;
37
+ -webkit-text-fill-color: transparent;
38
+ background-clip: text;
39
+ }
40
+
41
+ .nav-links {
42
+ display: none;
43
+ }
44
+
45
+ .nav-links a {
46
+ color: #4b5563;
47
+ text-decoration: none;
48
+ padding: 0.5rem 1rem;
49
+ border-radius: 0.375rem;
50
+ transition: all 0.2s;
51
+ }
52
+
53
+ .nav-links a:hover {
54
+ color: #3b82f6;
55
+ background-color: #f3f4f6;
56
+ }
57
+
58
+ .nav-links a.active {
59
+ color: #3b82f6;
60
+ font-weight: 600;
61
+ }
62
+
63
+ .user-menu {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 1rem;
67
+ }
68
+
69
+ .mobile-menu-btn {
70
+ background: none;
71
+ border: none;
72
+ padding: 0.5rem;
73
+ cursor: pointer;
74
+ color: #6b7280;
75
+ }
76
+
77
+ .avatar {
78
+ width: 2.5rem;
79
+ height: 2.5rem;
80
+ border-radius: 50%;
81
+ background: linear-gradient(135deg, #3b82f6, #6366f1);
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ color: white;
86
+ font-weight: 600;
87
+ }
88
+
89
+ @media (min-width: 768px) {
90
+ .nav-links {
91
+ display: flex;
92
+ align-items: center;
93
+ gap: 1rem;
94
+ }
95
+
96
+ .mobile-menu-btn {
97
+ display: none;
98
+ }
99
+ }
100
+ </style>
101
+
102
+ <nav>
103
+ <div class="container">
104
+ <div class="flex items-center gap-4">
105
+ <button class="mobile-menu-btn" data-sidebar-toggle>
106
+ <i data-feather="menu"></i>
107
+ </button>
108
+ <a href="index.html" class="logo">DevinAI</a>
109
+ </div>
110
+
111
+ <div class="nav-links">
112
+ <a href="index.html" class="active">Dashboard</a>
113
+ <a href="projects.html">Projects</a>
114
+ <a href="settings.html">Settings</a>
115
+ </div>
116
+
117
+ <div class="user-menu">
118
+ <div class="hidden md:flex items-center gap-2 text-gray-600">
119
+ <i data-feather="bell"></i>
120
+ </div>
121
+ <div class="avatar">A</div>
122
+ </div>
123
+ </div>
124
+ </nav>
125
+ `;
126
+
127
+ // Initialize Feather Icons within shadow DOM
128
+ setTimeout(() => {
129
+ if (typeof feather !== 'undefined') {
130
+ feather.replace();
131
+ }
132
+ }, 100);
133
+ }
134
+ }
135
+
136
+ customElements.define('custom-navbar', CustomNavbar);
components/sidebar.js ADDED
@@ -0,0 +1,210 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ position: fixed;
9
+ left: 0;
10
+ top: 64px;
11
+ bottom: 0;
12
+ width: 256px;
13
+ z-index: 40;
14
+ transform: translateX(-100%);
15
+ transition: transform 0.3s ease;
16
+ }
17
+
18
+ @media (min-width: 768px) {
19
+ :host {
20
+ transform: translateX(0);
21
+ }
22
+ }
23
+
24
+ .sidebar {
25
+ background: white;
26
+ border-right: 1px solid #e5e7eb;
27
+ height: 100%;
28
+ overflow-y: auto;
29
+ padding: 1.5rem 0;
30
+ }
31
+
32
+ .menu-group {
33
+ margin-bottom: 2rem;
34
+ }
35
+
36
+ .menu-title {
37
+ font-size: 0.75rem;
38
+ font-weight: 600;
39
+ text-transform: uppercase;
40
+ color: #6b7280;
41
+ padding: 0 1.5rem;
42
+ margin-bottom: 0.75rem;
43
+ }
44
+
45
+ .menu-items {
46
+ display: flex;
47
+ flex-direction: column;
48
+ }
49
+
50
+ .menu-item {
51
+ display: flex;
52
+ align-items: center;
53
+ padding: 0.75rem 1.5rem;
54
+ color: #4b5563;
55
+ text-decoration: none;
56
+ transition: all 0.2s;
57
+ border-left: 3px solid transparent;
58
+ }
59
+
60
+ .menu-item:hover {
61
+ background-color: #f9fafb;
62
+ color: #3b82f6;
63
+ border-left-color: #3b82f6;
64
+ }
65
+
66
+ .menu-item.active {
67
+ background-color: #eff6ff;
68
+ color: #3b82f6;
69
+ border-left-color: #3b82f6;
70
+ font-weight: 600;
71
+ }
72
+
73
+ .menu-item i {
74
+ margin-right: 0.75rem;
75
+ width: 1.25rem;
76
+ height: 1.25rem;
77
+ }
78
+
79
+ .ai-status {
80
+ margin: 1.5rem;
81
+ padding: 1rem;
82
+ background: linear-gradient(135deg, #3b82f6, #6366f1);
83
+ border-radius: 0.5rem;
84
+ color: white;
85
+ }
86
+
87
+ .ai-status-title {
88
+ font-size: 0.875rem;
89
+ font-weight: 600;
90
+ margin-bottom: 0.25rem;
91
+ }
92
+
93
+ .ai-status-subtitle {
94
+ font-size: 0.75rem;
95
+ opacity: 0.9;
96
+ }
97
+
98
+ .ai-status-indicator {
99
+ display: flex;
100
+ align-items: center;
101
+ margin-top: 0.5rem;
102
+ }
103
+
104
+ .indicator-dot {
105
+ width: 0.5rem;
106
+ height: 0.5rem;
107
+ border-radius: 50%;
108
+ background-color: #10b981;
109
+ margin-right: 0.5rem;
110
+ animation: pulse 2s infinite;
111
+ }
112
+
113
+ @keyframes pulse {
114
+ 0%, 100% {
115
+ opacity: 1;
116
+ }
117
+ 50% {
118
+ opacity: 0.5;
119
+ }
120
+ }
121
+ </style>
122
+
123
+ <div class="sidebar">
124
+ <div class="ai-status">
125
+ <div class="ai-status-title">AI Assistant Status</div>
126
+ <div class="ai-status-subtitle">All systems operational</div>
127
+ <div class="ai-status-indicator">
128
+ <div class="indicator-dot"></div>
129
+ <span class="text-xs">Online</span>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="menu-group">
134
+ <div class="menu-title">Main</div>
135
+ <div class="menu-items">
136
+ <a href="index.html" class="menu-item active">
137
+ <i data-feather="home"></i>
138
+ Dashboard
139
+ </a>
140
+ <a href="projects.html" class="menu-item">
141
+ <i data-feather="folder"></i>
142
+ Projects
143
+ </a>
144
+ <a href="#" class="menu-item">
145
+ <i data-feather="terminal"></i>
146
+ Code Editor
147
+ </a>
148
+ <a href="#" class="menu-item">
149
+ <i data-feather="database"></i>
150
+ Data Sources
151
+ </a>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="menu-group">
156
+ <div class="menu-title">AI Tools</div>
157
+ <div class="menu-items">
158
+ <a href="#" class="menu-item">
159
+ <i data-feather="code"></i>
160
+ Code Generation
161
+ </a>
162
+ <a href="#" class="menu-item">
163
+ <i data-feather="search"></i>
164
+ Code Search
165
+ </a>
166
+ <a href="#" class="menu-item">
167
+ <i data-feather="check-circle"></i>
168
+ Code Review
169
+ </a>
170
+ <a href="#" class="menu-item">
171
+ <i data-feather="zap"></i>
172
+ Optimization
173
+ </a>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="menu-group">
178
+ <div class="menu-title">Settings</div>
179
+ <div class="menu-items">
180
+ <a href="settings.html" class="menu-item">
181
+ <i data-feather="settings"></i>
182
+ General Settings
183
+ </a>
184
+ <a href="#" class="menu-item">
185
+ <i data-feather="users"></i>
186
+ Team Members
187
+ </a>
188
+ <a href="#" class="menu-item">
189
+ <i data-feather="credit-card"></i>
190
+ Billing
191
+ </a>
192
+ <a href="#" class="menu-item">
193
+ <i data-feather="help-circle"></i>
194
+ Help & Support
195
+ </a>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ `;
200
+
201
+ // Initialize Feather Icons within shadow DOM
202
+ setTimeout(() => {
203
+ if (typeof feather !== 'undefined') {
204
+ feather.replace();
205
+ }
206
+ }, 100);
207
+ }
208
+ }
209
+
210
+ customElements.define('custom-sidebar', CustomSidebar);
index.html CHANGED
@@ -1,19 +1,271 @@
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>DevinAI Clone - AI Code Assistant</title>
7
+ <link rel="stylesheet" href="style.css">
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
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
14
+ <style>
15
+ * {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .code-font {
19
+ font-family: 'JetBrains Mono', monospace;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50 min-h-screen">
24
+ <custom-navbar></custom-navbar>
25
+ <custom-sidebar></custom-sidebar>
26
+
27
+ <main class="ml-0 md:ml-64 pt-16 px-4 md:px-8 pb-8">
28
+ <div class="max-w-7xl mx-auto">
29
+ <!-- Header Section -->
30
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 mt-6">
31
+ <div>
32
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-900">Welcome back, <span class="text-blue-600">Alex</span></h1>
33
+ <p class="text-gray-600 mt-2">Your AI coding assistant is ready to help you build amazing things</p>
34
+ </div>
35
+ <div class="mt-4 md:mt-0">
36
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center shadow-lg hover:shadow-xl transition-all duration-300">
37
+ <i data-feather="plus" class="w-5 h-5 mr-2"></i>
38
+ New Project
39
+ </button>
40
+ </div>
41
+ </div>
42
+
43
+ <!-- Stats Grid -->
44
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
45
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-200">
46
+ <div class="flex items-center">
47
+ <div class="p-3 bg-blue-100 rounded-lg">
48
+ <i data-feather="code" class="w-6 h-6 text-blue-600"></i>
49
+ </div>
50
+ <div class="ml-4">
51
+ <p class="text-gray-500 text-sm">Active Projects</p>
52
+ <p class="text-2xl font-bold text-gray-900">12</p>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-200">
57
+ <div class="flex items-center">
58
+ <div class="p-3 bg-green-100 rounded-lg">
59
+ <i data-feather="check-circle" class="w-6 h-6 text-green-600"></i>
60
+ </div>
61
+ <div class="ml-4">
62
+ <p class="text-gray-500 text-sm">Tasks Completed</p>
63
+ <p class="text-2xl font-bold text-gray-900">347</p>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-200">
68
+ <div class="flex items-center">
69
+ <div class="p-3 bg-purple-100 rounded-lg">
70
+ <i data-feather="cpu" class="w-6 h-6 text-purple-600"></i>
71
+ </div>
72
+ <div class="ml-4">
73
+ <p class="text-gray-500 text-sm">AI Agents</p>
74
+ <p class="text-2xl font-bold text-gray-900">5</p>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Main Content Area -->
81
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
82
+ <!-- Recent Projects -->
83
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
84
+ <div class="px-6 py-4 border-b border-gray-200">
85
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
86
+ <i data-feather="folder" class="w-5 h-5 mr-2 text-blue-600"></i>
87
+ Recent Projects
88
+ </h2>
89
+ </div>
90
+ <div class="p-6">
91
+ <div class="space-y-4">
92
+ <div class="flex items-center justify-between p-4 hover:bg-gray-50 rounded-lg transition-colors">
93
+ <div class="flex items-center">
94
+ <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
95
+ <i data-feather="box" class="w-5 h-5 text-white"></i>
96
+ </div>
97
+ <div class="ml-4">
98
+ <h3 class="font-semibold text-gray-900">E-commerce Platform</h3>
99
+ <p class="text-sm text-gray-500">Updated 2 hours ago</p>
100
+ </div>
101
+ </div>
102
+ <a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium">View →</a>
103
+ </div>
104
+ <div class="flex items-center justify-between p-4 hover:bg-gray-50 rounded-lg transition-colors">
105
+ <div class="flex items-center">
106
+ <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-teal-500 rounded-lg flex items-center justify-center">
107
+ <i data-feather="smartphone" class="w-5 h-5 text-white"></i>
108
+ </div>
109
+ <div class="ml-4">
110
+ <h3 class="font-semibold text-gray-900">Mobile App UI</h3>
111
+ <p class="text-sm text-gray-500">Updated yesterday</p>
112
+ </div>
113
+ </div>
114
+ <a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium">View →</a>
115
+ </div>
116
+ <div class="flex items-center justify-between p-4 hover:bg-gray-50 rounded-lg transition-colors">
117
+ <div class="flex items-center">
118
+ <div class="w-10 h-10 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
119
+ <i data-feather="database" class="w-5 h-5 text-white"></i>
120
+ </div>
121
+ <div class="ml-4">
122
+ <h3 class="font-semibold text-gray-900">Data Analytics Dashboard</h3>
123
+ <p class="text-sm text-gray-500">Updated 3 days ago</p>
124
+ </div>
125
+ </div>
126
+ <a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium">View →</a>
127
+ </div>
128
+ </div>
129
+ <div class="mt-6 text-center">
130
+ <a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
131
+ See all projects
132
+ <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
133
+ </a>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- AI Code Assistant -->
139
+ <div class="bg-gradient-to-br from-gray-900 to-black rounded-xl shadow-2xl overflow-hidden">
140
+ <div class="px-6 py-4 border-b border-gray-800">
141
+ <h2 class="text-xl font-bold text-white flex items-center">
142
+ <i data-feather="cpu" class="w-5 h-5 mr-2 text-blue-400"></i>
143
+ AI Code Assistant
144
+ </h2>
145
+ </div>
146
+ <div class="p-6">
147
+ <div class="bg-gray-800 rounded-lg p-4 mb-6">
148
+ <div class="flex items-center mb-3">
149
+ <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
150
+ <i data-feather="user" class="w-4 h-4 text-white"></i>
151
+ </div>
152
+ <span class="ml-3 text-white font-medium">User Request</span>
153
+ </div>
154
+ <p class="text-gray-300 code-font text-sm">// Create a responsive navbar component with Tailwind CSS</p>
155
+ </div>
156
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
157
+ <div class="flex items-center mb-3">
158
+ <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
159
+ <i data-feather="cpu" class="w-4 h-4 text-white"></i>
160
+ </div>
161
+ <span class="ml-3 text-white font-medium">DevinAI Response</span>
162
+ </div>
163
+ <pre class="text-gray-300 code-font text-sm overflow-x-auto">
164
+ &lt;nav class="bg-white shadow-lg"&gt;
165
+ &lt;div class="max-w-7xl mx-auto px-4"&gt;
166
+ &lt;div class="flex justify-between h-16"&gt;
167
+ &lt;div class="flex items-center"&gt;
168
+ &lt;h1 class="text-xl font-bold"&gt;Logo&lt;/h1&gt;
169
+ &lt;/div&gt;
170
+ &lt;div class="hidden md:flex items-center space-x-8"&gt;
171
+ &lt;a href="#" class="text-gray-700 hover:text-blue-600"&gt;Home&lt;/a&gt;
172
+ &lt;a href="#" class="text-gray-700 hover:text-blue-600"&gt;Projects&lt;/a&gt;
173
+ &lt;a href="#" class="text-gray-700 hover:text-blue-600"&gt;Settings&lt;/a&gt;
174
+ &lt;/div&gt;
175
+ &lt;/div&gt;
176
+ &lt;/div&gt;
177
+ &lt;/nav&gt;</pre>
178
+ </div>
179
+ <div class="mt-6">
180
+ <div class="flex items-center">
181
+ <input type="text" placeholder="Ask DevinAI to write code..." class="flex-1 bg-gray-800 text-white border border-gray-700 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
182
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-r-lg font-medium flex items-center">
183
+ <i data-feather="send" class="w-5 h-5 mr-2"></i>
184
+ Send
185
+ </button>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Activity Feed -->
192
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mt-0">
193
+ <div class="px-6 py-4 border-b border-gray-200">
194
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
195
+ <i data-feather="activity" class="w-5 h-5 mr-2 text-green-600"></i>
196
+ Recent Activity
197
+ </h2>
198
+ </div>
199
+ <div class="p-6">
200
+ <div class="space-y-6">
201
+ <div class="flex items-start">
202
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
203
+ <i data-feather="git-commit" class="w-5 h-5 text-blue-600"></i>
204
+ </div>
205
+ <div class="ml-4 flex-1">
206
+ <div class="flex justify-between">
207
+ <h3 class="font-semibold text-gray-900">Code commit to main branch</h3>
208
+ <span class="text-sm text-gray-500">10:42 AM</span>
209
+ </div>
210
+ <p class="text-gray-600 mt-1">Fixed responsive layout issues in dashboard component</p>
211
+ <div class="mt-2 text-sm text-gray-500 code-font">git commit -m "fix: responsive dashboard layout"</div>
212
+ </div>
213
+ </div>
214
+ <div class="flex items-start">
215
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
216
+ <i data-feather="check-circle" class="w-5 h-5 text-green-600"></i>
217
+ </div>
218
+ <div class="ml-4 flex-1">
219
+ <div class="flex justify-between">
220
+ <h3 class="font-semibold text-gray-900">Build completed successfully</h3>
221
+ <span class="text-sm text-gray-500">09:15 AM</span>
222
+ </div>
223
+ <p class="text-gray-600 mt-1">Project "E-commerce Platform" built without errors</p>
224
+ <div class="mt-2 text-sm text-gray-500">Build time: 2m 34s • Size: 1.2MB</div>
225
+ </div>
226
+ </div>
227
+ <div class="flex items-start">
228
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
229
+ <i data-feather="zap" class="w-5 h-5 text-purple-600"></i>
230
+ </div>
231
+ <div class="ml-4 flex-1">
232
+ <div class="flex justify-between">
233
+ <h3 class="font-semibold text-gray-900">AI Agent deployed</h3>
234
+ <span class="text-sm text-gray-500">Yesterday</span>
235
+ </div>
236
+ <p class="text-gray-600 mt-1">Code review agent deployed to production environment</p>
237
+ <div class="mt-2 text-sm text-gray-500">Agent ID: CR-2024-001 • Status: Active</div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </main>
246
+
247
+ <custom-footer></custom-footer>
248
+
249
+ <script src="components/navbar.js"></script>
250
+ <script src="components/sidebar.js"></script>
251
+ <script src="components/footer.js"></script>
252
+ <script src="script.js"></script>
253
+ <script>
254
+ feather.replace();
255
+
256
+ // Mobile sidebar toggle
257
+ document.addEventListener('DOMContentLoaded', function() {
258
+ const sidebarToggle = document.querySelector('[data-sidebar-toggle]');
259
+ const sidebar = document.querySelector('custom-sidebar');
260
+
261
+ if (sidebarToggle && sidebar) {
262
+ sidebarToggle.addEventListener('click', function() {
263
+ sidebar.classList.toggle('hidden');
264
+ sidebar.classList.toggle('translate-x-0');
265
+ });
266
+ }
267
+ });
268
+ </script>
269
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
270
+ </body>
271
+ </html>
projects.html ADDED
@@ -0,0 +1,263 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Projects - DevinAI Clone</title>
7
+ <link rel="stylesheet" href="style.css">
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
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
14
+ <style>
15
+ * {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .code-font {
19
+ font-family: 'JetBrains Mono', monospace;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50 min-h-screen">
24
+ <custom-navbar></custom-navbar>
25
+ <custom-sidebar></custom-sidebar>
26
+
27
+ <main class="ml-0 md:ml-64 pt-16 px-4 md:px-8 pb-8">
28
+ <div class="max-w-7xl mx-auto">
29
+ <!-- Header Section -->
30
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 mt-6">
31
+ <div>
32
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-900">Projects</h1>
33
+ <p class="text-gray-600 mt-2">Manage and collaborate on your AI-powered coding projects</p>
34
+ </div>
35
+ <div class="mt-4 md:mt-0 flex gap-3">
36
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-5 py-2.5 rounded-lg font-medium flex items-center">
37
+ <i data-feather="filter" class="w-4 h-4 mr-2"></i>
38
+ Filter
39
+ </button>
40
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-semibold flex items-center shadow-lg hover:shadow-xl transition-all duration-300">
41
+ <i data-feather="plus" class="w-5 h-5 mr-2"></i>
42
+ New Project
43
+ </button>
44
+ </div>
45
+ </div>
46
+
47
+ <!-- Projects Grid -->
48
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
49
+ <!-- Project Card 1 -->
50
+ <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden hover-card">
51
+ <div class="p-6">
52
+ <div class="flex justify-between items-start mb-4">
53
+ <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
54
+ <i data-feather="shopping-cart" class="w-6 h-6 text-white"></i>
55
+ </div>
56
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">Active</span>
57
+ </div>
58
+ <h3 class="text-xl font-bold text-gray-900 mb-2">E-commerce Platform</h3>
59
+ <p class="text-gray-600 mb-4">Full-stack online store with AI-powered recommendations and analytics dashboard.</p>
60
+ <div class="flex items-center justify-between text-sm text-gray-500 mb-6">
61
+ <div class="flex items-center">
62
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
63
+ Updated 2h ago
64
+ </div>
65
+ <div class="flex items-center">
66
+ <i data-feather="git-branch" class="w-4 h-4 mr-1"></i>
67
+ 3 branches
68
+ </div>
69
+ </div>
70
+ <div class="flex justify-between">
71
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Open Project</a>
72
+ <div class="flex items-center">
73
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
74
+ <span class="text-sm text-gray-600">AI Running</span>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Project Card 2 -->
81
+ <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden hover-card">
82
+ <div class="p-6">
83
+ <div class="flex justify-between items-start mb-4">
84
+ <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-teal-500 rounded-lg flex items-center justify-center">
85
+ <i data-feather="smartphone" class="w-6 h-6 text-white"></i>
86
+ </div>
87
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Complete</span>
88
+ </div>
89
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Mobile App UI</h3>
90
+ <p class="text-gray-600 mb-4">React Native application with custom animations and gesture-based navigation.</p>
91
+ <div class="flex items-center justify-between text-sm text-gray-500 mb-6">
92
+ <div class="flex items-center">
93
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
94
+ Updated 1d ago
95
+ </div>
96
+ <div class="flex items-center">
97
+ <i data-feather="git-branch" class="w-4 h-4 mr-1"></i>
98
+ 2 branches
99
+ </div>
100
+ </div>
101
+ <div class="flex justify-between">
102
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Open Project</a>
103
+ <div class="flex items-center">
104
+ <div class="w-2 h-2 bg-gray-400 rounded-full mr-2"></div>
105
+ <span class="text-sm text-gray-600">Paused</span>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Project Card 3 -->
112
+ <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden hover-card">
113
+ <div class="p-6">
114
+ <div class="flex justify-between items-start mb-4">
115
+ <div class="w-12 h-12 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
116
+ <i data-feather="bar-chart-2" class="w-6 h-6 text-white"></i>
117
+ </div>
118
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">Active</span>
119
+ </div>
120
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Data Analytics Dashboard</h3>
121
+ <p class="text-gray-600 mb-4">Real-time data visualization and predictive analytics with machine learning models.</p>
122
+ <div class="flex items-center justify-between text-sm text-gray-500 mb-6">
123
+ <div class="flex items-center">
124
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
125
+ Updated 3d ago
126
+ </div>
127
+ <div class="flex items-center">
128
+ <i data-feather="git-branch" class="w-4 h-4 mr-1"></i>
129
+ 5 branches
130
+ </div>
131
+ </div>
132
+ <div class="flex justify-between">
133
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Open Project</a>
134
+ <div class="flex items-center">
135
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
136
+ <span class="text-sm text-gray-600">AI Running</span>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Project Details Table -->
144
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mb-8">
145
+ <div class="px-6 py-4 border-b border-gray-200">
146
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
147
+ <i data-feather="list" class="w-5 h-5 mr-2 text-blue-600"></i>
148
+ All Projects
149
+ </h2>
150
+ </div>
151
+ <div class="overflow-x-auto">
152
+ <table class="w-full">
153
+ <thead class="bg-gray-50">
154
+ <tr>
155
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project Name</th>
156
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
157
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
158
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AI Agent</th>
159
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
160
+ </tr>
161
+ </thead>
162
+ <tbody class="divide-y divide-gray-200">
163
+ <tr>
164
+ <td class="px-6 py-4">
165
+ <div class="flex items-center">
166
+ <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
167
+ <i data-feather="code" class="w-4 h-4 text-blue-600"></i>
168
+ </div>
169
+ <div>
170
+ <div class="font-medium text-gray-900">API Gateway</div>
171
+ <div class="text-sm text-gray-500">Microservices architecture</div>
172
+ </div>
173
+ </div>
174
+ </td>
175
+ <td class="px-6 py-4">
176
+ <span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">In Progress</span>
177
+ </td>
178
+ <td class="px-6 py-4 text-sm text-gray-500">2 hours ago</td>
179
+ <td class="px-6 py-4">
180
+ <div class="flex items-center">
181
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
182
+ <span class="text-sm text-gray-700">Code Review</span>
183
+ </div>
184
+ </td>
185
+ <td class="px-6 py-4">
186
+ <div class="flex space-x-3">
187
+ <a href="#" class="text-blue-600 hover:text-blue-900">
188
+ <i data-feather="edit-2" class="w-4 h-4"></i>
189
+ </a>
190
+ <a href="#" class="text-green-600 hover:text-green-900">
191
+ <i data-feather="play" class="w-4 h-4"></i>
192
+ </a>
193
+ <a href="#" class="text-red-600 hover:text-red-900">
194
+ <i data-feather="trash-2" class="w-4 h-4"></i>
195
+ </a>
196
+ </div>
197
+ </td>
198
+ </tr>
199
+ <tr>
200
+ <td class="px-6 py-4">
201
+ <div class="flex items-center">
202
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3">
203
+ <i data-feather="lock" class="w-4 h-4 text-green-600"></i>
204
+ </div>
205
+ <div>
206
+ <div class="font-medium text-gray-900">Auth Service</div>
207
+ <div class="text-sm text-gray-500">JWT-based authentication</div>
208
+ </div>
209
+ </div>
210
+ </td>
211
+ <td class="px-6 py-4">
212
+ <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
213
+ </td>
214
+ <td class="px-6 py-4 text-sm text-gray-500">1 day ago</td>
215
+ <td class="px-6 py-4">
216
+ <div class="flex items-center">
217
+ <div class="w-2 h-2 bg-gray-400 rounded-full mr-2"></div>
218
+ <span class="text-sm text-gray-700">Idle</span>
219
+ </div>
220
+ </td>
221
+ <td class="px-6 py-4">
222
+ <div class="flex space-x-3">
223
+ <a href="#" class="text-blue-600 hover:text-blue-900">
224
+ <i data-feather="edit-2" class="w-4 h-4"></i>
225
+ </a>
226
+ <a href="#" class="text-green-600 hover:text-green-900">
227
+ <i data-feather="play" class="w-4 h-4"></i>
228
+ </a>
229
+ <a href="#" class="text-red-600 hover:text-red-900">
230
+ <i data-feather="trash-2" class="w-4 h-4"></i>
231
+ </a>
232
+ </div>
233
+ </td>
234
+ </tr>
235
+ </tbody>
236
+ </table>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </main>
241
+
242
+ <custom-footer></custom-footer>
243
+
244
+ <script src="components/navbar.js"></script>
245
+ <script src="components/sidebar.js"></script>
246
+ <script src="components/footer.js"></script>
247
+ <script src="script.js"></script>
248
+ <script>
249
+ feather.replace();
250
+
251
+ // Update active state in sidebar
252
+ document.addEventListener('DOMContentLoaded', function() {
253
+ const sidebarLinks = document.querySelector('custom-sidebar').shadowRoot.querySelectorAll('.menu-item');
254
+ sidebarLinks.forEach(link => {
255
+ link.classList.remove('active');
256
+ if (link.textContent.includes('Projects')) {
257
+ link.classList.add('active');
258
+ }
259
+ });
260
+ });
261
+ </script>
262
+ </body>
263
+ </html>
script.js ADDED
@@ -0,0 +1,194 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main Application Script
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // Initialize Feather Icons
4
+ if (typeof feather !== 'undefined') {
5
+ feather.replace();
6
+ }
7
+
8
+ // Mobile menu toggle for sidebar
9
+ const setupMobileMenu = () => {
10
+ const sidebarToggle = document.querySelector('[data-sidebar-toggle]');
11
+ const sidebar = document.querySelector('custom-sidebar');
12
+ const overlay = document.createElement('div');
13
+
14
+ if (sidebarToggle && sidebar) {
15
+ // Create overlay for mobile
16
+ overlay.className = 'fixed inset-0 bg-black bg-opacity-50 z-40 hidden';
17
+ document.body.appendChild(overlay);
18
+
19
+ sidebarToggle.addEventListener('click', () => {
20
+ sidebar.classList.toggle('-translate-x-full');
21
+ sidebar.classList.toggle('translate-x-0');
22
+ overlay.classList.toggle('hidden');
23
+ document.body.classList.toggle('overflow-hidden');
24
+ });
25
+
26
+ overlay.addEventListener('click', () => {
27
+ sidebar.classList.add('-translate-x-full');
28
+ sidebar.classList.remove('translate-x-0');
29
+ overlay.classList.add('hidden');
30
+ document.body.classList.remove('overflow-hidden');
31
+ });
32
+
33
+ // Close sidebar when clicking on links (mobile)
34
+ const sidebarLinks = sidebar.shadowRoot.querySelectorAll('a');
35
+ sidebarLinks.forEach(link => {
36
+ link.addEventListener('click', () => {
37
+ if (window.innerWidth < 768) {
38
+ sidebar.classList.add('-translate-x-full');
39
+ sidebar.classList.remove('translate-x-0');
40
+ overlay.classList.add('hidden');
41
+ document.body.classList.remove('overflow-hidden');
42
+ }
43
+ });
44
+ });
45
+ }
46
+ };
47
+
48
+ // Setup AI code assistant functionality
49
+ const setupAIAssistant = () => {
50
+ const codeInput = document.querySelector('input[placeholder*="Ask DevinAI"]');
51
+ const sendButton = document.querySelector('button.bg-blue-600');
52
+
53
+ if (codeInput && sendButton) {
54
+ sendButton.addEventListener('click', async () => {
55
+ const query = codeInput.value.trim();
56
+ if (!query) return;
57
+
58
+ // Show loading state
59
+ const originalText = sendButton.innerHTML;
60
+ sendButton.innerHTML = '<div class="spinner"></div>';
61
+ sendButton.disabled = true;
62
+
63
+ // Simulate API call with timeout
64
+ setTimeout(() => {
65
+ // In a real app, this would be an API call to an AI service
66
+ console.log('AI Query:', query);
67
+
68
+ // Reset button
69
+ sendButton.innerHTML = originalText;
70
+ sendButton.disabled = false;
71
+ codeInput.value = '';
72
+
73
+ // Show success message
74
+ showNotification('AI is processing your request...', 'success');
75
+ }, 1500);
76
+ });
77
+
78
+ // Allow Enter key to submit
79
+ codeInput.addEventListener('keypress', (e) => {
80
+ if (e.key === 'Enter') {
81
+ sendButton.click();
82
+ }
83
+ });
84
+ }
85
+ };
86
+
87
+ // Notification system
88
+ const showNotification = (message, type = 'info') => {
89
+ const notification = document.createElement('div');
90
+ const colors = {
91
+ success: 'bg-green-100 border-green-400 text-green-700',
92
+ error: 'bg-red-100 border-red-400 text-red-700',
93
+ info: 'bg-blue-100 border-blue-400 text-blue-700',
94
+ warning: 'bg-yellow-100 border-yellow-400 text-yellow-700'
95
+ };
96
+
97
+ notification.className = `fixed top-6 right-6 px-6 py-4 rounded-lg border ${colors[type]} shadow-lg z-50 transform transition-transform duration-300 translate-x-full`;
98
+ notification.innerHTML = `
99
+ <div class="flex items-center">
100
+ <i data-feather="${type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'info'}" class="w-5 h-5 mr-3"></i>
101
+ <span>${message}</span>
102
+ </div>
103
+ `;
104
+
105
+ document.body.appendChild(notification);
106
+
107
+ // Animate in
108
+ setTimeout(() => {
109
+ notification.classList.remove('translate-x-full');
110
+ notification.classList.add('translate-x-0');
111
+ }, 10);
112
+
113
+ // Replace icons
114
+ if (typeof feather !== 'undefined') {
115
+ feather.replace();
116
+ }
117
+
118
+ // Auto remove after 5 seconds
119
+ setTimeout(() => {
120
+ notification.classList.remove('translate-x-0');
121
+ notification.classList.add('translate-x-full');
122
+ setTimeout(() => {
123
+ if (notification.parentNode) {
124
+ notification.parentNode.removeChild(notification);
125
+ }
126
+ }, 300);
127
+ }, 5000);
128
+ };
129
+
130
+ // Load projects from GitHub API (public API)
131
+ const loadProjectsFromAPI = async () => {
132
+ try {
133
+ // Using GitHub's public API to fetch repositories
134
+ const response = await fetch('https://api.github.com/users/github/repos?sort=updated&per_page=5');
135
+ if (response.ok) {
136
+ const repos = await response.json();
137
+ const projectsContainer = document.querySelector('.projects-container');
138
+
139
+ if (projectsContainer && repos.length > 0) {
140
+ // Update UI with real data
141
+ console.log('Loaded projects from GitHub:', repos.length);
142
+
143
+ // Update stats if available
144
+ const activeProjectsElement = document.querySelector('.stats-active-projects');
145
+ if (activeProjectsElement) {
146
+ activeProjectsElement.textContent = repos.length;
147
+ }
148
+ }
149
+ }
150
+ } catch (error) {
151
+ console.log('Could not load projects from API, using static data instead:', error);
152
+ }
153
+ };
154
+
155
+ // Initialize everything
156
+ setupMobileMenu();
157
+ setupAIAssistant();
158
+ loadProjectsFromAPI();
159
+
160
+ // Add responsive behavior for window resize
161
+ window.addEventListener('resize', function() {
162
+ const sidebar = document.querySelector('custom-sidebar');
163
+ const overlay = document.querySelector('.fixed.inset-0.bg-black');
164
+
165
+ if (window.innerWidth >= 768 && sidebar && overlay) {
166
+ sidebar.classList.remove('-translate-x-full');
167
+ sidebar.classList.add('translate-x-0');
168
+ if (overlay) overlay.classList.add('hidden');
169
+ document.body.classList.remove('overflow-hidden');
170
+ }
171
+ });
172
+
173
+ // Add active state to navigation links
174
+ const setActiveNavLink = () => {
175
+ const currentPath = window.location.pathname;
176
+ const navLinks = document.querySelectorAll('custom-navbar a, custom-sidebar a');
177
+
178
+ navLinks.forEach(link => {
179
+ const href = link.getAttribute('href');
180
+ if (href && currentPath.includes(href.replace('.html', ''))) {
181
+ link.classList.add('text-blue-600', 'font-semibold');
182
+ link.classList.remove('text-gray-700');
183
+ }
184
+ });
185
+ };
186
+
187
+ setActiveNavLink();
188
+
189
+ // Export functions for web components if needed
190
+ window.App = {
191
+ showNotification,
192
+ loadProjectsFromAPI
193
+ };
194
+ });
settings.html ADDED
@@ -0,0 +1,229 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Settings - DevinAI Clone</title>
7
+ <link rel="stylesheet" href="style.css">
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
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
14
+ <style>
15
+ * {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .code-font {
19
+ font-family: 'JetBrains Mono', monospace;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50 min-h-screen">
24
+ <custom-navbar></custom-navbar>
25
+ <custom-sidebar></custom-sidebar>
26
+
27
+ <main class="ml-0 md:ml-64 pt-16 px-4 md:px-8 pb-8">
28
+ <div class="max-w-4xl mx-auto">
29
+ <!-- Header Section -->
30
+ <div class="mb-8 mt-6">
31
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-900">Settings</h1>
32
+ <p class="text-gray-600 mt-2">Configure your AI assistant and account preferences</p>
33
+ </div>
34
+
35
+ <!-- Settings Tabs -->
36
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mb-8">
37
+ <div class="border-b border-gray-200">
38
+ <nav class="flex">
39
+ <button class="px-6 py-4 border-b-2 border-blue-600 text-blue-600 font-semibold">General</button>
40
+ <button class="px-6 py-4 text-gray-600 font-medium hover:text-blue-600">AI Configuration</button>
41
+ <button class="px-6 py-4 text-gray-600 font-medium hover:text-blue-600">Team</button>
42
+ <button class="px-6 py-4 text-gray-600 font-medium hover:text-blue-600">Billing</button>
43
+ </nav>
44
+ </div>
45
+
46
+ <div class="p-8">
47
+ <form id="settings-form">
48
+ <!-- Profile Settings -->
49
+ <div class="mb-10">
50
+ <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
51
+ <i data-feather="user" class="w-5 h-5 mr-2 text-blue-600"></i>
52
+ Profile Settings
53
+ </h2>
54
+
55
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
56
+ <div>
57
+ <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
58
+ <input type="text" value="Alex Johnson" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
59
+ </div>
60
+ <div>
61
+ <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
62
+ <input type="email" value="alex@example.com" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
63
+ </div>
64
+ <div>
65
+ <label class="block text-sm font-medium text-gray-700 mb-2">Job Role</label>
66
+ <select class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
67
+ <option>Full-Stack Developer</option>
68
+ <option>Frontend Developer</option>
69
+ <option>Backend Developer</option>
70
+ <option>DevOps Engineer</option>
71
+ <option>Product Manager</option>
72
+ </select>
73
+ </div>
74
+ <div>
75
+ <label class="block text-sm font-medium text-gray-700 mb-2">Timezone</label>
76
+ <select class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
77
+ <option>UTC-05:00 (Eastern Time)</option>
78
+ <option>UTC-08:00 (Pacific Time)</option>
79
+ <option>UTC+00:00 (GMT)</option>
80
+ <option>UTC+01:00 (Central European Time)</option>
81
+ </select>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- AI Preferences -->
87
+ <div class="mb-10">
88
+ <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
89
+ <i data-feather="cpu" class="w-5 h-5 mr-2 text-purple-600"></i>
90
+ AI Assistant Preferences
91
+ </h2>
92
+
93
+ <div class="space-y-6">
94
+ <div class="flex items-center justify-between">
95
+ <div>
96
+ <h3 class="font-medium text-gray-900">Auto-code Completion</h3>
97
+ <p class="text-sm text-gray-600">AI suggests code completions as you type</p>
98
+ </div>
99
+ <label class="relative inline-flex items-center cursor-pointer">
100
+ <input type="checkbox" checked class="sr-only peer">
101
+ <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-blue-600"></div>
102
+ </label>
103
+ </div>
104
+
105
+ <div class="flex items-center justify-between">
106
+ <div>
107
+ <h3 class="font-medium text-gray-900">Code Review Automation</h3>
108
+ <p class="text-sm text-gray-600">AI automatically reviews code for best practices</p>
109
+ </div>
110
+ <label class="relative inline-flex items-center cursor-pointer">
111
+ <input type="checkbox" checked class="sr-only peer">
112
+ <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-blue-600"></div>
113
+ </label>
114
+ </div>
115
+
116
+ <div class="flex items-center justify-between">
117
+ <div>
118
+ <h3 class="font-medium text-gray-900">Bug Detection</h3>
119
+ <p class="text-sm text-gray-600">AI scans code for potential bugs and security issues</p>
120
+ </div>
121
+ <label class="relative inline-flex items-center cursor-pointer">
122
+ <input type="checkbox" class="sr-only peer">
123
+ <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-blue-600"></div>
124
+ </label>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Notification Settings -->
130
+ <div class="mb-10">
131
+ <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
132
+ <i data-feather="bell" class="w-5 h-5 mr-2 text-green-600"></i>
133
+ Notifications
134
+ </h2>
135
+
136
+ <div class="space-y-4">
137
+ <div class="flex items-center">
138
+ <input type="checkbox" checked class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
139
+ <label class="ml-3 text-gray-700">Email notifications for completed tasks</label>
140
+ </div>
141
+ <div class="flex items-center">
142
+ <input type="checkbox" checked class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
143
+ <label class="ml-3 text-gray-700">Push notifications for AI suggestions</label>
144
+ </div>
145
+ <div class="flex items-center">
146
+ <input type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
147
+ <label class="ml-3 text-gray-700">Weekly project summaries</label>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Danger Zone -->
153
+ <div class="border-t border-gray-200 pt-8">
154
+ <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
155
+ <i data-feather="alert-triangle" class="w-5 h-5 mr-2 text-red-600"></i>
156
+ Danger Zone
157
+ </h2>
158
+
159
+ <div class="bg-red-50 border border-red-200 rounded-lg p-6">
160
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
161
+ <div>
162
+ <h3 class="font-bold text-red-800">Reset AI Training Data</h3>
163
+ <p class="text-red-700 text-sm mt-1">This will delete all custom AI training data and reset to defaults.</p>
164
+ </div>
165
+ <button type="button" class="mt-4 md:mt-0 bg-white border border-red-600 text-red-600 hover:bg-red-50 px-5 py-2.5 rounded-lg font-medium transition-colors">
166
+ Reset Data
167
+ </button>
168
+ </div>
169
+
170
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mt-6">
171
+ <div>
172
+ <h3 class="font-bold text-red-800">Delete Account</h3>
173
+ <p class="text-red-700 text-sm mt-1">Permanently delete your account and all associated data.</p>
174
+ </div>
175
+ <button type="button" class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors">
176
+ Delete Account
177
+ </button>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Save Button -->
183
+ <div class="flex justify-end mt-10">
184
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center">
185
+ <i data-feather="save" class="w-5 h-5 mr-2"></i>
186
+ Save Changes
187
+ </button>
188
+ </div>
189
+ </form>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </main>
194
+
195
+ <custom-footer></custom-footer>
196
+
197
+ <script src="components/navbar.js"></script>
198
+ <script src="components/sidebar.js"></script>
199
+ <script src="components/footer.js"></script>
200
+ <script src="script.js"></script>
201
+ <script>
202
+ feather.replace();
203
+
204
+ // Update active state in sidebar
205
+ document.addEventListener('DOMContentLoaded', function() {
206
+ const sidebarLinks = document.querySelector('custom-sidebar').shadowRoot.querySelectorAll('.menu-item');
207
+ sidebarLinks.forEach(link => {
208
+ link.classList.remove('active');
209
+ if (link.textContent.includes('Settings')) {
210
+ link.classList.add('active');
211
+ }
212
+ });
213
+
214
+ // Form submission handler
215
+ const form = document.getElementById('settings-form');
216
+ if (form) {
217
+ form.addEventListener('submit', function(e) {
218
+ e.preventDefault();
219
+
220
+ // Show success notification
221
+ if (window.App && window.App.showNotification) {
222
+ window.App.showNotification('Settings saved successfully!', 'success');
223
+ }
224
+ });
225
+ }
226
+ });
227
+ </script>
228
+ </body>
229
+ </html>
style.css CHANGED
@@ -1,28 +1,149 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Global Styles */
2
+ :root {
3
+ --primary-color: #3b82f6;
4
+ --secondary-color: #6366f1;
5
+ --dark-bg: #111827;
6
+ --light-bg: #f9fafb;
7
+ --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
8
+ --card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
9
  }
10
 
11
+ /* Custom Scrollbar */
12
+ ::-webkit-scrollbar {
13
+ width: 8px;
14
+ height: 8px;
15
  }
16
 
17
+ ::-webkit-scrollbar-track {
18
+ background: #f1f1f1;
19
+ border-radius: 4px;
 
 
20
  }
21
 
22
+ ::-webkit-scrollbar-thumb {
23
+ background: #c1c1c1;
24
+ border-radius: 4px;
 
 
 
25
  }
26
 
27
+ ::-webkit-scrollbar-thumb:hover {
28
+ background: #a1a1a1;
29
  }
30
+
31
+ /* Smooth Transitions */
32
+ * {
33
+ transition: background-color 0.3s ease, border-color 0.3s ease;
34
+ }
35
+
36
+ /* Gradient Text */
37
+ .gradient-text {
38
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
39
+ -webkit-background-clip: text;
40
+ -webkit-text-fill-color: transparent;
41
+ background-clip: text;
42
+ }
43
+
44
+ /* Code Block Styling */
45
+ pre.code-block {
46
+ background: #1a202c;
47
+ color: #e2e8f0;
48
+ padding: 1.5rem;
49
+ border-radius: 0.5rem;
50
+ overflow-x: auto;
51
+ font-family: 'JetBrains Mono', monospace;
52
+ font-size: 0.875rem;
53
+ line-height: 1.5;
54
+ border-left: 4px solid var(--primary-color);
55
+ }
56
+
57
+ /* Card Hover Effects */
58
+ .hover-card {
59
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
60
+ }
61
+
62
+ .hover-card:hover {
63
+ transform: translateY(-4px);
64
+ box-shadow: var(--card-shadow-hover);
65
+ }
66
+
67
+ /* Pulse Animation for AI Elements */
68
+ @keyframes pulse-slow {
69
+ 0%, 100% {
70
+ opacity: 1;
71
+ }
72
+ 50% {
73
+ opacity: 0.7;
74
+ }
75
+ }
76
+
77
+ .pulse-slow {
78
+ animation: pulse-slow 2s infinite;
79
+ }
80
+
81
+ /* Custom Button Styles */
82
+ .btn-primary {
83
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
84
+ color: white;
85
+ padding: 0.75rem 1.5rem;
86
+ border-radius: 0.5rem;
87
+ font-weight: 600;
88
+ transition: all 0.3s ease;
89
+ border: none;
90
+ cursor: pointer;
91
+ }
92
+
93
+ .btn-primary:hover {
94
+ transform: translateY(-2px);
95
+ box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
96
+ }
97
+
98
+ .btn-outline {
99
+ background: transparent;
100
+ color: var(--primary-color);
101
+ padding: 0.75rem 1.5rem;
102
+ border-radius: 0.5rem;
103
+ font-weight: 600;
104
+ transition: all 0.3s ease;
105
+ border: 2px solid var(--primary-color);
106
+ cursor: pointer;
107
+ }
108
+
109
+ .btn-outline:hover {
110
+ background: var(--primary-color);
111
+ color: white;
112
+ }
113
+
114
+ /* Loading Spinner */
115
+ .spinner {
116
+ border: 3px solid rgba(59, 130, 246, 0.1);
117
+ border-radius: 50%;
118
+ border-top: 3px solid var(--primary-color);
119
+ width: 24px;
120
+ height: 24px;
121
+ animation: spin 1s linear infinite;
122
+ }
123
+
124
+ @keyframes spin {
125
+ 0% { transform: rotate(0deg); }
126
+ 100% { transform: rotate(360deg); }
127
+ }
128
+
129
+ /* Responsive Adjustments */
130
+ @media (max-width: 768px) {
131
+ .mobile-hidden {
132
+ display: none;
133
+ }
134
+
135
+ .mobile-full-width {
136
+ width: 100%;
137
+ }
138
+ }
139
+
140
+ /* Dark Mode Support (for future use) */
141
+ .dark-mode {
142
+ background-color: var(--dark-bg);
143
+ color: #f3f4f6;
144
+ }
145
+
146
+ .dark-mode .card {
147
+ background-color: #1f2937;
148
+ border-color: #374151;
149
+ }