forked from dom111/image-to-ansi
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (128 loc) · 8.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image to ANSI</title>
<link rel="stylesheet" type="text/css" href="dist/css/app.css"/>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<a href="https://github.com/dom111/image-to-ansi" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250"
style="fill:#C7254E; color:#F9F2F4; position: fixed; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<div class="jumbotron pt-5 pb-4 mb-4">
<div class="container">
<h1>Image to <code>ANSI</code> <span class="version">v0.3</span></h1>
<p>Provide a file<!--, or URL via the relevant input--> and it will be converted to ANSI format using the
options supplied below.</p>
<p><small>All files are processed client-side and not sent to an external server.</small></p>
</div>
</div>
<div class="container">
<section class="parser border rounded">
<div class="p-4">
<div class="d-flex">
<div class="form-group pe-4">
<label class="btn btn-primary btn-file btn-lg">
Upload file
<span class="spinner-border d-none" role="status">
<span class="visually-hidden">Loading...</span>
</span>
<input type="file" class="d-none" accept="image/*">
</label>
</div>
<div class="flex-grow-1 form-group">
<div class="form-floating">
<input type="url" class="form-control" id="url"
placeholder="https://" value="">
<label for="url">or enter a URL</label>
</div>
</div>
</div>
<div class="error-container alert alert-danger mt-4 d-none d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div class="error-content">
Blah blah blah
</div>
</div>
</div>
<div class="border-top border-bottom bg-light p-4">
<aside class="options">
<h3>Options</h3>
<div class="global-options">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="unicode" checked> Unicode
</label>
</div>
<p class="help-block">Creates two pixels per horizontal space using <code>▄</code> and changing
both the background and foreground colours, if this is disabled images will be twice as tall
and wide.</p>
</div>
<h4>Colours</h4>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="colours" value="256" checked>
256
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="colours" value="true">
True colour
</label>
</div>
<p class="help-block">To test a true colour terminal emulator, try the <a
href="https://chrome.google.com/webstore/detail/secure-shell/pnhechapfaindjhompbnflcldabbghjo">Google
Chrome extension Secure Shell</a>.</p>
</div>
</div>
<div class="specific-options">
<h4>Max size</h4>
<div class="row">
<div class="col-md-6">
<div class="form-floating">
<input type="number" class="form-control" name="maxWidth" id="maxWidth"
placeholder="Width" value="80">
<label for="maxWidth">Width</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="number" class="form-control" name="maxHeight" id="maxHeight"
placeholder="Height" value="48">
<label for="maxHeight">Height</label>
</div>
</div>
</div>
</div>
</aside>
</div>
<div class="p-4">
<h2>Preview</h2>
<div class="terminal p-2 my-2 border rounded"></div>
<div class="form-group label-floating">
<label class="control-label">Run the below in <code>sh</code> (or <code>bash</code>, <code>zsh</code>, <a href="https://en.wikipedia.org/wiki/ANSI_escape_code#Platform_support">anything that supports ANSI escape sequences</a>) to see the result:</label>
<pre class="copy-paste p-2 my-2 border bg-light rounded"><code></code><a href="#" class="copy btn btn-sm btn-primary" data-clipboard-target="pre.copy-paste code">Copy</a></pre>
</div>
</div>
</section>
<footer>
<p>Copyright © 2017-2022 <a href="https://dom.hastin.gs/">Dom Hastings</a></p>
</footer>
</div>
<script type="text/javascript" src="dist/js/app.js"></script>
</body>
</html>