-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
120 lines (103 loc) · 6.2 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
<!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="styles.css">
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="menu">
<div class="logo"><img
src="https://pragati.ac.in/wp-content/uploads/2022/10/pragati-logo-JK-2-1536x572.png"></div>
<ul class="menu-items">
<li><img width="30" height="30" src="https://img.icons8.com/external-kmg-design-detailed-outline-kmg-design/64/external-dashboard-user-interface-kmg-design-detailed-outline-kmg-design.png" alt="external-dashboard-user-interface-kmg-design-detailed-outline-kmg-design"/><a href="#" class="m-item">Dashboard</a></li>
<li><img width="30" height="30" src="https://img.icons8.com/ios/50/speech-bubble-with-dots--v1.png" alt="speech-bubble-with-dots--v1"/><a href="#" class="m-item">Messenger</a></li>
<li><img width="30" height="30" src="https://img.icons8.com/external-flatart-icons-outline-flatarticons/64/external-Calendar-cenima-flatart-icons-outline-flatarticons.png" alt="external-Calendar-cenima-flatart-icons-outline-flatarticons"/><a href="#" class="m-item">Calendar</a></li>
<li><img width="30" height="30" src="https://img.icons8.com/ios/50/data-configuration.png" alt="data-configuration"/><a href="#" class="m-item">Database</a></li>
<li><img width="30" height="30" src="https://img.icons8.com/pastel-glyph/64/bar-chart--v2.png" alt="bar-chart--v2"/><a href="#" class="m-item">Attendance</a></li>
<li><img width="30" height="30" src="https://img.icons8.com/ios/50/settings.png" alt="settings"/><a href="#" class="m-item" >Settings</a></li>
</ul>
</div>
<div class="hero">
<div class="search-bar">
<div class="list-heading">
<img width="40" height="40" src="https://img.icons8.com/tapes/80/experimental-search-tapes.png" alt="experimental-search-tapes"/>
<input type="text" placeholder="Search by name or roll ID" class="search-input">
</div>
</div>
<div class="hero-data">
<div class="heading">
<h1>Database</h1>
</div>
<div class="sub-headings">
<h2>Student</h2>
<h2>Teacher</h2>
<h2>Staff</h2>
</div>
<div class="bar-line"></div>
<div class="list-headings">
<h2 class="list-heading">S.No</h2>
<h2 class="list-heading">Name</h2>
<h2 class="list-heading">Roll ID</h2>
<h2 class="list-heading">Gender</h2>
<h2 class="list-heading">Email</h2>
</div>
<div class="data-list">
<ul id="studentList" class="list">
<!-- List of students goes here -->
<li onclick="showProfile('shafi')">
<div class="div">1.</div>
<div>Md Shafi</div>
<div>22A31A43G0</div>
<div>male</div>
<div>[email protected]</div></li>
<li onclick="showProfile('Sashank')">
<div class="div">2.</div>
<div>Sashank</div>
<div>22A31A43G4</div>
<div>male</div>
<div>[email protected]</div></li>
<li onclick="showProfile('Radhika')">
<div class="div">3.</div>
<div>Radhika</div>
<div>22A31A43B8</div>
<div>female</div>
<div>[email protected]</div></li>
<li onclick="showProfile('eswar')">
<div class="div">3.</div>
<div>Eswar </div>
<div>22A31A43F7</div>
<div>male</div>
<div>[email protected]</div></li>
<!-- <li onclick="showProfile('S.Adithya')">
<div class="div">4.</div>
<div>S Adithya</div>
<div>22A31A43H1</div>
<div>male</div>
<div>[email protected]</div></li>
<li onclick="showProfile('Radhika')">
<div class="div">5.</div>
<div>B Radhika </div>
<div>22A31A43B8</div>
<div>female</div>
<div>[email protected]</div>
</li> -->
<!-- Add more students as needed -->
</ul>
</div>
</div>
</div>
<div class="profile" id="profileContainer"></div>
</div>
<!-- <a href="https://icons8.com/icon/38977/chat-bubble">Chat Bubble</a> icon by <a href="https://icons8.com">Icons8</a> -->
<script src="scripts.js"></script>
<svg preserveAspectRatio="xMidYMid slice" viewBox="10 10 80 80">
<path fill="#9b5de5" class="out-top" d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>
<path fill="#f15bb5" class="in-top" d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>
<path fill="#00bbf9" class="out-bottom" d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>
<path fill="#00f5d4" class="in-bottom" d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>
</svg>
</body>
</html>