-
-
Notifications
You must be signed in to change notification settings - Fork 22
/
ascii_paint_minified.html
20 lines (17 loc) · 66.6 KB
/
ascii_paint_minified.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="UTF-8">
<link rel="shortcut icon" href="icon.jpg" type="image/x-icon">
<title>ASCII Art Paint</title>
<style>
*{ font-family: Arial; font-size: 12px; border-collapse: collapse; border: none; margin: 0; padding: 0; border-spacing: 0px; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; color: var(--tx);} :root{ --cw: #efefff; --cb: #cec8e3; --cs: rgba(110, 95, 165, 0.25); --cm: rgba(110, 95, 165, 0.5); --wn: #fff; --ft: none; --tx: #000; --ac: rgba(255, 255, 255, 0.8); --at: rgba(240, 240, 240, 0.8); --bh: #efefff; --font: Arial;} hr{ border-top: 1px solid var(--cb); margin: 4px 0px;} option{ color: #000;} .cls-2{ stroke: #000; stroke-width: 8px;} body{ height: 100vh; width: 100vw; overflow: hidden;} .icon{ background-size: 22px 22px; background-repeat: no-repeat; background-position: center;} .icon_new{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' d='M223,52V249H35V6H176ZM223,53H176V6'/%3e%3c/svg%3e")} .icon_load{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' d='M48,85H252L208,226H5ZM48,85L5,226V51L18,34H65l13,17H208V85H48Z'/%3e%3c/svg%3e")} .icon_save{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' d='M238,51V228a10,10,0,0,1-10,10H27a10,10,0,0,1-10-10V27A10,10,0,0,1,27,17H203ZM39,238V127a10,10,0,0,1,10-10H205a10,10,0,0,1,10,10V238H39ZM174,95H79a10,10,0,0,1-10-10V17H184V85A10,10,0,0,1,174,95ZM168,42a10,10,0,0,0-10-10H144a10,10,0,0,0-10,10V71a10,10,0,0,0,10,10h14a10,10,0,0,0,10-10V42ZM63,162H192m0,49H63'/%3e%3c/svg%3e")} .icon_equal{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' d='M47,127h161M128,208V47'/%3e%3c/svg%3e")} .icon_minus{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' d='M47,127h161'/%3e%3c/svg%3e")} .icon_copy{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M8,61L29,40M30,53V39H16M17,31V14a4,4,0,0,1,4-4h6v4H45V10h6a4,4,0,0,1,4,4V48a4,4,0,0,1-4,4H37M27,18V7h5a4,4,0,0,1,8,0h5V18H27Z'/%3e%3c/svg%3e")} .icon_paste{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M33,39L54,60M55,47V61H41M46,38V14a4,4,0,0,0-4-4H36v4H18V10H12a4,4,0,0,0-4,4V48a4,4,0,0,0,4,4H31M36,18V7H31a4,4,0,0,0-8,0H18V18H36Z'/%3e%3c/svg%3e")} .icon_about{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cg fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' %3e%3cpath d='M106,104h22v86M106,192h42'/%3e%3ccircle fill='none' cx='128' cy='64' r='6'/%3e%3ccircle cx='128' cy='128' r='120'/%3e%3c/g%3e%3c/svg%3e")} .icon_edit{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='12' d='M164,37l53,53-131,131L33,169ZM225,16L238,29a28,28,0,0,1,0,40l-20,20L164,37,185,16A28,28,0,0,1,225,16ZM59,195L190,64M9,245h0l73-22L32,173Z'/%3e%3c/svg%3e")} .icon_clear{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 128 128'%3e%3cpath fill='none' stroke='%23000' stroke-width='6' stroke-linejoin='round' d='M53,113H24L3,92V73L73,3l45,45ZM20,56l45,45M74,28L45,58M9,123H64M120,112h6M105,112h6M70,112H96'/%3e%3c/svg%3e")} .icon_undo{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M17,29L5,17,17,5M6,17H37c11.322,0,20,6.678,20,18S48.322,53,37,53H17'/%3e%3c/svg%3e")} .icon_fill{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M22,3L54,35M55,42s6,10,6,14a6,6,0,0,1-12,0C49,52,55,42,55,42ZM29,10L54,35,29,60a7,7,0,0,1-10,0L4,45A7,7,0,0,1,4,35ZM52,35H19'/%3e%3c/svg%3e")} .icon_cursor{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath stroke='%23000' stroke-width='2px' fill='none' d='M49,45c0,7-8,13-17,13S15,52,15,45V20a3,3,0,0,1,6,0V35h1V13a3,3,0,0,1,6,0V32h1V9a3,3,0,0,1,6,0V32h1V13a3,3,0,0,1,6,0V34l1,1V28a3,3,0,0,1,6,0V45Z'/%3e%3c/svg%3e")} .icon_close{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3ccircle fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' cx='128' cy='128' r='120'/%3e%3cpath fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' d='M71,184L184,70M184,184L71,70'/%3e%3c/svg%3e")} .icon_pipette{ filter: var(--ft); transform: scaleX(-1); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M31,13L14,30M29,20L54,45v5l4,4-3,3-4-4H46L21,28m-3-3L8,15C6,13,5,8,7,6s6.852-1.1,9,1L26,17'/%3e%3c/svg%3e")} .icon_edit2{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='10' stroke-linejoin='round' d='M150.5,44.71h60.03a20,20,0,0,1,20,20V227.63a20,20,0,0,1-20,20H46.47a20,20,0,0,1-20-20V64.71a20,20,0,0,1,20-20H107M105.13,9.37h46.74V160.99H105.13V9.37ZM129.07,160.99V9.37M127.369,204.31h2.279l22.222-43.32H105.147Z'/%3e%3c/svg%3e")} .icon_setting{ filter: var(--ft); background-image: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.99 18C15.0276 18 17.49 15.5376 17.49 12.5C17.49 9.46243 15.0276 7 11.99 7C8.95242 7 6.48999 9.46243 6.48999 12.5C6.48999 15.5376 8.95242 18 11.99 18Z" stroke="%230F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.2 4.2L14.28 3C15.69 3.58 15.69 3.58 17.1 4.17L17.02 5.78C16.97 6.74 17.76 7.53 18.72 7.48L20.33 7.4C20.91 8.81 20.91 8.81 21.5 10.22L20.3 11.3C19.59 11.94 19.59 13.06 20.3 13.7L21.5 14.78C20.92 16.19 20.92 16.19 20.33 17.6L18.72 17.52C17.76 17.47 16.97 18.26 17.02 19.22L17.1 20.83C15.69 21.41 15.69 21.41 14.28 22L13.2 20.8C12.56 20.09 11.44 20.09 10.8 20.8L9.72 22C8.31 21.42 8.30999 21.42 6.89999 20.83L6.98 19.22C7.03 18.26 6.24 17.47 5.28 17.52L3.67 17.6C3.09 16.19 3.09 16.19 2.5 14.78L3.7 13.7C4.41 13.06 4.41 11.94 3.7 11.3L2.5 10.22C3.08 8.81 3.08 8.81 3.67 7.4L5.28 7.48C6.24 7.53 7.03 6.74 6.98 5.78L6.89999 4.17C8.30999 3.59 8.31 3.59 9.72 3L10.8 4.2C11.44 4.91 12.55 4.91 13.2 4.2Z" stroke="%230F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>')} .show{ filter: var(--ft); content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M25.266,39.378A9.989,9.989,0,1,1,39.378,25.266m2.584,5.975C41.981,31.493,42,31.744,42,32A10,10,0,0,1,32,42c-0.256,0-.507-0.019-0.759-0.038M2,32S12,16,32,16a35.006,35.006,0,0,1,13.84,2.8m5.585,2.974A37.4,37.4,0,0,1,62,32M8.8,55.84l45.41-45.41'/%3e%3c/svg%3e"); -webkit-appearance: none; -moz-appearance: none; appearance: none;} .show:checked{ filter: var(--ft); content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cg fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'%3e%3ccircle cx='32' cy='32' r='10'/%3e%3cpath d='M2,32S12,16,32,16,62,32,62,32'/%3e%3c/g%3e%3c/svg%3e");} .icon_del{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' d='M194,62V230H63V62M47,45H210M108,23h39V45H108V23ZM128,62V213M92,62V213M164,62V213'/%3e%3c/svg%3e")} .icon_size{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' d='M56,41V56H41M8,41V56H23M56,23V8H41M8,23V8H23M21,21H43V43H21V21Z'/%3e%3c/svg%3e")} .icon_equal{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' d='M47,127h161M128,208V47'/%3e%3c/svg%3e")} .icon_minus{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3cpath fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' d='M47,127h161'/%3e%3c/svg%3e")} .icon_scale{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3ccircle fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' cx='128' cy='128' r='92'/%3e%3c/svg%3e")} .icon_diag{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' d='M47,47L4,4M47,32V47H32M62,32V62H32'/%3e%3c/svg%3e")} .icon_selected{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M47,5h7v7M5,12V5h7m0,49H5V47M54,33v7m0-21v7M40,54H33M33,5h7M19,5h7m0,49H19M5,40V33m0-7V19M54,47v7H47m7,7V54h7'/%3e%3c/svg%3e")} .icon_replaces{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M47,9L57,19,47,29M17,36L7,46,17,56M56,46H8M8,19H56'/%3e%3c/svg%3e")} .icon_them{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 256'%3e%3ccircle fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round' cx='128' cy='128' r='120'/%3e%3cpath fill='%23000' stroke='%23000' stroke-width='16' stroke-linejoin='round' d='M128,215.175V38.825A88.18,88.18,0,0,1,128,215.175Z'/%3e%3c/svg%3e")} .icon_cut{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cg fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'%3e%3cpath d='M34,34V2l6,12V34m0,6V54m-6-8V40M53.984,40.016h-40l-12-6h44'/%3e%3ccircle cx='32' cy='54' r='8'/%3e%3ccircle cx='54' cy='32' r='8'/%3e%3c/g%3e%3c/svg%3e")} .icon_cent{ filter: var(--ft); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' d='M56,41V56H41M8,41V56H23M56,23V8H41M8,23V8H23M21,21H43V43H21V21Z'/%3e%3c/svg%3e")} .button_s{ filter: var(--ft); height: 22px; width: 22px; background-size: 22px 22px; background-repeat: no-repeat; background-position: center; cursor: pointer;} #asciiscreen{ position: relative; box-shadow: 0px 2px 24px var(--cs); image-rendering: pixelated;} .add_lines{ position: absolute; border-radius: 16px; background: var(--wn); box-shadow: 0px 2px 24px var(--cs);} #asciicanvas td{ text-align: center; height: 14px; width: 8px; font-size: 12px; border-style: solid; border-width: 1px; border-color: var(--at); background-color: var(--ac); font-family: var(--font), monospace;} #asciicanvas td:hover{ background-color: var(--cb);} #menu_panel{ top: 0; left: 0; background-color: var(--wn); box-shadow: 0px 2px 24px var(--cs); border-radius: 0 0 16px 0; position: fixed; height: 40px; overflow: hidden;} #tool_panel{ top: 50%; left: 20px; transform: translateY(-50%); background-color: var(--wn); box-shadow: 0px 2px 24px var(--cs); border-radius: 16px; position: fixed; width: 40px;} .button_menu{ background-position: center; cursor: pointer; width: 40px; height: 40px;} .button_menu:hover{ background-color: var(--bh);} #tool_zone{ position: fixed; left: 76px; top: 50vh; z-index: 10020; transform: translateY(-50%); justify-content: center; align-items: center;} #window_zone{ height: 100vh; width: 100%; position: fixed; left: 0; top: 0; background-color: var(--cm); transition-duration: 0.5s; z-index: 10020; justify-content: center; align-items: center;} .window_close{ position: absolute; right: 0px; top: 0px; height: 40px; width: 40px; cursor: pointer;} .window_title{ position: absolute; right: 50%; top: 0px; height: 40px; transform: translateX(50%); display: grid; justify-content: center; align-items: center;} .window{ position: relative; background-color: var(--wn) !important; border-radius: 16px; box-shadow: 0px 2px 24px var(--cs); padding: 2px 8px 24px 8px;} #toast{ position: fixed; opacity: 0; bottom: -10%; transform: translateX(-50%); padding: 0px 32px; height: 40px; min-width: 128px; box-shadow: 0px 2px 24px var(--cs); z-index: 20000; background-color: var(--wn); display: grid; justify-content: center; align-items: center;} .toast_anim{ left: 50%; border-radius: 32px; animation: viwe 0.25s, stop 2s 0.25s, close 0.5s 2s linear;} @keyframes viwe{ from{ opacity: 0; bottom: 64px} to{ opacity: 1; bottom: 64px}} @keyframes stop{ from{ opacity: 1; bottom: 64px} to{ opacity: 1; bottom: 64px}} @keyframes close{ from{ opacity: 1; bottom: 64px} to{ opacity: 0; bottom: -32px}} .symbol{ height: 32px; width: 32px; display: grid; justify-content: center; align-items: center; float: left; font-family: var(--font), monospace;} .symbol:hover{ background-color: var(--cw);} .edittext{ font-family: monospace; height: calc(100% - 40px); width: 100%; resize: none; white-space: pre; padding: 8px; box-sizing: border-box; border-top: 1px solid var(--cb); border-bottom: 1px solid var(--cb); background-color: var(--wn); -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;} .button{ background-size: 20px 20px; background-repeat: no-repeat; width: 128px; height: 36px; border-radius: 20px; cursor: pointer; background-color: var(--cw); display: grid; justify-content: center; align-items: center; background-position: left 9px center;} .button:hover{ background-color: var(--cb);} .symbol_select{ cursor: pointer; position: relative; height: 32px; width: 32px; float: left;} .symbol_select input{ position: absolute; display: none; cursor: pointer;} .symbol_select span{ position: absolute; display: grid; justify-content: center; align-items: center; top: 0; left: 0; height: 100%; width: 100%;} .symbol_select:hover input~span{ background-color: var(--cw);} .symbol_select input:checked~span{ background-color: var(--cb);} .input_text{ border: 0; font-family: Arial; font-size: 12px; -webkit-appearance: none; border-bottom: 1px solid var(--cb); background-color: transparent; cursor: text; height: 28px; width: 100%; -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;} #scene_controll{ position: fixed; height: 40px; z-index: 10000; bottom: 32px; right: 288px; border-radius: 20px; background-color: var(--wn); box-shadow: 0px 2px 24px var(--cs); cursor: pointer;} .align{ -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 32px; width: 32px; border-radius: 4px; cursor: pointer;} .align:checked{ background-color: var(--cb);} #context_menu{ background-color: var(--wn); box-shadow: 0px 2px 24px var(--cs); border-radius: 8px;} #context_menu td{ height: 32px; padding-left: 32px; cursor: pointer; position: relative;} #context_menu td div{ height: 32px; width: 32px; position: absolute; top: 0; left: 0; display: inline-block; background-size: 16px 16px; background-repeat: no-repeat; background-position: 8px center;} #context_menu td:hover{ background-color: var(--cw);} input[type=range]{ appearance: none; height: 8px; background: var(--cw); outline: none; border-radius: 8px;} input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cb); cursor: pointer; border: 3px solid var(--wn);} input[type=range]::-moz-range-thumb{ -moz-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--cb); cursor: pointer; border: 3px solid var(--wn);} input[type=range]::-moz-range-progress{ -moz-appearance: none; height: 8px; background: var(--cb); outline: none; border-radius: 8px;} .proportion{ filter: var(--ft); width: 32px; cursor: pointer; content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 512'%3e%3cg fill='none' stroke='%23000' stroke-width='10' stroke-linejoin='round'%3e%3cpath d='M128,188a12,12,0,0,1,12,12v32a12,12,0,0,1-24,0V200A12,12,0,0,1,128,188Z M128,268a12,12,0,0,1,12,12v32a12,12,0,0,1-24,0V280A12,12,0,0,1,128,268Z M128,283V232'/%3e%3ccircle cx='16' cy='85' r='12'/%3e%3ccircle cx='16' cy='428' r='12'/%3e%3c/g%3e%3c/svg%3e"); background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .proportion:checked{ filter: var(--ft); content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 256 512'%3e%3cg fill='none' stroke='%23000' stroke-width='10' stroke-linejoin='round' %3e%3cpath d='M128,355.5V398a30,30,0,0,1-30,30H29M29,85H98a30,30,0,0,1,30,30v42.5 M128,188a12,12,0,0,1,12,12v32a12,12,0,0,1-24,0V200A12,12,0,0,1,128,188Z M128,268a12,12,0,0,1,12,12v32a12,12,0,0,1-24,0V280A12,12,0,0,1,128,268Z M128,283V232'/%3e%3ccircle cx='16' cy='85' r='12'/%3e%3ccircle cx='16' cy='428' r='12'/%3e%3c/g%3e%3c/svg%3e");} #boosty{ fill: var(--tx);}
</style>
</head>
<body onload="new_canvas(60,30);">
<canvas id="preview" style="display:none;"></canvas><a id="get_file" style="display:none;position:fixed;"></a><input id="file" type="file" style="display:none;position:fixed;" /><textarea id="copytext" style="position:fixed;height:1px;width:1px;left:-10px;top:-10px;"></textarea><table style="height:100vh;width:100vw;"><tbody><tr><td rowspan="3"><div id="viewport" style="height:100vh;width:calc(100vw - 256px);box-sizing:border-box;overflow:hidden;background-color:var(--cw);"><div id="asciiview" style="transform-origin:left top;display:grid;justify-content:center;align-items:center;min-width:100vw;min-height:100vh;"><div id="asciiscreen"><table class="add_lines" style="left:-80px;top:50%;transform:translateY(-50%);width:64px;height:32px;"><tbody><tr><td onclick="add_cells(1,1)" class="button_menu icon_equal icon" style="height:32px;border-radius:16px;"></td><td onclick="del_cells(1,1)" class="button_menu icon_minus icon" style="height:32px;border-radius:16px;"></td></tr></tbody></table><table class="add_lines" style="left:50%;top:-80px;transform:translateX(-50%);width:32px;height:64px;"><tbody><tr><td onclick="add_cells(2,1)" class="button_menu icon_equal icon" style="height:32px;border-radius:16px;"></td></tr><tr><td onclick="del_cells(2,1)" class="button_menu icon_minus icon" style="height:32px;border-radius:16px;"></td></tr></tbody></table><table class="add_lines" style="right:-80px;bottom:50%;transform:translateY(50%);width:64px;height:32px;"><tbody><tr><td onclick="del_cells(3,1)" class="button_menu icon_minus icon" style="height:32px;border-radius:16px;"></td><td onclick="add_cells(3,1)" class="button_menu icon_equal icon" style="height:32px;border-radius:16px;"></td></tr></tbody></table><table class="add_lines" style="right:50%;bottom:-80px;transform:translateX(50%);width:32px;height:64px;"><tbody><tr><td onclick="del_cells(4,1)" class="button_menu icon_minus icon" style="height:32px;border-radius:16px;"></td></tr><tr><td onclick="add_cells(4,1)" class="button_menu icon_equal icon" style="height:32px;border-radius:16px;"></td></tr></tbody></table><table id="asciicanvas"><tbody></tbody></table><table id='context_menu' style='position:absolute;left:0;top:0;visibility:hidden;width:92px;'><tbody><tr><td onmousedown="save_art(false);delete_data()" style="border-radius:8px 8px 0 0;"><div class="icon_cut"></div>Cut </td></tr><tr><td onmousedown="save_art(false)"><div class="icon_copy"></div>Copy </td></tr><tr><td onmousedown="paste_data(targetcell[0],targetcell[1],true)"><div class="icon_paste"></div>Paste </td></tr><tr><td onmousedown="delete_data()"><div class="icon_clear"></div>Delete </td></tr><tr><td onmousedown="modal_window(true,'text_edit');save_art(false)"><div class="icon_edit2"></div>Text </td></tr><tr><td onmousedown="crop_cells()"><div class="icon_cent"></div>Crop </td></tr><tr><td onmousedown="selected=[0,0,0,0];select_arr();" style="border-radius:0 0 8px 8px;"><div class="icon_close"></div>Deselect </td></tr></tbody></table></div></div></div></td><td style="height:40px;background-color:var(--wn);"></td></tr><tr><td style="height:calc(100vh - 80px);"><div id="right_menu" style="height:calc(100vh - 80px);width:256px;overflow-y:scroll;background-color:var(--wn);text-align:center;"><select id="fonts" class="input_text" style="width:calc(100% - 28px);margin-bottom:16px;" oninput='root_style.style.setProperty("--font",this.value);'><option value="Arial">Arial</option><option value="Lucida Console" selected>Lucida Console</option><option value="Courier New" selected>Courier New</option></select><div id="symbols_view" style="display:inline-block;"></div><div class="button" style="margin:14px;width:calc(100% - 28px);" onclick="modal_window(true,'palette_edit');edit_p=false;getallChar()">Edit symbol palette</div><div id="img_preview" style="display:none;width:100%;text-align:center;border-top:1px solid var(--cb);"><br><img id="img_icon" style="background-color:var(--cw);width:90%;height:auto;border-radius:8px;text-align:center;cursor:pointer;image-rendering:pixelated;" onclick="file.click();"><br><div style="text-align:left;width:calc(100% - 28px);margin:14px 0 0 14px;">Palette</div><div style="margin:0 14px 14px 14px;display:grid;grid-template-columns: auto 32px;width:calc(100% - 28px);"><input type="text" id="art_palette" style="width:100%;font-family:var(--font),monospace;" class="input_text palette_simbols" onchange="localStorage.setItem('art_palette',this.value);"><div class="button_s icon_edit2" style="background-position:right;width:32px;" onclick="modal_window(true,'palette_edit');edit_p=true;getallChar()"></div></div><div style="text-align:left;width:calc(100% - 28px);margin-left:14px;">Brightness</div><input type="range" id="brightness" oninput="img_icon.style.filter='contrast('+contrast.value+'%) brightness('+this.value+'%)'" name="vol" min="0" max="500" value="100" step='1' style="margin:14px;width:calc(100% - 28px);"><div style="text-align:left;width:calc(100% - 28px);margin-left:14px;">Contrast</div><input type="range" id="contrast" oninput="img_icon.style.filter='contrast('+this.value+'%) brightness('+brightness.value+'%)'" name="vol" min="0" max="500" value="100" step='1' style="margin:14px;width:calc(100% - 28px);"><table style="margin:14px;width:calc(100% - 28px);"><tbody><tr><td style="width:33%;" align="center"><input id="img_show" title="Show / Hide image" class="button_s show" checked onchange="frame.style.backgroundSize=(this.checked)?'100% 100%':'0% 0%'" type="checkbox"></td><td align="center"><div title="original image size" class="button_s icon_size" onclick="original_size();"></div></td><td style="width:33%;" align="center"><div title="Delete image" class="button_s icon_del" onclick="delete_img();"></div></td></tr></tbody></table><div class="button" style="margin:14px;width:calc(100% - 28px);" onclick="img_to_ascii(0);">image to ASCII</div><div class="button" style="margin:14px;width:calc(100% - 28px);" onclick="img_to_ascii(1);">image to Braille</div></div><div style="width:100%;text-align:center; border-top:1px solid var(--cb);"><table style="margin:14px;width:calc(100% - 28px);"><tbody><tr><td align="center" colspan='2'><form id="align"><table style="width:100%;"><tbody><tr><td align="right"><input type="radio" name="align" class="icon icon_diag align button_menu" style="transform:scaleX(-1) scaleY(-1);"></td><td align="left"><input type="radio" name="align" class="icon icon_diag align button_menu" style="transform:scaleY(-1);"></td></tr><tr><td align="right"><input type="radio" name="align" class="icon icon_diag align button_menu" style="transform:scaleX(-1);"></td><td align="left"><input type="radio" name="align" class="icon icon_diag align button_menu" checked></td></tr></tbody></table></form></td></tr><tr><td style="padding-right:10px;width:33%;" align="right">Width</td><td align="center"><input type="text" id="canvasWidth" onchange="this.value=correct_value(this.value);if(canvasProportion.checked){canvasHeight.value=Math.round(tr.length*(this.value/td.length))}" class="input_text palette_simbols"></td><td rowspan="2"><input id="canvasProportion" class="proportion" type="checkbox" checked></td></tr><tr><td style="padding-right:10px;" align="right">Height</td><td align="center"><input type="text" id="canvasHeight" onchange="this.value=correct_value(this.value);if(canvasProportion.checked){canvasWidth.value=Math.round(td.length*(this.value/tr.length))}" class="input_text palette_simbols"></td></tr></tbody></table><div class="button" style="margin:14px;width:calc(100% - 28px);" onclick="resize_canvas();">Resize canvas</div></div><div style="width:100%;text-align:center;border-top:1px solid var(--cb);"><table style="margin:14px;width:calc(100% - 28px);"><tbody><tr><td style="padding-right:10px;" align="right">Replace</td><td style="padding-right:10px;"><input type="text" id="replaces_what" style="text-align:center;" oninput="this.value=this.value.charAt(0)" class="input_text palette_simbols"></td><td align="center" class="icon_replaces icon align button_menu" style="cursor:pointer;" onclick="var a=[replaces_what.value,replaces_than.value];replaces_what.value=a[1];replaces_than.value=a[0]"></td><td style="padding-left:10px;"><input type="text" id="replaces_than" style="text-align:center;" oninput="this.value=this.value.charAt(0)" class="input_text palette_simbols"></td></tr></tbody></table><div class="button" style="margin:14px;width:calc(100% - 28px);" onclick="replaces(replaces_what.value,replaces_than.value)">Replace symbols</div></div><div style="width:100%;text-align:center;border-top:1px solid var(--cb);"><table style="margin:14px;width:calc(100% - 28px);"><tbody><tr><td style="padding-right:10px;width:33%;" align="right">Width</td><td align="center"><input type="text" id="imgWidth" onchange="this.value=correct_value(this.value);if(imgProportion.checked){imgHeight.value=Math.round((tr.length*14)*(this.value/(td.length*8)))}" class="input_text palette_simbols"></td><td rowspan="2"><input id="imgProportion" class="proportion" type="checkbox" checked></td></tr><tr><td style="padding-right:10px;" align="right">Height</td><td align="center"><input type="text" id="imgHeight" onchange="this.value=correct_value(this.value);if(imgProportion.checked){imgWidth.value=Math.round((td.length*8)*(this.value/(tr.length*14)))}" class="input_text palette_simbols"></td></tr></tbody></table><div class="button" style="margin:14px;width:calc(100% - 28px);" onclick="save_png()">Save image png</div></div></div></td></tr><tr><td style="height:40px;border-top:1px solid var(--cb);background-color:var(--wn);" align="center"><table style="width:256px;"><tbody><tr><td align="right" style="padding-right:4px;width:32px;">Cells</td><td id="cells" align="left" style="width:40px;"></td><td align="right" style="padding-right:4px;width:16px;">X</td><td id="cur_x" align="left" style="width:24px;"></td><td align="right" style="padding-right:4px;width:16px;">Y</td><td id="cur_y" align="left" style="width:24px;"></td><td align="right" style="padding-right:4px;width:32px;">Size</td><td id="arr_size" align="left" style="width:72px;"></td></tr></tbody></table></td></tr></tbody></table><table id="menu_panel"><tbody><tr><td title='New txt file' onclick='new_canvas(60,30);' class='icon button_menu icon_new'></td><td title='Load txt file' onclick='file.click();' class='icon button_menu icon_load'></td><td title='Save txt file' onclick='save_art(true);' class='icon button_menu icon_save'></td><td title='Undo' onclick='state_back(1);' class='icon button_menu icon_undo'></td><td title='Redo' onclick='state_back(-1);' class='icon button_menu icon_undo' style='transform:scaleX(-1);'></td><td title='About ASCII Art paint' onclick="modal_window(true,'about');" class='icon button_menu icon_about'></td><td title='Text input' onclick="modal_window(true,'text_edit');save_art(false)" class='icon button_menu icon_edit2'></td><td title='Copy text' onclick="save_art(false);toast('Copied to clipboard');" class='icon button_menu icon_copy'></td><td title='light dark theme' onclick="if(!localStorage.getItem('them')){localStorage.setItem('them','1');set_ui(1)}else{localStorage.removeItem('them');set_ui(0)}" class='icon button_menu icon_them' style='border-radius:0 0 16px 0;'></td><td title='light dark theme' class='icon button_menu icon_setting' style="display: none;"></td></tr></tbody></table><table id="tool_panel"><tbody><tr><td title='Hand/Scroll (Alt+H / Alt+1)' onclick='select_tool(0);' class='tools icon button_menu icon_cursor' style="border-radius:16px 16px 0 0;background-size:32px 32px;"></td></tr><tr><td title='Brush/Pencil (Alt+B / Alt+2)' onclick="select_tool(1);" class='tools icon button_menu icon_edit' style="background-color:var(--cb);"></td></tr><tr><td title='Eraser (Ctrl+Alt+E / Alt+3)' onclick="select_tool(2);" class='tools icon button_menu icon_clear'></td></tr><tr><td title='Fill (Ctrl+Alt+F / Alt+4)' onclick="select_tool(3);" class='tools icon button_menu icon_fill'></td></tr><tr><td title='Pipette (Alt+P / Alt+5)' onclick="select_tool(4);" class='tools icon button_menu icon_pipette'></td></tr><tr><td title='Selection (Alt+S / Alt+6)' onclick="select_tool(5);" class='tools icon button_menu icon_selected'></td></tr><tr><td id="active_brush" align='center' valign='center' class="tools icon" style="font-size:18px;border-radius:0 0 16px 16px; width:40px;height:40px;border-top:1px solid var(--cb);"></td></tr></tbody></table><div id="scene_controll"><table height="100%"><tbody><tr><td width="42px" class="icon button_menu icon_equal" onclick="canvas_scale(2)" style="border-radius:20px 0 0 20px;"></td><td width="42px" class="icon button_menu icon_scale" onclick="canvas_scale(false)"></td><td width="42px" class="icon button_menu icon_minus" onclick="canvas_scale(1)"></td><td width="42px" class="icon button_menu " style="border-radius:0 20px 20px 0;padding: 0 10px;"><input type="range" id="scale_range" min="0.25" max="2" value="1" step="0.05" onchange="update_canvas_scale(this.value)"></td></tr></tbody></table></div><div id='window_zone' style="display:none"></div><div id='tool_zone' style="display:none"></div><div id="toast"></div><div id='about' style="display:none"><div class='window' style='padding:24px 16px;width:412px;'><div><div class='window_close icon icon_close' onclick='modal_window(false)'></div></div><div align='center'><p style='font-size:22px;'>ASCII Art Paint</p><hr><p>Release: 11</p><br><br><table style='border-spacing:10px;border-collapse:separate; width: 100%;'><tr><td align='right' colspan='1'>E-Mail:</td><td align='left' colspan='3'><a href='mailto:[email protected]' target='_blank'>[email protected]</a></td></tr><tr><td align='right' colspan='1'>WebSite:</td><td align='left' colspan='3'><a href='https://github.com/Kirilllive/ASCII_Art_Paint' target='_blank'>https://github.com/Kirilllive/ASCII_Art_Paint</a></td></tr></table><br><br><p>Thanks for the help from users</p><hr><br><table width='100%' align='center'><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><br><br><p><a href='https://www.patreon.com/kirill_live' target='_blank'><svg height='40' width='198' 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><br><p><a href='https://boosty.to/kirilllive' target='_blank'><svg width="145" height="40" 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 id="boosty" 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-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><br></div></div></div><div id='text_edit' style="display:none"><div class='window' align='center' style='padding-top:40px;height:calc(100vh - 128px);width:calc(100vw - 128px);'><div class="window_title">Text input</div><div class='window_close icon icon_close' onclick='modal_window(false)'></div><textarea class="edittext"></textarea><div class="button" style="margin:14px;" onclick="text_apply();">Apply</div></div></div><div id='palette_edit' style="display:none"><div class='window' align='center' style='padding: 40px 8px 16px 8px;width:calc(100vw - 128px);'><div class='window_close icon icon_close' onclick='modal_window(false)'></div><div class="window_title">Edit symbol palette</div><table style="width:100%;"><tbody><tr><td><input type="text" class="input_text palette_simbols" style="font-family:var(--font),monospace;"></td><td style="width:128px;" rowspan="3" valign="top"><table style="border-collapse: collapse; width: 100%; margin-top:40px;"><tbody><tr><td align="left">Font</td><td align="center"><select id="fonts_palette" class="input_text" oninput='root_style.style.setProperty("--font",this.value);'></select></td></tr><tr><td align="left">Size</td><td align="center"><input style="margin:16px 0;border-bottom:none;" onchange="var symbol_ele=document.getElementsByClassName('char');for (var e=0;e<symbol_ele.length;e++){symbol_ele[e].style.fontSize=this.value+'px'}" class="input_text" type="range" value="12" min="12" max="22" step="1"></td></tr><tr><td colspan="2" style="padding:14px 0 4px 0;" align="left">Character range</td></tr><tr><td style="padding:0 12px 0 0;" align="right">from</td><td><input type="text" class="input_text range"></td></tr><tr><td align="right" style="padding-right:10px;">to</td><td><input type="text" class="input_text range"></td></tr><tr><td colspan="2"><div class="button" style="margin:14px;" onclick="if(edit_p){art_palette.value=window_zone.getElementsByClassName('palette_simbols')[0].value}else{palette=window_zone.getElementsByClassName('palette_simbols')[0].value}range_font=[parseInt(window_zone.getElementsByClassName('range')[0].value),parseInt(window_zone.getElementsByClassName('range')[1].value)];getallChar();">Update</div></td></tr></tbody></table></td></tr><tr><td><div class="all_simbols" style="display:none;height:calc(100vh - 256px);width:100%;overflow:auto;border-bottom:1px solid var(--cb);"></div></td></tr></tbody></table><div id="palette_apply" class="button" style="margin-top:16px;" onclick="applyChar();modal_window(false);">Apply</div></div></div><div id="cursor_text" style="position:fixed;background-color:var(--ac);padding:4px 6px;border-radius:6px;display:none;"></div><div id="replaces" style="display:none"><div class='window' style='padding:24px 16px;width:128px;'></div></div>
<script>
var range_font=[0,13313],edit_p=!1,palette="██▓▒░☺☻♥♦♣♠•◘○◙♂♀♪♫☼►◄↕‼¶§▬↨↑↓→←∟↔▲▼`⌂ÇæÆ¢£¥₧ƒªº¿⌐¬½¼¡«»│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙⋅√ⁿ²■",se,x1,x2,y1,y2,db=[[],[],[],[],[],[],[],[]],tool=0,img,scale=1,back_up=[],state_num=0,tr,td,brush="*",frame=document.getElementById("asciicanvas"),canvas=frame.getElementsByTagName("tbody")[0],mouseclick=!1,files=document.getElementById("file"),window_zone=document.getElementById("window_zone"),tool_zone=document.getElementById("tool_zone"),selected=[0,0,0,0],targetcell=[0,0],copydb="",root_style=document.querySelector(":root"),contextmenushow=!1,doc;function menu_right(e){contextmenushow=!0,doc=asciiscreen.getBoundingClientRect(),context_menu.style.visibility="visible",context_menu.style.left=(e.clientX+asciiscreen.scrollLeft-doc.left)/scale+"px",context_menu.style.top=(e.clientY+asciiscreen.scrollTop-doc.top)/scale+"px"}asciicanvas.addEventListener?asciicanvas.addEventListener("contextmenu",function(e){menu_right(e),e.preventDefault()},!1):asciicanvas.attachEvent("oncontextmenu",function(){window.event.returnValue=!1}),window.addEventListener("mousemove",function(e){5==tool&&(cursor_text.style.left=e.clientX+16+"px",cursor_text.style.top=e.clientY+16+"px")}),window.addEventListener("mousedown",function(){0!=tool&&3!=tool&&5!=tool||(mouseclick=!0),contextmenushow&&(contextmenushow=!1,context_menu.style.visibility="hidden",mouseclick=!1)}),window.addEventListener("mouseup",function(){mouseclick=!1,cursor_text.style.display="none"}),window.addEventListener("keypress",function(e){var t=String.fromCharCode(e.charCode);brush=t,active_brush.innerHTML=brush}),asciicanvas.addEventListener("mouseup",function(){2!=tool&&5!=tool&&state_save()});var startmove_x=null,startmove_y=null,scroll_x=null,scroll_y=null;viewport.addEventListener("mousedown",function(e){2==tool?(startmove_x=e.clientX,startmove_y=e.clientY,scroll_x=viewport.scrollTop,scroll_y=viewport.scrollLeft,viewport.onmousemove=function(e){viewport.scrollTop=scroll_x-(e.clientY-startmove_y),viewport.scrollLeft=scroll_y-(e.clientX-startmove_x)},viewport.onmouseup=function(e){startmove_x=null,startmove_y=null,viewport.onmousemove=null,viewport.onmouseup=null},viewport.onmouseleave=function(){viewport.onmousemove=null,viewport.onmouseup=null,document.onmousemove=null,document.onmouseup=null}):5==tool&&(cursor_text.style.display="block")});let color_ui=[["#cec8e3","#efefff","rgba(110,95,165,0.25)","rgba(110,95,165,0.5)","#fff","none","#000","rgba(255,255,255,0.8)","rgba(240,240,240,0.8)","#efefff"],["#7f7f7f","#131a1e","rgba(0,0,0,0.5)","rgba(0,0,0,0.5)","#26343d","invert(90%)","#ddd","rgba(0,0,0,0.75)","rgba(25,25,25,0.7)","#b5a49b"]];function set_ui(e){root_style.style.setProperty("--cb",color_ui[e][0]),root_style.style.setProperty("--cw",color_ui[e][1]),root_style.style.setProperty("--cs",color_ui[e][2]),root_style.style.setProperty("--cm",color_ui[e][3]),root_style.style.setProperty("--wn",color_ui[e][4]),root_style.style.setProperty("--ft",color_ui[e][5]),root_style.style.setProperty("--tx",color_ui[e][6]),root_style.style.setProperty("--ac",color_ui[e][7]),root_style.style.setProperty("--at",color_ui[e][8]),root_style.style.setProperty("--bh",color_ui[e][9])}function canvas_scale(e){scale=2==e?Math.min(2,scale+.05):1==e?Math.max(.25,scale-.05):1,console.log(e,scale),asciiscreen.style.transform="scale("+scale+")",scale_range.value=scale}function update_canvas_scale(e){console.log(Number(e)),scale=Number(e),asciiscreen.style.transform="scale("+scale+")"}function new_canvas(e,t){for(db=[],y=0;y<t;y++)for(db.push([]),x=0;x<e;x++)db[y]+=" ";buildWorld(),asciiview.scrollIntoView({block:"center",inline:"center"}),back_up=[],state_save()}function modal_window(e,t){e?e&&(modal_tool(!1),window_zone.style.display="grid",window_zone.innerHTML=document.getElementById(t).innerHTML):(window_zone.style.display="none",window_zone.innerHTML="")}function modal_tool(e,t){e?e&&(tool_zone.style.display="grid",tool_zone.innerHTML=document.getElementById(t).innerHTML):tool_zone.style.display="none"}function toast(e){var t=document.getElementById("toast");t.classList.remove("toast_anim"),t.innerHTML=e,t.offsetParent,t.classList.add("toast_anim")}function select_tool(e){var t,n=document.getElementsByClassName("tools");for(tool=0==e?2:1==e?0:2==e?3:3==e?1:e,t=0;t<n.length;t++)n[t].style.backgroundColor=t!=e?"":"var(--cb)";modal_tool(!1)}function add_cells(e,t){var n,a,l,s=0,o=0;if(db=[],tr=canvas.getElementsByTagName("tr"),4==e||2==e){for(o=t,l=0;l<o;l++)db.push([]);4==e&&(o=0)}else 3!=e&&1!=e||(s=t);for(a=0;a<tr.length;a++){if(td=tr[a].getElementsByTagName("td"),db.push([]),1==e)for(l=0;l<s;l++)db[a+o]+=" ";for(n=0;n<td.length;n++)db[a+o]+=td[n].textContent;if(3==e)for(l=0;l<s;l++)db[a+o]+=" "}buildWorld(),state_save()}function crop_cells(){get_selected(),del_cells(3,td.length-x2-1),del_cells(4,tr.length-y2-1),del_cells(1,x1),del_cells(2,y1),selected=[0,0,0,0],select_arr()}function del_cells(e,t){var n,a,l=0,s=0,o=0,r=0;for(db=[],tr=canvas.getElementsByTagName("tr"),1==e?l=t:2==e?o=t:3==e?s=t:4==e&&(r=t),a=0;a<tr.length-r-o;a++)for(db.push([]),td=tr[o+a].getElementsByTagName("td"),n=l;n<td.length-s;n++)db[a]+=td[n].textContent;buildWorld(),state_save()}function text_apply(){if(selected[1]!=selected[3]||selected[0]!=selected[2])for(var e=window_zone.getElementsByClassName("edittext")[0].value.split("\n"),t=selected[2]-selected[0]+1,n=selected[1];n<selected[3]+1;n++)e[n-selected[1]]&&(db[n]=db[n].substr(0,selected[0])+e[n-selected[1]].substr(0,t).padEnd(t," ")+db[n].substr(selected[2]+1,db[n].length));else db=window_zone.getElementsByClassName("edittext")[0].value.split("\n");buildWorld(),modal_window(!1),state_save()}function buildWorld(){var e,t,n=0;for(canvas.innerHTML="",get_selected(),t=0;t<db.length;t++)n<db[t].length&&(n=db[t].length);for(t=0;t<db.length;t++){for(tr=document.createElement("tr"),e=0;e<n;e++)(td=document.createElement("td")).setAttribute("onmouseenter","if(event.which!=3&&!contextmenushow){targetcell=["+e+","+t+"];cur_x.innerHTML="+(e+1)+";cur_y.innerHTML="+(t+1)+";if(mouseclick){if(tool==5){selected[2]="+e+";selected[3]="+t+";select_arr();}else if(tool==0){this.innerHTML=brush;}else if(tool==3){this.innerHTML=' ';}}}"),td.setAttribute("onmousedown","if(event.which!=3&&!contextmenushow){if(tool==5){selected=["+e+","+t+","+e+","+t+"];select_arr();}else if(tool==0){this.innerHTML=brush;}else if(tool==3){this.innerHTML=' ';}else if(tool==1){start_fill("+e+","+t+",this.textContent);}else if(tool==4){brush=this.textContent;active_brush.innerHTML=brush;}}"),td.setAttribute("oncontextmenu","targetcell=["+e+","+t+"]"),se&&x1<=e&&e<=x2&&y1<=t&&t<=y2&&(td.style.backgroundColor="var(--cw)"),db[t][e]&&" "!=db[t][e]?td.innerHTML=db[t][e]:td.innerHTML=" ",tr.appendChild(td);canvas.appendChild(tr)}var a=frame.getBoundingClientRect();asciiview.style.height=a.height+512+"px",asciiview.style.width=a.width+512+"px"}function select_arr(){selected[1]==selected[3]&&selected[0]==selected[2]||(arr_size.innerHTML=Math.abs(selected[2]-selected[0])+1+" X "+(Math.abs(selected[3]-selected[1])+1)),tr=canvas.getElementsByTagName("tr");for(var e=0;e<tr.length;e++){td=tr[e].getElementsByTagName("td");for(var t=0;t<td.length;t++)selected[1]==selected[3]&&selected[0]==selected[2]||!(e>selected[1]-1&&e<selected[3]+1||e>selected[3]-1&&e<selected[1]+1)?td[t].style.backgroundColor="":t>selected[0]-1&&t<selected[2]+1||t>selected[2]-1&&t<selected[0]+1?td[t].style.backgroundColor="var(--cw)":td[t].style.backgroundColor=""}cursor_text.innerHTML=Math.abs(selected[2]-selected[0])+1+" X "+(Math.abs(selected[3]-selected[1])+1)}function loadFiles(e){if(e.target.files[0].type.includes("image"))img=e.target.files[0],show_img();else if(e.target.files[0].name.includes(".ttf")||e.target.files[0].name.includes(".woff2")||e.target.files[0].name.includes(".woff")){var t=e.target.files[0].name.split(".",1);root_style.style.setProperty("--font",t),new FontFace(t,"url("+URL.createObjectURL(e.target.files[0])+")").load().then(function(e){document.fonts.add(e)}).catch(function(e){}),add_font(t)}else{var n=new XMLHttpRequest;n.onreadystatechange=function(){4!=this.readyState||200!==this.status&&0!=this.status||(db=this.responseText.split("\n"),buildWorld(),asciiview.scrollIntoView({block:"center",inline:"center"}),back_up=[],state_save(),selected=[0,0,0,0],select_arr(),toast(e.target.files[0].name+" file is open"))},n.open("GET",URL.createObjectURL(e.target.files[0]),!0),n.send(),n.onerror=function(){this.status}}}function add_font(e){var t=document.createElement("option");t.value=e,t.innerHTML=e,fonts.appendChild(t),fonts.selectedIndex=fonts.options.length-1}function getallChar(){var e,t,n,a=window_zone.getElementsByClassName("all_simbols")[0],l=window_zone.getElementsByClassName("palette_simbols")[0],s=edit_p?art_palette.value:palette;l.value=s,window_zone.getElementsByClassName("range")[0].value=range_font[0],window_zone.getElementsByClassName("range")[1].value=range_font[1],fonts_palette[0].innerHTML=fonts.innerHTML,fonts_palette[0].selectedIndex=fonts.selectedIndex,a.innerHTML="";for(var o=range_font[0];o<range_font[1];o++){for(e=String.fromCharCode(o),n=!1,t=0;t<s.length;t++)if(s[t]==e){n=!0;break}var r=document.createElement("label");r.innerHTML="<input type='checkbox' onchange='addChar(this.checked,\""+e+"\");' "+(n?"checked":"")+"><span class='char symbol'>"+e+"</span>",r.classList.add("symbol_select"),a.appendChild(r)}a.style.display="block"}function show_img(){const e=document.getElementById("img_preview");frame.style.backgroundImage="url('"+URL.createObjectURL(img)+"')",frame.style.backgroundSize="100% 100%",frame.style.backgroundPosition="center",frame.style.backgroundRepeat="no-repeat",e.style.display="block",e.getElementsByTagName("img")[0].src=URL.createObjectURL(img),img_show.checked=!0,img_icon.style.filter="contrast(100%) brightness(100%)",localStorage.getItem("art_palette")?art_palette.value=localStorage.getItem("art_palette"):art_palette.value="$#X?=>^*~-,. ",brightness.value=100,contrast.value=100}function delete_img(){img_preview.style.display="none",frame.style.backgroundImage="none"}function addChar(e,t){var n=window_zone.getElementsByClassName("palette_simbols")[0];if(e){var a=n.selectionStart;n.value=n.value.substring(0,a)+t+n.value.substring(a),n.selectionStart=a+1}else n.value=n.value.replace(new RegExp(t,"g"),"")}function applyChar(){if(edit_p){var e=window_zone.getElementsByClassName("palette_simbols")[0].value;art_palette.value=e,localStorage.setItem("art_palette",e)}else range_font=[window_zone.getElementsByClassName("range")[0].value,window_zone.getElementsByClassName("range")[1].value],palette=window_zone.getElementsByClassName("palette_simbols")[0].value,localStorage.setItem("palette",palette),createPalette(),localStorage.setItem("range_font",JSON.stringify(range_font)),fonts.selectedIndex=fonts_palette.selectedIndex}function createPalette(){var e,t;symbols_view.innerHTML="";for(var n=0;n<palette.length;n++)e=document.createElement("div"),t=palette[n],e.innerHTML=t,e.classList.add("symbol"),e.setAttribute("onclick","brush='"+(t.match(/\\/)?"\\\\":t)+"';active_brush.innerHTML=brush;select_symbol("+n+")"),brush==t&&(e.style.backgroundColor="var(--cb)"),symbols_view.appendChild(e)}function select_symbol(e){for(var t=document.getElementsByClassName("symbol"),n=0;n<t.length;n++)t[n].style.backgroundColor=n!=e?"":"var(--cb)"}function get_selected(){return(se=selected[1]!=selected[3]||selected[0]!=selected[2])&&(selected[0]>selected[2]?(x1=selected[2],x2=selected[0]):(x1=selected[0],x2=selected[2]),selected[1]>selected[3]?(y1=selected[3],y2=selected[1]):(y1=selected[1],y2=selected[3])),se}function save_art(e){var t="";for(tr=canvas.getElementsByTagName("tr"),get_selected()?y2++:(x1=0,x2=tr[0].getElementsByTagName("td").length-1,y1=0,y2=tr.length),y=y1;y<y2;y++){for(td=tr[y].getElementsByTagName("td"),x=x1;x<x2+1;x++)td[x]&&(t+=td[x].textContent);y<y2-1&&(t.trim(),t+="\n")}if(e){var n=document.getElementById("get_file");n.setAttribute("href","data:text/json;charset=utf-8,"+encodeURIComponent(t)),n.setAttribute("download","text_art.txt"),n.click()}else"grid"==window_zone.style.display?(state_save(),window_zone.getElementsByClassName("edittext")[0].value=t):(copydb=t.split("\n"),copytext.value=t,copytext.select(),copytext.setSelectionRange(0,99999),document.execCommand("copy"))}function paste_data(e,t,n){var a,l,s=copydb[0].length,o=copydb.length;for(tr=canvas.getElementsByTagName("tr"),get_selected(),se&&x1<=e&&e<=x2&&y1<=t&&t<=y2&&(s>x2-x1&&(s=x2-x1+1),o>y2-y1&&(o=y2-y1+1),e=x1,t=y1),l=0;l<o;l++)for(td=tr[l+t].getElementsByTagName("td"),a=0;a<s;a++)td.length>a+e&&(n&&" "!=copydb[l][a]?td[a+e].innerHTML=copydb[l][a]:n||(td[a+e].innerHTML=copydb[l][a]));state_save()}function delete_data(){if(get_selected(),se&&x1<=targetcell[0]&&targetcell[0]<=x2&&y1<=targetcell[1]&&targetcell[1]<=y2){for(tr=canvas.getElementsByTagName("tr"),y=y1;y<y2+1;y++)for(td=tr[y].getElementsByTagName("td"),x=x1;x<x2+1;x++)td.length>x&&(td[x].innerHTML=" ");state_save()}}function start_fill(e,t,n){tr=canvas.getElementsByTagName("tr"),get_selected(),se&&x1<=e&&e<=x2&&y1<=t&&t<=y2?fill(e,t,n):(x1=0,x2=tr[0].getElementsByTagName("td").length-1,y1=0,y2=tr.length-1,fill(e,t,n))}function fill(e,t,n){var a=canvas.getElementsByTagName("tr")[t].getElementsByTagName("td")[e],l=!!(canvas.getElementsByTagName("tr")[t]&&e-1>=x1)&&canvas.getElementsByTagName("tr")[t].getElementsByTagName("td")[e-1],s=!!(canvas.getElementsByTagName("tr")[t]&&e+1<=x2)&&canvas.getElementsByTagName("tr")[t].getElementsByTagName("td")[e+1],o=!!(canvas.getElementsByTagName("tr")[t-1]&&t-1>=y1)&&canvas.getElementsByTagName("tr")[t-1].getElementsByTagName("td")[e],r=!!(canvas.getElementsByTagName("tr")[t+1]&&t+1<=y2)&&canvas.getElementsByTagName("tr")[t+1].getElementsByTagName("td")[e];a.textContent==n&&(a.innerHTML=brush),o&&o.textContent==n&&(o.innerHTML=brush,t-1>=y1&&fill(e,t-1,n)),r&&r.textContent==n&&(r.innerHTML=brush,t+1<=y2&&fill(e,t+1,n)),s&&s.textContent==n&&(s.innerHTML=brush,e+1<=x2&&fill(e+1,t,n)),l&&l.textContent==n&&(l.innerHTML=brush,e-1>=x1&&fill(e-1,t,n))}function replaces(e,t){for(tr=canvas.getElementsByTagName("tr"),y=0;y<tr.length;y++)for(td=tr[y].getElementsByTagName("td"),x=0;x<td.length;x++)td[x].textContent==e&&(td[x].innerHTML=t)}function resize_canvas(){var e,t,n=document.forms.align;n[0].checked?(t=2,e=1):n[1].checked?(t=2,e=3):n[2].checked?(t=4,e=1):(t=4,e=3);var a=Math.floor(canvasWidth.value),l=Math.floor(canvasHeight.value);tr.length<l?add_cells(t,l-tr.length):del_cells(t,tr.length-l),td.length<a?add_cells(e,a-td.length):del_cells(e,td.length-a)}function original_size(){const e=new FileReader;e.onload=function(e){const t=new Image;t.onload=function(){var e=Math.floor(t.height/14),n=Math.floor(t.width/8);tr.length<e?add_cells(4,e-tr.length):del_cells(4,tr.length-e),td.length<n?add_cells(3,n-td.length):del_cells(3,td.length-n)},t.src=e.target.result},e.readAsDataURL(img)}function img_to_ascii(e){const t=document.getElementById("preview"),n=t.getContext("2d"),a=new FileReader;a.onload=function(a){const l=new Image;l.onload=function(){var a=canvas.getElementsByTagName("tr");let s=a[0].getElementsByTagName("td").length,o=a.length;img_icon.style.filter="contrast("+contrast.value+"%) brightness("+brightness.value+"%)",1==e&&(s*=2,o*=4),t.width=s,t.height=o,n.filter=img_icon.style.filter,n.beginPath(),n.rect(0,0,s,o),n.fillStyle="#fff",n.fill(),n.drawImage(l,0,0,s,o);const r=convertToGrayScales(n,s,o);1==e?drawBraille(s,o):drawAscii(r,s)},l.src=a.target.result},a.readAsDataURL(img)}localStorage.getItem("them")&&set_ui(1),file.addEventListener("change",loadFiles),document.onkeyup=function(){var e=e||window.event;return e.altKey&&104==e.which||e.altKey&&72==e.which||e.altKey&&49==e.which?(e.preventDefault(),select_tool(0),!1):e.altKey&&98==e.which||e.altKey&&66==e.which||e.altKey&&50==e.which?(e.preventDefault(),select_tool(1),!1):e.altKey&&101==e.which||e.altKey&&69==e.which||e.altKey&&51==e.which?(e.stopPropagation(),e.returnValue=!1,e.cancelBubble=!0,e.preventDefault(),select_tool(2),!1):e.altKey&&102==e.which||e.altKey&&70==e.which||e.altKey&&52==e.which?(e.preventDefault(),select_tool(3),!1):e.altKey&&112==e.which||e.altKey&&80==e.which||e.altKey&&53==e.which?(e.preventDefault(),select_tool(4),!1):e.altKey&&115==e.which||e.altKey&&83==e.which||e.altKey&&54==e.which?(e.preventDefault(),select_tool(5),!1):void 0},window.addEventListener("DOMContentLoaded",function(){window.File&&window.FileReader&&window.FileList&&window.Blob&&(window.addEventListener("dragover",function(e){e.preventDefault(),e.stopPropagation()}),window.addEventListener("drop",function(e){if(e.preventDefault(),e.stopPropagation(),e.dataTransfer.files[0].type.includes("image"))img=e.dataTransfer.files[0],show_img();else if(e.dataTransfer.files[0].name.includes(".ttf")||e.dataTransfer.files[0].name.includes(".woff2")||e.dataTransfer.files[0].name.includes(".woff")){var t=e.dataTransfer.files[0].name.split(".",1);root_style.style.setProperty("--font",t),new FontFace(t,"url("+URL.createObjectURL(e.dataTransfer.files[0])+")").load().then(function(e){document.fonts.add(e)}).catch(function(e){}),add_font(t)}else{var n=new XMLHttpRequest;n.onreadystatechange=function(){4!=this.readyState||200!==this.status&&0!=this.status||(db=this.responseText.split("\n"),buildWorld(),asciiview.scrollIntoView({block:"center",inline:"center"}),back_up=[],state_save(),toast(e.dataTransfer.files[0].name+" file is open"))},n.open("GET",URL.createObjectURL(e.dataTransfer.files[0]),!0),n.send(),n.onerror=function(){this.status}}})),fonts.selectedIndex=0});const toGrayScale=(e,t,n)=>.21*e+.72*t+.07*n,convertToGrayScales=(e,t,n)=>{const a=e.getImageData(0,0,t,n),l=[];for(let e=0;e<a.data.length;e+=4){const t=a.data[e],n=a.data[e+1],s=a.data[e+2],o=toGrayScale(t,n,s);a.data[e]=a.data[e+1]=a.data[e+2]=o,l.push(o)}return e.putImageData(a,0,0),l},getCharacterForGrayScale=e=>art_palette.value[Math.round((art_palette.value.length-1)*e/255)],drawAscii=function(e,t){const n=e.reduce((e,n,a)=>{let l=getCharacterForGrayScale(n);return(a+1)%t==0&&(l+="\n"),e+l},"");(db=n.split("\n")).splice(-1,1),buildWorld(),state_save()};function drawBraille(e,t){const n=document.getElementById("preview").getContext("2d");let a="";for(let s=0;s<t/4;s++){for(let t=0;t<e/2;t++){let e="";function l(){var e=0;return e+=n.getImageData(2*t,4*s+1,1,1).data[0],e+=n.getImageData(2*t,4*s+2,1,1).data[0],e+=n.getImageData(2*t+1,4*s+1,1,1).data[0],e+=n.getImageData(2*t+1,4*s+2,1,1).data[0],e/=4,"⣿⣟⣫⡮⢕⠕⠌⠂"[Math.round(7*e/255)]}e+=n.getImageData(2*t,4*s,1,1).data[0]>128?0:1,e+=n.getImageData(2*t,4*s+1,1,1).data[0]>128?0:1,e+=n.getImageData(2*t,4*s+2,1,1).data[0]>128?0:1,e+=n.getImageData(2*t,4*s+3,1,1).data[0]>128?0:1,e+=n.getImageData(2*t+1,4*s,1,1).data[0]>128?0:1,e+=n.getImageData(2*t+1,4*s+1,1,1).data[0]>128?0:1,e+=n.getImageData(2*t+1,4*s+2,1,1).data[0]>128?0:1,a+="11111111"==(e+=n.getImageData(2*t+1,4*s+3,1,1).data[0]>128?0:1)?l():"00000000"==e?l():"01000000"==e?"⠂":"10000000"==e?"⠁":"11000000"==e?"⠃":"00100000"==e?"⠄":"10100000"==e?"⠅":"01100000"==e?"⠆":"11100000"==e?"⠇":"00001000"==e?"⠈":"10001000"==e?"⠉":"01001000"==e?"⠊":"11001000"==e?"⠋":"00101000"==e?"⠌":"10101000"==e?"⠍":"01101000"==e?"⠎":"11101000"==e?"⠏":"00000100"==e?"⠐":"10000100"==e?"⠑":"01000100"==e?"⠒":"11000100"==e?"⠓":"11100110"==e?"⠷":"01100110"==e?"⠶":"01011100"==e?"⡚":"11011100"==e?"⡛":"11111110"==e?"⡿":"01111110"==e?"⡾":"01000011"==e?"⢢":"11000011"==e?"⢣":"11110001"==e?"⣇":"01110001"==e?"⣆":"01011011"==e?"⣪":"11011011"==e?"⣫":"10011011"==e?"⣩":"00011011"==e?"⣨":"01110011"==e?"⣦":"11110011"==e?"⣧":"10110011"==e?"⣥":"00110011"==e?"⣤":"11010011"==e?"⣣":"01010011"==e?"⣢":"10010011"==e?"⣡":"00010011"==e?"⣠":"11111101"==e?"⣟":"01111101"==e?"⣞":"10111101"==e?"⣝":"00111101"==e?"⣜":"11011101"==e?"⣛":"01111111"==e?"⣾":"01011101"==e?"⣚":"10011101"==e?"⣙":"10111111"==e?"⣽":"00111111"==e?"⣼":"00011101"==e?"⣘":"11110101"==e?"⣗":"11011111"==e?"⣻":"01011111"==e?"⣺":"01110101"==e?"⣖":"10110101"==e?"⣕":"10011111"==e?"⣹":"00011111"==e?"⣸":"00110101"==e?"⣔":"11010101"==e?"⣓":"11110111"==e?"⣷":"01110111"==e?"⣶":"01010101"==e?"⣒":"10010101"==e?"⣑":"10110111"==e?"⣵":"00110111"==e?"⣴":"00010101"==e?"⣐":"11111001"==e?"⣏":"11010111"==e?"⣳":"01010111"==e?"⣲":"01111001"==e?"⣎":"10111001"==e?"⣍":"10010111"==e?"⣱":"00010111"==e?"⣰":"00111001"==e?"⣌":"11011001"==e?"⣋":"11111011"==e?"⣯":"01111011"==e?"⣮":"01011001"==e?"⣊":"10011001"==e?"⣉":"10111011"==e?"⣭":"00111011"==e?"⣬":"00011001"==e?"⣈":"00100011"==e?"⢤":"00000001"==e?"⢀":"00001110"==e?"⠸":"00111100"==e?"⡜":"00100100"==e?"⠔":"10100100"==e?"⠕":"01100100"==e?"⠖":"11100100"==e?"⠗":"00001100"==e?"⠘":"10001100"==e?"⠙":"01001100"==e?"⠚":"11001100"==e?"⠛":"00101100"==e?"⠜":"10101100"==e?"⠝":"01101100"==e?"⠞":"11101100"==e?"⠟":"00000010"==e?"⠠":"10000010"==e?"⠡":"01000010"==e?"⠢":"11000010"==e?"⠣":"00100010"==e?"⠤":"10100010"==e?"⠥":"01100010"==e?"⠦":"11100010"==e?"⠧":"00001010"==e?"⠨":"10001010"==e?"⠩":"01001010"==e?"⠪":"11001010"==e?"⠫":"00101010"==e?"⠬":"10101010"==e?"⠭":"01101010"==e?"⠮":"11101010"==e?"⠯":"00000110"==e?"⠰":"10000110"==e?"⠱":"01000110"==e?"⠲":"11000110"==e?"⠳":"00100110"==e?"⠴":"10100110"==e?"⠵":"10011100"==e?"⡙":"10111110"==e?"⡽":"10000011"==e?"⢡":"10110001"==e?"⣅":"00110001"==e?"⣄":"01010001"==e?"⣂":"11010001"==e?"⣃":"10010001"==e?"⣁":"00010001"==e?"⣀":"11101111"==e?"⢿":"10101111"==e?"⢽":"01101111"==e?"⢾":"00101111"==e?"⢼":"01001111"==e?"⢺":"11001111"==e?"⢻":"10001111"==e?"⢹":"00001111"==e?"⢸":"11100111"==e?"⢷":"01100111"==e?"⢶":"10100111"==e?"⢵":"00100111"==e?"⢴":"11000111"==e?"⢳":"01000111"==e?"⢲":"10000111"==e?"⢱":"00000111"==e?"⢰":"11101011"==e?"⢯":"01101011"==e?"⢮":"10101011"==e?"⢭":"00101011"==e?"⢬":"11001011"==e?"⢫":"01001011"==e?"⢪":"10001011"==e?"⢩":"00001011"==e?"⢨":"11100011"==e?"⢧":"01100011"==e?"⢦":"10100011"==e?"⢥":"10000001"==e?"⢁":"10111100"==e?"⡝":"10001110"==e?"⠹":"01001110"==e?"⠺":"11001110"==e?"⠻":"00101110"==e?"⠼":"10101110"==e?"⠽":"01101110"==e?"⠾":"11101110"==e?"⠿":"00010000"==e?"⡀":"10010000"==e?"⡁":"01010000"==e?"⡂":"11010000"==e?"⡃":"00110000"==e?"⡄":"10110000"==e?"⡅":"01110000"==e?"⡆":"11110000"==e?"⡇":"00011000"==e?"⡈":"10011000"==e?"⡉":"01011000"==e?"⡊":"11011000"==e?"⡋":"00111000"==e?"⡌":"10111000"==e?"⡍":"01111000"==e?"⡎":"11111000"==e?"⡏":"00010100"==e?"⡐":"10010100"==e?"⡑":"01010100"==e?"⡒":"11010100"==e?"⡓":"00110100"==e?"⡔":"10110100"==e?"⡕":"01110100"==e?"⡖":"11110100"==e?"⡗":"00011100"==e?"⡘":"00111110"==e?"⡼":"00000011"==e?"⢠":"11101101"==e?"⢟":"11011110"==e?"⡻":"01011110"==e?"⡺":"01101101"==e?"⢞":"10101101"==e?"⢝":"10011110"==e?"⡹":"00011110"==e?"⡸":"00101101"==e?"⢜":"11001101"==e?"⢛":"11110110"==e?"⡷":"01110110"==e?"⡶":"01001101"==e?"⢚":"10001101"==e?"⢙":"10110110"==e?"⡵":"00110110"==e?"⡴":"00001101"==e?"⢘":"11100101"==e?"⢗":"11010110"==e?"⡳":"01010110"==e?"⡲":"01100101"==e?"⢖":"10100101"==e?"⢕":"10010110"==e?"⡱":"00010110"==e?"⡰":"00100101"==e?"⢔":"11000101"==e?"⢓":"11111010"==e?"⡯":"01111010"==e?"⡮":"01000101"==e?"⢒":"10000101"==e?"⢑":"10111010"==e?"⡭":"00111010"==e?"⡬":"00000101"==e?"⢐":"11101001"==e?"⢏":"11011010"==e?"⡫":"01011010"==e?"⡪":"01101001"==e?"⢎":"10101001"==e?"⢍":"10011010"==e?"⡩":"00011010"==e?"⡨":"00101001"==e?"⢌":"11001001"==e?"⢋":"11110010"==e?"⡧":"01110010"==e?"⡦":"01001001"==e?"⢊":"10001001"==e?"⢉":"10110010"==e?"⡥":"00110010"==e?"⡤":"00001001"==e?"⢈":"11100001"==e?"⢇":"11010010"==e?"⡣":"01010010"==e?"⡢":"01100001"==e?"⢆":"10100001"==e?"⢅":"10010010"==e?"⡡":"00010010"==e?"⡠":"00100001"==e?"⢄":"11000001"==e?"⢃":"11111100"==e?"⡟":"01111100"==e?"⡞":"01000001"==e?"⢂":" "}a+="\n"}(db=a.split("\n")).splice(-1,1),buildWorld(),state_save()}function state_save(){frame=document.getElementById("asciicanvas"),state_num>0&&(back_up.splice(0,state_num),state_num=0);var e="";for(tr=canvas.getElementsByTagName("tr"),y=0;y<tr.length;y++){for(td=tr[y].getElementsByTagName("td"),x=0;x<td.length;x++)e+=td[x].textContent;y<tr.length-1&&(e+="\n")}canvasWidth.value=td.length,canvasHeight.value=tr.length,imgWidth.value=8*td.length,imgHeight.value=14*tr.length,cells.innerHTML=td.length*tr.length,arr_size.innerHTML=td.length+" X "+tr.length,back_up.unshift(e),back_up.length>100&&back_up.pop()}function save_png(){tr=canvas.getElementsByTagName("tr"),td=tr[0].getElementsByTagName("td");var e=imgWidth.value,t=imgHeight.value,n=e/td.length,a=t/tr.length;const l=document.getElementById("preview"),s=l.getContext("2d");for(l.width=e,l.height=t,s.font=a+"px var(--font),monospace",get_selected()?y2++:(x1=0,x2=tr[0].getElementsByTagName("td").length-1,y1=0,y2=tr.length),y=y1;y<y2;y++)for(td=tr[y].getElementsByTagName("td"),x=x1;x<x2+1;x++)td[x]&&s.fillText(td[x].textContent,n*x,a*(y+1));var o=document.getElementById("get_file");o.setAttribute("href",l.toDataURL("image/png")),o.setAttribute("download","text_art.png"),o.click()}function correct_value(name){return name.includes("+")||name.includes("-")||name.includes("*")||name.includes("/")?parseInt(eval(name)):parseInt(name)}function state_back(e){(state_num+=e)<0?state_num=0:state_num>=back_up.length-1&&(state_num=back_up.length-1),db=back_up[state_num].split("\n"),buildWorld()}document.addEventListener("DOMContentLoaded",function(){createPalette(),active_brush.innerHTML=brush,localStorage.getItem("range_font")&&(range_font=JSON.parse(localStorage.getItem("range_font"))),localStorage.getItem("palette")&&(palette=localStorage.getItem("palette"),createPalette())});
</script>
</body>
</html>