-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsetting.html
265 lines (258 loc) · 13.8 KB
/
setting.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<div id="setting-section" class="setting-section">
<div class="text-center setting-panel hide">
<div class="title-bar wrapper">
<div class="title-bar-text-wrapper scalable">Setting</div>
<div class="title-bar-text scalable">Setting</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Restore"></button>
<button aria-label="Close"></button>
</div>
</div> <div class="setting-panel-content">
<ul class="theme-skin mb-1 radio-button-group" id="ui-style-panel">
<p class="option-label">UI Style</p>
<!-- TODO: make buttons equal widths -->
<div class="dropdown" id="dropdown-ui-style">
<button type="button" class="dropdown-label">
<p class="scalable">Select style</p>
</button>
<button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-angle-down dropdown-arrow"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:;" value="flat-style">Flat</a>
<a class="dropdown-item" href="javascript:;" value="nes-style">NES - Pixel</a>
<a class="dropdown-item" href="javascript:;" value="win98-style">Windows 98</a>
<a class="dropdown-item" href="javascript:;" value="neu-style">Neumorphism</a>
<a class="dropdown-item" href="javascript:;" value="glass-style">Glassmorphism</a>
<!-- <div class="dropdown-divider"></div> -->
<!-- <a class="dropdown-item" href="#">Separated link</a> -->
</div>
</div> </ul>
<div class="scrollable ">
<!-- STYLE CUSTOMIZER -->
<div id="customizer-panel">
<div class="customizer option-panel mb-3" id="neu-customizer">
<p class="option-label">Neu Custom</p>
<div class='range-slider'>
<label for='neu-distance-x'>Distance X</label>
<input class='range-slider__range' id='neu-distance-x' type='range' min='0' max='20' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> <div class='range-slider'>
<label for='neu-distance-y'>Distance Y</label>
<input class='range-slider__range' id='neu-distance-y' type='range' min='0' max='20' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> <div class='range-slider'>
<label for='blur'>Blur</label>
<input class='range-slider__range' id='blur' type='range' min='0' max='20' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> <div class='range-slider'>
<label for='neu-spread'>Spread</label>
<input class='range-slider__range' id='neu-spread' type='range' min='-5' max='5' step='0.1' value='-5'>
<span class='range-slider__value'>-5</span>
</div> <div class='range-slider'>
<label for='light-intensity'>Light intensity</label>
<input class='range-slider__range' id='light-intensity' type='range' min='0' max='20' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> <div class='range-slider'>
<label for='dark-intensity'>Dark intensity</label>
<input class='range-slider__range' id='dark-intensity' type='range' min='0' max='20' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> <div class='range-slider'>
<label for='surface-curvature'>Surface curvature</label>
<input class='range-slider__range' id='surface-curvature' type='range' min='-20' max='20' step='0.1' value='-20'>
<span class='range-slider__value'>-20</span>
</div>
<p>Border style</p>
<div class="radio-group-wrapper neu-border-style-options">
<div class='dui-radio wrapper radio-wrapper '>
<input class='state' type='radio' name='neu-border-style' id='solid-border' value='0'>
<label class='label ' for='solid-border'>
<div class='indicator'></div>
<span class='text'></span>
</label>
</div><div class='dui-radio wrapper radio-wrapper '>
<input class='state' type='radio' name='neu-border-style' id='double-border' value='1'>
<label class='label ' for='double-border'>
<div class='indicator'></div>
<span class='text'></span>
</label>
</div><div class='dui-radio wrapper radio-wrapper '>
<input class='state' type='radio' name='neu-border-style' id='dotted-border' value='2'>
<label class='label ' for='dotted-border'>
<div class='indicator'></div>
<span class='text'></span>
</label>
</div><div class='dui-radio wrapper radio-wrapper '>
<input class='state' type='radio' name='neu-border-style' id='dashed-border' value='3'>
<label class='label ' for='dashed-border'>
<div class='indicator'></div>
<span class='text'></span>
</label>
</div> </div>
<div class='range-slider'>
<label for='neu-border-width'>Border width</label>
<input class='range-slider__range' id='neu-border-width' type='range' min='0' max='10' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> <div class='range-slider'>
<label for='neu-border-brightness'>Border brightness</label>
<input class='range-slider__range' id='neu-border-brightness' type='range' min='-100' max='100' step='0.1' value='-100'>
<span class='range-slider__value'>-100</span>
</div> </div>
<div class="customizer" id="flat-customizer-in-progress">
<p class="option-label">Flat Custom</p>
</div>
<div class="customizer" id="glass-customizer">
<p class="option-label">Glass Custom</p>
<div class='range-slider'>
<label for='glass-transparency'>Transparency</label>
<input class='range-slider__range' id='glass-transparency' type='range' min='0' max='1' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> <div class='range-slider'>
<label for='glass-blur'>Blur</label>
<input class='range-slider__range' id='glass-blur' type='range' min='0' max='30' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> <div class='range-slider'>
<label for='glass-border-size'>Border size</label>
<input class='range-slider__range' id='glass-border-size' type='range' min='0' max='10' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> </div>
</div>
<!-- GLOBAL CUSTOMIZER -->
<div id="color-panel" class="option-panel mb-3">
<p class="option-label">Colour</p>
<div class="row px-4">
<div class="col-6 p-0">
<label for="highlight-color-picker">Primary</label>
<input type="color" id="highlight-color-picker" value="#0000ff">
</div>
<div class="col-6 p-0">
<label for="scheme-color-picker">Scheme</label>
<input type="color" id="scheme-color-picker" value="#f1f3f6">
</div>
</div>
<p>Classification</p>
<div class="row mt-1 px-4">
<div class="col-4 p-0 ">
<input class="color-picker" type="color" id="colorfull1-picker" value="#01724b">
</div>
<div class="col-4 p-0 ">
<input class="color-picker" type="color" id="colorfull2-picker" value="#b44700">
</div>
<div class="col-4 p-0">
<input class="color-picker" type="color" id="colorfull3-picker" value="#c40639">
</div>
</div>
</div>
<!-- BORDER -->
<div id="border-panel" class="option-panel mb-3">
<p class="option-label">Border</p>
<div class='range-slider'>
<label for='border-radius'>Radius</label>
<input class='range-slider__range' id='border-radius' type='range' min='0' max='50' step='0.1' value='0'>
<span class='range-slider__value'>0</span>
</div> </div>
<!-- FONT -->
<div id="font-panel" class="option-panel mb-4">
<p class="option-label">Text</p>
<div id="font-family-panel">
<p class="mb-0">Font</p>
<div class="dropdown" id="dropdown-font-family">
<button type="button" class="dropdown-label">
<p class="scalable">Agency FB</p>
</button>
<button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-angle-down dropdown-arrow"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:;" value="0">Agency FB</a>
<a class="dropdown-item" href="javascript:;" value="0">Style Script</a>
<a class="dropdown-item" href="javascript:;" value="0">Ubuntu</a>
<a class="dropdown-item" href="javascript:;" value="0">BioRhyme</a>
<a class="dropdown-item" href="javascript:;" value="0">Roboto</a>
<a class="dropdown-item" href="javascript:;" value="0">Special Elite</a>
<a class="dropdown-item" href="javascript:;" value="0">Press Start 2P</a>
<!-- <div class="dropdown-divider"></div> -->
<!-- <a class="dropdown-item" href="#">Separated link</a> -->
</div>
</div> <div class='range-slider'>
<label for='range-slider_size-scale'>Size scale</label>
<input class='range-slider__range' id='range-slider_size-scale' type='range' min='0.5' max='1.4' step='0.01' value='0.5'>
<span class='range-slider__value'>0.5</span>
</div> <div class='range-slider'>
<label for='range-slider_line-height'>Line height</label>
<input class='range-slider__range' id='range-slider_line-height' type='range' min='1' max='2' step='0.05' value='1'>
<span class='range-slider__value'>1</span>
</div> <div class='range-slider'>
<label for='range-slider_letter-spacing'>Letter spacing</label>
<input class='range-slider__range' id='range-slider_letter-spacing' type='range' min='-10' max='20' step='0.1' value='-10'>
<span class='range-slider__value'>-10</span>
</div> </div>
</div>
<!-- BACKGROUND -->
<div id="background-panel" class="option-panel mb-4">
<p class="option-label">Background</p>
<div id="outer-background-panel">
<p> Page </p>
<div class="dropdown" id="dropdown-outer-bg">
<button type="button" class="dropdown-label">
<p class="scalable">None</p>
</button>
<button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-angle-down dropdown-arrow"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:;" value="0">None</a>
<a class="dropdown-item" href="javascript:;" value="0">Liquid cheese</a>
<a class="dropdown-item" href="javascript:;" value="0">Protruding squares</a>
<a class="dropdown-item" href="javascript:;" value="0">Wintery sunburst</a>
<a class="dropdown-item" href="javascript:;" value="0">Animated gradient</a>
<a class="dropdown-item" href="javascript:;" value="0">Linear gradient</a>
<a class="dropdown-item" href="javascript:;" value="0">Vanishing stripes</a>
<a class="dropdown-item" href="javascript:;" value="0">Windows98</a>
<a class="dropdown-item" href="javascript:;" value="0">WindowsXP</a>
<!-- <div class="dropdown-divider"></div> -->
<!-- <a class="dropdown-item" href="#">Separated link</a> -->
</div>
</div> </div>
<div id="inner-background-panel" class="mt-3">
<p> Containers </p>
<div class="dropdown" id="dropdown-inner-bg">
<button type="button" class="dropdown-label">
<p class="scalable">None</p>
</button>
<button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-angle-down dropdown-arrow"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:;" value="0">None</a>
<a class="dropdown-item" href="javascript:;" value="0">Liquid cheese</a>
<a class="dropdown-item" href="javascript:;" value="0">Protruding squares</a>
<a class="dropdown-item" href="javascript:;" value="0">Wintery sunburst</a>
<a class="dropdown-item" href="javascript:;" value="0">Animated gradient</a>
<a class="dropdown-item" href="javascript:;" value="0">Linear gradient</a>
<a class="dropdown-item" href="javascript:;" value="0">Vanishing stripes</a>
<a class="dropdown-item" href="javascript:;" value="0">Windows98</a>
<a class="dropdown-item" href="javascript:;" value="0">WindowsXP</a>
<!-- <div class="dropdown-divider"></div> -->
<!-- <a class="dropdown-item" href="#">Separated link</a> -->
</div>
</div> </div>
</div>
</div>
<div class="setting-save-panel">
<label class="toggle-label wrapper toggle-wrapper ">
<div class="toggle" id="toggle_save">
<input class="toggle-state " type="checkbox" value="" />
<div class="indicator"></div>
</div>
<div class="label-text">Save</div>
</label> <!-- TODO: Random button-->
</div>
</div>
</div>
</div>