-
Notifications
You must be signed in to change notification settings - Fork 119
/
sidepanel.html
153 lines (141 loc) · 6.78 KB
/
sidepanel.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InstanceTag Settings</title>
<!-- Bootstrap CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/sidepanel.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
<div class="container-fluid">
<a class="navbar-brand" href="#">InstanceTag Settings</a>
<div class="d-flex align-items-center">
<div class="text-end me-2">Light</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="themeSwitch">
<label class="form-check-label" for="themeSwitch">Dark</label>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<!-- Form -->
<form id="tagForm">
<div class="row mb-3">
<div class="col-3">
<label class="form-label form-check-label" for="tagEnabled">Enable Tag</label>
</div>
<div class="col">
<div class="form-check form-switch">
<input class="form-control form-check-input" type="checkbox" id="tagEnabled">
<span style="font-size: 7pt;">
Slash command <kbd>/itt</kbd> to swich on/off
</span>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-3">
<label for="tagText" class="form-label">Tag text:</label>
</div>
<div class="col">
<input type="text" class="form-control" id="tagText" placeholder="Enter text">
</div>
</div>
<div class="row mb-3">
<div class="col-3">
<label for="tagFontSize" class="form-label">Font size:</label>
</div>
<div class="col">
<input type="range"title="Slide to adjust font size" class="form-range" min="8" max="18" id="tagFontSize">
</div>
</div>
<div class="row mb-3">
<div class="col-3">
<label for="tagOpacity" class="form-label">Opacity:</label>
</div>
<div class="col">
<input type="range"title="Slide to adjust opacity of tag button" class="form-range" min="0.75" max="1" step="0.05" id="tagOpacity">
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="tagTagColor" class="form-label">Tag color:</label>
<input type="color" class="form-control form-control-color" id="tagTagColor" list="colorslist">
</div>
<div class="col">
<label for="tagFontColor" class="form-label">Font color:</label>
<input type="color" class="form-control form-control-color" id="tagFontColor" list="colorslist">
</div>
</div>
<div class="row mb-3">
<div class="col-3">
<label for="tagTextDoubleclick" class="form-label">Text dbl-click:</label>
</div>
<div class="col">
<input type="text" class="form-control" id="tagTextDoubleclick" placeholder="Slash command on text double-click">
</div>
</div>
<div class="row mb-3">
<div class="col-3">
<label for="tagCommand" class="form-label">▸ click:</label>
</div>
<div class="col">
<input type="text" class="form-control" id="tagCommand" placeholder="Slash command on click">
</div>
</div>
<div class="row mb-3">
<div class="col-3" style="font-size: smaller;">
<label for="tagCommandShift" class="form-label">▸ shift-click:</label>
</div>
<div class="col">
<input type="text" class="form-control" id="tagCommandShift" placeholder="Slash command on shift-click">
</div>
</div>
</form>
<pre id="instanceTag"></pre>
<datalist id="colorslist">
<option value="#ffffff"> <!-- White -->
<option value="#000000"> <!-- Black -->
<option value="#FF5733"> <!-- Vivid Orange -->
<option value="#C70039"> <!-- Crimson Red -->
<option value="#900C3F"> <!-- Ruby Red -->
<option value="#FFC300"> <!-- Bright Yellow -->
<option value="#DAF7A6"> <!-- Pastel Green -->
<option value="#581845"> <!-- Deep Purple -->
<option value="#4CBB17"> <!-- Kelly Green -->
<option value="#0E6EB8"> <!-- Ocean Blue -->
<option value="#FFD700"> <!-- Gold -->
<option value="#B413EC"> <!-- Vivid Violet -->
<option value="#FF8C00"> <!-- Dark Orange -->
<option value="#FF6347"> <!-- Tomato Red -->
<option value="#40E0D0"> <!-- Turquoise -->
<option value="#6495ED"> <!-- Cornflower Blue -->
<option value="#008080"> <!-- Teal -->
<option value="#FF69B4"> <!-- Hot Pink -->
<option value="#A0522D"> <!-- Sienna -->
<option value="#6A5ACD"> <!-- Slate Blue -->
<option value="#20B2AA"> <!-- Light Sea Green -->
<option value="#7FFF00"> <!-- Chartreuse -->
<option value="#ff3333"> <!-- Light Red -->
<option value="#ffff33"> <!-- Light Yellow -->
<option value="#86ED78"> <!-- Light Green -->
<option value="#0066cc"> <!-- Light Blue -->
<option value="#ff8000"> <!-- Light Orange -->
<option value="#62D84E"> <!-- Light Lime -->
<option value="#009156"> <!-- Light Teal -->
<option value="#a0a0a0"> <!-- Light Grey -->
</datalist>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/sidepanel.js"></script>
</body>
</html>