mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-06-21 05:10:41 +00:00
Improve app startup and route fallbacks
This commit is contained in:
shuaiplus
@@ -19,6 +19,427 @@
|
||||
@apply mt-2.5;
|
||||
}
|
||||
|
||||
.public-send-card-head {
|
||||
@apply mb-2 flex items-center justify-between gap-2 text-sm font-bold;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.public-send-copy-btn {
|
||||
@apply h-8 shrink-0 px-3 text-sm;
|
||||
}
|
||||
|
||||
.not-found-page {
|
||||
@apply relative grid min-h-full place-items-center overflow-hidden p-6 text-center;
|
||||
background:
|
||||
radial-gradient(circle at 50% 42%, rgba(28, 118, 255, 0.24), transparent 27rem),
|
||||
radial-gradient(circle at 16% 84%, rgba(22, 163, 255, 0.10), transparent 22rem),
|
||||
linear-gradient(180deg, #020b1a 0%, #061328 48%, #0a1730 100%);
|
||||
}
|
||||
|
||||
.not-found-shell {
|
||||
@apply relative z-20 grid w-full max-w-[620px] justify-items-center gap-5 px-4 py-7 text-center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.not-found-space {
|
||||
@apply pointer-events-none absolute inset-0 overflow-hidden;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
@keyframes not-found-star-fall {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100vh);
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(100vh);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes not-found-astronaut-spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.not-found-star-box {
|
||||
@apply absolute left-0 top-0 z-10 h-full w-full;
|
||||
}
|
||||
|
||||
.not-found-star-box-1 {
|
||||
animation: not-found-star-fall 9s linear infinite;
|
||||
}
|
||||
|
||||
.not-found-star-box-2 {
|
||||
animation: not-found-star-fall 9s -2.1s linear infinite;
|
||||
}
|
||||
|
||||
.not-found-star-box-3 {
|
||||
animation: not-found-star-fall 9s -4.3s linear infinite;
|
||||
}
|
||||
|
||||
.not-found-star-box-4 {
|
||||
animation: not-found-star-fall 9s -6.4s linear infinite;
|
||||
}
|
||||
|
||||
.not-found-star {
|
||||
@apply absolute h-[3px] w-[3px] rounded-full;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.82);
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.not-found-star::before,
|
||||
.not-found-star::after {
|
||||
@apply absolute rounded-full;
|
||||
content: "";
|
||||
background: #fff;
|
||||
box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.not-found-star::before {
|
||||
@apply h-[5px] w-[5px];
|
||||
top: 72px;
|
||||
left: 78px;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.not-found-star::after {
|
||||
@apply h-[7px] w-[7px];
|
||||
top: 10px;
|
||||
left: 168px;
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.not-found-star-position-1 {
|
||||
top: 5vh;
|
||||
left: 8%;
|
||||
}
|
||||
|
||||
.not-found-star-position-2 {
|
||||
top: 23vh;
|
||||
left: 21%;
|
||||
}
|
||||
|
||||
.not-found-star-position-3 {
|
||||
top: 42vh;
|
||||
left: 38%;
|
||||
}
|
||||
|
||||
.not-found-star-position-4 {
|
||||
top: 61vh;
|
||||
left: 56%;
|
||||
}
|
||||
|
||||
.not-found-star-position-5 {
|
||||
top: 15vh;
|
||||
left: 70%;
|
||||
}
|
||||
|
||||
.not-found-star-position-6 {
|
||||
top: 34vh;
|
||||
left: 82%;
|
||||
}
|
||||
|
||||
.not-found-star-position-7 {
|
||||
top: 72vh;
|
||||
left: 93%;
|
||||
}
|
||||
|
||||
.not-found-astronaut {
|
||||
@apply relative z-10;
|
||||
width: 220px;
|
||||
height: 264px;
|
||||
animation: not-found-astronaut-spin 5s linear infinite;
|
||||
filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.28));
|
||||
}
|
||||
|
||||
.not-found-astro-stage {
|
||||
@apply relative grid place-items-center;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.not-found-astro-pack {
|
||||
@apply absolute z-[1];
|
||||
top: 57px;
|
||||
left: 66px;
|
||||
width: 88px;
|
||||
height: 132px;
|
||||
background: #8db0c7;
|
||||
border-radius: 44px 44px 0 0 / 27px 27px 0 0;
|
||||
}
|
||||
|
||||
.not-found-astro-head {
|
||||
@apply absolute z-[3] rounded-full;
|
||||
top: 30px;
|
||||
left: 68px;
|
||||
width: 85px;
|
||||
height: 70px;
|
||||
background: linear-gradient(90deg, #e4ebef 0%, #e4ebef 50%, #fbfdfa 50%, #fbfdfa 100%);
|
||||
}
|
||||
|
||||
.not-found-astro-head::after {
|
||||
@apply absolute rounded-[13px];
|
||||
content: "";
|
||||
top: 13px;
|
||||
left: 16px;
|
||||
width: 53px;
|
||||
height: 44px;
|
||||
background: linear-gradient(180deg, #28c4df 0%, #28c4df 50%, #078dbb 50%, #078dbb 100%);
|
||||
}
|
||||
|
||||
.not-found-astro-head::before {
|
||||
@apply absolute rounded-[5px];
|
||||
content: "";
|
||||
top: 23px;
|
||||
left: -4px;
|
||||
width: 11px;
|
||||
height: 22px;
|
||||
background: #587789;
|
||||
box-shadow: 81px 0 0 #587789;
|
||||
}
|
||||
|
||||
.not-found-astro-body {
|
||||
@apply absolute z-[2];
|
||||
top: 92px;
|
||||
left: 73px;
|
||||
width: 75px;
|
||||
height: 88px;
|
||||
border-radius: 36px / 18px;
|
||||
background: linear-gradient(90deg, #e4ebef 0%, #e4ebef 50%, #fbfdfa 50%, #fbfdfa 100%);
|
||||
}
|
||||
|
||||
.not-found-astro-panel {
|
||||
@apply absolute;
|
||||
top: 18px;
|
||||
left: 11px;
|
||||
width: 53px;
|
||||
height: 36px;
|
||||
background: #b8cdec;
|
||||
}
|
||||
|
||||
.not-found-astro-panel::before {
|
||||
@apply absolute;
|
||||
content: "";
|
||||
top: 8px;
|
||||
left: 6px;
|
||||
width: 27px;
|
||||
height: 5px;
|
||||
background: #fbfdfa;
|
||||
box-shadow: 0 8px 0 #fbfdfa, 0 16px 0 #fbfdfa;
|
||||
}
|
||||
|
||||
.not-found-astro-panel::after {
|
||||
@apply absolute rounded-full;
|
||||
content: "";
|
||||
top: 8px;
|
||||
right: 6px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #fbfdfa;
|
||||
box-shadow: 0 13px 0 2px #fbfdfa;
|
||||
}
|
||||
|
||||
.not-found-astro-arm {
|
||||
@apply absolute z-[2];
|
||||
top: 107px;
|
||||
width: 70px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.not-found-astro-arm-left {
|
||||
left: 28px;
|
||||
background: #e4ebef;
|
||||
border-radius: 0 0 0 34px;
|
||||
}
|
||||
|
||||
.not-found-astro-arm-right {
|
||||
right: 28px;
|
||||
background: #fbfdfa;
|
||||
border-radius: 0 0 34px 0;
|
||||
}
|
||||
|
||||
.not-found-astro-arm::before {
|
||||
@apply absolute;
|
||||
content: "";
|
||||
top: -35px;
|
||||
width: 26px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
.not-found-astro-arm-left::before {
|
||||
left: 0;
|
||||
background: #e4ebef;
|
||||
border-radius: 44px 44px 0 105px / 44px 44px 0 96px;
|
||||
}
|
||||
|
||||
.not-found-astro-arm-right::before {
|
||||
right: 0;
|
||||
background: #fbfdfa;
|
||||
border-radius: 44px 44px 105px 0 / 44px 44px 96px 0;
|
||||
}
|
||||
|
||||
.not-found-astro-arm::after {
|
||||
@apply absolute;
|
||||
content: "";
|
||||
top: -21px;
|
||||
width: 26px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.not-found-astro-arm-left::after {
|
||||
left: 0;
|
||||
background: #6e91a4;
|
||||
}
|
||||
|
||||
.not-found-astro-arm-right::after {
|
||||
right: 0;
|
||||
background: #b6d2e0;
|
||||
}
|
||||
|
||||
.not-found-astro-leg {
|
||||
@apply absolute z-[2];
|
||||
bottom: 62px;
|
||||
width: 26px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.not-found-astro-leg-left {
|
||||
left: 67px;
|
||||
background: #e4ebef;
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
.not-found-astro-leg-right {
|
||||
right: 64px;
|
||||
background: #fbfdfa;
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
|
||||
.not-found-astro-leg::before {
|
||||
@apply absolute;
|
||||
content: "";
|
||||
bottom: -23px;
|
||||
width: 44px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.not-found-astro-leg-left::before {
|
||||
left: -18px;
|
||||
background: #e4ebef;
|
||||
border-bottom: 9px solid #6d96ac;
|
||||
border-radius: 27px 0 0 0;
|
||||
}
|
||||
|
||||
.not-found-astro-leg-right::before {
|
||||
right: -18px;
|
||||
background: #fbfdfa;
|
||||
border-bottom: 9px solid #b0cfe4;
|
||||
border-radius: 0 27px 0 0;
|
||||
}
|
||||
|
||||
.not-found-brand {
|
||||
@apply inline-flex max-w-full items-center justify-center gap-3.5;
|
||||
}
|
||||
|
||||
.not-found-logo {
|
||||
@apply h-14 w-[70px] flex-shrink-0 object-contain;
|
||||
filter: drop-shadow(0 8px 18px rgba(43, 102, 217, 0.22));
|
||||
}
|
||||
|
||||
.not-found-wordmark {
|
||||
@apply block max-w-full;
|
||||
width: clamp(200px, 38vw, 330px);
|
||||
aspect-ratio: 862 / 102;
|
||||
background: #116ff9;
|
||||
mask: url('/nodewarden-wordmark.svg') center / contain no-repeat;
|
||||
-webkit-mask: url('/nodewarden-wordmark.svg') center / contain no-repeat;
|
||||
}
|
||||
|
||||
.not-found-code {
|
||||
@apply rounded-full px-3 py-1 text-sm font-extrabold;
|
||||
background: #eef4ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.not-found-copy {
|
||||
@apply grid justify-items-center gap-3;
|
||||
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
.not-found-shell h1 {
|
||||
@apply m-0 text-3xl font-extrabold leading-tight;
|
||||
color: #f8fbff;
|
||||
}
|
||||
|
||||
.not-found-shell p {
|
||||
@apply m-0 max-w-[420px] text-sm leading-relaxed;
|
||||
color: rgba(220, 232, 251, 0.82);
|
||||
}
|
||||
|
||||
.not-found-action {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.not-found-page {
|
||||
background:
|
||||
radial-gradient(circle at 50% 36%, rgba(28, 118, 255, 0.24), transparent 18rem),
|
||||
radial-gradient(circle at 18% 82%, rgba(22, 163, 255, 0.10), transparent 16rem),
|
||||
linear-gradient(180deg, #020b1a 0%, #061328 48%, #0a1730 100%);
|
||||
}
|
||||
|
||||
.not-found-shell {
|
||||
@apply gap-4 px-5 py-8;
|
||||
}
|
||||
|
||||
.not-found-brand {
|
||||
@apply gap-2.5;
|
||||
}
|
||||
|
||||
.not-found-logo {
|
||||
@apply h-12 w-[60px];
|
||||
}
|
||||
|
||||
.not-found-wordmark {
|
||||
width: clamp(170px, 52vw, 230px);
|
||||
}
|
||||
|
||||
.not-found-space {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.not-found-astronaut {
|
||||
width: 176px;
|
||||
height: 211px;
|
||||
}
|
||||
|
||||
.not-found-astro-stage {
|
||||
height: 224px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.not-found-star-box,
|
||||
.not-found-astronaut {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.inline-status-icon {
|
||||
@apply align-text-bottom;
|
||||
}
|
||||
@@ -33,6 +454,11 @@
|
||||
@apply m-0 mb-1 text-center;
|
||||
}
|
||||
|
||||
.standalone-eyebrow {
|
||||
@apply mb-1 text-center text-xs font-extrabold uppercase tracking-[0.12em];
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.standalone-shell {
|
||||
@apply grid w-[min(640px,100%)] gap-3.5;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user