167 lines
No EOL
17 KiB
HTML
167 lines
No EOL
17 KiB
HTML
<!doctype html>
|
|
<html class="-flex -flex-column -flex-grow" data-theme="light" lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="apple-mobile-web-app-title" content="Simple Note" />
|
|
<meta name="application-name" content="Simple Note" />
|
|
<meta name="author" content="westtle" />
|
|
<meta name="description" content="A very simple notepad that you can use." />
|
|
<meta name="keywords" content="notepad, note, notepad online, simple note, simple notepad" />
|
|
<meta name="theme-color" content="#ffffff" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<link rel="canonical" href="https://westtle.github.io/simple-note" />
|
|
<title>Simple Note</title>
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:site_name" content="Simple Note" />
|
|
<meta property="og:title" content="Simple Note" />
|
|
<meta property="og:description" content="A very simple notepad that you can use." />
|
|
<meta property="og:url" content="https://westtle.github.io/simple-note" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="./assets/images/cover.png" />
|
|
<meta property="og:image:width" content="1280" />
|
|
<meta property="og:image:height" content="720" />
|
|
<meta property="og:image:type" content="image/png" />
|
|
<meta property="og:image:alt" content="Cover for Simple Note, it has the title and the description sitting on top of black and white background." />
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Simple Note" />
|
|
<meta name="twitter:description" content="A very simple notepad that you can use." />
|
|
<meta name="twitter:url" content="https://westtle.github.io/simple-note" />
|
|
<meta name="twitter:site" content="@westtle_" />
|
|
<meta name="twitter:creator" content="@westtle_" />
|
|
<meta name="twitter:image" content="/simple-note/assets/images/cover.png" />
|
|
<meta name="twitter:image:alt" content="Cover for Simple Note, it has the title and the description sitting on top of black and white background." />
|
|
<meta name="twitter:dnt" content="on" />
|
|
|
|
<!-- Favicon(s) -->
|
|
<link rel="icon" type="image/svg+xml" href="./assets/images/favicons/favicon.svg" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicons/favicon-16x16.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicons/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="192x192" href="./assets/images/favicons/android-chrome-192x192.png" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href=" ./apple-touch-icon.png" />
|
|
<link rel="mask-icon" color="#000000" href="./assets/images/favicons/safari-pinned-tab.svg" />
|
|
<meta name="msapplication-config" content="./browserconfig.xml" />
|
|
<meta name="msapplication-TileColor" content="#000000" />
|
|
<meta name="msapplication-TileImage" content="./assets/images/favicons/mstile-144x144.png" />
|
|
|
|
<link rel="manifest" href="./manifest.webmanifest" />
|
|
<link rel="stylesheet" type="text/css" href="./assets/styles/global.css" />
|
|
<link rel="stylesheet" type="text/css" href="./assets/styles/settings.css" />
|
|
<link rel="stylesheet" type="text/css" href="./assets/styles/simple-note.css" />
|
|
|
|
<!-- No JS Fallback -->
|
|
<noscript><link rel="stylesheet" type="text/css" href="./assets/styles/no-js.css" /></noscript>
|
|
</head>
|
|
<body class="-flex -flex-column -flex-grow">
|
|
<aside class="settings" data-expanded="false">
|
|
<button class="settings__button settings__button--toggle-settings" aria-label="Settings" aria-describedby="settings__button-description--toggle-settings" aria-expanded="false" aria-controls="settings__buttons">
|
|
<svg class="settings__svg settings__svg--toggle-settings" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<title>Settings</title>
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
<span id="settings__button-description--toggle-settings" class="settings__button-description settings__button-description--toggle-settings --sr-only">Press to open settings.</span>
|
|
</button>
|
|
<ul id="settings__buttons" class="settings__buttons">
|
|
<li class="settings__button-item">
|
|
<button class="settings__button settings__button--theme" aria-label="Theme" aria-describedby="settings__button-description--theme">
|
|
<svg class="settings__svg settings__svg--theme-moon" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<title>Theme</title>
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
<svg class="settings__svg settings__svg--theme-sun" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<title>Theme</title>
|
|
<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
<span id="settings__button-description--theme" class="settings__button-description settings__button-description--theme --sr-only">Press to change to dark theme.</span>
|
|
</button>
|
|
</li>
|
|
<span class="settings__separator" aria-hidden="true"></span>
|
|
<li class="settings__button-item">
|
|
<button class="settings__button settings__button--clear" aria-label="Clear Note" aria-describedby="settings__button-description--clear">
|
|
<svg class="settings__svg settings__svg--clear" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<title>Clear Note</title>
|
|
<polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line>
|
|
</svg>
|
|
<span id="settings__button-description--clear" class="settings__button-description settings__button-description--clear --sr-only">Press to delete all contents of the note.</span>
|
|
</button>
|
|
</li>
|
|
<li class="settings__button-item">
|
|
<button class="settings__button settings__button--download" aria-label="Download Note" aria-describedby="settings__button-description--download">
|
|
<svg class="settings__svg settings__svg--download" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<title>Download Note</title>
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
|
|
</svg>
|
|
<span id="settings__button-description--download" class="settings__button-description settings__button-description--download --sr-only">Press to download the contents of the note.</span>
|
|
</button>
|
|
</li>
|
|
<span class="settings__separator" aria-hidden="true"></span>
|
|
<li class="settings__button-item">
|
|
<a class="settings__button settings__button--github" aria-labelledby="settings__button-label--github" rel="noopener" href="https://github.com/westtle/simple-note" target="_blank">
|
|
<svg class="settings__svg settings__svg--github" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<title>Github Repository</title>
|
|
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
|
</svg>
|
|
<span id="settings__button-label--github" class="settings__button-label settings__button-label--github --sr-only">Github Repository (New Tab)</span>
|
|
</a>
|
|
</li>
|
|
<li class="settings__button-item">
|
|
<a class="settings__button settings__button--westtle" aria-labelledby="settings__button-label--westtle" rel="noopener" href="https://westtle.github.io" target="_blank">
|
|
<svg class="settings__svg settings__svg--westtle" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 500 500" xml:space="preserve">
|
|
<title>westtle's Homepage</title>
|
|
<g transform="matrix(1 0 0 1 250 250)"><rect class="settings__svg-westtle--background" width="500" height="500" fill="#000000" vector-effect="non-scaling-stroke" x="-250" y="-250" rx="0" ry="0"></rect></g><g transform="matrix(27.64 -1.71 1.71 27.64 255.15 262.17)"><path class="settings__svg-westtle--cat" fill="#ffffff" vector-effect="non-scaling-stroke" stroke-linecap="round" transform="translate(-7, -7)" d="M 3 12 L 4 12 L 4 13 L 3 13 M 3 11 L 4 11 L 4 12 L 3 12 M 4 11 L 5 11 L 5 12 L 4 12 M 4 10 L 5 10 L 5 11 L 4 11 M 4 9 L 5 9 L 5 10 L 4 10 M 3 9 L 4 9 L 4 10 L 3 10 M 2 8 L 3 8 L 3 9 L 2 9 M 1 7 L 2 7 L 2 8 L 1 8 M 0 8 L 1 8 L 1 9 L 0 9 M 1 6 L 2 6 L 2 7 L 1 7 M 1 5 L 2 5 L 2 6 L 1 6 M 1 4 L 2 4 L 2 5 L 1 5 M 0 3 L 1 3 L 1 4 L 0 4 M 2 3 L 3 3 L 3 4 L 2 4 M 2 2 L 3 2 L 3 3 L 2 3 M 3 1 L 4 1 L 4 2 L 3 2 M 4 2 L 5 2 L 5 3 L 4 3 M 5 3 L 6 3 L 6 4 L 5 4 M 6 3 L 7 3 L 7 4 L 6 4 M 7 3 L 8 3 L 8 4 L 7 4 M 8 3 L 9 3 L 9 4 L 8 4 M 9 2 L 10 2 L 10 3 L 9 3 M 10 1 L 11 1 L 11 2 L 10 2 M 11 2 L 12 2 L 12 3 L 11 3 M 11 3 L 12 3 L 12 4 L 11 4 M 12 4 L 13 4 L 13 5 L 12 5 M 13 3 L 14 3 L 14 4 L 13 4 M 12 5 L 13 5 L 13 6 L 12 6 M 12 6 L 13 6 L 13 7 L 12 7 M 12 7 L 13 7 L 13 8 L 12 8 M 13 8 L 14 8 L 14 9 L 13 9 M 11 8 L 12 8 L 12 9 L 11 9 M 10 9 L 11 9 L 11 10 L 10 10 M 9 9 L 10 9 L 10 10 L 9 10 M 8 9 L 9 9 L 9 10 L 8 10 M 7 9 L 8 9 L 8 10 L 7 10 M 6 9 L 7 9 L 7 10 L 6 10 M 5 9 L 6 9 L 6 10 L 5 10 M 9 10 L 10 10 L 10 11 L 9 11 M 9 11 L 10 11 L 10 12 L 9 12 M 9 12 L 10 12 L 10 13 L 9 13"></path></g>
|
|
</svg>
|
|
<span id="settings__button-label--westtle" class="settings__button-label settings__button-label--westtle --sr-only">westtle's Homepage (New Tab)</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- No JS Fallback -->
|
|
<noscript class="noscript__settings" hidden> <!-- Use hidden so the list doesn't appear twice when both CSS and JS are disabled (Unhide in CSS). -->
|
|
<ul class="settings__buttons settings__buttons--no-js">
|
|
<li class="settings__button-item">
|
|
<a class="settings__button settings__button--github" aria-labelledby="settings__button-label--github--no-js" rel="noopener" href="https://github.com/westtle/simple-note" target="_blank">
|
|
<svg class="settings__svg settings__svg--github" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<title>Github Repository</title>
|
|
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
|
</svg>
|
|
<span id="settings__button-label--github--no-js" class="settings__button-label settings__button-label--github settings__button-label--github--no-js --sr-only">Github Repository (New Tab)</span>
|
|
</a>
|
|
</li>
|
|
<li class="settings__button-item">
|
|
<a class="settings__button settings__button--westtle" aria-labelledby="settings__button-label--westtle--no-js" rel="noopener" href="https://westtle.github.io" target="_blank">
|
|
<svg class="settings__svg settings__svg--westtle" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 500 500" xml:space="preserve">
|
|
<title>westtle's Homepage</title>
|
|
<g transform="matrix(1 0 0 1 250 250)"><rect class="settings__svg-westtle--background" width="500" height="500" fill="#000000" vector-effect="non-scaling-stroke" x="-250" y="-250" rx="0" ry="0"></rect></g><g transform="matrix(27.64 -1.71 1.71 27.64 255.15 262.17)"><path class="settings__svg-westtle--cat" fill="#ffffff" vector-effect="non-scaling-stroke" stroke-linecap="round" transform="translate(-7, -7)" d="M 3 12 L 4 12 L 4 13 L 3 13 M 3 11 L 4 11 L 4 12 L 3 12 M 4 11 L 5 11 L 5 12 L 4 12 M 4 10 L 5 10 L 5 11 L 4 11 M 4 9 L 5 9 L 5 10 L 4 10 M 3 9 L 4 9 L 4 10 L 3 10 M 2 8 L 3 8 L 3 9 L 2 9 M 1 7 L 2 7 L 2 8 L 1 8 M 0 8 L 1 8 L 1 9 L 0 9 M 1 6 L 2 6 L 2 7 L 1 7 M 1 5 L 2 5 L 2 6 L 1 6 M 1 4 L 2 4 L 2 5 L 1 5 M 0 3 L 1 3 L 1 4 L 0 4 M 2 3 L 3 3 L 3 4 L 2 4 M 2 2 L 3 2 L 3 3 L 2 3 M 3 1 L 4 1 L 4 2 L 3 2 M 4 2 L 5 2 L 5 3 L 4 3 M 5 3 L 6 3 L 6 4 L 5 4 M 6 3 L 7 3 L 7 4 L 6 4 M 7 3 L 8 3 L 8 4 L 7 4 M 8 3 L 9 3 L 9 4 L 8 4 M 9 2 L 10 2 L 10 3 L 9 3 M 10 1 L 11 1 L 11 2 L 10 2 M 11 2 L 12 2 L 12 3 L 11 3 M 11 3 L 12 3 L 12 4 L 11 4 M 12 4 L 13 4 L 13 5 L 12 5 M 13 3 L 14 3 L 14 4 L 13 4 M 12 5 L 13 5 L 13 6 L 12 6 M 12 6 L 13 6 L 13 7 L 12 7 M 12 7 L 13 7 L 13 8 L 12 8 M 13 8 L 14 8 L 14 9 L 13 9 M 11 8 L 12 8 L 12 9 L 11 9 M 10 9 L 11 9 L 11 10 L 10 10 M 9 9 L 10 9 L 10 10 L 9 10 M 8 9 L 9 9 L 9 10 L 8 10 M 7 9 L 8 9 L 8 10 L 7 10 M 6 9 L 7 9 L 7 10 L 6 10 M 5 9 L 6 9 L 6 10 L 5 10 M 9 10 L 10 10 L 10 11 L 9 11 M 9 11 L 10 11 L 10 12 L 9 12 M 9 12 L 10 12 L 10 13 L 9 13"></path></g>
|
|
</svg>
|
|
<span id="settings__button-label--westtle--no-js" class="settings__button-label settings__button-label--westtle settings__button-label--westtle--no-js --sr-only">westtle's Homepage (New Tab)</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</noscript>
|
|
</aside>
|
|
|
|
<main class="-flex -flex-column -flex-grow">
|
|
<section class="simple-note -flex -flex-column -flex-grow">
|
|
<h1 class="--sr-only">Simple Note</h1>
|
|
<div class="simple-note__inputs -flex -flex-column -flex-grow">
|
|
<label class="simple-note__label simple-note__label--title --sr-only" for="simple-note__input--title">Note Title</label>
|
|
<input id="simple-note__input--title" class="simple-note__input simple-note__input--title" type="text" placeholder="Title..." spellcheck="false" />
|
|
<label class="simple-note__label simple-note__label--body --sr-only" for="simple-note__input--body">Note Content</label>
|
|
<textarea id="simple-note__input--body" class="simple-note__input simple-note__input--body -flex-grow" placeholder="Your content here..." spellcheck="false"></textarea>
|
|
|
|
<!-- No JS Fallback -->
|
|
<noscript class="noscript__message">
|
|
<p>Hello, it seems you have JavaScript disabled. This site uses localStorage to save your note on the web. You can still type in here, but if you want your note to be saved, you need to have JavaScript enabled (Unless you're using Firefox since it can remember your input).</p>
|
|
</noscript>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="text/javascript" src="./assets/scripts/simple-note.js"></script>
|
|
<script type="text/javascript" src="./assets/scripts/settings.js"></script>
|
|
<script type="text/javascript" src="./assets/scripts/theme.js"></script>
|
|
</body>
|
|
</html> |