Skip to content

Instantly share code, notes, and snippets.

@hieutran
Last active May 21, 2024 09:25
Show Gist options
  • Save hieutran/bc0aee48608710f08fd9d4ef0eecc311 to your computer and use it in GitHub Desktop.
Save hieutran/bc0aee48608710f08fd9d4ef0eecc311 to your computer and use it in GitHub Desktop.
login.html
<html lang="en"><head><style id="lumo-typography-props">
html {
/* prettier-ignore */
--lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
/* Font sizes */
--lumo-font-size-xxs: 0.75rem;
--lumo-font-size-xs: 0.8125rem;
--lumo-font-size-s: 0.875rem;
--lumo-font-size-m: 1rem;
--lumo-font-size-l: 1.125rem;
--lumo-font-size-xl: 1.375rem;
--lumo-font-size-xxl: 1.75rem;
--lumo-font-size-xxxl: 2.5rem;
/* Line heights */
--lumo-line-height-xs: 1.25;
--lumo-line-height-s: 1.375;
--lumo-line-height-m: 1.625;
}
</style><style id="lumo-spacing-props">
html {
/* Square */
--lumo-space-xs: 0.25rem;
--lumo-space-s: 0.5rem;
--lumo-space-m: 1rem;
--lumo-space-l: 1.5rem;
--lumo-space-xl: 2.5rem;
/* Wide */
--lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
--lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
--lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
--lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
--lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
/* Tall */
--lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
--lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
--lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
--lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
--lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
}
</style><style id="lumo-color-props">
html {
/* Base (background) */
--lumo-base-color: #fff;
/* Tint */
--lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
--lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
--lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
--lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
--lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
--lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
--lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
--lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
--lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
--lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
--lumo-tint: #fff;
/* Shade */
--lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
--lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
--lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
--lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
--lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
--lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
--lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
--lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
--lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
--lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
--lumo-shade: hsl(214, 35%, 15%);
/* Contrast */
--lumo-contrast-5pct: var(--lumo-shade-5pct);
--lumo-contrast-10pct: var(--lumo-shade-10pct);
--lumo-contrast-20pct: var(--lumo-shade-20pct);
--lumo-contrast-30pct: var(--lumo-shade-30pct);
--lumo-contrast-40pct: var(--lumo-shade-40pct);
--lumo-contrast-50pct: var(--lumo-shade-50pct);
--lumo-contrast-60pct: var(--lumo-shade-60pct);
--lumo-contrast-70pct: var(--lumo-shade-70pct);
--lumo-contrast-80pct: var(--lumo-shade-80pct);
--lumo-contrast-90pct: var(--lumo-shade-90pct);
--lumo-contrast: var(--lumo-shade);
/* Text */
--lumo-header-text-color: var(--lumo-contrast);
--lumo-body-text-color: var(--lumo-contrast-90pct);
--lumo-secondary-text-color: var(--lumo-contrast-70pct);
--lumo-tertiary-text-color: var(--lumo-contrast-50pct);
--lumo-disabled-text-color: var(--lumo-contrast-30pct);
/* Primary */
--lumo-primary-color: hsl(214, 100%, 48%);
--lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
--lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
--lumo-primary-text-color: hsl(214, 100%, 43%);
--lumo-primary-contrast-color: #fff;
/* Error */
--lumo-error-color: hsl(3, 85%, 48%);
--lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
--lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
--lumo-error-text-color: hsl(3, 89%, 42%);
--lumo-error-contrast-color: #fff;
/* Success */
--lumo-success-color: hsl(145, 72%, 30%);
--lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
--lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
--lumo-success-text-color: hsl(145, 85%, 25%);
--lumo-success-contrast-color: #fff;
/* Warning */
--lumo-warning-color: hsl(48, 100%, 50%);
--lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
--lumo-warning-text-color: hsl(32, 100%, 30%);
--lumo-warning-contrast-color: var(--lumo-shade-90pct);
}
/* forced-colors mode adjustments */
@media (forced-colors: active) {
html {
--lumo-disabled-text-color: GrayText;
}
}
</style>
<script initial="">window.Vaadin = window.Vaadin || {};window.Vaadin.VaadinLicenseChecker = { maybeCheck: (productInfo) => { }};window.Vaadin.devTools = window.Vaadin.devTools || {};window.Vaadin.devTools.createdCvdlElements = window.Vaadin.devTools.createdCvdlElements || [];window.Vaadin.originalCustomElementDefineFn = window.Vaadin.originalCustomElementDefineFn || window.customElements.define;window.customElements.define = function (tagName, constructor, ...args) {const { cvdlName, version } = constructor;if (cvdlName && version) { const { connectedCallback } = constructor.prototype; constructor.prototype.connectedCallback = function () { window.Vaadin.devTools.createdCvdlElements.push(this); if (connectedCallback) { connectedCallback.call(this); } }}window.Vaadin.originalCustomElementDefineFn.call(this, tagName, constructor, ...args);};</script>
<script initial="">window.Vaadin = window.Vaadin || {};window.Vaadin.ConsoleErrors = window.Vaadin.ConsoleErrors || [];const browserConsoleError = window.console.error.bind(window.console);console.error = (...args) => { browserConsoleError(...args); window.Vaadin.ConsoleErrors.push(args);};window.onerror = (message, source, lineno, colno, error) => {const location=source+':'+lineno+':'+colno;window.Vaadin.ConsoleErrors.push([message, '('+location+')']);};window.addEventListener('unhandledrejection', e => { window.Vaadin.ConsoleErrors.push([e.reason]);});</script>
<script initial="">window.Vaadin.devToolsPlugins = [];
window.Vaadin.devToolsConf = {"enable":true,"url":"./VAADIN/push","backend":"SPRING_BOOT_DEVTOOLS","liveReloadPort":35729,"token":"b93de47f-5c8b-4bcd-b104-43423b3d6486"};
</script>
<script initial="">window.Vaadin = window.Vaadin || {};
window.Vaadin.developmentMode = true;
</script>
<script initial="">if (!('CSSLayerBlockRule' in window)) {
window.location.search='v-r=oldbrowser';
}
</script>
<script initial="">window.Vaadin = window.Vaadin || {};window.Vaadin.TypeScript= {};</script><base href=".">
<script type="text/javascript">window.JSCompiler_renameProperty = function(a) { return a;}</script>
<script type="module">import { injectIntoGlobalHook } from "/VAADIN/@react-refresh";
injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;</script>
<script type="module">
import { inject } from "/VAADIN/@vite-plugin-checker-runtime";
inject({
overlayConfig: {},
base: "/VAADIN/",
});
</script>
<script type="module" src="/VAADIN/@vite/client"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer">
<style>
body, #outlet {
height: 100vh;
width: 100%;
margin: 0;
}
</style><!-- index.ts is included here automatically (either by the dev server or during the build) -->
<script type="module" src="/VAADIN/generated/vite-devmode.ts"></script>
<script type="module" src="/VAADIN/generated/vaadin.ts"></script>
<style>.v-reconnect-dialog,.v-system-error {position: absolute;color: black;background: white;top: 1em;right: 1em;border: 1px solid black;padding: 1em;z-index: 10000;max-width: calc(100vw - 4em);max-height: calc(100vh - 4em);overflow: auto;} .v-system-error {color: indianred;pointer-events: auto;} .v-system-error h3, .v-system-error b {color: red;}</style>
<style>[hidden] { display: none !important; }</style><!--CSSImport end--><!--Stylesheet end-->
<script initial="" src="./VAADIN/static/push/vaadinPush.js"></script>
<style id="css-loading-indicator">
@keyframes v-progress-start {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
@keyframes v-progress-delay {
0% {
width: 50%;
}
100% {
width: 90%;
}
}
@keyframes v-progress-wait {
0% {
width: 90%;
height: 4px;
}
3% {
width: 91%;
height: 7px;
}
100% {
width: 96%;
height: 7px;
}
}
@keyframes v-progress-wait-pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.v-loading-indicator,
.v-status-message {
position: fixed;
z-index: 251;
left: 0;
right: auto;
top: 0;
background-color: var(--lumo-primary-color, var(--material-primary-color, blue));
transition: none;
}
.v-loading-indicator {
width: 50%;
height: 4px;
opacity: 1;
pointer-events: none;
animation: v-progress-start 1000ms 200ms both;
}
.v-loading-indicator[style*='none'] {
display: block !important;
width: 100%;
opacity: 0;
animation: none;
transition: opacity 500ms 300ms, width 300ms;
}
.v-loading-indicator.second {
width: 90%;
animation: v-progress-delay 3.8s forwards;
}
.v-loading-indicator.third {
width: 96%;
animation: v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards;
}
vaadin-connection-indicator[offline] .v-loading-indicator,
vaadin-connection-indicator[reconnecting] .v-loading-indicator {
display: none;
}
.v-status-message {
opacity: 0;
width: 100%;
max-height: var(--status-height-collapsed, 8px);
overflow: hidden;
background-color: var(--status-bg-color-online, var(--lumo-primary-color, var(--material-primary-color, blue)));
color: var(
--status-text-color-online,
var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))
);
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
transition: all 0.5s;
padding: 0 0.5em;
}
vaadin-connection-indicator[offline] .v-status-message,
vaadin-connection-indicator[reconnecting] .v-status-message {
opacity: 1;
background-color: var(--status-bg-color-offline, var(--lumo-shade, #333));
color: var(
--status-text-color-offline,
var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))
);
background-image: repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0) 10px,
rgba(255, 255, 255, 0.1) 10px,
rgba(255, 255, 255, 0.1) 20px
);
}
vaadin-connection-indicator[reconnecting] .v-status-message {
animation: show-reconnecting-status 2s;
}
vaadin-connection-indicator[offline] .v-status-message:hover,
vaadin-connection-indicator[reconnecting] .v-status-message:hover,
vaadin-connection-indicator[expanded] .v-status-message {
max-height: var(--status-height, 1.75rem);
}
vaadin-connection-indicator[expanded] .v-status-message {
opacity: 1;
}
.v-status-message span {
display: flex;
align-items: center;
justify-content: center;
height: var(--status-height, 1.75rem);
}
vaadin-connection-indicator[reconnecting] .v-status-message span::before {
content: '';
width: 1em;
height: 1em;
border-top: 2px solid
var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));
border-left: 2px solid
var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
border-radius: 50%;
box-sizing: border-box;
animation: v-spin 0.4s linear infinite;
margin: 0 0.5em;
}
@keyframes v-spin {
100% {
transform: rotate(360deg);
}
}
</style>
<style>
/* Use units so that the values can be used in calc() */
html {
--safe-area-inset-top: env(safe-area-inset-top, 0px);
--safe-area-inset-right: env(safe-area-inset-right, 0px);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
--safe-area-inset-left: env(safe-area-inset-left, 0px);
}
</style>
<style type="text/css" data-vite-dev-id="/Users/hieutran/workspace/gobiz-ff/mog/frontend/app.css">@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
/*
! tailwindcss v3.4.3 | 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 */
-o-tab-size: 4;
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]) {
-webkit-text-decoration: underline dotted;
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 */
letter-spacing: 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,
input:where([type='button']),
input:where([type='reset']),
input:where([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::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
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: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::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: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.container{
width: 100%;
}
@media (min-width: 640px){
.container{
max-width: 640px;
}
}
@media (min-width: 768px){
.container{
max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
max-width: 1536px;
}
}
.visible{
visibility: visible;
}
.collapse{
visibility: collapse;
}
.static{
position: static;
}
.fixed{
position: fixed;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.sticky{
position: sticky;
}
.bottom-\[32px\]{
bottom: 32px;
}
.left-\[10px\]{
left: 10px;
}
.left-\[32px\]{
left: 32px;
}
.top-0{
top: 0px;
}
.top-\[13px\]{
top: 13px;
}
.top-\[18px\]{
top: 18px;
}
.top-\[5px\]{
top: 5px;
}
.m-0{
margin: 0px;
}
.m-12{
margin: 3rem;
}
.mx-auto{
margin-left: auto;
margin-right: auto;
}
.mb-\[24px\]{
margin-bottom: 24px;
}
.mb-\[32px\]{
margin-bottom: 32px;
}
.mb-\[8px\]{
margin-bottom: 8px;
}
.ml-4{
margin-left: 1rem;
}
.mt-8{
margin-top: 2rem;
}
.mt-\[12px\]{
margin-top: 12px;
}
.mt-\[24px\]{
margin-top: 24px;
}
.block{
display: block;
}
.inline{
display: inline;
}
.flex{
display: flex;
}
.grid{
display: grid;
}
.contents{
display: contents;
}
.hidden{
display: none;
}
.h-\[22px\]{
height: 22px;
}
.h-\[48px\]{
height: 48px;
}
.h-screen{
height: 100vh;
}
.min-h-screen{
min-height: 100vh;
}
.w-\[22px\]{
width: 22px;
}
.w-\[32px\]{
width: 32px;
}
.w-\[80\%\]{
width: 80%;
}
.w-full{
width: 100%;
}
.max-w-screen-xl{
max-width: 1280px;
}
.flex-1{
flex: 1 1 0%;
}
.flex-shrink{
flex-shrink: 1;
}
.transform{
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));
}
.resize{
resize: both;
}
.flex-col{
flex-direction: column;
}
.items-start{
align-items: flex-start;
}
.items-center{
align-items: center;
}
.justify-center{
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.gap-3{
gap: 0.75rem;
}
.gap-y-\[16px\]{
row-gap: 16px;
}
.gap-y-\[32px\]{
row-gap: 32px;
}
.rounded-\[12px\]{
border-radius: 12px;
}
.rounded-\[20px\]{
border-radius: 20px;
}
.rounded-\[4px\]{
border-radius: 4px;
}
.rounded-lg{
border-radius: 0.5rem;
}
.border{
border-width: 1px;
}
.border-none{
border-style: none;
}
.bg-\[\#F6F6F6\]{
--tw-bg-opacity: 1;
background-color: rgb(246 246 246 / var(--tw-bg-opacity));
}
.bg-\[\#f6f6f6\]{
--tw-bg-opacity: 1;
background-color: rgb(246 246 246 / var(--tw-bg-opacity));
}
.bg-primary{
--tw-bg-opacity: 1;
background-color: rgb(255 64 0 / var(--tw-bg-opacity));
}
.bg-transparent{
background-color: transparent;
}
.bg-white{
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-\[url\(\/VAADIN\/assets\/image\/login-bg\.png\)\]{
background-image: url(/VAADIN/assets/image/login-bg.png);
}
.bg-\[url\(\/VAADIN\/assets\/image\/sabo-id-feature\.svg\)\]{
background-image: url(/VAADIN/assets/image/sabo-id-feature.svg);
}
.bg-contain{
background-size: contain;
}
.bg-cover{
background-size: cover;
}
.bg-center{
background-position: center;
}
.bg-no-repeat{
background-repeat: no-repeat;
}
.p-2{
padding: 0.5rem;
}
.p-4{
padding: 1rem;
}
.p-\[32px\]{
padding: 32px;
}
.px-\[32px\]{
padding-left: 32px;
padding-right: 32px;
}
.py-\[32px\]{
padding-top: 32px;
padding-bottom: 32px;
}
.text-center{
text-align: center;
}
.text-\[12px\]{
font-size: 12px;
}
.text-\[14px\]{
font-size: 14px;
}
.text-\[16px\]{
font-size: 16px;
}
.text-\[18px\]{
font-size: 18px;
}
.text-\[24px\]{
font-size: 24px;
}
.text-\[28px\]{
font-size: 28px;
}
.font-bold{
font-weight: 700;
}
.font-medium{
font-weight: 500;
}
.italic{
font-style: italic;
}
.leading-\[48px\]{
line-height: 48px;
}
.text-gray-900{
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-primary{
--tw-text-opacity: 1;
color: rgb(255 64 0 / var(--tw-text-opacity));
}
.text-txt-blue{
--tw-text-opacity: 1;
color: rgb(24 144 255 / var(--tw-text-opacity));
}
.text-txt-primary{
--tw-text-opacity: 1;
color: rgb(26 26 26 / var(--tw-text-opacity));
}
.text-txt-secondary{
--tw-text-opacity: 1;
color: rgb(90 90 90 / var(--tw-text-opacity));
}
.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.underline{
text-decoration-line: underline;
}
.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-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);
}
.outline{
outline-style: solid;
}
.blur{
--tw-blur: blur(8px);
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);
}
.filter{
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);
}
.backdrop-filter{
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all{
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300{
transition-duration: 300ms;
}
.ease-in-out{
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
:root {
font-family: "Roboto", sans-serif;
}
.hover\:shadow:hover{
--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);
}
.focus\:shadow-sm:focus{
--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);
}
.focus\:outline-none:focus{
outline: 2px solid transparent;
outline-offset: 2px;
}
@media (min-width: 640px){
.sm\:m-10{
margin: 2.5rem;
}
.sm\:rounded-\[20px\]{
border-radius: 20px;
}
}
@media (min-width: 768px){
.md\:block{
display: block;
}
}
@media (min-width: 1024px){
.lg\:block{
display: block;
}
.lg\:flex{
display: flex;
}
.lg\:hidden{
display: none;
}
.lg\:h-\[458px\]{
height: 458px;
}
.lg\:w-1\/3{
width: 33.333333%;
}
.lg\:w-2\/3{
width: 66.666667%;
}
.lg\:w-\[800px\]{
width: 800px;
}
.lg\:max-w-full{
max-width: 100%;
}
.lg\:rounded-\[4px\]{
border-radius: 4px;
}
.lg\:bg-none{
background-image: none;
}
.lg\:text-left{
text-align: left;
}
.lg\:text-\[24px\]{
font-size: 24px;
}
}
@media (min-width: 1280px){
.xl\:m-16{
margin: 4rem;
}
.xl\:w-5\/12{
width: 41.666667%;
}
}</style><title>Sabo ID | Login</title></head>
<body>
<!-- This outlet div is where the views are rendered -->
<div id="outlet"><vaadin-app-layout primary-section="drawer" drawer-opened="" style="--_vaadin-app-layout-navbar-offset-size: 0px; --_vaadin-app-layout-navbar-offset-size-bottom: 0px; --_vaadin-app-layout-drawer-offset-size: 0px; --_vaadin-app-layout-drawer-width: 0;"><div><div id="top-bar" class="bg-white shadow sticky top-0 hidden md:block"><ul class="flex items-center gap-3"><li class=""><a href="" class="block text-txt-secondary text-[12px] p-2">Trang chủ</a></li><li class=""><a href="" class="block text-txt-secondary text-[12px] p-2">Về chúng tôi</a></li><li class=""><a href="" class="block text-txt-secondary text-[12px] p-2">Tải công cụ đặt hàng</a></li><li class=""><a href="https://1688.com" class="block text-txt-secondary text-[12px] p-2">1688.com</a></li><li class=""><a href="" class="block text-txt-secondary text-[12px] p-2">Liên hệ</a></li></ul></div><div class="min-h-screen bg-[#f6f6f6] text-gray-900 flex justify-center bg-[url(/VAADIN/assets/image/login-bg.png)] lg:bg-none bg-no-repeat bg-cover"><div class="max-w-screen-xl lg:max-w-full m-0 sm:m-10 flex justify-center flex-1"><div class="lg:w-2/3 bg-transparent text-center hidden lg:flex"><div class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat bg-[url(/VAADIN/assets/image/sabo-id-feature.svg)]"></div></div><div class="w-[80%] mt-[24px] rounded-[12px] lg:w-1/3 xl:w-5/12 sm:rounded-[20px] shadow bg-white relative"><div class="px-[32px] py-[32px]"><div class="text-center mb-[24px] lg:hidden"><a href="/" class="text-center block"><img class="inline" src="/VAADIN/assets/image/sabo-1688.svg" alt="Logo"></a></div><div class="text-[24px] relative text-center mb-[8px] lg:text-left"><div class="fas fa-chevron-left text-[16px] absolute top-[5px] left-[10px] lg:hidden"></div><div class="text-[18px] lg:text-[24px]">Chào mừng bạn tới <span class="text-primary font-bold">SaboMall</span></div></div><div class="hidden lg:block text-[14px] text-txt-secondary mb-[32px]">Bạn chưa có tài khoản Sabo ID? <span class="text-primary font-medium">Đăng ký ngay</span></div><div class="mt-[12px] flex flex-col items-center mb-[24px]"><div class="w-full flex-1 mt-8"><div class="flex flex-col items-center gap-y-[16px]"><a href="/oauth2/authorization/gobiz" class="w-full relative shadow-sm rounded-lg lg:rounded-[4px] h-[48px] leading-[48px] bg-[#F6F6F6] text-txt-primary text-center text-[14px] transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"><img class="w-[32px] top-[18px] absolute left-[10px]" src="/VAADIN/assets/image/auth-gobiz.svg" alt="Gobiz ID"><span class="ml-4">Đăng nhập bằng Gobiz ID</span></a><a href="/oauth2/authorization/google" class="w-full relative shadow-sm rounded-lg lg:rounded-[4px] h-[48px] leading-[48px] bg-[#F6F6F6] text-txt-primary text-center text-[14px] transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"><img class="w-[22px] h-[22px] top-[13px] absolute left-[10px]" src="/VAADIN/assets/image/auth-google.svg" alt="Google"><span class="ml-4">Đăng nhập bằng Google</span></a></div></div></div><div class="text-[12px] text-center text-txt-secondary lg:hidden">Bạn chưa có tài khoản Sabo ID? <span class="text-primary font-medium">Đăng ký ngay</span></div><img class="absolute bottom-[32px] left-[32px]" src="/VAADIN/assets/image/sabo-logo-txt.svg" alt=""></div></div></div></div></div></vaadin-app-layout></div>
<script>window.Vaadin = window.Vaadin || {};
window.Vaadin.registrations = window.Vaadin.registrations || [];
window.Vaadin.registrations.push({"is":"flow/SpringInstantiator","version":"24.3.7"},{"is":"flow/hotdeploy","version":"24.3.7"},{"is":"java","version":"21.0.2"},{"is":"SpringFramework","version":"6.1.5"},{"is":"routing/client","version":"24.3.7"},{"is":"hilla","version":"?"},{"is":"SpringBoot","version":"3.2.4"},{"is":"hilla+react","version":"2.5.7"});</script><vaadin-dev-tools></vaadin-dev-tools>
<vite-plugin-checker-error-overlay></vite-plugin-checker-error-overlay><vaadin-connection-indicator><!---->
<div class="v-loading-indicator " style="display: none"></div>
<div class="v-status-message ">
<span class="text"> <!--?lit$899395227$-->Online </span>
</div>
</vaadin-connection-indicator></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment