Hugging Face's logo

Spaces:
Marv12
/
card
Running

App Files Community
Marv12 commited on
Commit
6a6f0d5
·
verified ·
1 Parent(s): bc71621

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +236 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Card
3
- emoji: 🏆
4
- colorFrom: green
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: card
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,236 @@
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>E-Commerce Grid Cards</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .card {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
16
+ }
17
+ .heart {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .heart:hover {
21
+ transform: scale(1.2);
22
+ }
23
+ .discount-badge {
24
+ position: absolute;
25
+ top: 10px;
26
+ right: 10px;
27
+ background-color: #ef4444;
28
+ color: white;
29
+ padding: 2px 8px;
30
+ border-radius: 4px;
31
+ font-size: 12px;
32
+ font-weight: bold;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50">
37
+ <div class="container mx-auto px-4 py-12">
38
+ <div class="flex justify-between items-center mb-8">
39
+ <h1 class="text-3xl font-bold text-gray-800">Featured Products</h1>
40
+ <div class="flex space-x-2">
41
+ <button class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition">All</button>
42
+ <button class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition">Electronics</button>
43
+ <button class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition">Fashion</button>
44
+ <button class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition">Home</button>
45
+ </div>
46
+ </div>
47
+
48
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
49
+ <!-- Product Card 1 -->
50
+ <div class="card bg-white rounded-lg overflow-hidden shadow-md relative">
51
+ <div class="discount-badge">-20%</div>
52
+ <div class="p-4">
53
+ <div class="relative h-48 overflow-hidden">
54
+ <img src="https://images.unsplash.com/photo-1546868871-7041f2d55e0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c21hcnRwaG9uZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
55
+ alt="Smartphone" class="w-full h-full object-contain">
56
+ </div>
57
+ <div class="mt-4">
58
+ <h3 class="text-lg font-semibold text-gray-800">Premium Smartphone X</h3>
59
+ <p class="text-gray-600 text-sm mt-1">Latest model with advanced camera</p>
60
+ <div class="flex items-center mt-2">
61
+ <div class="flex text-yellow-400">
62
+ <i class="fas fa-star"></i>
63
+ <i class="fas fa-star"></i>
64
+ <i class="fas fa-star"></i>
65
+ <i class="fas fa-star"></i>
66
+ <i class="fas fa-star-half-alt"></i>
67
+ </div>
68
+ <span class="text-gray-600 text-xs ml-2">(128 reviews)</span>
69
+ </div>
70
+ <div class="mt-3 flex justify-between items-center">
71
+ <div>
72
+ <span class="text-gray-500 line-through text-sm">$899.99</span>
73
+ <span class="text-lg font-bold text-gray-800 ml-2">$719.99</span>
74
+ </div>
75
+ <button class="heart text-gray-400 hover:text-red-500">
76
+ <i class="far fa-heart"></i>
77
+ </button>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ <button class="w-full py-2 bg-blue-600 text-white font-medium hover:bg-blue-700 transition">
82
+ Add to Cart
83
+ </button>
84
+ </div>
85
+
86
+ <!-- Product Card 2 -->
87
+ <div class="card bg-white rounded-lg overflow-hidden shadow-md relative">
88
+ <div class="p-4">
89
+ <div class="relative h-48 overflow-hidden">
90
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d2F0Y2h8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
91
+ alt="Watch" class="w-full h-full object-contain">
92
+ </div>
93
+ <div class="mt-4">
94
+ <h3 class="text-lg font-semibold text-gray-800">Luxury Chrono Watch</h3>
95
+ <p class="text-gray-600 text-sm mt-1">Stainless steel, waterproof</p>
96
+ <div class="flex items-center mt-2">
97
+ <div class="flex text-yellow-400">
98
+ <i class="fas fa-star"></i>
99
+ <i class="fas fa-star"></i>
100
+ <i class="fas fa-star"></i>
101
+ <i class="fas fa-star"></i>
102
+ <i class="far fa-star"></i>
103
+ </div>
104
+ <span class="text-gray-600 text-xs ml-2">(64 reviews)</span>
105
+ </div>
106
+ <div class="mt-3 flex justify-between items-center">
107
+ <div>
108
+ <span class="text-lg font-bold text-gray-800">$249.99</span>
109
+ </div>
110
+ <button class="heart text-gray-400 hover:text-red-500">
111
+ <i class="far fa-heart"></i>
112
+ </button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ <button class="w-full py-2 bg-blue-600 text-white font-medium hover:bg-blue-700 transition">
117
+ Add to Cart
118
+ </button>
119
+ </div>
120
+
121
+ <!-- Product Card 3 -->
122
+ <div class="card bg-white rounded-lg overflow-hidden shadow-md relative">
123
+ <div class="discount-badge">-15%</div>
124
+ <div class="p-4">
125
+ <div class="relative h-48 overflow-hidden">
126
+ <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
127
+ alt="Headphones" class="w-full h-full object-contain">
128
+ </div>
129
+ <div class="mt-4">
130
+ <h3 class="text-lg font-semibold text-gray-800">Noise Cancelling Headphones</h3>
131
+ <p class="text-gray-600 text-sm mt-1">40hr battery, wireless</p>
132
+ <div class="flex items-center mt-2">
133
+ <div class="flex text-yellow-400">
134
+ <i class="fas fa-star"></i>
135
+ <i class="fas fa-star"></i>
136
+ <i class="fas fa-star"></i>
137
+ <i class="fas fa-star"></i>
138
+ <i class="fas fa-star"></i>
139
+ </div>
140
+ <span class="text-gray-600 text-xs ml-2">(256 reviews)</span>
141
+ </div>
142
+ <div class="mt-3 flex justify-between items-center">
143
+ <div>
144
+ <span class="text-gray-500 line-through text-sm">$199.99</span>
145
+ <span class="text-lg font-bold text-gray-800 ml-2">$169.99</span>
146
+ </div>
147
+ <button class="heart text-red-500">
148
+ <i class="fas fa-heart"></i>
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <button class="w-full py-2 bg-blue-600 text-white font-medium hover:bg-blue-700 transition">
154
+ Add to Cart
155
+ </button>
156
+ </div>
157
+
158
+ <!-- Product Card 4 -->
159
+ <div class="card bg-white rounded-lg overflow-hidden shadow-md relative">
160
+ <div class="p-4">
161
+ <div class="relative h-48 overflow-hidden">
162
+ <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8c2hvZXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
163
+ alt="Shoes" class="w-full h-full object-contain">
164
+ </div>
165
+ <div class="mt-4">
166
+ <h3 class="text-lg font-semibold text-gray-800">Running Sneakers Pro</h3>
167
+ <p class="text-gray-600 text-sm mt-1">Lightweight, breathable</p>
168
+ <div class="flex items-center mt-2">
169
+ <div class="flex text-yellow-400">
170
+ <i class="fas fa-star"></i>
171
+ <i class="fas fa-star"></i>
172
+ <i class="fas fa-star"></i>
173
+ <i class="fas fa-star"></i>
174
+ <i class="fas fa-star-half-alt"></i>
175
+ </div>
176
+ <span class="text-gray-600 text-xs ml-2">(89 reviews)</span>
177
+ </div>
178
+ <div class="mt-3 flex justify-between items-center">
179
+ <div>
180
+ <span class="text-lg font-bold text-gray-800">$129.99</span>
181
+ </div>
182
+ <button class="heart text-gray-400 hover:text-red-500">
183
+ <i class="far fa-heart"></i>
184
+ </button>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <button class="w-full py-2 bg-blue-600 text-white font-medium hover:bg-blue-700 transition">
189
+ Add to Cart
190
+ </button>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="mt-12 text-center">
195
+ <button class="px-6 py-3 border border-gray-300 rounded-md font-medium hover:bg-gray-100 transition">
196
+ View All Products
197
+ </button>
198
+ </div>
199
+ </div>
200
+
201
+ <script>
202
+ // Toggle favorite heart icons
203
+ document.querySelectorAll('.heart').forEach(heart => {
204
+ heart.addEventListener('click', function() {
205
+ const icon = this.querySelector('i');
206
+ if (icon.classList.contains('far')) {
207
+ icon.classList.remove('far');
208
+ icon.classList.add('fas');
209
+ this.classList.remove('text-gray-400');
210
+ this.classList.add('text-red-500');
211
+ } else {
212
+ icon.classList.remove('fas');
213
+ icon.classList.add('far');
214
+ this.classList.remove('text-red-500');
215
+ this.classList.add('text-gray-400');
216
+ }
217
+ });
218
+ });
219
+
220
+ // Add to cart animation
221
+ document.querySelectorAll('button:contains("Add to Cart")').forEach(btn => {
222
+ btn.addEventListener('click', function() {
223
+ this.textContent = 'Added!';
224
+ this.classList.remove('bg-blue-600', 'hover:bg-blue-700');
225
+ this.classList.add('bg-green-500', 'hover:bg-green-600');
226
+
227
+ setTimeout(() => {
228
+ this.textContent = 'Add to Cart';
229
+ this.classList.remove('bg-green-500', 'hover:bg-green-600');
230
+ this.classList.add('bg-blue-600', 'hover:bg-blue-700');
231
+ }, 2000);
232
+ });
233
+ });
234
+ </script>
235
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Marv12/card" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
236
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ create a grid shoping card side by side card