forked from birdflop/web
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
134 lines (130 loc) · 6.82 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
<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/new_birdflop_logo_large.png" type="image/x-icon">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/js/js.cookie.js"></script>
<title>RGB Gradient Creator</title>
</head>
<body id="bg" class="container" style="font-family: Quicksand;">
<div id="hexColorTemplate" style="display:none;">
<div class="row">
<label for="color-$NUM">Hex Color #$NUM</label>
<input class="form-control col-md-1 hexColor" id="color-$NUM" style="border-radius: 10px;" value="$VAL"
data-jscolor="{preset:'small dark', position:'right'}" oninput="javascript: updateOutputText(event)"
onchange="javascript: updateOutputText(event); Cookies.set(`#${$NUM}`, document.getElementById('color-$NUM').value, { expires: 7, path: '' })"/>
</div>
</div>
<div id="content">
<h1 id="title">HayCube RGB</h1>
<p id="graylabel1" class="gray" style="padding-bottom: 10px;">play.haycube.net</p>
<div class="container-fluid">
<div class="row">
<div class="col-md-2" style="padding-left: 0;">
<div id="hexColors" class="container-fluid">
<!-- Will be populated in JavaScript -->
</div>
</div>
<div class="col-md-10" style="padding-right: 0;">
<div class="container-fluid">
<div class="row">
<div id="output">
<label id="label4" for="outputText">Output</label>
<label id="graylabel2" class="gray" for="outputText" style="font-weight: normal;">Copy-paste this for RGB text!</label>
<pre id="outputText" style="border-radius: 10px; white-space: pre-wrap; height: 70px; margin-right: 15px; font-family: MinecraftRegular; margin-bottom: 5px;"
onclick="copyTextToClipboard(this.textContent);"></pre>
<p id="error">This is more than 256 characters and may not fit in the chat box.</p>
</div>
</div>
<div class="row">
<div id="coloredNick" class="minecraft"></div>
</div>
<div class="row">
<div class="col-md-3" style="padding-left: 0;">
<label for="nickname">Message</label>
<input class="form-control" id="nickname" type="text" maxlength="100" placeholder="Your Text"
value="Nickname" oninput="javascript: updateOutputText(event);"
onchange="javascript: updateOutputText(event)">
</div>
</div>
<div class="row">
<div class="col-md-3" style="padding-left: 0;">
<label for="output-format">Output Format</label>
<select id="output-format"
class="form-control"
onchange="updateOutputText(event);">
<option value='3'>Custom Nickname</option>
<option value='0'>Custom Text</option>
<option value=''></option>
<option value='9'>Plugin [HayCube]</option>
<option value='6'>Console [HayCube]</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3" style="padding-left: 0;">
<label for="color-preset">Color Preset</label>
<select id="color-preset"
class="form-control"
onchange="preset(this.value); updateOutputText(event); ">
<option value='0'>None</option>
<option value='1'>Rainbow</option>
<option value='9'>VIP</option>
<option value='10'>MVP</option>
<option value='11'>PRO</option>
<option value='12'>HAY</option>
<option value='2'>Cupid</option>
<option value='3'>Easter</option>
<option value='4'>Colorful</option>
<option value='5'>Lush</option>
<option value='6'>Spooky</option>
<option value='7'>Snowy</option>
<option value='8'>Santa</option>
</select>
</div>
</div>
<div class="row">
<label for="numOfColors">Number of Colors</label>
<input class="form-control"
style="width: 75px;"
value="2" id="numOfColors" type="number" min="2" max="10"
onchange="updateOutputText(event); toggleColors(this.value);"
oninput="updateOutputText(event); toggleColors(this.value);"/>
</div>
<div class="row">
<div id="dbold">
<input type="checkbox" id="bold" onclick="updateOutputText(event);"/>
<label for="bold">Bold</label>
</div>
<div id="ditalics">
<input type="checkbox" id="italics" onclick="updateOutputText(event);"/>
<label for="italics">Italic</label>
</div>
<div id="dunderline">
<input type="checkbox" id="underline" onclick="updateOutputText(event);"/>
<label for="underline">Underline</label>
</div>
<div id="dstrike">
<input type="checkbox" id="strike" onclick="updateOutputText(event);"/>
<label for="strike">Strikethrough</label>
</div>
<div id="appearance">
<input type="checkbox" id="darkmode" onclick="darkMode();"></input>
<label for="darkmode" style="margin-bottom: 0px;margin-top: 0px;"> Dark Mode</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="jscolor.js"></script>
<script src="script.js"></script>
</body>
<footer>
<p>A special thanks to <a href="https://github.com/Oli-idk">Oli</a> and <a href="https://github.com/saboooor">Saboor</a> for their work on this RGB gradient generator. The source code can be seen at <a href="https://github.com/Tosfoy/haycubergb">https://github.com/Tosfoy/haycubergb</a></p>
<p>This is a fork from <a href="https://www.birdflop.com/resources/rgb/">RGBirdflop</a></p>
</footer>
</html>