Hugging Face's logo

Spaces:
alexsoft1
/
shopfusion-glow
Running

App Files Community
alexsoft1 commited on
Commit
d36e5c0
·
verified ·
1 Parent(s): 7cf30ad

sozday product carti

Browse files
Files changed (4) hide show
  1. cart.html +169 -0
  2. index.html +1 -1
  3. product.html +2 -2
  4. products.html +3 -3
cart.html ADDED
@@ -0,0 +1,169 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Your Cart - ShopFusion Glow</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
+ <style>
11
+ .glass-card {
12
+ backdrop-filter: blur(16px) saturate(180%);
13
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
14
+ background-color: rgba(255, 255, 255, 0.15);
15
+ border-radius: 12px;
16
+ border: 1px solid rgba(255, 255, 255, 0.125);
17
+ }
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
20
+ }
21
+ .cart-item:hover {
22
+ background-color: rgba(255, 255, 255, 0.1);
23
+ transition: background-color 0.3s ease;
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="min-h-screen gradient-bg text-gray-800">
28
+ <div class="container mx-auto px-4 py-8">
29
+ <header class="flex justify-between items-center mb-8">
30
+ <a href="/products.html" class="flex items-center space-x-2">
31
+ <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
32
+ <i data-feather="arrow-left" class="text-white"></i>
33
+ </div>
34
+ <h1 class="text-2xl font-bold text-white">Your Cart</h1>
35
+ </a>
36
+ <div class="flex items-center space-x-4">
37
+ <a href="/wishlist.html" class="text-white">
38
+ <i data-feather="heart"></i>
39
+ </a>
40
+ <div class="relative">
41
+ <i data-feather="shopping-cart" class="text-white"></i>
42
+ <span class="absolute -top-2 -right-2 bg-white text-blue-600 text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">3</span>
43
+ </div>
44
+ </div>
45
+ </header>
46
+
47
+ <div class="glass-card p-4 rounded-xl mb-6">
48
+ <div class="space-y-4">
49
+ <!-- Cart Item 1 -->
50
+ <div class="cart-item glass-card p-3 rounded-lg flex items-center space-x-3 transition">
51
+ <div class="w-16 h-16 bg-white/20 rounded-lg"></div>
52
+ <div class="flex-grow">
53
+ <h3 class="text-white font-medium">Premium Headphones</h3>
54
+ <div class="flex justify-between items-center mt-1">
55
+ <span class="text-white/80">$199.99</span>
56
+ <div class="flex items-center space-x-2">
57
+ <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
58
+ <i data-feather="minus" class="w-4 h-4"></i>
59
+ </button>
60
+ <span class="text-white">1</span>
61
+ <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
62
+ <i data-feather="plus" class="w-4 h-4"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ <button class="text-white/50 hover:text-white transition">
68
+ <i data-feather="trash-2" class="w-5 h-5"></i>
69
+ </button>
70
+ </div>
71
+
72
+ <!-- Cart Item 2 -->
73
+ <div class="cart-item glass-card p-3 rounded-lg flex items-center space-x-3 transition">
74
+ <div class="w-16 h-16 bg-white/20 rounded-lg"></div>
75
+ <div class="flex-grow">
76
+ <h3 class="text-white font-medium">Smart Watch</h3>
77
+ <div class="flex justify-between items-center mt-1">
78
+ <span class="text-white/80">$249.99</span>
79
+ <div class="flex items-center space-x-2">
80
+ <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
81
+ <i data-feather="minus" class="w-4 h-4"></i>
82
+ </button>
83
+ <span class="text-white">1</span>
84
+ <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
85
+ <i data-feather="plus" class="w-4 h-4"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ <button class="text-white/50 hover:text-white transition">
91
+ <i data-feather="trash-2" class="w-5 h-5"></i>
92
+ </button>
93
+ </div>
94
+
95
+ <!-- Cart Item 3 -->
96
+ <div class="cart-item glass-card p-3 rounded-lg flex items-center space-x-3 transition">
97
+ <div class="w-16 h-16 bg-white/20 rounded-lg"></div>
98
+ <div class="flex-grow">
99
+ <h3 class="text-white font-medium">Wireless Earbuds</h3>
100
+ <div class="flex justify-between items-center mt-1">
101
+ <span class="text-white/80">$129.99</span>
102
+ <div class="flex items-center space-x-2">
103
+ <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
104
+ <i data-feather="minus" class="w-4 h-4"></i>
105
+ </button>
106
+ <span class="text-white">1</span>
107
+ <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
108
+ <i data-feather="plus" class="w-4 h-4"></i>
109
+ </button>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <button class="text-white/50 hover:text-white transition">
114
+ <i data-feather="trash-2" class="w-5 h-5"></i>
115
+ </button>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="mt-6 pt-4 border-t border-white/20">
120
+ <div class="flex justify-between mb-2">
121
+ <span class="text-white/80">Subtotal</span>
122
+ <span class="text-white font-medium">$579.97</span>
123
+ </div>
124
+ <div class="flex justify-between mb-2">
125
+ <span class="text-white/80">Shipping</span>
126
+ <span class="text-white font-medium">Free</span>
127
+ </div>
128
+ <div class="flex justify-between mb-4">
129
+ <span class="text-white/80">Tax</span>
130
+ <span class="text-white font-medium">$46.40</span>
131
+ </div>
132
+ <div class="flex justify-between text-lg font-bold mb-6">
133
+ <span class="text-white">Total</span>
134
+ <span class="text-white">$626.37</span>
135
+ </div>
136
+
137
+ <div class="flex space-x-4">
138
+ <a href="/products.html" class="flex-1 glass-card py-3 text-white rounded-full font-bold text-center hover:bg-white/10 transition">
139
+ Continue Shopping
140
+ </a>
141
+ <a href="/checkout.html" class="flex-1 bg-white text-blue-600 py-3 rounded-full font-bold text-center hover:bg-gray-100 transition">
142
+ Checkout
143
+ </a>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="glass-card p-4 rounded-xl">
149
+ <h3 class="text-white font-bold mb-3">Recommended for You</h3>
150
+ <div class="grid grid-cols-2 gap-4">
151
+ <div class="bg-white/10 rounded-lg p-3">
152
+ <div class="h-24 bg-white/20 rounded-lg mb-2"></div>
153
+ <h4 class="text-white text-sm font-medium">Phone Case</h4>
154
+ <span class="text-white/80 text-xs">$29.99</span>
155
+ </div>
156
+ <div class="bg-white/10 rounded-lg p-3">
157
+ <div class="h-24 bg-white/20 rounded-lg mb-2"></div>
158
+ <h4 class="text-white text-sm font-medium">Wireless Charger</h4>
159
+ <span class="text-white/80 text-xs">$49.99</span>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <script>
166
+ feather.replace();
167
+ </script>
168
+ </body>
169
+ </html>
index.html CHANGED
@@ -82,7 +82,7 @@ Explore Products
82
  <h3 class="text-white font-bold text-xl">Premium Headphones</h3>
83
  <div class="flex justify-between items-center mt-2">
84
  <span class="text-white font-bold text-lg">$199.99</span>
85
- <a href="/cart.html" class="bg-white text-indigo-600 px-4 py-2 rounded-full text-sm font-medium">
86
  Add to Cart
87
  </a>
88
  </div>
 
82
  <h3 class="text-white font-bold text-xl">Premium Headphones</h3>
83
  <div class="flex justify-between items-center mt-2">
84
  <span class="text-white font-bold text-lg">$199.99</span>
85
+ <a href="/cart.html" class="bg-white text-indigo-600 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-100 transition">
86
  Add to Cart
87
  </a>
88
  </div>
product.html CHANGED
@@ -102,9 +102,9 @@
102
 
103
  <div class="flex space-x-4">
104
  <a href="/cart.html" class="flex-1 bg-white text-blue-600 py-3 rounded-full font-bold text-center hover:bg-gray-100 transition">
105
- Add to Cart
106
  </a>
107
- <a href="/checkout.html" class="flex-1 glass-card py-3 text-white rounded-full font-bold text-center hover:bg-white/10 transition">
108
  Buy Now
109
  </a>
110
  </div>
 
102
 
103
  <div class="flex space-x-4">
104
  <a href="/cart.html" class="flex-1 bg-white text-blue-600 py-3 rounded-full font-bold text-center hover:bg-gray-100 transition">
105
+ Add to Cart
106
  </a>
107
+ <a href="/checkout.html" class="flex-1 glass-card py-3 text-white rounded-full font-bold text-center hover:bg-white/10 transition">
108
  Buy Now
109
  </a>
110
  </div>
products.html CHANGED
@@ -50,10 +50,10 @@
50
  <p class="text-white/70 text-sm mb-3">Noise-cancelling wireless headphones</p>
51
  <div class="flex justify-between items-center">
52
  <span class="text-white font-bold">$199.99</span>
53
- <a href="/product.html" class="bg-white text-blue-600 px-4 py-2 rounded-full text-sm font-medium">
54
- View
55
  </a>
56
- </div>
57
  </div>
58
 
59
  <div class="glass-card p-4 rounded-xl">
 
50
  <p class="text-white/70 text-sm mb-3">Noise-cancelling wireless headphones</p>
51
  <div class="flex justify-between items-center">
52
  <span class="text-white font-bold">$199.99</span>
53
+ <a href="/product.html" class="bg-white text-blue-600 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-100 transition">
54
+ View
55
  </a>
56
+ </div>
57
  </div>
58
 
59
  <div class="glass-card p-4 rounded-xl">