-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (84 loc) · 3.36 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Generator</title>
<link rel="stylesheet" href="css/compact.css">
<link rel="stylesheet" href="fonts/default.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" type="text/css" href="Styles/css/bootstrap/vapor2.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Styles/css/custom.css">
<script type="text/javascript" src="Styles/js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="Styles/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="Styles/js/popper.min.js"></script>
</head>
<body>
<center>
<h1>URL Generator</h1>
<form id="urlForm">
<label for="baseURL">Style:</label><br>
<select id="baseURL" name="baseURL">
<option value="default">default</option>
<option value="compact">compact</option>
<option value="simple">simple</option>
</select>
<br><br>
<label for="position">Position:</label><br>
<select id="position" name="position">
<option value="topleft">Top Left</option>
<option value="bottomleft">Bottom Left</option>
<option value="centerleft">Center Left</option>
<option value="topright">Top Right</option>
<option value="bottomright">Bottom Right</option>
<option value="centerright">Center Right</option>
<option value="topcenter">Top Center</option>
<option value="bottomcenter">Bottom Center</option>
<option value="center">Center</option>
</select>
<br><br>
<label for="animation">Animation:</label><br>
<select id="animation" name="animation">
<option value="">Default (Scale)</option>
<option value="up">Up</option>
<option value="down">Down</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
<br><br>
<label for="bg-color">Background color:</label><br>
<select id="bg-color" name="bg-color">
<option value="">None</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="gray">Gray</option>
<option value="purple">Purple</option>
</select>
<br><br>
<label for="duration">Duration (ms):</label><br>
<input type="text" id="duration" name="duration" value="1000"><br><br>
<button type="button" id="generateButton">Generate URL</button><br><br>
</form>
<p>Generated URL:</p>
<p id="generatedURL"></p>
</center>
<script>
document.getElementById("generateButton").addEventListener("click", function() {
const baseURL = document.getElementById("baseURL").value;
const position = document.getElementById("position").value;
const animation = document.getElementById("animation").value;
const duration = document.getElementById("duration").value;
const bgColor = document.getElementById("bg-color").value;
const queryParams = new URLSearchParams({
theme: baseURL,
position: position,
animation: animation,
duration: duration,
bgcolor: bgColor
});
var finalURL = `https://maikatura.github.io/TunaPresets/Styles/index.html?${queryParams.toString()}`;
document.getElementById("generatedURL").textContent = finalURL;
});
</script>
</body>
</html>