From 1d58835a65bdec24476f454ccd1525ca5e36e904 Mon Sep 17 00:00:00 2001 From: VlastikYoutubeKo Date: Tue, 20 May 2025 21:38:31 +0200 Subject: [PATCH] New version. Add Material UI implementation with theme customization, about dialog, and news system --- README.md | 45 + components-wiki/button.md | 834 +++++ components-wiki/checkbox.md | 210 ++ components-wiki/chip.md | 626 ++++ components-wiki/dialog.md | 262 ++ components-wiki/divider.md | 140 + components-wiki/elevation.md | 125 + components-wiki/fab.md | 522 +++ components-wiki/figures/checkbox/theming.html | 22 + .../figures/checkbox/usage-label.html | 13 + components-wiki/figures/checkbox/usage.html | 9 + .../figures/fab/extended-fabs.html | 25 + components-wiki/figures/fab/fabs.html | 65 + .../figures/fab/theming-branded.html | 33 + .../figures/fab/theming-extended.html | 17 + components-wiki/figures/fab/theming-fab.html | 21 + .../figures/fab/usage-branded-extended.html | 15 + .../figures/fab/usage-branded-sizes.html | 25 + .../figures/fab/usage-branded.html | 15 + components-wiki/figures/fab/usage-color.html | 15 + .../figures/fab/usage-extended.html | 9 + components-wiki/figures/fab/usage-fab.html | 9 + .../figures/fab/usage-lowered.html | 9 + components-wiki/figures/fab/usage-sizes.html | 19 + .../figures/fab/usage-without-icon.html | 7 + .../figures/iconbutton/buttons.html | 66 + .../iconbutton/theming-filled-tonal.html | 20 + .../figures/iconbutton/theming-filled.html | 20 + .../figures/iconbutton/theming-outlined.html | 21 + .../figures/iconbutton/theming-standard.html | 22 + .../iconbutton/usage-filled-tonal.html | 10 + .../figures/iconbutton/usage-filled.html | 10 + .../figures/iconbutton/usage-outlined.html | 10 + .../figures/iconbutton/usage-standard.html | 10 + .../figures/iconbutton/usage-toggle.html | 42 + components-wiki/figures/iconbutton/usage.html | 19 + .../figures/list/theming-icon.html | 39 + .../figures/list/theming-image.html | 35 + .../figures/list/theming-list.html | 42 + components-wiki/figures/list/usage-icon.html | 31 + components-wiki/figures/list/usage-image.html | 22 + components-wiki/figures/list/usage.html | 30 + components-wiki/figures/menu/theming.html | 50 + .../figures/menu/usage-document.html | 30 + components-wiki/figures/menu/usage-fixed.html | 30 + .../figures/menu/usage-popover.html | 30 + .../figures/menu/usage-submenu.html | 63 + components-wiki/figures/menu/usage.html | 58 + .../figures/select/theming-filled.html | 28 + .../figures/select/theming-outlined.html | 34 + components-wiki/figures/select/usage.html | 34 + .../figures/textfield/theming-filled.html | 22 + .../figures/textfield/theming-outlined.html | 18 + .../figures/textfield/usage-char-counter.html | 8 + .../figures/textfield/usage-icons.html | 19 + .../figures/textfield/usage-label.html | 11 + .../figures/textfield/usage-prefix.html | 14 + .../textfield/usage-supporting-text.html | 17 + .../figures/textfield/usage-textarea.html | 13 + .../figures/textfield/usage-type.html | 9 + components-wiki/figures/textfield/usage.html | 9 + components-wiki/focus-ring.md | 174 + components-wiki/icon-button.md | 600 ++++ components-wiki/icon.md | 204 ++ components-wiki/images/button/hero.webp | Bin 0 -> 31698 bytes .../button/theming-elevated-button.webp | Bin 0 -> 1920 bytes .../images/button/theming-filled-button.webp | Bin 0 -> 1168 bytes .../button/theming-filled-tonal-button.webp | Bin 0 -> 848 bytes .../button/theming-outlined-button.webp | Bin 0 -> 1670 bytes .../images/button/theming-text-button.webp | Bin 0 -> 1002 bytes components-wiki/images/button/types.webp | Bin 0 -> 13636 bytes .../images/button/usage-elevated-button.webp | Bin 0 -> 2104 bytes .../images/button/usage-filled-button.webp | Bin 0 -> 1838 bytes .../button/usage-filled-tonal-button.webp | Bin 0 -> 1138 bytes components-wiki/images/button/usage-icon.webp | Bin 0 -> 2804 bytes .../images/button/usage-outlined-button.webp | Bin 0 -> 2346 bytes .../images/button/usage-text-button.webp | Bin 0 -> 864 bytes components-wiki/images/button/usage.webp | Bin 0 -> 4090 bytes components-wiki/images/checkbox/hero.webp | Bin 0 -> 16738 bytes components-wiki/images/checkbox/theming.webp | Bin 0 -> 726 bytes .../images/checkbox/usage-label.webp | Bin 0 -> 4778 bytes components-wiki/images/checkbox/usage.webp | Bin 0 -> 1018 bytes components-wiki/images/chips/hero.webp | Bin 0 -> 45478 bytes components-wiki/images/dialog/hero.webp | Bin 0 -> 30440 bytes components-wiki/images/divider/hero.webp | Bin 0 -> 37554 bytes components-wiki/images/divider/theming.webp | Bin 0 -> 3832 bytes .../images/divider/usage-inset-start.webp | Bin 0 -> 3284 bytes .../images/divider/usage-inset.webp | Bin 0 -> 3282 bytes components-wiki/images/divider/usage.webp | Bin 0 -> 3822 bytes components-wiki/images/elevation/hero.webp | Bin 0 -> 13572 bytes components-wiki/images/elevation/theming.webp | Bin 0 -> 728 bytes .../images/elevation/usage-animation.gif | Bin 0 -> 77787 bytes components-wiki/images/elevation/usage.webp | Bin 0 -> 606 bytes components-wiki/images/fab/extended-fabs.webp | Bin 0 -> 5522 bytes components-wiki/images/fab/fabs.webp | Bin 0 -> 23798 bytes components-wiki/images/fab/hero.webp | Bin 0 -> 36674 bytes components-wiki/images/fab/small-fabs.webp | Bin 0 -> 3752 bytes .../images/fab/theming-branded.webp | Bin 0 -> 2028 bytes .../images/fab/theming-extended.webp | Bin 0 -> 1498 bytes components-wiki/images/fab/theming-fab.webp | Bin 0 -> 792 bytes .../images/fab/usage-branded-extended.webp | Bin 0 -> 2290 bytes .../images/fab/usage-branded-sizes.webp | Bin 0 -> 3728 bytes components-wiki/images/fab/usage-branded.webp | Bin 0 -> 1852 bytes components-wiki/images/fab/usage-color.webp | Bin 0 -> 2906 bytes .../images/fab/usage-extended.webp | Bin 0 -> 1384 bytes components-wiki/images/fab/usage-fab.webp | Bin 0 -> 1892 bytes components-wiki/images/fab/usage-lowered.webp | Bin 0 -> 1770 bytes components-wiki/images/fab/usage-sizes.webp | Bin 0 -> 4914 bytes .../images/fab/usage-without-icon.webp | Bin 0 -> 2992 bytes components-wiki/images/focus/hero.gif | Bin 0 -> 203033 bytes components-wiki/images/focus/theming.gif | Bin 0 -> 76908 bytes .../images/focus/usage-animation.gif | Bin 0 -> 67812 bytes components-wiki/images/focus/usage-inward.gif | Bin 0 -> 42322 bytes components-wiki/images/focus/usage.gif | Bin 0 -> 95976 bytes components-wiki/images/icon/hero.gif | Bin 0 -> 1925516 bytes components-wiki/images/icon/theming.webp | Bin 0 -> 12696 bytes components-wiki/images/icon/usage.webp | Bin 0 -> 1618 bytes components-wiki/images/icon/usage_filled.webp | Bin 0 -> 5424 bytes .../images/icon/usage_rounded.webp | Bin 0 -> 1732 bytes components-wiki/images/icon/usage_sharp.webp | Bin 0 -> 1706 bytes .../images/iconbutton/buttons.webp | Bin 0 -> 7464 bytes components-wiki/images/iconbutton/hero.webp | Bin 0 -> 71942 bytes .../iconbutton/theming-filled-tonal.webp | Bin 0 -> 478 bytes .../images/iconbutton/theming-filled.webp | Bin 0 -> 618 bytes .../images/iconbutton/theming-outlined.webp | Bin 0 -> 610 bytes .../images/iconbutton/theming-standard.webp | Bin 0 -> 326 bytes .../images/iconbutton/usage-filled-tonal.webp | Bin 0 -> 630 bytes .../images/iconbutton/usage-filled.webp | Bin 0 -> 1210 bytes .../images/iconbutton/usage-outlined.webp | Bin 0 -> 1186 bytes .../images/iconbutton/usage-standard.webp | Bin 0 -> 346 bytes .../images/iconbutton/usage-toggle.webp | Bin 0 -> 5280 bytes components-wiki/images/iconbutton/usage.webp | Bin 0 -> 1496 bytes components-wiki/images/list/hero.webp | Bin 0 -> 72626 bytes components-wiki/images/list/theming-icon.webp | Bin 0 -> 4756 bytes .../images/list/theming-image.webp | Bin 0 -> 43698 bytes components-wiki/images/list/theming-list.webp | Bin 0 -> 5080 bytes components-wiki/images/list/usage-icon.webp | Bin 0 -> 2758 bytes components-wiki/images/list/usage-image.webp | Bin 0 -> 28146 bytes components-wiki/images/list/usage.webp | Bin 0 -> 13388 bytes components-wiki/images/menu/hero.webp | Bin 0 -> 298626 bytes components-wiki/images/menu/theming.webp | Bin 0 -> 5222 bytes .../images/menu/usage-document.webp | Bin 0 -> 6650 bytes components-wiki/images/menu/usage-fixed.webp | Bin 0 -> 2656 bytes .../images/menu/usage-popover.webp | Bin 0 -> 6336 bytes .../images/menu/usage-submenu.webp | Bin 0 -> 5376 bytes components-wiki/images/menu/usage.webp | Bin 0 -> 7398 bytes components-wiki/images/progress/hero.webp | Bin 0 -> 7456218 bytes .../images/progress/theming-circular.webp | Bin 0 -> 848 bytes .../images/progress/theming-linear.webp | Bin 0 -> 340 bytes components-wiki/images/radio/hero.webp | Bin 0 -> 13436 bytes components-wiki/images/ripple/hero.gif | Bin 0 -> 173565 bytes components-wiki/images/ripple/theming.gif | Bin 0 -> 63351 bytes .../images/ripple/usage-unbounded.gif | Bin 0 -> 83063 bytes components-wiki/images/ripple/usage.gif | Bin 0 -> 60061 bytes components-wiki/images/select/hero.webp | Bin 0 -> 6736 bytes .../images/select/theming-filled.webp | Bin 0 -> 4722 bytes .../images/select/theming-outlined.webp | Bin 0 -> 4978 bytes components-wiki/images/select/usage.webp | Bin 0 -> 6720 bytes components-wiki/images/slider/hero.webp | Bin 0 -> 25578 bytes components-wiki/images/slider/theming.webp | Bin 0 -> 1346 bytes components-wiki/images/switch/hero.webp | Bin 0 -> 21550 bytes components-wiki/images/tabs/hero.webp | Bin 0 -> 54128 bytes components-wiki/images/tabs/scrollable.webp | Bin 0 -> 3898 bytes components-wiki/images/tabs/theming.webp | Bin 0 -> 2096 bytes components-wiki/images/tabs/usage.webp | Bin 0 -> 3660 bytes components-wiki/images/textfield/hero.webp | Bin 0 -> 18052 bytes .../images/textfield/theming-filled.webp | Bin 0 -> 1022 bytes .../images/textfield/theming-outlined.webp | Bin 0 -> 486 bytes .../images/textfield/usage-char-counter.webp | Bin 0 -> 1350 bytes .../images/textfield/usage-icons.webp | Bin 0 -> 7538 bytes .../images/textfield/usage-label.webp | Bin 0 -> 4516 bytes .../images/textfield/usage-prefix.webp | Bin 0 -> 1800 bytes .../textfield/usage-supporting-text.webp | Bin 0 -> 4174 bytes .../images/textfield/usage-textarea.webp | Bin 0 -> 1640 bytes .../images/textfield/usage-type.webp | Bin 0 -> 2288 bytes components-wiki/images/textfield/usage.webp | Bin 0 -> 2174 bytes components-wiki/list.md | 430 +++ components-wiki/menu.md | 643 ++++ components-wiki/progress.md | 413 +++ components-wiki/radio.md | 210 ++ components-wiki/ripple.md | 252 ++ components-wiki/select.md | 365 +++ components-wiki/slider.md | 217 ++ components-wiki/switch.md | 220 ++ components-wiki/tabs.md | 442 +++ components-wiki/text-field.md | 631 ++++ index-new.html | 2901 +++++++++++++++++ index.html | 583 +++- news.md | 22 + script.js | 5 +- 190 files changed, 12296 insertions(+), 54 deletions(-) create mode 100644 README.md create mode 100644 components-wiki/button.md create mode 100644 components-wiki/checkbox.md create mode 100644 components-wiki/chip.md create mode 100644 components-wiki/dialog.md create mode 100644 components-wiki/divider.md create mode 100644 components-wiki/elevation.md create mode 100644 components-wiki/fab.md create mode 100644 components-wiki/figures/checkbox/theming.html create mode 100644 components-wiki/figures/checkbox/usage-label.html create mode 100644 components-wiki/figures/checkbox/usage.html create mode 100644 components-wiki/figures/fab/extended-fabs.html create mode 100644 components-wiki/figures/fab/fabs.html create mode 100644 components-wiki/figures/fab/theming-branded.html create mode 100644 components-wiki/figures/fab/theming-extended.html create mode 100644 components-wiki/figures/fab/theming-fab.html create mode 100644 components-wiki/figures/fab/usage-branded-extended.html create mode 100644 components-wiki/figures/fab/usage-branded-sizes.html create mode 100644 components-wiki/figures/fab/usage-branded.html create mode 100644 components-wiki/figures/fab/usage-color.html create mode 100644 components-wiki/figures/fab/usage-extended.html create mode 100644 components-wiki/figures/fab/usage-fab.html create mode 100644 components-wiki/figures/fab/usage-lowered.html create mode 100644 components-wiki/figures/fab/usage-sizes.html create mode 100644 components-wiki/figures/fab/usage-without-icon.html create mode 100644 components-wiki/figures/iconbutton/buttons.html create mode 100644 components-wiki/figures/iconbutton/theming-filled-tonal.html create mode 100644 components-wiki/figures/iconbutton/theming-filled.html create mode 100644 components-wiki/figures/iconbutton/theming-outlined.html create mode 100644 components-wiki/figures/iconbutton/theming-standard.html create mode 100644 components-wiki/figures/iconbutton/usage-filled-tonal.html create mode 100644 components-wiki/figures/iconbutton/usage-filled.html create mode 100644 components-wiki/figures/iconbutton/usage-outlined.html create mode 100644 components-wiki/figures/iconbutton/usage-standard.html create mode 100644 components-wiki/figures/iconbutton/usage-toggle.html create mode 100644 components-wiki/figures/iconbutton/usage.html create mode 100644 components-wiki/figures/list/theming-icon.html create mode 100644 components-wiki/figures/list/theming-image.html create mode 100644 components-wiki/figures/list/theming-list.html create mode 100644 components-wiki/figures/list/usage-icon.html create mode 100644 components-wiki/figures/list/usage-image.html create mode 100644 components-wiki/figures/list/usage.html create mode 100644 components-wiki/figures/menu/theming.html create mode 100644 components-wiki/figures/menu/usage-document.html create mode 100644 components-wiki/figures/menu/usage-fixed.html create mode 100644 components-wiki/figures/menu/usage-popover.html create mode 100644 components-wiki/figures/menu/usage-submenu.html create mode 100644 components-wiki/figures/menu/usage.html create mode 100644 components-wiki/figures/select/theming-filled.html create mode 100644 components-wiki/figures/select/theming-outlined.html create mode 100644 components-wiki/figures/select/usage.html create mode 100644 components-wiki/figures/textfield/theming-filled.html create mode 100644 components-wiki/figures/textfield/theming-outlined.html create mode 100644 components-wiki/figures/textfield/usage-char-counter.html create mode 100644 components-wiki/figures/textfield/usage-icons.html create mode 100644 components-wiki/figures/textfield/usage-label.html create mode 100644 components-wiki/figures/textfield/usage-prefix.html create mode 100644 components-wiki/figures/textfield/usage-supporting-text.html create mode 100644 components-wiki/figures/textfield/usage-textarea.html create mode 100644 components-wiki/figures/textfield/usage-type.html create mode 100644 components-wiki/figures/textfield/usage.html create mode 100644 components-wiki/focus-ring.md create mode 100644 components-wiki/icon-button.md create mode 100644 components-wiki/icon.md create mode 100644 components-wiki/images/button/hero.webp create mode 100644 components-wiki/images/button/theming-elevated-button.webp create mode 100644 components-wiki/images/button/theming-filled-button.webp create mode 100644 components-wiki/images/button/theming-filled-tonal-button.webp create mode 100644 components-wiki/images/button/theming-outlined-button.webp create mode 100644 components-wiki/images/button/theming-text-button.webp create mode 100644 components-wiki/images/button/types.webp create mode 100644 components-wiki/images/button/usage-elevated-button.webp create mode 100644 components-wiki/images/button/usage-filled-button.webp create mode 100644 components-wiki/images/button/usage-filled-tonal-button.webp create mode 100644 components-wiki/images/button/usage-icon.webp create mode 100644 components-wiki/images/button/usage-outlined-button.webp create mode 100644 components-wiki/images/button/usage-text-button.webp create mode 100644 components-wiki/images/button/usage.webp create mode 100644 components-wiki/images/checkbox/hero.webp create mode 100644 components-wiki/images/checkbox/theming.webp create mode 100644 components-wiki/images/checkbox/usage-label.webp create mode 100644 components-wiki/images/checkbox/usage.webp create mode 100644 components-wiki/images/chips/hero.webp create mode 100644 components-wiki/images/dialog/hero.webp create mode 100644 components-wiki/images/divider/hero.webp create mode 100644 components-wiki/images/divider/theming.webp create mode 100644 components-wiki/images/divider/usage-inset-start.webp create mode 100644 components-wiki/images/divider/usage-inset.webp create mode 100644 components-wiki/images/divider/usage.webp create mode 100644 components-wiki/images/elevation/hero.webp create mode 100644 components-wiki/images/elevation/theming.webp create mode 100644 components-wiki/images/elevation/usage-animation.gif create mode 100644 components-wiki/images/elevation/usage.webp create mode 100644 components-wiki/images/fab/extended-fabs.webp create mode 100644 components-wiki/images/fab/fabs.webp create mode 100644 components-wiki/images/fab/hero.webp create mode 100644 components-wiki/images/fab/small-fabs.webp create mode 100644 components-wiki/images/fab/theming-branded.webp create mode 100644 components-wiki/images/fab/theming-extended.webp create mode 100644 components-wiki/images/fab/theming-fab.webp create mode 100644 components-wiki/images/fab/usage-branded-extended.webp create mode 100644 components-wiki/images/fab/usage-branded-sizes.webp create mode 100644 components-wiki/images/fab/usage-branded.webp create mode 100644 components-wiki/images/fab/usage-color.webp create mode 100644 components-wiki/images/fab/usage-extended.webp create mode 100644 components-wiki/images/fab/usage-fab.webp create mode 100644 components-wiki/images/fab/usage-lowered.webp create mode 100644 components-wiki/images/fab/usage-sizes.webp create mode 100644 components-wiki/images/fab/usage-without-icon.webp create mode 100644 components-wiki/images/focus/hero.gif create mode 100644 components-wiki/images/focus/theming.gif create mode 100644 components-wiki/images/focus/usage-animation.gif create mode 100644 components-wiki/images/focus/usage-inward.gif create mode 100644 components-wiki/images/focus/usage.gif create mode 100644 components-wiki/images/icon/hero.gif create mode 100644 components-wiki/images/icon/theming.webp create mode 100644 components-wiki/images/icon/usage.webp create mode 100644 components-wiki/images/icon/usage_filled.webp create mode 100644 components-wiki/images/icon/usage_rounded.webp create mode 100644 components-wiki/images/icon/usage_sharp.webp create mode 100644 components-wiki/images/iconbutton/buttons.webp create mode 100644 components-wiki/images/iconbutton/hero.webp create mode 100644 components-wiki/images/iconbutton/theming-filled-tonal.webp create mode 100644 components-wiki/images/iconbutton/theming-filled.webp create mode 100644 components-wiki/images/iconbutton/theming-outlined.webp create mode 100644 components-wiki/images/iconbutton/theming-standard.webp create mode 100644 components-wiki/images/iconbutton/usage-filled-tonal.webp create mode 100644 components-wiki/images/iconbutton/usage-filled.webp create mode 100644 components-wiki/images/iconbutton/usage-outlined.webp create mode 100644 components-wiki/images/iconbutton/usage-standard.webp create mode 100644 components-wiki/images/iconbutton/usage-toggle.webp create mode 100644 components-wiki/images/iconbutton/usage.webp create mode 100644 components-wiki/images/list/hero.webp create mode 100644 components-wiki/images/list/theming-icon.webp create mode 100644 components-wiki/images/list/theming-image.webp create mode 100644 components-wiki/images/list/theming-list.webp create mode 100644 components-wiki/images/list/usage-icon.webp create mode 100644 components-wiki/images/list/usage-image.webp create mode 100644 components-wiki/images/list/usage.webp create mode 100644 components-wiki/images/menu/hero.webp create mode 100644 components-wiki/images/menu/theming.webp create mode 100644 components-wiki/images/menu/usage-document.webp create mode 100644 components-wiki/images/menu/usage-fixed.webp create mode 100644 components-wiki/images/menu/usage-popover.webp create mode 100644 components-wiki/images/menu/usage-submenu.webp create mode 100644 components-wiki/images/menu/usage.webp create mode 100644 components-wiki/images/progress/hero.webp create mode 100644 components-wiki/images/progress/theming-circular.webp create mode 100644 components-wiki/images/progress/theming-linear.webp create mode 100644 components-wiki/images/radio/hero.webp create mode 100644 components-wiki/images/ripple/hero.gif create mode 100644 components-wiki/images/ripple/theming.gif create mode 100644 components-wiki/images/ripple/usage-unbounded.gif create mode 100644 components-wiki/images/ripple/usage.gif create mode 100644 components-wiki/images/select/hero.webp create mode 100644 components-wiki/images/select/theming-filled.webp create mode 100644 components-wiki/images/select/theming-outlined.webp create mode 100644 components-wiki/images/select/usage.webp create mode 100644 components-wiki/images/slider/hero.webp create mode 100644 components-wiki/images/slider/theming.webp create mode 100644 components-wiki/images/switch/hero.webp create mode 100644 components-wiki/images/tabs/hero.webp create mode 100644 components-wiki/images/tabs/scrollable.webp create mode 100644 components-wiki/images/tabs/theming.webp create mode 100644 components-wiki/images/tabs/usage.webp create mode 100644 components-wiki/images/textfield/hero.webp create mode 100644 components-wiki/images/textfield/theming-filled.webp create mode 100644 components-wiki/images/textfield/theming-outlined.webp create mode 100644 components-wiki/images/textfield/usage-char-counter.webp create mode 100644 components-wiki/images/textfield/usage-icons.webp create mode 100644 components-wiki/images/textfield/usage-label.webp create mode 100644 components-wiki/images/textfield/usage-prefix.webp create mode 100644 components-wiki/images/textfield/usage-supporting-text.webp create mode 100644 components-wiki/images/textfield/usage-textarea.webp create mode 100644 components-wiki/images/textfield/usage-type.webp create mode 100644 components-wiki/images/textfield/usage.webp create mode 100644 components-wiki/list.md create mode 100644 components-wiki/menu.md create mode 100644 components-wiki/progress.md create mode 100644 components-wiki/radio.md create mode 100644 components-wiki/ripple.md create mode 100644 components-wiki/select.md create mode 100644 components-wiki/slider.md create mode 100644 components-wiki/switch.md create mode 100644 components-wiki/tabs.md create mode 100644 components-wiki/text-field.md create mode 100644 index-new.html create mode 100644 news.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..a2212e8 --- /dev/null +++ b/README.md @@ -0,0 +1,45 @@ +# MNotes + +A modern Markdown note-taking application with Material Design 3 styling. MNotes allows you to create, edit, and organize your notes with a clean and intuitive interface. + +## Features + +- **Markdown Support**: Write notes using Markdown syntax with real-time preview +- **Material Design 3**: Beautiful and responsive UI following Material Design principles +- **Theme Customization**: Choose between light, dark, and sepia themes with customizable primary colors +- **GitHub Integration**: Save your notes directly to GitHub repositories +- **Local Storage**: Notes are automatically saved to your browser's local storage +- **Search Functionality**: Quickly find notes using the built-in search +- **Keyboard Shortcuts**: Boost your productivity with keyboard shortcuts +- **Auto-save**: Never lose your work with automatic saving +- **Export**: Download your notes as Markdown files + +## Getting Started + +Simply open the `index.html` file in your web browser to start using MNotes. No installation or server required! + +## Keyboard Shortcuts + +- `Ctrl+S` / `Cmd+S`: Save current note +- `Ctrl+P` / `Cmd+P`: Toggle markdown preview +- `Ctrl+B` / `Cmd+B`: Bold text +- `Ctrl+I` / `Cmd+I`: Italic text + +## Technology + +MNotes is built using pure HTML, CSS, and JavaScript, with no framework dependencies. It utilizes the Material Web Components library for UI elements. + +## Credits + +- **Jakub Ruzicka / korozelife** ([@thejakubruzicka](https://github.com/thejakubruzicka)) - Main idea +- **mxnticek** ([@VlastikYoutubeKo](https://github.com/VlastikYoutubeKo)) - Adding some features +- **Gemini AI** (Google AI) - Rough example of the app +- **Claude AI** - Finishing touches of the app + +## License + +This project is open source and available under the MIT License. + +## Version + +Current version: 1.0.0 \ No newline at end of file diff --git a/components-wiki/button.md b/components-wiki/button.md new file mode 100644 index 0000000..f11f9fe --- /dev/null +++ b/components-wiki/button.md @@ -0,0 +1,834 @@ + + + + + +# Buttons + + + + + + + + + + +**This documentation is fully rendered on the +[Material Web catalog](https://material-web.dev/components/button/).** + + + + +[Buttons](https://m3.material.io/components/buttons) help people +initiate actions, from sending an email, to sharing a document, to liking a +post. + +There are five types of common buttons: elevated, filled, filled tonal, +outlined, and text. + + + +A phone showing a payment screen with a green filled button that says 'Make
+payment' + + + +* [Design article](https://m3.material.io/components/buttons) +* [API Documentation](#api) +* [Source code](https://github.com/material-components/material-web/tree/main/button) + + + + + + + + +## Types + + + +![The 5 types of common buttons](images/button/types.webp "Elevated, filled, filled tonal, outlined, and text buttons") + + + + + + + + +1. [Elevated button](#elevated-button) +1. [Filled button](#filled-button) +1. [Filled tonal button](#filled-tonal-button) +1. [Outlined button](#outlined-button) +1. [Text button](#text-button) + +## Usage + +Buttons have label text that describes the action that will occur if a user taps +a button. + + + +![An outlined button with the text "Back" next to a filled button with the text +"Complete"](images/button/usage.webp "Outlined and filled buttons.") + + + + + + + + +```html +Back +Complete +``` + +### Icon + +An icon may optionally be added to a button to help communicate the button's +action and help draw attention. + + + +![A tonal button with a right arrow send icon with text 'send' and a text button +with the text 'open' with a trailing icon arrow +box](images/button/usage-icon.webp "Slot in icons to the appropriate slots") + + + + + + + + +```html + + Send + + + + + Open + + +``` + +## Accessibility + +Add an +[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) +attribute to buttons whose labels need a more descriptive label. + +```html +Add +``` + +### Focusable and disabled + +By default, disabled buttons are not focusable with the keyboard, while +"soft-disabled" buttons are. Some use cases encourage focusability of disabled +toolbar items to increase their discoverability. + +See the +[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls) +for guidance on when this is recommended. + +```html +
+ Copy + Cut + + Paste +
+``` + +## Elevated button + + + +[Elevated buttons](https://m3.material.io/components/buttons/guidelines#4e89da4d-a8fa-4e20-bb8d-b8a93eff3e3e) +are essentially filled tonal buttons with a shadow. To prevent shadow creep, +only use them when absolutely necessary, such as when the button requires visual +separation from a patterned background. + + + +![An elevated button](images/button/usage-elevated-button.webp) + + + + + + + + +```html +Elevated +``` + +## Filled button + + + +[Filled buttons](https://m3.material.io/components/buttons/guidelines#9ecffdb3-ef29-47e7-8d5d-f78b404fcafe) +have the most visual impact after the FAB, and should be used for important, +final actions that complete a flow, like Save, Join now, or Confirm. + + + + + + + + +```html +Filled +``` + +## Filled tonal button + + + +A +[filled tonal button](https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b) +is an alternative middle ground between filled and outlined buttons. They're +useful in contexts where a lower-priority button requires slightly more emphasis +than an outline would give, such as "Next" in an onboarding flow. + + + +![A filled tonal button](images/button/usage-filled-tonal-button.webp) + + + + + + + + +```html +Tonal +``` + +## Outlined button + + + +[Outlined buttons](https://m3.material.io/components/buttons/guidelines#3742b09f-c224-43e0-a83e-541bd29d0f05) +are medium-emphasis buttons. They contain actions that are important, but aren’t +the primary action in an app. + + + +![An outlined button](images/button/usage-outlined-button.webp) + + + + + + + + +```html +Outlined +``` + +## Text button + + + +[Text buttons](https://m3.material.io/components/buttons/guidelines#c9bcbc0b-ee05-45ad-8e80-e814ae919fbb) +are used for the lowest priority actions, especially when presenting multiple +options. + + + +![A text button](images/button/usage-text-button.webp) + + + + + + + + +```html +Text +``` + +## Theming + +Button supports [Material theming](../theming/README.md) and can be customized +in terms of color, typography, and shape. + +### Elevated button tokens + +Token | Default value +--------------------------------------- | ------------------------------------- +`--md-elevated-button-container-color` | `--md-sys-color-surface` +`--md-elevated-button-container-shape` | `--md-sys-shape-corner-full` +`--md-elevated-button-label-text-color` | `--md-sys-color-on-surface` +`--md-elevated-button-label-text-font` | `--md-sys-typescale-label-large-font` + +* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevated-button.scss) + + +### Elevated button example + + + +![Image of an elevated button with a different theme applied](images/button/theming-elevated-button.webp "Elevated button theming example.") + + + + + + + + +```html + + +Elevated +``` + +### Filled button tokens + +Token | Default value +------------------------------------- | ------------------------------------- +`--md-filled-button-container-color` | `--md-sys-color-primary` +`--md-filled-button-container-shape` | `--md-sys-shape-corner-full` +`--md-filled-button-label-text-color` | `--md-sys-color-on-primary` +`--md-filled-button-label-text-font` | `--md-sys-typescale-label-large-font` + +* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-button.scss) + + +### Filled button example + + + +![Image of a filled button with a different theme applied](images/button/theming-filled-button.webp "Filled button theming example.") + + + + + + + + +```html + + +Filled +``` + +### Filled tonal button tokens + +Token | Default value +------------------------------------------- | ------------- +`--md-filled-tonal-button-container-color` | `--md-sys-color-secondary-container` +`--md-filled-tonal-button-container-shape` | `--md-sys-shape-corner-full` +`--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container` +`--md-filled-tonal-button-label-text-font` | `--md-sys-typescale-label-large-font` + +* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss) + + +### Filled tonal button example + + + +![Image of a filled tonal button with a different theme applied](images/button/theming-filled-tonal-button.webp "Filled tonal button theming example.") + + + + + + + + +```html + + +Tonal +``` + +### Outlined button tokens + +Token | Default value +--------------------------------------- | ------------------------------------- +`--md-outlined-button-outline-color` | `--md-sys-color-outline` +`--md-outlined-button-container-shape` | `--md-sys-shape-corner-full` +`--md-outlined-button-label-text-color` | `--md-sys-color-primary` +`--md-outlined-button-label-text-font` | `--md-sys-typescale-label-large-font` + +* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss) + + +### Outlined button example + + + +![Image of an outlined button with a different theme applied](images/button/theming-outlined-button.webp "Outlined button theming example.") + + + + + + + + +```html + + +Outlined +``` + +### Text button tokens + +Token | Default value +----------------------------------- | ------------------------------------- +`--md-text-button-label-text-color` | `--md-sys-color-primary` +`--md-text-button-label-text-font` | `--md-sys-typescale-label-large-font` + +* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-text-button.scss) + + +### Text button example + + + +![Image of a text button with a different theme applied](images/button/theming-text-button.webp "Text button theming example.") + + + + + + + + +```html + + +Text +``` + + + +## API + + +### MdElevatedButton <md-elevated-button> + +#### Properties + + + +| Property | Attribute | Type | Default | Description | +| --- | --- | --- | --- | --- | +| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | +| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | +| `href` | `href` | `string` | `''` | The URL that the link button points to. | +| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | +| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | +| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | +| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | +| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | +| `name` | | `string` | `undefined` | | +| `form` | | `HTMLFormElement` | `undefined` | | + + + +### MdFilledButton <md-filled-button> + +#### Properties + + + +| Property | Attribute | Type | Default | Description | +| --- | --- | --- | --- | --- | +| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | +| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | +| `href` | `href` | `string` | `''` | The URL that the link button points to. | +| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | +| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | +| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | +| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | +| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | +| `name` | | `string` | `undefined` | | +| `form` | | `HTMLFormElement` | `undefined` | | + + + +### MdFilledTonalButton <md-filled-tonal-button> + +#### Properties + + + +| Property | Attribute | Type | Default | Description | +| --- | --- | --- | --- | --- | +| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | +| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | +| `href` | `href` | `string` | `''` | The URL that the link button points to. | +| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | +| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | +| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | +| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | +| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | +| `name` | | `string` | `undefined` | | +| `form` | | `HTMLFormElement` | `undefined` | | + + + +### MdOutlinedButton <md-outlined-button> + +#### Properties + + + +| Property | Attribute | Type | Default | Description | +| --- | --- | --- | --- | --- | +| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | +| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | +| `href` | `href` | `string` | `''` | The URL that the link button points to. | +| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | +| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | +| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | +| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | +| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | +| `name` | | `string` | `undefined` | | +| `form` | | `HTMLFormElement` | `undefined` | | + + + +### MdTextButton <md-text-button> + +#### Properties + + + +| Property | Attribute | Type | Default | Description | +| --- | --- | --- | --- | --- | +| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | +| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | +| `href` | `href` | `string` | `''` | The URL that the link button points to. | +| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | +| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | +| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | +| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | +| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | +| `name` | | `string` | `undefined` | | +| `form` | | `HTMLFormElement` | `undefined` | | + + + + diff --git a/components-wiki/checkbox.md b/components-wiki/checkbox.md new file mode 100644 index 0000000..4bc35ae --- /dev/null +++ b/components-wiki/checkbox.md @@ -0,0 +1,210 @@ + + + + + +# Checkbox + + + + + + + + + + +**This documentation is fully rendered on the +[Material Web catalog](https://material-web.dev/components/checkbox/).** + + + + +[Checkboxes](https://m3.material.io/components/checkbox) allow users +to select one or more items from a set. Checkboxes can turn an option on or off. + +There's one type of checkbox in Material. Use this selection control when the +user needs to select one or more options from a list. + + + +A list of burger additions represented with checkboxes + + + +* [Design article](https://m3.material.io/components/checkbox) +* [API Documentation](#api) +* [Source code](https://github.com/material-components/material-web/tree/main/checkbox) + + + + + + + + +## Usage + +Checkboxes may be standalone, pre-checked, or indeterminate. + + + +![Three checkboxes in a row that are unselected, selected, and indeterminate](images/checkbox/usage.webp "Unselected, selected, and indeterminate checkboxes.") + + + + +```html + + + +``` + +### Label + +Associate a label with a checkbox using the `