diff --git a/src/app.ts b/src/app.ts index 359131f..c1e06fd 100644 --- a/src/app.ts +++ b/src/app.ts @@ -25,6 +25,7 @@ const app = express(); app.engine("ejs", engine); app.set("views", path.resolve(__dirname, "client/views")); app.set("view engine", "ejs"); +app.use(express.urlencoded({ extended: true })); // Public files, including 3rd party resources (foreign) app.use("/static", express.static(path.resolve(__dirname, "client/public"))); diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css index 50cda98..c2139db 100644 --- a/src/client/public/css/tailwind.css +++ b/src/client/public/css/tailwind.css @@ -554,201 +554,6 @@ video { display: none; } -[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - border-radius: 0px; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5rem; - --tw-shadow: 0 0 #0000; -} - -[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - border-color: #2563eb; -} - -input::-moz-placeholder, textarea::-moz-placeholder { - color: #6b7280; - opacity: 1; -} - -input::placeholder,textarea::placeholder { - color: #6b7280; - opacity: 1; -} - -::-webkit-datetime-edit-fields-wrapper { - padding: 0; -} - -::-webkit-date-and-time-value { - min-height: 1.5em; - text-align: inherit; -} - -::-webkit-datetime-edit { - display: inline-flex; -} - -::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { - padding-top: 0; - padding-bottom: 0; -} - -select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 0.5rem center; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - padding-right: 2.5rem; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; -} - -[multiple],[size]:where(select:not([size="1"])) { - background-image: initial; - background-position: initial; - background-repeat: unset; - background-size: initial; - padding-right: 0.75rem; - -webkit-print-color-adjust: unset; - print-color-adjust: unset; -} - -[type='checkbox'],[type='radio'] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - padding: 0; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - display: inline-block; - vertical-align: middle; - background-origin: border-box; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - flex-shrink: 0; - height: 1rem; - width: 1rem; - color: #2563eb; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - --tw-shadow: 0 0 #0000; -} - -[type='checkbox'] { - border-radius: 0px; -} - -[type='radio'] { - border-radius: 100%; -} - -[type='checkbox']:focus,[type='radio']:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 2px; - --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); -} - -[type='checkbox']:checked,[type='radio']:checked { - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; -} - -[type='checkbox']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); -} - -@media (forced-colors: active) { - [type='checkbox']:checked { - -webkit-appearance: auto; - -moz-appearance: auto; - appearance: auto; - } -} - -[type='radio']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); -} - -@media (forced-colors: active) { - [type='radio']:checked { - -webkit-appearance: auto; - -moz-appearance: auto; - appearance: auto; - } -} - -[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { - border-color: transparent; - background-color: currentColor; -} - -[type='checkbox']:indeterminate { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; -} - -@media (forced-colors: active) { - [type='checkbox']:indeterminate { - -webkit-appearance: auto; - -moz-appearance: auto; - appearance: auto; - } -} - -[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { - border-color: transparent; - background-color: currentColor; -} - -[type='file'] { - background: unset; - border-color: inherit; - border-width: 0; - border-radius: 0; - padding: 0; - font-size: unset; - line-height: inherit; -} - -[type='file']:focus { - outline: 1px solid ButtonText; - outline: 1px auto -webkit-focus-ring-color; -} - .container { width: 100%; } @@ -783,6 +588,148 @@ select { } } +.form-input,.form-textarea,.form-select,.form-multiselect { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + border-radius: 0px; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-shadow: 0 0 #0000; +} + +.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + border-color: #2563eb; +} + +.form-input::-moz-placeholder, .form-textarea::-moz-placeholder { + color: #6b7280; + opacity: 1; +} + +.form-input::placeholder,.form-textarea::placeholder { + color: #6b7280; + opacity: 1; +} + +.form-input::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +.form-input::-webkit-date-and-time-value { + min-height: 1.5em; + text-align: inherit; +} + +.form-input::-webkit-datetime-edit { + display: inline-flex; +} + +.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field { + padding-top: 0; + padding-bottom: 0; +} + +.form-select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +.form-select:where([size]:not([size="1"])) { + background-image: initial; + background-position: initial; + background-repeat: unset; + background-size: initial; + padding-right: 0.75rem; + -webkit-print-color-adjust: unset; + print-color-adjust: unset; +} + +.form-checkbox,.form-radio { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +.form-radio { + border-radius: 100%; +} + +.form-checkbox:focus,.form-radio:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +.form-checkbox:checked,.form-radio:checked { + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +.form-radio:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); +} + +@media (forced-colors: active) { + .form-radio:checked { + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus { + border-color: transparent; + background-color: currentColor; +} + .sr-only { position: absolute; width: 1px; @@ -897,10 +844,18 @@ select { z-index: 80; } +.order-1 { + order: 1; +} + .-m-1\.5 { margin: -0.375rem; } +.m-1 { + margin: 0.25rem; +} + .m-3 { margin: 0.75rem; } @@ -966,6 +921,14 @@ select { margin-bottom: 0.5rem; } +.me-1 { + margin-inline-end: 0.25rem; +} + +.me-2 { + margin-inline-end: 0.5rem; +} + .me-5 { margin-inline-end: 1.25rem; } @@ -1101,6 +1064,11 @@ select { height: 2rem; } +.size-\[16px\] { + width: 16px; + height: 16px; +} + .size-\[28px\] { width: 28px; height: 28px; @@ -1176,6 +1144,10 @@ select { min-height: 400px; } +.min-h-\[46px\] { + min-height: 46px; +} + .min-h-\[calc\(100\%-3\.5rem\)\] { min-height: calc(100% - 3.5rem); } @@ -1395,10 +1367,19 @@ select { column-gap: 1rem; } +.gap-x-6 { + -moz-column-gap: 1.5rem; + column-gap: 1.5rem; +} + .gap-y-2 { row-gap: 0.5rem; } +.gap-y-4 { + row-gap: 1rem; +} + .space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); @@ -1498,6 +1479,10 @@ select { border-radius: 0.375rem; } +.rounded-sm { + border-radius: 0.125rem; +} + .rounded-xl { border-radius: 0.75rem; } @@ -1751,6 +1736,10 @@ select { padding-inline-end: 2.25rem; } +.ps-0\.5 { + padding-inline-start: 0.125rem; +} + .ps-10 { padding-inline-start: 2.5rem; } @@ -1976,6 +1965,11 @@ select { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + .outline { outline-style: solid; } @@ -2535,6 +2529,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } +.hover\:bg-gray-300:hover { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); +} + .hover\:bg-gray-50:hover { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); @@ -2615,6 +2614,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1)); } +.focus\:ring-gray-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1)); +} + .focus\:checked\:border-blue-600:checked:focus { --tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity, 1)); @@ -2905,11 +2909,25 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te gap: 1.5rem; } + .sm\:gap-x-10 { + -moz-column-gap: 2.5rem; + column-gap: 2.5rem; + } + .sm\:gap-x-3 { -moz-column-gap: 0.75rem; column-gap: 0.75rem; } + .sm\:gap-x-8 { + -moz-column-gap: 2rem; + column-gap: 2rem; + } + + .sm\:gap-y-6 { + row-gap: 1.5rem; + } + .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); @@ -2941,11 +2959,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te } @media (min-width: 768px) { - .md\:mx-auto { - margin-left: auto; - margin-right: auto; - } - .md\:block { display: block; } @@ -2958,14 +2971,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te display: none; } - .md\:w-full { - width: 100%; - } - - .md\:max-w-2xl { - max-width: 42rem; - } - .md\:grow { flex-grow: 1; } @@ -3008,6 +3013,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te row-gap: 0px; } + .md\:gap-y-8 { + row-gap: 2rem; + } + .md\:p-5 { padding: 1.25rem; } @@ -3016,6 +3025,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te padding: 1.5rem; } + .md\:p-8 { + padding: 2rem; + } + .md\:py-0 { padding-top: 0px; padding-bottom: 0px; @@ -3031,6 +3044,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te inset-inline-end: auto; } + .lg\:mx-auto { + margin-left: auto; + margin-right: auto; + } + .lg\:me-0 { margin-inline-end: 0px; } @@ -3043,6 +3061,14 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te display: none; } + .lg\:w-full { + width: 100%; + } + + .lg\:max-w-4xl { + max-width: 56rem; + } + .lg\:translate-x-0 { --tw-translate-x: 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)); @@ -3121,6 +3147,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1)); } +.dark\:bg-neutral-700\/50:where(.dark, .dark *) { + background-color: rgb(64 64 64 / 0.5); +} + .dark\:bg-neutral-800:where(.dark, .dark *) { --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)); diff --git a/src/client/public/js/guild/subscriptions.js b/src/client/public/js/guild/subscriptions.js index 8f4b85d..9a9beea 100644 --- a/src/client/public/js/guild/subscriptions.js +++ b/src/client/public/js/guild/subscriptions.js @@ -218,7 +218,33 @@ const defineTable = () => { }) } - $(window).ready(() => { - setTimeout(defineTable, 100); -}); \ No newline at end of file + setTimeout(defineTable, 400); +}); + +const submitForm = async event => { + event.preventDefault(); + + const formData = new FormData($("#subForm")); + + + // formData.forEach(entry => { + // if (entry.name === "active") { + // entry.value = entry.value === "on" ? true : false; + // } + // }) + + alert(JSON.stringify(formData, null, 4)); + + return; + + await $.ajax({ + url: `/guild/${guild}/subscriptions/api`, + method: "post", + data: formData + }) + + // "/guild/<%= guild.id %>/subscriptions/api" +} + +$("#subForm").on("submit", submitForm); \ No newline at end of file diff --git a/src/client/views/guild/subscriptions.ejs b/src/client/views/guild/subscriptions.ejs index e2946ca..4f9d883 100644 --- a/src/client/views/guild/subscriptions.ejs +++ b/src/client/views/guild/subscriptions.ejs @@ -183,12 +183,11 @@