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 `