-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathplans.html
More file actions
289 lines (253 loc) · 14.4 KB
/
plans.html
File metadata and controls
289 lines (253 loc) · 14.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plans & Pricing - MithTechX</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
.heading-font { font-family: 'Space Grotesk', sans-serif; }
.plan-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.plan-card:hover { transform: translateY(-12px); }
.popular::before {
content: 'MOST POPULAR';
position: absolute;
top: -12px;
right: 20px;
background: #f59e0b;
color: white;
font-size: 11px;
padding: 2px 14px;
border-radius: 9999px;
font-weight: bold;
}
</style>
</head>
<body class="tailwind-ready bg-slate-950 text-white">
<!-- Navbar -->
<nav class="bg-slate-950 border-b border-slate-800 sticky top-0 z-50">
<div class="max-w-screen-2xl mx-auto px-8 py-5 flex items-center justify-between">
<div class="flex items-center gap-x-3">
<img src="https://i.postimg.cc/pVsFJWh1/logo-png.png" alt="MithTechX Logo" class="h-10 w-auto">
<span class="heading-font text-3xl tracking-[-1px]">MithTechX</span>
</div>
<a href="index.html" class="flex items-center gap-2 text-cyan-400 hover:text-cyan-300">
<i class="fa-solid fa-arrow-left"></i> Back to Home
</a>
</div>
</nav>
<div class="max-w-screen-2xl mx-auto px-8 py-12">
<h1 class="heading-font text-5xl text-center mb-2">Choose Your Service & Plan</h1>
<p class="text-center text-slate-400">Clear pricing • 10% off with WELCOME10 • Special discounts available</p>
<!-- Service Tabs -->
<div class="flex flex-wrap gap-3 justify-center mt-12 mb-10" id="service-tabs"></div>
<!-- Pricing Cards -->
<div class="grid md:grid-cols-3 gap-8" id="pricing-cards"></div>
<!-- Checkout Section -->
<div id="checkout-section" class="hidden mt-20 bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl p-10">
<h3 class="text-3xl font-semibold mb-8">Checkout</h3>
<div class="grid lg:grid-cols-2 gap-12">
<!-- Order Summary + Coupon -->
<div>
<h4 class="font-semibold mb-4">Order Summary</h4>
<div id="order-summary" class="bg-white/10 rounded-2xl p-6 space-y-4 text-sm"></div>
<div class="mt-8">
<label class="block text-sm mb-2">Coupon Code</label>
<div class="flex gap-3">
<input type="text" id="coupon-input" value="WELCOME10"
class="bg-white/10 border border-white/30 rounded-2xl px-6 py-4 flex-1 outline-none">
<button onclick="applyCoupon()"
class="bg-emerald-500 hover:bg-emerald-600 px-10 rounded-2xl font-semibold">Apply</button>
</div>
<div id="coupon-status" class="mt-3 text-emerald-400 font-medium"></div>
</div>
</div>
<!-- Payment Section -->
<div>
<h4 class="font-semibold mb-6">Payment Details</h4>
<!-- Bank Details -->
<div class="mb-6">
<p class="text-sm text-slate-400 mb-2">Bank Transfer</p>
<div class="bg-slate-900 rounded-2xl p-5 text-sm">
<p><strong>Account Name:</strong> MithTechX</p>
<p><strong>Account Number:</strong> [Add your account number]</p>
<p><strong>IFSC Code:</strong> [Add your IFSC]</p>
</div>
</div>
<!-- UPI ID -->
<div class="mb-8">
<p class="text-sm text-slate-400 mb-2">UPI ID</p>
<div class="bg-slate-900 rounded-2xl p-5 font-medium">mithtechx@axl</div>
</div>
<!-- Dynamic QR -->
<div class="text-center bg-white/10 rounded-3xl p-8">
<p class="text-sm text-slate-400 mb-3">Final Amount</p>
<div id="final-amount" class="text-6xl font-bold heading-font text-emerald-400 mb-6">₹0</div>
<div id="qr-container" class="bg-white p-4 rounded-3xl inline-block mx-auto shadow-2xl"></div>
<p id="scan-text" class="mt-6 text-emerald-400 font-medium text-lg">
Scan to pay instantly
</p>
</div>
</div>
</div>
<button onclick="completeOrder()"
class="w-full mt-12 bg-cyan-500 hover:bg-cyan-400 text-slate-950 py-7 text-2xl font-semibold rounded-3xl">
Confirm Order & Send on WhatsApp
</button>
</div>
</div>
<script>
const services = {
"logo": { name: "Logo Design", plans: [
{ tier: "Basic", price: 999, delivery: "3 days", revisions: "2", features: ["Simple logo", "1 concept", "PNG + JPEG"] },
{ tier: "Standard", price: 2499, delivery: "2 days", revisions: "4", features: ["Professional logo", "2 concepts", "Vector + PNG"], popular: true },
{ tier: "Premium", price: 4999, delivery: "1 day", revisions: "Unlimited", features: ["Premium branding", "3 concepts", "Full brand kit"] }
]},
"web": { name: "Web & Mobile Development", plans: [
{ tier: "Basic", price: 8999, delivery: "10 days", revisions: "2", features: ["Single page website", "Responsive", "Contact form"] },
{ tier: "Standard", price: 14999, delivery: "8 days", revisions: "4", features: ["Multi-page", "SEO", "Admin panel"], popular: true },
{ tier: "Premium", price: 24999, delivery: "14 days", revisions: "Unlimited", features: ["Full app", "Android/iOS ready"] }
]},
"graphic": { name: "Graphic Design", plans: [
{ tier: "Basic", price: 1499, delivery: "3 days", revisions: "2", features: ["Single poster"] },
{ tier: "Standard", price: 3499, delivery: "2 days", revisions: "4", features: ["10 social posts"], popular: true },
{ tier: "Premium", price: 6999, delivery: "5 days", revisions: "Unlimited", features: ["Full marketing kit"] }
]},
"fea": { name: "Finite Element Analysis", plans: [
{ tier: "Basic", price: 4999, delivery: "5 days", revisions: "1", features: ["Basic stress analysis"] },
{ tier: "Standard", price: 8999, delivery: "4 days", revisions: "2", features: ["Full simulation"], popular: true },
{ tier: "Premium", price: 14999, delivery: "7 days", revisions: "3", features: ["Advanced optimization"] }
]},
"data": { name: "Data Processing", plans: [
{ tier: "Basic", price: 1999, delivery: "3 days", revisions: "1", features: ["Data cleaning"] },
{ tier: "Standard", price: 3999, delivery: "2 days", revisions: "2", features: ["Dashboard + Charts"], popular: true },
{ tier: "Premium", price: 6999, delivery: "4 days", revisions: "Unlimited", features: ["Advanced analytics"] }
]}
};
let selectedService = "logo";
let selectedPlan = null;
let finalAmount = 0;
let qrCodeInstance = null;
const upiId = "mithtechx@axl"; // ← CHANGE TO YOUR REAL UPI ID
const payeeName = "MithTechX";
function renderTabs() {
const container = document.getElementById('service-tabs');
container.innerHTML = '';
Object.keys(services).forEach(key => {
const btn = document.createElement('button');
btn.className = `px-8 py-4 rounded-3xl font-medium ${key === selectedService ? 'bg-cyan-500 text-slate-950' : 'bg-white/10 hover:bg-white/20'}`;
btn.textContent = services[key].name;
btn.onclick = () => { selectedService = key; renderTabs(); renderPricing(); };
container.appendChild(btn);
});
}
function renderPricing() {
const container = document.getElementById('pricing-cards');
container.innerHTML = '';
const data = services[selectedService];
data.plans.forEach(plan => {
const html = `
<div class="plan-card bg-white/10 border ${plan.popular ? 'border-amber-400 popular' : 'border-white/20'} rounded-3xl p-8 text-center">
<h3 class="text-2xl font-semibold">${plan.tier}</h3>
<div class="text-6xl font-bold heading-font my-6">₹${plan.price}</div>
<p class="text-emerald-400">${plan.delivery} • ${plan.revisions} revisions</p>
<ul class="mt-8 text-left space-y-3 text-sm">
${plan.features.map(f => `<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i>${f}</li>`).join('')}
</ul>
<button onclick="selectPlan('${plan.tier}', ${plan.price})"
class="mt-10 w-full py-5 bg-white text-slate-950 rounded-3xl font-semibold hover:bg-cyan-400">
Select ${plan.tier}
</button>
</div>`;
container.innerHTML += html;
});
}
function selectPlan(tier, price) {
selectedPlan = { tier, price, service: services[selectedService].name };
finalAmount = price;
document.getElementById('checkout-section').classList.remove('hidden');
document.getElementById('checkout-section').scrollIntoView({ behavior: 'smooth' });
updateOrderSummary();
generateDynamicQR();
}
function updateOrderSummary() {
const summary = document.getElementById('order-summary');
summary.innerHTML = `
<div class="flex justify-between"><span>Service</span><span>${selectedPlan.service}</span></div>
<div class="flex justify-between"><span>Plan</span><span>${selectedPlan.tier}</span></div>
<div class="flex justify-between border-t border-white/20 pt-4 font-semibold">
<span>Total</span>
<span id="summary-price">₹${finalAmount}</span>
</div>
`;
}
function applyCoupon() {
const input = document.getElementById('coupon-input').value.trim().toUpperCase();
const status = document.getElementById('coupon-status');
if (input === "WELCOME10") {
finalAmount = Math.round(selectedPlan.price * 0.9);
status.innerHTML = `🎉 WELCOME10 applied!<br><span class="text-emerald-300">10% discount added</span>`;
createConfettiBlast(false);
}
else if (input === "MITH9999") {
finalAmount = Math.round(selectedPlan.price * 0.0001);
status.innerHTML = `🎉 MITH9999 applied!<br><span class="text-yellow-300">99.99% discount activated</span>`;
createConfettiBlast(true);
}
else {
status.innerHTML = `❌ Invalid coupon code`;
return;
}
updateOrderSummary();
generateDynamicQR();
}
function generateDynamicQR() {
const upiLink = `upi://pay?pa=${upiId}&pn=${encodeURIComponent(payeeName)}&am=${finalAmount}&cu=INR`;
const container = document.getElementById('qr-container');
container.innerHTML = '';
qrCodeInstance = new QRCode(container, {
text: upiLink,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
document.getElementById('final-amount').textContent = `₹${finalAmount}`;
document.getElementById('scan-text').innerHTML = `Scan to pay <strong>₹${finalAmount}</strong> instantly`;
}
function createConfettiBlast(isSuper = false) {
const count = isSuper ? 200 : 100;
for (let i = 0; i < count; i++) {
setTimeout(() => {
const particle = document.createElement('div');
particle.textContent = ['✨','🎉','💥','⭐','🔥','🌟'][Math.floor(Math.random()*6)];
particle.style.position = 'fixed';
particle.style.left = Math.random() * 100 + 'vw';
particle.style.top = '-40px';
particle.style.fontSize = (isSuper ? 32 : 24) + 'px';
particle.style.zIndex = '9999';
particle.style.pointerEvents = 'none';
document.body.appendChild(particle);
const duration = isSuper ? 3200 : 2400;
particle.animate([
{ transform: 'translateY(0) rotate(0deg)', opacity: 1 },
{ transform: `translateY(${window.innerHeight + 200}px) rotate(${Math.random()*800 - 400}deg)`, opacity: 0 }
], { duration: duration, easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)' });
setTimeout(() => particle.remove(), duration + 300);
}, i * 3);
}
}
function completeOrder() {
const msg = `Hi MithTechX,%0AI selected the ${selectedPlan.tier} plan for ${selectedPlan.service}.%0AFinal Amount: ₹${finalAmount}`;
window.location.href = `https://wa.me/918261039902?text=${msg}`;
}
// Initialize
renderTabs();
renderPricing();
</script>
</body>
</html>