-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (92 loc) · 6.55 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
<html>
<head>
<title>TechsCode RGB Maker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="assets\images\techscode_logo.png" type="image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="og:title" content="TechsCode RGB Maker">
<meta name="og:description" content="TechsCode RGB Maker. Useful for creating gradients to use in button names and lore.">
<meta property="og:image" content="assets\images\techscode_logo.png">
<meta charset="UTF-8">
<meta name="author" content="Fedee">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="bg" class="container" style="font-family: Quicksand;">
<div id="particles-js"></div>
<div id="header">
<h1 id="title">TechsCode RGB Maker <a href="https://TechsCode.com"><img id="banner" src="assets\images\techscode_logo_right.png" alt="TechsCode Logo"></a></h1>
<p id="graylabel1" class="gray" style="padding-bottom: 10px;">TechsCode RGB Maker. Useful for creating gradients to use in button names and lore.</p>
</div>
<div id="input" class="col-md-2" style="padding-left: 0;">
<label id="label1" for="color1">First Hex Color</label>
<input style="border-radius: 10px; position: inherit;" class="form-control col-md-4" id="color1" name="color1" value="952FEE" data-jscolor="{preset:'small dark', position:'right'}" oninput="updateSpitter(event)" onchange="updateSpitter(event)">
<label id="label2" for="color2">Second Hex Color</label>
<input style="border-radius: 10px; position: inherit;" class="form-control col-md-3" id="color2" name="color2" value="#52A7FD" data-jscolor="{preset:'small dark', position:'right'}" oninput="updateSpitter(event)" onchange="updateSpitter(event)">
<label id="label3" for="color3" style="display: none;">Third Hex Color</label>
<input style="border-radius: 10px; position: inherit; display: none;" class="form-control col-md-2" id="color3" name="color3" value="FFFFFF" data-jscolor="{preset:'small dark', position:'right'}" oninput="updateSpitter(event)" onchange="updateSpitter(event)">
<label id="label4" for="color4" style="display: none;">Fourth Hex Color</label>
<input style="border-radius: 10px; position: inherit; display: none;" class="form-control col-md-1" id="color4" name="color4" value="FFFFFF" data-jscolor="{preset:'small dark', position:'right'}" oninput="updateSpitter(event)" onchange="updateSpitter(event)">
<label id="label5" for="steps">Message</label>
<input style="border-radius: 10px; position: inherit;" class="form-control col-md-2" id="nickname" name="nickname" type="text" placeholder="Message" value="TechsCode" oninput="updateSpitter(event);" onchange="updateSpitter(event)">
<div id="options">
<div id="typeslist">
<label style="margin-bottom: 0px; margin-top: 15px;">Type</label>
<select style="width:100%; border-radius: 10px; padding-right: 6px; padding-left: 6px; padding-top: 6px; padding-bottom: 6px;" type="select" id="types" onchange="rgbtype = this.options[this.selectedIndex].innerText; updateSpitter(event);">
<option value="0">TechsCode {#rrggbb>}</option>
<option value="1">Default (&#rrggbb)</option>
<option value="2">Legacy (&x&r&r&g&g&b&b)</option>
<option value="3">Console (§x§r§r§g§g§b§b)</option>
<option value="4">MOTD (\u007Ax...)</option>
</select>
</div>
<div id="coloramountlist">
<label style="margin-bottom: 0px; margin-top: 15px;">Number of colors</label>
<select style="width:100%; border-radius: 10px; padding-right: 6px; padding-left: 6px; padding-top: 6px; padding-bottom: 6px;" type="select" id="numOfColors" onchange="numberOfColors = this.options[this.selectedIndex].innerText; updateSpitter(event); hideColors();">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div id="bald">
<input type="checkbox" id="bold" onclick="updateSpitter(event);">
<label for="bold" style="margin-bottom: 0px;margin-top: 15px;"> Bold output</label>
</div>
<div id="italy">
<input type="checkbox" id="italics" onclick="updateSpitter(event);">
<label for="italics" style="margin-bottom: 0px;margin-top: 0px;"> Italic output</label>
</div>
<div id="line">
<input type="checkbox" id="underline" onclick="updateSpitter(event);">
<label for="underline" style="margin-bottom: 0px;margin-top: 0px;"> Underlined output</label>
</div>
<div id="lineon">
<input type="checkbox" id="strike" onclick="updateSpitter(event);">
<label for="strike" style="margin-bottom: 0px;margin-top: 0px;"> Striked output</label>
</div>
<div id="appearance">
<input type="checkbox" id="darkmode" onclick="darkMode();">
<label for="darkmode" style="margin-bottom: 0px;margin-top: 0px;"> Dark Mode</label>
</div>
</div>
</div>
<div id="output">
<label id="label4" for="spitter">Output</label>
<label id="graylabel2" class="gray" for="spitter" style="font-weight: normal;">Copy-paste this for RGB text!</label>
<pre id="spitter" class="pp" style="border-radius: 10px; white-space: pre-wrap; height: 95px; margin-right: 15px; font-family: MinecraftRegular;" onclick="copyTextToClipboard(document.getElementById('spitter').textContent);"></pre>
<p id="error" style="display: none; margin-bottom: 10px;">This is more than 256 characters and may not fit in the chat box. You may ignore this if you're using a server console.</p>
</div>
<div id="textUC" class="minecraft" style="word-wrap: break-word;"></div>
<footer>
<p>Design from <a href="https://rgb.birdflop.com">Birdflop RGB</a>, My Github <a href="https://github.com/Fedee0">Profile</a> <a href="https://github.com/Fedee0"><i class="fa fa-github"></i></a></p>
</footer>
<script src="script.js"></script>
<script src="jscolor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
<script>
particlesJS.load('particles-js', 'particles.json', function(){
})
</script>
</body>
</html>