-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
44 lines (41 loc) · 2.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags, Title, etc. -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode</title>
<!-- External Stylesheet -->
<link rel="stylesheet" href="https://akraut1.github.io/pricing-engine/styles.css">
<!-- External Dark Mode Javascript -->
<script src="https://akraut1.github.io/pricing-engine/darkmode.js"></script>
</head>
<body>
<!-- Your Form and Other Content -->
<!-- Dark Mode Toggle Container -->
<div id="darkmode-container">
<!-- Hidden Checkbox Input -->
<input type="checkbox" id="darkmode-toggle" aria-label="Toggle Dark Mode">
<!-- Label for the Checkbox to Style the Toggle -->
<label for="darkmode-toggle" class="toggle-label">
<div class="circle">
<!-- Sun Icon -->
<svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<!-- Sun SVG Path -->
<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
</svg>
<!-- Moon Icon -->
<svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<!-- Moon SVG Path -->
<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
</svg>
</div>
</label>
</div>
<!-- Background Div -->
<div class="background"></div>
<!-- Your Form and Other Content -->
<!-- External Scripts (if any) -->
<script src="https://akraut1.github.io/pricing-engine/darkmode.js"></script>
</body>
</html>