179 lines
18 KiB
HTML
179 lines
18 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="https://westtle.github.io/simple-note/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="https://westtle.github.io/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/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" /> -->
|
|
<link rel="stylesheet" type="text/css" href="./assets/styles/style.min.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="./assets/styles/other/print.css" media="print" />
|
|
<noscript><link rel="stylesheet" type="text/css" href="./assets/styles/other/no-js.css" /></noscript> <!-- No JS Fallback -->
|
|
</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 (New Tab)</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 (New Tab)</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 -->
|
|
<!--
|
|
Use hidden so the list doesn't appear twice when
|
|
both CSS and JS are disabled (Unhide in CSS).
|
|
-->
|
|
<noscript class="noscript__settings" hidden>
|
|
<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 (New Tab)</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 (New Tab)</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>
|
|
<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>
|
|
</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> -->
|
|
<script type="text/javascript" src="./assets/scripts/script.min.js"></script>
|
|
</body>
|
|
</html> |