simple-note/index.html

178 lines
18 KiB
HTML
Raw Normal View History

2022-07-26 06:40:22 +00:00
<!doctype html>
<html class="-flex -flex-column -flex-grow" data-theme="light" lang="en" dir="ltr">
2022-07-26 06:40:22 +00:00
<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" />
2024-01-26 14:01:43 +00:00
<title>Simple Note</title>
2022-07-26 06:40:22 +00:00
<!-- 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" />
2024-02-14 04:08:26 +00:00
<link rel="stylesheet" type="text/css" href="./assets/styles/fonts.css" />
<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" />
2024-02-13 11:17:31 +00:00
<link rel="stylesheet" type="text/css" href="./assets/styles/other/print.css" media="print" />
2024-02-13 11:17:31 +00:00
<!-- No JS Fallback -->
<noscript><link rel="stylesheet" type="text/css" href="./assets/styles/other/no-js.css" /></noscript>
2022-07-26 06:40:22 +00:00
</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">
2024-02-07 02:28:11 +00:00
<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>
2024-02-13 11:17:31 +00:00
<!-- No JS Fallback -->
2024-02-14 04:18:46 +00:00
<!--
Use hidden so the list doesn't appear twice when
both CSS and JS are disabled (Unhide in CSS).
-->
<noscript class="noscript__settings" hidden>
2024-02-13 11:17:31 +00:00
<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">
2024-02-13 11:17:31 +00:00
<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>
2024-02-13 11:17:31 +00:00
</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>
2024-02-13 11:17:31 +00:00
<!-- No JS Fallback -->
2024-02-13 15:35:27 +00:00
<noscript class="noscript__message">
2024-02-13 11:17:31 +00:00
<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>
2024-02-14 14:58:17 +00:00
<div class="simple-note__print-helper" aria-hidden="true" tabindex="-1">
<div class="print-helper__title"></div>
<div class="print-helper__body"></div>
</div>
</section>
2024-01-26 14:01:43 +00:00
</main>
2022-07-26 06:40:22 +00:00
2024-02-06 19:31:19 +00:00
<script type="text/javascript" src="./assets/scripts/simple-note.js"></script>
2024-02-06 19:02:34 +00:00
<script type="text/javascript" src="./assets/scripts/settings.js"></script>
2024-02-07 02:28:11 +00:00
<script type="text/javascript" src="./assets/scripts/theme.js"></script>
2022-07-26 06:40:22 +00:00
</body>
</html>