-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
56 lines (55 loc) · 2.97 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Theme Manager</title>
<link rel="stylesheet" href="index.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body class="">
<div class="website-container">
<div class="main-theme-switches" role="none">
<button class="theme-buttons" data-theme="dark-theme" type="button" aria-label="Select dark theme"></button>
<button class="theme-buttons" data-theme="light-theme" type="button" aria-label="Select light theme"></button>
<button class="theme-buttons" data-theme="pink-theme" type="button" aria-label="Select pink theme"></button>
<button class="theme-buttons" data-theme="blue-theme" type="button" aria-label="Select blue theme"></button>
</div>
<div class="misc-theme-switches">
<button id="previous-theme-button" type="button" aria-labelledby="previous-theme-button-label">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path>
</svg>
<span id="previous-theme-button-label" hidden>Previous theme</span>
</button>
<button id="random-theme-button" type="button" aria-labelledby="random-theme-button-label">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM5 19V5h14l.002 14H5z"></path>
<circle cx="8" cy="8" r="1.5"></circle>
<circle cx="12" cy="12" r="1.5"></circle>
<circle cx="16" cy="16" r="1.5"></circle>
</svg>
<span id="next-theme-button-label">Random Theme</span>
</button>
<button id="next-theme-button" type="button" aria-labelledby="next-theme-button-label">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path>
</svg>
<span id="next-theme-button-label" hidden>Next theme</span>
</button>
</div>
<p>The source code and other info for this project can be found
<a href="https://github.com/TrulyFlawed/Theme-Manager" aria-labelledby="source-code-link-label">
<span id="source-code-link-label">here</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
<path d="m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z"></path>
<path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"></path>
</svg>
</a>
</p>
<p>Created by: TrulyFlawed/Duskfall</p>
<p>Extra credits to: SnareChops</p> <!-- They helped me figure out how to display the current active theme on the main theme buttons -->
</div>
<script src="index.js" type="module"></script>
</body>
</html>