Hugging Face's logo

Spaces:
Abmacode12
/
codecraft-ai-studio
Running

App Files Community
Abmacode12 commited on
Commit
a7f24ff
·
verified ·
1 Parent(s): 96208dd

<!DOCTYPE html>

Browse files

<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Espace Codage Pro - Builder AI</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--secondary: #0f172a;
--accent: #8b5cf6;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--light: #f8fafc;
--dark: #1e293b;
--gray: #64748b;
--card-bg: #ffffff;
--sidebar-bg: #0f172a;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--radius: 12px;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, sans-serif;
}

body {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
min-height: 100vh;
color: var(--secondary);
}

.app-container {
display: grid;
grid-template-columns: 280px 1fr 350px;
min-height: 100vh;
gap: 0;
}

/* === SIDEBAR === */
.sidebar {
background: var(--sidebar-bg);
color: white;
padding: 2rem 1.5rem;
border-right: 1px solid #334155;
}

.logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 2.5rem;
}

.logo-icon {
background: var(--primary);
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}

.logo h1 {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(90deg, #60a5fa, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.logo span {
color: #94a3b8;
font-size: 0.9rem;
}

.nav-section {
margin-bottom: 2.5rem;
}

.section-title {
color: #94a3b8;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 8px;
}

.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 0.9rem 1rem;
margin-bottom: 0.5rem;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.3s ease;
color: #cbd5e1;
}

.nav-item:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}

.nav-item.active {
background: var(--primary);
color: white;
font-weight: 600;
}

.nav-item i {
width: 20px;
text-align: center;
}

.ai-status {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: var(--radius);
padding: 1rem;
margin-top: 2rem;
}

.status-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}

.status-label span {
font-size: 0.9rem;
color: #94a3b8;
}

.status-badge {
background: var(--success);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}

.progress-bar {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.5rem;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--success), #34d399);
width: 100%;
border-radius: 3px;
}

/* === MAIN CONTENT === */
.main-content {
padding: 2rem;
overflow-y: auto;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
}

.header h2 {
font-size: 1.8rem;
font-weight: 700;
color: var(--secondary);
}

.header-controls {
display: flex;
gap: 1rem;
}

.btn {
padding: 0.75rem 1.5rem;
border-radius: var(--radius);
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}

.btn-primary {
background: var(--primary);
color: white;
}

.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}

.btn-outline {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}

.btn-outline:hover {
background: var(--primary);
color: white;
}

/* === GENERATION GRID === */
.generation-section {
margin-bottom: 3rem;
}

.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}

.section-header h3 {
font-size: 1.4rem;
color: var(--secondary);
}

.section-actions {
display: flex;
gap: 0.5rem;
}

.generation-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem;
}

.generation-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
transition: all 0.3s ease;
cursor: pointer;
border: 2px solid transparent;
}

.generation-card:hover {
transform: translateY(-5px);
border-color: var(--primary);
box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.2);
}

.card-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #dbeafe, #93c5fd);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
color: var(--primary);
font-size: 1.5rem;
}

.generation-card h4 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: var(--secondary);
}

.generation-card p {
color: var(--gray);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
}

.card-badge {
display: inline-block;
background: #f0f9ff;
color: var(--primary);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}

/* === CHAT SECTION === */
.chat-section {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.5rem;
margin-bottom: 2rem;
}

.chat-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 1.5rem;
}

.ai-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #8b5cf6, #ec4899);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}

.ai-info h4 {
font-size: 1.2rem;
color: var(--secondary);
}

.ai-info p {
color: var(--gray);
font-size: 0.9rem;
}

.chat-input {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}

.chat-input input {
flex: 1;
padding: 1rem 1.5rem;
border: 2px solid #e2e8f0;
border-radius: var(--radius);
font-size: 1rem;
transition: all 0.3s ease;
}

.chat-input input:focus {
outline: none;
border-color: var(--primary);
}

.chat-input button {
padding: 0 2rem;
font-weight: 600;
}

/* === PREVIEW SECTION === */
.preview-section {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.5rem;
}

.preview-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}

