-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
59 lines (53 loc) · 3.58 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
<html>
<head>
<title>Nick command fader</title>
<script src="script.js?v=5"></script>
<link rel="stylesheet" href="style.css?v=5">
</head>
<body>
<!-- credits https://codepen.io/NShadeIV/pen/jOrJPpX -->
<h3>Nick Command Fader</h3>
<ul>
<li><input class="i" type="color" title="Starting Color"><input class="i" type="color" title="Ending Color"><input class="input" placeholder="first part of username"></li>
<li><input class="i" type="color" title="Starting Color"><input class="i" type="color" title="Ending Color"><input class="input" placeholder="2nd part of username"></li>
<li><input class="i" type="color" title="Starting Color"><input class="i" type="color" title="Ending Color"><input class="input" placeholder="3rd part of username"></li>
<li><input class="i" type="color" title="Starting Color"><input class="i" type="color" title="Ending Color"><input class="input" placeholder="4th part of username"></li>
<li><input class="i" type="color" title="Starting Color"><input class="i" type="color" title="Ending Color"><input class="input" placeholder="5th part of username"></li>
</ul>
<div id="options-container">
<div id="options-left" class="flex-grow-1">
<label for=continuouscolor style="font-style: italic;"><input id="continuouscolor" type="checkbox" checked="checked">Continuous Color Mode <small>(duplicate next color into second box for smooth fades)</small></label>
<div class="formatbox">
<label for=italic style="font-style: italic;"><input id="italic" type="checkbox">I</label><br>
<label for=bold style="font-weight: bold;"><input id="bold" type="checkbox">B</label><br>
<label for=underline style="text-decoration: underline;"><input id="underline" type="checkbox">U</label><br>
<label for=strikethrough style="text-decoration: line-through;"><input id="strikethrough" type="checkbox">S</label>
</div>
<select id="command-type">
<option value="essentials" selected>Essentials command (no prefix)</option>
<option value="essentials-raw">Essentials YML Value (§)</option>
<option value="nick">/nick</option>
<option value="itemname">/itemname</option>
<option value="itemlore">/itemlore</option>
<option value="lorehand">/lorehand (azbasics /lore)</option>
</select>
</div>
<button id="export">Save</button>
<button id="import">Load</button>
</div>
<hr>
command: <div id="command-row"><div id="command" class="flex-grow-1"></div><button id="copy">Copy</button></div>
preview: <div id="preview-background">
<div id="preview-container">
<<span id="preview"></span>> anyone have any wood?
</div>
</div>
<br><hr><br>
<h4>How do I use this?</h4>
<p>First, decide how many fades you want in your username (for example, a fade between 2 colors is a single fade. a fade between 3 is two fades).</p>
<p>Then, enter each part of your username you want to fade on separate lines.</p>
<p>Finally, click the first and second squares to choose the beginning and ending color for each fade. </p>
<p>You do <u>not need to</u> use all of the lines</p>
<p>You can Shift-click the color boxes to enter a hex color code.</p>
</body>
</html>