-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
105 lines (93 loc) · 3.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wallpaper Theme Converter</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./assets/style.css" />
<script src="./assets/convert.js"defer></script>
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<header>
<h1>Wallpaper Theme Converter</h1>
<a href="https://github.com/NotNeelPatel/WallpaperThemeConverter?tab=readme-ov-file#instructions">How To Use This Tool</a>
</header>
<body>
<div id="loading-screen">
<p>Loading...</p>
</div>
<hr />
<br/>
<div>
<div id="drop-zone" ondragover="handleImage();">
<label for="image-loader">Drag/Drop, Paste (Ctrl+V), or</label>
<input type="file" id="image-loader" name="image-loader" accept=".jpg, .jpeg, .png, .webp" />
</div>
</div>
<br/>
<canvas id="image-canvas"></canvas>
<div class="download-buttons">
<button class="main-button" id="download-button" type="button" onclick="downloadImage()">↓ Download ↓</button>
<button class="main-button" id="reset-button" type="button" onclick="reset()">Reset Image</button>
</div>
<div class="menu-container">
<h3>Select a theme</h3>
<div id="palette">
</div>
<div class="options-container">
<button id="opt-up" onclick="scrollTheme(-1)">▲</button>
<select name="Colour Scheme" id="theme-select">
<option value="Gruvbox">Gruvbox</option>
<option value="Nord">Nord</option>
<option value="Everforest">Everforest</option>
<option value="Solarized">Solarized</option>
<option value="Dracula">Dracula</option>
<option value="Tokyo Night">Tokyo Night</option>
<option value="Kanagawa">Kanagawa</option>
<!-- For Developers: Add your theme here (example below):
<option value="Theme Name">Theme Name</option>
-->
<optgroup label="Catppuccin">
<option value="Catppuccin Latte">Catppuccin Latte</option>
<option value="Catppuccin Frappe">Catppuccin Frappe</option>
<option value="Catppuccin Macchiato">Catppuccin Macchiato</option>
<option value="Catppuccin Mocha">Catppuccin Mocha</option>
</optgroup>
<optgroup label="Rose Pine">
<option value="Rose Pine">Rose Pine</option>
<option value="Rose Pine Moon">Rose Pine Moon</option>
<option value="Rose Pine Dawn">Rose Pine Dawn</option>
</optgroup>
<!-- For Developers: Add grouped themes here under an optgroup (example below):
<optgroup label="Group Name">
<option value="Theme Name">Theme Name</option>
<option value="Theme Name">Theme Name</option>
<option value="Theme Name">Theme Name</option>
-->
</select>
<button id="opt-down" onclick="scrollTheme(1)">▼</button>
<button id="custom-theme-button" onclick="openCustomMenu()"> + Custom Theme </button>
</div>
<br/>
<div id="custom-menu">
<button onclick="addColour()">+</button>
<button onclick="removeColour()">-</button>
<div id="colours">
</div>
</div>
<button class="main-button" id="convert" type="button" onclick="initialize()">Convert</button>
</div>
</body>
<footer>
<p>© 2022-2025 Neel Patel</p>
<ul>
<a href="https://notneelpatel.github.io">My Website</a>
<a>|</a>
<a href="https://github.com/NotNeelPatel/WallpaperThemeConverter">GitHub Repo</a>
<a>|</a>
<a href="https://github.com/NotNeelPatel/WallpaperThemeConverter/graphs/contributors">List of Contributors</a>
<a>|</a>
<a href="https://notneelpatel.github.io/blog/2022-05-10-wallpaper-theme-converter.html">About Wallpaper Theme Converter</a>
</ul>
</footer>
</html>