<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eclipsè Store</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: 'Inter', sans-serif; }
.discount-badge { position:absolute; top:0.5rem; right:0.5rem; background:#dc2626; color:white; padding:0.25rem 0.5rem; border-radius:9999px; font-size:0.75rem; font-weight:bold; }
</style>
</head>
<body class="bg-gray-950 text-white">
<header class="p-4 bg-gray-900 border-b border-gray-800 flex justify-between items-center">
<h1 class="text-2xl font-extrabold">Eclipsè Store</h1>
<div class="flex gap-4 items-center">
<div>Solars: <span id="solarBalance">100</span></div>
<div>Discount: <span id="activeDiscount">0%</span></div>
</div>
</header> <main class="max-w-6xl mx-auto p-6 space-y-10">
<section>
<h2 class="text-xl font-bold mb-3">VPS Plans</h2>
<div id="vpsGrid" class="grid md:grid-cols-3 gap-4"></div>
</section> <section>
<h2 class="text-xl font-bold mb-3">Domains</h2>
<div id="domainGrid" class="grid sm:grid-cols-2 md:grid-cols-4 gap-4"></div>
</section> <section>
<h2 class="text-xl font-bold mb-3">Solar Subdomain Policy</h2>
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4 flex justify-between items-center">
<p>.pages.dev available for <span class="text-yellow-400 font-bold">10 Solars</span></p>
<button onclick="buySubdomain()" class="px-3 py-2 bg-green-600 hover:bg-green-500 rounded-lg">Buy</button>
</div>
</section> <section>
<h2 class="text-xl font-bold mb-3">Redeem Codes</h2>
<div class="flex gap-3">
<input id="redeemInput" placeholder="Enter code" class="px-3 py-2 rounded-lg bg-gray-800 border border-gray-700"/>
<button onclick="redeemCode()" class="px-3 py-2 bg-yellow-600 hover:bg-yellow-500 rounded-lg">Redeem</button>
</div>
<p class="text-xs mt-2 text-gray-400">Solar Codes: BONUS50, WELCOME10, NEON500, DOOR5000 • Discount Codes: DISCOUNT30, GIFT10, HOWL20, GO50, DISCOUNT#1</p>
</section>
</main> <script>
const vpsPlans = [
{ name: 'Basic VPS', specs: '1 vCPU • 1GB RAM • 20GB SSD', price: 5.00 },
{ name: 'Pro VPS', specs: '2 vCPU • 4GB RAM • 40GB SSD', price: 10.00 },
{ name: 'Elite VPS', specs: '4 vCPU • 8GB RAM • 80GB SSD', price: 20.00 }
];
const domainTLDs = [
{ tld: '.com', price: 9.99 },
{ tld: '.net', price: 8.99 },
{ tld: '.org', price: 7.99 },
{ tld: '.fun', price: 6.99 },
{ tld: '.in', price: 5.99 },
{ tld: '.page', price: 7.49 },
{ tld: '.home', price: 6.49 },
{ tld: '.live', price: 8.49 }
]; let solarBalance = 100;
let totalDiscount = 0;
const DISCOUNT_MAX = 90;
const DISCOUNT_CODES = { 'DISCOUNT30': 30, 'GIFT10': 10, 'HOWL20': 20, 'GO50': 50, 'DISCOUNT#1': 40 };
const SOLAR_CODES = { 'BONUS50': 50, 'WELCOME10': 10, 'NEON500': 500, 'DOOR5000': 5000 };
let redeemedCodes = new Set(); function renderVPS() {
const grid = document.getElementById('vpsGrid');
grid.innerHTML = '';
vpsPlans.forEach(plan => {
const discounted = plan.price * (1 - totalDiscount / 100);
const el = document.createElement('div');
el.className = 'relative bg-gray-900 border border-gray-800 p-4 rounded-xl';
el.innerHTML = `
<div class='discount-badge'>${totalDiscount}% OFF</div>
<h3 class='font-bold text-lg mb-1'>${plan.name}</h3>
<p class='text-sm text-gray-400 mb-2'>${plan.specs}</p>
<div class='font-bold'><span class="line-through text-gray-500">$${plan.price.toFixed(2)}</span> <span class="text-yellow-400">$${discounted.toFixed(2)}</span></div>
<button onclick="purchaseItem('${plan.name}', ${discounted})" class="mt-3 px-3 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg">Purchase</button>
`;
grid.appendChild(el);
});
} function renderDomains() {
const grid = document.getElementById('domainGrid');
grid.innerHTML = '';
domainTLDs.forEach(d => {
const discounted = d.price * (1 - totalDiscount / 100);
const el = document.createElement('div');
el.className = 'relative bg-gray-900 border border-gray-800 p-4 rounded-xl';
el.innerHTML = `
<div class='discount-badge'>${totalDiscount}% OFF</div>
<h3 class='font-bold mb-1'>${d.tld}</h3>
<div class='font-bold'><span class="line-through text-gray-500">$${d.price.toFixed(2)}</span> <span class="text-yellow-400">$${discounted.toFixed(2)}</span></div>
<button onclick="purchaseItem('${d.tld}', ${discounted})" class="mt-3 px-3 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg">Purchase</button>
`;
grid.appendChild(el);
});
} function purchaseItem(name, price) {
alert(`To purchase ${name} for $${price.toFixed(2)}, please fill the contact form.`);
window.location.href = 'mailto:harshit.205705@gmail.com?subject=Purchase%20Request&body=I%20want%20to%20buy%20' + encodeURIComponent(name) + ' at $' + price.toFixed(2);
} function buySubdomain() {
if (solarBalance >= 10) {
solarBalance -= 10;
updateUI();
alert('Purchased .pages.dev for 10 Solars!');
} else {
alert('Not enough Solars.');
}
} function redeemCode() {
const input = document.getElementById('redeemInput').value.trim().toUpperCase();
if (redeemedCodes.has(input)) {
alert('Code already redeemed.');
return;
}
if (SOLAR_CODES[input]) {
solarBalance += SOLAR_CODES[input];
redeemedCodes.add(input);
alert(`Added ${SOLAR_CODES[input]} Solars!`);
} else if (DISCOUNT_CODES[input]) {
if (totalDiscount + DISCOUNT_CODES[input] <= DISCOUNT_MAX) {
totalDiscount += DISCOUNT_CODES[input];
redeemedCodes.add(input);
alert(`Discount increased by ${DISCOUNT_CODES[input]}%!`);
} else {
alert('Cannot exceed 90% total discount.');
}
} else {
alert('Invalid code.');
}
updateUI();
} function updateUI() {
document.getElementById('solarBalance').textContent = solarBalance;
document.getElementById('activeDiscount').textContent = totalDiscount + '%';
renderVPS();
renderDomains();
} renderVPS();
renderDomains();
updateUI();
</script>
</body>
</html>