-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
87 lines (80 loc) · 5.76 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
<html>
<head>
<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/pride-avatar.jpg" type="image/x-icon">
<title>Thicc SMP RGB Generator</title>
<meta name="twitter:title" content="Thicc SMP RGB Generator">
<meta name="twitter:description" content="Thicc SMP RGB Gradient Generator. Useful for using the /nick command for changing RGB nicknames.">
<meta name="description" content="Thicc SMP RGB Gradient Generator. Useful for using the /nick command for changing RGB nicknames.">
</head>
<body id="bg" class="container" style="font-family: Quicksand;">
<div id="header">
<h1 id="title">Thicc SMP RGB Generator</h1>
<p id="graylabel1" class="gray" style="padding-bottom: 10px;">Thicc SMP RGB Gradient Generator. Useful for using the /nick command for changing RGB nicknames.</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="915FFB" 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="552BFD" 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="Thicc SMP" 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">Nicknames (&#rrggbb)</option>
<option value="1">Legacy (&x&r&r&g&g&b&b)</option>
<option value="2">Console (§x§r§r§g§g§b§b)</option>
<option value="3">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="coloredNick" class="minecraft" style="word-wrap: break-word;"></div>
<script src="script.js"></script>
<script src="jscolor.js"></script>
</body>
<footer>
<p><a href="https://github.com/ThiccMC/ThiccRGB">GitHub</a></p>
</footer>
</html>