-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
174 lines (163 loc) · 6.16 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
<!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="src/css/style.css" />
<link rel="shortcut icon" href="src/img/favicon.ico" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap"
rel="stylesheet"
/>
<script defer src="src/js/controller.js"></script>
<title>CGPA calulator</title>
</head>
<body class="light-them">
<div class="main-container">
<div class="bg-video__container">
<video controls width="250" autoplay loop muted class="bg-video">
<source src="Lightning Bolt At Night.mp4" type="video/mp4" />
<source src="Lightning Bolt At Night.mp4" type="video/webm" />
""
</video>
</div>
<div class="main-slide slide active">
<div class="main-slide__header">
<h1>Cgpa calculator</h1>
<div class="switch-theme">
<!-- <svg class="icon--light-theme">
<use xlink:href="src/img/icons-sprite.svg#icon-sun"></use>
</svg>
<svg class="icon--dark-theme hidden">
<use xlink:href="src/img/icons-sprite.svg#icon-moon"></use>
</svg> -->
<img src="src/img/sun.svg" alt="sun" class="icon--light-theme" />
<img
src="src/img/moon.svg"
alt="moon"
class="icon--dark-theme hidden"
/>
</div>
</div>
<div class="error-box hidden">
<p class="error-message"> </p>
<button class="remove-error-message">x</button>
</div>
<div class="main-slide__main">
<form action="#" class="main-slide__form">
<div class="main-slide__form--headings">
<h3>Couse code</h3>
<h3>Unit</h3>
<h3>Grade</h3>
</div>
<div class="blank-form">
<p>Nothing to calculate here, add new fields to get started :)</p>
</div>
<div class="main-slide__form--field">
<button class="remove-field">x</button>
<input
type="text"
class="main-slide__form--input main-slide__form--input-code"
/>
<select
class="main-slide__form--input main-slide__form--input-unit"
name="unit"
id="unit"
>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select
class="main-slide__form--input main-slide__form--input-grade"
name="grade"
id="grade"
>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
</form>
</div>
<div class="main-slide__footer">
<button class="btn add-field">+ Add new field</button>
<button class="btn calculate-cgpa">Calculate CGPA</button>
</div>
<div class="result-page hidden">
<div class="result__info--container">
<div class="result__info">
<h3 class="result__info--heading">Total Courses</h3>
<p class="result__info--text result__total-courses"> </p>
</div>
<div class="result__info">
<h3 class="result__info--heading">Total units</h3>
<p class="result__info--text result__total-units"> </p>
</div>
<div class="result__info">
<h3 class="result__info--heading">Total points</h3>
<p class="result__info--text result__total-points"> </p>
</div>
<div class="result__info">
<h3 class="result__info--heading">Remark</h3>
<p class="result__info--text result__remark"> </p>
</div>
</div>
<div class="result-cgpa">
<div>
<p class="result-cgpa__value">
Congratulations, your CGPA is
<span class="cgpa-value"> </span> /
<span class="cgpa-standard"> </span>
</p>
<p class="result-cgpa__compliment">
Ho! Hoo!! Hooray!!! You're on
<span class="cgpa-class"> </span
><span class="cgpa-advice"></span>
</p>
</div>
</div>
<div class="result-cgpa__footer">
<button class="btn result-cgpa__go-back-btn">
<span>⟵</span> Back to form
</button>
</div>
</div>
<div class="main-slide__footer-2">
<button class="reset-btn">Reset</button>
<p class="main-slide__footer-2--author">
Designed and developed by
<a
href="https://tiskae.tech"
target="_blank"
rel="noopener noreferrer"
>Tiskae</a
>
</p>
</div>
</div>
</div>
</body>
</html>