Hugging Face's logo

Spaces:
Abmacode12
/
codebloom-rose-petals
Running

App Files Community
Abmacode12 commited on
Commit
fc287fb
·
verified ·
1 Parent(s): bf2ce9c

<!doctype html>

Browse files

<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Espace Codage</title>
<style>
:root{
--bg:#0b0f16;
--panel:#0f1521;
--panel2:#0c111b;
--line:rgba(255,255,255,.08);
--text:rgba(255,255,255,.92);
--muted:rgba(255,255,255,.65);
--muted2:rgba(255,255,255,.45);
--shadow: 0 18px 60px rgba(0,0,0,.45);
--r:16px;
--r2:14px;
--focus: rgba(93, 173, 255, .35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
background: radial-gradient(1200px 700px at 18% 10%, rgba(93,173,255,.12), transparent 55%),
radial-gradient(1200px 800px at 85% 20%, rgba(255,145,85,.08), transparent 60%),
var(--bg);
color:var(--text);
font: 14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
overflow:hidden;
}

/* Layout 3 colonnes */
.app{
height:100%;
display:grid;
grid-template-columns: 320px 1fr 520px;
gap:14px;
padding:14px;
}

.col{
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
border:1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow);
overflow:hidden;
min-width: 0;
}

/* Colonne gauche */
.sidebar{
display:flex;
flex-direction:column;
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

.sidebarTop{
padding:14px 14px 10px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
gap:10px;
}

.brandDot{
width:10px;height:10px;border-radius:50%;
background: radial-gradient(circle at 30% 30%, #7fd3ff, #3a78ff);
box-shadow:0 0 0 4px rgba(58,120,255,.14);
}

.brandTitle{
font-weight:700;
letter-spacing:.2px;
font-size:14px;
}

.sidebarSearch{
padding:12px 14px;
display:flex;
gap:10px;
align-items:center;
border-bottom:1px solid var(--line);
background: rgba(0,0,0,.12);
}

.sIcon{
width:34px;height:34px;border-radius:12px;
display:grid;place-items:center;
background: rgba(255,255,255,.04);
border:1px solid var(--line);
color:var(--muted);
user-select:none;
}

.sInput{
flex:1;
display:flex;align-items:center;
background: rgba(255,255,255,.03);
border:1px solid var(--line);
border-radius:12px;
padding:9px 10px;
color:var(--muted);
gap:8px;
}
.sInput input{
width:100%;
border:0; outline:0;
background:transparent;
color:var(--text);
font: inherit;
}
.sInput input::placeholder{color:var(--muted2)}

.nav{
padding:10px 10px 14px;
overflow:auto;
}
.navSection{
padding:10px 8px 6px;
color:var(--muted2);
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
}
.navItem{
display:flex;
align-items:center;
gap:10px;
padding:10px 10px;
border-radius:12px;
cursor:pointer;
color:var(--muted);
border:1px solid transparent;
user-select:none;
}
.navItem:hover{
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.06);
color:var(--text);
}
.navItem.active{
background: rgba(93,173,255,.10);
border-color: rgba(93,173,255,.18);
color:var(--text);
}
.navItem .ico{
width:30px;height:30px;border-radius:12px;
display:grid;place-items:center;
background: rgba(255,255,255,.04);
border:1px solid var(--line);
color:var(--muted);
flex:0 0 auto;
}
.navItem .label{
flex:1;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.sidebarFooter{
margin-top:auto;
padding:12px 14px;
border-top:1px solid var(--line);
background: rgba(0,0,0,.10);
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
}
.tinyBtn{
display:flex;align-items:center;gap:8px;
background: rgba(255,255,255,.04);
border:1px solid var(--line);
padding:9px 10px;
border-radius:12px;
color:var(--muted);
cursor:pointer;
user-select:none;
}
.tinyBtn:hover{color:var(--text); background: rgba(255,255,255,.055);}
.tinyBtn span{font-size:12px;color:var(--muted2)}

/* Colonne milieu (vide + barre en bas) */
.center{
display:flex;
flex-direction:column;
background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.06));
}

.centerTop{
padding:12px 14px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
gap:10px;
background: rgba(0,0,0,.10);
}
.pill{
padding:7px 10px;
border-radius:999px;
border:1px solid var(--line);
background: rgba(255,255,255,.03);
color:var(--muted);
font-size:12px;
}

.centerBody{
flex:1;
position:relative;
overflow:auto;
}

.emptyHint{
position:absolute;
inset:0;
display:grid;
place-items:center;
color:var(--muted2);
padding:24px;
text-align:center;
}

.composerWrap{
padding:12px 12px 14px;
border-top:1px solid var(--line);
background: rgba(0,0,0,.18);
}

.composer{
display:flex;
align-items:center;
gap:10px;
padding:10px;
border-radius: 16px;
border:1px solid var(--line);
background: rgba(255,255,255,.03);
}

.iconBtn{
width:40px;height:40px;border-radius:14px;
display:grid;place-items:center;
background: rgba(255,255,255,.04);
border:1px solid var(--line);
color:var(--muted);
cursor:pointer;
user-select:none;
flex:0 0 auto;
}
.iconBtn:hover{color:var(--text); background: rgba(255,255,255,.06)}
.iconBtn:active{transform: translateY(1px)}

