-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
802 lines (802 loc) · 50.4 KB
/
index.html
File metadata and controls
802 lines (802 loc) · 50.4 KB
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
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image"content="./fav-icon/logo-c.png" name="og:image">
<meta content="BookMyLib, Online Library Management System provided by kidKrishkode. Free and open source to all for use this LMS prototype for your
school, college or university. Terms and condition read carefully first and then use this utility." lang="en-us" name="description">
<meta content="BookMyLib, Order of Pie, Online, Library System, free, open source, html, css, MIT, kidKrishkode" lang="en-us" name="keywords">
<meta name="theme-color" content="#ffffff">
<meta name="author" contant="Krishnendu Mitra">
<title version="1.0">BookMyLib</title>
<link rel="icon" href="./fav-icon/logo-o-c.png">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
<!--script src="https://kit.fontawesome.com/a81368914c.js"></script-->
<link rel="stylesheet" href="./Components/origin.css">
</head>
<style id="jsStyle"></style>
<body id="root" onload="user();">
<section id="loginPage">
<div class="container">
<div class="left-component">
<img src="./images/login-vector.png" id="sideImg"/>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
<div class="wave4"></div>
<div class="wave5"></div>
</div>
<div class="wave6"></div>
<div class="wave7"></div>
<div class="right-component">
<form>
<div class="circle"></div>
<h2 class="title">Welcome to BookMyLib</h2>
<div class="input-div one">
<div class="i">
<i class="fa fa-user"></i>
</div>
<div class="div">
<h5>UserId/Email</h5>
<input type="text" class="input" id="loginEmail"/>
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fa fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input" id="loginPassword"/>
</div>
</div>
<div class="captcha">
<div class="flo">
<input type="captcha" id="mainCaptcha" readonly/>
<div class="btn refresh-btn" onclick="newCaptcha('mainCaptcha','spiner');"title="Refresh the captcha"><i class="fa fa-refresh"id="spiner"></i></div>
</div>
</div>
<div class="input-div">
<div class="i">
<i class="fa fa-key"></i>
</div>
<div class="div">
<h5>Captcha</h5>
<input type="text" class="input" id="loginCapthca"/>
</div>
</div>
<input type="button" class="btn" value="Login" title="Log in to my deshboard"onclick="login('loginEmail','loginPassword','mainCaptcha','loginCapthca');"/>
<div class="flo">
<span onclick="signupOn();defaultPassword('profile-password');"title="Sign Up">New Account</span>
<span title="Remember my password"onclick="forgotOn();">Forgot Password?</span>
</div>
</form>
</div>
</div>
</section>
<section id="signupPage">
<div class="head"></div>
<h2 class="title">Sign Up in {{com.name}}</h2>
<div class="container">
<div class="component">
<div class="flo text-muted">Personal Details</div>
<div class="form-group">
<lable for="profile-name">Name</lable>
<input type="name" class="form-control" id="profile-name" placeholder="Enter your name here" aria-describedby="nameHelp"style="text-transform: capitalize;" onkeyup="loginNameCheck('profile-name');"/>
<small id="nameHelp" class="form-text text-muted">Please enter your full name (capitalized format) adhering to English grammar
rules. Your name will be displayed on the web, Ensure that your name is between 3 to 20 characters long.</small>
</div>
<div class="form-group">
<lable for="profile-gender">Gender</lable>
<select class="form-control" id="profile-gender" aria-describedby="genderHelp" onchange="loginSelectionCheck('profile-gender');">
<option>--SELECT AN OPTION--</option>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
<small id="genderHelp" class="form-text text-muted">Select your gender from the options provided. This information will be used to
personalize your experience, including images, commands, and other features on the platform. Your choice is important for
tailoring our services to suit your preferences.</small>
</div>
<div class="flo text-muted">Professnal Details</div>
<div class="form-group">
<lable for="profile-email">Email</lable>
<input type="email" class="form-control" id="profile-email" placeholder="Enter your email here" aria-describedby="emailHelp" onkeyup="loginEmailCheck('profile-email');"/>
<small id="emailHelp" class="form-text text-muted">Enter a valid email address following standard email grammar, This email will be
crucial for future communication, including receiving OTPs, notifications about web updates, progress reports, and other
essential features. Please ensure the accuracy of your provided email address to stay informed and engaged with our platform.</small>
</div>
<div class="form-group">
<lable for="profile-position">Position of Job</lable>
<select class="form-control" id="profile-position" aria-describedby="positionHelp" onchange="loginSelectionCheck('profile-position');">
<option>--SELECT AN OPTION--</option>
<option>Assistent of Librarian</option>
<option>Assistent of Principle</option>
<option>Assistent of Professor</option>
<option>Din</option>
<option>HOD</option>
<option>Librarian</option>
<option>Principle</option>
<option>Professor</option>
<option>Super Visior</option>
<option>Teacher</option>
<option>Technical Support</option>
</select>
<small id="positionHelp" class="form-text text-muted">Select your job position from the available options. Choosing the correct
position is essential for ensuring a seamless experience while operating the system, especially in multi-user interfaces.
Your selection will help tailor the features and functionalities according to your role.</small>
</div>
<div class="form-group">
<lable for="profile-year">Year of Work</lable>
<div class="flo">
<input type="date" class="form-control" id="profile-year-start" placeholder="dd-mm-yyyy" aria-describedby="yearHelp" onchange="loginJoinCheck('profile-year-start');"/>
<input type="date" class="form-control" id="profile-year-end" placeholder="dd-mm-yyyy" aria-describedby="yearHelp" onchange="loginEndingCheck('profile-year-start','profile-year-end');"/>
</div>
<div class="flo"><span>Joining</span><span>Ending</span></div>
<small id="yearHelp" class="form-text text-muted">Specify your work duration by entering both the date of joining and an approximate
ending date. This information is vital for administrators to understand your tenure with precision, helping optimize the runtime
of this web platform. Ensure the provided duration is a positive value and does not exceed 1 to 60 years.</small>
</div>
<div class="flo text-muted">Security Assets</div>
<div class="form-group">
<lable for="profile-password">Password</lable>
<input type="text" class="form-control" id="profile-password" placeholder="Enter your own password here" aria-describedby="passwordHelp" onkeyup="loginPasswordCheck('profile-password');"/>
<small id="passwordHelp" class="form-text text-muted">Your password is generated by the system, ensuring its strength and security. If you
prefer, you can create your own password, adhering to the password grammar requirements. Ensure it contains at least one uppercase
letter, one lowercase letter, one number, and one special character. The total length must be under 16 characters for optimal
security. Choose a password that strikes the right balance between complexity and memorability.</small>
</div>
<div class="form-group">
<lable for="profile-cpassword">Confirm Password</lable>
<input type="password" class="form-control" id="profile-cpassword" placeholder="Confirm the above password" aria-describedby="cpasswordHelp" onkeyup="loginCPasswordCheck('profile-password','profile-cpassword');"/>
<small id="cpasswordHelp" class="form-text text-muted">Re-enter your password for confirmation, Ensure it matches the password you've
entered above. This step adds an extra layer of security to validate and confirm your chosen password. It's essential to input the
same password to proceed further.</small>
</div>
<div class="form-group">
<lable for="profile-color">Color</lable>
<input type="color" class="form-control" id="profile-color" aria-describedby="colorHelp" onchange="loginColorCheck('profile-color');"/>
<small id="colorHelp" class="form-text text-muted">Choose your favorite color using the color picker. This color serves as a security
asset and may be used to recover your account in case you forget your password. Please remember this color for future authentication
and account recovery purposes.</small>
</div>
<div class="form-group">
<lable for="profile-agree">Terms and Conditions</lable>
<div class="flo checkbox">
<input type="checkbox" class="form-control" id="profile-agree" aria-describedby="agreeHelp" checked="true" disabled><span>Yes, I agree with all terms and conditions</span>
</div>
<small id="agreeHelp" class="form-text text-muted">By checking the 'I agree with all terms and conditions' box, you acknowledge that
you have carefully read and understood our privacy terms and conditions. If you haven't done so already, please take a
moment to review our <o onclick="blbg('signupPage',1);blbg('privacyPage',0);">Terms & Conditions</o> for a comprehensive understanding before proceeding. Your agreement is
crucial for a smooth and secure experience on our platform.</small>
</div>
<div class="form-group">
<div class="flo">
<div class="btn btn-danger" title="Close the signup Page and go back to login page"onclick="blbg('signupPage',1);">CLOSE</div>
<div class="btn btn-success" title="Submit the above details"onclick="submitSignUP('profile-name','profile-gender','profile-email','profile-position','profile-year-start','profile-year-end','profile-password','profile-cpassword','profile-color');">SUBMIT</div>
</div>
</div>
</div>
</div>
</section>
<section id="successSignUp">
<div class="head">
<i>✓</i>
</div>
<h1>Success</h1>
<div class="component">
<p style="text-align: center;">
Congratulations! Your sign-up was successful. <br>
Our server has recevied your new account creation request, and we are currently processing all necessary details. Your new account
has been approved, and you now have access to 5 MB of space.<br>Enjoy exploring and utilizing the features of our platform.
</p>
<p>UserId: <span id="submitId"></span><br>
Password: <span id="submitPassword"></span><br>
Color: <span id="submitColor"></span>
</p>
<p>
This greetings card containing your user ID and password for future reference. Please keep these credentials secure as they are essential
for logging in and accessing various identification features on our platform. Never share your login details with others, log out after
completing your tasks, and consider storing them in a safe place. Stay safe, be happy, and feel to reach out for any assistance. For more
details freely contact our help desk team via email {{com.email}}, and briefly explain your problems or douts for better solution.
</p>
<div class="flo">
<div title="Download this card in txt file for future use." onclick="download('successSignUp','{{com.name}} account card','txt');"><i class="fa fa-download"></i></div>
<div class="btn btn-success" title="Thank You for making my account." onclick="blbg('successSignUp',1);newCaptcha();">Thank You</div>
<div title="Share this card into my email for future use." onclick="voiceOver();"><i class="fa fa-share"></i></div>
</div><br>
</div>
</section>
<section id="forgotPassword">
<div class="head"></div>
<h2 class="title">Forgot Password</h2>
<div class="container">
<div class="component">
<div class="form-group">
<lable for="forgot-name">Name</lable>
<input type="name" class="form-control" id="forgot-name" placeholder="Enter your name here" aria-describedby="nameHelp-f" style="text-transform: capitalize;" onkeyup="loginNameCheck('forgot-name');"/>
<small id="nameHelp-f" class="form-text text-muted">Please enter the full name associated with your account. The name you provide here should match the one you entered during the account
creation process, ensuring accuracy in this field helps us validate your identity and proceed with the necessary steps to recover your password.</small>
</div>
<div class="form-group">
<lable for="forgot-gender">Gender</lable>
<select class="form-control" id="forgot-gender" aria-describedby="genderHelp-f" onchange="loginSelectionCheck('forgot-gender');">
<option>--SELECT AN OPTION--</option>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
<small id="genderHelp-f" class="form-text text-muted">Select the gender associated with your account. This information, previously provided during the sign-up process, serves as a crucial
identifier, ensuring the accuracy of your gender selection is important for enhancing the security measures in the password recovery process. Kindly choose the gender that corresponds
to the details you provided during your account registration.</small>
</div>
<div class="form-group">
<lable for="forgot-email">UserId/Email</lable>
<input type="password" class="form-control" id="forgot-email" placeholder="Enter your userid or email here" aria-describedby="emailHelp-f" onkeyup="userIdEmailCheck('forgot-email');"/>
<small id="emailHelp-f" class="form-text text-muted">Enter the unique User ID associated with your account. This User ID was generated and provided to you during the initial account creation
process. Please ensure the accuracy of the User ID entered, as it is essential for initiating the password recovery process and accessing your account securely.</small>
</div>
<div class="form-group">
<lable for="forgot-color">Color</lable>
<input type="color" class="form-control" id="forgot-color" aria-describedby="colorHelp-f" onchange="loginColorCheck('forgot-color');"/>
<small id="colorHelp-f" class="form-text text-muted">Choose the color associated with your account. This color, selected during the sign-up process, serves as an additional layer of security
for account verification. Please select the same color you chose when creating your account, ensuring accuracy in this field helps us validate your identity and proceed with the necessary
steps for password recovery.</small>
</div>
<div class="form-group">
<lable for="forgot-agree">Terms and Conditions</lable>
<div class="flo checkbox">
<input type="checkbox" class="form-control" id="forgot-agree" aria-describedby="agreeHelp-f" checked="true" disabled><span>Yes, I agree with all terms and conditions</span>
</div>
<small id="agreeHelp" class="form-text text-muted">By checking the 'I agree with all terms and conditions' box, you acknowledge
that you have carefully read and understood our privacy terms and conditions. If you haven't done so already, please take
a moment to review our <o onclick="blbg('forgotPassword',1);blbg('privacyPage',0);">Terms & Conditions</o> for a comprehensive understanding before proceeding. Your
agreement is crucial for a smooth and secure experience on our platform.</small>
</div>
<div class="form-group">
<div class="flo">
<div class="btn btn-danger" title="Close the forgot Page and go back to login page"onclick="forgotOff();">CLOSE</div>
<div class="btn btn-success" title="Submit the above details"onclick="submitForgot('forgot-name','forgot-gender','forgot-email','forgot-color');">SUBMIT</div>
</div>
</div>
</div>
</div>
</section>
<section id="privacyPage">
<div class="head"></div>
<h2 class="title">Privacy Policy</h2>
<div class="container">
<div class="component">
<div class="form-group" id="privacyData">
× Internet die, No data found!
</div>
<div class="form-group">
<div class="flo">
<div class="btn btn-primary" title="Close the Privacy Page and go back" onclick="blbg('privacyPage',1);">OK, I UNDERSTAND IT</div>
</div>
</div>
</div>
</div>
</section>
<section id="licensePage">
<div class="head"></div>
<h2 class="title">License</h2>
<div class="container">
<div class="component">
<div class="form-group" id="licenseData">
× Internet die, No data found!
</div>
<div class="form-group">
<div class="flo">
<div class="btn btn-primary" title="Close the License Page and go back" onclick="blbg('licensePage',1);">OK, I UNDERSTAND IT</div>
</div>
</div>
</div>
</div>
</section>
<main id="main">
<nav class="navbar navbar-dark">
<div class="navbar-brand">
<img src="./fav-icon/logo-o-c.png" width="30" height="30" class="d-inline-block align-top" alt="logog">
<span class="head">{{com.name}}</span><span class="tell"> ({{com.description}})</span>
</div>
<div class="navbar-buttons flw">
<div class="navbar-icons flo">
<i class="fa fa-calendar" title="My calender" id="calenderBtn" onclick="toggleCalender();"></i>
<i class="fa fa-folder-open-o" title="Backup data" id="backupBtn" onclick="voiceOver();"></i>
<i class="fa fa-bell-o" title="Notification" id="notificationsBtn" onclick="voiceOver();"></i>
<i class="fa fa-moon-o" title="Theme changer" id="themeBtn" onclick="ChangeTheme('themeBtn');"></i>
</div>
<div class="navbar-profile flo">
<i class="fa fa-navicon" title="SidNav controler" id="navBtn" onclick="navToggle();"></i>
<img src="./images/avater-3.png" alt="dp" id="navUserDp" title="View profile" onclick="pageRoute('profileBtn');profileSetUp();"/>
</div>
</div>
</nav>
<div class="ground flw">
<section class="sidenav">
<div class="navEvent">
Event Id: <span id="eventId"></span>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdownToggle('dropMenu1');">
Pages
</button>
<div class="dropdown-menu" id="dropMenu1">
<div class="dropdown-item sidenav-item flo" id="homeBtn" title="Home page" onclick="pageRoute('homeBtn');">
<i class="fa fa-tv"></i>
<span>Home</span>
</div>
<div class="dropdown-item sidenav-item flo" id="profileBtn" title="Profile page" onclick="pageRoute('profileBtn');profileSetUp();">
<i class="fa fa-user-o"></i>
<span>Profile</span>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdownToggle('dropMenu2');">
Assets
</button>
<div class="dropdown-menu" id="dropMenu2">
<div class="dropdown-item sidenav-item flo" id="bookBtn" title="Track Books status" onclick="pageRoute('bookBtn');voiceOver();">
<i class="fa fa-book"></i>
<span>Books</span>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdownToggle('dropMenu3');">
Users
</button>
<div class="dropdown-menu" id="dropMenu3">
<div class="dropdown-item sidenav-item flo" id="studentBtn" title="Track Students status" onclick="pageRoute('studentBtn');voiceOver();">
<i class="fa fa-graduation-cap"></i>
<span>Students</span>
</div>
<div class="dropdown-item sidenav-item flo" id="teacherBtn" title="Track Teachers status" onclick="pageRoute('teacherBtn');voiceOver();">
<i class="fa fa-group"></i>
<span>Teachers</span>
</div>
<div class="dropdown-item sidenav-item flo" id="adminBtn" title="Track Admins status" onclick="pageRoute('adminBtn');voiceOver();">
<i class="fa fa-user-circle"></i>
<span>Admins / Technical stuff</span>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdownToggle('dropMenu4');">
Income
</button>
<div class="dropdown-menu" id="dropMenu4">
<div class="dropdown-item sidenav-item flo" id="incomeBtn" title="Track Due fees and Payment" onclick="pageRoute('incomeBtn');voiceOver();">
<i class="fa fa-dollar"></i>
<span>Payment / Fees</span>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdownToggle('dropMenu5');">
Customize
</button>
<div class="dropdown-menu" id="dropMenu5">
<div class="dropdown-item sidenav-item flo" id="settingBtn" title="Customize your work station" onclick="pageRoute('settingBtn');voiceOver();">
<i class="fa fa-gear"></i>
<span>Settings</span>
</div>
<div class="dropdown-item sidenav-item flo" id="reportBtn" title="Conect to us, email us" onclick="pageRoute('reportBtn');voiceOver();">
<i class="fa fa-envelope"></i>
<span>Report / FeedBack</span>
</div>
<div class="dropdown-item sidenav-item flo" title="Visit Privacy statement and license of us" onclick="blbg('forgotPassword',1);blbg('privacyPage',0);">
<i class="fa fa-legal"></i>
<span>Privacy Policy / License</span>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdownToggle('dropMenu6');">
Others
</button>
<div class="dropdown-menu" id="dropMenu6">
<div class="dropdown-item sidenav-item flo" id="aboutBtn" title="Learn about our unity" id="aboutBtn" onclick="pageRoute('aboutBtn');voiceOver();">
<i class="fa fa-file-text-o"></i>
<span>About Us</span>
</div>
<div class="dropdown-item sidenav-item flo" title="Learn about this software" onclick="">
<i class="fa fa-file-pdf-o"></i>
<span>Documentation</span>
</div>
<div class="dropdown-item sidenav-item flo" title="Learn your software usage" onclick="">
<i class="fa fa-file-video-o"></i>
<span>Visual Support</span>
</div>
</div>
</div>
<div class="sidenav-item flo" id="logoutBtn" title="Bye bye, see you soon">
<i class="fa fa-sign-out"></i>
<span>Log Out</span>
</div>
</section>
<div class="sidenavFade"></div>
<section class="field">
× Internet die, No data found!
</section>
</div>
</main>
<section id="HomePage">
<div class="main-contant-info">
<div class="card-holder">
<div class="card-body">
<div class="card-body-upper flo">
<div class="card-body-upper-left">
<h2 class="cus-num cus-h" style="color: goldenrod;" id="value1">00</h2>
<p>Income</p>
</div>
<div class="card-body-upper-right" style="color: goldenrod;">
<i class="fa fa-rupee"></i>
</div>
</div>
<div class="card-body-lower flw" style="background: goldenrod;">
<span>Lorem ipsum dolor sit.</span>
<i class="fa fa-check-circle-o"></i>
</div>
</div>
<div class="card-body">
<div class="card-body-upper flo">
<div class="card-body-upper-left">
<h2 class="cus-num cus-h" style="color: green" id="value1">00</h2>
<p>Use</p>
</div>
<div class="card-body-upper-right" style="color: green">
<i class="fa fa-flask"></i>
</div>
</div>
<div class="card-body-lower flw" style="background: green;">
<span>Lorem ipsum dolor sit.</span>
<i class="fa fa-check-circle-o"></i>
</div>
</div>
</div>
<div class="card-holder">
<div class="card-body">
<div class="card-body-upper flo">
<div class="card-body-upper-left">
<h2 class="cus-num cus-h" style="color: red" id="value1">00</h2>
<p>Storage</p>
</div>
<div class="card-body-upper-right" style="color: red">
<i class="fa fa-database"></i>
</div>
</div>
<div class="card-body-lower flw" style="background: red;">
<span>Lorem ipsum dolor sit.</span>
<i class="fa fa-times-circle-o"></i>
</div>
</div>
<div class="card-body">
<div class="card-body-upper flo">
<div class="card-body-upper-left">
<h2 class="cus-num cus-h" style="color: blue" id="value1">00</h2>
<p>Access</p>
</div>
<div class="card-body-upper-right" style="color: blue">
<i class="fa fa-universal-access"></i>
</div>
</div>
<div class="card-body-lower flw" style="background: blue;">
<span>Lorem ipsum dolor sit.</span>
<i class="fa fa-check-circle-o"></i>
</div>
</div>
</div>
</div>
</section>
<section id="ProfilePage">
<div class="profile-content container">
<div class="pro-table">
<div class="recent-table" style="margin-bottom: 20px;">
<div class="rec-h">
<h3>{{com.name}} Profile (Preview)</h3>
<small class="form-text text-muted">Your profile preview highlights key details for others, offering a glimpse of your identity without revealing everything. The complete profile is yours to
edit, ensuring privacy and control over your information.</small>
</div>
<div class="rec-btn">
<button class="btn btn-primary reset" onclick="editProfile();" title="Edit profile information" id="editProfileBtn" data-toggle="modal" data-target="#authenticateModal" data-whatever="@"><i class="fa fa-edit"></i> Edit My Profile</button>
<button class="btn btn-success reset" onclick="viewPrivateProfile('privateProfileBtn');" id="privateProfileBtn" title="Preview private profile"><i class="fa fa-eye"></i> View Private Profile</button>
</div>
<form class="profile-form">
<div class="left">
<img src="./images/avater-1.png" alt="loading.." id="prev-profile-img" aria-describedby="profileHelp" onclick="profileChange('prev-profile-img');">
<label for="profile-img">Profile Picture</label>
<small id="profileHelp" class="form-text text-muted">Chosen by you, this image serves as your public profile picture, adding a personal touch to your profile. Feel free to modify this picture
at your discretion</small>
</div>
<div class="right">
<div class="form-group">
<lable for="profile-name">Name</lable>
<input type="name" class="form-control" id="prev-profile-name" value="loading" aria-describedby="nameHelp" readonly="true" onkeyup="loginNameCheck('prev-profile-name');"/>
<small id="nameHelp" class="form-text text-muted">The above field serves as a significant element on your profile, showcasing the identity by which you are recognized across
the platform. Adhering to grammatical conventions, this name will be prominently displayed wherever you contribute or are mentioned. Notably, the flexibility of this field
allows for changes, ensuring your profile stays up-to-date with your personal preferences and identity choices.</small>
</div><br>
<div class="form-group">
<lable for="profile-gender">Gender</lable>
<select class="form-control" id="prev-profile-gender" aria-describedby="genderHelp" disabled onchange="loginSelectionCheck('prev-profile-gender');">
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
<small id="genderHelp" class="form-text text-muted">The above field plays a crucial role in displaying the user's chosen gender identity, providing a personalized touch to your profile.
Following established gender grammar, this field ensures accurate representation and respect for diverse gender expressions. Importantly, this field remains flexible, allowing
users the freedom to update and align it with their evolving identity preferences over time.</small>
</div><br>
<div class="form-group">
<lable for="profile-email">Email</lable>
<input type="email" class="form-control" id="prev-profile-email" value="loading" aria-describedby="emailHelp" readonly="true" onkeyup="userIdEmailCheck('prev-profile-email');"/>
<small id="emailHelp" class="form-text text-muted">The above field serves as a prominent feature, showcasing the user's provided email address across the platform. Adhering to
email grammar conventions, this field ensures the accuracy and validity of the email information. Additionally, users have the flexibility to modify this field, facilitating
updates to their contact details and maintaining an up-to-date profile.</small>
</div><br>
<div class="form-group">
<lable for="profile-position">Job Position</lable>
<select class="form-control" id="prev-profile-position" aria-describedby="positionHelp" disabled onchange="loginSelectionCheck('prev-profile-position');">
<option>Assistent of Librarian</option>
<option>Assistent of Principle</option>
<option>Assistent of Professor</option>
<option>Din</option>
<option>HOD</option>
<option>Librarian</option>
<option>Principle</option>
<option>Professor</option>
<option>Super Visior</option>
<option>Teacher</option>
<option>Technical Support</option>
</select>
<small id="positionHelp" class="form-text text-muted">The above field prominently exhibits the user's designated job position, offering insight into their professional role. Users
can modify this field to accurately reflect any changes in their job position, ensuring the displayed information aligns with their current professional standing. This dynamic
feature enables individuals to maintain an updated and relevant portrayal of their occupational status throughout the platform.</small>
</div><br>
<div class="form-group">
<lable for="profile-year">Year of Work</lable>
<input type="date" class="form-control" id="prev-profile-year-start" value="1947-08-15" aria-describedby="yearHelp" readonly="true" onchange="loginJoinCheck('prev-profile-year-start');"/>
<span>Joining</span>
<input type="date" class="form-control" id="prev-profile-year-end" value="1947-08-15" aria-describedby="yearHelp" readonly="true" onchange="loginEndingCheck('prev-profile-year-start','prev-profile-year-end');"/>
<span>Ending</span>
<small id="yearHelp" class="form-text text-muted">The above field encapsulates essential details regarding the user's job history. It comprises two segments: "Joining"
signifies the commencement date of the job, while "Ending" indicates an estimated conclusion date. The time duration spans between 1 and 60 years, offering flexibility and
accommodating various professional tenures. Users can seamlessly modify this field to accurately reflect any alterations in their work history, ensuring the presented
information aligns with their evolving career trajectory.</small>
</div><br>
<div class="form-group">
<lable for="profile-roll">Roll/Post</lable>
<input type="text" class="form-control" id="prev-profile-roll" value="loading" aria-describedby="rollHelp" readonly="true"/>
<small id="rollHelp" class="form-text text-muted">The above field serves as a visual representation of the user's designated role or post within the web interface, a classification
determined solely by the super admin. This field plays a pivotal role in defining the user's authority and responsibilities within the system. The exclusivity of modifying
this field lies with the super admin, emphasizing their pivotal role in assigning specific privileges and powers to individual users, contributing to a well-organized and secure
operational framework.</small>
</div><br>
<label>Contribution & Activity</label>
<div class="form-check form-group">
<input type="checkbox" class="form-check-input" id="flexCheckCheckedDisabled" aria-describedby="contributeHelp1" value="" checked="" disabled="">
<lable for="flexCheckCheckedDisabled" class="from-check-label">Profile Changes Reflection</lable>
<small id="contributeHelp1" class="form-text text-muted">Opt for this setting to ensure that any modifications made to your profile details are promptly reflected across all
relevant sections. Keep your information up-to-date and consistent.</small><br>
<input type="checkbox" class="form-check-input" id="flexCheckCheckedDisabled1" aria-describedby="contributeHelp2" value="" checked="" disabled="">
<lable for="flexCheckCheckedDisabled1" class="from-check-label">Others Mention Me</lable>
<small id="contributeHelp2" class="form-text text-muted">Enable this option to receive notifications when other users mention your profile. Stay informed about relevant
interactions within your network.</small><br>
<input type="checkbox" class="form-check-input" id="flexCheckCheckedDisabled2" aria-describedby="contributeHelp3" value="" checked="" disabled="">
<lable for="flexCheckCheckedDisabled2" class="from-check-label">Store Login History</lable>
<small id="contributeHelp3" class="form-text text-muted">By activating this feature, your login history will be securely stored. This enhances security and allows you to track
your account access for added peace of mind.</small>
</div><br>
<div class="hiddenProfile">
<div class="form-group">
<lable for="profile-password">Password</lable>
<input type="text" class="form-control" id="prev-profile-password" value="loading" aria-describedby="passwordHelp" readonly="true"/>
<small id="passwordHelp" class="form-text text-muted">The above field serves as a confidential gateway, displaying the user's entered password in a secure and private manner.
Unlike other fields, the contents of this field remain concealed from public view, ensuring heightened privacy and security. Users have the flexibility to modify this field,
allowing them to adapt and strengthen their access credentials over time.</small>
</div><br>
<div class="form-group">
<lable for="profile-userId">User Id</lable>
<input type="text" class="form-control" id="prev-profile-userId" value="loading" aria-describedby="userIdHelp" readonly="true"/>
<small id="userIdHelp" class="form-text text-muted">The "User ID" field showcases the system-generated identification assigned to each user. With an emphasis on privacy, this ID
remains confidential, visible only to super admin for administrative purposes. Unlike other editable fields, the User ID is immutable, providing a constant and unique identifier
linked to each user within the system.</small>
</div><br>
<div class="form-group">
<lable for="profile-color">Color</lable>
<input type="color" class="form-control" id="prev-profile-color" value="#000000" aria-describedby="colorHelp" readonly="true"/>
<small id="colorHelp" class="form-text text-muted">The above field displays a user-selected color, serving as a distinctive security asset. While users have the flexibility to
modify this field, its private nature ensures that only the user can view and access their chosen color. This personalized touch adds an extra layer of security to the user's
account without compromising privacy.</small>
</div><br>
<label>Profile Settings</label>
<div class="form-check form-group">
<input type="checkbox" class="form-check-input" id="flexCheckCheckedDisabled2" aria-describedby="profilePublickHelp1" value="" checked="" disabled="">
<lable for="flexCheckCheckedDisabled2" class="from-check-label">Make My Profile Public</lable>
<small id="profilePublickHelp1" class="form-text text-muted">Opt for profile visibility to make your profile accessible to the public. Share your contributions and activities with
a wider audience.</small><br>
<input type="checkbox" class="form-check-input" id="flexCheckCheckedDisabled3" aria-describedby="profilePublickHelp2" value="" checked="" disabled="">
<lable for="flexCheckCheckedDisabled3" class="from-check-label">Show My DP with Profile</lable>
<small id="profilePublickHelp2" class="form-text text-muted">Enable this option to display your profile picture alongside your profile details. Personalize your profile and make
it easily recognizable to others.</small><br>
<input type="checkbox" class="form-check-input" id="flexCheckCheckedDisabled4" aria-describedby="profilePublickHelp3" value="" checked="" disabled="">
<lable for="flexCheckCheckedDisabled4" class="from-check-label">Include Account Type/Roll</lable>
<small id="profilePublickHelp3" class="form-text text-muted">Choose to showcase your account type or role in your profile. Let others know your position or role within the system
for better identification.</small>
</div><br>
<label>Danger Settings</label>
<div class="form-check form-group">
<input type="checkbox" class="form-check-input" id="flexCheckCheckedDisabled5" aria-describedby="dangerHelp" value="" checked="" disabled="">
<lable for="flexCheckCheckedDisabled5" class="from-check-label">Don't show security key</lable>
<small id="dangerHelp" class="form-text text-muted">Your userid, password, color status will never show in your public profile, only you can see this.</small><br>
<input type="checkbox" class="form-check-input" id="flexCheckCheckedDisabled5" aria-describedby="dangerHelp1" value="" checked="" disabled="">
<lable for="flexCheckCheckedDisabled6" class="from-check-label">Settings Data Reflects Every User's Device</lable>
<small id="dangerHelp1" class="form-text text-muted">Activate this setting to ensure that changes made to your account settings are reflected uniformly across all devices where your
account is accessed. Maintain a consistent user experience.</small>
</div><br>
</div>
<div class="form-group">
<lable for="profile-inst">Institution Name</lable>
<input type="text" class="form-control" id="prev-profile-inst" value="loading" aria-describedby="instHelp" readonly="true"/>
<small id="instHelp" class="form-text text-muted">The above field reveals the user's affiliated institution, showcasing the workplace details. While this information is
public, offering transparency, it can only be altered by the super admin, ensuring accuracy and reliability in the system.</small>
</div><br>
<div class="form-group">
<lable for="profile-branch">Institution Branch</lable>
<input type="text" class="form-control" id="prev-profile-branch" value="loading" aria-describedby="branchHelp" readonly="true"/>
<small id="branchHelp" class="form-text text-muted">The Institute Branch field highlights the specific branch or division within the user's affiliated institution. Providing insight
into the organizational structure, this information is visible to other users. However, to maintain accuracy and consistency, modifications to this field can only be executed by
the super admin, ensuring reliable representation of the institute's branches.</small>
</div><br>
<div class="form-group">
<lable for="profile-address">Institution Address</lable>
<input type="text" class="form-control" id="prev-profile-address" value="loading" aria-describedby="addressHelp" readonly="true"/>
<small id="addressHelp" class="form-text text-muted">The above field provides insight into the location of the user's workplace. Although this information is visible to other users,
only the super admin has the authority to modify it. This approach maintains the consistency and integrity of the institutional data.</small>
</div><br>
<div class="form-group">
<lable for="profile-contact">Institution Contact</lable>
<input type="email" class="form-control" id="prev-profile-contact" value="loading" aria-describedby="contactHelp" readonly="true"/>
<small id="contactHelp" class="form-text text-muted">Displaying the user's institute email, this field serves as a contact point. It is publicly accessible, allowing other users to
connect. However, modifications to this field are solely under the control of the super admin, guaranteeing the accuracy and legitimacy of the provided email.</small>
</div><br>
<div class="form-group">
<lable for="profile-estd">Institution Estd. Year</lable>
<input type="number" class="form-control" id="prev-profile-estd" value="0" aria-describedby="estdHelp" readonly="true"/>
<small id="estdHelp" class="form-text text-muted">The Establishment Year of Institution field discloses the founding year of the user's workplace. While this historical detail is public,
offering context, only the super admin can modify it. This controlled access ensures the reliability of the institution's establishment information.</small>
</div><br>
<div class="form-check form-group">
<input type="checkbox" class="form-check-input" id="flexCheckCheckedDisabled8" aria-describedby="agreeHelp" value="" checked="true" disabled>
<lable for="flexCheckCheckedDisabled8" class="from-check-label">Yes, I agree with all terms and conditions</lable>
<small id="agreeHelp" class="form-text text-muted">By checking the 'I agree with all terms and conditions' box, you acknowledge
that you have carefully read and understood our privacy terms and conditions.</small>
</div><br>
<small class="form-text text-muted">All of the fields on this page are muted and importent but some of them can be updated at any time, and
by filling them out, this all the information provided by you and directly manipulated your public profile. Please see our
<o onclick="blbg('privacyPage',0);">Privacy statement</o> to learn more about how we use this information.
</small><br>
<div class="btn btn-success" title="Download my profile in text file" onclick="download('ProfilePage','{{com.name}} my profile','txt');"><i class="fa fa-download"></i> Download My Profile</div>
</div>
</form>
</div>
</div>
</div><br><br>
</section>
<div class="modal fade" id="authenticateModal" tabindex="-1" role="dialog" aria-labelledby="authenticateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="authenticateModalLabel">User Authentication</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="authRecheck(1);">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group" style="margin-bottom: 0.2rem!important;">
<label for="message-text" class="col-form-label">Password:</label>
<input type="password" class="form-control" id="recipient-pass" placeholder="Please Enter Your Password"/>
<small class="form-text text-muted flw"><span></span><span style="cursor: pointer;" onclick="authRecheck(1);blbg('forgotPassword',0);">Forgot Password?</span></small>
</div>
<label for="recipient-name" class="col-form-label">Captcha:</label>
<div class="flo">
<div class="form-group">
<input type="text" class="form-control" id="recipient-captcha-in" readonly/>
</div>
<div class="btn btn-primary" onclick="newCaptcha('recipient-captcha-in','newSpiner');" title="Refresh the captcha"><i class="fa fa-refresh"id="newSpiner"></i></div>
<div class="form-group">
<input type="text" class="form-control" id="recipient-captcha-out" placeholder="Please Enter the Captcha"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="authRecheck(1);" title="Close this model">Close</button>
<span id="model-btn"><button type="button" class="btn btn-success" title="Submit the above details" onclick="crossProfileCheck();">Submit</button></span>
</div>
</div>
</div>
</div>
<section id="CalenderPage">
<div class="flw">
<h4>My Calender</h4><span><i class="fa fa-info-circle" title="This calender feature, powerd by {{com.founder}}"></i></span>
</div>
<div class="flw">
<i class="fa fa-caret-left" onclick="previousMonth();" title="Go to Previous Month"></i>
<span id="calenderHead"></span>
<i class="fa fa-caret-right" onclick="NextMonth();" title="Go to Next Month"></i>
</div>
<div class="calenderRow">
<ul><li><div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div></li></ul>
</div>
<div id="calenderBody">
× Internet die, No data found!
</div>
</section>
<section id="dpSelectPage">
<div class="head"></div>
<h2 class="title">Select Your DP</h2>
<div class="container">
<div class="component">
<div class="form-group">
<small class="form-text text-muted">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat accusantium laborum quasi. Laboriosam quaerat mollitia corrupti eligendi nihil ad eveniet.</small>
</div>
<div class="form-group">
<div class="image-flx">
<img src="./images/avater-1.png" onclick="profilePathDisplay('./images/avater-1.png');"/>
<img src="./images/avater-2.png" onclick="profilePathDisplay('./images/avater-2.png');"/>
<img src="./images/avater-3.png" onclick="profilePathDisplay('./images/avater-3.png');"/>
<img src="./images/avater-4.png" onclick="profilePathDisplay('./images/avater-4.png');"/>
<img src="./images/avater-5.png" onclick="profilePathDisplay('./images/avater-5.png');"/>
<img src="./images/avater-6.png" onclick="profilePathDisplay('./images/avater-6.png');"/>
<img src="./images/avater-7.png" onclick="profilePathDisplay('./images/avater-7.png');"/>
<img src="./images/avater-8.png" onclick="profilePathDisplay('./images/avater-8.png');"/>
<img src="./images/browse-img.png" id="selectedAvatar" title="Browse you image from your device"/>
<input type="file" class="form-control" id="customFile2" onchange="displaySelectedImage(event, 'selectedAvatar')" title="Browse you image from your device"/>
</diV>
</div>
<div class="form-group" style="margin-top: -120px;">
<lable for="dp-path">File Identity:</lable>
<input type="link" class="form-control" id="dpPath" placeholder="Enter the file path of your dp" aria-describedby=""/>
</div>
<div class="form-group">
<div class="flo">
<div class="btn btn-danger" title="Close the DP Page and go back" onclick="blbg('dpSelectPage',1);">close</div>
<div class="btn btn-success" title="Select this image as my profile picture" onclick="dpSelected('dpPath');">Select</div>
</div>
</div>
</div>
</div>
</section>
<div id="loading">
<div class="head">BookMyLib</div>
<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<footer>
<h6>from</h6>
<h5>Order of Pie</h5>
</footer>
</div>
<div id="blbg"></div>
</body>
<!--Script inject by backend side-->
<script src="./Database/assets.min.js"></script>
<script src="./Database/analysis.min.js"></script>
<script src="./Database/legalData.js"></script>
<script src="./Components/hex.js"></script>
<!--Script inject by frontend side-->
<script src="./Components/default.js"></script>
<script>
</script>
</html>