-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
320 lines (266 loc) · 10.4 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
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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<html lang="en">
<head>
<title>TUF RGB Lively Wallpaper - berkantkz</title>
<!-- meta -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="ASUS TUF RGB Logo for Lively Wallpaper" />
<meta name="keywords"
content="berkantkz, berkant, lorde help me, asus rgb logo, lively wallpaper asus, lively wallpaper tuf, tuf rgb logo" />
<meta name="author" content="berkantkz">
<style>
* {
user-select: none !important;
}
.dark {
background: #000;
color: #fff;
}
.light {
background: #d3d3d3;
color: #000;
}
.visibile {
visibility: visible;
}
.hidden {
visibility: hidden;
}
.static {
animation-name: static !important;
}
.breathing {
animation-name: breathing !important;
animation-duration: 2s !important;
}
.strobbing {
animation-name: strobbing !important;
animation-duration: .325s !important;
}
.colorCycle {
animation-name: colorCycle !important;
}
body,
html {
margin: 0;
padding: 0;
background: #000;
height: 100%;
width: 100%;
accent-color: rgb(245, 222, 179);
}
.logo {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.logo svg {
fill: red;
animation-name: colorCycle;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
stroke: none;
stroke-width: 0;
transform: scale(1);
}
@keyframes colorCycle {
0% {
fill: #fc0e0d;
}
12% {
fill: #fc5d0d;
}
24% {
fill: #fce50d;
}
36% {
fill: #10fc0d;
}
48% {
fill: #0dfcad;
}
60% {
fill: #0d28fc;
}
72% {
fill: #a50dfc;
}
84% {
fill: #fc0dc7;
}
100% {
fill: #fc0e0d;
}
}
@keyframes static {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes breathing {
0% {
opacity: 100%;
}
100% {
opacity: 0%;
}
}
@keyframes strobbing {
0% {
opacity: 10%;
}
100% {
opacity: 100%;
}
}
.controllers {
position: absolute;
top: 10;
right: 10;
display: none;
flex-direction: column;
text-align: right;
}
.controllers .modes {
display: grid;
}
.controllers .backgrounds {
display: grid;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117578942-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-117578942-3');
</script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body class="dark">
<div class="controllers">
<div>
<span>Logo size</span>
<div>
<label for="size">Size</label>
<input name="size" type="range" min="0.5" max="2" step="0.5"
onchange="logo.css('transform', 'scale(' + this.value + ')')" />
</div>
</div>
<div class="modes">
<span>Mode</span>
<div>
<label for="static">Static</label>
<input id="static" type="radio" name="mode" title="Static"
onchange="logo.removeClass(); logo.toggleClass('static'); ; $('.colors').removeClass('hidden'); $('.colors').addClass('visible'); $('.speeds').removeClass('visible'); $('.speeds').addClass('hidden')" />
</div>
<div>
<label for="breathing">Breathing</label>
<input id="breathing" type="radio" name="mode" title="Breathing"
onchange="logo.removeClass(); logo.toggleClass('breathing'); $('.colors').removeClass('hidden'); $('.colors').addClass('visible'); $('.speeds').removeClass('hidden'); $('.speeds').addClass('visible')" />
</div>
<div>
<label for="strobbing">Strobbing</label>
<input id="strobbing" type="radio" name="mode" title="Strobbing"
onchange="logo.removeClass(); logo.toggleClass('strobbing'); $('.colors').removeClass('hidden'); $('.colors').addClass('visible'); $('.speeds').removeClass('visible'); $('.speeds').addClass('hidden')" />
</div>
<div>
<label for="cycle">Color cycle</label>
<input id="cycle" type="radio" name="mode" title="Color cycle"
onchange="logo.removeClass(); logo.toggleClass('colorCycle'); $('.colors').removeClass('visible'); $('.colors').addClass('hidden'); $('.speeds').removeClass('hidden'); $('.speeds').addClass('visible')"
checked />
</div>
</div>
<div class="colors hidden">
<label for="color">Logo color</label>
<input id="color" type="color" value="logo.css('color')"
onchange="logo.css('fill', this.value)" />
</div>
<div class="speeds visible">
<label for="speed">Speed</label>
<input id="speed" min="1" max="3" value="2" type="range"
onchange="logo.css('animation-duration', this.value + 's !important');" />
</div>
<div class="backgrounds">
<span>Background</span>
<div>
<label for="background-light">Light</label>
<input id="background-light" type="radio" name="background" title="Light"
onchange="$('body').removeClass('dark'); $('body').addClass('light')" />
</div>
<div>
<label for="background-dark">Dark</label>
<input id="background-dark" type="radio" name="background" title="Dark"
onchange="$('body').removeClass('light'); $('body').addClass('dark')" checked />
</div>
<div class="strokes">
<div>
<label for="stroke" title="Stroke">Stroke</label>
<input name="stroke" type="checkbox"
onchange="$('#strokeColorPicker').removeClass(); if($(this)[0].checked) {$('#strokeColorPicker').addClass('visible'); logo.css('stroke', '#fff')} else {$('#strokeColorPicker').addClass('hidden'); logo.css('stroke', '#0000')}" />
</div>
<div class="hidden" id="strokeColorPicker">
<div>
<label for="strokeColor">Stroke color</label>
<input name="strokeColor" type="color" onchange="logo.css('stroke', this.value)" />
</div>
<div>
<label for="strokeWidth">Stroke width</label>
<input name="strokeWidth" type="range" min="1" max="16" value="5"
onchange="logo.css('stroke-width', this.value + 'px')" />
</div>
</div>
</div>
</div>
</div>
<div class="logo">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="203.000000pt" height="130.000000pt"
viewBox="0 0 203.000000 130.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,130.000000) scale(0.100000,-0.100000)">
<path d="M76 1249 c-19 -51 -13 -97 25 -171 28 -55 24 -57 -25 -9 -51 50 -51
49 -61 -67 -7 -80 -7 -82 25 -134 19 -29 47 -68 64 -85 36 -40 27 -42 -30 -8
l-43 25 16 -52 c28 -97 80 -183 169 -279 l52 -57 7 36 c14 76 58 126 120 138
70 13 120 -39 108 -112 -5 -30 -20 -52 -64 -96 l-57 -57 32 -24 c65 -49 266
-164 266 -152 0 3 -15 25 -34 49 -70 91 -97 246 -56 314 23 38 27 39 57 10
l23 -21 0 34 c0 39 -25 208 -31 212 -2 2 -30 8 -62 15 -185 37 -361 206 -443
427 -14 38 -29 79 -33 90 -6 16 -11 12 -25 -26z" />
<path d="M1916 1230 c-42 -140 -128 -274 -232 -360 -67 -56 -173 -107 -238
-115 l-54 -7 -10 -72 c-6 -39 -14 -98 -17 -131 l-7 -60 25 30 c21 25 29 28 44
19 28 -17 45 -99 34 -165 -10 -61 -47 -142 -90 -198 -14 -19 -21 -32 -16 -30
59 25 251 140 294 175 2 2 -19 26 -47 53 -56 54 -72 84 -72 135 0 74 91 105
163 56 40 -27 54 -52 63 -111 l7 -40 39 38 c83 81 177 241 194 328 l7 38 -39
-27 c-56 -38 -62 -32 -16 18 60 65 73 97 70 167 l-3 59 -34 -42 c-52 -65 -133
-128 -224 -175 -111 -58 -127 -54 -32 8 144 94 292 271 271 325 -7 16 -10 14
-28 -21 -22 -43 -47 -75 -58 -75 -4 0 1 18 12 39 11 22 26 63 33 91 11 43 11
55 -2 80 -8 17 -16 30 -17 30 -1 0 -10 -27 -20 -60z" />
<path d="M697 823 c33 -163 42 -371 19 -441 -28 -84 3 -168 95 -261 44 -43
150 -111 174 -111 3 0 5 69 5 153 0 141 -2 153 -20 164 -26 17 -46 59 -53 113
-5 40 12 200 28 270 6 22 2 27 -30 39 -42 15 -130 83 -192 147 -23 24 -43 44
-46 44 -2 0 7 -53 20 -117z" />
<path d="M1304 889 c-56 -58 -121 -108 -180 -138 l-40 -21 18 -87 c33 -162 16
-292 -41 -323 -20 -10 -21 -19 -21 -160 0 -83 2 -150 6 -150 18 0 98 45 141
79 61 48 129 146 138 200 4 25 0 69 -11 118 -15 70 -16 91 -4 213 7 74 21 175
31 225 10 49 17 90 16 92 -2 1 -25 -20 -53 -48z" />
</g>
</svg>
</div>
<script>
var logo = $('.logo svg');
var controllers = $('.controllers');
$('.logo svg').mousedown(function (e) {
if (e.which == 1) {
var s = controllers.css('display');
s == 'none' ? controllers.css('display', 'flex') : controllers.css('display', 'none');
}
});
</script>
</body>
</html>