.composerInput{
flex:1;
display:flex;
align-items:center;
gap:10px;
padding:0 8px;
min-width: 0;
}
.composerInput input{
width:100%;
border:0; outline:0;
background:transparent;
color:var(--text);
font: 14px/1.4 inherit;
padding: 8px 0;
min-width:0;
}
.composerInput input::placeholder{color:var(--muted2)}
.composerInput input:focus{
filter: drop-shadow(0 0 0 var(--focus));
}

.sendBtn{
width:44px;height:44px;border-radius:16px;
display:grid;place-items:center;
border:1px solid rgba(93,173,255,.35);
background: radial-gradient(circle at 30% 30%, rgba(127,211,255,.28), rgba(58,120,255,.22));
color:var(--text);
cursor:pointer;
user-select:none;
flex:0 0 auto;
}
.sendBtn:disabled{
opacity:.45;
cursor:not-allowed;
filter: grayscale(30%);
}

/* Colonne droite (aperçu) */
.preview{
display:flex;
flex-direction:column;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}

.previewTop{
padding:12px 14px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
background: rgba(0,0,0,.10);
}
.previewTopLeft{
display:flex;align-items:center;gap:10px;
min-width:0;
}
.previewTitle{
font-weight:700;
}
.toolRow{
display:flex;align-items:center;gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
}
.tool{
height:34px;
padding:0 10px;
border-radius:12px;
border:1px solid var(--line);
background: rgba(255,255,255,.03);
color:var(--muted);
display:flex;align-items:center;gap:8px;
cursor:pointer;
user-select:none;
}
.tool:hover{color:var(--text); background: rgba(255,255,255,.055)}
.tool .k{color:var(--muted2); font-size:12px}

.previewBody{
flex:1;
display:flex;
flex-direction:column;
background: rgba(0,0,0,.10);
}

.previewCanvas{
flex:1;
display:grid;
place-items:center;
padding:22px;
}

.previewCard{
width:min(420px, 92%);
border-radius: 18px;
border:1px solid var(--line);
background: rgba(255,255,255,.03);
padding:18px;
text-align:center;
color:var(--muted);
}
.ghost{
height:140px;
border-radius:16px;
border:1px dashed rgba(255,255,255,.14);
background:
linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.02), rgba(255,255,255,.04));
opacity:.9;
margin:0 auto 14px;
max-width: 340px;
}
.failTitle{
font-weight:700;
color:var(--text);
margin-bottom:6px;
}
.failMsg{color:var(--muted)}
.previewBottom{
padding:12px 14px;
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
background: rgba(0,0,0,.14);
}

/* Responsive */
@media (max-width: 1200px){
.app{grid-template-columns: 300px 1fr 460px;}
}
@media (max-width: 980px){
body{overflow:auto}
.app{
height:auto;
grid-template-columns: 1fr;
}
.col{min-height: 360px;}
}
</style>
</head>

<body>
<div class="app">

<!-- Colonne 1 : Espace Codage -->
<aside class="col sidebar">
<div class="sidebarTop">
<div class="brandDot" aria-hidden="true"></div>
<div class="brandTitle">Espace Codage</div>
</div>

<div class="sidebarSearch">
<div class="sIcon" title="Nouvelle tâche">✎</div>
<div class="sInput" title="Rechercher">
<span style="color:var(--muted2)">⌕</span>
<input id="navSearch" placeholder="Rechercher…" autocomplete="off" />
</div>
</div>

<div cl

Files changed (6) hide show
  1. README.md +8 -5
  2. components/footer.js +227 -0
  3. components/navbar.js +258 -0
  4. index.html +151 -19
  5. script.js +163 -0
  6. style.css +112 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codebloom Rose Petals
