dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Rename product to Harbor and refine connection timer
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 12s
Details
Build and Deploy Gateway / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-11 13:20:32 +03:00
parent 42c15df8c9
commit 84efbe7450
9 changed files with 305 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/web/styles.css
View File

@@ -60,6 +60,9 @@ p {
--client-muted: oklch(0.53 0.014 145);
--client-accent: oklch(0.62 0.14 151);
--client-accent-soft: oklch(0.92 0.045 151);
--harbor-word: oklch(0.39 0.075 232);
--harbor-connect: oklch(0.57 0.11 185);
--harbor-gateway: oklch(0.61 0.12 72);
grid-template-rows: 1fr;
color-scheme: light;
background: var(--client-bg);
@@ -87,6 +90,43 @@ p {
color: var(--client-text);
}
.harbor-brand {
position: fixed;
top: 24px;
left: 28px;
display: flex;
align-items: center;
gap: 9px;
color: var(--harbor-word);
font-size: 13px;
letter-spacing: -0.035em;
user-select: none;
}
.harbor-brand svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.harbor-brand strong {
font-weight: 800;
}
.harbor-brand em {
color: var(--harbor-connect);
font-style: normal;
font-weight: 600;
}
.harbor-brand.is-gateway em {
color: var(--harbor-gateway);
}
.client-instructions-toggle {
position: fixed;
top: 50%;
@@ -479,30 +519,50 @@ p {
background: transparent;
color: var(--client-muted);
cursor: pointer;
transition: color 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
transition: color 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms ease;
}
.client-power::before {
.client-power::before,
.client-power::after {
content: '';
position: absolute;
width: 58px;
height: 58px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in oklch, var(--client-accent) 42%, transparent), transparent 70%);
opacity: 0;
transform: scale(0.55);
transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.client-power::before {
width: 54px;
height: 54px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in oklch, currentColor 38%, transparent), transparent 70%);
opacity: 0;
filter: blur(2px);
transform: translate3d(0, 4px, 0) scale(0.62);
transition: opacity 1050ms cubic-bezier(0.16, 1, 0.3, 1), transform 1250ms cubic-bezier(0.16, 1, 0.3, 1), filter 1050ms ease;
}
.client-power::after {
width: 24px;
height: 24px;
background: radial-gradient(circle, color-mix(in oklch, currentColor 48%, transparent), transparent 72%);
opacity: 0;
filter: blur(5px);
transform: translate3d(-8px, 7px, 0) scale(0.7);
transition: opacity 850ms cubic-bezier(0.16, 1, 0.3, 1), transform 950ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-power[aria-checked='true']::before {
opacity: 0.75;
transform: scale(1.75);
opacity: 0.76;
filter: blur(3px);
transform: translate3d(-3px, -2px, 0) scale(1.48);
}
.client-power[aria-checked='true']::after {
animation: client-power-light-flicker 4.7s 650ms ease-in-out infinite;
}
.client-power:hover:not(:disabled) {
transform: translateY(-3px) scale(1.08);
color: var(--client-text);
color: var(--client-muted);
}
.client-power[aria-checked='true'] {
@@ -510,8 +570,19 @@ p {
}
.client-power:active:not(:disabled) {
transform: translateY(0) scale(0.92);
transition-duration: 220ms;
opacity: 0.82;
}
.client-power:active:not(:disabled)::before {
animation: none;
opacity: 0.86;
transform: translate3d(3px, -2px, 0) scale(1.56);
}
.client-power:active:not(:disabled)::after {
animation: none;
opacity: 0.7;
transform: translate3d(-7px, 8px, 0) scale(1.18);
}
.client-power:disabled {
@@ -528,11 +599,11 @@ p {
stroke-width: 1.7;
stroke-linecap: round;
filter: drop-shadow(0 0 0 transparent);
transition: filter 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
transition: filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-power:hover:not(:disabled) svg {
filter: drop-shadow(0 0 6px color-mix(in oklch, var(--client-muted) 55%, transparent)) drop-shadow(0 0 18px color-mix(in oklch, var(--client-muted) 22%, transparent));
filter: drop-shadow(0 0 4px color-mix(in oklch, var(--client-muted) 32%, transparent));
}
.client-power[aria-checked='true']:hover:not(:disabled) {
@@ -540,21 +611,18 @@ p {
}
.client-power[aria-checked='true']:hover:not(:disabled) svg {
filter: drop-shadow(0 0 6px color-mix(in oklch, var(--client-accent) 75%, transparent)) drop-shadow(0 0 18px color-mix(in oklch, var(--client-accent) 35%, transparent));
}
.client-power:active:not(:disabled) svg {
transform: scale(0.88);
filter: drop-shadow(0 0 10px var(--client-muted)) drop-shadow(0 0 26px color-mix(in oklch, var(--client-muted) 45%, transparent));
transition-duration: 220ms;
}
.client-power[aria-checked='true']:active:not(:disabled) svg {
filter: drop-shadow(0 0 10px var(--client-accent)) drop-shadow(0 0 26px color-mix(in oklch, var(--client-accent) 55%, transparent));
filter: drop-shadow(0 0 5px color-mix(in oklch, var(--client-accent) 48%, transparent));
}
.client-power[aria-checked='true'] svg {
filter: drop-shadow(0 0 5px color-mix(in oklch, var(--client-accent) 65%, transparent)) drop-shadow(0 0 14px color-mix(in oklch, var(--client-accent) 28%, transparent));
filter: drop-shadow(0 0 4px color-mix(in oklch, var(--client-accent) 42%, transparent));
}
@keyframes client-power-light-flicker {
0%, 100% { opacity: 0.18; transform: translate3d(-8px, 7px, 0) scale(0.82); }
19% { opacity: 0.5; transform: translate3d(7px, 5px, 0) scale(1.08); }
46% { opacity: 0.26; transform: translate3d(8px, -7px, 0) scale(0.78); }
71% { opacity: 0.58; transform: translate3d(-6px, -8px, 0) scale(1.12); }
}
.client-power-section h2 {
@@ -577,11 +645,67 @@ p {
}
.client-duration {
grid-area: 1 / 1;
display: block;
color: var(--client-text);
font-size: 14px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
opacity: 0;
filter: blur(5px);
transition: opacity 260ms ease, filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-duration.is-active {
opacity: 1;
filter: blur(0);
}
.client-duration-stack {
display: grid;
place-items: center;
}
.client-duration-unit .client-duration-part.is-value {
display: inline-block;
min-width: 2ch;
text-align: right;
}
.client-duration-unit .client-duration-part.is-label {
display: inline-block;
text-align: left;
}
.client-duration-unit[data-unit='days'] .is-label { width: 4ch; }
.client-duration-unit[data-unit='hours'] .is-label { width: 5ch; }
.client-duration-unit[data-unit='minutes'] .is-label { width: 6ch; }
.client-duration-unit[data-unit='seconds'] .is-label { width: 7ch; }
.client-duration-unit + .client-duration-unit::before {
content: ' ';
}
.client-duration-toggle {
width: 290px;
min-height: 24px;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}
.client-duration-toggle:hover .client-duration,
.client-duration-toggle:focus-visible .client-duration {
text-shadow: 0 0 10px color-mix(in oklch, var(--client-text) 22%, transparent);
}
.client-duration-toggle:focus-visible {
outline: none;
}
.client-power-section p {
@@ -1229,6 +1353,9 @@ p {
--client-muted: oklch(0.68 0.012 145);
--client-accent: oklch(0.76 0.13 151);
--client-accent-soft: oklch(0.32 0.055 151);
--harbor-word: oklch(0.78 0.07 232);
--harbor-connect: oklch(0.75 0.1 185);
--harbor-gateway: oklch(0.79 0.11 72);
color-scheme: dark;
}
}
@@ -1246,6 +1373,13 @@ p {
padding: 20px 6px;
}
.harbor-brand {
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
}
.client-instructions-toggle {
left: 8px;
}
@@ -1277,6 +1411,7 @@ p {
@media (prefers-reduced-motion: reduce) {
.client-power,
.client-power::before,
.client-power::after,
.client-power svg,
.client-usage-bar i,
.client-subscription-refresh,
@@ -1290,6 +1425,7 @@ p {
.client-access-tab,
.client-access-point,
.client-copy-feedback,
.client-duration,
.client-instructions,
.client-instructions-toggle,
.client-instructions-toggle svg,