Spaces:
Running
Running
| <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"> | |
| © 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> |