Hugging Face's logo

Spaces:
Garly
/
mystical-palette-explorer
Running

App Files Community
Garly commited on
Commit
93e20da
·
verified ·
1 Parent(s): 893cc55

Je veux voir le site web

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +274 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Mystical Palette Explorer
3
- emoji: 🏢
4
- colorFrom: indigo
5
- colorTo: gray
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: Mystical Palette Explorer 🎨
3
+ colorFrom: yellow
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,275 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="h-full">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mystical Palette Explorer</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
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ 50: '#f0f9ff',
17
+ 100: '#e0f2fe',
18
+ 200: '#bae6fd',
19
+ 300: '#7dd3fc',
20
+ 400: '#38bdf8',
21
+ 500: '#0ea5e9',
22
+ 600: '#0284c7',
23
+ 700: '#0369a1',
24
+ 800: '#075985',
25
+ 900: '#0c4a6e',
26
+ },
27
+ secondary: {
28
+ 50: '#f5f3ff',
29
+ 100: '#ede9fe',
30
+ 200: '#ddd6fe',
31
+ 300: '#c4b5fd',
32
+ 400: '#a78bfa',
33
+ 500: '#8b5cf6',
34
+ 600: '#7c3aed',
35
+ 700: '#6d28d9',
36
+ 800: '#5b21b6',
37
+ 900: '#4c1d95',
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+ </script>
44
+ <style>
45
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
46
+ body {
47
+ font-family: 'Inter', sans-serif;
48
+ background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);
49
+ }
50
+ .gradient-text {
51
+ background-clip: text;
52
+ -webkit-background-clip: text;
53
+ color: transparent;
54
+ background-image: linear-gradient(to right, #0ea5e9, #8b5cf6);
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="min-h-full flex flex-col">
59
+ <header class="bg-white shadow-sm">
60
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
61
+ <div class="flex justify-between items-center">
62
+ <h1 class="text-3xl font-bold gradient-text">Mystical Palette Explorer</h1>
63
+ <nav class="hidden md:flex space-x-8">
64
+ <a href="#" class="text-primary-600 font-medium hover:text-primary-800 transition">Colors</a>
65
+ <a href="#" class="text-gray-600 hover:text-gray-900 transition">Gradients</a>
66
+ <a href="#" class="text-gray-600 hover:text-gray-900 transition">Palettes</a>
67
+ <a href="#" class="text-gray-600 hover:text-gray-900 transition">About</a>
68
+ </nav>
69
+ <button class="md:hidden text-gray-600">
70
+ <i data-feather="menu"></i>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </header>
75
+
76
+ <main class="flex-grow">
77
+ <section class="py-20 px-4 sm:px-6 lg:px-8">
78
+ <div class="max-w-7xl mx-auto text-center">
79
+ <h2 class="text-4xl md:text-6xl font-bold mb-6 text-gray-900">Discover the Magic of <span class="gradient-text">Colors</span></h2>
80
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-12">
81
+ Explore beautiful color combinations, gradients and palettes that will inspire your next creative project.
82
+ </p>
83
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
84
+ <button class="px-8 py-3 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition shadow-md hover:shadow-lg">
85
+ Explore Colors
86
+ </button>
87
+ <button class="px-8 py-3 bg-white text-primary-600 font-medium rounded-lg hover:bg-gray-50 transition border border-primary-600 shadow-md hover:shadow-lg">
88
+ Generate Palette
89
+ </button>
90
+ </div>
91
+ </div>
92
+ </section>
93
+
94
+ <section class="py-16 bg-gray-50">
95
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
96
+ <div class="text-center mb-16">
97
+ <h3 class="text-3xl font-bold text-gray-900 mb-4">Featured Color Combinations</h3>
98
+ <p class="text-gray-600 max-w-2xl mx-auto">
99
+ Handpicked color palettes that work perfectly together
100
+ </p>
101
+ </div>
102
+
103
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
104
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition transform hover:-translate-y-1 hover:shadow-xl">
105
+ <div class="h-48 flex">
106
+ <div class="flex-1 bg-primary-500"></div>
107
+ <div class="flex-1 bg-secondary-500"></div>
108
+ <div class="flex-1 bg-primary-300"></div>
109
+ <div class="flex-1 bg-secondary-300"></div>
110
+ </div>
111
+ <div class="p-6">
112
+ <h4 class="text-xl font-semibold text-gray-900 mb-2">Ocean Breeze</h4>
113
+ <p class="text-gray-600">Cool tones inspired by tropical waters</p>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition transform hover:-translate-y-1 hover:shadow-xl">
118
+ <div class="h-48 flex">
119
+ <div class="flex-1 bg-yellow-400"></div>
120
+ <div class="flex-1 bg-red-500"></div>
121
+ <div class="flex-1 bg-pink-400"></div>
122
+ <div class="flex-1 bg-purple-500"></div>
123
+ </div>
124
+ <div class="p-6">
125
+ <h4 class="text-xl font-semibold text-gray-900 mb-2">Sunset Glow</h4>
126
+ <p class="text-gray-600">Warm colors of a beautiful sunset</p>
127
+ </div>
128
+ </div>
129
+
130
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition transform hover:-translate-y-1 hover:shadow-xl">
131
+ <div class="h-48 flex">
132
+ <div class="flex-1 bg-green-500"></div>
133
+ <div class="flex-1 bg-teal-400"></div>
134
+ <div class="flex-1 bg-emerald-500"></div>
135
+ <div class="flex-1 bg-lime-400"></div>
136
+ </div>
137
+ <div class="p-6">
138
+ <h4 class="text-xl font-semibold text-gray-900 mb-2">Forest Canopy</h4>
139
+ <p class="text-gray-600">Natural greens from the wilderness</p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <section class="py-20">
147
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
148
+ <div class="text-center mb-16">
149
+ <h3 class="text-3xl font-bold text-gray-900 mb-4">Color Psychology</h3>
150
+ <p class="text-gray-600 max-w-2xl mx-auto">
151
+ Understand what different colors represent and how they affect emotions
152
+ </p>
153
+ </div>
154
+
155
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
156
+ <div class="bg-primary-100 rounded-lg p-6">
157
+ <div class="w-16 h-16 rounded-full bg-primary-500 flex items-center justify-center mb-4 mx-auto">
158
+ <i data-feather="droplet" class="text-white w-8 h-8"></i>
159
+ </div>
160
+ <h4 class="text-xl font-semibold text-center mb-2 text-gray-900">Primary Blue</h4>
161
+ <p class="text-gray-700 text-center">
162
+ Represents trust, calmness, and reliability. Often used in corporate designs.
163
+ </p>
164
+ </div>
165
+
166
+ <div class="bg-secondary-100 rounded-lg p-6">
167
+ <div class="w-16 h-16 rounded-full bg-secondary-500 flex items-center justify-center mb-4 mx-auto">
168
+ <i data-feather="moon" class="text-white w-8 h-8"></i>
169
+ </div>
170
+ <h4 class="text-xl font-semibold text-center mb-2 text-gray-900">Secondary Purple</h4>
171
+ <p class="text-gray-700 text-center">
172
+ Symbolizes creativity, mystery, and luxury. Great for artistic brands.
173
+ </p>
174
+ </div>
175
+
176
+ <div class="bg-red-100 rounded-lg p-6">
177
+ <div class="w-16 h-16 rounded-full bg-red-500 flex items-center justify-center mb-4 mx-auto">
178
+ <i data-feather="heart" class="text-white w-8 h-8"></i>
179
+ </div>
180
+ <h4 class="text-xl font-semibold text-center mb-2 text-gray-900">Passionate Red</h4>
181
+ <p class="text-gray-700 text-center">
182
+ Evokes energy, excitement, and urgency. Used for calls to action.
183
+ </p>
184
+ </div>
185
+
186
+ <div class="bg-green-100 rounded-lg p-6">
187
+ <div class="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center mb-4 mx-auto">
188
+ <i data-feather="leaf" class="text-white w-8 h-8"></i>
189
+ </div>
190
+ <h4 class="text-xl font-semibold text-center mb-2 text-gray-900">Natural Green</h4>
191
+ <p class="text-gray-700 text-center">
192
+ Represents growth, health, and environmental awareness.
193
+ </p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <section class="py-20 bg-gradient-to-r from-primary-500 to-secondary-500 text-white">
200
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
201
+ <h3 class="text-3xl font-bold mb-6">Ready to explore more colors?</h3>
202
+ <p class="text-xl mb-8 max-w-3xl mx-auto opacity-90">
203
+ Join our community of designers and developers creating beautiful color schemes.
204
+ </p>
205
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
206
+ <button class="px-8 py-3 bg-white text-primary-600 font-medium rounded-lg hover:bg-gray-100 transition shadow-md hover:shadow-lg">
207
+ Sign Up Free
208
+ </button>
209
+ <button class="px-8 py-3 bg-transparent border-2 border-white text-white font-medium rounded-lg hover:bg-white hover:bg-opacity-10 transition">
210
+ Learn More
211
+ </button>
212
+ </div>
213
+ </div>
214
+ </section>
215
+ </main>
216
+
217
+ <footer class="bg-gray-900 text-white py-12">
218
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
219
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
220
+ <div>
221
+ <h4 class="text-lg font-semibold mb-4">Mystical Palette</h4>
222
+ <p class="text-gray-400">
223
+ Exploring the magic of colors since 2023. Helping designers create beautiful interfaces.
224
+ </p>
225
+ </div>
226
+ <div>
227
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
228
+ <ul class="space-y-2">
229
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Color Tools</a></li>
230
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
231
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
232
+ </ul>
233
+ </div>
234
+ <div>
235
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
236
+ <ul class="space-y-2">
237
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
238
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
239
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
240
+ </ul>
241
+ </div>
242
+ <div>
243
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
244
+ <div class="flex space-x-4">
245
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
246
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
247
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
248
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="dribbble"></i></a>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
253
+ <p>&copy; 2023 Mystical Palette Explorer. All rights reserved.</p>
254
+ </div>
255
+ </div>
256
+ </footer>
257
+
258
+ <script>
259
+ feather.replace();
260
+
261
+ // Simple animation for the hero section
262
+ document.addEventListener('DOMContentLoaded', function() {
263
+ const heading = document.querySelector('h2');
264
+ heading.style.opacity = '0';
265
+ heading.style.transform = 'translateY(20px)';
266
+
267
+ setTimeout(() => {
268
+ heading.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
269
+ heading.style.opacity = '1';
270
+ heading.style.transform = 'translateY(0)';
271
+ }, 300);
272
+ });
273
+ </script>
274
+ </body>
275
  </html>