-
-
Notifications
You must be signed in to change notification settings - Fork 24
/
index.html
223 lines (206 loc) · 27 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html>
<head>
<title>ASCII Art Paint</title>
<meta charset="UTF-8">
<meta name="description" content="The editor for ASCII-graphics, combining a graphical editor and an image to text converter. Decorate your text and surprise your readers with an original social media post or blog post using ASCII graphics. The tool does not require an internet connection and can work offline in a browser.">
<meta name="keywords" content="text art,text graphics,aa graphics,ANSI art,ANSI graphics,BBS art,web based,open source">
<meta name='viewport' content='width=device-width, initial-scale=1'/>
<meta name="author" content="Kirill Live">
<style>
*{
font-family:Lucida Console ,monospace;
font-size:12px;
color:#000;
border-collapse:collapse;
border:none;
margin:0;
padding:0;
border-spacing:0px;
outline:none;
text-decoration:none;
}
.boom{
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='64' viewBox='0 0 1024 64'%3e%3crect fill='%23fff' width='1024' height='64'/%3e%3crect fill='%23f9faff' x='50' y='32' width='924' height='32'/%3e%3cg stroke-width='2px'%3e%3cpath stroke='%23f9faff' class='cls-3' d='M974-0V64M50,64V-0'/%3e%3cpath stroke='%23eee' stroke-dasharray='8 8' d='M992,0V64 M32,64V-0'/%3e%3c/g%3e%3cg fill='%23000'%3e%3ccircle cx='16' cy='16' r='6'/%3e%3ccircle cx='16' cy='48' r='6'/%3e%3ccircle cx='1008' cy='16' r='6'/%3e%3ccircle cx='1008' cy='48' r='6'/%3e%3c/g%3e%3c/svg%3e");
background-repeat:repeat-y;
background-position:center top;
width:100%;min-width:800px;
}
body{background-color:#000;}
.art{white-space:pre;text-align:left;}
.texts{text-align:left;}
.texts h1{font-size:22px;}
.screen{width:100%;height:auto;margin:32px 0 64px 0;border-radius:8px;}
</style>
</head>
<body>
<div align="center" class="boom"><div align="center" style="width:890px;">
<div class="art">
.
. . :
; . . ! '
- --+- - ,,, + ,|.'
! (o o) - -- ---(-O-`--- -- -
_--__ . ___ooO-(_)-Ooo___________________,`|'`.
/ / \ | | |, | ! .
| ,-.) |[]| _ ___ ___ ___ ___ |[]| :
/\_ ( () =( | | /_\ / __|/ __|_ _|_ _| | | . . : ___
\ / \)\ _/ | | / _ \\__ \ (__ | | | | | | . /_ ",
\\ .-' '--. | | /_/ \_\___/\___|___|___| | | (((/ \
\\_.' , \ \ \ | | __ ___ | | )- ) )
\_.-'\,_/ _/'\ \/| | /\ |__) | | | , \_/ /
\ ( '_/| | /~~\ | \ | | | | _-( ( ___ ___
| . '. | | __ ___ | | | / ) ) )___ ((o)\,/(o))
| \ | | |__) /\ | |\ | | | |_\\__/ / ( (% #/ \__ | __/
\ _| \ | | | /~~\ | | \| | | | "----')__\,)__/ {_/'\_}
\ | | | \ / | / '(
'.| | | '-------------------------' | / \
\ '\_| ,-----------------.----. | ( / /
`-._ | | ,---, | | | ) (
_,--._.-, \`| | | | | | | "-___-"
/\_r-,\_ ) \| //||| | | | | | | | | |
.-.) _;='_/ (.; | ((|-| | | | | |||| | /| |
\ \' \/ ) | \\||| | | | | |\/| | )\ |
L.'-. _.'|-' \ | |___| |____| | | / \ \
<_`-'\'_.'/ ',____/-------------------_______/ |-( \^(
`'-._( \ )^/ \_\
___ \\, /_/ _----------_,
\ .'-. \\ ,"__ _-:,
'._' '.\\/ / ""--_--""...:\
┌──────────────────────────────────────────────────────────────────┐ / |.........\
│ │ / |..........\
│ free and open-source web-based application for creating │ /, _'_........./:
│ and editing images consisting of text characters and hieroglyphs │ ! -, _-" "-_... ,;;:
│ (ASCII graphics / Shift_JIS art / Kaomoji and many others). │ \ -_-" "-_/;;;;
│ │ \ \ /;;;;'
│ Decorate your text and surprise your readers with ╞════════════╗ \ \ /;;;;
│ an original social media post or blog post using ASCII graphics. │ ║ '. \ /;;;'
│ The tool does not require an internet connection │ ║ "-_\_______/;;'
│ and can work offline in a browser. ┌───────────────┴────────────╨──────────────────────────────────────
│ │
└───────────────────────────────────────────╥──────┤ は、ウェブブラウザで動作するオープンソースのASCII Graphics 制作ソフトです
_n_____________________ ║ │ ソーシャルメディアやブログの投稿を文字と記号で作った絵で装飾すれば、
|_|___________________|_| ║ │ 投稿が目に入った人たちの印象に残ること間違いなしです！
| ,-----------------. | ║ │ インターネット接続無しは不要
| | .-------------. | | ╚══════╡ オフラインモードのブラウザで動作するので気軽に使用できます
| | | ,-. | | | │ ASCII Graphics 文字や記号を組み合わせて絵のようにしたテキスト
| | | _(*_*)_ | | | │ 意味は日本語の「アスキーアート(AA)」と近似していますが、
| | | (_ o _) | | | │ アスキーアートが平仮名、片仮名、漢字、ラテン語アルファベットは勿論、
| | | / o \ | | | │ その他の言語の文字や特殊文字まで用いるのに比べ、
| | `-------------' | | │ 「ASCII Graphics」で使用する文字の種類は少なく、
| `-------------------' | │ 表現が乏しいものです。ただ、このソフトウェアはUnicode文字を一通り扱えるので、
| _ | Y │ アスキーアートのような複雑な絵も制作できます
| _| |_ ,-. | [o] │
||_ O _| ,-. "._,"| [[=]] └──────────╥────────────────────────────────────────────────────────
| |_| "._," | ^U-U^ ║
| _ _ | H H ║
| // // | <a href="https://github.com/Kirilllive/ASCII_Art_Paint" target='_blank'>┌──────────┐</a> <a href="ascii_paint.html" target='_blank'>╔═════════╩════════╗</a> <a href="https://kirill-live.itch.io/ascii-art-paint" target='_blank'>┌─────────┐</a>
| // // \\\\\\ | <a href="https://github.com/Kirilllive/ASCII_Art_Paint" target='_blank'>│ │</a> <a href="ascii_paint.html" target='_blank'>║ ║</a> <a href="https://kirill-live.itch.io/ascii-art-paint" target='_blank'>│ │</a>
| ` ` \\\\\\ , <a href="https://github.com/Kirilllive/ASCII_Art_Paint" target='_blank'>│ GitHub ╞</a>════<a href="ascii_paint.html" target='_blank'>╣ RUN IN BROWSER ╠</a>════<a href="https://kirill-live.itch.io/ascii-art-paint" target='_blank'>╡ itch.io │</a>
|__________...________," <a href="https://github.com/Kirilllive/ASCII_Art_Paint" target='_blank'>│ │</a> <a href="ascii_paint.html" target='_blank'>║ ║</a> <a href="https://kirill-live.itch.io/ascii-art-paint" target='_blank'>│ │</a>
<a href="https://github.com/Kirilllive/ASCII_Art_Paint" target='_blank'>└──────────┘</a> <a href="ascii_paint.html" target='_blank'>╚══════════════════╝</a> <a href="https://kirill-live.itch.io/ascii-art-paint" target='_blank'>└─────────┘</a>
Simple interface 簡潔で覚えやすいインターフェイス
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
The editor has basic functionality and an interface similar 機能と操作は一般的なグラフィック・エディターと同じなので、操作
to most popular graphic editors for more convenient use. にはすぐ慣れるはずです。ファイルの読み込みはドラッグ・アンド・
You can use drag and drop to open a file. ドロップ。作業データは汎用テキストファイルとして保存するので、
The usual txt file format is used to load and save data, このソフトウェアで作成したファイルを他のテキスト・エディターで
which ensures full compatibility with other text editors. 編集することも、他のエディタ―で作成したファイルを読み込むこと
も差し障りなく行えます。
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
</div>
<img src='screenshots/copy_past.png' class='screen'>
<div class="art">
Adapting bitmaps ビットマップ画像の読み込み
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
If you open a bitmap in the editor, it will be displayed on ビットマップ画像をソフトウェアに読み込ませると半透明画像として
the background of the canvas and can be used as a 表示されます。こうして読み込ませた画像は下書きにしてもいいです
template or example to redraw the image into text symbols. し、新しい絵の参考資料にしてもいいでしょう。
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
</div>
<img src='screenshots/stroke.png' class='screen'>
<div class="art">
Customizable symbol palette シンボル・パレットの設定
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
Using the built-in symbol table, you can get all 「シンボル・パレットSymbol Palette」の設定画面(画面右上)で任意
the available symbols of a font in the selected range の文字コード範囲を指定すると、指定した範囲の文字が一覧表示さ
and use them to create your own symbol palette. れます。 ここで選択した文字は作業用の「シンボル・パレット」に
You can specify a symbol to draw without using the palette, 加わるので、目的に適したパレットを作ってみましょう。直接キー
but using the keyboard, including usingkeyboard shortcuts ボードで入力することもできます。
for special symbols. Optionally, you can load multiple ═════════════════════════════════════════════════════════
fonts from .ttf, .woff and .woff2files and use them _ _ _
instead of the default font. >(.)__ <(.)__ =(.)__
═══════════════════════════════════════════════════════════ (___/ (___/ (___/
</div>
<img src='screenshots/palette.png' class='screen'><div class="art">
|\---/|
| ,_, | 画像をテキストに変換
\_'_/ ═════════════════════════════════════════════════════════
/ ` \-..----., 読み込ませたビットマップ画像は、サイズと置き換えに使用する文字
Image to text conversion ,---" /' ' ,""+ \`.___.'; を指定すればテキストに自動変換できます。 上段・左側に指定した
═══════════════════════════════════════════════════════════ 文字ほど暗い色の、下段・右側の文字ほど明るい色の置き換えに使
You can convert a bitmap image to text format by specifying います。画像に合わせて設定を調整すれば、良い感じに出力できま
the size and symbols palette, from the symbol for す。読み込ませたビットマップ画像は、サイズと置き換えに使用する
the darkest color to the symbol for the lightest color. 文字を指定すればテキストに自動変換できます。 上段・左側に指定
Thus, you have complete control over the conversion した文字ほど暗い色の、下段・右側の文字ほど明るい色の置き換え
process to get the most suitable result. に使います。画像に合わせて設定を調整すれば、良い感じに出力できます。
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
</div>
<img src='screenshots/Image_to_text.png' class='screen'>
<div class="art">
Dark & light interface theme ダーク版とライト版のインターフェイス
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
You can easily and quickly switch between dark and ボタン一つでインターフェイスのダーク版(暗い背景)と、
light user interfaces themes. this feature will show you ライト版(明るい背景)とを切り替えることができるので、
how images will look on a dark background with light 作成した絵が明度の異なる背景でどう映るかを即座に確認できます。
symbols or a light background with dark symbols. 画面左上に並ぶボタンの一番右です。
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
</div>
<img src='screenshots/light_dark_theme.png' class='screen'>
<div class="art">
Built-in text editor 内蔵テキストエディター
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
The built-in text editor will allow you to work with 画面左上、右から三番目から開ける内蔵のテキスト・エディターで、
the image in the same way as in a regular text editor. 普通のテキスト・エディターのように文字を手打ちすることもできす。
In addition this feature will allow you to quickly add 他で作成したテキストの追加も、作成したテキストのコピーも簡
data to the editor and copy it back to the clipboard. 単操作で一発です。
═══════════════════════════════════════════════════════════ ═════════════════════════════════════════════════════════
</div>
<img src='screenshots/text_edit.png' class='screen'>
<div align="center">
<div style="width:640px">
<br><br><b>Thanks for the help from users</b><hr><br><br>
<table width='100%' align='center' style="margin-bottom:32px;"><tbody><tr>
<td width='25%' align='center'><a href="https://twitter.com/Suki_Novels" target="_blank">Suki Novels</a></td>
<td width='25%' align='center'>Argosa</td>
<td width='25%' align='center'><a href='https://twitter.com/onigi123' target='_blank'>Onigi</a></td>
<td width='25%' align='center'>Arne Krause</td>
</tr></tbody></table>
<p style="margin-bottom:48px;"><a href='https://www.patreon.com/kirill_live' target='_blank'><svg height='52' width='auto' viewBox='0 0 1000 200' xmlns='http://www.w3.org/2000/svg'><rect width='1000' height='200' fill='#FF424D'/><path d='M310 129V72h19c7 0 12 1 15 4 4 2 5 6 5 11 0 3 0 5-2 7-1 3-3 4-6 5a13 13 0 0110 13c0 6-2 10-6 13-3 2-8 4-14 4zm10-26v18h11l7-2c2-2 3-4 3-7 0-6-3-9-9-9zm0-7h10l7-2c2-2 2-4 2-6 0-3 0-5-2-6l-8-2h-9zm58 34c-6 0-11-2-14-6-4-4-6-9-6-15v-1l2-12c2-3 4-6 7-7 3-2 6-3 10-3 6 0 10 2 13 5 4 4 5 9 5 16v4h-27c0 3 1 6 3 8s5 3 8 3c4 0 8-2 10-5l5 5-6 6zm-1-37c-3 0-5 1-6 3-2 2-3 5-3 8h18v-1c0-3-1-5-3-7-1-2-3-3-6-3zm43 29l6-2 2-5h9l-2 7-7 6-8 2c-6 0-11-2-14-6-4-4-5-9-5-16v-1c0-6 1-12 5-15 3-4 8-6 14-6 5 0 9 1 12 4s5 7 5 12h-9l-2-6-6-3c-3 0-6 2-7 4-2 2-3 5-3 10v1c0 5 1 8 3 11 1 2 4 3 7 3zm23-15c0-4 0-8 2-11s4-6 7-7c3-2 6-3 10-3 6 0 11 2 14 5 4 4 6 9 6 15v2c0 4-1 8-3 11-1 4-3 6-6 8s-7 3-11 3c-6 0-10-2-14-6s-5-10-5-16zm9 1c0 5 1 8 3 10 2 3 4 4 7 4s6-1 8-4c2-2 2-6 2-11 0-4 0-7-2-10-2-2-5-4-8-4s-5 2-7 4c-2 3-3 6-3 11zm47-21v4c3-3 7-5 12-5 6 0 10 2 12 6 3-4 7-6 13-6 5 0 8 1 10 4 3 2 4 6 4 11v28h-10v-28l-1-6-6-1-6 1-2 5v29h-10v-28c0-5-3-7-8-7-3 0-6 1-8 4v31h-9V87zm79 43c-6 0-11-2-15-6-3-4-5-9-5-15v-1l2-12c2-3 4-6 7-7 3-2 6-3 10-3 6 0 10 2 13 5 4 4 5 9 5 16v4h-28l4 8c2 2 5 3 8 3 4 0 8-2 10-5l5 5-6 6zm-1-37c-3 0-5 1-6 3-2 2-3 5-3 8h18v-1c-1-3-1-5-3-7-1-2-3-3-6-3zm71 36l-1-4c-3 3-7 5-12 5-4 0-7-2-10-4s-4-5-4-9 2-8 5-10c3-3 8-4 14-4h6v-3c0-2 0-4-2-5l-5-2-6 2-2 4h-9l2-7 6-4c3-2 6-2 9-2 5 0 9 1 12 4 3 2 5 6 5 10v19l1 9v1zm-11-7l5-1 4-4v-8h-5l-8 2c-2 1-2 3-2 5l1 4zm59-14v21h-10V72h22c7 0 12 2 15 5 4 3 6 8 6 13 0 6-2 10-6 13-3 3-8 5-15 5zm0-8h12c4 0 6-1 8-3 2-1 3-4 3-7s-1-5-3-7-4-3-7-3h-13zm66 29l-1-4c-3 3-7 5-11 5s-8-2-11-4c-2-2-4-5-4-9s2-8 5-10c4-3 9-4 15-4h6v-3l-2-5-6-2-5 2c-2 1-2 2-2 4h-10c0-3 1-5 3-7 1-2 3-3 6-4 2-2 5-2 9-2 5 0 9 1 12 4 2 2 4 6 4 10v19l2 9v1zm-10-7l5-1 4-4v-8h-6l-8 2-2 5c0 2 0 3 2 4 1 1 2 2 5 2zm40-46v11h7v7h-7v23l1 4 3 1 4-1v8l-7 1c-7 0-11-4-11-12V94h-7v-7h7V76zm37 19h-4c-5 0-7 2-9 5v29h-9V87h9v4c2-3 5-5 9-5h4zm4 12l2-11c2-3 4-6 7-7 3-2 7-3 11-3 5 0 10 2 13 5 4 4 6 9 6 15v2l-2 11c-2 4-4 6-7 8s-6 3-10 3c-6 0-11-2-15-6-3-4-5-10-5-16zm9 1c0 5 1 8 3 10 2 3 4 4 8 4 3 0 5-1 7-4 2-2 3-6 3-11 0-4-1-7-3-10-2-2-4-4-7-4-4 0-6 2-8 4-2 3-3 6-3 11zm47-21v4c3-3 8-5 13-5 8 0 13 5 13 15v28h-9v-28l-2-5c-1-2-3-2-6-2-4 0-7 1-8 5v30h-10V87z' fill='#fff'/><path d='M165 39c-25 0-45 21-45 46s20 46 45 46 45-21 45-46-20-46-45-46' fill='#fff'/><path d='M83 161V39h23v122z' fill='#fff'/></svg></a></p>
<p style="margin-bottom:32px;"><a href='https://boosty.to/kirilllive' target='_blank'><svg height="52" width="auto" viewBox="0 0 145 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="61.5370404%" y1="13%" x2="34%" y2="129%" id="line"><stop stop-color="#EF7829" offset="0%"/><stop stop-color="#F0692A" offset="28%"/><stop stop-color="#F15E2C" offset="63%"/><stop stop-color="#F15A2C" offset="100%"/></linearGradient></defs><path d="M138.1,13.1 L132.0,22.6 L131.3,13.1 L122.5,13.1 C123.3,10.3 124.0,8.1 124.0,8.1 L124.3,7 L117.6,7 L117.3,8.1 L115.8,13.1 L108.6,13.1 C102.7,13.1 99.4,14.8 98.0,18 C97.2,15 94.6,13.1 90.5,13.1 C87.2,13.1 84.1,14.3 81.6,16.5 C80.4,14.4 78.1,13.1 74.8,13.1 C71.2,13.1 67.9,14.5 65.4,16.9 C64.3,14.6 61.8,13.1 58.3,13.1 C57.1,13.1 55.9,13.3 54.8,13.6 L55.3,11.7 C55.4,11.7 55.4,11.7 55.4,11.6 L56.7,7 L50.0,7 L45.7,21.7 C45.6,22 45.5,22.3 45.4,22.6 C45.2,23.2 45.1,23.9 45.0,24.6 C44.5,28.7 46.3,31.8 51.3,32 C51.8,32 52.3,32.1 52.8,32.1 C56.2,32 59.6,30.7 62.1,28.3 C63.1,30.6 65.5,32.1 69.2,32.1 C72.5,32 75.6,30.8 78.1,28.7 C79.2,30.8 81.5,32.1 85.0,32.1 L101.9,32.1 C107.1,32.1 110.0,31 111.6,28.8 C111.6,30.9 112.8,32.1 115.9,32.1 C118.4,32.1 121.7,31.5 126.3,30.4 L119.6,39.9 L126.4,39.9 L144.8,13.1 L138.1,13.1 Z M58.9,22.6 C58.3,24.7 56.2,26.5 54.4,26.5 C52.5,26.5 51.5,24.7 52.1,22.6 C52.8,20.4 54.8,18.7 56.6,18.7 C58.5,18.7 59.5,20.4 58.9,22.6 Z M75.4,22.6 C74.7,24.7 72.7,26.5 70.9,26.5 C69.0,26.5 68.0,24.7 68.6,22.6 C69.3,20.4 71.3,18.7 73.2,18.7 C75.0,18.7 76.0,20.4 75.4,22.6 Z M84.4,22.6 C85.0,20.4 87.1,18.7 88.9,18.7 C90.7,18.7 91.8,20.4 91.1,22.6 C90.5,24.7 88.5,26.4 86.7,26.5 L86.6,26.5 C84.8,26.4 83.8,24.7 84.4,22.6 Z M106.1,25.8 C105.7,26.6 103.1,26.5 102.4,26.5 L95.9,26.5 C96.8,25.3 97.4,24 97.8,22.6 C97.9,22.4 97.9,22.3 98.0,22.2 C98.7,23.2 100.2,24.1 103.1,24.6 C105.8,25.2 106.3,25 106.1,25.8 Z M112.7,23.7 C112.2,21.4 109.7,20.6 106.2,20.2 C104.7,20 103.9,19.9 104.1,19.3 C104.2,18.8 105.0,18.7 106.5,18.7 L114.2,18.7 L112.7,23.7 Z M119.4,23.7 C119.4,23.7 120.1,21.4 120.9,18.7 L125.2,18.7 L125.9,25.8 C118.8,27.3 118.7,26.9 119.4,23.7 L119.4,23.7 Z" fill="#242B2C" fill-rule="nonzero"/><path d="M1.0,23.8 L7.8,0 L18.2,0 L16.1,7.4 C16.0,7.4 16.0,7.4 16.0,7.5 L10.5,27.1 L15.6,27.1 C13.5,32.5 11.8,36.8 10.6,40 C1.1,39.8 -1.5,32.9 0.7,24.7 L1.0,23.8 Z M10.6,40 L23.2,21.6 L17.8,21.6 L22.5,9.8 C30.4,10.6 34.1,17 31.9,24.7 C29.6,33 20.1,40 10.8,40 L10.6,40 Z" fill="url(#line)"/></svg></a></p>
<div class="art">
. _..::__: ,-"-"^""> .==" ,_ _,.__
_.___ _ _<_>`!(._`.`-. /" __._ ^^`_ ,'' '-._.---.-.__
>=<" " " `-==,',._\{ \_/-^ {) /"_^_ ">"""' ` _ _
\_.:--. `._ )`^\ ,\ '/_/( ) /""",/-'
"' \ " _ \ (/-/,--' "\. (|
| _/ ^" |"__.\\.<=>() _,\// '
`. | /=-_'`^-^( " /'}=/)
\\ .-.) / `-'"..'"\:._ ) " '
.` \ (__`( | \:\""> \ ,- <-"' '
`._,| "" | \\`' \| \ ) "{\
`=.^^". `._._ ,' "` |' ,"/'.
( `-._ \ / `:`<_|h--._
\ > | ( `=.__.`-'\
\ / | )| ,-./\ .
| ,' \ / / ,-" \
/ / \ / \ __ /
/ | "' '-' \_| \.
| / " ./
|/ '
</div>
</div>
</div>
</div>
</body>
</html>