This repository has been archived by the owner on Aug 28, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
74 lines (72 loc) · 3.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
<html>
<head>
<title>paint.terminal.ink - ANSI Terminal compatible paint program</title>
<style>
#paint {
border-style: solid;
background-image: url('transparency.png');
align-self: center;
width: 800;
height: 800;
margin-top: 2em;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
#output {
height: 30vh;
}
</style>
<link href="https://modesta.alexflipnote.xyz/css/modesta.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav-container">
<h4 class="nav-title title">paint.terminal.ink</h4>
</div>
<div class="container">
<div class="row center-text">
<canvas id="paint" width="100" height="50"></canvas>
</div>
<div class="row center-text">
<label for="colour">Colour: </label>
<input type="color" id="colour" name="colour" value="#FFFFFF">
<div>
<button class="btn" style="background-color:rgb(0, 0, 0)" onclick="setColour(0, 0, 0)">colour</button>
<button class="btn" style="background-color:rgb(128, 0, 0)" onclick="setColour(128, 0, 0)">colour</button>
<button class="btn" style="background-color:rgb(0, 128, 0)" onclick="setColour(0, 128, 0)">colour</button>
<button class="btn" style="background-color:rgb(128, 128, 0)" onclick="setColour(128, 128, 0)">colour</button>
<button class="btn" style="background-color:rgb(0, 0, 128)" onclick="setColour(0, 0, 128)">colour</button>
<button class="btn" style="background-color:rgb(128, 0, 128)" onclick="setColour(128, 0, 128)">colour</button>
<button class="btn" style="background-color:rgb(0, 128, 128)" onclick="setColour(0, 128, 128)">colour</button>
<button class="btn black-text" style="background-color:rgb(192, 192, 192)" onclick="setColour(192, 192, 192)">colour</button>
</div>
<div>
<button class="btn" style="background-color:rgb(128, 128, 128)" onclick="setColour(128, 128, 128)">colour</button>
<button class="btn" style="background-color:rgb(255, 0, 0)" onclick="setColour(255, 0, 0)">colour</button>
<button class="btn black-text" style="background-color:rgb(0, 255, 0)" onclick="setColour(0, 255, 0)">colour</button>
<button class="btn black-text" style="background-color:rgb(255, 255, 0)" onclick="setColour(255, 255, 0)">colour</button>
<button class="btn" style="background-color:rgb(0, 0, 255)" onclick="setColour(0, 0, 255)">colour</button>
<button class="btn black-text" style="background-color:rgb(255, 0, 255)" onclick="setColour(255, 0, 255)">colour</button>
<button class="btn black-text" style="background-color:rgb(0, 255, 255)" onclick="setColour(0, 255, 255)">colour</button>
<button class="btn black-text" style="background-color:rgb(255, 255, 255)" onclick="setColour(255, 255, 255)">colour</button>
</div>
</div>
<div class="row center-text">
<label for="rubber">Rubber: </label>
<input type="checkbox" id="rubber" name="rubber">
</div>
<div class="row center-text">
<a id="download" download="image.png">
<button class="btn white black-text" onclick="save()">Save!</button>
</a>
<button class="btn white black-text" onclick="generate()">Generate printable text</button>
</div>
<div class="row column">
<label for="output">Output</label>
<textarea class="full-width" id="output" onclick="this.select(); generate();"></textarea>
</div>
</div>
<script src="paint.js"></script>
</body>
</html>