-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
235 lines (223 loc) · 12.5 KB
/
home.html
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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags for character set and viewport -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link rel="icon" href="images/logo.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="./css/homestyle.css">
<!-- JavaScript for displaying error message -->
<script>
window.onload = function() {
// Function to get query parameters from URL
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Get the error message from URL and display it
var errorMessage = getParameterByName('error_message');
if (errorMessage) {
var errorElement = document.getElementById('error');
errorElement.innerText = errorMessage;
errorElement.style.color = 'white';
errorElement.style.fontSize = '20px';
errorElement.style.backgroundColor = 'rgba(255, 0, 0, 0.800)';
errorElement.style.margin = '10px';
errorElement.style.padding = '0.1em 1em 0.1em 1em';
errorElement.style.height = '20px'; // Adjust the height as needed
errorElement.style.width = '100px'; // Adjust the width as needed
errorElement.style.boxShadow = '0.1em 0.1em 0.2em 0.2em rgba(0, 0, 0, 1)'; // Adjust shadow values as needed
// Add transition
errorElement.style.transition = 'height 0.5s, opacity 0.5s';
// Set timeout to collapse the error message after 5 seconds
setTimeout(function() {
errorElement.style.height = '0';
errorElement.style.opacity = '0';
setTimeout(function() {
errorElement.style.display = 'none';
}, 500); // Hide the element after transition
}, 2000); // 5 seconds timeout
}
}
</script>
</head>
<body>
<!-- Navbar -->
<div class="container-fluid">
<!-- Bootstrap Navbar -->
<nav class="navbar">
<div class="container-fluid" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <span id="brnd"> JNTUACEK</span> </a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="modal" data-target="#myModal"><a href="#"><span class="glyphicon glyphicon-user"></span> Student Login</a></li>
<li data-toggle="modal" data-target="#myModal2"><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Admin Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Modals for Student and Admin Login -->
<div class="container-fluid">
<!-- Student Login Modal -->
<div class="row">
<div class="col-lg-4">
<!-- Modal for Student Login -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<!-- Close button for the modal -->
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- Title for the student login modal -->
<h4 class="modal-title text-center">Student Login</h4>
</div>
<div class="modal-body">
<!-- Form for student login -->
<form action="./php/student_login.php" method="post" id="mystudlogin">
<!-- Input fields for admission number and phone number -->
<div class="row form-group">
<!-- Label and input for Admission Number -->
<div class="col-lg-1"></div>
<div class="col-lg-2 text-right">
<label for="admissionNumber">Admission No:</label>
</div>
<div class="col-lg-8">
<!-- Input field for Admission Number -->
<input class="form-control" type="text" id="admissionNumber" name="admissionNumber" placeholder="Enter Admission No" required>
</div>
<div class="col-lg-1"></div>
</div>
<!-- Input fields for Phone Number -->
<div class="row form-group">
<div class="col-lg-1"></div>
<div class="col-lg-2 text-right">
<label for="phoneNumber">Phone No :</label>
</div>
<div class="col-lg-8">
<!-- Input field for Phone Number -->
<input class="form-control" id="phoneNumber" type="text" name="phoneNumber" placeholder="Enter Phone No" required>
</div>
<div class="col-lg-1"></div>
</div>
<!-- Button to submit the student login form -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<!-- Login button for student -->
<button type="submit" class="btn btn-success btn-block">Login</button>
</div>
<div class="col-lg-4"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Admin Login Modal -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<!-- Modal for Admin Login -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<!-- Close button for the modal -->
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- Title for the admin login modal -->
<h4 class="modal-title text-center">Admin Login</h4>
</div>
<div class="modal-body">
<!-- Form for admin login -->
<form action="./php/admin_log.php" method="post">
<!-- Input fields for username and password -->
<div class="row">
<!-- Label and input for Username -->
<div class="col-lg-1"></div>
<div class="col-lg-2 text-right">
<label for="username">User id:</label>
</div>
<div class="col-lg-8">
<!-- Input field for Username -->
<input class="form-control" type="text" name="username" placeholder="Enter Login Id" required>
</div>
<div class="col-lg-1"></div>
</div>
<!-- Input fields for Password -->
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2 text-right">
<label for="password">Password :</label>
</div>
<div class="col-lg-8">
<!-- Input field for Password -->
<input class="form-control" type="password" name="password" placeholder="Enter Password" required>
</div>
<div class="col-lg-1"></div>
</div>
<!-- Button to submit the admin login form -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<!-- Login button for admin -->
<button type="submit" class="btn btn-success btn-block">Login</button>
</div>
<div class="col-lg-4"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Background container -->
<div class="background">
<!-- Row for content -->
<div class="row">
<!-- Column alignment -->
<div class="col text-center">
<!-- Header with dynamic ID for color change -->
<h4 id="chagecolor">
<!-- Empty span for potential error message -->
<span id="error"> </span>
</h4>
</div>
</div>
<!-- Fluid container for main content -->
<div class="container-fluid back">
<!-- Column layout -->
<div class="col-lg-9 text">
<!-- Paragraph containing welcome message -->
<p>
"Welcome to our college's convenient and secure payment portal. Easily manage tuition fees, housing expenses, and more with our user-friendly platform. Simplify your transactions, view detailed billing statements, and ensure hassle-free payments, allowing you to focus on your academic journey. Experience seamless financial interactions and reliable support, making your college experience smoother. Join us in paving the way for effortless payments and streamlined financial management."
</p>
</div>
</div>
</div>
</body>
</html>