<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Prize Hub - QuizQuest</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"accent-gold": "#FFD700", // Gold
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
'gold-gradient': 'linear-gradient(135deg, #FFD700 0%, #FDB931 100%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</script>
<style type="text/tailwindcss">
:root {
--gold-primary: #FFD700;
}
.text-gold {
color: var(--gold-primary);
}
.bg-gold {
background-color: var(--gold-primary);
}
.border-gold {
border-color: var(--gold-primary);
}
</style>
<style>
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gold-glow {
box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}
.glass-panel {
background: rgba(26, 16, 51, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
</style>
</head>
<body class="bg-background-dark text-text-dark font-sans transition-colors duration-300 antialiased selection:bg-accent-gold selection:text-black min-h-screen flex flex-col">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-background-dark/80 border-b border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-gradient-to-br from-primary to-purple-800 rounded-xl flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">emoji_events</span>
</div>
<span class="font-display font-bold text-xl tracking-tight text-white">Prize<span class="text-accent-gold">Hub</span></span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="text-gray-400 hover:text-white transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Dashboard</a>
<a class="text-accent-gold border-b-2 border-accent-gold px-3 py-2 rounded-t-md text-sm font-medium" href="#">Rewards</a>
<a class="text-gray-400 hover:text-white transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">History</a>
</div>
</div>
<div class="flex items-center gap-4">
<div class="hidden md:flex items-center gap-2 bg-white/5 rounded-full px-4 py-1.5 border border-white/10">
<span class="material-symbols-outlined text-accent-gold text-lg">monetization_on</span>
<span class="font-mono font-bold text-white">2,450 QP</span>
</div>
<div class="w-9 h-9 rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 p-[2px] cursor-pointer">
<img alt="User Avatar" class="w-full h-full rounded-full object-cover border-2 border-background-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXgnPGpdV153pWVZxXBLLYHguIUSan4yxkAtjbP4sIG7-DzbupfVkqigswy1snqWhjz8yE3imrUMg1WD50dYz1RBMb68h3TK9UG-jjBQlbzYwfohxMwypswRa0m30CgTxV2Nc2tTvtbJZOC2BkWk50JysmQydtjx-jbmZ7rRjXCIqxc9ENZC7g3mO6f79hA4A3l1Z2CscWTm7q7n8mig8T_UhISureuMJHieUgXIPFS9FDZHhYplfWdyeZnJkh8vAtUH8K43_cLsI"/>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow pt-28 pb-12 relative overflow-hidden">
<div class="absolute top-20 right-0 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-accent-gold/5 rounded-full blur-[100px] pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-12">
<div>
<h1 class="font-display text-4xl md:text-5xl font-bold text-white mb-2">Claim Your <span class="text-transparent bg-clip-text bg-gold-gradient">Victory</span></h1>
<p class="text-gray-400">Redeem your hard-earned Quest Points for exclusive rewards.</p>
</div>
<div class="bg-gradient-to-r from-[#1A1033] to-[#241245] p-6 rounded-2xl border border-white/10 shadow-2xl gold-glow min-w-[300px] relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-r from-accent-gold/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative z-10">
<div class="text-xs font-bold text-accent-gold uppercase tracking-wider mb-1">Available Balance</div>
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-4xl text-accent-gold">savings</span>
<span class="font-display text-4xl font-bold text-white">2,450</span>
<span class="text-sm font-medium text-gray-400 mt-2">QP</span>
</div>
<div class="w-full bg-white/10 h-1.5 rounded-full mt-4 overflow-hidden">
<div class="bg-accent-gold h-full rounded-full" style="width: 65%"></div>
</div>
<div class="text-[10px] text-gray-500 mt-1 text-right">350 QP to next tier</div>
</div>
</div>
</div>
<div class="flex flex-wrap gap-3 mb-8">
<button class="px-5 py-2 rounded-full bg-white text-background-dark font-bold text-sm shadow-lg shadow-white/10 transition-transform hover:scale-105">All Prizes</button>
<button class="px-5 py-2 rounded-full bg-white/5 text-gray-300 font-medium text-sm hover:bg-white/10 border border-white/5 transition-all">Tech Gadgets</button>
<button class="px-5 py-2 rounded-full bg-white/5 text-gray-300 font-medium text-sm hover:bg-white/10 border border-white/5 transition-all">Gift Vouchers</button>
<button class="px-5 py-2 rounded-full bg-white/5 text-gray-300 font-medium text-sm hover:bg-white/10 border border-white/5 transition-all">Merchandise</button>
<button class="px-5 py-2 rounded-full bg-white/5 text-gray-300 font-medium text-sm hover:bg-white/10 border border-white/5 transition-all">Cash Payouts</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
<div class="glass-panel rounded-2xl p-4 hover:border-accent-gold/50 transition-all duration-300 group hover:-translate-y-1">
<div class="relative h-48 rounded-xl overflow-hidden mb-4 bg-black/40">
<img alt="Smart Watch" class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuClxKiaJn8gASo1dpvtlPNIP3s0tvtfS0WgTJOsYdJyf7jFv0qR0tSoY2zVFmx7sraVGgr1xE6ZC-4CgOfBUdQLjDNo6TWjJ5a3Uqud8Nb8hFXTKOVE-B9Vabyp6-5hUamsS9SMn4CBq57O_XDb_h4jng4HHnJvtV9Sbema5sC-RakSqWMxwksMd71b2wzgteK21tteskuq786_Y1XF_wboiLtyhICMia4s5Tg_8pfbJg2iswUVRFFABiW9wigmv2thEErudyxbBbw"/>
<div class="absolute top-3 left-3 bg-black/60 backdrop-blur-md text-white text-xs font-bold px-2 py-1 rounded-md border border-white/10">Tech</div>
</div>
<h3 class="text-xl font-bold text-white mb-1">Apple Watch Series 9</h3>
<p class="text-sm text-gray-400 mb-4 line-clamp-2">Stay connected and healthy with the latest tech on your wrist.</p>
<div class="flex items-center justify-between mt-auto">
<div class="flex items-center gap-1.5 text-accent-gold">
<span class="material-symbols-outlined text-lg">monetization_on</span>
<span class="font-bold text-lg">2,000</span>
</div>
<button class="bg-white text-background-dark font-bold px-4 py-2 rounded-lg text-sm hover:bg-accent-gold transition-colors shadow-lg shadow-white/5">
Claim Now
</button>
</div>
</div>
<div class="glass-panel rounded-2xl p-4 hover:border-accent-gold/50 transition-all duration-300 group hover:-translate-y-1">
<div class="relative h-48 rounded-xl overflow-hidden mb-4 bg-black/40">
<img alt="Headphones" class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAviTGA8TXX4EOYsmKM_aRHvCKOV-XWZk6uxJL8wLM5eyojkSldpF_-jodN63ezHuredUvpsyO_jOm1jINUx_FvmNmxXQc_TlF7KGtlWnD1XMAsVPWEBIG4IBN99t8UK_Vt13Ly3gqd-aNo82gDVz89QgOJYnuoSrXbEF-ObyclXIvELr-Zhmfr2Qgx8yvJGEA-nRezBL5E8PRXToK4YxyHMgoQmqr5aysJSrQthuVB8ltY7AbpI4HqWme4OUNlhfVoZOqFZGEajyg"/>
<div class="absolute top-3 left-3 bg-black/60 backdrop-blur-md text-white text-xs font-bold px-2 py-1 rounded-md border border-white/10">Tech</div>
</div>
<h3 class="text-xl font-bold text-white mb-1">Sony WH-1000XM5</h3>
<p class="text-sm text-gray-400 mb-4 line-clamp-2">Industry-leading noise canceling headphones for pure focus.</p>
<div class="flex items-center justify-between mt-auto">
<div class="flex items-center gap-1.5 text-accent-gold">
<span class="material-symbols-outlined text-lg">monetization_on</span>
<span class="font-bold text-lg">1,800</span>
</div>
<button class="bg-white text-background-dark font-bold px-4 py-2 rounded-lg text-sm hover:bg-accent-gold transition-colors shadow-lg shadow-white/5">
Claim Now
</button>
</div>
</div>
<div class="glass-panel rounded-2xl p-4 hover:border-accent-gold/50 transition-all duration-300 group hover:-translate-y-1">
<div class="relative h-48 rounded-xl overflow-hidden mb-4 bg-gradient-to-br from-orange-600 to-red-600 flex items-center justify-center">
<span class="material-symbols-outlined text-6xl text-white/80">shopping_bag</span>
<div class="absolute top-3 left-3 bg-black/60 backdrop-blur-md text-white text-xs font-bold px-2 py-1 rounded-md border border-white/10">Voucher</div>
</div>
<h3 class="text-xl font-bold text-white mb-1">Amazon Gift Card ₹5000</h3>
<p class="text-sm text-gray-400 mb-4 line-clamp-2">Shop for anything you desire on Amazon with this voucher.</p>
<div class="flex items-center justify-between mt-auto">
<div class="flex items-center gap-1.5 text-accent-gold">
<span class="material-symbols-outlined text-lg">monetization_on</span>
<span class="font-bold text-lg">1,500</span>
</div>
<button class="bg-white text-background-dark font-bold px-4 py-2 rounded-lg text-sm hover:bg-accent-gold transition-colors shadow-lg shadow-white/5">
Claim Now
</button>
</div>
</div>
<div class="glass-panel rounded-2xl p-4 border-white/5 opacity-75 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
<div class="relative h-48 rounded-xl overflow-hidden mb-4 bg-black/40">
<div class="absolute inset-0 bg-black/60 z-10 flex items-center justify-center flex-col gap-2">
<span class="material-symbols-outlined text-gray-400 text-3xl">lock</span>
<span class="text-xs font-bold text-gray-400 uppercase tracking-widest">Insufficient Points</span>
</div>
<img alt="Gaming PC" class="w-full h-full object-cover opacity-50" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDWe8u6GedEhwVLAoqjLg75BcmO7RCCUB8cOtAkjKvZnzkBGepPPT8JGPaHRuB0_NaXi-JWnLkCqWC8F796TPRijlte3VAjoOCxCj743oKms4S5FJQA-yfU0h84utuaPHpHZ9aIdwD_T6l-VGPrdqY8LT6RvN0Dy8QlB0S_cRDl5GysuyiWXJM80OlEzJo3CmPzhbyTStOtHKlmnmCpt5PyGy9bCK6vlW_qlPIYEpNhqJIC2Uv39-Q_3b8faTJndcQZ3NYHsjRbdKo"/>
<div class="absolute top-3 left-3 bg-black/60 backdrop-blur-md text-white text-xs font-bold px-2 py-1 rounded-md border border-white/10 z-20">Tech</div>
</div>
<h3 class="text-xl font-bold text-gray-300 mb-1">Alienware Gaming PC</h3>
<p class="text-sm text-gray-500 mb-4 line-clamp-2">Ultimate performance desktop for serious gamers.</p>
<div class="flex items-center justify-between mt-auto">
<div class="flex items-center gap-1.5 text-gray-500">
<span class="material-symbols-outlined text-lg">monetization_on</span>
<span class="font-bold text-lg">15,000</span>
</div>
<button class="bg-white/5 text-gray-500 font-bold px-4 py-2 rounded-lg text-sm border border-white/5 cursor-not-allowed">
Locked
</button>
</div>
</div>
<div class="glass-panel rounded-2xl p-4 hover:border-accent-gold/50 transition-all duration-300 group hover:-translate-y-1">
<div class="relative h-48 rounded-xl overflow-hidden mb-4 bg-gradient-to-br from-green-600 to-teal-800 flex items-center justify-center">
<span class="material-symbols-outlined text-6xl text-white/80">payments</span>
<div class="absolute top-3 left-3 bg-black/60 backdrop-blur-md text-white text-xs font-bold px-2 py-1 rounded-md border border-white/10">Cash</div>
</div>
<h3 class="text-xl font-bold text-white mb-1">₹2,000 Cash Transfer</h3>
<p class="text-sm text-gray-400 mb-4 line-clamp-2">Direct bank transfer or UPI payment within 24 hours.</p>
<div class="flex items-center justify-between mt-auto">
<div class="flex items-center gap-1.5 text-accent-gold">
<span class="material-symbols-outlined text-lg">monetization_on</span>
<span class="font-bold text-lg">600</span>
</div>
<button class="bg-white text-background-dark font-bold px-4 py-2 rounded-lg text-sm hover:bg-accent-gold transition-colors shadow-lg shadow-white/5">
Claim Now
</button>
</div>
</div>
<div class="glass-panel rounded-2xl p-4 hover:border-accent-gold/50 transition-all duration-300 group hover:-translate-y-1">
<div class="relative h-48 rounded-xl overflow-hidden mb-4 bg-black/40">
<img alt="Hoodie" class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDzJgCjaT9z-GGnlxbg-g035lTFa3ANsL-mHQzoc1Qz0UwoySqGPbymcuCyafzringeB48VPl33oc6wGFC8d4Lw5ve4tmmwGqkhnOdil_OCjAhCKJIWaolWOXy6ns2wuI-IXOJ5GxvqvOV0nK1lwfGUXnhs4v_LYDraZ4JJxERN6E7Td4p9AkRJswYo9VRTt8QMqsVfNschNDFrqFE7zFyxabGP7mR-gHpUbMiWC4hbxWPwnqLLhyzQ5PnXQsCXzwvSdqjp5_bcApI"/>
<div class="absolute top-3 left-3 bg-black/60 backdrop-blur-md text-white text-xs font-bold px-2 py-1 rounded-md border border-white/10">Merch</div>
</div>
<h3 class="text-xl font-bold text-white mb-1">Pro Gamer Hoodie</h3>
<p class="text-sm text-gray-400 mb-4 line-clamp-2">Limited edition QuizQuest hoodie with gold embroidery.</p>
<div class="flex items-center justify-between mt-auto">
<div class="flex items-center gap-1.5 text-accent-gold">
<span class="material-symbols-outlined text-lg">monetization_on</span>
<span class="font-bold text-lg">800</span>
</div>
<button class="bg-white text-background-dark font-bold px-4 py-2 rounded-lg text-sm hover:bg-accent-gold transition-colors shadow-lg shadow-white/5">
Claim Now
</button>
</div>
</div>
</div>
<div class="mb-12">
<div class="flex items-center justify-between mb-6">
<h2 class="font-display text-2xl font-bold text-white">Recent Claims</h2>
<a class="text-sm text-accent-gold hover:text-white transition-colors" href="#">View All History</a>
</div>
<div class="glass-panel rounded-2xl overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left text-sm text-gray-400">
<thead class="bg-white/5 text-gray-200 uppercase font-medium text-xs">
<tr>
<th class="px-6 py-4" scope="col">Item</th>
<th class="px-6 py-4" scope="col">Date</th>
<th class="px-6 py-4" scope="col">Cost</th>
<th class="px-6 py-4" scope="col">Status</th>
<th class="px-6 py-4 text-right" scope="col">Action</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5">
<tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4 font-medium text-white flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
<span class="material-symbols-outlined text-gray-300">headphones</span>
</div>
Razer BlackShark V2
</td>
<td class="px-6 py-4">Oct 24, 2023</td>
<td class="px-6 py-4 text-accent-gold font-bold">1,200 QP</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-400"></span>
Delivered
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-gray-400 hover:text-white transition-colors">Details</button>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4 font-medium text-white flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
<span class="material-symbols-outlined text-gray-300">shopping_bag</span>
</div>
Amazon Gift Card ₹1000
</td>
<td class="px-6 py-4">Oct 20, 2023</td>
<td class="px-6 py-4 text-accent-gold font-bold">300 QP</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span>
Shipped
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-gray-400 hover:text-white transition-colors">Details</button>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4 font-medium text-white flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
<span class="material-symbols-outlined text-gray-300">payments</span>
</div>
Cash Payout ₹500
</td>
<td class="px-6 py-4">Oct 15, 2023</td>
<td class="px-6 py-4 text-accent-gold font-bold">150 QP</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-yellow-400"></span>
Processing
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-gray-400 hover:text-white transition-colors">Details</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-black/40 border-t border-white/5 py-8 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-gray-500">
<span class="material-symbols-outlined">emoji_events</span>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex items-center gap-8">
<a class="text-sm text-gray-500 hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-gray-500 hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-gray-500 hover:text-white transition-colors" href="#">Help Center</a>
</div>
</div>
</footer>
<div class="fixed inset-0 z-[100] hidden" id="claimModal">
<div class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md">
<div class="bg-[#1A1033] border border-white/10 rounded-2xl shadow-2xl p-8 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary via-purple-500 to-primary"></div>
<button class="absolute top-4 right-4 text-gray-400 hover:text-white">
<span class="material-symbols-outlined">close</span>
</button>
<h3 class="text-2xl font-bold text-white mb-2">Claim Reward</h3>
<p class="text-sm text-gray-400 mb-6">Confirm shipping details for <span class="text-white font-semibold">Sony WH-1000XM5</span></p>
<form class="space-y-4">
<div>
<label class="block text-xs font-medium text-gray-400 mb-1 uppercase">Shipping Address</label>
<textarea class="w-full bg-black/20 border border-white/10 rounded-lg p-3 text-white focus:ring-1 focus:ring-accent-gold focus:border-accent-gold outline-none resize-none h-24" placeholder="Enter your full address"></textarea>
</div>
<div class="flex items-center justify-between bg-accent-gold/5 p-3 rounded-lg border border-accent-gold/10">
<span class="text-sm text-gray-300">Cost</span>
<span class="font-bold text-accent-gold">1,800 QP</span>
</div>
<button class="w-full bg-gradient-to-r from-primary to-purple-600 hover:from-primary-hover hover:to-purple-700 text-white font-bold py-3 rounded-xl shadow-lg shadow-primary/25 transition-all transform hover:scale-[1.02]" type="button">
Confirm & Claim
</button>
</form>
</div>
</div>
</div>
</body></html>