-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
634 lines (603 loc) · 33.5 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
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="msvalidate.01" content="07881556136B2A1A3499D8DE70948965" />
<meta name="description" content="Ruddernation Designs" />
<meta name="keywords" content="ruddernation,tinychat,text converter,HTML5 canvas,HTML5,Ruddernation Designs,GitHub" />
<meta name="author" content="Ruddernation Designs" />
<meta name="Copyright" content="Ruddernation Designs"/>
<title>Ruddernation™ Designs</title>
<link rel="shortcut icon" href="assets/images/ico/favicon.ico">
<link rel="stylesheet" href="assets/css/main.css" />
<link href="assets/css/eu-notice.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.ywxi.net/js/1.js" async></script>
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="homepage is-preload" oncontextmenu="return false">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner">
<header>
<h1><a href="/" id="logo">Ruddernation Designs</a></h1>
<hr />
<p>Play time is never over!</p>
</header>
<footer>
<a href="#banner" class="button circled scrolly">Touch!</a>
<br>
</footer>
</div>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>
<a href="#">Canvas Effects</a>
<ul>
<li><a href="/canvas/ball" target="_blank">The Blob</a></li>
<li><a href="/canvas/ball2" target="_blank">Balls Balls Balls</a></li>
<li><a href="/canvas/drawing" target="_blank">Drawing Pad</a></li>
<li><a href="/canvas/fire" target="_blank">Fire</a></li>
<li><a href="/canvas/illusions" target="_blank">Illusions</a></li>
<li><a href="/canvas/matrix" target="_blank">Matrix</a></li>
<li><a href="/canvas/plasma" target="_blank">Plasma</a></li>
<li><a href="/canvas/snake" target="_blank">Skiing Snake</a></li>
<li><a href="/canvas/snake2" target="_blank">Colourful Snake</a></li>
<li><a href="/canvas/spinicle" target="_blank">Spinicle</a></li>
<li><a href="/canvas/water" target="_blank">Water</a></li>
<li><a href="/canvas/watertext" target="_blank">Water Text</a></li>
</ul>
</li>
<li><a href="#">Tinychat</a>
<ul>
<li><strike><a href="#" title="Currently unavailable">Video Chat</a></strike></li>
<li><strike><a href="#" title="Currently unavailable">Tinychat API</a></strike></li>
<li><a href="https://github.com/Tinychat" target="_blank" title="Anything Tinychat, should be on here.">Tinychat Docs</a></li>
</ul>
</li>
<li><a href="/repositories">Repositories</a>
<ul>
<li><a href="https://bit.ly/3BQUeHU" target="_blank" title="This is a large selection of Dummies in PDF format.">Dummies books</a></li>
<li><a href="https://bit.ly/3DQzuAD" target="_blank" title="Video Hacking Course">Hacking Course</a></li>
<li><a href="https://bit.ly/3pci3WW" target="_blank" title="A list of URLs Adobe uses, this is for your hosts file.">Adobe URLs</a></li>
<li><a href="https://gist.github.com/Ruddernation-Designs" target="_blank" title="This is my Gist page.">GitHub Gists</a></li>
</ul>
</li>
<li>
<a href="#">Downloads</a>
<ul>
<li><a href="#">WordPress</a>
<ul>
<li><a href="https://bit.ly/3j9SrX4" target="_blank" title="A WordPress plugin created by me.">Tinychat API</a></li>
<li><a href="https://bit.ly/3BPD8d9" target="_blank" title="A WordPress plugin created by me.">Video Chat</a></li>
<li><a href="https://bit.ly/3n0RpNX" target="_blank" title="A WordPress plugin created by me.">Buddypress Groups</a></li>
<li><a href="https://bit.ly/2YPsQLE" target="_blank" title="A WordPress plugin created by me.">Directory (old)</a></li>
<li><a href="https://bit.ly/3BJ1Z2m" target="_blank" title="A WordPress plugin created by Userplane but edited by me and Brajesh.">Userplane (old)</a></li>
</ul>
</li>
<li><a href="#">Recommended</a>
<ul>
<li><a href="https://www.7-zip.org/" target="_blank" title="7-zip is great for encrypting/compressing/extracting files">7Zip</a></li>
<li><a href="https://www.ccleaner.com/" target="_blank" title="Great for cleaning your system.">CCleaner</a></li>
<li><a href="https://bit.ly/3mWqOBH" target="_blank" title="Can you run Windows 11? Try this to find out.">Windows 11</a></li>
<li><a href="https://bit.ly/3mWdFsx" target="_blank" title="If you've got a Ryzen processor then this is for you.">Ryzen Master</a></li>
<li><a href="https://bit.ly/30nLuLi" target="_blank" title="If you've got the LED fan, then you can control it with this.">Wraith Prism</a></li>
<li><a href="https://www.bluestacks.com/" target="_blank" title="allow you to run an Android device on your PC">BlueStacks</a></li>
</ul>
</li>
<li><a href="#">Gaming</a>
<ul>
<li><a href="https://store.steampowered.com/" target="_blank" title="I'm on Steam, search ruddernation">Steam</a></li>
<li><a href="https://www.origin.com/gbr/en-us/store" target="_blank" title="I'm on Origin/EA, search ruddernation">Origin</a></li>
<li><a href="https://www.ea.com/en-gb/ea-play" target="_blank" title="I'm on Origin/EA, search ruddernation">EA Play</a></li>
<li><a href="https://www.xbox.com/en-GB/apps/xbox-app-for-pc" target="_blank" title="Great for PC games">Xbox App</a></li>
<li><a href="https://www.nvidia.com/en-gb/geforce/geforce-experience/" target="_blank" title="This will sort your system for when you're recording and it'll also stream.">Nvidia Experience</a></li>
<li><a href="https://gaijin.net/en" target="_blank" title="Bit of War Thunder?!">Gaijin</a></li>
<li><a href="https://discord.com/" target="_blank" title="I'm on Discord, just search ruddernation">Discord</a></li>
<li><a href="https://obsproject.com/" target="_blank" title="Allows you to record/stream your monitors.">OBS</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Help</a>
<ul>
<li><a href="/cookie-policy" title="View my cookie policy.">Cookies Policy</a></li>
<li><a href="/privacy-policy" title="View my privacy policy.">Privacy Policy</a></li>
<li><a href="/tac" title="View my terms and conditions.">Terms and Conditions</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Banner -->
<section id="banner">
<header>
<h2>Here is a selection of some of my software</h2>
<p>All my software can be found on my <a href="https://github.com/Ruddernation-Designs" target="_blank" title="Ruddernation-Designs (Rudder)">Github page</a>.
<br>Info: Most links on the website are now served by <a href="https://bitly.com" target="_blank" title="Make your links shorter with this.">Bitly</a>.
<br>I've now added a guide to change your background colours.<br>
I've also added a <a href="/#hex2rgb">hex to RGB converter</a>.<br>
Simply click on the image for the software and it'll take you to my GitHub page where the code is hosted.
<br>Oh, Just scroll to the right when you're on the software or canvas effects.
Remember to check out my text to ASCII/Biary/Hex <a href="/#converter" >Converter</a><br>
I've now added a password generator, try it below.<br>
</p>
<!-- Password Generater Start -->
<div class="wrapper style1">
<section id="converter" class="container special">
<header>
<h2>Random Password Generator</h2>
<h4>It generates password up to 50 characters long, Using the characters below<br>
0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*([]){}~:;<>?/\|\"ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
If you'd like more characters or another language(s) added then please <a href="mailto:[email protected]">contact</a> me.</h4>
</header>
<br>
<p>
<form name="password">
<input type="text" class="bar" name="password" placeholder="Create password" id="password" readonly>
<br>
<input type="button" class="button"onclick="genPassword()" value="Generate" />
<input type="button" class="button" onclick="copyPassword()" value="Copy" />
</p>
</form>
<br>
</div>
</div>
<!-- Password Generater End -->
</header>
</section>
<!-- Software Carousel -->
<section class="carousel">
<div class="reel">
<article>
<a href="https://github.com/Ruddernation-Designs/Tinychat-API" class="image featured" target="_blank" title="This WordPress plugin allows you to see Tinychat user data."><img src="assets/images/pic01.jpg" alt="tinychat-api" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/Tinychat-API" target="_blank" title="This WordPress plugin allows you to see Tinychat user data.">Tinychat API</a></h3>
</header>
<p>This now grabs Tinychat API and displays the users/rooms details.</p>
</article>
<article>
<a href="https://github.com/Ruddernation-Designs/Group-Chat-for-BuddyPress" class="image featured" target="_blank" title="This is a WordPress plugin that allows users to use Tinychat"><img src="assets/images/pic02.jpg" alt="group-chat" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/Group-Chat-for-BuddyPress" target="_blank" title="This is a WordPress plugin that allows users to use Tinychat">Group Chat For Buddypress</a></h3>
</header>
<p>For use with BuddyPress to add Tinychat video chat to Groups.</p>
</article>
<article>
<a href="https://github.com/Ruddernation-Designs/Tinychat-Video-Chat-WordPress" class="image featured" target="_blank" title="This WordPress plugin allows you to use Tinychat on your own website."><img src="assets/images/pic03.jpg" alt="" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/Tinychat-Video-Chat-WordPress" target="_blank" title="This WordPress plugin allows you to use Tinychat on your own website.">Tinychat for WordPress</a></h3>
</header>
<p>TinyChat full screen video chat for WordPress/BuddyPress.</p>
</article>
<article>
<a href="https://github.com/Ruddernation-Designs/html5-contact-form-with-Google-maps" class="image featured" target="_blank" title="HTML5 contact for with Google maps"><img src="assets/images/pic04.jpg" alt="" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/html5-contact-form-with-Google-maps" target="_blank" title="HTML5 contact for with Google maps">HTML5 Contact Form</a></h3>
</header>
<p>This PHP contact form in HTML5 with Google maps.</p>
</article>
<article>
<a href="https://github.com/Ruddernation-Designs/JavaScript-Colour-changers" class="image featured" target="_blank" title="JavaScript for your website."><img src="assets/images/pic05.jpg" alt="JavaScript-Colour-changers" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/JavaScript-Colour-changers" title="JavaScript for your website.">JavaScript Colour Changers</a></h3>
</header>
<p>These are 2 colour changers wrote in JavaScript.</p>
</article>
<article>
<a href="https://github.com/Ruddernation-Designs/Matrix" class="image featured" target="_blank" title="Shows the Matrix code on your website."><img src="assets/images/pic06.jpg" alt="Matrix" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/Matrix" target="_blank" title="Shows the Matrix code on your website.">Matrix Script</a></h3>
</header>
<p>This is a Matrix display wrote in C++.(The movie)</p>
</article>
<article>
<a href="https://github.com/Ruddernation-Designs/Ad-Blocker-Checker" class="image featured" target="_blank" title="Checks if a user is using an ad-blocker and shows them a message."><img src="assets/images/pic07.jpg" alt="Ad-Blocker-Checker" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/Ad-Blocker-Checker" target="_blank" title="Checks if a user is using an ad-blocker and shows them a message.">Ad-blocker Checker</a></h3>
</header>
<p>This checks if a user is using an ad blocker.</p>
</article>
<article>
<a href="https://github.com/Ruddernation-Designs/Userplane-for-WordPress" class="image featured" target="_blank" title="Userplane chat for WordPress - This no longer works."><img src="assets/images/pic08.jpg" alt="Userplane-for-WordPress" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/Userplane-for-WordPress" target="_blank" title="Userplane chat for WordPress - This no longer works.">Userplane for WordPress</a></h3>
</header>
<p>Collection of Userplane files for use with WordPress.<br></p>
</article>
<article>
<a href="https://github.com/Ruddernation-Designs/WannaCry-Decompiled" class="image featured" target="_blank" title="This is the code that made everone update their systems to stop the attacks, This has been decompiled and is ready to view."><img src="assets/images/pic09.jpg" alt="WannaCry-Decompiled" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/WannaCry-Decompiled" target="_blank" title="This is the code that made everone update their systems to stop the attacks, This has been decompiled and is ready to view.">WannaCry Decompiled</a></h3>
</header>
<p>WannaCry|WannaDecrypt0r decompiled.<br></p>
</article>
<article>
<a href="https://github.com/Ruddernation-Designs/Simple-popup-contact-form" class="image featured" target="_blank" title="Popup contact form"><img src="assets/images/pic10.jpg" alt="Simple-popup-contact-form" /></a>
<header>
<h3><a href="https://github.com/Ruddernation-Designs/Simple-popup-contact-form" target="_blank" title="Popup contact form">Popup Contact Form</a></h3>
</header>
<p>A contact form wrote in PHP/HTML/JS/CSS3.</p>
</article>
</div>
</section>
<!-- Main -->
<div class="wrapper style2">
<br>
<article id="canvas" class="container special">
<header>
<h2>HTML5 Canvas Experiments</h2>
<p>
HTML5 has brought some exciting new advantages to the web development universe.
<br>The canvas feature allows you to render graphics that are powered by Javascript, so it'll work on almost every device.</p>
<p>What I've got below are a number of canvas effects that are sure to blow your mind.
</p>
</header>
<footer>
</footer>
</article>
<!-- Canvas Carousel -->
<section class="carousel">
<div class="reel">
<article>
<a href="/canvas/ball" class="image featured" target="_blank" title="Double click/tap to split/drag/merge the blob."><img src="assets/images/the-blob.jpg" alt="The Blob"/></a>
<header>
<h3><a href="/canvas/ball" target="_blank" title="Double click/tap to split/drag/merge the blob.">The Blob</a></h3>
</header>
<p>Double click/tap to split/drag/merge the blob.</p>
</article>
<article>
<a href="/canvas/ball2" class="image featured" target="_blank" title="Double click to change colours/grab/swing/hold it."><img src="assets/images/ball2.jpg" alt="balls balls balls"/></a>
<header>
<h3><a href="/canvas/ball2" target="_blank" title="Double click to change colours/grab/swing/hold it.">Balls Balls Balls</a></h3>
</header>
<p>Double click to change colours/grab/swing/hold it.</p>
</article>
<article>
<a href="/canvas/drawing" class="image featured" target="_blank" title="This has various pen types and you can select any colour."><img src="assets/images/drawing.jpg" alt="drawing"/></a>
<header>
<h3><a href="/canvas/drawing" target="_blank" title="This has various pen types and you can select any colour.">Drawing Pad</a></h3>
</header>
<p>This has various pen types and you can select any colour.</p>
</article>
<article>
<a href="/canvas/fire" class="image featured" target="_blank" title="Hold on the screen/mouse and move around to create fire."><img src="assets/images/fire.jpg" alt="fire"/></a>
<header>
<h3><a href="/canvas/fire" target="_blank" title="Hold on the screen/mouse and move around to create fire.">Fire</a></h3>
</header>
<p>Hold on the screen/mouse and move around to create fire.</p>
</article>
<article>
<a href="/canvas/illusions" class="image featured" target="_blank" title="Drag around the screen to create your masterpiece"><img src="assets/images/illusions.jpg" alt="illusions"/></a>
<header>
<h3><a href="/canvas/illusions" target="_blank" title="Drag around the screen to create your masterpiece">Illusions</a></h3>
</header>
<p>Drag around the screen to create your masterpiece.</p>
</article>
<article>
<a href="/canvas/matrix" class="image featured" target="_blank" title="This is the Matrix wrote in JavaScript."><img src="assets/images/matrix.jpg" alt="matrix"/></a>
<header>
<h3><a href="/canvas/matrix" target="_blank" title="This is the Matrix wrote in JavaScript.">The Matrix Code</a></h3>
</header>
<p>This is the Matrix wrote in JavaScript, straight from the movie.</p>
</article>
<article>
<a href="/canvas/plasma" class="image featured" target="_blank" title="Move the point side to side to create raining plasma."><img src="assets/images/plasma.jpg" alt="plasma"/></a>
<header>
<h3><a href="/canvas/plasma" target="_blank" title="Move the point side to side to create raining plasma.">Plasma/Melting</a></h3>
</header>
<p>Move the point side to side to create raining plasma.</p>
</article>
<article>
<a href="/canvas/snake" class="image featured" target="_blank" title="Move your pointer around the screen, This has pastel colours."><img src="assets/images/snake1.jpg" alt="snake"/></a>
<header>
<h3><a href="/canvas/snake" target="_blank" title="Move your pointer around the screen, This has pastel colours.">Skinny Snake</a></h3>
</header>
<p>Move your pointer around the screen, This has pastel colours.</p>
</article>
<article>
<a href="/canvas/snake2" class="image featured" target="_blank" title="This is like the other snake only thicker!"><img src="assets/images/snake2.jpg" alt="snake2"/></a>
<header>
<h3><a href="/canvas/snake2" target="_blank" title="This is like the other snake only thicker!">Colourful Snake</a></h3>
</header>
<p>This is like the other snake only thicker!</p>
</article>
<article>
<a href="/canvas/spinicle" class="image featured" target="_blank" title="Hold the screen and create numerous spinicles."><img src="assets/images/spinicle.jpg" alt="spinicle"/></a>
<header>
<h3><a href="/canvas/spinicle" target="_blank" title="Hold the screen and create numerous spinicles.">Spinicle</a></h3>
</header>
<p>Hold the screen and create numerous spinicles.</p>
</article>
<article>
<a href="/canvas/water" class="image featured" target="_blank" title="hold or drag or type to create ripples."><img src="assets/images/water.jpg" alt="water"/></a>
<header>
<h3><a href="/canvas/water" target="_blank" title="hold or drag or type to create ripples.">Water</a></h3>
</header>
<p>hold or drag or type to create ripples. Enjoy.</p>
</article>
<article>
<a href="/canvas/watertext" class="image featured" target="_blank" title="Type anything then press enter and watch it splash!"><img src="assets/images/water-text.jpg" alt="watertext"/></a>
<header>
<h3><a href="/canvas/watertext" target="_blank" title="Type anything then press enter and watch it splash!">Water Text</a></h3>
</header>
<p>Type anything then press enter and watch it splash!</p>
</article>
</div>
</section>
<!-- Converter section start -->
<div class="wrapper style1">
<section id="converter" class="container special">
<header>
<h2>Converter</h2>
<p>This will convert plain text to ASCII, Binary and Hex.</p>
</header>
<form name="ascii">
<br>
<input class="bar" type="text" name="strv" size="30" onKeyUp="change(this)" placeholder="String"><br>
<input class="answerbutton" type="text" name="decv" readonly="readonly" placeholder="Decimal/ASCII Value"><br>
<input class="answerbutton" type="text" name="binv" readonly="readonly" placeholder="Binary"><br>
<input class="answerbutton" type="text" name="hexv" readonly="readonly" placeholder="Hexadecimal"><br></form>
<br>
</section>
</div>
<!-- Colour Changer Help Start -->
<div class="wrapper style2">
<br>
<article id="canvas" class="container special">
<header>
<h2>Want background colour rotation?</h2>
<h4>
There are multiple ways of doing this, but today I will show you 3 ways how to do it in JavaScript using the jQuery library.</h4>
<br><h4>
* Method 1, Create yourself a webpage in html, for example: index.html<br>
Using jQuery 3.1.1, so add this to your head section https://code.jquery.com/jquery-3.1.1.min.js<br>
Now copy the script below and put it in between some script tags, <br>
This will rotate colours from white to black at 1 second intervals,<br>
It's set for the body to change colour, so any body colour with rotate colours, it also include transparency so you can have between 0.00 - 1.00,<br>
You can also edit the colour ranges it uses, any number between 0 - 255.</h4>
<div class="codebox">
<code>
var rgba = function() {
return 'rgba(' +
Math.ceil(Math.random() * 255) + ',' +
Math.ceil(Math.random() * 255) + ',' +
Math.ceil(Math.random() * 255) + ',' +
(Math.random().toPrecision(1)) + ')';
};
setInterval(function() {
$('body').css('background-color',rgba());
},1000);
</code>
</div><h4>
Here is a <a href="https://github.com/Ruddernation-Designs/ruddernation-designs.github.io/blob/master/jquery-colour-rotation/index.html" target="_blank" title="jQuery Colour Rotation">link </a>with the script for you.</h4>
<h4>
* Method 2 of changing a background/element colour.<br>
Simply copy the code below and paste on to your webpage.<br>
This also uses a button to change the colour.</h4><br>
<div class="codebox">
<code>
$( document ).ready(function(){
$( "#colourchanger" ).on( "click" , function(){
var color = '#'+Math.floor( Math.random()*16777215 ).toString( 16 );
$( "body" ).css( {"background-color" : color } );})});
</code>
</div><h4>
Here is a <a href="https://github.com/Ruddernation-Designs/ruddernation-designs.github.io/blob/master/colour-changer/index.html" target="_blank" title="Colour Rotation">link </a>with the script for you.</h4>
<h4>
* Method 3 of changing a background/element colour using pad<br>
Simply copy the code below and paste on to your webpage.<br>
This also uses a button to change the colour.</h4><br>
<div class="codebox">
<code>
function pad(s,i,c,r){ i=i+1-s.length;
if(i<1)return s;
c=new Array(i).join(c||" ");
return r?s+c:c+s;
};
pad("6",6,"6");
pad("0",0,"0",true);
$( document ).ready(function(){
$( "#colourchanger" ).on( "click" , function(){
var color = "#"+pad((Math.random()*0x1000000<<0).toString(16),6,"6")
$( "body" ).css( {"background-color" : color } );})});
</code>
</div><h4>
Here is a <a href="https://github.com/Ruddernation-Designs/ruddernation-designs.github.io/tree/master/colour-changer" target="_blank" title="Pad Colour Rotation">link </a>with the script for you.</h4>
<br><br>
<!-- Google Ads -->
<?php include "ads/google.html" ?>
<!-- Google Ads End -->
</header>
</article>
<!-- Colour Changer Help End -->
<!-- Hex2RGB Start -->
<div class="wrapper style2">
<br>
<article id="hex2rgb" class="container special">
<header>
<h2>Hex to RGB Colour Converter</h2>
<h4>Enter a 6 digit hex colour code and press the Convert button for your RGB output.<br>
It'll display the colour below the form.</h4>
<form name="hex2rgb">
<br>
<br>
<input class="answerbutton" type="text" name="redcolour" id="redcolour" readonly="readonly" placeholder=" Red: " /><br>
<input class="answerbutton" type="text" name="greencolour" id="greencolour" readonly="readonly" placeholder="Green: " /><br>
<input class="answerbutton" type="text" name="bluecolour" id="bluecolour" readonly="readonly" placeholder="Blue: " /><br>
<input class="answerbutton" type="text" name="csscolour" id="csscolour" readonly="readonly" placeholder="RGB colour code: " /><br>
</form>
<input type="button" title="Convert" class="button" name="calc" onclick="calc()" value="convert" tabindex="4" >
<input type="reset" title="Reset" class="button" name="resets" onclick="resets()" value="reset" tabindex="5" ><br><br>
<h4>Colour Preview</h4>
<div id="divpreview" class="divp"><span id=""></span></div>
<br>
</header>
</article>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<!-- Top Pages -->
<section class="col-4 col-12-mobile">
<header>
<h2 class="icon solid fa-link circled" title="Top Links"><span class="label">Top Pages</span></h2>
</header>
<ul class="divided">
<li>
<article class="post stub">
<header>
<h3><a href="/repositories" target="_blank" title="Repositories">Repositories</a></h3>
</header>
<span class="timestamp" title="Date it was last modified.">03 December 2022</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="/canvas/drawing" target="_blank" title="Drawing Pad">Drawing Pad</a></h3>
</header>
<span class="timestamp" title="Date it was last modified.">03 December 2022</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="/chat" target="_blank" title="Tinychat">Tinychat Video Chat</a></h3>
</header>
<span class="timestamp" title="Date it was last modified.">03 December 2022</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="/canvas/ball" target="_blank" title="The Blob">The Blob</a></h3>
</header>
<span class="timestamp" title="Date it was last modified.">03 December 2021</span>
</article>
</li>
</ul>
</section>
<!-- Top Downloads -->
<section class="col-4 col-12-mobile">
<header>
<h2 class="icon solid fa-download circled" title="Top Downloads"><span class="label">Top Downloads</span></h2>
</header>
<ul class="divided">
<li>
<article class="post stub">
<header>
<h3><a id="bannerLink" href="https://www.techspot.com/downloads/6521-virtual-drive.html" title="Want to have extra drives on your system without all the physical stuff? Then this is for you." target="_blank">Virtual Drive Software</a></h3>
</header>
<span class="timestamp" title="Date it was last modified.">03 December 2022</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="https://www.7-zip.org/" target="_blank" title="7-zip is great for encrypting/compressing/extracting files">7-Zip 64bit</a></h3>
</header>
<span class="timestamp" title="Date it was last modified.">03 December 2022</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="https://www.cpuid.com/softwares/cpu-z.html" title="This will give you all sorts of information on your CPU." target="_blank">CPU-Z version 1.97</a></h3>
</header>
<span class="timestamp" title="Date it was last modified.">03 December 2022</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3><a href="../downloads/WpePro9.7z" title="Download Wpe Pro 9.0x" target="_blank">Wpe Pro 9</a></h3>
</header>
<span class="timestamp" title="Date it was last modified.">08 January 2023</span>
</article>
</li>
</ul>
</section>
<!-- Canvas Experiments -->
<section class="col-4 col-12-mobile">
<header>
<h2 class="icon solid fa-code circled" title="HTML5 Canvas Experiments"><span class="label">Canvas Experiments</span></h2>
</header>
<div class="row gtr-25">
<div class="col-6">
<a href="/canvas/ball" class="image fit" target="_blank" title="The Blob"><img src="assets/images/the-blob.jpg" alt="the-blob" /></a>
</div>
<div class="col-6">
<a href="/canvas/matrix" class="image fit" target="_blank" title="Matrix Code"><img src="assets/images/matrix.jpg" alt="matrix" /></a>
</div>
<div class="col-6">
<a href="/canvas/ball2" class="image fit" target="_blank" title="More Balls!"><img src="assets/images/ball2.jpg" alt="ball2" /></a>
</div>
<div class="col-6">
<a href="/canvas/spinicle" class="image fit" target="_blank" title="Spinicle Time"><img src="assets/images/spinicle.jpg" alt="spinicle" /></a>
</div>
<div class="col-6">
<a href="/canvas/drawing" class="image fit" target="_blank" title="Draw anything you like"><img src="assets/images/drawing.jpg" alt="drawing" /></a>
</div>
<div class="col-6">
<a href="/canvas/snake2" class="image fit" target="_blank" title="Watch this snake go!"><img src="assets/images/snake2.jpg" alt="snake2" /></a>
</div>
</div>
</section>
</div>
<hr />
<div class="row">
<div class="col-12">
<!-- Contact -->
<section class="contact">
<header>
<h3>I'm Social</h3>
</header>
<p>Just search Ruddernation.</p>
<ul class="icons">
<li><a href="https://github.com/Ruddernation-Designs" class="icon brands fa-github" target="_blank"><span class="label">GitHub</span></a></li>
<!--<li><a href="https://www.facebook.com/rndtinychat" class="icon brands fa-facebook-f" target="_blank"><span class="label">Facebook</span></a></li>-->
<li><a href="https://stackoverflow.com/users/5774880/rudder" class="icon brands fa-stack-overflow" target="_blank"><span class="label">StackOverflow</span></a></li>
<li><a href="https://profiles.wordpress.org/ruddernationdesigns" class="icon brands fa-wordpress" target="_blank"><span class="label">WordPress</span></a></li>
<li><a href="https://bitbucket.org/ruddernation-designs/" class="icon brands fa-bitbucket" target="_blank"><span class="label">BitBucket</span></a></li>
<li><a href="https://stackexchange.com/users/7615203/rudder" class="icon brands fa-stack-exchange" target="_blank"><span class="label">Stack Exchange</span></a></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>
<a href="https://www.ruddernation.com" class="footer" title="Created and Designed by Ruddernation Designs">Ruddernation™ Designs 1998 <!--</h1><span id="current_month"></span>--> <span id="current_year"></span></a> |
<a href="/cookie-policy" class="footer" title="Cookie Policy">Cookie Policy</a> |
<a href="/privacy-policy" class="footer" title="Privacy Policy">Privacy Policy</a> |
<a href="/tac" class="footer" title="Terms and Conditions">Terms and Conditions</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<i id="top-page" class="icon solid fa-arrow-up circled"></i>
<!-- Scripts -->
<script type="text/javascript">document.getElementById('current_year').innerHTML = new Date().getFullYear();
document.getElementById('current_month').innerHTML = new Date().toLocaleString('default', { month: 'long' });</script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/stt.js"></script>
<script src="assets/js/troll.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/hex2rgb.js"></script>
<script src="assets/js/pwdgn.js"></script>
<script src="assets/js/dsai.js"></script>
</body>
</html>