Spaces:

junaidshah
/

registeration

Running

App Files Files Community

junaidshah commited on Apr 10, 2025

Commit

45a0da3

verified ·

1 Parent(s): e048c58

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +669 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Registeration
-emoji: 👁
-colorFrom: red
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: registeration
+emoji: 🐳
+colorFrom: green
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,669 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PowerGrip - Arm Wrestling Championship</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;700&display=swap');
+        body {
+            font-family: 'Oswald', sans-serif;
+            background-color: #0f0f0f;
+            color: white;
+        }
+        .hero-bg {
+            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1607962837359-5e7e89f86776?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
+            background-size: cover;
+            background-position: center;
+        }
+        .title-font {
+            font-family: 'Bebas Neue', sans-serif;
+            letter-spacing: 2px;
+        }
+        .countdown-box {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .arm-animation {
+            animation: armPump 2s infinite alternate;
+        }
+        @keyframes armPump {
+            0% { transform: rotate(-5deg); }
+            100% { transform: rotate(5deg); }
+        }
+        .btn-gold {
+            background: linear-gradient(45deg, #D4AF37, #F9D423);
+            color: #000;
+            font-weight: bold;
+            transition: all 0.3s;
+        }
+        .btn-gold:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
+        }
+        /* Payment Modal */
+        .payment-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .payment-container {
+            background: linear-gradient(135deg, #1e1e1e, #2d2d2d);
+            border-radius: 15px;
+            width: 90%;
+            max-width: 500px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        }
+        .payment-header {
+            background-color: #0f0f0f;
+            padding: 20px;
+            text-align: center;
+            border-bottom: 2px solid #D4AF37;
+        }
+        .payment-body {
+            padding: 30px;
+        }
+        .payment-option {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            margin-bottom: 15px;
+            background-color: #2d2d2d;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s;
+            border: 1px solid transparent;
+        }
+        .payment-option:hover {
+            border-color: #D4AF37;
+            transform: translateY(-3px);
+        }
+        .payment-option.selected {
+            border-color: #D4AF37;
+            background-color: rgba(212, 175, 55, 0.1);
+        }
+        .payment-option i {
+            font-size: 30px;
+            margin-right: 15px;
+            color: #D4AF37;
+        }
+        .payment-form {
+            display: none;
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .paytm-logo {
+            background-color: #20336b;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-weight: bold;
+            display: inline-flex;
+            align-items: center;
+        }
+        .success-animation {
+            display: none;
+            text-align: center;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        .success-animation i {
+            font-size: 80px;
+            color: #4BB543;
+            margin-bottom: 20px;
+        }
+        /* Registration Steps */
+        .registration-step {
+            display: none;
+        }
+        .registration-step.active {
+            display: block;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        .step-indicator {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 30px;
+        }
+        .step {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #2d2d2d;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 10px;
+            position: relative;
+            border: 2px solid transparent;
+        }
+        .step.active {
+            background-color: #D4AF37;
+            color: black;
+            border-color: #D4AF37;
+        }
+        .step.completed {
+            background-color: #4BB543;
+            color: white;
+            border-color: #4BB543;
+        }
+        .step-line {
+            height: 2px;
+            background-color: #2d2d2d;
+            flex-grow: 1;
+            margin-top: 20px;
+        }
+        .step-line.active {
+            background-color: #D4AF37;
+        }
+        .step-line.completed {
+            background-color: #4BB543;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="bg-black py-4 px-6 sticky top-0 z-50 border-b border-gray-800">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-hand-fist text-3xl text-yellow-500 mr-2"></i>
+                <span class="title-font text-3xl text-white">POWER<span class="text-yellow-500">GRIP</span></span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
+                <a href="index.html#about" class="text-white hover:text-yellow-500 transition">About</a>
+                <a href="index.html#events" class="text-white hover:text-yellow-500 transition">Events</a>
+                <a href="index.html#athletes" class="text-white hover:text-yellow-500 transition">Athletes</a>
+                <a href="register.html" class="text-yellow-500 font-bold">Register</a>
+            </div>
+            <button class="md:hidden text-white">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Registration Section -->
+    <section class="min-h-screen py-20 bg-gray-900">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto bg-black rounded-xl overflow-hidden shadow-2xl">
+                <div class="p-8">
+                    <h1 class="title-font text-4xl md:text-5xl mb-6 text-white text-center">
+                        CHAMPIONSHIP <span class="text-yellow-500">REGISTRATION</span>
+                    </h1>
+                    <!-- Step Indicator -->
+                    <div class="step-indicator">
+                        <div class="step active" id="step1">1</div>
+                        <div class="step-line" id="line1-2"></div>
+                        <div class="step" id="step2">2</div>
+                        <div class="step-line" id="line2-3"></div>
+                        <div class="step" id="step3">3</div>
+                    </div>
+                    <!-- Step 1: Personal Information -->
+                    <div class="registration-step active" id="step1-content">
+                        <h2 class="text-2xl font-bold mb-6 text-white">Personal Information</h2>
+                        <form id="personalInfoForm">
+                            <div class="grid md:grid-cols-2 gap-6">
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="firstName">First Name</label>
+                                    <input type="text" id="firstName" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                </div>
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="lastName">Last Name</label>
+                                    <input type="text" id="lastName" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                </div>
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="email">Email</label>
+                                    <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                </div>
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="phone">Phone Number</label>
+                                    <input type="tel" id="phone" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                </div>
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="dob">Date of Birth</label>
+                                    <input type="date" id="dob" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                </div>
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="gender">Gender</label>
+                                    <select id="gender" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                        <option value="">Select Gender</option>
+                                        <option value="male">Male</option>
+                                        <option value="female">Female</option>
+                                        <option value="other">Other</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mt-8 flex justify-end">
+                                <button type="button" onclick="nextStep(1)" class="btn-gold py-3 px-8 rounded-full text-lg font-bold">
+                                    NEXT <i class="fas fa-arrow-right ml-2"></i>
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                    <!-- Step 2: Competition Details -->
+                    <div class="registration-step" id="step2-content">
+                        <h2 class="text-2xl font-bold mb-6 text-white">Competition Details</h2>
+                        <form id="competitionForm">
+                            <div class="grid md:grid-cols-2 gap-6">
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="event">Event</label>
+                                    <select id="event" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                        <option value="">Select Event</option>
+                                        <option value="national">National Championship (July 15)</option>
+                                        <option value="world">World Championship (Sep 22)</option>
+                                        <option value="womens">Women's Championship (Nov 5)</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="weight">Weight Class</label>
+                                    <select id="weight" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                        <option value="">Select Weight Class</option>
+                                        <option value="light">Lightweight (Under 70kg)</option>
+                                        <option value="middle">Middleweight (70-85kg)</option>
+                                        <option value="heavy">Heavyweight (85-100kg)</option>
+                                        <option value="super">Super Heavyweight (100kg+)</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="experience">Experience Level</label>
+                                    <select id="experience" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                        <option value="">Select Experience Level</option>
+                                        <option value="beginner">Beginner (0-1 years)</option>
+                                        <option value="intermediate">Intermediate (1-3 years)</option>
+                                        <option value="advanced">Advanced (3+ years)</option>
+                                        <option value="pro">Professional</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="block text-gray-400 mb-2" for="country">Country</label>
+                                    <select id="country" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" required>
+                                        <option value="">Select Country</option>
+                                        <option value="usa">United States</option>
+                                        <option value="uk">United Kingdom</option>
+                                        <option value="canada">Canada</option>
+                                        <option value="india">India</option>
+                                        <option value="russia">Russia</option>
+                                        <option value="china">China</option>
+                                        <option value="other">Other</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mt-8 flex justify-between">
+                                <button type="button" onclick="prevStep(2)" class="bg-transparent border-2 border-yellow-500 py-3 px-8 rounded-full text-lg font-bold text-yellow-500 hover:bg-yellow-500 hover:text-black transition">
+                                    <i class="fas fa-arrow-left mr-2"></i> BACK
+                                </button>
+                                <button type="button" onclick="nextStep(2)" class="btn-gold py-3 px-8 rounded-full text-lg font-bold">
+                                    NEXT <i class="fas fa-arrow-right ml-2"></i>
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                    <!-- Step 3: Payment -->
+                    <div class="registration-step" id="step3-content">
+                        <h2 class="text-2xl font-bold mb-6 text-white">Payment Details</h2>
+                        <div class="bg-gray-800 rounded-lg p-6 mb-6">
+                            <h3 class="text-xl font-bold mb-4 text-white">Registration Summary</h3>
+                            <div class="grid grid-cols-2 gap-4 mb-4">
+                                <div>
+                                    <p class="text-gray-400">Name:</p>
+                                    <p class="text-white" id="summary-name">-</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400">Event:</p>
+                                    <p class="text-white" id="summary-event">-</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400">Weight Class:</p>
+                                    <p class="text-white" id="summary-weight">-</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400">Experience:</p>
+                                    <p class="text-white" id="summary-experience">-</p>
+                                </div>
+                            </div>
+                            <div class="border-t border-gray-700 pt-4">
+                                <div class="flex justify-between">
+                                    <p class="text-gray-400">Registration Fee:</p>
+                                    <p class="text-white">$99.00</p>
+                                </div>
+                                <div class="flex justify-between mt-2">
+                                    <p class="text-gray-400">Processing Fee:</p>
+                                    <p class="text-white">$5.00</p>
+                                </div>
+                                <div class="flex justify-between mt-4 pt-2 border-t border-gray-700">
+                                    <p class="text-lg font-bold text-white">Total:</p>
+                                    <p class="text-lg font-bold text-yellow-500">$104.00</p>
+                                </div>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-bold mb-4 text-white">Select Payment Method</h3>
+                        <div class="grid md:grid-cols-2 gap-4 mb-6">
+                            <div class="payment-option" onclick="selectPayment('paytm')">
+                                <i class="fas fa-mobile-alt"></i>
+                                <div>
+                                    <h4 class="font-bold text-white">PayTM</h4>
+                                    <p class="text-sm text-gray-400">Fast and secure payments</p>
+                                </div>
+                            </div>
+                            <div class="payment-option" onclick="selectPayment('card')">
+                                <i class="far fa-credit-card"></i>
+                                <div>
+                                    <h4 class="font-bold text-white">Credit/Debit Card</h4>
+                                    <p class="text-sm text-gray-400">Visa, Mastercard, etc.</p>
+                                </div>
+                            </div>
+                            <div class="payment-option" onclick="selectPayment('bank')">
+                                <i class="fas fa-university"></i>
+                                <div>
+                                    <h4 class="font-bold text-white">Bank Transfer</h4>
+                                    <p class="text-sm text-gray-400">Direct bank payment</p>
+                                </div>
+                            </div>
+                            <div class="payment-option" onclick="selectPayment('upi')">
+                                <i class="fas fa-qrcode"></i>
+                                <div>
+                                    <h4 class="font-bold text-white">UPI Payment</h4>
+                                    <p class="text-sm text-gray-400">For Indian users</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-8 flex justify-between">
+                            <button type="button" onclick="prevStep(3)" class="bg-transparent border-2 border-yellow-500 py-3 px-8 rounded-full text-lg font-bold text-yellow-500 hover:bg-yellow-500 hover:text-black transition">
+                                <i class="fas fa-arrow-left mr-2"></i> BACK
+                            </button>
+                            <button type="button" onclick="showPaymentModal()" class="btn-gold py-3 px-8 rounded-full text-lg font-bold">
+                                PROCEED TO PAYMENT
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Payment Modal -->
+    <div class="payment-modal" id="paymentModal">
+        <div class="payment-container">
+            <div class="payment-header">
+                <h2 class="title-font text-2xl text-white">PAYMENT <span class="text-yellow-500">GATEWAY</span></h2>
+            </div>
+            <div class="payment-body">
+                <!-- PayTM Payment Form -->
+                <div class="payment-form" id="paytmForm">
+                    <div class="flex justify-center mb-6">
+                        <div class="paytm-logo">
+                            <i class="fas fa-mobile-alt mr-2"></i> PAYTM
+                        </div>
+                    </div>
+                    <div class="mb-6">
+                        <label class="block text-gray-400 mb-2" for="paytmMobile">PayTM Mobile Number</label>
+                        <input type="tel" id="paytmMobile" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" placeholder="Enter 10-digit mobile number">
+                    </div>
+                    <div class="mb-6">
+                        <label class="block text-gray-400 mb-2" for="paytmUPI">UPI ID (Optional)</label>
+                        <input type="text" id="paytmUPI" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-yellow-500" placeholder="username@upi">
+                    </div>
+                    <div class="flex justify-between items-center mb-6">
+                        <div>
+                            <p class="text-gray-400">Amount to Pay:</p>
+                            <p class="text-xl font-bold text-yellow-500">₹7,800.00</p>
+                        </div>
+                        <button onclick="processPayment()" class="btn-gold py-2 px-6 rounded-lg font-bold">
+                            PAY NOW
+                        </button>
+                    </div>
+                    <p class="text-xs text-gray-500 text-center">
+                        By continuing, you agree to PayTM's <a href="#" class="text-yellow-500">Terms of Service</a> and <a href="#" class="text-yellow-500">Privacy Policy</a>
+                    </p>
+                </div>
+                <!-- Success Animation -->
+                <div class="success-animation" id="successAnimation">
+                    <i class="fas fa-check-circle"></i>
+                    <h3 class="text-2xl font-bold text-white mb-2">Payment Successful!</h3>
+                    <p class="text-gray-400 mb-6">Your registration for PowerGrip Championship is confirmed.</p>
+                    <div class="bg-gray-800 rounded-lg p-4 mb-6">
+                        <p class="text-gray-400">Transaction ID:</p>
+                        <p class="text-white font-mono">PAYTM2023XYZ123456</p>
+                    </div>
+                    <a href="index.html" class="btn-gold py-3 px-8 rounded-full text-lg font-bold inline-block">
+                        RETURN TO HOME
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="bg-black py-12 border-t border-gray-800">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between">
+                <div class="mb-8 md:mb-0">
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-hand-fist text-3xl text-yellow-500 mr-2"></i>
+                        <span class="title-font text-3xl text-white">POWER<span class="text-yellow-500">GRIP</span></span>
+                    </div>
+                    <p class="text-gray-400 max-w-md">
+                        The world's premier arm wrestling organization bringing together the strongest competitors from around the globe.
+                    </p>
+                </div>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
+                    <div>
+                        <h3 class="text-white font-bold mb-4">COMPETITION</h3>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Rules</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Weight Classes</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Judging Criteria</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Equipment</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h3 class="text-white font-bold mb-4">ABOUT</h3>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">History</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Organization</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Partners</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h3 class="text-white font-bold mb-4">FOLLOW US</h3>
+                        <div class="flex space-x-4">
+                            <a href="#" class="text-gray-400 hover:text-yellow-500 transition text-xl"><i class="fab fa-facebook"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-yellow-500 transition text-xl"><i class="fab fa-instagram"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-yellow-500 transition text-xl"><i class="fab fa-twitter"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-yellow-500 transition text-xl"><i class="fab fa-youtube"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 mb-4 md:mb-0">
+                    &copy; 2023 PowerGrip Arm Wrestling Championship. All rights reserved.
+                </p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
+                    <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Registration Steps
+        function nextStep(currentStep) {
+            // Validate current step before proceeding
+            if (currentStep === 1) {
+                const form = document.getElementById('personalInfoForm');
+                if (!form.checkValidity()) {
+                    form.reportValidity();
+                    return;
+                }
+            } else if (currentStep === 2) {
+                const form = document.getElementById('competitionForm');
+                if (!form.checkValidity()) {
+                    form.reportValidity();
+                    return;
+                }
+            }
+            // Hide current step
+            document.getElementById(`step${currentStep}-content`).classList.remove('active');
+            document.getElementById(`step${currentStep}`).classList.remove('active');
+            // Show next step
+            document.getElementById(`step${currentStep+1}-content`).classList.add('active');
+            document.getElementById(`step${currentStep+1}`).classList.add('active');
+            // Update step line
+            document.getElementById(`line${currentStep}-${currentStep+1}`).classList.add('active');
+            // Update summary if we're on the payment step
+            if (currentStep === 2) {
+                updateSummary();
+            }
+        }
+        function prevStep(currentStep) {
+            // Hide current step
+            document.getElementById(`step${currentStep}-content`).classList.remove('active');
+            document.getElementById(`step${currentStep}`).classList.remove('active');
+            // Show previous step
+            document.getElementById(`step${currentStep-1}-content`).classList.add('active');
+            document.getElementById(`step${currentStep-1}`).classList.add('active');
+            // Update step line
+            document.getElementById(`line${currentStep-1}-${currentStep}`).classList.remove('active');
+        }
+        function updateSummary() {
+            document.getElementById('summary-name').textContent =
+                `${document.getElementById('firstName').value} ${document.getElementById('lastName').value}`;
+            const eventSelect = document.getElementById('event');
+            document.getElementById('summary-event').textContent =
+                eventSelect.options[eventSelect.selectedIndex].text;
+            const weightSelect = document.getElementById('weight');
+            document.getElementById('summary-weight').textContent =
+                weightSelect.options[weightSelect.selectedIndex].text;
+            const experienceSelect = document.getElementById('experience');
+            document.getElementById('summary-experience').textContent =
+                experienceSelect.options[experienceSelect.selectedIndex].text;
+        }
+        // Payment Methods
+        let selectedPayment = '';
+        function selectPayment(method) {
+            selectedPayment = method;
+            // Remove selected class from all options
+            document.querySelectorAll('.payment-option').forEach(option => {
+                option.classList.remove('selected');
+            });
+            // Add selected class to clicked option
+            event.currentTarget.classList.add('selected');
+        }
+        function showPaymentModal() {
+            if (!selectedPayment) {
+                alert('Please select a payment method');
+                return;
+            }
+            document.getElementById('paymentModal').style.display = 'flex';
+            document.getElementById(`${selectedPayment}Form`).style.display = 'block';
+        }
+        function closePaymentModal() {
+            document.getElementById('paymentModal').style.display = 'none';
+            document.querySelectorAll('.payment-form').forEach(form => {
+                form.style.display = 'none';
+            });
+            document.getElementById('successAnimation').style.display = 'none';
+        }
+        function processPayment() {
+            const mobile = document.getElementById('paytmMobile').value;
+            if (!mobile || mobile.length !== 10) {
+                alert('Please enter a valid 10-digit mobile number');
+                return;
+            }
+            // Hide payment form
+            document.getElementById(`${selectedPayment}Form`).style.display = 'none';
+            // Show success animation
+            document.getElementById('successAnimation').style.display = 'block';
+            // After 5 seconds, close modal and redirect
+            setTimeout(() => {
+                closePaymentModal();
+                window.location.href = 'index.html';
+            }, 5000);
+        }
+        // Close modal when clicking outside
+        window.onclick = function(event) {
+            if (event.target === document.getElementById('paymentModal')) {
+                closePaymentModal();
+            }
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=junaidshah/registeration" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>