UID/payment.html at main · Shabhareash/UID · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="payment.css">
    <title>Payment Form</title>
</head>
<body>
    <div class="container">
        <form class="payment-form" action="qr.html" method="get">
            <h1>Payment</h1>
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="event-type">Event</label>
                <select name="event-type" id="event" required>
                    <option value="ctf">CTF</option>
                    <option value="hackathon">Hackathon</option>
                    <option value="Coding Competition">Coding Competition</option>
                    <!-- Add more event options here -->
                </select>
            </div>
            <div class="form-group" id="group-size-container">
                <label for="group-size">Group Size</label>
                <input type="number" id="group-size" name="group-size" min="1" max="5" onkeydown="return false">
            </div>
            <div class="form-group">
                <label for="payment">Payment Amount</label>
                <input type="number" id="payment" name="payment" required readonly>
            </div>
            <input type="submit" class="l" id="payButton" value="Pay Now">
        </form>
    </div>
    <script src="payment.js"></script>

    <script>
    <div id="mouse-follower"></div>
        <img src="dot.png" alt="">
        <script src="mouse-animation.js"></script><br>
        <script src="https://www.google.com/recaptcha/api.js"></script>
        document.addEventListener('DOMContentLoaded', () => {
            const eventSelect = document.getElementById('event');
            const groupSizeContainer = document.getElementById('group-size-container');
            const paymentInput = document.getElementById('payment');


            function getQueryParam(name) {
                const urlSearchParams = new URLSearchParams(window.location.search);
                return urlSearchParams.get(name);
            }

            const selectedEvent = getQueryParam('selectedEvent');


            const eventPayments = {
                'ctf': 250,
                'hackathon': 350,
                'Coding Competition': 250,

            };


            eventSelect.value = selectedEvent;

            if (eventPayments.hasOwnProperty(selectedEvent)) {
                paymentInput.value = eventPayments[selectedEvent];
            } else {
                paymentInput.value = 0;
            }


            const groupCompetitions = ['ctf', 'hackathon', 'Coding Competition'];


            if (groupCompetitions.includes(selectedEvent)) {
                groupSizeContainer.style.display = 'block';
            } else {
                groupSizeContainer.style.display = 'none';
            }
        });
    </script>
</body>
</html>