-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcolorizer.htm
More file actions
162 lines (158 loc) · 10.6 KB
/
colorizer.htm
File metadata and controls
162 lines (158 loc) · 10.6 KB
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
<!DOCTYPE html>
<html><head>
<title>BBCode & HTML Text Colorizer</title>
<meta name="description" content="BBcode and HTML text effect generator. Create rainbow text effects and more for your blog or forum.">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#div_content {
padding:20px;
margin:0 auto;
position:relative;
width:760px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
top:50px;
border:2px solid black;
background-color: #505050
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-100;
}
#div_footer {
padding:10px 10px;
height:5px;
width:760px;
text-align:center;
font-size:10px;
color:white;
}
#div_logo {
margin:0 auto;
width:760px;
height:40px;
text-align:center;
position:relative;
}
</style>
<script src="colorizer_files/textcolorizer.js"></script>
<script src="colorizer_files/jscolor.js"></script>
<script src="colorizer_files/jquery.js"></script>
<script src="colorizer_files/visit.js"></script>
<link rel="stylesheet" type="text/css"href="style.css">
<link rel="icon" href="Green Cube.png">
</head>
<body>
<nav>
<div class="left-links">
<a class="links" href="index.html">Home</a>
<a class="links" href="about.html">About</a>
<a class="links" href="projectgallery.html">Gallery</a>
<a class="links" href="games.html">Games</a>
<a class="links" href="tools.html">Tools</a>
<a class="links" href="newyear.html">Happy New Year</a>
<a class="selected links" href="colorizer.htm">colorizer tool</a>
</div>
<div class="right-links">
<a class="links" href="login.html">Log In</a>
<a class="links" href="signup.html">Sign Up</a>
</div>
</nav>
<div id="div_logo" style="z-index:-100">
<span style="position:absolute; font-size:10px; top:18px; left:218px;">BBcode & HTML</span>
<br><span style="font-family:"Arial Black";font-size:42px;"><span style="color:#FF0000;">T</span><span style="color:#EC0012;">e</span><span style="color:#DA0024;">x</span><span style="color:#C80036;">t</span> <span style="color:#A3005B;">C</span><span style="color:#91006D;">o</span><span style="color:#7F007F;">l</span><span style="color:#6D0091;">o</span><span style="color:#5B00A3;">r</span><span style="color:#4800B6;">i</span><span style="color:#3600C8;">z</span><span style="color:#2400DA;">e</span><span style="color:#1200EC;">r</span></span>
</div>
<h1 style="text-align: center;">this site is not mine, just to help people who don't have access to it, original is <a href="https://www.stuffbydavid.com/textcolorizer">here</a></h1>
<div id="div_content">
<span style="font-weight:bold;">Step 1:</span> Enter your text:<br><br>
<textarea id="input_text" rows="5" cols="50">Hello world!</textarea>
<br><br><span style="font-weight:bold;">Step 2:</span> Choose the color effect:<br><br>
<select id="input_effect">
<option value="1" selected="selected">Horizontal gradient</option>
<option value="2">Middle gradient</option>
<option value="3">Three colored gradient</option>
<option value="4">Solid color</option>
<option value="5">Random colors</option>
<option value="6">Colors of the rainbow</option>
</select>
<br><br><span style="font-weight:bold;">Step 3:</span> Choose the colors:<br><br>
<div style="position:relative;">
<div id="color_select1" style="position: absolute; visibility: visible;">Start color: <input id="input_color1" class="color {hash:true,caps:true}" value="#FF0000" autocomplete="off" style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);"><br>End color: <input id="input_color2" class="color {hash:true,caps:true}" value="#0000FF" autocomplete="off" style="background-color: rgb(0, 0, 255); color: rgb(255, 255, 255);"></div>
<div id="color_select2" style="position:absolute; visibility:hidden">Start & End color: <input id="input_color3" class="color {hash:true,caps:true}" value="#FF0000" autocomplete="off" style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);"><br>Middle color: <input id="input_color4" class="color {hash:true,caps:true}" value="#0000FF" autocomplete="off" style="background-color: rgb(0, 0, 255); color: rgb(255, 255, 255);"></div>
<div id="color_select3" style="position:absolute; visibility:hidden">Start color: <input id="input_color5" class="color {hash:true,caps:true}" value="#FF0000" autocomplete="off" style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);"><br>Middle color: <input id="input_color6" class="color {hash:true,caps:true}" value="#0000FF" autocomplete="off" style="background-color: rgb(0, 0, 255); color: rgb(255, 255, 255);"><br>End color: <input id="input_color7" class="color {hash:true,caps:true}" value="#00FF00" autocomplete="off" style="background-color: rgb(0, 255, 0); color: rgb(0, 0, 0);"></div>
<div id="color_select4" style="position:absolute; visibility:hidden">Color: <input id="input_color8" class="color {hash:true,caps:true}" value="#FF0000" autocomplete="off" style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);"></div>
<div id="color_select5" style="position:absolute; visibility:hidden"><input type="button" value="Randomize!" onclick="randomize_colors()"><br>Word-by-word:<input type="checkbox" id="input_colorword"></div>
<div id="color_select6" style="position:absolute; visibility:hidden">RAINBOW!!</div>
</div>
<br><br><br><br><br><br>
<span style="font-weight:bold;">Step 4:</span> Additional text settings:<br><br>
Font:
<select id="input_font">
<option value="" selected="selected">Default</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Book Antiqua">Book Antiqua</option>
<option value="Century Gothic">Century Gothic</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Franklin Gothic Medium">Franklin Gothic Medium</option>
<option value="Garamond">Garamond</option>
<option value="Georgia">Georgia</option>
<option value="Impact">Impact</option>
<option value="Lucida Console">Lucida Console</option>
<option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
<option value="Microsoft Sans Serif">Microsoft Sans Serif</option>
<option value="Palatino Linotype">Palatino Linotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Verdana">Verdana</option>
</select><br>
Size:
<select id="input_size">
<option value="0" selected="selected">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select><br>
Bold:<input type="checkbox" id="input_bold"><br>
Italic:<input type="checkbox" id="input_italic">
<br><br>
<span style="font-weight:bold;">Step 5:</span> Preview and get code:<br><br>
<div id="div_preview"><span style="font-size:12px"><span style="color:#FF0000;">H</span><span style="color:#E90015;">e</span><span style="color:#D4002A;">l</span><span style="color:#BF003F;">l</span><span style="color:#AA0055;">o</span> <span style="color:#7F007F;">w</span><span style="color:#6A0094;">o</span><span style="color:#5500AA;">r</span><span style="color:#3F00BF;">l</span><span style="color:#2A00D4;">d</span><span style="color:#1500E9;">!</span></span></div><br><br>
BBcode for this text: (To use on forums)<br>
<textarea id="output_bbcode" rows="5" cols="80" readonly="true">[color=#FF0000]H[/color][color=#E90015]e[/color][color=#D4002A]l[/color][color=#BF003F]l[/color][color=#AA0055]o[/color]
[color=#7F007F]w[/color][color=#6A0094]o[/color][color=#5500AA]r[/color][color=#3F00BF]l[/color][color=#2A00D4]d[/color][color=#1500E9]![/color]</textarea><br><br>
HTML code for this text: (To use on your website)<br>
<textarea id="output_html" rows="5" cols="80" readonly="true"><span
style='color:#FF0000;'>H</span><span
style='color:#E90015;'>e</span><span
style='color:#D4002A;'>l</span><span
style='color:#BF003F;'>l</span><span
style='color:#AA0055;'>o</span> <span
style='color:#7F007F;'>w</span><span
style='color:#6A0094;'>o</span><span
style='color:#5500AA;'>r</span><span
style='color:#3F00BF;'>l</span><span
style='color:#2A00D4;'>d</span><span
style='color:#1500E9;'>!</span></textarea>
<script type="text/javascript">textcolorizer_handle();</script><br><br>
<span style="font-weight:bold;">Step 6:</span> Done! Have a nice day ☺<br><br>
</div>
<br><br><br><br><br><br>
<script type="text/javascript">registerVisit(19);</script></body></html>