first commit
This commit is contained in:
commit
e0d2e52c93
14 changed files with 1342 additions and 0 deletions
55
icons/back.svg
Normal file
55
icons/back.svg
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32.000001"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="back.svg"
|
||||
xml:space="preserve"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
|
||||
id="defs2" /><sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#808080"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="7.919596"
|
||||
inkscape:cx="10.669736"
|
||||
inkscape:cy="13.131983"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1053"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#808080"
|
||||
showguides="true" /><metadata
|
||||
id="metadata5"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1090.5197)"><path
|
||||
style="fill:none;stroke:#ffffff;stroke-width:3.199;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 15.92301,1097.1929 -9.2381147,9.2381 9.4155007,9.4155"
|
||||
id="path11921" /><path
|
||||
style="fill:none;stroke:#ffffff;stroke-width:3.199;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 25.315019,1106.6491 H 7.0812466"
|
||||
id="path11925" /></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
72
icons/copy.svg
Normal file
72
icons/copy.svg
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32.000001"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
sodipodi:docname="copy.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#808080"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="11.2"
|
||||
inkscape:cx="18.306958"
|
||||
inkscape:cy="14.832193"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1027"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="22"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1090.5197)">
|
||||
<rect
|
||||
style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.706;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
|
||||
id="rect1373"
|
||||
width="15.616629"
|
||||
height="15.616629"
|
||||
x="3.8530145"
|
||||
y="1094.2299" />
|
||||
<rect
|
||||
y="1103.1393"
|
||||
x="12.762503"
|
||||
height="15.616629"
|
||||
width="15.616629"
|
||||
id="rect1375"
|
||||
style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.706;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
117
icons/salish-keyboard-icon.svg
Normal file
117
icons/salish-keyboard-icon.svg
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="192"
|
||||
height="192"
|
||||
viewBox="0 0 192 192.00001"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
sodipodi:docname="salish-keyboard-icon.svg"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
inkscape:export-filename="C:\dofdev\Salish Keyboard\salish-keyboard-icon.png"
|
||||
inkscape:export-xdpi="256"
|
||||
inkscape:export-ydpi="256">
|
||||
<defs
|
||||
id="defs2">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient1965">
|
||||
<stop
|
||||
style="stop-color:#1c161b;stop-opacity:0.5"
|
||||
offset="0"
|
||||
id="stop1961" />
|
||||
<stop
|
||||
style="stop-color:#1c161b;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop1963" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient1965"
|
||||
id="linearGradient1971"
|
||||
x1="92.405533"
|
||||
y1="1010.9304"
|
||||
x2="147.82085"
|
||||
y2="1062.9532"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.56078431"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.979899"
|
||||
inkscape:cx="66.492719"
|
||||
inkscape:cy="101.6195"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:snap-global="false"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1027"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="22"
|
||||
inkscape:window-maximized="1"
|
||||
units="px"
|
||||
inkscape:showpageshadow="false"
|
||||
inkscape:pagecheckerboard="false"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:snap-page="true"
|
||||
borderlayer="true">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid832" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-930.51965)">
|
||||
<path
|
||||
style="fill:#1c161b;fill-opacity:1;stroke:none;stroke-width:3.14762044;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 31.950295,959.96696 c 43.876553,8.69094 87.154865,9.20369 127.509105,-0.32554 7.89365,-1.77643 8.66265,2.45107 9.76665,8.1389 l 22.34605,103.84488 c 0,0 0.10261,8.0315 -0.26872,13.0593 -10.89084,1.4332 -181.055533,1.5621 -190.78290754,0 -0.24551432,-4.7122 0.0141647,-12.1647 0.0141647,-12.1669 L 23.378019,968.11152 c 1.011881,-10.09604 4.723823,-9.39183 8.572937,-8.13889 z"
|
||||
id="path4518"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccc"
|
||||
inkscape:export-filename="C:\dofdev\Web Development\dofdev\v2\dof-covers\salishkeyboard.png"
|
||||
inkscape:export-xdpi="256"
|
||||
inkscape:export-ydpi="256" />
|
||||
<path
|
||||
style="fill:#f2e2c8;fill-opacity:1;stroke-width:1.14920998"
|
||||
d="m 97.615778,1000.7522 c -2.570331,-0.022 -5.195887,0.1495 -7.893649,0.5072 -9.29379,1.2326 -14.97792,3.6691 -24.031342,10.3096 -5.486743,4.0244 -11.152758,6.6213 -22.386836,10.2575 -17.945921,5.8086 -20.58188,7.9444 -9.276871,7.5126 2.856277,-0.1087 8.77396,0.1305 13.149924,0.5316 7.344547,0.6734 8.801895,1.2072 18.984084,6.95 12.832991,7.2378 20.042316,9.3802 31.135002,9.2523 10.44938,-0.1195 20.60068,-3.5352 29.13701,-9.7963 8.76773,-6.4311 15.83965,-8.4179 29.95773,-8.4224 17.3159,0 15.20394,-2.2798 -7.30346,-7.8568 -12.54179,-3.1076 -14.65166,-3.932 -19.83861,-7.7645 -10.39837,-7.683 -20.49494,-11.386 -31.632982,-11.4808 z"
|
||||
id="path892"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccscscssc" />
|
||||
<path
|
||||
style="fill:#5a2927;stroke-width:1.16148973"
|
||||
d="m 97.291872,1007.5482 c -18.181882,0.026 -35.947996,10.1211 -29.106612,21.1816 1.890807,3.0566 3.608117,4.2497 9.820261,6.8159 4.141025,1.7107 10.708268,3.3939 14.592148,3.7405 11.821361,1.0551 28.091391,-5.1275 31.414891,-11.9358 2.75289,-5.6394 -0.94597,-12.0604 -9.29523,-16.1363 -5.25722,-2.5663 -11.36484,-3.6745 -17.425458,-3.6659 z"
|
||||
id="path894"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccssc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
BIN
icons/tap.png
Normal file
BIN
icons/tap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
BIN
icons/tung.png
Normal file
BIN
icons/tung.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
91
icons/tung.svg
Normal file
91
icons/tung.svg
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32.000001"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="tongue.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#808080"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="11.2"
|
||||
inkscape:cx="10.044643"
|
||||
inkscape:cy="14.553571"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1053"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#808080"
|
||||
showguides="true" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1090.5197)">
|
||||
<circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:1.44342;stroke-dasharray:none"
|
||||
id="path217"
|
||||
cx="3.315028"
|
||||
cy="1102.2913"
|
||||
r="2.2093179" />
|
||||
<circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:1.44342;stroke-dasharray:none"
|
||||
id="circle950"
|
||||
cx="28.684973"
|
||||
cy="1102.2913"
|
||||
r="2.2093179" />
|
||||
<circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:1.44342;stroke-dasharray:none"
|
||||
id="circle952"
|
||||
cx="15.999997"
|
||||
cy="1102.2913"
|
||||
r="2.2093179" />
|
||||
<circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:1.44342;stroke-dasharray:none"
|
||||
id="circle954"
|
||||
cx="9.6575136"
|
||||
cy="1111.1942"
|
||||
r="2.2093179" />
|
||||
<circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:1.44342;stroke-dasharray:none"
|
||||
id="circle956"
|
||||
cx="22.342487"
|
||||
cy="1111.1942"
|
||||
r="2.2093179" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
57
icons/tungs.svg
Normal file
57
icons/tungs.svg
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32.000001"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="tongues.svg"
|
||||
xml:space="preserve"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
|
||||
id="defs2" /><sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#808080"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="11.2"
|
||||
inkscape:cx="24.419643"
|
||||
inkscape:cy="14.553571"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1053"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#808080" /><metadata
|
||||
id="metadata5"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1090.5197)"><path
|
||||
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.55999;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 4.1490411,1098.2809 H 27.850958"
|
||||
id="path1874" /><path
|
||||
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.55999;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 4.1490411,1106.5197 H 27.850958"
|
||||
id="path1876" /><path
|
||||
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.55999;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 4.1490411,1114.7585 H 27.850958"
|
||||
id="path1878" /></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
164
index.html
Normal file
164
index.html
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="notranslate" translate="no">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="interactive-widget=resizes-content, width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<meta name="google" content="notranslate" />
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="icons/tung.svg">
|
||||
<link rel="icon" type="image/svg+xml" sizes="any" href="icons/tung.svg">
|
||||
<link rel="manifest" href="manifest.webmanifest">
|
||||
<meta name="description" content="Augment your keyboard with the symbols you need to type in your language.">
|
||||
<meta name="author" content="Ethan Merchant">
|
||||
<title style="display: none;">tung-tap</title>
|
||||
<link rel="stylesheet" href="style.css?v1">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- <div id="home" style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 20px;
|
||||
padding-top: 20px;
|
||||
background-color: #79394f;
|
||||
">
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
">
|
||||
<img src="icons/tongue.png" style="
|
||||
width: 32px; height: 32px;
|
||||
transform: translateY(-5px) rotate(-5deg);
|
||||
">
|
||||
<img src="icons/tap.png" style="
|
||||
width: 32px; height: 32px;
|
||||
margin-right: -40px;
|
||||
transform: translate(-32px, 7px) rotate(-45deg) scale(0.8);
|
||||
">
|
||||
<h1 style="font-weight: unset; font-size: 24px; line-height: 24px; margin: 0; color: #fff">
|
||||
TongueTap<span style="font-size: 14px; letter-spacing: 1px;">.app</span>
|
||||
</h1>
|
||||
</div>
|
||||
<p style="
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
">
|
||||
Unicode key-swatch webapp for any cultures tongue!
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
<div style="display: block; position: relative; background-color: white;">
|
||||
<div hidden="true" id="tung" onclick="layout()" oninput="layout()" contenteditable="true" spellcheck="false" style="
|
||||
user-select: text;
|
||||
touch-action: none;
|
||||
overflow: none;
|
||||
|
||||
|
||||
white-space: pre;
|
||||
width: auto;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
font-family: 'DM Mono', monospace;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
background-color: #ff79a1;
|
||||
color: #79394f;
|
||||
|
||||
|
||||
|
||||
/* display: none; */
|
||||
"></div>
|
||||
<div onclick="copyToClipboard('#tung')" style="
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
"><img class="icon-btn" src="icons/copy.svg" style="mix-blend-mode: difference;"></div>
|
||||
</div>
|
||||
|
||||
<div style="
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 40px; height: 40px;
|
||||
margin: 0 auto;
|
||||
margin-right: 80px;
|
||||
width: 100%;
|
||||
/* background-color: #eb8bb3; */
|
||||
background-color: #ff79a1c0;
|
||||
color: white;
|
||||
user-select: none;
|
||||
line-height: 40px;
|
||||
">
|
||||
<img onclick="$('#nav').toggle()" class="icon-btn" src="icons/tungs.svg">
|
||||
<img onclick="TopToggle()" class="icon-btn" src="icons/tung.svg">
|
||||
</div>
|
||||
|
||||
|
||||
<div style="flex-grow: 1; overflow: hidden; position: relative; background-color: white;">
|
||||
<div id="text" onclick="$('#text').focus()" contenteditable="true" spellcheck="false" style="
|
||||
user-select: text;
|
||||
touch-action: pan-y;
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
|
||||
white-space: pre-wrap;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
background-color: rgb(var(--field));
|
||||
color: rgb(var(--txt));
|
||||
|
||||
|
||||
|
||||
/* padding-bottom: 600px; */
|
||||
"></div>
|
||||
<div onclick="copyToClipboard('#text')" style="
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
">
|
||||
<img class="icon-btn" src="icons/copy.svg" style="mix-blend-mode: difference;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="nav" hidden="true"></div>
|
||||
|
||||
|
||||
<div id="keyboard" onclick="$('#text').focus()"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
TODO
|
||||
migrate to textareas
|
||||
contenteditable divs are a can of worms
|
||||
esp. when it comes to conistent behaviour across devices
|
||||
|
||||
spellcheck toggle~
|
||||
|
||||
|
||||
-->
|
||||
138
inobounce.js
Normal file
138
inobounce.js
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
/*! iNoBounce - v0.2.0
|
||||
* https://github.com/lazd/iNoBounce/
|
||||
* Copyright (c) 2013 Larry Davis <lazdnet@gmail.com>; Licensed BSD */
|
||||
(function(global) {
|
||||
// Stores the Y position where the touch started
|
||||
var startY = 0;
|
||||
|
||||
// Store enabled status
|
||||
var enabled = false;
|
||||
|
||||
var supportsPassiveOption = false;
|
||||
try {
|
||||
var opts = Object.defineProperty({}, 'passive', {
|
||||
get: function() {
|
||||
supportsPassiveOption = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener('test', null, opts);
|
||||
} catch (e) {}
|
||||
|
||||
var handleTouchmove = function(evt) {
|
||||
// Get the element that was scrolled upon
|
||||
var el = evt.target;
|
||||
|
||||
// Allow zooming
|
||||
var zoom = window.innerWidth / window.document.documentElement.clientWidth;
|
||||
if (evt.touches.length > 1 || zoom !== 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check all parent elements for scrollability
|
||||
while (el !== document.body && el !== document) {
|
||||
// Get some style properties
|
||||
var style = window.getComputedStyle(el);
|
||||
|
||||
if (!style) {
|
||||
// If we've encountered an element we can't compute the style for, get out
|
||||
break;
|
||||
}
|
||||
|
||||
// Ignore range input element
|
||||
if (el.nodeName === 'INPUT' && el.getAttribute('type') === 'range') {
|
||||
return;
|
||||
}
|
||||
|
||||
var scrolling = style.getPropertyValue('-webkit-overflow-scrolling');
|
||||
var overflowY = style.getPropertyValue('overflow-y');
|
||||
var height = parseInt(style.getPropertyValue('height'), 10);
|
||||
|
||||
// Determine if the element should scroll
|
||||
var isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll');
|
||||
var canScroll = el.scrollHeight > el.offsetHeight;
|
||||
|
||||
if (isScrollable && canScroll) {
|
||||
// Get the current Y position of the touch
|
||||
var curY = evt.touches ? evt.touches[0].screenY : evt.screenY;
|
||||
|
||||
// Determine if the user is trying to scroll past the top or bottom
|
||||
// In this case, the window will bounce, so we have to prevent scrolling completely
|
||||
var isAtTop = (startY <= curY && el.scrollTop === 0);
|
||||
var isAtBottom = (startY >= curY && el.scrollHeight - el.scrollTop === height);
|
||||
|
||||
// Stop a bounce bug when at the bottom or top of the scrollable element
|
||||
if (isAtTop || isAtBottom) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
|
||||
// No need to continue up the DOM, we've done our job
|
||||
return;
|
||||
}
|
||||
|
||||
// Test the next parent
|
||||
el = el.parentNode;
|
||||
}
|
||||
|
||||
// Stop the bouncing -- no parents are scrollable
|
||||
evt.preventDefault();
|
||||
};
|
||||
|
||||
var handleTouchstart = function(evt) {
|
||||
// Store the first Y position of the touch
|
||||
startY = evt.touches ? evt.touches[0].screenY : evt.screenY;
|
||||
};
|
||||
|
||||
var enable = function() {
|
||||
// Listen to a couple key touch events
|
||||
window.addEventListener('touchstart', handleTouchstart, supportsPassiveOption ? { passive : false } : false);
|
||||
window.addEventListener('touchmove', handleTouchmove, supportsPassiveOption ? { passive : false } : false);
|
||||
enabled = true;
|
||||
};
|
||||
|
||||
var disable = function() {
|
||||
// Stop listening
|
||||
window.removeEventListener('touchstart', handleTouchstart, false);
|
||||
window.removeEventListener('touchmove', handleTouchmove, false);
|
||||
enabled = false;
|
||||
};
|
||||
|
||||
var isEnabled = function() {
|
||||
return enabled;
|
||||
};
|
||||
|
||||
// Enable by default if the browser supports -webkit-overflow-scrolling
|
||||
// Test this by setting the property with JavaScript on an element that exists in the DOM
|
||||
// Then, see if the property is reflected in the computed style
|
||||
var testDiv = document.createElement('div');
|
||||
document.documentElement.appendChild(testDiv);
|
||||
testDiv.style.WebkitOverflowScrolling = 'touch';
|
||||
var isScrollSupported = 'getComputedStyle' in window && window.getComputedStyle(testDiv)['-webkit-overflow-scrolling'] === 'touch';
|
||||
document.documentElement.removeChild(testDiv);
|
||||
|
||||
if (isScrollSupported) {
|
||||
enable();
|
||||
}
|
||||
|
||||
// A module to support enabling/disabling iNoBounce
|
||||
var iNoBounce = {
|
||||
enable: enable,
|
||||
disable: disable,
|
||||
isEnabled: isEnabled,
|
||||
isScrollSupported: isScrollSupported
|
||||
};
|
||||
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
// Node.js Support
|
||||
module.exports = iNoBounce;
|
||||
}
|
||||
if (typeof global.define === 'function') {
|
||||
// AMD Support
|
||||
(function(define) {
|
||||
define('iNoBounce', [], function() { return iNoBounce; });
|
||||
}(global.define));
|
||||
}
|
||||
else {
|
||||
// Browser support
|
||||
global.iNoBounce = iNoBounce;
|
||||
}
|
||||
}(this));
|
||||
16
manifest.webmanifest
Normal file
16
manifest.webmanifest
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"background_color": "#ff79a1",
|
||||
"description": "Augment your keyboard with the symbols you need to type in your language.",
|
||||
"display": "fullscreen",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icons/tung.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any"
|
||||
}
|
||||
],
|
||||
"name": "tung-tap.app",
|
||||
"short_name": "tung-tap",
|
||||
"start_url": "/index.html"
|
||||
}
|
||||
410
script.js
Normal file
410
script.js
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
var tung = ""
|
||||
|
||||
var topToggle = false
|
||||
function TopToggle(show = null) {
|
||||
topToggle = show === null ? !topToggle : show
|
||||
|
||||
if (topToggle) {
|
||||
$('#tung').show()
|
||||
} else {
|
||||
$('#tung').hide()
|
||||
}
|
||||
layout()
|
||||
}
|
||||
|
||||
const sfx = new Audio('sfx-click.ogg')
|
||||
|
||||
$(document).ready(() => {
|
||||
if (localStorage.getItem('tung') === null || localStorage.getItem('tung') == "") {
|
||||
tung = "201C 2014 00D7 00B0 00B7 2022 221E 00B1 2023 201D"
|
||||
localStorage.setItem('tung', tung)
|
||||
}
|
||||
else {
|
||||
tung = localStorage.getItem('tung')
|
||||
}
|
||||
$('#tung').html(tung)
|
||||
layout()
|
||||
|
||||
// persistent text
|
||||
if (localStorage.getItem('text') === null || localStorage.getItem('text') == "") {
|
||||
localStorage.setItem('text', "")
|
||||
}
|
||||
else {
|
||||
$('#text').html(localStorage.getItem('text'))
|
||||
}
|
||||
|
||||
|
||||
// $('body').on('keydown', '[contenteditable]', function(e) {
|
||||
// if (e.keyCode === 13) {
|
||||
// e.preventDefault() // prevent the default newline insertion
|
||||
// var range = window.getSelection().getRangeAt(0) // get the current selection range
|
||||
// var newline = document.createTextNode("\n") // create a new text node with the newline character
|
||||
// range.insertNode(newline) // insert the new text node at the current cursor position
|
||||
// range.setStartAfter(newline) // set the cursor after the new text node
|
||||
// range.setEndAfter(newline) // set the end of the selection after the new text node
|
||||
// window.getSelection().removeAllRanges() // remove the old selection
|
||||
// window.getSelection().addRange(range) // set the new selection to the updated range
|
||||
// layout()
|
||||
// }
|
||||
// console.log(e.keyCode)
|
||||
// });
|
||||
|
||||
|
||||
let url = '/tungs.txt'
|
||||
$.get(url, function (data) {
|
||||
lines = data.split('\n')
|
||||
nav()
|
||||
})
|
||||
})
|
||||
|
||||
var lines = null
|
||||
var indexPath = [ 0 ]
|
||||
|
||||
function indentation(line) {
|
||||
let lineIndent = 0
|
||||
while (line.charAt(lineIndent) == '\t') { lineIndent++ }
|
||||
return lineIndent
|
||||
}
|
||||
|
||||
function nav() {
|
||||
let rootIndex = indexPath[indexPath.length - 1]
|
||||
let root = lines[rootIndex]
|
||||
let rootIndent = indentation(root)
|
||||
|
||||
let html = ``
|
||||
for (let i = rootIndex; i < lines.length; i++) {
|
||||
let line = lines[i]
|
||||
let lineIndent = indentation(line)
|
||||
|
||||
if (lineIndent < rootIndent) {
|
||||
break
|
||||
}
|
||||
|
||||
if (lineIndent > rootIndent) {
|
||||
continue
|
||||
}
|
||||
|
||||
let option = line.trim()
|
||||
let pick = false
|
||||
if (option.includes(':')) {
|
||||
option = option.split(':')[0].trim()
|
||||
pick = true
|
||||
}
|
||||
|
||||
let disabled = false
|
||||
// if next line has doesn't have a greater indent, disable the option and make it gray
|
||||
if (!pick && i + 1 < lines.length) {
|
||||
let nextLineIndent = indentation(lines[i + 1])
|
||||
if (nextLineIndent <= rootIndent) {
|
||||
disabled = true
|
||||
}
|
||||
}
|
||||
|
||||
let classes = `class="option
|
||||
${disabled ? 'disabled' : ''}
|
||||
${pick ? 'pick' : ''}
|
||||
${(selected != null && i == selected) ? 'selected' : ''}
|
||||
"`
|
||||
let click = `${disabled ? '' : `onclick="select(${i}, ${pick})"`}`
|
||||
|
||||
html += `<div ${classes} ${click}>${option}</div>`
|
||||
}
|
||||
|
||||
let top = indexPath.length < 2
|
||||
let from = top ? 'tungs' : lines[rootIndex - 1].trim()
|
||||
let back = `
|
||||
<div class="option back" onclick="back()">
|
||||
<div style="">
|
||||
<img class="icon-btn" src="icons/back.svg" style="margin: 0; transform: rotate(${top ? 45 : 0}deg);">
|
||||
<div style="margin-top: 16px; font-size: 24px; font-weight: bold;">${from}</div>
|
||||
</div>
|
||||
<div><a href="https://github.com/spatialfree/tung-tap">contribute</a></div>
|
||||
</div>`
|
||||
|
||||
let head = `
|
||||
<div style="display: flex; justify-content: space-around; align-items: center; padding: 0 10px; height: 36px; background-color: #ffb5dd; color: #fff;">
|
||||
<div style="font-weight: bold;">tung-tap</div>
|
||||
<img onclick="$('#nav').toggle()" class="icon-btn" src="icons/tungs.svg">
|
||||
</div>`
|
||||
|
||||
let links = `
|
||||
<div id="links" style="
|
||||
padding: 10px 20px;
|
||||
margin: 0px;
|
||||
font-size: 14px;
|
||||
background-color: #ff79a1;
|
||||
color: #79394f;
|
||||
">
|
||||
Find more character codes in
|
||||
<a target="_blank" href="https://unicode.org/charts/">unicode.org</a>
|
||||
reference charts
|
||||
or sketching in <a target="_blank" href="https://shapecatcher.com/">shapecatcher.com</a>
|
||||
drawbox search!
|
||||
</div>`
|
||||
|
||||
$('#nav').html(links + back + html)
|
||||
}
|
||||
|
||||
function back() {
|
||||
if (indexPath.length == 1) {
|
||||
$('#nav').toggle()
|
||||
return
|
||||
}
|
||||
indexPath.pop()
|
||||
nav()
|
||||
}
|
||||
|
||||
var selected = null
|
||||
function select(index, pick) {
|
||||
let line = lines[index]
|
||||
if (pick) {
|
||||
$('#tung').html(line.split(':')[1].trim())
|
||||
layout()
|
||||
selected = index
|
||||
} else {
|
||||
indexPath.push(index + 1)
|
||||
}
|
||||
nav()
|
||||
}
|
||||
|
||||
function getLines(divId) {
|
||||
var div = document.getElementById(divId)
|
||||
var lineHeight = parseInt(window.getComputedStyle(div).getPropertyValue('line-height'))
|
||||
var height = div.getBoundingClientRect().height
|
||||
var lineCount = Math.floor(height / lineHeight)
|
||||
var newLines = []
|
||||
for (var i = 0; i < lineCount; i++) {
|
||||
// var lineTop = i * lineHeight
|
||||
// var lineBottom = (i + 1) * lineHeight
|
||||
var lineText = div.innerText.substring(
|
||||
div.getClientRects()[i].left - div.getClientRects()[0].left,
|
||||
div.getClientRects()[i].right - div.getClientRects()[0].left
|
||||
)
|
||||
newLines.push(lineText)
|
||||
}
|
||||
return newLines
|
||||
}
|
||||
|
||||
function layout() {
|
||||
// keymap (tung is the proprietary name)
|
||||
let tungText = $('#tung').html() //.replace('\r\n', '\n')
|
||||
tungText = tungText.replace(/<div>/g, '\n').replace(/<\/div>/g, '')
|
||||
if (tung != tungText) {
|
||||
tung = tungText
|
||||
localStorage.setItem('tung', tung)
|
||||
}
|
||||
|
||||
// console.log(tungText)
|
||||
|
||||
let html = ``
|
||||
let rows = tung.split('\n')
|
||||
rows.forEach(row => {
|
||||
row = row.trim()
|
||||
if (row.length > 0) {
|
||||
html += `<div class="row">\n`
|
||||
let keys = row.split(' ')
|
||||
keys.forEach(key => {
|
||||
// print the newkey string
|
||||
// and the unicode character
|
||||
html += `<div class="key" charcode="${key}" ${topToggle ? `style="position: relative; padding-top: 10px;` : ``}">
|
||||
<span style="
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
position: absolute;
|
||||
top: 2px; left: 0; right: 0;
|
||||
color: #aaa;
|
||||
${topToggle ? `` : `display: none;`}
|
||||
">${key}</span>
|
||||
${String.fromCharCode("0x" + key)}
|
||||
</div>\n`
|
||||
})
|
||||
html += `</div>\n`
|
||||
}
|
||||
})
|
||||
|
||||
$('#keyboard').html(html)
|
||||
|
||||
$('.key').click(key => {
|
||||
// override default behavior
|
||||
key.preventDefault()
|
||||
|
||||
// if text is not focused then set the cursor to the end of $('#text')
|
||||
let textEl = $('#text')
|
||||
if (document.activeElement != textEl[0] && window.getSelection().rangeCount == 0) {
|
||||
let selection = window.getSelection()
|
||||
let range = document.createRange()
|
||||
range.selectNodeContents(textEl[0])
|
||||
range.collapse(false)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
}
|
||||
textEl.focus()
|
||||
|
||||
// insert key character into contenteditable div $('#text') at cursor position
|
||||
let char = String.fromCharCode("0x" + $(key.target).attr('charcode'))
|
||||
insertTextAtCursor(char)
|
||||
|
||||
|
||||
|
||||
// navigator.vibrate(20);
|
||||
// sfx.play()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function insertTextAtCursor(text) {
|
||||
let selection = window.getSelection()
|
||||
let range = selection.getRangeAt(0)
|
||||
range.deleteContents()
|
||||
let node = document.createTextNode(text)
|
||||
range.insertNode(node)
|
||||
range.setStartAfter(node)
|
||||
range.setEndAfter(node)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
}
|
||||
|
||||
function copyToClipboard(id) {
|
||||
var textEl = $(id)
|
||||
|
||||
// select all the text on the contenteditable div textEl to show it was copied
|
||||
let selection = window.getSelection()
|
||||
let range = document.createRange()
|
||||
range.selectNodeContents(textEl[0])
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
|
||||
if (!navigator.clipboard) {
|
||||
console.error('Clipboard API not supported');
|
||||
return;
|
||||
}
|
||||
navigator.clipboard.writeText(textEl.html())
|
||||
.then(() => {
|
||||
console.log('Text copied to clipboard')
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Failed to copy text: ', err)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// const newPosition = toolbar.getBoundingClientRect().top
|
||||
// toolbar.classList.add('down')
|
||||
|
||||
|
||||
function getVisibleHeight() {
|
||||
var pixelRatio = window.devicePixelRatio || 1
|
||||
var viewportHeight = window.visualViewport.height * pixelRatio
|
||||
var windowHeight = window.innerHeight * pixelRatio
|
||||
var keyboardHeight = viewportHeight - windowHeight
|
||||
// $('#tung').html(`viewport ${viewportHeight}px | window ${windowHeight}px | keyboard ${keyboardHeight}px`)
|
||||
|
||||
return Math.abs(keyboardHeight) / pixelRatio || 0
|
||||
}
|
||||
|
||||
|
||||
|
||||
var out = 400;
|
||||
function loop(timestamp) {
|
||||
var delta = timestamp - lastRender
|
||||
time += delta
|
||||
|
||||
let height = getVisibleHeight()
|
||||
|
||||
// use the bottom of the #tung element position to use for the body top
|
||||
// to be able to toggle the top of the page
|
||||
let top = $('#tung').outerHeight(true) //+ $('#links').outerHeight(true) // + $('#home').outerHeight(true)
|
||||
|
||||
if (topToggle)
|
||||
top *= 0
|
||||
|
||||
// lerp out to top
|
||||
if (time > 100) {
|
||||
out = lerp(out, top, 0.01 * delta)
|
||||
}
|
||||
|
||||
|
||||
// 'bottom': height + 'px',
|
||||
// $('body').css({
|
||||
// 'top': -out + 'px'
|
||||
// })
|
||||
|
||||
|
||||
|
||||
|
||||
// $('#keyboard').css({
|
||||
// 'bottom': height + 'px',
|
||||
// })
|
||||
|
||||
|
||||
// check if need to backup the text
|
||||
let text = $('#text').html()
|
||||
if (text != lastText) {
|
||||
localStorage.setItem('text', text)
|
||||
lastText = text
|
||||
}
|
||||
|
||||
|
||||
|
||||
lastRender = timestamp
|
||||
window.requestAnimationFrame(loop)
|
||||
}
|
||||
var lastText = ''
|
||||
var lastRender = 0
|
||||
var time = 0
|
||||
window.requestAnimationFrame(loop)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let ua = navigator.userAgent.toLowerCase()
|
||||
let safari = ua.indexOf('safari') != -1 && !(ua.indexOf('chrome') > -1)
|
||||
|
||||
// dev toggle override
|
||||
// safari = !safari
|
||||
|
||||
$('html').css('--bg', safari ? '214, 216, 221' : '16, 16, 16')
|
||||
$('html').css('--fg', safari ? '214, 216, 221' : '240, 240, 240')
|
||||
$('html').css('--key', safari ? '255, 255, 255' : '48, 48, 48')
|
||||
$('html').css('--key-height', safari ? '40px' : '48px')
|
||||
$('html').css('--key-radius', safari ? '5px' : '8px')
|
||||
$('html').css('--txt', safari ? '0, 0, 0' : '255, 255, 255')
|
||||
$('html').css('--txt-size', safari ? '22px' : '26px')
|
||||
$('html').css('--field', safari ? '255, 255, 255' : '0, 0, 0')
|
||||
$('html').css('--gap', safari ? '6px' : '5px')
|
||||
|
||||
window.addEventListener("beforeinstallprompt", (e) => {
|
||||
console.log('beforeinstallprompt')
|
||||
// // Prevent Chrome 67 and earlier from automatically showing the prompt
|
||||
// e.preventDefault()
|
||||
// // Stash the event so it can be triggered later.
|
||||
// deferredPrompt = e
|
||||
// // // Update UI to notify the user they can add to home screen
|
||||
// // addBtn.style.display = "block"
|
||||
|
||||
// // addBtn.addEventListener("click", (e) => {
|
||||
// // // hide our user interface that shows our A2HS button
|
||||
// // addBtn.style.display = "none"
|
||||
// // })
|
||||
// // Show the prompt
|
||||
// deferredPrompt.prompt()
|
||||
// // Wait for the user to respond to the prompt
|
||||
// deferredPrompt.userChoice.then((choiceResult) => {
|
||||
// if (choiceResult.outcome === "accepted") {
|
||||
// console.log("User accepted the A2HS prompt")
|
||||
// } else {
|
||||
// console.log("User dismissed the A2HS prompt")
|
||||
// }
|
||||
// deferredPrompt = null
|
||||
// })
|
||||
})
|
||||
|
||||
|
||||
|
||||
function lerp(a, b, n) {
|
||||
return (1 - n) * a + n * b
|
||||
}
|
||||
BIN
sfx-click.ogg
Normal file
BIN
sfx-click.ogg
Normal file
Binary file not shown.
215
style.css
Normal file
215
style.css
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=DM+Mono&display=swap');
|
||||
|
||||
:root {
|
||||
/* --bg: 16, 16, 16;
|
||||
--fg: 240, 240, 240;
|
||||
--key: 32, 32, 32;
|
||||
--txt: 255, 255, 255;
|
||||
--field: 255, 255, 255; */
|
||||
}
|
||||
|
||||
* {
|
||||
/* all: unset; */
|
||||
outline: none;
|
||||
/* box-sizing: border-box; */
|
||||
}
|
||||
|
||||
|
||||
/* *::selection {
|
||||
background-color: rgba(255, 255, 255, 0.333);
|
||||
} */
|
||||
|
||||
/* *::marker {
|
||||
color: rgb(var(--txt));
|
||||
} */
|
||||
|
||||
|
||||
html {
|
||||
/* font-family: sans-serif; */
|
||||
font-family: 'Atkinson Hyperlegible', sans-serif;
|
||||
font-size: 16px;
|
||||
|
||||
background-color: rgb(var(--field));
|
||||
|
||||
margin: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* start from bottom */
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: rgb(var(--field));
|
||||
|
||||
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* hide scrollbar */
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button,
|
||||
select,
|
||||
div,
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
#nav {
|
||||
background-color: rgb(var(--field));
|
||||
color: rgb(var(--txt));
|
||||
overflow-y: auto;
|
||||
max-height: -webkit-fill-available;
|
||||
/* margin-top: 120px; */
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
|
||||
/* opacity: 0.999; weird fix... */
|
||||
|
||||
padding-bottom: 500px;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: rgb(var(--bg));
|
||||
border-top: 0.5px solid #80808042;
|
||||
}
|
||||
|
||||
.option:nth-child(2n) {
|
||||
background-color: rgb(var(--field));
|
||||
}
|
||||
|
||||
.option.pick {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.option.selected {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.option.disabled {
|
||||
color: rgba(var(--txt), 0.333);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.back {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
/* textarea {
|
||||
font-family: sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
padding: 1.5rem 1rem;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
resize: none;
|
||||
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
height: -webkit-fill-available;
|
||||
|
||||
background-color: rgb(var(--field));
|
||||
color: rgb(var(--txt));
|
||||
} */
|
||||
|
||||
#keyboard {
|
||||
display: block;
|
||||
margin-bottom: 0px;
|
||||
background-color: rgb(var(--bg));
|
||||
z-index: 100;
|
||||
user-select: none;
|
||||
border-top: 0.5px solid rgba(128, 128, 128, 0.333);
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* position: fixed;
|
||||
bottom: 0; left: 0; right: 0; */
|
||||
}
|
||||
|
||||
/* transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); */
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
gap: var(--gap);
|
||||
margin: 9px 3px;
|
||||
}
|
||||
|
||||
.key {
|
||||
font-family: sans-serif;
|
||||
font-size: var(--txt-size);
|
||||
line-height: var(--key-height);
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
max-width: 64px;
|
||||
height: var(--key-height);
|
||||
text-align: center;
|
||||
|
||||
border-top: 0.5px solid rgba(255, 255, 255, 0);
|
||||
margin-bottom: -0.5px;
|
||||
border-radius: var(--key-radius);
|
||||
background-color: rgba(var(--key));
|
||||
color: rgb(var(--txt));
|
||||
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.333);
|
||||
/* box-shadow: 0 0 0.5rem 0rem rgba(255, 255, 255, 0.0) inset; */
|
||||
transition: 0.1s;
|
||||
transition-timing-function: cubic-bezier(.51,.12,0,-0.27);
|
||||
}
|
||||
|
||||
.key:active {
|
||||
transition: 0.0s;
|
||||
/* transition-timing-function: cubic-bezier(0.1, 1, 0.77, 0.62); */
|
||||
|
||||
border-color: rgba(255, 255, 255, 0.333);
|
||||
box-shadow: 0 7px 4px 0 rgba(0, 0, 0, 0.333);
|
||||
transform: translateY(-6px);
|
||||
/* box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.333) inset;
|
||||
transform: translateY(2.0px); */
|
||||
/* flex: 1.2; */
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* #copybtn:active {
|
||||
transition: 0.1s;
|
||||
box-shadow: 0 0 0.5rem 0rem rgba(0, 0, 0, 0.333) inset;
|
||||
} */
|
||||
7
tungs.txt
Normal file
7
tungs.txt
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
Misc.
|
||||
Test : 201C 2014 00D7 00B0 00B7 2022 221E 00B1 2023 201D
|
||||
Salishan
|
||||
Bella Coola
|
||||
Coast Salish
|
||||
Interior Salish
|
||||
Spokane : 0142 019B 0323 02B7 203F 0301 030C 0294 0295 0313
|
||||
Loading…
Add table
Reference in a new issue