diff --git a/public/css/output.css b/public/css/output.css index c2d5e50..0712b38 100644 --- a/public/css/output.css +++ b/public/css/output.css @@ -882,6 +882,24 @@ html { } } +.avatar { + position: relative; + display: inline-flex; +} + +.avatar > div { + display: block; + aspect-ratio: 1 / 1; + overflow: hidden; +} + +.avatar img { + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; +} + .avatar.placeholder > div { display: flex; align-items: center; @@ -908,12 +926,6 @@ html { --tw-bg-opacity: 1; background-color: hsl(var(--b2) / var(--tw-bg-opacity)); } - - .table-zebra tr.hover:hover, - .table-zebra tr.hover:nth-child(even):hover { - --tw-bg-opacity: 1; - background-color: hsl(var(--b3) / var(--tw-bg-opacity)); - } } .btn { @@ -962,9 +974,10 @@ html { pointer-events: none; } -.btn-square { +.btn-circle { height: 3rem; width: 3rem; + border-radius: 9999px; padding: 0px; } @@ -1035,6 +1048,46 @@ html { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } +.dropdown-end .dropdown-content { + right: 0px; +} + +.dropdown-left .dropdown-content { + top: 0px; + right: 100%; + bottom: auto; + transform-origin: right; +} + +.dropdown-right .dropdown-content { + left: 100%; + top: 0px; + bottom: auto; + transform-origin: left; +} + +.dropdown-bottom .dropdown-content { + bottom: auto; + top: 100%; + transform-origin: top; +} + +.dropdown-top .dropdown-content { + bottom: 100%; + top: auto; + transform-origin: bottom; +} + +.dropdown-end.dropdown-right .dropdown-content { + bottom: 0px; + top: auto; +} + +.dropdown-end.dropdown-left .dropdown-content { + bottom: 0px; + top: auto; +} + .dropdown.dropdown-open .dropdown-content, .dropdown:not(.dropdown-hover):focus .dropdown-content, .dropdown:focus-within .dropdown-content { @@ -1065,11 +1118,24 @@ html { background-color: hsl(var(--b3) / var(--tw-bg-opacity)); } + .btn-success:hover { + --tw-border-opacity: 1; + border-color: hsl(var(--su) / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: hsl(var(--su) / var(--tw-bg-opacity)); + } + .btn.glass:hover { --glass-opacity: 25%; --glass-border-opacity: 15%; } + .btn-ghost:hover { + --tw-border-opacity: 0; + background-color: hsl(var(--bc) / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.2; + } + .btn-outline:hover { --tw-border-opacity: 1; border-color: hsl(var(--bc) / var(--tw-border-opacity)); @@ -1220,6 +1286,29 @@ html { padding-bottom: 0.5rem; } +.hero { + display: grid; + width: 100%; + place-items: center; + background-size: cover; + background-position: center; +} + +.hero > * { + grid-column-start: 1; + grid-row-start: 1; +} + +.hero-content { + z-index: 0; + display: flex; + align-items: center; + justify-content: center; + max-width: 80rem; + gap: 1rem; + padding: 1rem; +} + .input { flex-shrink: 1; height: 3rem; @@ -1323,6 +1412,19 @@ html { justify-self: end; } +.navbar { + display: flex; + align-items: center; + padding: var(--navbar-padding, 0.5rem); + min-height: 4rem; + width: 100%; +} + +:where(.navbar > *) { + display: inline-flex; + align-items: center; +} + .select { display: inline-flex; cursor: pointer; @@ -1377,6 +1479,48 @@ html { min-width: 4rem; } +.swap { + position: relative; + display: inline-grid; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + place-content: center; + cursor: pointer; +} + +.swap > * { + grid-column-start: 1; + grid-row-start: 1; + transition-duration: 300ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-property: transform, opacity; +} + +.swap input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.swap .swap-on, +.swap .swap-indeterminate, +.swap input:indeterminate ~ .swap-on { + opacity: 0; +} + +.swap input:checked ~ .swap-off, +.swap.swap-active .swap-off, +.swap input:indeterminate ~ .swap-off { + opacity: 0; +} + +.swap input:checked ~ .swap-on, +.swap-active .swap-on, +.swap input:indeterminate ~ .swap-indeterminate { + opacity: 1; +} + .table { position: relative; width: 100%; @@ -1443,6 +1587,14 @@ html { --alert-bg-mix: hsl(var(--b1)); } +.avatar-group :where(.avatar) { + overflow: hidden; + border-radius: 9999px; + border-width: 4px; + --tw-border-opacity: 1; + border-color: hsl(var(--b1) / var(--tw-border-opacity)); +} + .btm-nav > *:where(.active) { border-top-width: 2px; --tw-bg-opacity: 1; @@ -1476,6 +1628,23 @@ html { outline-offset: 2px; } +.btn-success { + --tw-border-opacity: 1; + border-color: hsl(var(--su) / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: hsl(var(--su) / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: hsl(var(--suc) / var(--tw-text-opacity)); + outline-color: hsl(var(--su) / 1); +} + +.btn-success.btn-active { + --tw-border-opacity: 1; + border-color: hsl(var(--su) / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: hsl(var(--su) / var(--tw-bg-opacity)); +} + .btn.glass { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; @@ -1488,6 +1657,23 @@ html { --glass-border-opacity: 15%; } +.btn-ghost { + border-width: 1px; + border-color: transparent; + background-color: transparent; + color: currentColor; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + outline-color: currentColor; +} + +.btn-ghost.btn-active { + --tw-border-opacity: 0; + background-color: hsl(var(--bc) / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.2; +} + .btn-outline { border-color: currentColor; background-color: transparent; @@ -1752,6 +1938,10 @@ html { line-height: 1em; } +.input-bordered { + --tw-border-opacity: 0.2; +} + .input:focus { outline-style: solid; outline-width: 2px; @@ -1759,15 +1949,13 @@ html { outline-color: hsl(var(--bc) / 0.2); } -.input-ghost { - --tw-bg-opacity: 0.05; +.input-success { + --tw-border-opacity: 1; + border-color: hsl(var(--su) / var(--tw-border-opacity)); } -.input-ghost:focus { - --tw-bg-opacity: 1; - --tw-text-opacity: 1; - color: hsl(var(--bc) / var(--tw-text-opacity)); - box-shadow: none; +.input-success:focus { + outline-color: hsl(var(--su) / 1); } .input-disabled, @@ -2093,6 +2281,49 @@ html { color: hsl(var(--erc) / var(--tw-text-opacity)); } +.swap-rotate .swap-on, +.swap-rotate .swap-indeterminate, +.swap-rotate input:indeterminate ~ .swap-on { + --tw-rotate: 45deg; + 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)); +} + +.swap-rotate input:checked ~ .swap-off, +.swap-rotate.swap-active .swap-off, +.swap-rotate input:indeterminate ~ .swap-off { + --tw-rotate: -45deg; + 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)); +} + +.swap-rotate input:checked ~ .swap-on, +.swap-rotate.swap-active .swap-on, +.swap-rotate input:indeterminate ~ .swap-indeterminate { + --tw-rotate: 0deg; + 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)); +} + +.swap-flip .swap-on, +.swap-flip .swap-indeterminate, +.swap-flip input:indeterminate ~ .swap-on { + transform: rotateY(180deg); + backface-visibility: hidden; + opacity: 1; +} + +.swap-flip input:checked ~ .swap-off, +.swap-flip.swap-active .swap-off, +.swap-flip input:indeterminate ~ .swap-off { + transform: rotateY(-180deg); + backface-visibility: hidden; + opacity: 1; +} + +.swap-flip input:checked ~ .swap-on, +.swap-flip.swap-active .swap-on, +.swap-flip input:indeterminate ~ .swap-indeterminate { + transform: rotateY(0deg); +} + .table :where(th, td) { padding-left: 1rem; padding-right: 1rem; @@ -2177,21 +2408,6 @@ html { calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset; } -.toggle-info:focus-visible { - outline-color: hsl(var(--in) / 1); -} - -.toggle-info:checked, - .toggle-info[checked="true"], - .toggle-info[aria-checked="true"] { - border-color: hsl(var(--in) / var(--tw-border-opacity)); - --tw-border-opacity: 0.1; - --tw-bg-opacity: 1; - background-color: hsl(var(--in) / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: hsl(var(--inc) / var(--tw-text-opacity)); -} - .toggle:disabled { cursor: not-allowed; --tw-border-opacity: 1; @@ -2237,6 +2453,10 @@ html { --tooltip-text-color: hsl(var(--erc)); } +.rounded-box { + border-radius: var(--rounded-box, 1rem); +} + .btm-nav-xs > *:where(.active) { border-top-width: 1px; } @@ -2253,30 +2473,43 @@ html { border-top-width: 4px; } -.btn-square:where(.btn-xs) { +.btn-circle:where(.btn-xs) { height: 1.5rem; width: 1.5rem; + border-radius: 9999px; padding: 0px; } -.btn-square:where(.btn-sm) { +.btn-circle:where(.btn-sm) { height: 2rem; width: 2rem; + border-radius: 9999px; padding: 0px; } -.btn-square:where(.btn-md) { +.btn-circle:where(.btn-md) { height: 3rem; width: 3rem; + border-radius: 9999px; padding: 0px; } -.btn-square:where(.btn-lg) { +.btn-circle:where(.btn-lg) { height: 4rem; width: 4rem; + border-radius: 9999px; padding: 0px; } +.menu-horizontal { + display: inline-flex; + flex-direction: row; +} + +.menu-horizontal > li:not(.menu-title) > details > ul { + position: absolute; +} + .steps-horizontal .step { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); @@ -2313,6 +2546,40 @@ html { bottom: var(--tooltip-offset); } +.avatar.online:before { + content: ""; + position: absolute; + z-index: 10; + display: block; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: hsl(var(--su) / var(--tw-bg-opacity)); + outline-style: solid; + outline-width: 2px; + outline-color: hsl(var(--b1) / 1); + width: 15%; + height: 15%; + top: 7%; + right: 7%; +} + +.avatar.offline:before { + content: ""; + position: absolute; + z-index: 10; + display: block; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: hsl(var(--b3) / var(--tw-bg-opacity)); + outline-style: solid; + outline-width: 2px; + outline-color: hsl(var(--b1) / 1); + width: 15%; + height: 15%; + top: 7%; + right: 7%; +} + .btn-group .btn:not(:first-child):not(:last-child) { border-top-left-radius: 0; border-top-right-radius: 0; @@ -2375,6 +2642,45 @@ html { border-bottom-right-radius: var(--rounded-btn, 0.5rem); } +.menu-horizontal > li:not(.menu-title) > details > ul { + margin-top: 1rem; + margin-left: 0px; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-right: 0.5rem; +} + +.menu-horizontal > li > details > ul:before { + content: none; +} + +:where(.menu-horizontal > li:not(.menu-title) > details > ul) { + --tw-bg-opacity: 1; + background-color: hsl(var(--b1) / var(--tw-bg-opacity)); + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + border-radius: var(--rounded-box, 1rem); +} + +.menu-sm :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)), + .menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.875rem; + line-height: 1.25rem; + border-radius: var(--rounded-btn, 0.5rem); +} + +.menu-sm .menu-title { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .steps-horizontal .step { grid-template-rows: 40px 1fr; grid-template-columns: auto; @@ -2548,8 +2854,12 @@ html { z-index: 50; } -.col-span-5 { - grid-column: span 5 / span 5; +.z-\[1\] { + z-index: 1; +} + +.z-\[4\] { + z-index: 4; } .clear-both { @@ -2584,14 +2894,6 @@ html { margin: auto; } -.m-2 { - margin: 0.5rem; -} - -.m-8 { - margin: 2rem; -} - .mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; @@ -2612,6 +2914,11 @@ html { margin-right: auto; } +.my-12 { + margin-top: 3rem; + margin-bottom: 3rem; +} + .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -2622,9 +2929,9 @@ html { margin-bottom: 1rem; } -.my-0 { - margin-top: 0px; - margin-bottom: 0px; +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; } .-mr-4 { @@ -2675,6 +2982,10 @@ html { margin-left: 1rem; } +.mr-10 { + margin-right: 2.5rem; +} + .mr-2 { margin-right: 0.5rem; } @@ -2699,6 +3010,10 @@ html { margin-top: 0.5rem; } +.mt-3 { + margin-top: 0.75rem; +} + .mt-4 { margin-top: 1rem; } @@ -2767,12 +3082,12 @@ html { height: 24rem; } -.h-auto { - height: auto; +.h-\[24px\] { + height: 24px; } -.h-full { - height: 100%; +.h-auto { + height: auto; } .h-fit { @@ -2780,30 +3095,18 @@ html { height: fit-content; } -.h-\[20px\] { - height: 20px; -} - -.h-\[25px\] { - height: 25px; -} - -.h-\[24px\] { - height: 24px; -} - -.h-\[16px\] { - height: 16px; -} - -.h-16 { - height: 4rem; +.h-full { + height: 100%; } .min-h-full { min-height: 100%; } +.w-10 { + width: 2.5rem; +} + .w-11\/12 { width: 91.666667%; } @@ -2812,6 +3115,10 @@ html { width: 0.75rem; } +.w-36 { + width: 9rem; +} + .w-44 { width: 11rem; } @@ -2836,6 +3143,14 @@ html { width: 24rem; } +.w-\[12px\] { + width: 12px; +} + +.w-\[24px\] { + width: 24px; +} + .w-auto { width: auto; } @@ -2849,30 +3164,6 @@ html { width: 100%; } -.w-24 { - width: 6rem; -} - -.w-\[15px\] { - width: 15px; -} - -.w-\[12px\] { - width: 12px; -} - -.w-\[8px\] { - width: 8px; -} - -.w-16 { - width: 4rem; -} - -.w-\[24px\] { - width: 24px; -} - .max-w-md { max-width: 28rem; } @@ -2885,6 +3176,10 @@ html { flex: 1 1 0%; } +.flex-none { + flex: none; +} + .flex-shrink-0 { flex-shrink: 0; } @@ -2956,10 +3251,18 @@ html { flex-direction: column; } +.flex-col-reverse { + flex-direction: column-reverse; +} + .flex-wrap { flex-wrap: wrap; } +.items-start { + align-items: flex-start; +} + .items-center { align-items: center; } @@ -3040,6 +3343,10 @@ html { border-width: 0px; } +.border-2 { + border-width: 2px; +} + .border-4 { border-width: 4px; } @@ -3052,6 +3359,10 @@ html { border-bottom-width: 1px; } +.border-b-4 { + border-bottom-width: 4px; +} + .border-r { border-right-width: 1px; } @@ -3060,10 +3371,6 @@ html { border-right-width: 2px; } -.border-b-4 { - border-bottom-width: 4px; -} - .border-r-4 { border-right-width: 4px; } @@ -3086,11 +3393,21 @@ html { border-color: rgb(59 130 246 / var(--tw-border-opacity)); } +.border-emerald-500 { + --tw-border-opacity: 1; + border-color: rgb(16 185 129 / var(--tw-border-opacity)); +} + .border-gray-100 { --tw-border-opacity: 1; border-color: rgb(243 244 246 / var(--tw-border-opacity)); } +.border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); +} + .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); @@ -3110,44 +3427,24 @@ html { border-color: rgb(255 255 255 / var(--tw-border-opacity)); } -.border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); -} - -.border-r-orange-600 { - --tw-border-opacity: 1; - border-right-color: rgb(234 88 12 / var(--tw-border-opacity)); -} - -.border-b-emerald-900 { - --tw-border-opacity: 1; - border-bottom-color: rgb(6 78 59 / var(--tw-border-opacity)); -} - -.border-r-emerald-900 { - --tw-border-opacity: 1; - border-right-color: rgb(6 78 59 / var(--tw-border-opacity)); -} - -.border-b-emerald-400 { +.border-b-green-500 { --tw-border-opacity: 1; - border-bottom-color: rgb(52 211 153 / var(--tw-border-opacity)); + border-bottom-color: rgb(34 197 94 / var(--tw-border-opacity)); } -.border-r-emerald-400 { +.border-r-green-500 { --tw-border-opacity: 1; - border-right-color: rgb(52 211 153 / var(--tw-border-opacity)); + border-right-color: rgb(34 197 94 / var(--tw-border-opacity)); } -.border-b-green-500 { +.border-r-orange-600 { --tw-border-opacity: 1; - border-bottom-color: rgb(34 197 94 / var(--tw-border-opacity)); + border-right-color: rgb(234 88 12 / var(--tw-border-opacity)); } -.border-r-green-500 { - --tw-border-opacity: 1; - border-right-color: rgb(34 197 94 / var(--tw-border-opacity)); +.bg-base-100 { + --tw-bg-opacity: 1; + background-color: hsl(var(--b1) / var(--tw-bg-opacity)); } .bg-black { @@ -3185,6 +3482,11 @@ html { background-color: rgb(79 70 229 / var(--tw-bg-opacity)); } +.bg-primary { + --tw-bg-opacity: 1; + background-color: hsl(var(--p) / var(--tw-bg-opacity)); +} + .bg-teal-200 { --tw-bg-opacity: 1; background-color: rgb(153 246 228 / var(--tw-bg-opacity)); @@ -3199,11 +3501,6 @@ html { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-yellow-500 { - --tw-bg-opacity: 1; - background-color: rgb(234 179 8 / var(--tw-bg-opacity)); -} - .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } @@ -3244,12 +3541,16 @@ html { fill: currentColor; } +.fill-emerald-400 { + fill: #34d399; +} + .stroke-current { stroke: currentColor; } -.stroke-info { - stroke: hsl(var(--in) / 1); +.stroke-black { + stroke: #000; } .object-none { @@ -3288,6 +3589,11 @@ html { padding-right: 0.25rem; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -3318,6 +3624,11 @@ html { padding-bottom: 3rem; } +.py-16 { + padding-top: 4rem; + padding-bottom: 4rem; +} + .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -3328,21 +3639,16 @@ html { padding-bottom: 0.75rem; } +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + .py-\[0\.4375rem\] { padding-top: 0.4375rem; padding-bottom: 0.4375rem; } -.py-0 { - padding-top: 0px; - padding-bottom: 0px; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - .pl-10 { padding-left: 2.5rem; } @@ -3355,6 +3661,10 @@ html { padding-left: 1.5rem; } +.pt-0 { + padding-top: 0px; +} + .text-left { text-align: left; } @@ -3443,6 +3753,10 @@ html { text-transform: lowercase; } +.normal-case { + text-transform: none; +} + .italic { font-style: italic; } @@ -3467,11 +3781,26 @@ html { letter-spacing: 0.05em; } +.text-amber-950 { + --tw-text-opacity: 1; + color: rgb(69 26 3 / var(--tw-text-opacity)); +} + .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } +.text-emerald-400 { + --tw-text-opacity: 1; + color: rgb(52 211 153 / var(--tw-text-opacity)); +} + +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); @@ -3502,6 +3831,11 @@ html { color: rgb(100 116 139 / var(--tw-text-opacity)); } +.text-success { + --tw-text-opacity: 1; + color: hsl(var(--su) / var(--tw-text-opacity)); +} + .text-teal-200 { --tw-text-opacity: 1; color: rgb(153 246 228 / var(--tw-text-opacity)); @@ -3512,11 +3846,6 @@ html { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-amber-950 { - --tw-text-opacity: 1; - color: rgb(69 26 3 / var(--tw-text-opacity)); -} - .opacity-0 { opacity: 0; } @@ -3525,6 +3854,12 @@ html { opacity: 1; } +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-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); @@ -3548,6 +3883,16 @@ html { --tw-shadow: var(--tw-shadow-colored); } +.shadow-emerald-400\/50 { + --tw-shadow-color: rgb(52 211 153 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-primary { + --tw-shadow-color: hsl(var(--p) / 1); + --tw-shadow: var(--tw-shadow-colored); +} + .outline-none { outline: 2px solid transparent; outline-offset: 2px; @@ -3581,10 +3926,25 @@ html { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.ring-0 { + --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(0px + 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-blue-500\/50 { + --tw-ring-color: rgb(59 130 246 / 0.5); +} + +.ring-emerald-400 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity)); +} + .ring-gray-300 { --tw-ring-opacity: 1; --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); @@ -3600,10 +3960,6 @@ html { --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity)); } -.ring-blue-500\/50 { - --tw-ring-color: rgb(59 130 246 / 0.5); -} - .brightness-125 { --tw-brightness: brightness(1.25); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -3738,11 +4094,6 @@ input.valid { top: 0px; } -.before\:left-\[15px\]::before { - content: var(--tw-content); - left: 15px; -} - .before\:z-40::before { content: var(--tw-content); z-index: 40; @@ -3764,12 +4115,6 @@ input.valid { 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)); } -.before\:bg-gray-500::before { - content: var(--tw-content); - --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); -} - .before\:bg-red-600::before { content: var(--tw-content); --tw-bg-opacity: 1; @@ -3815,23 +4160,12 @@ input.valid { 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)); } -.after\:bg-gray-500::after { - content: var(--tw-content); - --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); -} - .after\:bg-red-600::after { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } -.before\:after\:absolute::after::before { - content: var(--tw-content); - position: absolute; -} - .checked\:accent-blue-700:checked { accent-color: #1d4ed8; } @@ -3926,18 +4260,13 @@ input.valid { background-color: rgb(99 102 241 / var(--tw-bg-opacity)); } -.hover\:bg-white:hover { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - .hover\:bg-transparent:hover { background-color: transparent; } -.hover\:bg-red-400:hover { +.hover\:bg-white:hover { --tw-bg-opacity: 1; - background-color: rgb(248 113 113 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .hover\:from-cyan-400:hover { @@ -3986,6 +4315,22 @@ input.valid { --tw-shadow: var(--tw-shadow-colored); } +.hover\:shadow-emerald-400\/50:hover { + --tw-shadow-color: rgb(52 211 153 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.hover\:ring-2:hover { + --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); +} + +.hover\:ring-emerald-400:hover { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity)); +} + .hover\:before\:bg-red-400:hover::before { content: var(--tw-content); --tw-bg-opacity: 1; @@ -4007,11 +4352,6 @@ input.valid { border-color: rgb(59 130 246 / var(--tw-border-opacity)); } -.focus\:bg-gray-500:focus { - --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); -} - .focus\:shadow-lg:focus { --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); @@ -4034,15 +4374,15 @@ input.valid { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-0:focus { +.focus\:ring-4: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(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + 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\:ring-4:focus { +.focus\:ring-0: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(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + 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); } @@ -4055,6 +4395,15 @@ input.valid { --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); } +.focus\:ring-blue-500\/50:focus { + --tw-ring-color: rgb(59 130 246 / 0.5); +} + +.focus\:ring-emerald-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity)); +} + .focus\:ring-green-400:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity)); @@ -4070,10 +4419,6 @@ input.valid { --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity)); } -.focus\:ring-blue-500\/50:focus { - --tw-ring-color: rgb(59 130 246 / 0.5); -} - .focus-visible\:outline:focus-visible { outline-style: solid; } @@ -4133,20 +4478,16 @@ input.valid { background-color: rgb(107 114 128 / var(--tw-bg-opacity)); } - .dark\:bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - } - - .dark\:bg-transparent { - background-color: transparent; - } - .dark\:bg-gray-600 { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } + .dark\:text-gray-100 { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity)); + } + .dark\:text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -4157,11 +4498,6 @@ input.valid { color: rgb(255 255 255 / var(--tw-text-opacity)); } - .dark\:text-gray-100 { - --tw-text-opacity: 1; - color: rgb(243 244 246 / var(--tw-text-opacity)); - } - .dark\:hover\:bg-gray-200\/80:hover { background-color: rgb(229 231 235 / 0.8); } @@ -4232,6 +4568,10 @@ input.valid { margin-right: 2rem; } + .lg\:ml-4 { + margin-left: 1rem; + } + .lg\:mt-0 { margin-top: 0px; } @@ -4276,14 +4616,26 @@ input.valid { flex-direction: row; } + .lg\:flex-row-reverse { + flex-direction: row-reverse; + } + .lg\:flex-col { flex-direction: column; } + .lg\:items-start { + align-items: flex-start; + } + .lg\:items-center { align-items: center; } + .lg\:justify-start { + justify-content: flex-start; + } + .lg\:justify-between { justify-content: space-between; } @@ -4293,6 +4645,10 @@ input.valid { padding-right: 2rem; } + .lg\:pl-10 { + padding-left: 2.5rem; + } + .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -4303,6 +4659,11 @@ input.valid { line-height: 1; } + .lg\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } + .lg\:transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); diff --git a/public/home.html b/public/home.html index 099240a..27b0810 100644 --- a/public/home.html +++ b/public/home.html @@ -1,621 +1,354 @@ - + Home - -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
gLinkURLEditDelete
1 - - - - -
2 - - - -
3 - - - + + - - - - -
-
-

+ +

+
+

How it works

-
-
- pic2 -

+

+
+ pic2 +

Step 1 -

+

+

Create the GLink. You can either create a regular shortened URL, or a geo-restricted one, in which case you can restrict it to a specific radius around your current location.

-
+
pic2 -

+

Step 2 -

+

+

+ Distribute the GLink. If you created a regular link i.e. with no restrictions, then the service works similar to other link shorteners, like TinyURL or Bitly. +

-
+
pic2 -

+

Step 3 -

+

+

+ If the link is geo-restricted, then anyone who accesses it will have to provide their location co-ordinates for authorization. +

diff --git a/public/images/GLink-Logo-alt.svg b/public/images/GLink-Logo-alt.svg new file mode 100644 index 0000000..47b0e52 --- /dev/null +++ b/public/images/GLink-Logo-alt.svg @@ -0,0 +1,3527 @@ + + + + diff --git a/public/images/GLink-Logo.svg b/public/images/GLink-Logo.svg new file mode 100644 index 0000000..ce3c248 --- /dev/null +++ b/public/images/GLink-Logo.svg @@ -0,0 +1,587 @@ + + + + diff --git a/public/images/step1.png b/public/images/step1.png new file mode 100644 index 0000000..7a00d97 Binary files /dev/null and b/public/images/step1.png differ diff --git a/public/links.html b/public/links.html new file mode 100644 index 0000000..ff2aea6 --- /dev/null +++ b/public/links.html @@ -0,0 +1,349 @@ + + + + + My Links + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
gLinkURLEditDelete
1 + + + + +
2 + + + + +
3 + + + + +
+
+ +
+ + + \ No newline at end of file