-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
317 lines (303 loc) · 16.7 KB
/
index.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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MEC - Cover page Generator 2.0</title>
<!-- Linking CSS files for the form and output styling -->
<link rel="stylesheet" href="input.css">
<link rel="stylesheet" href="output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Linking HTML2PDF library for PDF generation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
</head>
<body>
<header class="header">
<img src="images/logo.svg" class="logo-h" width="50px" alt="Mymensingh Engineering College Logo">
<h1 class="cover-title">MEC Cover Page Generator 2.0</h1>
<button class="popup-btn" onclick="mecCpg2ShowPopup()">See Future Updates</button>
</header>
<!-- Popup Modal -->
<div id="mec-cpg-popup" class="mec-cpg-popup">
<div class="mec-cpg-popup-content">
<span class="mec-cpg-close-btn" onclick="mecCpg2HidePopup()">×</span>
<h2>Future Updates</h2>
<ul class="mec-cpg-popup-list">
<li>Include course name and course code.</li>
<li>Filter courses based on semester input.</li>
<li>Suggest experiment names using previous data.</li>
<li>Recommend applicable course teachers for the selected course.</li>
<li>আমি এতোও ভালো মানুষ না যে এগুলা করবো এখন। 😝</li>
</ul>
</div>
</div>
<!-- Input form section starts here -->
<div class="input">
<form id="cover-page-form">
<div class="form-group">
<label for="department">Department: <span style="color: red;">*</span></label>
<select name="department" id="department" required>
<option value="">Select Department</option>
<option value="Electrical and Electronic Engineering">EEE</option>
<option value="Computer Science and Engineering">CSE</option>
<option value="Civil Engineering">Civil</option>
</select>
</div>
<div class="form-group">
<label for="course-code">Course Code:</label>
<input type="text" name="course-code" id="course-code">
</div>
<div class="form-group">
<label for="course-name">Course Name:</label>
<input type="text" style="text-transform: none;" name="course-name" id="course-name">
</div>
<div class="form-group">
<label>Type: <span style="color: red;">*</span></label>
<div>
<input type="radio" checked="checked" id="lab-report" name="type" value="Lab Report" required>
<label for="lab-report">Lab Report</label>
</div>
<div>
<input type="radio" id="assignment" name="type" value="Assignment" required>
<label for="assignment">Assignment</label>
</div>
</div>
<div class="form-group">
<label for="experiment-no">Experiment No.:</label>
<input type="number" name="experiment-no" id="experiment-no">
</div>
<div class="form-group">
<label for="experiment-name">Experiment Name:</label>
<input type="text" name="experiment-name" style="text-transform: none;" id="experiment-name">
</div>
<div class="form-group">
<label for="name">Your Name:</label>
<input type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="roll">Roll No.:</label>
<input type="number" name="roll" id="roll">
</div>
<div class="form-group">
<label for="registration">Registration No.:</label>
<input type="text" name="registration" id="registration">
</div>
<div class="form-group">
<label for="session">Session:</label>
<select name="session" id="session">
<option value="">Select Session</option>
<option value="17-18">17-18</option>
<option value="18-19">18-19</option>
<option value="19-20">19-20</option>
<option value="20-21">20-21</option>
<option value="22-23" selected>22-23</option>
<option value="23-24">23-24</option>
</select>
</div>
<div class="form-group">
<label for="batch">Batch:</label>
<select name="batch" id="batch">
<option value="">Select Batch</option>
<option value="6">6</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15" selected>15</option>
<option value="16">16</option>
</select>
</div>
<label for="course-teacher">Course Teacher:</label>
<div class="form-group ct">
<select name="course-teacher" class="course-teacher" id="course-teacher">
<option value="">Select Teacher</option>
<!-- Add your teacher information like "Name <br> Profession" -->
<option value="Md_Alamgir_Hossain">Md. Alamgir Hossain</option>
<option value="Md_Rafiqul_Islam">Md. Rafiqul Islam</option>
<option value="Md_Assaduzzaman">Md. Assaduzzaman</option>
<option value="SM_Anowarul_Haque">S. M. Anowarul Haque</option>
<option value="Rownak_Ara_Chowdhury">Rownak Ara Chowdhury</option>
<option value="Khaleda_Ferdousi">Khaleda Ferdousi</option>
<option value="Md_Khalilur_Rahman">Md. Khalilur Rahman</option>
<option value="Muhammad_Abdus_Sattar_Titu">Muhammad Abdus Sattar Titu</option>
<option value="Jebunnesa_Roma">Jebunnesa Roma</option>
<option value="Sabuj_Ahmed">Sabuj Ahmed</option>
<option value="Abdul_Wahed">Abdul Wahed</option>
<option value="Md_Nazrul_Islam">Md. Nazrul Islam</option>
<option value="Md_Nuruzzaman">Md. Nuruzzaman</option>
<option value="Md_Salah_Uddin">Md. Salah Uddin</option>
<option value="Ozifatun_Jannat_Akhi">Ozifatun Jannat Akhi</option>
<option value="Tahia_Rabbee">Tahia Rabbee</option>
<option value="Mrinal_Kanti_Roy">Mrinal Kanti Roy</option>
<option value="Mahfujur_Rahman_Resel">Mahfujur Rahman Resel</option>
<option value="Sabrina_Sattar_Setu">Sabrina Sattar Setu</option>
<option value="Mahabubul_Imam_Majumder">Mahabubul Imam Majumder</option>
<option value="Jenia_Shultana">Jenia Shultana</option>
<option value="Susanta_Dev_Nath">Susanta Dev Nath</option>
<option value="Utpal_Goswami">Utpal Goswami</option>
<option value="Muhammad_Saqibul_Amin">Muhammad Saqibul Amin</option>
<option value="Abdullah_Al_Mahin">Abdullah Al Mahin</option>
<option value="other">click add "+" icon for other teacher</option>
</select>
<input type="checkbox" id="ext-teacher" onclick="check()"
title="check the box if teacher is not listed">
</div>
<div class="form-group hidden" id="teacher-name-exs">
<label for="teacher-name">Teacher Name:</label>
<input type="text" name="teacher-name" id="teacher-name-ex">
</div>
<div class="form-group hidden" id="teacher-des-exs">
<label for="teacher-des">Teacher Designation:</label>
<input type="text" name="teacher-des" id="teacher-des-ex">
</div>
<div class="form-group">
<label for="submission-date">Submission Date:</label>
<input type="date" name="submission-date" id="submission-date">
</div>
<div class="form-group">
<label for="experiment-date">Experiment Date: <span style="font-size: 12px; text-transform: none;">(if date is blank then it will not appear on the page)</span></label>
<input type="date" name="experiment-date" id="experiment-date">
</div>
<!-- Button to preview the cover page -->
<button class="button" onclick="preview()"><i class="fa-regular fa-eye"></i></button>
</form>
<!-- Input form section ends here -->
<!-- Note for users about the functionality -->
<p id="puu" style="text-transform: none;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
Please fill out the form with the required information. Fields marked with a red asterisk (<span style="color: rgb(255, 0, 0);">*</span>) are mandatory. After filling out the form, click the preview button to see the generated cover page. You can then download it as a PDF.
</p>
</div>
<!--FONT AWESOME-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--GOOGLE FONTS-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Play&display=swap" rel="stylesheet">
</head>
<body>
<footer>
<div class="footer">
<div class="row">
<a href="https://facebook.com/fidazams" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://instagram.com/fidazams" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="https://youtube.com/@fidazams" target="_blank"><i class="fa fa-youtube"></i></a>
<a href="https://twitter.com/fidazams" target="_blank"><i class="fa fa-twitter"></i></a>
</div>
<!-- Popup div -->
<div id="popupPrivacyTerms" class="popup-2">
<div class="popup-content">
<i class="fa-regular fa-circle-xmark close" onclick="closePopupPrivacyTerms()"></i>
<h2>Privacy Policy</h2>
<p>This website is an unofficial platform for Mymensingh Engineering College (MEC) aimed at
simplifying the process of creating cover pages. We do not collect or store any personal
information from users.</p>
<p>We may use cookies for enhancing user experience, but these do not track or store personal
data. By using this site, you consent to our privacy policy.</p>
<h2>Terms and Conditions</h2>
<p>By using this website, you agree to comply with and be bound by the following terms and
conditions:</p>
<ul>
<li>The content of this website is for informational purposes only.</li>
<li>We do not guarantee the accuracy, completeness, or reliability of any content.</li>
<li>This website is not affiliated with Mymensingh Engineering College (MEC) officially.
</li>
<li>We reserve the right to modify or discontinue the service without notice.</li>
<li>Your use of any information or materials on this website is entirely at your own risk.
</li>
</ul>
<p>For any queries regarding the privacy policy or terms and conditions, please contact us.</p>
</div>
</div>
<!-- Trigger button to open the popup -->
<div class="row">
<ul>
<li onclick="openPopupPrivacyTerms()">Privacy Policy and Terms of Service</li>
</ul>
</div>
<div class="row">
Copyright © 2024 All rights reserved || Designed By: Fida
</div>
</div>
</footer>
<!-- Popup section for previewing and downloading the cover page -->
<div class="popup" id="popup">
<div
style="position: sticky;top: -5px; border-bottom: 1px solid #ffa57c;background-color: #fffee0;height: 40px;">
<i class="fa-regular fa-circle-xmark cross" id="cross" onclick="hide()"></i>
<button class=" cross" id="saveAsPdfBtn">
<i class="fa-solid fa-download"></i>
</button>
</div>
<div class="container" id="content">
<div class="logo"><img src="images/logo.png" alt=""></div>
<div class="deptm">
<div class="h2">Mymensingh Engineering College</div>
<p class="dept">DEPARTMENT OF  <span id="department-2"></span></p>
</div>
<div class="courseinfo">
<p class="crscode">Course code: <span id="ccode"></span></p>
<p class="crsname">COURSE NAME: <span id="cname"></span></p>
<div class="workno"><div class="exa" style="display:inline;">Experiment no: </div><span id="expNo"></span></div>
<div class="worknm">Experiment Name:</div>
<div class="topics">
<div class="topi" id="expName"></div>
</div>
<!-- Table displaying the submission details -->
<table border="1px">
<tr>
<th>Submitted by:</th>
<th>Submitted to:</th>
</tr>
<tr>
<td>Name
<pre style="display: inline;"> : </pre><span id="name-2"></span>
</td>
<td rowspan="4" id="cTeacher"></td>
</tr>
<tr>
<td>Roll
<pre style="display: inline;"> : </pre><span id="roll-2"></span>
</td>
</tr>
<tr>
<td>Reg No
<pre style="display: inline;"> : </pre><span id="regiNo"></span>
</td>
</tr>
<tr>
<td>Session
<pre style="display: inline;"> : </pre><span id="session-2">2022-2023</span>
</td>
</tr>
<tr>
<td>Batch
<pre style="display: inline;"> : </pre><span id="batch-2">15</span><sup
style="text-transform: lowercase;font-size: 13px;">th</sup>
</td>
</tr>
</table>
</div>
<div class="footerr">
<table border="">
<tr>
<td>
<div class="co1">Submission date: <span id="subDate"></span></div>
</td>
</tr>
<tr>
<td>
<div class="co1" id="exp-blank">Experiment date: <span id="expDate"></span></div>
</td>
<td>
<div class="co2">Signature</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- Linking the script file -->
<script src="script.js"></script>
</body>
</html>