Space95Internship/index.html at main · AnonymousGhost-SC/Space95Internship · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gym Membership Management</title>
    <style>
        /* Basic resets to ensure consistent styling */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        /* Centering everything in the middle of the screen */
        body {
            background: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        /* Styling for the main container */
        .container {
            width: 90%;
            max-width: 600px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        /* Center the title and give it a nice color */
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 15px;
        }

        /* Make labels bold for better visibility */
        label {
            font-weight: bold;
            margin-top: 10px;
            display: block;
        }

        /* Style for input fields and dropdowns */
        input, select {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        /* Styling the submit button */
        button {
            width: 100%;
            padding: 12px;
            background: blue;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }

        /* Button hover effect for better user experience */
        button:hover {
            background: darkblue;
        }

        /* Success message styling */
        .success-message {
            color: green;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- Member Registration Form -->
        <h2>Gym Member Registration</h2>
        <form id="registerForm">
            <label>Full Name</label>
            <input type="text" id="name" required>

            <label>Email</label>
            <input type="email" id="email" required>

            <label>Phone</label>
            <input type="text" id="phone" required>

            <label>Start Date</label>
            <input type="date" id="start_date" required>

            <label>Expiry Date</label>
            <input type="date" id="expiry_date" required>

            <button type="submit">Register</button>
        </form>

        <!-- Payment Form -->
        <h2>Make a Payment</h2>
        <form id="paymentForm">
            <label>Member ID</label>
            <input type="number" id="member_id" required>

            <label>Amount (₹)</label>
            <input type="number" id="amount" required>

            <label>Payment Date</label>
            <input type="date" id="payment_date" required>

            <label>Payment Method</label>
            <select id="payment_method">
                <option value="Cash">Cash</option>
                <option value="Card">Card</option>
                <option value="Online">Online</option>
            </select>

            <button type="submit">Submit Payment</button>
        </form>

        <!-- Success message appears here after an action is completed -->
        <p class="success-message" id="successMessage"></p>
    </div>

    <script>
        // Base URL of the backend API - make sure it matches your backend
        const API_URL = "http://localhost:5000";

        // Handle Member Registration Form Submission
        document.getElementById("registerForm").addEventListener("submit", async function(event) {
            event.preventDefault(); // Prevents the page from reloading on submit

            // Collect form data
            const data = {
                full_name: document.getElementById("name").value,
                email: document.getElementById("email").value,
                phone: document.getElementById("phone").value,
                start_date: document.getElementById("start_date").value,
                expiry_date: document.getElementById("expiry_date").value
            };

            try {
                // Send a POST request to register the member
                const response = await fetch(`${API_URL}/members`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(data)
                });

                const result = await response.json();
                if (response.ok) {
                    // Show success message and clear form fields
                    document.getElementById("successMessage").innerText = "Member registered successfully!";
                    document.getElementById("registerForm").reset();
                } else {
                    alert("Error: " + result.error);
                }
            } catch (error) {
                alert("Failed to connect to server.");
            }
        });

        // Handle Payment Form Submission
        document.getElementById("paymentForm").addEventListener("submit", async function(event) {
            event.preventDefault(); // Prevent page refresh

            // Collect payment form data
            const data = {
                member_id: document.getElementById("member_id").value,
                amount: document.getElementById("amount").value,
                payment_date: document.getElementById("payment_date").value,
                payment_method: document.getElementById("payment_method").value
            };

            try {
                // Send a POST request to register the payment
                const response = await fetch(`${API_URL}/payments`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(data)
                });

                const result = await response.json();
                if (response.ok) {
                    // Show success message and clear the form
                    document.getElementById("successMessage").innerText = "Payment recorded successfully!";
                    document.getElementById("paymentForm").reset();
                } else {
                    alert("Error: " + result.error);
                }
            } catch (error) {
                alert("Failed to connect to server.");
            }
        });
     </script>

    <!-- Linking an external script file in case you want to add more functionality later -->
    <script src="script.js"></script>

</body>
</html>