-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (133 loc) · 6.45 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
135
136
137
138
139
140
141
142
143
144
145
146
147
<!doctype html>
<html lang="en">
<!-- Head Page -->
<head>
<!-- Basics -->
<meta charset="utf-8">
<!-- Parameters -->
<title>ascii-creator</title>
<meta name="description" content="Create ASCII art for your terminal.">
<!---- Styles ---->
<!-- Colours for the UI -->
<link rel="stylesheet" href="./css/ui.css">
<!-- Fonts <themes> -->
<link rel="stylesheet" href="./css/fonts.css">
<!---- Scripts ---->
<!-- Load everything in the page -->
<script type="module" defer src="./js/main.js"></script>
</head>
<!-- Body Page -->
<body>
<!-- Background -->
<div id="background"></div>
<!-- Container for the of #block -->
<section id="main">
<section class="output">
<div><input type="text" placeholder="Name of your art" value="example" name="nameArt"></div>
<textarea id="output"></textarea>
<div><input type="text" placeholder="Credits and miscellaneous" value="" name="commentArt"></div>
</section>
<section class="block"></section>
</section>
<!-- Set options of the system -->
<section id="sidebar">
<section>
<!-- Automatic update (marked with a bright golden border) --->
<section class="sidebar-automatic">
<span>Automatic</span>
<section>
<label><input type="checkbox" name="infiniteMoving">Scroll moving with arrow keys</label>
<label><input type="checkbox" name="moveAfterInput">Move after input of character</label>
<label><input type="checkbox" name="isBackground">Background color</label>
<label><input type="checkbox" name="isBold">Bold</label>
<label><input type="checkbox" name="isUnderline">Underline</label>
<label><input type="checkbox" name="isItalic">Italic</label>
</section>
</section>
<!-- Need to press ENTER to update --->
<section class="sidebar-manual">
<span>Manual</span>
<section>
<label><input type="number" min="3" name="blockHeight">Number of columns.</label>
<label><input type="number" min="3" name="blockWidth">Number of rows.</label>
<label><input type="number" min="0" max="1" name="blockOpacity">Opacity of the input block.</label>
<label><input type="number" min="0" name="blockBlur">Blur of the input block.</label>
<label><input type="number" min="5" name="fontSize">Font size of the block input and output.</label>
<label><input type="number" min="0.25" name="itemHeight">Height scale of character of the block input.</label>
<label><input type="number" min="0.25" name="itemWidth">Width scale of character of the block input.</label>
</section>
</section>
</section>
<section>
<span class="separator"></span>
<p><b>ascii-creator</b> is a website made for the creation of ASCII arts, more specifically for the program <b><a href="https://github.com/ninecath/nincat/">nincat</a></b>, which displays ASCII art randomly in the terminal.</p>
<p>To pick a color, you can either click on a block of the pallete at the bottom, or in your keyboard top keys (1-8), with CTRL enabled it chooses the bright colour.</p>
<div>
<a href="https://github.com/ninecath/ninecath.github.io">v1.0.0</a> - <a href="https://github.com/ninecath/ninecath.github.io/blob/main/LICENSE">A-GPL 3</a>
</div>
</section>
</section>
<!-- Information of the creator/maintainer -->
<section id="information">
<!-- <div class="notification leave">Added <span class="copied">love 25 45</span> to the clipboard</div>-->
<select name="themesList"></select>
</section>
<!-- Select colours --->
<section id="pallete">
<section>
<label>4-bit pallete:</label>
<section class="pallete-space">
<section class="part">
<div id="black" class="colour" data-pallete="30">1</div>
<div id="red" class="colour" data-pallete="31">2</div>
<div id="green" class="colour" data-pallete="32">3</div>
<div id="yellow" class="colour" data-pallete="33">4</div>
<div id="blue" class="colour" data-pallete="34">5</div>
<div id="purple" class="colour" data-pallete="35">6</div>
<div id="cyan" class="colour" data-pallete="36">7</div>
<div id="white" class="colour" data-pallete="37">8</div>
</section>
<section class="part">
<div id="blackBright" class="colour" data-pallete="90">^1</div>
<div id="redBright" class="colour" data-pallete="91">^2</div>
<div id="greenBright" class="colour" data-pallete="92">^3</div>
<div id="yellowBright" class="colour" data-pallete="93">^4</div>
<div id="blueBright" class="colour" data-pallete="94">^5</div>
<div id="purpleBright" class="colour" data-pallete="95">^6</div>
<div id="cyanBright" class="colour" data-pallete="96">^7</div>
<div id="whiteBright" class="colour" data-pallete="97">^8</div>
</section>
</section>
</section>
<section>
<label>RGB pallete:</label>
<section class="pallete-space">
<section class="part">
<input type="color" value="#456897" class="rgb colour">
<input type="color" value="#200354" class="rgb colour">
<input type="color" value="#000000" class="rgb colour">
<input type="color" value="#ffffff" class="rgb colour">
<input type="color" value="#000000" class="rgb colour">
<input type="color" value="#ffffff" class="rgb colour">
<input type="color" value="#000000" class="rgb colour">
<input type="color" value="#ffffff" class="rgb colour">
<input type="color" value="#000000" class="rgb colour">
<input type="color" value="#ffffff" class="rgb colour">
</section>
<section class="part">
<input type="color" value="#006897" class="rgb colour">
<input type="color" value="#205354" class="rgb colour">
<input type="color" value="#000000" class="rgb colour">
<input type="color" value="#ffffff" class="rgb colour">
<input type="color" value="#000000" class="rgb colour">
<input type="color" value="#ffffff" class="rgb colour">
<input type="color" value="#000000" class="rgb colour">
<input type="color" value="#ffffff" class="rgb colour">
<input type="color" value="#000000" class="rgb colour">
<input type="color" value="#ffffff" class="rgb colour">
</section>
</section>
</section>
</section>
</body>
</html>