From c54252e1ced55c5f23d27600c086c0f459193060 Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 8 Oct 2024 18:39:10 -0400 Subject: [PATCH] nump --- form.json | 2 +- main.go | 10 ++-- style.css | 151 ++++++++++++++++++++++++++++-------------------------- test.html | 26 +++++----- 4 files changed, 97 insertions(+), 92 deletions(-) diff --git a/form.json b/form.json index a59e157..80181db 100644 --- a/form.json +++ b/form.json @@ -1 +1 @@ -{"Elements":[{"Name":"email","Label":"Email Address","LabelClasses":"","InputClasses":"","Type":"text","Hint":"","Required":false,"Classes":"","Validator":"email","FailMessage":"Must be a valid email address","Value":"","Autocomplete":"off","Order":1,"OnClick":"","Choices":null},{"Name":"oldpassword","Label":"Old Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"","FailMessage":"Passsword Incorrect","Value":"","Autocomplete":"off","Order":2,"OnClick":"","Choices":null},{"Name":"newpassword","Label":"New Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"minlength=8;haslowercase;hasuppercase;hasdigit","FailMessage":"Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter and one digit","Value":"","Autocomplete":"off","Order":3,"OnClick":"","Choices":null},{"Name":"confirmpassword","Label":"Confirm Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"mustmatch=newpassword","FailMessage":"Passwords do not match","Value":"","Autocomplete":"off","Order":4,"OnClick":"","Choices":null},{"Name":"","Label":"Change Password","LabelClasses":"","InputClasses":"flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600","Type":"submit","Hint":"","Required":false,"Classes":"","Validator":"","FailMessage":"","Value":"","Autocomplete":"off","Order":5,"OnClick":"","Choices":null}],"Route":"/chpass/changepassword","Classes":"px-1 py-2","LabelClasses":"text-sm font-medium leading-6 text-gray-900","InputClasses":"rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6","ErrorClasses":"text-red-600 text-right font-bold text-xl","ContainerClasses":" bg-gray-200 justify-center py-6 rounded-lg shadow-lg","Editable":true} \ No newline at end of file +{"Elements":[{"Name":"email","Label":"Email Address","LabelClasses":"","InputClasses":"","Type":"text","Hint":"","Required":false,"Classes":"","Validator":"email","FailMessage":"Must be a valid email address","Value":"","Autocomplete":"off","Order":1,"OnClick":"","Choices":null},{"Name":"oldpassword","Label":"Old Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"","FailMessage":"Passsword Incorrect","Value":"","Autocomplete":"off","Order":2,"OnClick":"","Choices":null},{"Name":"newpassword","Label":"New Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"minlength=8;haslowercase;hasuppercase;hasdigit","FailMessage":"Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter and one digit","Value":"","Autocomplete":"off","Order":3,"OnClick":"","Choices":null},{"Name":"confirmpassword","Label":"Confirm Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"mustmatch=newpassword","FailMessage":"Passwords do not match","Value":"","Autocomplete":"off","Order":4,"OnClick":"","Choices":null},{"Name":"","Label":"Change Password","LabelClasses":"","InputClasses":"flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600","Type":"submit","Hint":"","Required":false,"Classes":"","Validator":"","FailMessage":"","Value":"","Autocomplete":"off","Order":5,"OnClick":"","Choices":null}],"Route":"/chpass/changepassword","Classes":" py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 ","LabelClasses":"block text-sm font-medium text-gray-700","InputClasses":"block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm","ErrorClasses":"text-red-800 font-bold","ContainerClasses":"relative mx-auto gap-x-16 bg-slate-100 w-full lg-w-1/2 lg:px-8 lg:pt-16","Editable":true} \ No newline at end of file diff --git a/main.go b/main.go index e55f4e6..90575a4 100644 --- a/main.go +++ b/main.go @@ -34,12 +34,12 @@ func mwLog(next http.Handler) http.Handler { func main() { - forms.GlobalStyles.ContainerClasses = " bg-gray-200 justify-center py-6 rounded-lg shadow-lg" - forms.GlobalStyles.ItemClasses = "px-1 py-2" - forms.GlobalStyles.ErrorClasses = "text-red-600 text-right font-bold text-xl" - forms.GlobalStyles.LabelClasses = "text-sm font-medium leading-6 text-gray-900" - forms.GlobalStyles.InputClasses = "rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" f := forms.NewForm() + f.ContainerClasses = "relative mx-auto gap-x-16 bg-slate-100 w-full lg-w-1/2 lg:px-8 lg:pt-16" + f.Classes = " py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 " + f.InputClasses = "block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + f.LabelClasses = "block text-sm font-medium text-gray-700" + f.ErrorClasses = "text-red-800 font-bold" e := forms.NewElement() e.Label = "Email Address" e.Type = "text" diff --git a/style.css b/style.css index e248e9f..973fdd5 100644 --- a/style.css +++ b/style.css @@ -722,6 +722,15 @@ select { right: 0.75rem; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.block { + display: block; +} + .inline { display: inline; } @@ -746,21 +755,18 @@ select { justify-content: center; } -.rounded-lg { - border-radius: 0.5rem; +.gap-x-16 { + -moz-column-gap: 4rem; + column-gap: 4rem; } .rounded-md { border-radius: 0.375rem; } -.border-0 { - border-width: 0px; -} - -.bg-gray-200 { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +.border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); } .bg-indigo-600 { @@ -768,9 +774,9 @@ select { background-color: rgb(79 70 229 / var(--tw-bg-opacity)); } -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; +.bg-slate-100 { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity)); } .px-3 { @@ -793,25 +799,11 @@ select { padding-bottom: 0.5rem; } -.py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - -.text-right { - text-align: right; -} - .text-sm { font-size: 0.875rem; line-height: 1.25rem; } -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - .font-bold { font-weight: 700; } @@ -836,14 +828,19 @@ select { line-height: 1.5rem; } -.text-gray-900 { +.text-gray-700 { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)); } -.text-red-600 { +.text-indigo-300 { --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); + color: rgb(165 180 252 / var(--tw-text-opacity)); +} + +.text-red-800 { + --tw-text-opacity: 1; + color: rgb(153 27 27 / var(--tw-text-opacity)); } .text-white { @@ -851,61 +848,25 @@ select { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.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-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.ring-1 { - --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, 0 0 #0000); -} - -.ring-inset { - --tw-ring-inset: inset; -} - -.ring-gray-300 { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); -} - -.placeholder\:text-gray-400::-moz-placeholder { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.placeholder\:text-gray-400::placeholder { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - .hover\:bg-indigo-500:hover { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity)); } -.focus\:ring-2:focus { - --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, 0 0 #0000); +.focus\:border-indigo-500:focus { + --tw-border-opacity: 1; + border-color: rgb(99 102 241 / var(--tw-border-opacity)); } -.focus\:ring-inset:focus { - --tw-ring-inset: inset; -} - -.focus\:ring-indigo-600:focus { +.focus\:ring-indigo-500:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)); } .focus-visible\:outline:focus-visible { @@ -929,8 +890,52 @@ select { font-size: 0.875rem; line-height: 1.25rem; } +} - .sm\:leading-6 { - line-height: 1.5rem; +@media (min-width: 768px) { + .md\:px-10 { + padding-left: 2.5rem; + padding-right: 2.5rem; + } +} + +@media (min-width: 1024px) { + .lg\:col-start-2 { + grid-column-start: 2; + } + + .lg\:row-start-1 { + grid-row-start: 1; + } + + .lg\:mx-auto { + margin-left: auto; + margin-right: auto; + } + + .lg\:w-full { + width: 100%; + } + + .lg\:max-w-lg { + max-width: 32rem; + } + + .lg\:bg-transparent { + background-color: transparent; + } + + .lg\:px-0 { + padding-left: 0px; + padding-right: 0px; + } + + .lg\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + + .lg\:pt-16 { + padding-top: 4rem; } } \ No newline at end of file diff --git a/test.html b/test.html index f63c008..3c0ea56 100644 --- a/test.html +++ b/test.html @@ -2,24 +2,24 @@ -
- -
+ + +
-
-
Must be a valid email address
+
+
Must be a valid email address
-
-
Passsword Incorrect
+
+
Passsword Incorrect
-
-
Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter and one digit
+
+
Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter and one digit
-
-
Passwords do not match
+
+
Passwords do not match
-
-
Invalid entry.
+
+
Invalid entry.