.preview-actions {
display: flex;
gap: 0.5rem;
}

.preview-window {
background: #1e293b;
border-radius: 8px;
padding: 1.5rem;
height: 300px;
overflow-y: auto;
font-family: 'Courier New', monospace;
color: #94a3b8;
margin-bottom: 1.5rem;
}

.code-line {
margin-bottom: 0.5rem;
line-height: 1.5;

Files changed (6) hide show
  1. README.md +8 -5
  2. components/navbar.js +177 -0
  3. components/sidebar.js +159 -0
  4. index.html +169 -19
  5. script.js +36 -0
  6. style.css +65 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codecraft Ai Studio
3
- emoji: 🏃
4
- colorFrom: indigo
5
- colorTo: blue
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: CodeCraft AI Studio 🚀
3
+ colorFrom: pink
4
+ colorTo: green
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/navbar.js ADDED
@@ -0,0 +1,177 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ position: fixed;
8
+ top: 0;
9
+ left: 0;
10
+ right: 0;
11
+ height: 4rem;
12
+ background-color: white;
13
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
14
+ z-index: 50;
15
+ display: flex;
16
+ align-items: center;
17
+ padding: 0 2rem;
18
+ transition: all 0.3s ease;
19
+ }
20
+
21
+ .dark nav {
22
+ background-color: #1e293b;
23
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
24
+ }
25
+
26
+ .logo {
27
+ display: flex;
28
+ align-items: center;
29
+ font-weight: 700;
30
+ font-size: 1.25rem;
31
+ color: #4f46e5;
32
+ margin-right: auto;
33
+ }
34
+
35
+ .dark .logo {
36
+ color: #818cf8;
37
+ }
38
+
39
+ .logo-icon {
40
+ margin-right: 0.75rem;
41
+ color: #4f46e5;
42
+ }
43
+
44
+ .dark .logo-icon {
45
+ color: #818cf8;
46
+ }
47
+
48
+ .nav-items {
49
+ display: flex;
50
+ align-items: center;
51
+ gap: 1.5rem;
52
+ }
53
+
54
+ .nav-link {
55
+ color: #64748b;
56
+ font-weight: 500;
57
+ transition: color 0.2s;
58
+ }
59
+
60
+ .dark .nav-link {
61
+ color: #94a3b8;
62
+ }
63
+
64
+ .nav-link:hover {
65
+ color: #4f46e5;
66
+ }
67
+
68
+ .dark .nav-link:hover {
69
+ color: #818cf8;
70
+ }
71
+
72
+ .user-menu {
73
+ display: flex;
74
+ align-items: center;
75
+ gap: 1rem;
76
+ }
77
+
78
+ .avatar {
79
+ width: 2.5rem;
80
+ height: 2.5rem;
81
+ border-radius: 9999px;
82
+ background-color: #e2e8f0;
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ overflow: hidden;
87
+ }
88
+
89
+ .dark .avatar {
90
+ background-color: #334155;
91
+ }
92
+
93
+ .theme-toggle {
94
+ background: none;
95
+ border: none;
96
+ cursor: pointer;
97
+ color: #64748b;
98
+ transition: color 0.2s;
99
+ }
100
+
101
+ .dark .theme-toggle {
102
+ color: #94a3b8;
103
+ }
104
+
105
+ .theme-toggle:hover {
106
+ color: #4f46e5;
107
+ }
108
+
109
+ .dark .theme-toggle:hover {
110
+ color: #818cf8;
111
+ }
112
+ </style>
113
+
114
+ <nav>
115
+ <a href="#" class="logo">
116
+ <i data-feather="code" class="logo-icon"></i>
117
+ <span>CodeCraft</span>
118
+ </a>
119
+
120
+ <div class="nav-items">
121
+ <a href="#" class="nav-link">Dashboard</a>
122
+ <a href="#" class="nav-link">Projects</a>
123
+ <a href="#" class="nav-link">Templates</a>
124
+ <a href="#" class="nav-link">Documentation</a>
125
+ </div>
126
+
127
+ <div class="user-menu">
128
+ <button class="theme-toggle" id="darkModeToggle">
129
+ <i data-feather="moon"></i>
130
+ </button>
131
+
132
+ <div class="avatar">
133
+ <i data-feather="user"></i>
134
+ </div>
135
+ </div>
136
+ </nav>
137
+ `;
138
+
139
+ // Initialize feather icons in shadow DOM
140
+ const featherScript = document.createElement('script');
141
+ featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
142
+ this.shadowRoot.appendChild(featherScript);
143
+
144
+ featherScript.onload = () => {
145
+ feather.replace();
146
+
147
+ // Add dark mode toggle functionality
148
+ const darkModeToggle = this.shadowRoot.getElementById('darkModeToggle');
149
+ const html = document.documentElement;
150
+
151
+ darkModeToggle.addEventListener('click', () => {
152
+ html.classList.toggle('dark');
153
+ localStorage.setItem('darkMode', html.classList.contains('dark'));
154
+
155
+ // Update icon
156
+ const icon = darkModeToggle.querySelector('i');
157
+ if (html.classList.contains('dark')) {
158
+ icon.setAttribute('data-feather', 'sun');
159
+ } else {
160
+ icon.setAttribute('data-feather', 'moon');
161
+ }
162
+ feather.replace();
163
+ });
164
+
165
+ // Set initial icon based on current mode
166
+ const icon = darkModeToggle.querySelector('i');
167
+ if (html.classList.contains('dark')) {
168
+ icon.setAttribute('data-feather', 'sun');
169
+ } else {
170
+ icon.setAttribute('data-feather', 'moon');
171
+ }
172
+ feather.replace();
173
+ };
174
+ }
175
+ }
176
+
177
+ customElements.define('custom-navbar', CustomNavbar);
components/sidebar.js ADDED
@@ -0,0 +1,159 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ aside {
7
+ position: fixed;
8
+ top: 4rem;
9
+ left: 0;
10
+ bottom: 0;
11
+ width: 16rem;
12
+ background-color: white;
13
+ border-right: 1px solid #e2e8f0;
14
+ padding: 1.5rem;
15
+ overflow-y: auto;
16
+ transition: all 0.3s ease;
17
+ z-index: 40;
18
+ }
19
+
20
+ .dark aside {
21
+ background-color: #1e293b;
22
+ border-right-color: #334155;
23
+ }
24
+
25
+ .sidebar-section {
26
+ margin-bottom: 2rem;
27
+ }
28
+
29
+ .sidebar-title {
30
+ font-size: 0.75rem;
31
+ font-weight: 600;
32
+ text-transform: uppercase;
33
+ letter-spacing: 0.05em;
34
+ color: #64748b;
35
+ margin-bottom: 1rem;
36
+ }
37
+
38
+ .dark .sidebar-title {
39
+ color: #94a3b8;
40
+ }
41
+
42
+ .sidebar-link {
43
+ display: flex;
44
+ align-items: center;
45
+ padding: 0.75rem 1rem;
46
+ border-radius: 0.375rem;
47
+ color: #475569;
48
+ font-weight: 500;
49
+ transition: all 0.2s;
50
+ margin-bottom: 0.25rem;
51
+ }
52
+
53
+ .dark .sidebar-link {
54
+ color: #cbd5e1;
55
+ }
56
+
57
+ .sidebar-link:hover {
58
+ background-color: #f1f5f9;
59
+ color: #4f46e5;
60
+ }
61
+
62
+ .dark .sidebar-link:hover {
63
+ background-color: #334155;
64
+ color: #818cf8;
65
+ }
66
+
67
+ .sidebar-link.active {
68
+ background-color: #eef2ff;
69
+ color: #4f46e5;
70
+ }
71
+
72
+ .dark .sidebar-link.active {
73
+ background-color: #3730a3;
74
+ color: #a5b4fc;
75
+ }
76
+
77
+ .sidebar-icon {
78
+ margin-right: 0.75rem;
79
+ width: 1.25rem;
80
+ height: 1.25rem;
81
+ }
82
+
83
+ .sidebar-badge {
84
+ margin-left: auto;
85
+ background-color: #e0e7ff;
86
+ color: #4f46e5;
87
+ font-size: 0.75rem;
88
+ font-weight: 600;
89
+ padding: 0.125rem 0.5rem;
90
+ border-radius: 9999px;
91
+ }
92
+
93
+ .dark .sidebar-badge {
94
+ background-color: #4338ca;
95
+ color: #c7d2fe;
96
+ }
97
+ </style>
98
+
99
+ <aside>
100
+ <div class="sidebar-section">
101
+ <h3 class="sidebar-title">Main</h3>
102
+ <a href="#" class="sidebar-link active">
103
+ <i data-feather="home" class="sidebar-icon"></i>
104
+ Dashboard
105
+ </a>
106
+ <a href="#" class="sidebar-link">
107
+ <i data-feather="inbox" class="sidebar-icon"></i>
108
+ Projects
109
+ <span class="sidebar-badge">12</span>
110
+ </a>
111
+ <a href="#" class="sidebar-link">
112
+ <i data-feather="star" class="sidebar-icon"></i>
113
+ Favorites
114
+ </a>
115
+ </div>
116
+
117
+ <div class="sidebar-section">
118
+ <h3 class="sidebar-title">Development</h3>
119
+ <a href="#" class="sidebar-link">
120
+ <i data-feather="code" class="sidebar-icon"></i>
121
+ Code Editor
122
+ </a>
123
+ <a href="#" class="sidebar-link">
124
+ <i data-feather="layout" class="sidebar-icon"></i>
125
+ UI Components
126
+ </a>
127
+ <a href="#" class="sidebar-link">
128
+ <i data-feather="database" class="sidebar-icon"></i>
129
+ API Explorer
130
+ </a>
131
+ </div>
132
+
133
+ <div class="sidebar-section">
134
+ <h3 class="sidebar-title">Tools</h3>
135
+ <a href="#" class="sidebar-link">
136
+ <i data-feather="settings" class="sidebar-icon"></i>
137
+ Settings
138
+ </a>
139
+ <a href="#" class="sidebar-link">
140
+ <i data-feather="help-circle" class="sidebar-icon"></i>
141
+ Documentation
142
+ </a>
143
+ <a href="#" class="sidebar-link">
144
+ <i data-feather="message-square" class="sidebar-icon"></i>
145
+ Support
146
+ </a>
147
+ </div>
148
+ </aside>
149
+ `;
150
+
151
+ // Initialize feather icons in shadow DOM
152
+ const featherScript = document.createElement('script');
153
+ featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
154
+ this.shadowRoot.appendChild(featherScript);
155
+ featherScript.onload = () => feather.replace();
156
+ }
157
+ }
158
+
159
+ customElements.define('custom-sidebar', CustomSidebar);
index.html CHANGED
@@ -1,19 +1,169 @@
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>CodeCraft AI Studio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <link rel="stylesheet" href="style.css">
11
+ </head>
12
+ <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
13
+ <script src="components/navbar.js"></script>
14
+ <script src="components/sidebar.js"></script>
15
+
16
+ <custom-navbar></custom-navbar>
17
+
18
+ <div class="flex">
19
+ <custom-sidebar></custom-sidebar>
20
+
21
+ <main class="flex-1 p-8 ml-64 mt-16">
22
+ <div class="max-w-7xl mx-auto">
23
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 mb-8">
24
+ <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to CodeCraft AI Studio</h1>
25
+ <p class="text-gray-600 dark:text-gray-300 mb-6">Your AI-powered development environment for creating stunning web applications.</p>
26
+
27
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
28
+ <!-- Project Card 1 -->
29
+ <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg p-6 text-white shadow-lg">
30
+ <div class="flex items-center mb-4">
31
+ <i data-feather="layout" class="mr-3"></i>
32
+ <h3 class="text-xl font-semibold">UI Templates</h3>
33
+ </div>
34
+ <p class="mb-4">Browse our collection of professionally designed UI templates.</p>
35
+ <a href="#" class="inline-flex items-center text-sm font-medium hover:underline">
36
+ Explore
37
+ <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
38
+ </a>
39
+ </div>
40
+
41
+ <!-- Project Card 2 -->
42
+ <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg p-6 text-white shadow-lg">
43
+ <div class="flex items-center mb-4">
44
+ <i data-feather="code" class="mr-3"></i>
45
+ <h3 class="text-xl font-semibold">Code Generator</h3>
46
+ </div>
47
+ <p class="mb-4">Generate production-ready code with our AI-powered tools.</p>
48
+ <a href="#" class="inline-flex items-center text-sm font-medium hover:underline">
49
+ Try Now
50
+ <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
51
+ </a>
52
+ </div>
53
+
54
+ <!-- Project Card 3 -->
55
+ <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-lg p-6 text-white shadow-lg">
56
+ <div class="flex items-center mb-4">
57
+ <i data-feather="zap" class="mr-3"></i>
58
+ <h3 class="text-xl font-semibold">AI Assistant</h3>
59
+ </div>
60
+ <p class="mb-4">Get instant help from our AI development assistant.</p>
61
+ <a href="#" class="inline-flex items-center text-sm font-medium hover:underline">
62
+ Chat Now
63
+ <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
64
+ </a>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
70
+ <!-- Recent Projects -->
71
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
72
+ <div class="flex justify-between items-center mb-6">
73
+ <h2 class="text-xl font-bold text-gray-800 dark:text-white">Recent Projects</h2>
74
+ <a href="#" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400">View All</a>
75
+ </div>
76
+
77
+ <div class="space-y-4">
78
+ <div class="flex items-start p-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
79
+ <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-lg mr-4">
80
+ <i data-feather="shopping-cart" class="text-blue-500 dark:text-blue-300"></i>
81
+ </div>
82
+ <div>
83
+ <h3 class="font-medium text-gray-800 dark:text-white">E-commerce Dashboard</h3>
84
+ <p class="text-sm text-gray-500 dark:text-gray-400">Updated 2 hours ago</p>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="flex items-start p-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
89
+ <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-lg mr-4">
90
+ <i data-feather="users" class="text-purple-500 dark:text-purple-300"></i>
91
+ </div>
92
+ <div>
93
+ <h3 class="font-medium text-gray-800 dark:text-white">User Management System</h3>
94
+ <p class="text-sm text-gray-500 dark:text-gray-400">Updated yesterday</p>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="flex items-start p-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
99
+ <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg mr-4">
100
+ <i data-feather="bar-chart-2" class="text-green-500 dark:text-green-300"></i>
101
+ </div>
102
+ <div>
103
+ <h3 class="font-medium text-gray-800 dark:text-white">Analytics Dashboard</h3>
104
+ <p class="text-sm text-gray-500 dark:text-gray-400">Updated 3 days ago</p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Quick Actions -->
111
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
112
+ <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-6">Quick Actions</h2>
113
+
114
+ <div class="grid grid-cols-2 gap-4">
115
+ <a href="#" class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
116
+ <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-full mb-3">
117
+ <i data-feather="file-plus" class="text-blue-500 dark:text-blue-300"></i>
118
+ </div>
119
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-200">New Project</span>
120
+ </a>
121
+
122
+ <a href="#" class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
123
+ <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-full mb-3">
124
+ <i data-feather="upload" class="text-purple-500 dark:text-purple-300"></i>
125
+ </div>
126
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Import</span>
127
+ </a>
128
+
129
+ <a href="#" class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
130
+ <div class="bg-green-100 dark:bg-green-900 p-3 rounded-full mb-3">
131
+ <i data-feather="settings" class="text-green-500 dark:text-green-300"></i>
132
+ </div>
133
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Settings</span>
134
+ </a>
135
+
136
+ <a href="#" class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
137
+ <div class="bg-yellow-100 dark:bg-yellow-900 p-3 rounded-full mb-3">
138
+ <i data-feather="help-circle" class="text-yellow-500 dark:text-yellow-300"></i>
139
+ </div>
140
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Help</span>
141
+ </a>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </main>
147
+ </div>
148
+
149
+ <script>
150
+ feather.replace();
151
+
152
+ // Dark mode toggle
153
+ const darkModeToggle = document.getElementById('darkModeToggle');
154
+ const html = document.documentElement;
155
+
156
+ if (localStorage.getItem('darkMode') === 'true') {
157
+ html.classList.add('dark');
158
+ }
159
+
160
+ darkModeToggle.addEventListener('click', () => {
161
+ html.classList.toggle('dark');
162
+ localStorage.setItem('darkMode', html.classList.contains('dark'));
163
+ });
164
+ </script>
165
+
166
+ <script src="script.js"></script>
167
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
168
+ </body>
169
+ </html>
script.js ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ console.log('CodeCraft AI Studio loaded');
3
+
4
+ // Initialize tooltips
5
+ const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
6
+ tooltipTriggerList.map(function (tooltipTriggerEl) {
7
+ return new bootstrap.Tooltip(tooltipTriggerEl);
8
+ });
9
+
10
+ // Handle theme switcher
11
+ const themeSwitcher = document.getElementById('themeSwitcher');
12
+ if (themeSwitcher) {
13
+ themeSwitcher.addEventListener('click', () => {
14
+ document.documentElement.classList.toggle('dark');
15
+ localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
16
+ });
17
+ }
18
+
19
+ // Initialize feather icons
20
+ feather.replace();
21
+ });
22
+
23
+ // Sample function to handle project creation
24
+ function createNewProject() {
25
+ console.log('Creating new project...');
26
+ // Implementation would go here
27
+ }
28
+
29
+ // Sample function to handle file upload
30
+ function handleFileUpload(event) {
31
+ const file = event.target.files[0];
32
+ if (file) {
33
+ console.log('Uploading file:', file.name);
34
+ // Implementation would go here
35
+ }
36
+ }
style.css CHANGED
@@ -1,28 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
+ :root {
4
+ --primary: #4f46e5;
5
+ --primary-dark: #4338ca;
6
+ --secondary: #1e293b;
7
+ --accent: #8b5cf6;
8
+ --success: #10b981;
9
+ --warning: #f59e0b;
10
+ --danger: #ef4444;
11
+ --light: #f8fafc;
12
+ --dark: #0f172a;
13
+ --gray: #64748b;
14
+ }
15
+
16
+ * {
17
+ margin: 0;
18
+ padding: 0;
19
+ box-sizing: border-box;
20
+ }
21
+
22
  body {
23
+ font-family: 'Inter', sans-serif;
24
+ transition: background-color 0.3s ease;
25
+ }
26
+
27
+ /* Custom scrollbar */
28
+ ::-webkit-scrollbar {
29
+ width: 8px;
30
+ height: 8px;
31
+ }
32
+
33
+ ::-webkit-scrollbar-track {
34
+ background: #f1f1f1;
35
  }
36
 
37
+ ::-webkit-scrollbar-thumb {
38
+ background: #c1c1c1;
39
+ border-radius: 4px;
40
  }
41
 
42
+ ::-webkit-scrollbar-thumb:hover {
43
+ background: #a1a1a1;
 
 
 
44
  }
45
 
46
+ .dark ::-webkit-scrollbar-track {
47
+ background: #1e293b;
 
 
 
 
48
  }
49
 
50
+ .dark ::-webkit-scrollbar-thumb {
51
+ background: #475569;
52
  }
53
+
54
+ .dark ::-webkit-scrollbar-thumb:hover {
55
+ background: #64748b;
56
+ }
57
+
58
+ /* Animations */
59
+ @keyframes fadeIn {
60
+ from { opacity: 0; }
61
+ to { opacity: 1; }
62
+ }
63
+
64
+ .fade-in {
65
+ animation: fadeIn 0.5s ease-in-out;
66
+ }
67
+
68
+ @keyframes pulse {
69
+ 0%, 100% { opacity: 1; }
70
+ 50% { opacity: 0.5; }
71
+ }
72
+
73
+ .pulse {
74
+ animation: pulse 2s infinite;
75
+ }