Hugging Face's logo

Spaces:
zipin
/
chromatic-canvas
Running

App Files Community
zipin commited on
Commit
c541b29
·
verified ·
1 Parent(s): eb80143

你好

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +266 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Chromatic Canvas
3
- emoji: 📊
4
- colorFrom: blue
5
- colorTo: green
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: Chromatic Canvas 🎨
3
+ colorFrom: purple
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,267 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chromatic Canvas - Where Colors Come Alive</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+
16
+ :root {
17
+ --primary-undefined: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ --secondary-undefined: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
19
+ --accent-undefined: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
20
+ }
21
+
22
+ body {
23
+ font-family: 'Inter', sans-serif;
24
+ }
25
+
26
+ .undefined-gradient {
27
+ background: var(--primary-undefined);
28
+ }
29
+
30
+ .undefined-gradient-secondary {
31
+ background: var(--secondary-undefined);
32
+ }
33
+
34
+ .undefined-gradient-accent {
35
+ background: var(--accent-undefined);
36
+ }
37
+
38
+ .floating-animation {
39
+ animation: float 6s ease-in-out infinite;
40
+ }
41
+
42
+ @keyframes float {
43
+ 0%, 100% { transform: translateY(0px); }
44
+ 50% { transform: translateY(-20px); }
45
+ }
46
+
47
+ .color-transition {
48
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
49
+ }
50
+
51
+ .glass-effect {
52
+ background: rgba(255, 255, 255, 0.1);
53
+ backdrop-filter: blur(10px);
54
+ border: 1px solid rgba(255, 255, 255, 0.2);
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-indigo-900 text-white">
59
+ <div id="vanta-background" class="fixed inset-0 z-0"></div>
60
+
61
+ <!-- Navigation -->
62
+ <nav class="relative z-10 glass-effect rounded-full mx-4 mt-4 max-w-6xl mx-auto">
63
+ <div class="px-6 py-4 flex justify-between items-center">
64
+ <div class="flex items-center space-x-2">
65
+ <div class="w-8 h-8 undefined-gradient rounded-full"></div>
66
+ <span class="text-xl font-bold">ChromaticCanvas</span>
67
+ </div>
68
+
69
+ <div class="hidden md:flex space-x-8">
70
+ <a href="#" class="color-transition hover:undefined-gradient hover:bg-clip-text hover:text-transparent font-medium">Home</a>
71
+ <a href="#" class="color-transition hover:undefined-gradient-secondary hover:bg-clip-text hover:text-transparent font-medium">Gallery</a>
72
+ <a href="#" class="color-transition hover:undefined-gradient-accent hover:bg-clip-text hover:text-transparent font-medium">Create</a>
73
+ <a href="#" class="color-transition hover:text-gray-300 font-medium">About</a>
74
+ </div>
75
+
76
+ <button class="undefined-gradient px-6 py-2 rounded-full font-semibold color-transition hover:scale-105">
77
+ Get Started
78
+ </button>
79
+ </div>
80
+ </nav>
81
+
82
+ <!-- Hero Section -->
83
+ <section class="relative z-10 min-h-screen flex items-center justify-center px-4">
84
+ <div class="text-center max-w-4xl">
85
+ <div class="floating-animation mb-8">
86
+ <div class="w-24 h-24 undefined-gradient rounded-full mx-auto flex items-center justify-center">
87
+ <i data-feather="palette" class="w-12 h-12"></i>
88
+ </div>
89
+ </div>
90
+
91
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">
92
+ Where <span class="undefined-gradient bg-clip-text text-transparent">Colors</span>
93
+ <span class="undefined-gradient-secondary bg-clip-text text-transparent">Come</span>
94
+ <span class="undefined-gradient-accent bg-clip-text text-transparent">Alive</span>
95
+ </h1>
96
+
97
+ <p class="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed">
98
+ Experience the undefined beauty of color gradients in a symphony of visual harmony.
99
+ Our platform transforms undefined color combinations into breathtaking digital art.
100
+ </p>
101
+
102
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
103
+ <button class="undefined-gradient px-8 py-4 rounded-full font-semibold text-lg color-transition hover:scale-105 flex items-center justify-center gap-2">
104
+ <i data-feather="play"></i>
105
+ Start Creating
106
+ </button>
107
+ <button class="glass-effect px-8 py-4 rounded-full font-semibold text-lg color-transition hover:bg-white hover:bg-opacity-20 flex items-center justify-center gap-2">
108
+ <i data-feather="eye"></i>
109
+ View Gallery
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Features Section -->
116
+ <section class="relative z-10 py-20 px-4">
117
+ <div class="max-w-6xl mx-auto">
118
+ <h2 class="text-4xl font-bold text-center mb-16">
119
+ <span class="undefined-gradient bg-clip-text text-transparent">Undefined</span> Features
120
+ </h2>
121
+
122
+ <div class="grid md:grid-cols-3 gap-8">
123
+ <!-- Feature 1 -->
124
+ <div class="glass-effect p-8 rounded-2xl color-transition hover:scale-105">
125
+ <div class="w-16 h-16 undefined-gradient rounded-xl flex items-center justify-center mb-6">
126
+ <i data-feather="zap" class="w-8 h-8"></i>
127
+ </div>
128
+ <h3 class="text-2xl font-bold mb-4">Dynamic Gradients</h3>
129
+ <p class="text-gray-300">Experience fluid color transitions that adapt to your creative vision in real-time.</p>
130
+ </div>
131
+
132
+ <!-- Feature 2 -->
133
+ <div class="glass-effect p-8 rounded-2xl color-transition hover:scale-105">
134
+ <div class="w-16 h-16 undefined-gradient-secondary rounded-xl flex items-center justify-center mb-6">
135
+ <i data-feather="sliders" class="w-8 h-8"></i>
136
+ </div>
137
+ <h3 class="text-2xl font-bold mb-4">Infinite Combinations</h3>
138
+ <p class="text-gray-300">Explore endless undefined color palettes that break traditional design boundaries.</p>
139
+ </div>
140
+
141
+ <!-- Feature 3 -->
142
+ <div class="glass-effect p-8 rounded-2xl color-transition hover:scale-105">
143
+ <div class="w-16 h-16 undefined-gradient-accent rounded-xl flex items-center justify-center mb-6">
144
+ <i data-feather="cloud" class="w-8 h-8"></i>
145
+ </div>
146
+ <h3 class="text-2xl font-bold mb-4">Cloud Sync</h3>
147
+ <p class="text-gray-300">Your undefined creations are automatically saved and synchronized across all devices.</p>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- Color Showcase -->
154
+ <section class="relative z-10 py-20 px-4">
155
+ <div class="max-w-6xl mx-auto">
156
+ <h2 class="text-4xl font-bold text-center mb-16">
157
+ The <span class="undefined-gradient-secondary bg-clip-text text-transparent">Undefined</span> Spectrum
158
+ </h2>
159
+
160
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
161
+ <div class="aspect-square undefined-gradient rounded-2xl color-transition hover:scale-110"></div>
162
+ <div class="aspect-square undefined-gradient-secondary rounded-2xl color-transition hover:scale-110"></div>
163
+ <div class="aspect-square undefined-gradient-accent rounded-2xl color-transition hover:scale-110"></div>
164
+ <div class="aspect-square bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500 rounded-2xl color-transition hover:scale-110"></div>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- Footer -->
170
+ <footer class="relative z-10 glass-effect mt-20 rounded-t-3xl">
171
+ <div class="max-w-6xl mx-auto px-4 py-12">
172
+ <div class="grid md:grid-cols-4 gap-8">
173
+ <div>
174
+ <div class="flex items-center space-x-2 mb-4">
175
+ <div class="w-8 h-8 undefined-gradient rounded-full"></div>
176
+ <span class="text-xl font-bold">ChromaticCanvas</span>
177
+ </div>
178
+ <p class="text-gray-300">Where undefined colors create defined beauty.</p>
179
+ </div>
180
+
181
+ <div>
182
+ <h4 class="font-semibold mb-4">Explore</h4>
183
+ <ul class="space-y-2 text-gray-300">
184
+ <li><a href="#" class="color-transition hover:text-white">Gallery</a></li>
185
+ <li><a href="#" class="color-transition hover:text-white">Templates</a></li>
186
+ <li><a href="#" class="color-transition hover:text-white">Community</a></li>
187
+ </ul>
188
+ </div>
189
+
190
+ <div>
191
+ <h4 class="font-semibold mb-4">Resources</h4>
192
+ <ul class="space-y-2 text-gray-300">
193
+ <li><a href="#" class="color-transition hover:text-white">Documentation</a></li>
194
+ <li><a href="#" class="color-transition hover:text-white">Tutorials</a></li>
195
+ <li><a href="#" class="color-transition hover:text-white">API</a></li>
196
+ </ul>
197
+ </div>
198
+
199
+ <div>
200
+ <h4 class="font-semibold mb-4">Connect</h4>
201
+ <div class="flex space-x-4">
202
+ <a href="#" class="w-10 h-10 glass-effect rounded-full flex items-center justify-center color-transition hover:undefined-gradient">
203
+ <i data-feather="twitter"></i>
204
+ </a>
205
+ <a href="#" class="w-10 h-10 glass-effect rounded-full flex items-center justify-center color-transition hover:undefined-gradient-secondary">
206
+ <i data-feather="instagram"></i>
207
+ </a>
208
+ <a href="#" class="w-10 h-10 glass-effect rounded-full flex items-center justify-center color-transition hover:undefined-gradient-accent">
209
+ <i data-feather="github"></i>
210
+ </a>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
216
+ <p>&copy; 2024 Chromatic Canvas. All rights reserved. Embrace the undefined.</p>
217
+ </div>
218
+ </div>
219
+ </footer>
220
+
221
+ <script>
222
+ // Initialize Vanta.js background
223
+ VANTA.GLOBE({
224
+ el: "#vanta-background",
225
+ mouseControls: true,
226
+ touchControls: true,
227
+ gyroControls: false,
228
+ minHeight: 200.00,
229
+ minWidth: 200.00,
230
+ scale: 1.00,
231
+ scaleMobile: 1.00,
232
+ color: 0x667eea,
233
+ backgroundColor: 0x0,
234
+ size: 0.8
235
+ });
236
+
237
+ // Initialize Feather Icons
238
+ feather.replace();
239
+
240
+ // Add scroll animations
241
+ document.addEventListener('DOMContentLoaded', function() {
242
+ const observerOptions = {
243
+ threshold: 0.1,
244
+ rootMargin: '0px 0px -50px 0px'
245
+ };
246
+
247
+ const observer = new IntersectionObserver((entries) => {
248
+ entries.forEach(entry => {
249
+ if (entry.isIntersecting) {
250
+ entry.target.style.opacity = '1';
251
+ entry.target.style.transform = 'translateY(0)';
252
+ }
253
+ });
254
+ }, observerOptions);
255
+
256
+ // Animate elements on scroll
257
+ const animatedElements = document.querySelectorAll('.glass-effect, .undefined-gradient, .undefined-gradient-secondary, .undefined-gradient-accent');
258
+ animatedElements.forEach(el => {
259
+ el.style.opacity = '0';
260
+ el.style.transform = 'translateY(30px)';
261
+ el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
262
+ observer.observe(el);
263
+ });
264
+ });
265
+ </script>
266
+ </body>
267
  </html>