2022-07-26 06:40:22 +00:00
<!doctype html>
2024-02-07 06:08:26 +00:00
< html class = "--flex-column --flex-grow" data-theme = "light" lang = "en" dir = "ltr" >
2022-07-26 06:40:22 +00:00
< head >
2024-02-07 06:12:02 +00:00
< meta charset = "utf-8" >
2024-02-07 05:03:13 +00:00
< meta name = "author" content = "westtle" >
2024-01-26 14:01:43 +00:00
< meta name = "description" content = "A very simple notepad that you can use." >
< meta name = "keywords" content = "notepad, note, notepad online, simple note, simple notepad" >
2024-02-07 05:03:43 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2024-02-07 05:23:59 +00:00
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
2024-01-26 14:01:43 +00:00
< title > Simple Note< / title >
2022-07-26 06:40:22 +00:00
2024-01-26 14:01:43 +00:00
< link rel = "icon" type = "image/x-icon" href = "#" >
2024-01-27 13:28:20 +00:00
< link rel = "stylesheet" type = "text/css" href = "./assets/styles/style.css" >
2022-07-26 06:40:22 +00:00
< / head >
2024-02-07 06:08:26 +00:00
< body class = "--flex-column --flex-grow" >
2024-02-06 13:38:59 +00:00
< aside class = "settings" >
2024-02-06 16:47:44 +00:00
< 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" >
2024-02-06 13:38:59 +00:00
< svg class = "settings__button-svg" 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 >
< circle cx = "12" cy = "12" r = "3" > < / circle > < path d = "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" > < / path >
< / svg >
2024-02-07 05:52:33 +00:00
< span id = "settings__button-description--toggle-settings" class = "settings__button-description settings__button-description--toggle-settings --sr-only" > Press to open settings.< / span >
2024-02-06 13:38:59 +00:00
< / button >
2024-02-06 16:47:44 +00:00
< ul id = "settings__buttons" class = "settings__buttons" aria-hidden = "true" >
2024-02-06 13:38:59 +00:00
< span class = "settings__separator" aria-hidden = "true" > < / span >
< li class = "settings__button-item" >
2024-02-06 16:47:44 +00:00
< button class = "settings__button settings__button--theme" aria-label = "Theme" aria-describedby = "settings__button-description--theme" tabindex = "-1" >
2024-02-07 02:28:11 +00:00
< svg class = "settings__button-svg settings__button-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" >
2024-02-06 13:38:59 +00:00
< 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 >
2024-02-07 02:28:11 +00:00
< svg class = "settings__button-svg settings__button-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 >
2024-02-07 05:52:33 +00:00
< span id = "settings__button-description--theme" class = "settings__button-description settings__button-description--theme --sr-only" > Press to change to dark theme.< / span >
2024-02-06 13:38:59 +00:00
< / button >
< / li >
< span class = "settings__separator" aria-hidden = "true" > < / span >
< li class = "settings__button-item" >
2024-02-06 16:47:44 +00:00
< button class = "settings__button settings__button--clear" aria-label = "Clear Note" aria-describedby = "settings__button-description--clear" tabindex = "-1" >
2024-02-06 13:38:59 +00:00
< svg class = "settings__button-svg" 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 >
2024-02-07 05:52:33 +00:00
< 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 >
2024-02-06 13:38:59 +00:00
< / button >
< / li >
< li class = "settings__button-item" >
2024-02-06 16:47:44 +00:00
< button class = "settings__button settings__button--download" aria-label = "Download Note" aria-describedby = "settings__button-description--download" tabindex = "-1" >
2024-02-06 13:38:59 +00:00
< svg class = "settings__button-svg" 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 >
2024-02-07 05:52:33 +00:00
< 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 >
2024-02-06 13:38:59 +00:00
< / button >
< / li >
< span class = "settings__separator" aria-hidden = "true" > < / span >
< li class = "settings__button-item" >
2024-02-06 16:55:26 +00:00
< 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" >
2024-02-06 13:38:59 +00:00
< svg class = "settings__button-svg" 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" >
2024-02-06 16:55:26 +00:00
< 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" >
2024-02-07 02:28:11 +00:00
< svg class = "settings__button-svg settings__button-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)" >
2024-02-06 13:38:59 +00:00
< title > westtle's Homepage< / title >
2024-02-07 02:28:11 +00:00
< rect class = "settings__button-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__button-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 >
2024-02-06 13:38:59 +00:00
< / svg >
< / a >
< / li >
< span class = "settings__separator" aria-hidden = "true" > < / span >
< / ul >
< / aside >
2024-02-07 06:08:26 +00:00
< main class = "--flex-column --flex-grow" >
< section class = "simple-note --flex-column --flex-grow" >
2024-02-07 05:52:33 +00:00
< h1 class = "--sr-only" > Simple Note< / h1 >
2024-02-07 06:08:26 +00:00
< div class = "simple-note__inputs --flex-column --flex-grow" >
2024-02-07 05:52:33 +00:00
< label class = "simple-note__label simple-note__label--title --sr-only" for = "simple-note__input--title" > Note Title< / label >
2024-02-05 07:27:24 +00:00
< input id = "simple-note__input--title" class = "simple-note__input simple-note__input--title" type = "text" placeholder = "Title..." spellcheck = "false" >
2024-02-07 05:52:33 +00:00
< label class = "simple-note__label simple-note__label--body --sr-only" for = "simple-note__input--body" > Note Content< / label >
2024-02-07 06:08:26 +00:00
< textarea id = "simple-note__input--body" class = "simple-note__input simple-note__input--body --flex-grow" placeholder = "Your content here..." spellcheck = "false" > < / textarea >
2024-01-26 14:13:57 +00:00
< / 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 >