3
- emoji: 🐠
4
- colorFrom: gray
5
- colorTo: indigo
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: CodeBloom Rose Petals 🌹
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/footer.js ADDED
@@ -0,0 +1,227 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class BloomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
9
+ border-top: 1px solid rgba(244, 114, 182, 0.1);
10
+ padding: 3rem 0 2rem;
11
+ margin-top: 4rem;
12
+ }
13
+
14
+ .footer-container {
15
+ max-width: 1280px;
16
+ margin: 0 auto;
17
+ padding: 0 1rem;
18
+ }
19
+
20
+ .footer-content {
21
+ display: grid;
22
+ grid-template-columns: repeat(4, 1fr);
23
+ gap: 3rem;
24
+ margin-bottom: 2.5rem;
25
+ }
26
+
27
+ .footer-section {
28
+ display: flex;
29
+ flex-direction: column;
30
+ gap: 1.25rem;
31
+ }
32
+
33
+ .footer-heading {
34
+ font-size: 1.125rem;
35
+ font-weight: 700;
36
+ color: #ec4899;
37
+ margin-bottom: 0.5rem;
38
+ }
39
+
40
+ .footer-links {
41
+ display: flex;
42
+ flex-direction: column;
43
+ gap: 0.75rem;
44
+ }
45
+
46
+ .footer-link {
47
+ display: inline-flex;
48
+ align-items: center;
49
+ gap: 0.5rem;
50
+ color: #4b5563;
51
+ text-decoration: none;
52
+ font-weight: 500;
53
+ transition: color 0.3s ease;
54
+ }
55
+
56
+ .footer-link:hover {
57
+ color: #ec4899;
58
+ }
59
+
60
+ .footer-text {
61
+ color: #6b7280;
62
+ font-size: 0.875rem;
63
+ line-height: 1.5;
64
+ }
65
+
66
+ .footer-bottom {
67
+ border-top: 1px solid rgba(244, 114, 182, 0.1);
68
+ padding-top: 1.5rem;
69
+ display: flex;
70
+ justify-content: space-between;
71
+ align-items: center;
72
+ }
73
+
74
+ .footer-social {
75
+ display: flex;
76
+ align-items: center;
77
+ gap: 1rem;
78
+ }
79
+
80
+ .social-icon {
81
+ display: inline-flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ width: 2.5rem;
85
+ height: 2.5rem;
86
+ border-radius: 0.75rem;
87
+ background: rgba(244, 114, 182, 0.08);
88
+ color: #ec4899;
89
+ text-decoration: none;
90
+ transition: all 0.3s ease;
91
+ }
92
+
93
+ .social-icon:hover {
94
+ background: rgba(244, 114, 182, 0.15);
95
+ transform: translateY(-2px);
96
+ }
97
+
98
+ @media (max-width: 1024px) {
99
+ .footer-content {
100
+ grid-template-columns: repeat(2, 1fr);
101
+ gap: 2rem;
102
+ }
103
+ }
104
+
105
+ @media (max-width: 640px) {
106
+ .footer-content {
107
+ grid-template-columns: 1fr;
108
+ gap: 2rem;
109
+ }
110
+
111
+ .footer-bottom {
112
+ flex-direction: column;
113
+ gap: 1rem;
114
+ text-align: center;
115
+ }
116
+ }
117
+ </style>
118
+
119
+ <footer class="footer-container">
120
+ <div class="footer-content">
121
+ <div class="footer-section">
122
+ <h3 class="footer-heading">CodeBloom 🌹</h3>
123
+ <p class="footer-text">
124
+ Transform your coding experience with our beautiful rose-themed development platform. Where elegance meets functionality.
125
+ </p>
126
+ </div>
127
+
128
+ <div class="footer-section">
129
+ <h3 class="footer-heading">Produits</h3>
130
+ <div class="footer-links">
131
+ <a href="ide.html" class="footer-link">
132
+ <i data-feather="code" class="w-4 h-4"></i>
133
+ Éditeur Intelligent
134
+ </a>
135
+ <a href="collaboration.html" class="footer-link">
136
+ <i data-feather="users" class="w-4 h-4"></i>
137
+ Collaboration
138
+ </a>
139
+ <a href="ai-assistant.html" class="footer-link">
140
+ <i data-feather="cpu" class="w-4 h-4"></i>
141
+ Assistant IA
142
+ </a>
143
+ <a href="deployment.html" class="footer-link">
144
+ <i data-feather="cloud" class="w-4 h-4"></i>
145
+ Déploiement
146
+ </a>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="footer-section">
151
+ <h3 class="footer-heading">Ressources</h3>
152
+ <div class="footer-links">
153
+ <a href="docs.html" class="footer-link">
154
+ <i data-feather="book" class="w-4 h-4"></i>
155
+ Documentation
156
+ </a>
157
+ <a href="tutorials.html" class="footer-link">
158
+ <i data-feather="video" class="w-4 h-4"></i>
159
+ Tutoriels
160
+ </a>
161
+ <a href="blog.html" class="footer-link">
162
+ <i data-feather="edit-3" class="w-4 h-4"></i>
163
+ Blog
164
+ </a>
165
+ <a href="support.html" class="footer-link">
166
+ <i data-feather="message-circle" class="w-4 h-4"></i>
167
+ Support
168
+ </a>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="footer-section">
173
+ <h3 class="footer-heading">Société</h3>
174
+ <div class="footer-links">
175
+ <a href="about.html" class="footer-link">
176
+ <i data-feather="info" class="w-4 h-4"></i>
177
+ À propos
178
+ </a>
179
+ <a href="careers.html" class="footer-link">
180
+ <i data-feather="briefcase" class="w-4 h-4"></i>
181
+ Carrières
182
+ </a>
183
+ <a href="contact.html" class="footer-link">
184
+ <i data-feather="mail" class="w-4 h-4"></i>
185
+ Contact
186
+ </a>
187
+ <a href="privacy.html" class="footer-link">
188
+ <i data-feather="shield" class="w-4 h-4"></i>
189
+ Confidentialité
190
+ </a>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="footer-bottom">
196
+ <p class="footer-text">© 2025 CodeBloom Rose Petals. Made with ❤️ and ☕ by developers, for developers.</p>
197
+
198
+ <div class="footer-social">
199
+ <a href="https://twitter.com/codebloom" class="social-icon" target="_blank" rel="noopener noreferrer">
200
+ <i data-feather="twitter" class="w-5 h-5"></i>
201
+ </a>
202
+ <a href="https://github.com/codebloom" class="social-icon" target="_blank" rel="noopener noreferrer">
203
+ <i data-feather="github" class="w-5 h-5"></i>
204
+ </a>
205
+ <a href="https://discord.gg/codebloom" class="social-icon" target="_blank" rel="noopener noreferrer">
206
+ <i data-feather="message-circle" class="w-5 h-5"></i>
207
+ </a>
208
+ <a href="https://youtube.com/codebloom" class="social-icon" target="_blank" rel="noopener noreferrer">
209
+ <i data-feather="youtube" class="w-5 h-5"></i>
210
+ </a>
211
+ </div>
212
+ </div>
213
+ </footer>
214
+ `;
215
+
216
+ // Initialize icons after rendering
217
+ setTimeout(() => {
218
+ if (typeof feather !== 'undefined') {
219
+ this.shadowRoot.querySelectorAll('[data-feather]').forEach(el => {
220
+ feather.replace();
221
+ });
222
+ }
223
+ }, 100);
224
+ }
225
+ }
226
+
227
+ customElements.define('bloom-footer', BloomFooter);
components/navbar.js ADDED
@@ -0,0 +1,258 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class BloomNavbar 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
+ backdrop-filter: blur(12px);
14
+ background: rgba(255, 255, 255, 0.92);
15
+ border-bottom: 1px solid rgba(244, 114, 182, 0.1);
16
+ box-shadow: 0 4px 20px rgba(244, 114, 182, 0.08);
17
+ }
18
+
19
+ .navbar-container {
20
+ max-width: 1280px;
21
+ margin: 0 auto;
22
+ padding: 0 1rem;
23
+ height: 4rem;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: space-between;
27
+ gap: 1.5rem;
28
+ }
29
+
30
+ .logo {
31
+ display: flex;
32
+ align-items: center;
33
+ gap: 0.75rem;
34
+ text-decoration: none;
35
+ }
36
+
37
+ .logo-text {
38
+ font-weight: 800;
39
+ font-size: 1.5rem;
40
+ background: linear-gradient(135deg, #ec4899, #be185d);
41
+ -webkit-background-clip: text;
42
+ background-clip: text;
43
+ color: transparent;
44
+ }
45
+
46
+ .logo-dot {
47
+ width: 0.75rem;
48
+ height: 0.75rem;
49
+ border-radius: 50%;
50
+ background: linear-gradient(135deg, #ec4899, #be185d);
51
+ }
52
+
53
+ .nav-links {
54
+ display: flex;
55
+ align-items: center;
56
+ gap: 0.5rem;
57
+ }
58
+
59
+ .nav-link {
60
+ display: inline-flex;
61
+ align-items: center;
62
+ gap: 0.5rem;
63
+ padding: 0.625rem 1.25rem;
64
+ border-radius: 0.75rem;
65
+ text-decoration: none;
66
+ font-weight: 500;
67
+ color: #4b5563;
68
+ transition: all 0.3s ease;
69
+ }
70
+
71
+ .nav-link:hover {
72
+ color: #ec4899;
73
+ background: rgba(244, 114, 182, 0.06);
74
+ }
75
+
76
+ .nav-link.active {
77
+ color: #ec4899;
78
+ background: rgba(244, 114, 182, 0.1);
79
+ }
80
+
81
+ .actions {
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 0.75rem;
85
+ }
86
+
87
+ .search-box {
88
+ display: flex;
89
+ align-items: center;
90
+ gap: 0.5rem;
91
+ padding: 0.5rem 0.75rem;
92
+ border-radius: 0.75rem;
93
+ background: rgba(255, 255, 255, 0.95);
94
+ border: 1px solid rgba(244, 114, 182, 0.2);
95
+ transition: border 0.3s ease;
96
+ }
97
+
98
+ .search-box:focus-within {
99
+ border-color: rgba(236, 72, 153, 0.5);
100
+ box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
101
+ }
102
+
103
+ .search-input {
104
+ border: none;
105
+ background: transparent;
106
+ outline: none;
107
+ width: 10rem;
108
+ color: #4b5563;
109
+ font-weight: 500;
110
+ }
111
+
112
+ .search-input::placeholder {
113
+ color: #9ca3af;
114
+ }
115
+
116
+ .btn-gradient {
117
+ background: linear-gradient(to right, #ec4899, #db2777);
118
+ color: white;
119
+ font-weight: 600;
120
+ padding: 0.625rem 1.5rem;
121
+ border-radius: 0.75rem;
122
+ text-decoration: none;
123
+ transition: all 0.3s ease;
124
+ display: inline-flex;
125
+ align-items: center;
126
+ gap: 0.5rem;
127
+ box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
128
+ }
129
+
130
+ .btn-gradient:hover {
131
+ transform: translateY(-2px);
132
+ box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
133
+ }
134
+
135
+ .mobile-menu-btn {
136
+ display: none;
137
+ background: transparent;
138
+ border: 1px solid rgba(244, 114, 182, 0.2);
139
+ border-radius: 0.75rem;
140
+ padding: 0.5rem;
141
+ color: #4b5563;
142
+ cursor: pointer;
143
+ transition: all 0.3s ease;
144
+ }
145
+
146
+ .mobile-menu-btn:hover {
147
+ color: #ec4899;
148
+ }
149
+
150
+ @media (max-width: 1024px) {
151
+ .mobile-menu-btn {
152
+ display: block;
153
+ }
154
+
155
+ .nav-links {
156
+ display: none;
157
+ position: absolute;
158
+ top: 100%;
159
+ left: 0;
160
+ right: 0;
161
+ background: white;
162
+ border-top: 1px solid rgba(244, 114, 182, 0.1);
163
+ padding: 1rem;
164
+ flex-direction: column;
165
+ gap: 0.5rem;
166
+ }
167
+
168
+ .nav-links.show {
169
+ display: flex;
170
+ animation: slideDown 0.3s ease;
171
+ }
172
+
173
+ @keyframes slideDown {
174
+ from { opacity: 0; transform: translateY(-10px); }
175
+ to { opacity: 1; transform: translateY(0); }
176
+ }
177
+ }
178
+ </style>
179
+
180
+ <nav class="navbar-container">
181
+ <a href="index.html" class="logo">
182
+ <div class="logo-dot"></div>
183
+ <span class="logo-text">CodeBloom</span>
184
+ </a>
185
+
186
+ <div class="nav-links" id="navLinks">
187
+ <a href="index.html" class="nav-link active">
188
+ <i data-feather="home" class="w-4 h-4"></i>
189
+ Accueil
190
+ </a>
191
+ <a href="#features" class="nav-link">
192
+ <i data-feather="zap" class="w-4 h-4"></i>
193
+ Fonctionnalités
194
+ </a>
195
+ <a href="#projects" class="nav-link">
196
+ <i data-feather="layers" class="w-4 h-4"></i>
197
+ Projets
198
+ </a>
199
+ <a href="docs.html" class="nav-link">
200
+ <i data-feather="book" class="w-4 h-4"></i>
201
+ Documentation
202
+ </a>
203
+ </div>
204
+
205
+ <div class="actions">
206
+ <div class="search-box">
207
+ <i data-feather="search" class="w-4 h-4 text-rose-500"></i>
208
+ <input type="search" placeholder="Rechercher..." class="search-input" id="navSearch">
209
+ </div>
210
+
211
+ <a href="register.html" class="btn-gradient">
212
+ <i data-feather="user-plus" class="w-4 h-4"></i>
213
+ Commencer
214
+ </a>
215
+ </div>
216
+
217
+ <button class="mobile-menu-btn" id="mobileMenuBtn">
218
+ <i data-feather="menu" class="w-5 h-5"></i>
219
+ </button>
220
+ </nav>
221
+ `;
222
+
223
+ // Initialize interactive elements
224
+ this.initializeSearch();
225
+ this.initializeMobileMenu();
226
+ }
227
+
228
+ initializeSearch() {
229
+ const searchInput = this.shadowRoot.getElementById('navSearch');
230
+ searchInput.addEventListener('input', this.handleSearch);
231
+ }
232
+
233
+ handleSearch(e) {
234
+ console.log('Search query:', e.target.value);
235
+ // Implement search logic here
236
+ }
237
+
238
+ initializeMobileMenu() {
239
+ const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
240
+ const navLinks = this.shadowRoot.getElementById('navLinks');
241
+
242
+ mobileMenuBtn.addEventListener('click', () => {
243
+ navLinks.classList.toggle('show');
244
+
245
+ // Toggle icon
246
+ const icon = mobileMenuBtn.querySelector('i');
247
+ if (navLinks.classList.contains('show')) {
248
+ icon.setAttribute('data-feather', 'x');
249
+ feather.replace({ 'class': 'icon' });
250
+ } else {
251
+ icon.setAttribute('data-feather', 'menu');
252
+ feather.replace({ 'class': 'icon' });
253
+ }
254
+ });
255
+ }
256
+ }
257
+
258
+ customElements.define('bloom-navbar', BloomNavbar);
index.html CHANGED
@@ -1,19 +1,151 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeBloom Rose Petals</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="components/navbar.js"></script>
13
+ <script src="components/footer.js"></script>
14
+ </head>
15
+ <body class="bg-gray-50 font-sans text-gray-900">
16
+ <bloom-navbar></bloom-navbar>
17
+
18
+ <main class="min-h-screen pt-24">
19
+ <!-- Hero Section -->
20
+ <section class="container mx-auto px-4 md:px-8">
21
+ <div class="flex flex-col lg:flex-row items-center gap-12">
22
+ <div class="lg:w-1/2">
23
+ <h1 class="text-5xl md:text-6xl font-bold text-rose-600 leading-tight">
24
+ Transform Your Code with <span class="text-transparent bg-gradient-to-r from-rose-500 via-rose-600 to-pink-600 bg-clip-text">Rose Petals</span>
25
+ </h1>
26
+ <p class="text-gray-600 text-lg mt-6 mb-10">
27
+ A beautiful development environment where creativity blossoms. Experience the perfect blend of elegant design and powerful functionality for modern developers.
28
+ </p>
29
+ <div class="flex flex-wrap gap-4">
30
+ <a href="#projects" class="px-8 py-4 bg-gradient-to-r from-rose-500 to-rose-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
31
+ Explore Projects
32
+ </a>
33
+ <a href="#features" class="px-8 py-4 border-2 border-rose-400 text-rose-600 font-semibold rounded-xl hover:bg-rose-50 transition-colors duration-300">
34
+ Discover Features
35
+ </a>
36
+ </div>
37
+ </div>
38
+ <div class="lg:w-1/2 relative">
39
+ <img src="http://static.photos/technology/1200x630/42" alt="Modern development workspace"
40
+ class="rounded-3xl shadow-2xl border-8 border-white transform rotate-3 hover:rotate-0 transition-transform duration-500">
41
+ <div class="absolute -top-6 -right-6 bg-rose-100 border-4 border-white p-6 rounded-2xl shadow-xl">
42
+ <span class="text-rose-600 font-bold text-xl">✨ Live Preview</span>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </section>
47
+
48
+ <!-- Features Section -->
49
+ <section id="features" class="container mx-auto px-4 md:px-8 mt-32">
50
+ <div class="text-center mb-16">
51
+ <h2 class="text-4xl font-bold text-rose-700">Why Choose CodeBloom?</h2>
52
+ <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Designed with love and attention to detail, our platform makes coding a delightful experience</p>
53
+ </div>
54
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
55
+ <div class="bg-white rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-300">
56
+ <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-rose-100 to-rose-200 flex items-center justify-center mb-6">
57
+ <i data-feather="code" class="text-rose-600 w-8 h-8"></i>
58
+ </div>
59
+ <h3 class="text-2xl font-bold text-rose-700 mb-4">Intelligent Editor</h3>
60
+ <p class="text-gray-600">Smart autocomplete, syntax highlighting, and real-time error detection in a beautiful rose-themed interface.</p>
61
+ </div>
62
+ <div class="bg-white rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-300">
63
+ <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-rose-100 to-rose-200 flex items-center justify-center mb-6">
64
+ <i data-feather="layers" class="text-rose-600 w-8 h-8"></i>
65
+ </div>
66
+ <h3 class="text-2xl font-bold text-rose-700 mb-4">Project Management</h3>
67
+ <p class="text-gray-600">Organize your projects with intuitive boards and collaborative tools, all wrapped in soft rose aesthetics.</p>
68
+ </div>
69
+ <div class="bg-white rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-300">
70
+ <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-rose-100 to-rose-200 flex items-center justify-center mb-6">
71
+ <i data-feather="zap" class="text-rose-600 w-8 h-8"></i>
72
+ </div>
73
+ <h3 class="text-2xl font-bold text-rose-700 mb-4">Lightning Fast</h3>
74
+ <p class="text-gray-600">Built for speed with optimized performance and instant previews. Code, test, and deploy in milliseconds.</p>
75
+ </div>
76
+ </div>
77
+ </section>
78
+
79
+ <!-- Projects Section -->
80
+ <section id="projects" class="container mx-auto px-4 md:px-8 mt-32">
81
+ <div class="text-center mb-16">
82
+ <h2 class="text-4xl font-bold text-rose-700">Featured Projects</h2>
83
+ <p class="text-gray-600 mt-4">Discover amazing projects built with our platform</p>
84
+ </div>
85
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
86
+ <!-- Project Card 1 -->
87
+ <div class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-500">
88
+ <div class="flex items-center justify-between mb-6">
89
+ <span class="px-4 py-2 bg-rose-100 text-rose-700 font-semibold rounded-xl">Frontend</span>
90
+ <span class="text-gray-500">★ 152</span>
91
+ </div>
92
+ <h3 class="text-3xl font-bold text-rose-700 mb-4">Design System Component Library</h3>
93
+ <p class="text-gray-600 mb-6">A comprehensive library of reusable UI components built with our signature rose palette and modern interactions.</p>
94
+ <div class="flex items-center gap-4 mb-8">
95
+ <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">React</span>
96
+ <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">TypeScript</span>
97
+ <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">Tailwind</span>
98
+ </div>
99
+ <a href="project-1.html" class="inline-flex items-center gap-2 text-rose-600 font-semibold hover:text-rose-700 transition-colors duration-300">
100
+ View Project <i data-feather="arrow-right" class="w-4 h-4"></i>
101
+ </a>
102
+ </div>
103
+
104
+ <!-- Project Card 2 -->
105
+ <div class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-500">
106
+ <div class="flex items-center justify-between mb-6">
107
+ <span class="px-4 py-2 bg-rose-100 text-rose-700 font-semibold rounded-xl">Full Stack</span>
108
+ <span class="text-gray-500">★ 89</span>
109
+ </div>
110
+ <h3 class="text-3xl font-bold text-rose-700 mb-4">E-Commerce API & Dashboard</h3>
111
+ <p class="text-gray-600 mb-6">A complete solution with beautiful rose-themed admin panel, real-time analytics, and seamless payment integration.</p>
112
+ <div class="flex items-center gap-4 mb-8">
113
+ <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">Node.js</span>
114
+ <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">Vue</span>
115
+ <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">MongoDB</span>
116
+ </div>
117
+ <a href="project-2.html" class="inline-flex items-center gap-2 text-rose-600 font-semibold hover:text-rose-700 transition-colors duration-300">
118
+ View Project <i data-feather="arrow-right" class="w-4 h-4"></i>
119
+ </a>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- CTA Section -->
125
+ <section class="container mx-auto px-4 md:px-8 mt-32">
126
+ <div class="bg-gradient-to-r from-rose-500 to-pink-500 rounded-3xl p-12 lg:p-16 text-center text-white shadow-xl">
127
+ <h2 class="text-4xl md:text-5xl font-bold leading-tight">Ready to Bloom with Code?</h2>
128
+ <p class="text-rose-100 text-xl mt-6 mb-10 max-w-2xl mx-auto">Join thousands of developers who have transformed their workflow with our beautiful rose-themed platform.</p>
129
+ <a href="register.html" class="inline-flex items-center gap-3 px-10 py-5 bg-white text-rose-600 font-bold rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300">
130
+ Start Coding for Free <i data-feather="sparkles" class="w-5 h-5"></i>
131
+ </a>
132
+ </div>
133
+ </section>
134
+ </main>
135
+
136
+ <bloom-footer></bloom-footer>
137
+
138
+ <script src="script.js"></script>
139
+ <script>
140
+ feather.replace();
141
+ // Initialize tooltips
142
+ document.querySelectorAll('[data-feather]').forEach(el => {
143
+ if (!el.getAttribute('title')) {
144
+ const title = el.getAttribute('aria-label') || 'Button';
145
+ el.setAttribute('title', title);
146
+ }
147
+ });
148
+ </script>
149
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
150
+ </body>
151
+ </html>
script.js ADDED
@@ -0,0 +1,163 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main JavaScript for CodeBloom Rose Petals
2
+
3
+ document.addEventListener('DOMContentLoaded', function() {
4
+ // Initialize feather icons
5
+ if (typeof feather !== 'undefined') {
6
+ feather.replace();
7
+ }
8
+
9
+ // Smooth scroll for anchor links
10
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
11
+ anchor.addEventListener('click', function (e) {
12
+ e.preventDefault();
13
+ const targetId = this.getAttribute('href');
14
+ if (targetId === '#') return;
15
+
16
+ const targetElement = document.querySelector(targetId);
17
+ if (targetElement) {
18
+ window.scrollTo({
19
+ top: targetElement.offsetTop - 80,
20
+ behavior: 'smooth'
21
+ });
22
+ }
23
+ });
24
+ });
25
+
26
+ // Project card interactions
27
+ const projectCards = document.querySelectorAll('.project-card');
28
+ projectCards.forEach(card => {
29
+ card.addEventListener('mouseenter', () => {
30
+ card.classList.add('hover-card');
31
+ });
32
+
33
+ card.addEventListener('mouseleave', () => {
34
+ card.classList.remove('hover-card');
35
+ });
36
+ });
37
+
38
+ // Search functionality (would connect to API)
39
+ const searchInput = document.querySelector('#navSearch');
40
+ if (searchInput) {
41
+ searchInput.addEventListener('input', debounce(function() {
42
+ const query = this.value.trim();
43
+ if (query.length > 2) {
44
+ performSearch(query);
45
+ }
46
+ }, 300));
47
+ }
48
+
49
+ // Theme toggle (light/dark - placeholder for future implementation)
50
+ const themeToggle = document.querySelector('#themeToggle');
51
+ if (themeToggle) {
52
+ themeToggle.addEventListener('click', function() {
53
+ document.documentElement.classList.toggle('dark');
54
+ // Save preference to localStorage
55
+ const isDark = document.documentElement.classList.contains('dark');
56
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
57
+
58
+ // Show notification
59
+ showNotification('Theme switched to ' + (isDark ? 'dark' : 'light') + ' mode');
60
+ });
61
+ }
62
+
63
+ // Initialize dark mode from localStorage
64
+ const savedTheme = localStorage.getItem('theme');
65
+ if (savedTheme === 'dark') {
66
+ document.documentElement.classList.add('dark');
67
+ }
68
+ });
69
+
70
+ // Utility function for debouncing
71
+ function debounce(func, wait) {
72
+ let timeout;
73
+ return function executedFunction(...args) {
74
+ const later = () => {
75
+ clearTimeout(timeout);
76
+ func.apply(this, args);
77
+ };
78
+ clearTimeout(timeout);
79
+ timeout = setTimeout(later, wait);
80
+ };
81
+ }
82
+
83
+ // Search function (placeholder - would connect to your backend/API)
84
+ async function performSearch(query) {
85
+ console.log('Searching for:', query);
86
+ // Here you would typically fetch from an API
87
+ // Example:
88
+ // const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
89
+ // const results = await response.json();
90
+ // displayResults(results);
91
+ }
92
+
93
+ // Notification system
94
+ function showNotification(message, type = 'info') {
95
+ // Create notification element
96
+ const notification = document.createElement('div');
97
+ notification.className = `fixed top-24 right-6 px-6 py-3 rounded-xl shadow-xl z-50 transform translate-x-full transition-transform duration-300 ${type === 'info' ? 'bg-rose-600' : 'bg-red-600'} text-white`;
98
+ notification.textContent = message;
99
+
100
+ // Append to body
101
+ document.body.appendChild(notification);
102
+
103
+ // Animate in
104
+ setTimeout(() => {
105
+ notification.style.transform = 'translateX(0)';
106
+ }, 10);
107
+
108
+ // Remove after 3 seconds
109
+ setTimeout(() => {
110
+ notification.style.transform = 'translateX(100%)';
111
+ setTimeout(() => {
112
+ document.body.removeChild(notification);
113
+ }, 300);
114
+ }, 3000);
115
+ }
116
+
117
+ // API integration for project data
118
+ async function fetchProjects() {
119
+ try {
120
+ // Example using public API - would replace with your actual API
121
+ const response = await fetch('https://api.github.com/search/repositories?q=topic:frontend&sort=stars&order=desc&per_page=6');
122
+ const data = await response.json();
123
+ return data.items || [];
124
+ } catch (error) {
125
+ console.error('Error fetching projects:', error);
126
+ return [];
127
+ }
128
+ }
129
+
130
+ // Form submission handler
131
+ document.addEventListener('submit', function(e) {
132
+ if (e.target.matches('form')) {
133
+ e.preventDefault();
134
+ const formData = new FormData(e.target);
135
+ const data = Object.fromEntries(formData);
136
+
137
+ // Show loading state
138
+ const submitBtn = e.target.querySelector('button[type="submit"]');
139
+ const originalText = submitBtn.textContent;
140
+ submitBtn.textContent = 'Processing...';
141
+ submitBtn.disabled = true;
142
+
143
+ // Simulate API call
144
+ setTimeout(() => {
145
+ // Reset button
146
+ submitBtn.textContent = originalText;
147
+ submitBtn.disabled = false;
148
+
149
+ // Show success notification
150
+ showNotification('Action completed successfully!', 'info');
151
+ }, 1000);
152
+ }
153
+ });
154
+
155
+ // Window resize handling for responsive adjustments
156
+ let resizeTimer;
157
+ window.addEventListener('resize', function() {
158
+ clearTimeout(resizeTimer);
159
+ resizeTimer = setTimeout(function() {
160
+ // Handle responsive adjustments here
161
+ console.log('Window resized - handling responsive adjustments');
162
+ }, 250);
163
+ });
style.css CHANGED
@@ -1,28 +1,121 @@
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
+ /* Custom styles for CodeBloom Rose Petals */
2
+
3
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
4
+
5
+ /* Smooth scrolling */
6
+ html {
7
+ scroll-behavior: smooth;
8
  }
