forked from syndicatefx/textpad
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (54 loc) · 6.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TextPad</title>
<meta name="title" content="TextPad">
<meta name="description" content="A simple online notepad, no WYSIWYG, no fancy stuff, just write. The text will live in your browser until you decide to delete or download it.">
<meta name="author" content="Patel Sujal -- www.patelsujal.in">
<link href="app.css" rel="stylesheet">
</head>
<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="icon-delete" viewBox="0 0 24 24"><title>delete</title><path d="M6 19c0 1.105 0.895 2 2 2h8c1.105 0 2-0.895 2-2v-12h-12v12zM19 4h-3.5l-1-1h-5l-1 1h-3.5v2h14v-2z"></path></symbol><symbol id="icon-info-outline" viewBox="0 0 24 24"><title>info-outline</title><path d="M11 17h2v-6h-2v6zM12 2c-5.525 0-10 4.475-10 10s4.475 10 10 10 10-4.475 10-10-4.475-10-10-10zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2v-2h-2v2z"></path></symbol><symbol id="icon-invert-colors" viewBox="0 0 24 24"><title>invert-colors</title><path d="M17.655 7.93l-5.655-5.66-5.655 5.66c-3.125 3.125-3.125 8.19 0 11.315 1.56 1.56 3.61 2.345 5.655 2.345s4.095-0.78 5.655-2.345c3.125-3.125 3.125-8.19 0-11.315zM12 19.585c-1.605 0-3.11-0.625-4.24-1.76-1.135-1.13-1.76-2.635-1.76-4.24s0.625-3.11 1.76-4.245l4.24-4.24v14.485z"></path></symbol><symbol id="icon-file-download" viewBox="0 0 24 24"><title>file-download</title><path d="M19 9h-4v-6h-6v6h-4l7 7 7-7zM5 18v2h14v-2h-14z"></path></symbol><symbol id="icon-settings" viewBox="0 0 24 24"><title>settings</title><path d="M19.43 12.975c0.040-0.32 0.070-0.645 0.070-0.975s-0.030-0.655-0.070-0.975l2.115-1.655c0.19-0.15 0.245-0.42 0.12-0.64l-2-3.465c-0.125-0.215-0.385-0.305-0.61-0.215l-2.49 1.005c-0.515-0.395-1.080-0.73-1.69-0.985l-0.375-2.65c-0.045-0.235-0.25-0.42-0.5-0.42h-4c-0.25 0-0.455 0.185-0.495 0.42l-0.375 2.65c-0.61 0.255-1.175 0.585-1.69 0.985l-2.49-1.005c-0.225-0.085-0.485 0-0.61 0.215l-2 3.465c-0.125 0.215-0.070 0.485 0.12 0.64l2.11 1.655c-0.040 0.32-0.070 0.645-0.070 0.975s0.030 0.655 0.070 0.975l-2.11 1.655c-0.19 0.15-0.245 0.42-0.12 0.64l2 3.465c0.125 0.215 0.385 0.305 0.61 0.215l2.49-1.005c0.515 0.395 1.080 0.73 1.69 0.985l0.375 2.65c0.040 0.235 0.245 0.42 0.495 0.42h4c0.25 0 0.455-0.185 0.495-0.42l0.375-2.65c0.61-0.255 1.175-0.585 1.69-0.985l2.49 1.005c0.225 0.085 0.485 0 0.61-0.215l2-3.465c0.125-0.215 0.070-0.485-0.12-0.64l-2.11-1.655zM12 15.5c-1.935 0-3.5-1.565-3.5-3.5s1.565-3.5 3.5-3.5 3.5 1.565 3.5 3.5-1.565 3.5-3.5 3.5z"></path></symbol><symbol id="icon-refresh" viewBox="0 0 24 24"><title>refresh</title><path d="M17.65 6.35c-1.445-1.45-3.44-2.35-5.65-2.35-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.725 0 6.845-2.55 7.73-6h-2.080c-0.825 2.33-3.035 4-5.65 4-3.315 0-6-2.685-6-6s2.685-6 6-6c1.655 0 3.14 0.69 4.225 1.775l-3.225 3.225h7v-7l-2.35 2.35z"></path></symbol><symbol id="icon-format-size" viewBox="0 0 24 24"><title>format-size</title><path d="M9 4v3h5v12h3v-12h5v-3h-13zM3 12h3v7h3v-7h3v-3h-9v3z"></path></symbol><symbol id="icon-format-line-spacing" viewBox="0 0 24 24"><title>format-line-spacing</title><path d="M6 7h2.5l-3.5-3.5-3.5 3.5h2.5v10h-2.5l3.5 3.5 3.5-3.5h-2.5v-10zM10 5v2h12v-2h-12zM10 19h12v-2h-12v2zM10 13h12v-2h-12v2z"></path></symbol><symbol id="icon-wrap-text" viewBox="0 0 24 24"><title>wrap-text</title><path d="M4 19h6v-2h-6v2zM20 5h-16v2h16v-2zM17 11h-13v2h13.25c1.105 0 2 0.895 2 2s-0.895 2-2 2h-2.25v-2l-3 3 3 3v-2h2c2.205 0 4-1.795 4-4s-1.795-4-4-4z"></path></symbol><symbol id="logo" viewBox="0 0 48 48"><title>TextPad</title><path d="M12 1c-1.5 0-2.2 1.5-2 2.7V5H4C2.6 5 1.7 6.4 2 7.7v37.5c0 1.4 1.7 2 3 1.8H44c1.4 0 2-1.7 1.8-3V7c0-1.4-1.7-2-3-1.8h-5V2.4c-.3-.8-1.2-1.5-2-1.4-1.5 0-2.2 1.5-2 2.7V5h-8V2.4c-.3-.8-1.2-1.5-2-1.4-1.5 0-2.2 1.5-2 2.7V5h-8V2.4c-.3-.8-1.2-1.5-2-1.4zM6 9h4v4.4c.3 1.8 3 2.2 3.8.5.4-1.6 0-3.2.2-4.7V9h8v4.4c.3 1.8 3 2.2 3.8.5.4-1.6 0-3.2.2-4.7V9h8v4.4c.3 1.8 3 2.2 3.8.5.4-1.6 0-3.2.2-4.7V9h4v34H6V9zm28.6 10H11.8c-1.8 0-2.6 2.7-1 3.7 1.2.6 2.8.2 4 .3h21.6c1.8-.3 2.2-3 .5-3.8-.8-.2-1.6-.2-2.4-.2zm0 8H11.8c-1.8 0-2.6 2.7-1 3.7 1.2.6 2.8.2 4 .3h21.6c1.8-.3 2.2-3 .5-3.8-.8-.2-1.6-.2-2.4-.2zm0 8H11.8c-1.8 0-2.6 2.7-1 3.7 1.2.6 2.8.2 4 .3h21.6c1.8-.3 2.2-3 .5-3.8-.8-.2-1.6-.2-2.4-.2z"/></symbol></defs></svg>
<header role="banner">
<nav>
<input id="fileName" type="text" placeholder="File Name Here...">
<div class="btn-group">
<button id="save" class="save-btn" title="Save/Download"><svg><use xlink:href="#icon-file-download"></use></svg></button>
<button id="clear" class="clear-btn" title="Clear/Delete"><svg><use xlink:href="#icon-delete"></use></svg></button>
<button id="settings" class="settings-btn" title="Toggle Settings"><svg><use xlink:href="#icon-settings"></use></svg></button>
</div>
<div id="setMenu" class="settings-menu">
<ul>
<li class="settings-menu__item">
<svg><use xlink:href="#icon-format-size"></use></svg>
<input type="range" min="1" max="2" value="1" id="fs" step="0.1" title="Text size">
</li>
<li class="settings-menu__item">
<svg><use xlink:href="#icon-format-line-spacing"></use></svg>
<input type="range" min="1" max="3" value="1.9" id="lh" step="0.1" title="Line Height">
</li>
<li class="settings-menu__item">
<svg><use xlink:href="#icon-wrap-text"></use></svg>
<input type="range" min="1" max="32" value="16" id="lw" step="1" title="Line Width">
</li>
<li class="settings-menu__item">
<button id="theme" title="Toggle Theme"><svg><use xlink:href="#icon-invert-colors"></use></svg></button>
<button id="reset" title="Reset to Defaults"><svg><use xlink:href="#icon-refresh"></use></svg></button>
</li>
</ul>
</div>
</nav>
</header>
<textarea id="fileContent" placeholder="Start Writing..." spellcheck="false"></textarea>
<footer role="contentinfo">
<ul class="counter">
<li id="charCounter"></li>
<li id="wordCounter"></li>
</ul>
</footer>
<script src="app.js"></script>
</body>
</html>