Hugging Face's logo

Spaces:
Daniil-plotnikov
/
momentize
Running

App Files Community
Daniil-plotnikov commited on
Commit
da7d2e3
·
verified ·
1 Parent(s): e1622f0

Only masonry grid. Call it Momentize

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +291 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Momentize
3
- emoji: 👀
4
- colorFrom: pink
5
- colorTo: purple
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: Momentize ✨
3
+ colorFrom: blue
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).
14
+
index.html CHANGED
@@ -1,19 +1,292 @@
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>Momentize ✨ - Capture Your Inspiration</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ 'pinterest-red': '#E60023',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ .masonry-grid {
24
+ column-count: 7;
25
+ column-gap: 1rem;
26
+ }
27
+
28
+ .masonry-item {
29
+ break-inside: avoid;
30
+ margin-bottom: 1rem;
31
+ }
32
+
33
+ @media (max-width: 1536px) {
34
+ .masonry-grid { column-count: 6; }
35
+ }
36
+
37
+ @media (max-width: 1280px) {
38
+ .masonry-grid { column-count: 5; }
39
+ }
40
+
41
+ @media (max-width: 1024px) {
42
+ .masonry-grid { column-count: 4; }
43
+ }
44
+
45
+ @media (max-width: 768px) {
46
+ .masonry-grid { column-count: 3; }
47
+ }
48
+
49
+ @media (max-width: 640px) {
50
+ .masonry-grid { column-count: 2; }
51
+ }
52
+
53
+ .pin-hover {
54
+ transition: transform 0.2s ease;
55
+ }
56
+
57
+ .pin-hover:hover {
58
+ transform: scale(1.02);
59
+ }
60
+
61
+ .search-input:focus {
62
+ outline: none;
63
+ box-shadow: 0 0 0 3px rgba(230, 0, 35, 0.1);
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-white text-black font-sans">
68
+ <!-- Navigation -->
69
+ <nav class="fixed top-0 w-full bg-white z-50 shadow-sm">
70
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
71
+ <div class="flex justify-between items-center h-16">
72
+ <div class="flex items-center">
73
+ <a href="#" class="flex-shrink-0">
74
+ <span class="text-pinterest-red font-bold text-2xl">P</span>
75
+ </a>
76
+ </div>
77
+
78
+ <div class="hidden md:block flex-1 mx-8">
79
+ <div class="relative">
80
+ <input type="text" placeholder="Search" class="w-full bg-gray-100 rounded-full py-2 px-4 pl-10 search-input">
81
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500 w-5 h-5"></i>
82
+ </div>
83
+ </div>
84
+
85
+ <div class="flex items-center space-x-4">
86
+ <a href="#" class="text-black hover:text-pinterest-red font-medium">Explore</a>
87
+ <a href="#" class="text-black hover:text-pinterest-red font-medium">Shop</a>
88
+ <a href="#" class="text-black hover:text-pinterest-red font-medium">About</a>
89
+ <a href="#" class="text-black hover:text-pinterest-red font-medium">Business</a>
90
+ <a href="#" class="bg-pinterest-red text-white px-4 py-2 rounded-full font-medium hover:bg-red-700">Create</a>
91
+ <a href="#" class="text-black hover:text-pinterest-red font-medium">Log in</a>
92
+ <a href="#" class="bg-gray-200 text-black px-4 py-2 rounded-full font-medium hover:bg-gray-300">Sign up</a>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </nav>
97
+
98
+ <!-- Hero Section -->
99
+ <section class="pt-20 pb-16 bg-gradient-to-b from-white to-gray-50">
100
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
101
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">Pinspiration Paradise</h1>
102
+ <p class="text-2xl md:text-3xl text-gray-700 mb-8">Get your next</p>
103
+ <div class="flex flex-wrap justify-center gap-4 mb-12">
104
+ <span class="bg-gray-100 rounded-full px-6 py-3 text-lg font-medium">weeknight dinner idea</span>
105
+ <span class="bg-gray-100 rounded-full px-6 py-3 text-lg font-medium">home decor idea</span>
106
+ <span class="bg-gray-100 rounded-full px-6 py-3 text-lg font-medium">new look outfit</span>
107
+ <span class="bg-gray-100 rounded-full px-6 py-3 text-lg font-medium">green thumb idea</span>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Masonry Grid -->
113
+ <section class="py-8 px-4 sm:px-6 lg:px-8">
114
+ <div class="masonry-grid">
115
+ <!-- Generated pins from the provided images -->
116
+ <div class="masonry-item pin-hover">
117
+ <img src="https://i.pinimg.com/236x/e3/41/4b/e3414b2fcf00375a199ba6964be551af.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md">
118
+ </div>
119
+ <div class="masonry-item pin-hover">
120
+ <img src="https://i.pinimg.com/236x/78/6e/00/786e00eab219eca59803d118fbe0feb3.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md">
121
+ </div>
122
+ <div class="masonry-item pin-hover">
123
+ <img src="https://i.pinimg.com/236x/3b/42/b0/3b42b02bf047097582b26401df90cdb3.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md">
124
+ </div>
125
+ <div class="masonry-item pin-hover">
126
+ <img src="https://i.pinimg.com/236x/de/13/6b/de136b极fa0037d3453a430895d8a5c27.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md">
127
+ </div>
128
+ <div class="masonry-item pin-hover">
129
+ <img src="https://i.pinimg.com/236x/15/bf/41/15bf41a80a0ffb41cc9d0fd98abed34b.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md">
130
+ </div>
131
+ <div class="masonry-item pin-hover">
132
+ <img src="https://i.pinimg.com/236x/c4/57/b极/c457bd9496170bfa3845b7cee775df65.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md">
133
+ </div>
134
+ <!-- Continue with all the provided images (repeating pattern for demonstration) -->
135
+ <div class="masonry-item pin-hover">
136
+ <img src="https://i.pinimg.com/236x/05/65/20/05652045e57af33599557db9f23188c0.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md">
137
+ </div>
138
+ <div class="masonry-item pin极hover">
139
+ <img src="https://i.pinimg.com/236x/c5/83/53/c58353e15f32f3cbfc7cdcbcf0dc2f34--mango-coulis-m-sorry.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md">
140
+ </div>
141
+ <div class="masonry-item pin-hover">
142
+ <img src="https://i.pinimg.com/564x/94/43/b9/9443b93bd8773f极c91bc1837e8424e8e.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md">
143
+ </div>
144
+ <!-- Additional images would continue here in the same pattern -->
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Features Section -->
149
+ <section class="py-16 bg-white">
150
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
151
+ <div class="text-center mb-16">
152
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Here's how it works</h2>
153
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Pinterest provides you with inspiration through a collage of images and videos from around the world to help bring your idea to life</p>
154
+ </div>
155
+
156
+ <div class="grid md:grid-cols-3 gap-12">
157
+ <div class="text-center">
158
+ <div class="mb-6">
159
+ <img src="https://s.pinimg.com/webapp/search-by-skin-tone-1x-8df69517.png" alt="Search by skin tone" class="mx-auto h-48 object-contain">
160
+ </div>
161
+ <h3 class="text-xl font-semibold mb-3">Search by skin tone</h3>
162
+ <p class="text-gray-600 mb-4">Search with skin tone ranges for beauty ideas that represent you</p>
163
+ <a href="#" class="text-pinterest-red font-medium hover:underline">Try now</a>
164
+ </div>
165
+
166
+ <div class="text-center">
167
+ <div class="mb-6">
168
+ <img src="https://s.pinimg.com/webapp/group-boards-1px-8b1a9ead.png" alt="Group boards" class="mx-auto h-48 object-contain">
169
+ </div>
170
+ <h3 class="text-xl font-semibold mb-3">Collaborate with group boards</h3>
171
+ <p class="text-gray-600 mb-4">Visualize your ideas with others, using a Pinterest account</p>
172
+ <a href="#" class="text-pinterest-red font-medium hover:underline">See an example</a>
173
+ </div>
174
+
175
+ <div class="text-center">
176
+ <div class="mb-6">
177
+ <img src="https://s.pinimg.com/webapp/visual-search-1px-9cc05cec.png" alt="Visual search" class="mx-auto h-48 object-contain">
178
+ </div>
179
+ <h3 class="text-xl font-semibold mb-3">Search visually with images</h3>
180
+ <p class="text-gray-600 mb-4">Search objects within an image to find more styles you'll love</p>
181
+ <a href="#" class="text-pinterest-red font-medium hover:underline">Learn more</a>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </section>
186
+
187
+ <!-- Sign Up Section -->
188
+ <section class="py-16 bg-gray-50">
189
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
190
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Sign up to get your ideas</h2>
191
+ <h3 class="text-2xl text-gray-700 mb-8">Welcome to Pinterest</h3>
192
+ <p class="text-lg text-gray-600 mb-12">Find new ideas to try</p>
193
+
194
+ <div class="bg-white rounded-xl shadow-lg p-8 max-w-md mx-auto">
195
+ <form class="space-y-6">
196
+ <div>
197
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
198
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-pinterest-red focus:border-pinterest-red">
199
+ </div>
200
+
201
+ <div>
202
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
203
+ <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-pinterest-red focus:border-pinterest-red">
204
+ <p class="text-xs text-gray-500 mt-1">Use 8 or more letters, numbers and symbols</p>
205
+ </div>
206
+
207
+ <div>
208
+ <label for="birthdate" class="block text-sm font-medium text-gray-700 mb-1">Birthdate</label>
209
+ <input type="date" id="birthdate" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-pinterest-red focus:border-pinterest-red">
210
+ </div>
211
+
212
+ <button type="submit" class="w-full bg-pinterest-red text-white py-3 rounded-full font-medium hover:bg-red-700">Continue</button>
213
+
214
+ <p class="text-xs text-gray-500 text-center">
215
+ By continuing, you agree to Pinterest's <a href="#" class="text-pinterest-red hover:underline">Terms of Service</a> and acknowledge you've read our <a href="#" class="text-pinterest-red hover:underline">Privacy Policy</a>.
216
+ </p>
217
+
218
+ <div class="pt-6 border-t border-gray-200">
219
+ <p class="text-sm text-gray-600">Already a member? <a href="#" class="text-pinterest-red font-medium hover:underline">Log in</a></p>
220
+ </div>
221
+ </form>
222
+ </div>
223
+ </div>
224
+ </section>
225
+
226
+ <!-- Footer -->
227
+ <footer class="bg-white border-t border-gray-200 py-12">
228
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
229
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
230
+ <div>
231
+ <span class="text-pinterest-red font-bold text-2xl">P</span>
232
+ <p class="text-gray-600 mt-2">Get the app</p>
233
+ <div class="flex space-x-2 mt-4">
234
+ <a href="#" class="text-gray-600 hover:text-pinterest-red">
235
+ <i data-feather="smartphone" class="w-6 h-6"></i> iOS
236
+ </a>
237
+ <a href="#" class="text-gray-600 hover:text-pinterest-red">
238
+ <i data-feather="smartphone" class="w-6 h-6"></i> Android
239
+ </a>
240
+ </div>
241
+ </div>
242
+
243
+ <div>
244
+ <h4 class="font-semibold mb-4">Quick links</h4>
245
+ <ul class="space-y-2">
246
+ <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Explore</a></li>
247
+ <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Shop</a></li>
248
+ <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Users</a></li>
249
+ <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Collections</a></li>
250
+ </ul>
251
+ </div>
252
+
253
+ <div>
254
+ <h4 class="font-semibold mb-4">Shopping</h4>
255
+ <ul class="space-y-2">
256
+ <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Help Center</a></li>
257
+ </ul>
258
+ </div>
259
+
260
+ <div>
261
+ <h4 class="font-semibold mb-4">Policies</h4>
262
+ <ul class="space-y-2">
263
+ <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Terms of service</a></li>
264
+ <li><a href="#" class="text-gray-极600 hover:text-pinterest-red">Privacy policy</a></li>
265
+ <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Non-user notice</a></li>
266
+ </ul>
267
+ </div>
268
+ </div>
269
+ <div class="border-t border-gray-200 mt-8 pt-8 text-center">
270
+ <p class="text-gray-600">© 2025 Momentize</p>
271
+ </div>
272
+ </div>
273
+ </footer>
274
+
275
+ <script>
276
+ feather.replace();
277
+
278
+ // Simple animation for the hero text
279
+ document.addEventListener('DOMContentLoaded', function() {
280
+ const heroText = document.querySelector('h1');
281
+ heroText.style.opacity = '0';
282
+ heroText.style.transform = 'translateY(20px)';
283
+
284
+ setTimeout(() => {
285
+ heroText.style.transition = 'opacity 1s ease, transform 1s ease';
286
+ heroText.style.opacity = '1';
287
+ heroText.style.transform = 'translateY(0)';
288
+ }, 100);
289
+ });
290
+ </script>
291
+ </body>
292
  </html>