diff --git a/css/style.css b/css/style.css index 35160b7..1ebc2d5 100644 --- a/css/style.css +++ b/css/style.css @@ -558,18 +558,10 @@ video { .border-solid { border-style: solid; } -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} .border-slate-600 { --tw-border-opacity: 1; border-color: rgb(71 85 105 / var(--tw-border-opacity)); } -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} .bg-pink-600 { --tw-bg-opacity: 1; background-color: rgb(219 39 119 / var(--tw-bg-opacity)); @@ -635,10 +627,6 @@ video { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); } -.text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} .text-neutral-50 { --tw-text-opacity: 1; color: rgb(250 250 250 / var(--tw-text-opacity)); @@ -680,37 +668,434 @@ input[type="number"]::-webkit-inner-spin-button { margin: 0; } +.body { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} -.hover\:opacity-70:hover { +.body.darkmode { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +.btn-mode { + position: fixed; + bottom: 0.75rem; + right: 0.75rem; + cursor: pointer; + user-select: none; + font-size: 1.875rem; + line-height: 2.25rem; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.btn-mode:hover { opacity: 0.7; } +.btn-mode:active { + --tw-translate-y: 0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.wrapper { + margin-left: auto; + margin-right: auto; + margin-bottom: 2.5rem; + margin-top: 2.5rem; + max-width: 36rem; + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.site-title { + font-size: 1.875rem; + line-height: 2.25rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(219 39 119 / var(--tw-text-opacity)); +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.btn-reset { + display: block; + width: 25%; + user-select: none; + border-radius: 0.375rem; + border-width: 2px; + border-style: solid; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + padding-left: 0.25rem; + padding-right: 0.25rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 1.125rem; + line-height: 1.75rem; + letter-spacing: 0.1em; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.btn-reset:hover { + opacity: 0.7; +} + +.btn-reset:active { + --tw-translate-y: 0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.btn-reset.darkmode { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); +} + +.form-wrapper { + margin-top: 2rem; + + label { + margin-top: 1.25rem; + } + + label { + display: block; + } + + .item-title { + font-size: 1.125rem; + line-height: 1.75rem; + } + + .item-title { + font-weight: 700; + } + + input, + select { + margin-top: 0.5rem; + } + + input, + select { + display: block; + } + + input, + select { + width: 100%; + } + + input, + select { + border-radius: 0.375rem; + } + + input, + select { + border-width: 2px; + } + + input, + select { + border-style: solid; + } + + input, + select { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + input, + select { + padding-top: 0.25rem; + padding-bottom: 0.25rem; + } + + .input-textarea { + margin-top: 0.5rem; + } + + .input-textarea { + display: block; + } + + .input-textarea { + width: 100%; + } + + .input-textarea { + resize: none; + } + + .input-textarea { + border-radius: 0.375rem; + } + + .input-textarea { + border-width: 2px; + } + + .input-textarea { + border-style: solid; + } + + .input-textarea { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .input-textarea { + padding-top: 0.25rem; + padding-bottom: 0.25rem; + } + + input.darkmode, + select.darkmode, + .input-textarea.darkmode { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity)); + } + + input.darkmode, + select.darkmode, + .input-textarea.darkmode { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); + } + + .output-textarea { + margin-top: 0.5rem; + } + + .output-textarea { + display: block; + } + + .output-textarea { + width: 100%; + } + + .output-textarea { + resize: none; + } + + .output-textarea { + border-radius: 0.375rem; + } + + .output-textarea { + border-width: 2px; + } + + .output-textarea { + border-style: solid; + } + + .output-textarea { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + } + + .output-textarea { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .output-textarea { + padding-top: 0.25rem; + padding-bottom: 0.25rem; + } + + .output-textarea.darkmode { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity)); + } + + .output-textarea.darkmode { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity)); + } + + .description { + margin-top: 0.5rem; + } + + .description { + font-size: 0.875rem; + line-height: 1.25rem; + } + + .description { + opacity: 0.6; + } +} + +.button-wrapper { + display: flex; + gap: 1rem; + + .button { + margin-top: 1.25rem; + } + + .button { + display: block; + } + + .button { + width: 100%; + } + + .button { + user-select: none; + } + + .button { + border-radius: 0.375rem; + } + + .button { + padding-left: 0.25rem; + padding-right: 0.25rem; + } + + .button { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + .button { + font-size: 1.125rem; + line-height: 1.75rem; + } + + .button { + letter-spacing: 0.1em; + } + + .button { + --tw-text-opacity: 1; + color: rgb(250 250 250 / var(--tw-text-opacity)); + } + + .button { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .button { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + + .button:hover { + opacity: 0.7; + } + + .button:active { + --tw-translate-y: 0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + + .button:active { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .button--pink { + --tw-bg-opacity: 1; + background-color: rgb(219 39 119 / var(--tw-bg-opacity)); + } + + .button--pink { + --tw-shadow-color: rgb(219 39 119 / 0.5); + --tw-shadow: var(--tw-shadow-colored); + } + + .button--pink:active { + --tw-shadow-color: rgb(219 39 119 / 0.5); + --tw-shadow: var(--tw-shadow-colored); + } + + .button--purple { + --tw-bg-opacity: 1; + background-color: rgb(147 51 234 / var(--tw-bg-opacity)); + } + + .button--purple { + --tw-shadow-color: rgb(147 51 234 / 0.5); + --tw-shadow: var(--tw-shadow-colored); + } + + .button--purple:active { + --tw-shadow-color: rgb(147 51 234 / 0.5); + --tw-shadow: var(--tw-shadow-colored); + } +} + +.footer { + margin-top: 2rem; + + .copyright { + font-size: 0.875rem; + line-height: 1.25rem; + } + + a { + --tw-text-opacity: 1; + color: rgb(190 24 93 / var(--tw-text-opacity)); + } +} + +.hover\:opacity-70:hover { + opacity: 0.7; +} .active\:translate-y-0:active { --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } - .active\:translate-y-0\.5:active { --tw-translate-y: 0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } - .active\:shadow-md:active { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .active\:shadow-pink-600\/50:active { --tw-shadow-color: rgb(219 39 119 / 0.5); --tw-shadow: var(--tw-shadow-colored); } - .active\:shadow-purple-600\/50:active { --tw-shadow-color: rgb(147 51 234 / 0.5); --tw-shadow: var(--tw-shadow-colored); diff --git a/css/styls.css b/css/styls.css deleted file mode 100644 index 6c56dfa..0000000 --- a/css/styls.css +++ /dev/null @@ -1,679 +0,0 @@ -/* -! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com -*//* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ - font-feature-settings: normal; /* 5 */ - font-variation-settings: normal; /* 6 */ - -webkit-tap-highlight-color: transparent; /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; /* 1 */ - line-height: inherit; /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ - border-top-width: 1px; /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-feature-settings: normal; /* 2 */ - font-variation-settings: normal; /* 3 */ - font-size: 1em; /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ - border-collapse: collapse; /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-feature-settings: inherit; /* 1 */ - font-variation-settings: inherit; /* 1 */ - font-size: 100%; /* 1 */ - font-weight: inherit; /* 1 */ - line-height: inherit; /* 1 */ - color: inherit; /* 1 */ - margin: 0; /* 2 */ - padding: 0; /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; /* 1 */ - background-color: transparent; /* 2 */ - background-image: none; /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::placeholder, -textarea::placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; /* 1 */ - vertical-align: middle; /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} -.mx-auto { - margin-left: auto; - margin-right: auto; -} -.mb-10 { - margin-bottom: 2.5rem; -} -.mt-10 { - margin-top: 2.5rem; -} -.mt-2 { - margin-top: 0.5rem; -} -.mt-5 { - margin-top: 1.25rem; -} -.mt-8 { - margin-top: 2rem; -} -.block { - display: block; -} -.flex { - display: flex; -} -.w-1\/4 { - width: 25%; -} -.w-full { - width: 100%; -} -.max-w-xl { - max-width: 36rem; -} -.resize-none { - resize: none; -} -.items-center { - align-items: center; -} -.justify-between { - justify-content: space-between; -} -.gap-4 { - gap: 1rem; -} -.rounded-md { - border-radius: 0.375rem; -} -.border-2 { - border-width: 2px; -} -.border-solid { - border-style: solid; -} -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} -.bg-pink-600 { - --tw-bg-opacity: 1; - background-color: rgb(219 39 119 / var(--tw-bg-opacity)); -} -.bg-purple-600 { - --tw-bg-opacity: 1; - background-color: rgb(147 51 234 / var(--tw-bg-opacity)); -} -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; -} -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} -.px-5 { - padding-left: 1.25rem; - padding-right: 1.25rem; -} -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} -.font-mono { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} -.font-bold { - font-weight: 700; -} -.tracking-widest { - letter-spacing: 0.1em; -} -.text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} -.text-neutral-50 { - --tw-text-opacity: 1; - color: rgb(250 250 250 / var(--tw-text-opacity)); -} -.text-pink-600 { - --tw-text-opacity: 1; - color: rgb(219 39 119 / var(--tw-text-opacity)); -} -.text-pink-700 { - --tw-text-opacity: 1; - color: rgb(190 24 93 / var(--tw-text-opacity)); -} -.opacity-60 { - opacity: 0.6; -} -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} -.shadow-pink-600\/50 { - --tw-shadow-color: rgb(219 39 119 / 0.5); - --tw-shadow: var(--tw-shadow-colored); -} -.shadow-purple-600\/50 { - --tw-shadow-color: rgb(147 51 234 / 0.5); - --tw-shadow: var(--tw-shadow-colored); -} -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - - -input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - - -.hover\:opacity-70:hover { - opacity: 0.7; -} - - -.active\:translate-y-0:active { - --tw-translate-y: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - - -.active\:translate-y-0\.5:active { - --tw-translate-y: 0.125rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - - -.active\:shadow-md:active { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - - -.active\:shadow-pink-600\/50:active { - --tw-shadow-color: rgb(219 39 119 / 0.5); - --tw-shadow: var(--tw-shadow-colored); -} - - -.active\:shadow-purple-600\/50:active { - --tw-shadow-color: rgb(147 51 234 / 0.5); - --tw-shadow: var(--tw-shadow-colored); -} \ No newline at end of file diff --git a/data/data.json b/data/data.json new file mode 100644 index 0000000..e0260c1 --- /dev/null +++ b/data/data.json @@ -0,0 +1,151 @@ +[ + { + "id": "0", + "prefixType": "normal", + "icon": "🐢", + "displayName": "NORMAL", + "htmlClassName": "normalPrefixList", + "prefix": [ + { + "id": "0", + "constant": "normal-feature", + "prefixIcon": "💕", + "prefixText": "FEAT", + "description": "メソッド、条件分岐、改良、ファイル追加した時" + }, + { + "id": "1", + "constant": "normal-refactor", + "prefixIcon": "🫶", + "prefixText": "REFACTOR", + "description": "機能を変えずにコードを書き換えた時" + }, + { + "id": "2", + "constant": "normal-docs", + "prefixIcon": "📝", + "prefixText": "DOCS", + "description": "コードに関係ない、影響がない時" + }, + { + "id": "3", + "constant": "normal-fix", + "prefixIcon": "🐝", + "prefixText": "FIX", + "description": "不具合の修正" + }, + { + "id": "4", + "constant": "normal-release", + "prefixIcon": "🚀", + "prefixText": "RELEASE", + "description": "Version 1.0.0" + }, + { + "id": "5", + "constant": "normal-newProject", + "prefixIcon": "🎉", + "prefixText": "NEW", + "description": "BEGIN NEW PROJECT" + } + ] + }, + { + "id": "1", + "prefixType": "til", + "icon": "📝", + "displayName": "DAILY REPORTS", + "htmlClassName": "TILPrefixList", + "prefix": [ + { + "id": "0", + "constant": "til-update", + "prefixIcon": "📚", + "prefixText": "UPDATE", + "description": "DAILY REPORT 231201", + "option": "tilDateSet" + } + ] + }, + { + "id": "2", + "prefixType": "practice", + "icon": "🏄🏻‍♀️", + "displayName": "PRACTICE PROJECT", + "htmlClassName": "practiceProjectPrefixList", + "prefix": [ + { + "id": "0", + "constant": "practice-add", + "prefixIcon": "📖", + "prefixText": "ADD", + "description": "ファイル、学んだことの追加" + } + ] + }, + { + "id": "3", + "prefixType": "paiza", + "icon": "📓", + "displayName": "PAIZA", + "htmlClassName": "paizaPrefixList", + "prefix": [ + { + "id": "0", + "constant": "paiza-string_primer", + "prefixIcon": "Cランク獲得", + "prefixText": "文字列処理", + "description": "取り組んだ問題" + }, + { + "id": "1", + "constant": "paiza-array_primer", + "prefixIcon": "Cランク獲得", + "prefixText": "配列メニュー", + "description": "取り組んだ問題" + }, + { + "id": "2", + "constant": "paiza-array_utilization_primer", + "prefixIcon": "Cランク獲得", + "prefixText": "配列活用メニュー", + "description": "取り組んだ問題" + }, + { + "id": "3", + "constant": "paiza-conditions_branch", + "prefixIcon": "Cランク獲得", + "prefixText": "条件分岐メニュー", + "description": "取り組んだ問題" + }, + { + "id": "4", + "constant": "paiza-loop_problems", + "prefixIcon": "Cランク獲得", + "prefixText": "ループメニュー1", + "description": "取り組んだ問題" + }, + { + "id": "5", + "constant": "paiza-loop_problems2", + "prefixIcon": "Cランク獲得", + "prefixText": "ループメニュー2", + "description": "取り組んだ問題" + }, + { + "id": "6", + "constant": "paiza-double_loop_problems", + "prefixIcon": "Cランク獲得", + "prefixText": "二重ループメニュー", + "description": "取り組んだ問題" + }, + { + "id": "7", + "constant": "paiza-c_rank_level_up_problems", + "prefixIcon": "Cランク獲得", + "prefixText": "Cランクレベルアップメニュー", + "description": "取り組んだ問題" + } + ] + } +] \ No newline at end of file diff --git a/index.html b/index.html index 5e14eca..79a4efd 100644 --- a/index.html +++ b/index.html @@ -5,98 +5,77 @@ Commit Easily - - + -
+
🌞
-
-
-

Commit Easily

- - -
+ -
+
- -
-
- - 𝕔 Commit Easily by - Aileen +
+ + 𝕔 Commit Easily by Aileen
diff --git a/js/main.js b/js/main.js index 79e4754..e61111f 100644 --- a/js/main.js +++ b/js/main.js @@ -1,29 +1,170 @@ 'use strict'; { - - /************************************************************ - プロジェクトを追加したい時 - - HTMLでTYPEのoptionを追加 - - class Prefixでインスタンスを作成 - - プロジェクトのPREFIX LISTを作成 - - class TypeのgetType()で配列を返す - 以上で完了！ - ************************************************************/ - - /************************************************************ - CLASS DATA - コミットメッセージとして出力されるインスタンスを作る（最終データ） - ************************************************************/ - - class Data { - constructor(prefixIcon, prefixName, subject, comment, issue) { - this.prefixIcon = prefixIcon; - this.prefixName = prefixName; - this.subject = subject; - this.comment = comment; - this.issue = issue; + + /* + TYPEとPREFIXを追加したい場合はdata/data.jsonを追加すること + */ + + class JsonData { + constructor(url) { + this.url = url; + this.data = null; + this.dataPromise = null; } - + + loadData() { + if (!this.dataPromise) { + this.dataPromise = fetch(this.url).then(response => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }).then(data => { + this.data = data; + return data; + }) + } + return this.dataPromise; + } + + async getData() { + if (!this.data) { + await this.loadData(); + } + return this.data; + } + + async getAllData() { + const data = await this.getData(); + // console.log(data); + return this.data; + } + + async getPrefixType() { + const data = await this.getData(); + data.map((data) => { + console.log(data); + return data; + }) + } + } + + class CreateHTMLDOM { + constructor(data) { + this.data = data; + } + + createTypeOptions() { + const typeDOM = document.getElementById("type"); + for (let i = 0; i < this.data.length; i++) { + const { displayName, icon, htmlClassName, prefixType, id } = this.data[i]; + const option = document.createElement("option"); + option.value = prefixType; + option.textContent = icon + " " + displayName; + if (i === 0) { + option.selected = true; + } + typeDOM.appendChild(option); + } + } + + createPrefix() { + this.clearCurrentPrefix(); + const prefixDOM = document.getElementById("prefix"); + const typeDOM = document.getElementById("type"); + const typeNumber = typeDOM.selectedIndex; + const prefixData = this.data[typeNumber].prefix; + console.log(prefixData); + + for (let i = 0; i < prefixData.length; i++) { + const { id, prefixIcon, prefixText, description, constant } = prefixData[i]; + const option = document.createElement("option"); + option.value = constant; + option.textContent = `${prefixIcon} ${prefixText}: ${description}`; + if (i === 0) { + option.selected = true; + } + prefixDOM.appendChild(option); + } + } + + clearCurrentPrefix() { + const prefixDOM = document.getElementById("prefix"); + while (prefixDOM.firstChild) { + prefixDOM.removeChild(prefixDOM.firstChild); + } + } + } + + + class SetSpecificSubject { + constructor(prefixValue) { + this.prefixValue = prefixValue; + this.subjectDOM = document.getElementById("subject"); + } + + getprefixValue() { + return this.prefixValue; + } + + checkType() { + console.log(this.prefixValue); + const setTilUpdate = this.prefixValue === "til-update" ? this.setText(this.tilUpdate()) : ""; + const normalNewProject = this.prefixValue === "normal-newProject" ? this.setText(this.normalNewProject()) : ""; + const normalNew = this.prefixValue === "normal-release" ? this.setText(this.normalRelease()) : ""; + } + + setText(text) { + this.subjectDOM.value = text; + } + + tilUpdate() { + const day = new Date(); + const text = `DAILY REPORT ${day.getFullYear() - 2000}${String(day.getMonth() + 1).padStart(2, "0")}${String(day.getDate()).padStart(2, "0")}`; + return text; + } + + normalNewProject() { + return "BEGIN NEW PROJECT"; + } + + normalRelease() { + return "Version"; + } + } + + class CommitMessage { + constructor(data) { + this.type = document.getElementById("type").value; + this.prefix = document.getElementById("prefix").value; + this.subject = document.getElementById("subject").value; + this.comment = document.getElementById("comment").value; + this.issue = document.getElementById("issue").value; + this.prefixIcon = null; + this.prefixName = null; + this.data = data; + this.messageOutput = document.getElementById("message-output"); + } + + setPrefix() { + + console.log(this.type, this.prefix, this.data); + for (let i = 0; i < this.data.length; i++) { + for (let j = 0; j < this.data[i].prefix.length; j++) { + if (this.prefix === this.data[i].prefix[j].constant) { + this.prefixIcon = this.data[i].prefix[j].prefixIcon; + this.prefixName = this.data[i].prefix[j].prefixText; + } + + } + } + + } + + setMessage() { + this.messageOutput.value = this.getMessage(); + } + getMessage() { let message = ""; @@ -64,362 +205,200 @@ } } - - /************************************************************ - CLASS PREFIX - PREFIXを登録、インスタンスするためのCLASS - ************************************************************/ - - class Prefix { - constructor(name, icon ,description) { - this.name = name; - this.icon = icon; - this.description = description; - } - - getPrefixIcon() { - return this.icon; + class Reset { + constructor() { } - - getPrefixName() { - return this.name; + + setBlank() { + document.getElementById("subject").value = ""; + document.getElementById("comment").value = ""; + document.getElementById("issue").value = ""; + document.getElementById("message-output").value = "🧙🪄"; } } - /************************************************************ - PREFIXのインスタンス - CLASS PREFIXでCOMMIT MESSAGEに必要なものを準備、配列に入れる - ************************************************************/ - - const normalPrefixList = []; - CreateNormalPrefix(); - function CreateNormalPrefix() { - const feature = new Prefix("FEAT", "💕", "メソッド、条件分岐、改良、ファイル追加した時"); - const refactor = new Prefix("REFACTOR", "🫶", "機能を変えずにコードを書き換えた時"); - const docs = new Prefix("DOCS", "📝", "コードに関係ない、影響がない時"); - const fix = new Prefix("FIX", "🐝", "不具合の修正"); - const release = new Prefix("RELEASE", "🚀", "Version 1.0.0"); - const newProject = new Prefix("NEW", "🎉", "BEGIN NEW PROJECT"); - - normalPrefixList.push(feature, refactor, docs, fix, release, newProject); - } + class Copy { + constructor() { - const TILPrefixList = []; - CreateTILPrefix(); - function CreateTILPrefix() { - const update = new Prefix("UPDATE", "📚", "DAILY REPORT 231201"); - - TILPrefixList.push(update); - } + } - const practiceProjectPrefixList = []; - CreatePracticeProjectPrefix(); - function CreatePracticeProjectPrefix() { - const add = new Prefix("ADD", "📖", "ファイル、学んだことの追加"); - - practiceProjectPrefixList.push(add); + setClipboard() { + const text = document.getElementById("message-output").value; + navigator.clipboard.writeText(text); + copyBtn.textContent = "CLIPED!"; + setTimeout(() => { + copyBtn.textContent = "COPY"; + }, + 1000); + } } - const paizaPrefixList = []; - CreatepaizaPrefix(); - function CreatepaizaPrefix() { - const c_stdin = new Prefix("標準入力", "Cランク獲得", "取り組んだ問題"); - const c_data_structure = new Prefix("データセット選択", "Cランク獲得", "取り組んだ問題"); - const c_arithmetic_substitution = new Prefix("算術・代入演算", "Cランク獲得", "取り組んだ問題"); - const c_logical_operation = new Prefix("論理演算", "Cランク獲得", "取り組んだ問題"); - const c_string_primer = new Prefix("文字列処理", "Cランク獲得", "取り組んだ問題"); - const c_stdout = new Prefix("標準出力", "Cランク獲得", "取り組んだ問題"); - - // 進んだら適宜追加 - paizaPrefixList.push(c_stdout, c_stdin, c_data_structure, c_arithmetic_substitution, c_logical_operation, c_string_primer); - } - /************************************************************ - TYPEを取得する - TYPEを取得して、それに応じたPREFIXをセットする - ************************************************************/ - - class Type { - constructor(value) { - this.value = value; + class DarkMode { + constructor() { + } - getTypeArray() { - // 取得したTYPEによって、PREFIXの配列を返す - // HTMLのValueと配列名は同じにする - if (this.value === "normalPrefixList") { - return normalPrefixList; - } - - if (this.value === "TILPrefixList") { - return TILPrefixList; - } + getDOMElements() { + const body = document.getElementById("body"); + const resetBtn = document.getElementById("btn-reset"); + const input = document.querySelectorAll("input"); + const select = document.querySelectorAll("select"); + const comment = document.getElementById("comment"); + const generatedMessage = document.getElementById("message-output"); + const modeBtn = document.getElementById("btn-mode"); + const elements = [body, resetBtn, input, select, comment, generatedMessage]; + return { elements, modeBtn }; + } - if (this.value === "practiceProjectPrefixList") { - return practiceProjectPrefixList; - } + getLocalStorage() { + const monitorMode = JSON.parse(localStorage.getItem("displayMode")); + return monitorMode; + } - if (this.value === "paizaPrefixList") { - return paizaPrefixList; - } - - return "NO ARRAY"; + setLocalStorageLightMode() { + localStorage.setItem("displayMode", JSON.stringify("lightmode")); + } + + setLocalStorageDarkMode() { + localStorage.setItem("displayMode", JSON.stringify("darkmode")); } - } - - getType(); - function getType() { - let type; - const typeSelect = document.getElementById("type"); - const initType = typeSelect.value; - type = new Type(initType); - createPrefixPulldown(type.getTypeArray()); + judgeInitMode() { + const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const monitorMode = this.getLocalStorage(); + + if (darkModeMediaQuery.matches) { + console.log("judge: system dark"); + this.switchToDarkMode(); + } else if (!darkModeMediaQuery.matches) { + console.log("judge: system light"); + this.switchToLightMode(); + } else if (monitorMode === "darkmode") { + console.log("localStorage DARK"); + this.switchToDarkMode(); + } else { + console.log("localStorage LIGHT"); + this.switchToLightMode(); + } + } - typeSelect.addEventListener("change", () => { - type = new Type(typeSelect.value); - createPrefixPulldown(type.getTypeArray()); - }); + judgeEvent() { + const { modeBtn } = this.getDOMElements(); + if (modeBtn.textContent === "🌞") { + this.switchToDarkMode(); + } else { + this.switchToLightMode(); + } - const generateBtn = document.getElementById("btn-generate"); + } - generateBtn.addEventListener("click", (e) => { - e.preventDefault(); - const inputData = getInput(type.getTypeArray()); - const outputArea = document.getElementById("message-output"); - outputArea.value = inputData.getMessage(); - }); - } - - - /************************************************************ - プルダウンを作る - TYPEの種類によって、PREFIXに配列の一覧を展開する - ************************************************************/ - - // createPrefixPulldown(); + switchToDarkMode() { + const {elements, modeBtn} = this.getDOMElements(); + this.setLocalStorageDarkMode(); + + modeBtn.textContent = "🌛"; + + for (let i = 0; i < elements.length; i++) { + if (elements[i].length > 0) { + for (const element of elements[i]) { + element.classList.add("darkmode"); + } + } else { + elements[i].classList.add("darkmode"); + } + } + } - function createPrefixPulldown(prefixArray) { - const prefixSelect = document.getElementById("prefix"); + switchToLightMode() { + const {elements, modeBtn} = this.getDOMElements(); + this.setLocalStorageLightMode(); - // プルダウン初期化 - while (prefixSelect.firstChild) { - prefixSelect.removeChild(prefixSelect.firstChild); - } + modeBtn.textContent = "🌞"; - prefixArray.forEach((item, index) => { - const option = document.createElement("option"); - const value = item.name; - option.value = value.toLowerCase(); - option.textContent = `${item.icon} ${item.name}: ${item.description}`; - if (index === 0) { - option.selected = true; + for (let i = 0; i < elements.length; i++) { + if (elements[i].length > 0) { + for (const element of elements[i]) { + element.classList.remove("darkmode"); + } + } else { + elements[i].classList.remove("darkmode"); + } } - prefixSelect.appendChild(option); - }); - + } + } - prefixChangeEvent(); - } + /************************************************* + *************************************************/ - function prefixChangeEvent() { - const selectElement = document.getElementById("prefix"); - setSpecificSubject(selectElement.value); - - selectElement.addEventListener("change", () => { - setSpecificSubject(selectElement.value); - }); - } + const url = "./data/data.json"; + const jsonData = new JsonData(url); - function setSpecificSubject(prefix) { - const subjectElement = document.getElementById("subject"); - // console.log(prefix); - if (prefix === "update") { - const day = new Date() - subjectElement.value = `DAILY REPORT ${day.getFullYear() - 2000}${String(day.getMonth() + 1).padStart(2, "0")}${String(day.getDate()).padStart(2, "0")}`; - } else if (prefix === "new") { - subjectElement.value = "BEGIN NEW PROJECT"; - } else if (prefix === "release") { - subjectElement.value = "Version"; - } else { - subjectElement.value = ""; - } + async function initialize() { + const data = await jsonData.getAllData(); + const createDom = new CreateHTMLDOM(data); + createDom.createTypeOptions(); + createDom.createPrefix(); + const setSpecificSubject = new SetSpecificSubject(prefixDom.value); + setSpecificSubject.checkType(); + const darkmode = new DarkMode(); + darkmode.judgeInitMode(); } - - - /************************************************************ - コミットメッセージを生成する - それ関連の処理 - ************************************************************/ - - function getInput(prefixArray) { - const commitForm = document.forms["commitForm"]; - const prefixValue = commitForm["prefix"].value; - let prefix = ""; + initialize(); - prefixArray.forEach((element, i) => { - if (element.name.toLowerCase() === prefixValue) { - prefix = prefixArray[i]; - } - }); + const typeDom = document.getElementById("type"); - const subject = commitForm["subject"].value; - const comment = commitForm["comment"].value; - const issue = commitForm["issue"].value; - - const inputData = new Data( - prefix.getPrefixIcon(), - prefix.getPrefixName(), - subject, - comment, - issue, - ); + typeDom.addEventListener("change", async () => { + const data = await jsonData.getAllData(); + const createDom = new CreateHTMLDOM(data); + createDom.createPrefix(); + const setSpecificSubject = new SetSpecificSubject(prefixDom.value); + setSpecificSubject.checkType(); + }); - return inputData; - } + const prefixDom = document.getElementById("prefix"); + prefixDom.addEventListener("change", () => { + const prefixDom = document.getElementById("prefix"); + const setSpecificSubject = new SetSpecificSubject(prefixDom.value); + setSpecificSubject.checkType(); + }); - /************************************************************ - コミットメッセージをコピーする - それ関連の処理 - ************************************************************/ - - const copyBtn = document.getElementById("btn-copy"); + const btnGenerate = document.getElementById("btn-generate"); - copyBtn.addEventListener("click", (e) => { + btnGenerate.addEventListener("click", async(e) => { e.preventDefault(); - const text = document.getElementById("message-output").value; - navigator.clipboard.writeText(text); - copyBtn.textContent = "CLIPED!"; - setTimeout(() => { - copyBtn.textContent = "COPY"; - }, - 1000); + const data = await jsonData.getAllData(); + const commitMessage = new CommitMessage(data); + commitMessage.setPrefix(); + commitMessage.setMessage(); }); - /************************************************************ - リセット - 入力内容を全てリセットする - ************************************************************/ + const btnReset = document.getElementById("btn-reset"); - const resetBtn = document.getElementById("btn-reset"); + btnReset.addEventListener("click", (e) => { + (e).preventDefault(); + const reset = new Reset(); + reset.setBlank(); + }); - resetBtn.addEventListener("click", (e) => { - e.preventDefault(); + const copyBtn = document.getElementById("btn-copy"); - const commitForm = document.forms["commitForm"]; + copyBtn.addEventListener("click", (e) => { + e.preventDefault(); + const copy = new Copy(); + copy.setClipboard(); + }); - commitForm["subject"].value = ""; - commitForm["comment"].value = ""; - commitForm["issue"].value = ""; - document.getElementById("message-output").value = "🧙🪄"; + const modeBtn = document.getElementById("btn-mode"); + modeBtn.addEventListener("click", () => { + const darkmode = new DarkMode(); + darkmode.judgeEvent(); }); - /************************************************************ - ダークモード対応 - ************************************************************/ - - darkmode(); - function darkmode() { - const monitorMode = JSON.parse(localStorage.getItem("displayMode")); - - const modeChangeBtn = document.getElementById("btn-mode"); - - const bodyElement = document.querySelector("body"); - const resetBtn = document.getElementById("btn-reset"); - const commitForm = document.forms["commitForm"]; - const type = commitForm["type"]; - const prefix = commitForm["prefix"]; - const subject = commitForm["subject"]; - const comment = commitForm["comment"]; - const issue = commitForm["issue"]; - const generatedMessage = commitForm["message-output"]; - - modeChangeBtn.addEventListener("click", () => { - if (bodyElement.classList.contains("text-gray-700")) { - setMode("dark"); - } else { - setMode("light"); - } - }); - - const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); - - if (darkModeMediaQuery.matches) { - console.log("judge: system dark"); - setMode("dark"); - } else if (!darkModeMediaQuery.matches) { - console.log("judge: system light"); - setMode("light"); - } else if (monitorMode === "darkmode") { - console.log("localStorage DARK"); - setMode("dark"); - } else { - console.log("localStorage LIGHT"); - setMode("light"); - } - - function setMode(mode) { - if (mode === "dark") { - localStorage.setItem("displayMode", JSON.stringify("darkmode")); - modeChangeBtn.textContent = "🌛"; - bodyElement.classList.remove("text-gray-700") - changeClass(bodyElement, "add", "body"); - changeClass(resetBtn, "add", "resetBtn"); - changeClass(type, "add", "input"); - changeClass(prefix, "add", "input"); - changeClass(subject, "add", "input"); - changeClass(comment, "add", "input"); - changeClass(issue, "add", "input"); - changeClass(generatedMessage, "add", "generatedMessage"); - } else { - localStorage.setItem("displayMode", JSON.stringify("lightmode")); - modeChangeBtn.textContent = "🌞"; - bodyElement.classList.add("text-gray-700"); - changeClass(bodyElement, "remove", "body"); - changeClass(resetBtn, "remove", "resetBtn"); - changeClass(resetBtn, "remove", "resetBtn"); - changeClass(type, "remove", "input"); - changeClass(prefix, "remove", "input"); - changeClass(subject, "remove", "input"); - changeClass(comment, "remove", "input"); - changeClass(issue, "remove", "input"); - changeClass(generatedMessage, "remove", "generatedMessage"); - } - } - - function changeClass(targetElement, addOrRemove, typeName) { - const darkModeTypes = { - body: { - class: ["text-gray-300", "bg-slate-900"], - }, - resetBtn: { - class: ["bg-slate-800", "order-slate-600"], - }, - input: { - class: ["border-slate-600", "bg-slate-800"], - }, - generatedMessage: { - class: ["border-slate-600", "bg-slate-700"], - } - }; - - const style1 = darkModeTypes[typeName].class[0]; - const style2 = darkModeTypes[typeName].class[1]; - - if (addOrRemove === "add") { - targetElement.classList.add(style1, style2); - } else if(addOrRemove === "remove") { - targetElement.classList.remove(style1, style2); - } else { - console.log("NO SET ADD OR REMOVE"); - } - } - } // function end - } // end \ No newline at end of file