9
 
10
+ /* Custom scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 10px;
13
  }
14
 
15
+ ::-webkit-scrollbar-track {
16
+ background: #f9fafb;
 
 
 
17
  }
18
 
19
+ ::-webkit-scrollbar-thumb {
20
+ background: linear-gradient(to bottom, #f472b6, #fb7185);
21
+ border-radius: 5px;
 
 
 
22
  }
23
 
24
+ ::-webkit-scrollbar-thumb:hover {
25
+ background: linear-gradient(to bottom, #ec4899, #e11d48);
26
  }
27
+
28
+ /* Gradient text utilities */
29
+ .gradient-text-rose {
30
+ background: linear-gradient(135deg, #ec4899 0%, #db2777 25%, #be185d 50%, #9d174d 75%);
31
+ -webkit-background-clip: text;
32
+ background-clip: text;
33
+ color: transparent;
34
+ }
35
+
36
+ /* Custom animations */
37
+ @keyframes float {
38
+ 0%, 100% { transform: translateY(0px); }
39
+ 50% { transform: translateY(-10px); }
40
+ }
41
+
42
+ @keyframes shimmer {
43
+ 0% { background-position: -1000px 0; }
44
+ 100% { background-position: 1000px 0; }
45
+ }
46
+
47
+ .float-animation {
48
+ animation: float 3s ease-in-out infinite;
49
+ }
50
+
51
+ .shimmer-effect {
52
+ background: linear-gradient(90deg,
53
+ rgba(255,255,255,0) 0%,
54
+ rgba(255,255,255,0.6) 50%,
55
+ rgba(255,255,255,0) 100%);
56
+ background-size: 1000px 100%;
57
+ animation: shimmer 2s infinite;
58
+ }
59
+
60
+ /* Custom shadows */
61
+ .rose-shadow-lg {
62
+ box-shadow: 0 10px 25px -5px rgba(244, 114, 182, 0.2),
63
+ 0 10px 10px -5px rgba(244, 114, 182, 0.1);
64
+ }
65
+
66
+ .rose-shadow-xl {
67
+ box-shadow: 0 20px 50px -12px rgba(244, 114, 182, 0.25);
68
+ }
69
+
70
+ /* Card hover effects */
71
+ .hover-card {
72
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
73
+ }
74
+
75
+ .hover-card:hover {
76
+ transform: translateY(-4px);
77
+ }
78
+
79
+ /* Button customizations */
80
+ .btn-gradient-rose {
81
+ background: linear-gradient(to right, #ec4899, #db2777);
82
+ color: white;
83
+ transition: all 0.3s ease;
84
+ }
85
+
86
+ .btn-gradient-rose:hover {
87
+ background: linear-gradient(to right, #db2777, #be185d);
88
+ transform: translateY(-2px);
89
+ }
90
+
91
+ /* Glass morphism effect */
92
+ .glass-card {
93
+ background: rgba(255, 255, 255, 0.85);
94
+ backdrop-filter: blur(8px);
95
+ border: 1px solid rgba(255, 255, 255, 0.3);
96
+ }
97
+
98
+ /* Focus states for accessibility */
99
+ .focus-rose:focus {
100
+ ring: 2px;
101
+ ring-color: rgba(236, 72, 153, 0.5);
102
+ border-color: #ec4899;
103
+ }
104
+
105
+ /* Project badge animations */
106
+ .badge-pulse {
107
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
108
+ }
109
+
110
+ @keyframes pulse {
111
+ 0%, 100% { opacity: 1; }
112
+ 50% { opacity: 0.5; }
113
+ }
114
+
115
+ /* Responsive adjustments */
116
+ @media (max-width: 768px) {
117
+ .container {
118
+ padding-left: 1rem;
119
+ padding-right: 1rem;
120
+ }
121
+ }