517341c75b
i forgot to commit the changes one by one but this is some of the things i did: changed some .class in html, fixed some bugs, making the whole settings position fixed, added more javascript, and more.
107 lines
No EOL
11 KiB
HTML
107 lines
No EOL
11 KiB
HTML
<!doctype html>
|
|
<html class="--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">
|
|
<title>Simple Note</title>
|
|
|
|
<!-- 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/style.css">
|
|
</head>
|
|
<body class="--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" aria-hidden="true" tabindex="-1">
|
|
<li class="settings__button-item">
|
|
<button class="settings__button settings__button--theme" aria-label="Theme" aria-describedby="settings__button-description--theme" tabindex="-1">
|
|
<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" tabindex="-1">
|
|
<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" tabindex="-1">
|
|
<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-label="Github Repository (New Tab)" rel="noopener" href="https://github.com/westtle/simple-note" target="_blank" tabindex="-1">
|
|
<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>
|
|
</a>
|
|
</li>
|
|
<li class="settings__button-item">
|
|
<a class="settings__button settings__button--westtle" aria-label="westtle's Homepage (New Tab)" rel="noopener" href="https://westtle.github.io" target="_blank" tabindex="-1">
|
|
<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="500" height="500" viewBox="0 0 500 500" xml:space="preserve"><g transform="matrix(1 0 0 1 250 250)">
|
|
<title>westtle's Homepage</title>
|
|
<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" /></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" /></g>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<main class="--flex-column --flex-grow">
|
|
<section class="simple-note --flex-column --flex-grow">
|
|
<h1 class="--sr-only">Simple Note</h1>
|
|
<div class="simple-note__inputs --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>
|
|
</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> |