Skip to content

Commit 5106628

Browse files
CoderSergCoderSerg
committed
v2.66
1 parent 6afce28 commit 5106628

1 file changed

Lines changed: 135 additions & 53 deletions

File tree

‎shop.html‎

Lines changed: 135 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -8,100 +8,182 @@
88
<meta name="author" content="Serhii">
99
<title>Shop · Serhii</title>
1010

11-
<!-- Tailwind -->
1211
<script src="https://cdn.tailwindcss.com"></script>
1312

1413
<script>
1514
tailwind.config = {
1615
theme: {
1716
extend: {
1817
colors: {
19-
brand: "#10b981", // Emerald
18+
brand: "#10b981",
2019
},
2120
},
2221
},
2322
};
2423
</script>
25-
</head>
26-
27-
<body class="bg-gray-950 min-h-screen text-white font-sans">
2824

29-
<!-- HEADER (NO NAVBAR — per your rules) -->
30-
<header class="max-w-5xl mx-auto px-6 py-10 flex justify-between items-center">
31-
<h1 class="text-3xl sm:text-4xl font-bold tracking-tight">
32-
Shop <span class="text-brand">Items.</span>
33-
</h1>
25+
<style>
26+
.gradient-text {
27+
background: linear-gradient(to right, #10b981, #34d399);
28+
-webkit-background-clip: text;
29+
-webkit-text-fill-color: transparent;
30+
background-clip: text;
31+
}
32+
</style>
33+
</head>
3434

35-
<a href="./index.html"
36-
class="px-4 py-2 rounded-lg border border-white/20 bg-white/5 hover:bg-white/10 transition text-sm">
37-
← Back
38-
</a>
35+
<body class="bg-gray-900 text-white min-h-screen">
36+
37+
<!-- NAVBAR -->
38+
<header class="fixed inset-x-0 top-0 z-50 bg-gray-900/90 backdrop-blur border-b border-white/10">
39+
<nav class="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 h-14" aria-label="Global">
40+
<div class="flex items-center gap-2">
41+
<a href="/" class="flex items-center gap-2 group">
42+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand group-hover:scale-110 transition-transform">
43+
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
44+
<path d="M12 22V12"/>
45+
<polyline points="3.29 7 12 12 20.71 7"/>
46+
<path d="m7.5 4.27 9 5.15"/>
47+
</svg>
48+
<span class="font-bold">Serhii</span>
49+
</a>
50+
</div>
51+
<div class="flex items-center gap-6 text-sm">
52+
<a href="/shop" class="text-brand font-semibold">Shop</a>
53+
<a href="/learn" class="text-gray-300 hover:text-white transition">Learn</a>
54+
<a href="/contact" class="text-gray-300 hover:text-white transition">Contact</a>
55+
</div>
56+
</nav>
3957
</header>
4058

41-
<!-- MAIN CONTENT -->
42-
<main class="max-w-5xl mx-auto px-6 pb-20">
43-
44-
<h2 class="text-xl font-semibold mb-6 text-gray-300">All Products</h2>
45-
46-
<!-- Grid -->
47-
<div id="shopItems" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8"></div>
48-
59+
<!-- HERO SECTION -->
60+
<div class="relative pt-20 pb-8 px-6">
61+
<!-- TOP BG BLOB -->
62+
<div aria-hidden="true"
63+
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
64+
<div
65+
class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[40rem]
66+
-translate-x-1/2 rotate-30 bg-gradient-to-tr from-emerald-500 via-cyan-400 to-blue-500 opacity-30
67+
sm:left-[calc(50%-30rem)] sm:w-[70rem]">
68+
</div>
69+
</div>
70+
71+
<div class="max-w-7xl mx-auto">
72+
<h1 class="text-4xl sm:text-5xl font-bold tracking-tight mb-2">
73+
<span class="gradient-text">Shop</span>
74+
</h1>
75+
</div>
76+
77+
<!-- BOTTOM BG BLOB -->
78+
<div aria-hidden="true"
79+
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl">
80+
<div
81+
class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[40rem]
82+
-translate-x-1/2 bg-gradient-to-tr from-purple-500 via-emerald-400 to-cyan-500 opacity-30
83+
sm:left-[calc(50%+36rem)] sm:w-[70rem]">
84+
</div>
85+
</div>
86+
</div>
87+
88+
<!-- PRODUCTS SECTION -->
89+
<main class="max-w-7xl mx-auto px-6 pb-24">
90+
<div id="shopItems" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"></div>
4991
</main>
5092

93+
<!-- FOOTER -->
94+
<footer class="border-t border-white/10 py-8 text-sm text-gray-400">
95+
<div class="mx-auto max-w-7xl px-6">
96+
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
97+
<div class="flex items-center gap-2">
98+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand">
99+
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
100+
<path d="M12 22V12"/>
101+
<polyline points="3.29 7 12 12 20.71 7"/>
102+
<path d="m7.5 4.27 9 5.15"/>
103+
</svg>
104+
<p>© 2025 Serhii. All rights reserved.</p>
105+
</div>
106+
<div class="flex gap-6">
107+
<a href="/contact" class="hover:text-white transition">Contact</a>
108+
<a href="/shop" class="hover:text-white transition">Shop</a>
109+
<a href="/learn" class="hover:text-white transition">Learn</a>
110+
</div>
111+
</div>
112+
</div>
113+
</footer>
51114

52-
<!-- JS BUILDER (UPGRADED LOOK) -->
53115
<script>
54116
function addShopItem(name, price, image, link) {
55117
const container = document.getElementById("shopItems");
56118

57119
const card = document.createElement("div");
58-
card.className =
59-
"bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl shadow-xl p-6 flex flex-col hover:scale-[1.03] transition-all duration-200 hover:shadow-brand/30";
60-
61-
card.innerHTML = `
62-
<div class="relative mb-4">
63-
<img src="${image}" alt=""
64-
class="w-full h-48 object-cover rounded-2xl border border-white/10 bg-gray-900/40">
65-
66-
<span class="absolute bottom-2 right-2 bg-brand text-black px-3 py-1 rounded-md text-xs font-semibold shadow">
67-
$${price}
68-
</span>
69-
</div>
120+
card.className = "group relative bg-gray-800/50 backdrop-blur-sm border border-white/10 rounded-xl overflow-hidden hover:border-brand/50 transition-all duration-300 hover:shadow-lg hover:shadow-brand/20 hover:scale-105";
121+
122+
// Create image container
123+
const imgContainer = document.createElement("div");
124+
imgContainer.className = "relative overflow-hidden";
125+
const img = document.createElement("img");
126+
img.src = image;
127+
img.alt = name;
128+
img.className = "w-full h-40 sm:h-48 object-cover";
129+
imgContainer.appendChild(img);
130+
131+
// Create content container
132+
const contentDiv = document.createElement("div");
133+
contentDiv.className = "p-3";
134+
135+
// Create title
136+
const title = document.createElement("h3");
137+
title.className = "text-sm font-semibold text-white truncate";
138+
title.textContent = name;
139+
140+
// Create price
141+
const priceEl = document.createElement("p");
142+
priceEl.className = "text-brand font-bold text-sm mb-2";
143+
priceEl.textContent = price;
144+
145+
// Create buy button
146+
const buyBtn = document.createElement("a");
147+
buyBtn.href = link;
148+
buyBtn.target = "_blank";
149+
buyBtn.className = "flex items-center justify-center gap-1 w-full bg-brand text-black font-semibold px-3 py-2 rounded-lg hover:bg-brand/80 transition-all text-xs";
150+
buyBtn.innerHTML = `
151+
<span>Buy</span>
152+
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
153+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
154+
</svg>
155+
`;
70156

71-
<h3 class="text-lg font-semibold">${name}</h3>
157+
// Assemble everything
158+
contentDiv.appendChild(title);
159+
contentDiv.appendChild(priceEl);
160+
contentDiv.appendChild(buyBtn);
72161

73-
<a href="${link}" target="_blank"
74-
class="mt-auto inline-block bg-brand text-black font-semibold px-4 py-2 rounded-xl hover:bg-brand/80 transition shadow-lg text-center">
75-
Buy →
76-
</a>
77-
`;
162+
card.appendChild(imgContainer);
163+
card.appendChild(contentDiv);
78164

79165
container.appendChild(card);
80166
}
81167

82-
/* ---------------------
83-
Add your products
84-
(matches your old list)
85-
--------------------- */
86-
87-
addShopItem("Fidget Spinner", 1.25, "./images/fidgetspinner.png",
168+
// Add products
169+
addShopItem("Fidget Spinner", "$1.25", "./images/fidgetspinner.png",
88170
"https://www.paypal.com/ncp/payment/JDDULBSP3A4XN");
89171

90-
addShopItem("Fidget Gyro Ring", 1.00, "./images/gyroringfidget.png",
172+
addShopItem("Fidget Gyro Ring", "$1.00", "./images/gyroringfidget.png",
91173
"https://www.paypal.com/ncp/payment/99836MVB6AZKA");
92174

93-
addShopItem("Door Unlocker", 1.50, "./images/unlocker.png",
175+
addShopItem("Door Unlocker", "$1.50", "./images/unlocker.png",
94176
"https://www.paypal.com/ncp/payment/BT9X7R8B6A4GW");
95177

96-
addShopItem("Sword", 15.00, "./images/sword.png",
178+
addShopItem("Sword", "$15.00", "./images/sword.png",
97179
"https://www.paypal.com/ncp/payment/U4ATUL6P8NBG4");
98180

99-
addShopItem("Dragon", 20.00, "./images/dragon.png",
181+
addShopItem("Dragon", "$20.00", "./images/dragon.png",
100182
"https://www.paypal.com/ncp/payment/G4KKAXJA7QBYL");
101183

102-
addShopItem("Air Slides", 35.00, "./images/shoes.png",
184+
addShopItem("Air Slides", "$35.00", "./images/shoes.png",
103185
"https://www.paypal.com/ncp/payment/E7R82UPT6U9U6");
104186
</script>
105187

106188
</body>
107-
</html>
189+
</html>

0 commit comments

Comments
 (0)