|
|
|
|
@@ -584,10 +584,18 @@ function reloadApp() {
|
|
|
|
|
<template v-else-if="showInitialAppLoading">
|
|
|
|
|
<main class="appLoading">
|
|
|
|
|
<section class="appLoading__card">
|
|
|
|
|
<div class="appLoading__eyebrow">Loading</div>
|
|
|
|
|
<h1 class="appLoading__title">접속 정보를 확인하고 있어요.</h1>
|
|
|
|
|
<p class="appLoading__desc">로그인 상태와 기본 데이터를 확인한 뒤 화면을 보여드릴게요.</p>
|
|
|
|
|
<div class="appLoading__spinner" aria-hidden="true"></div>
|
|
|
|
|
<div class="appLoading__brand" aria-hidden="true">
|
|
|
|
|
<div class="appLoading__logo">
|
|
|
|
|
<span class="appLoading__logoMain">T</span>
|
|
|
|
|
<span class="appLoading__logoBar"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="appLoading__orb appLoading__orb--mint"></span>
|
|
|
|
|
<span class="appLoading__orb appLoading__orb--blue"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="appLoading__eyebrow">Tier Maker</div>
|
|
|
|
|
<h1 class="appLoading__title">티어표를 준비하고 있어요</h1>
|
|
|
|
|
<p class="appLoading__desc">잠시만 기다려 주세요.</p>
|
|
|
|
|
<div class="appLoading__progress" aria-hidden="true"><span></span></div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
</template>
|
|
|
|
|
@@ -860,6 +868,15 @@ function reloadApp() {
|
|
|
|
|
var(--theme-shell-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background:
|
|
|
|
|
radial-gradient(circle at 50% 18%, rgba(127, 231, 214, 0.22), transparent 28%),
|
|
|
|
|
radial-gradient(circle at 26% 76%, rgba(95, 202, 255, 0.18), transparent 30%),
|
|
|
|
|
radial-gradient(circle at 78% 68%, rgba(167, 139, 250, 0.14), transparent 28%),
|
|
|
|
|
var(--theme-shell-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.backendFallback__card,
|
|
|
|
|
.appLoading__card {
|
|
|
|
|
width: min(100%, 560px);
|
|
|
|
|
@@ -872,6 +889,102 @@ function reloadApp() {
|
|
|
|
|
box-shadow: inset 0 1px 0 var(--theme-card-shadow);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__card {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: min(100%, 420px);
|
|
|
|
|
justify-items: center;
|
|
|
|
|
gap: 14px;
|
|
|
|
|
padding: 42px 32px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background:
|
|
|
|
|
linear-gradient(145deg, color-mix(in srgb, var(--theme-card-bg) 92%, white), var(--theme-card-bg)),
|
|
|
|
|
var(--theme-card-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__card::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: -42%;
|
|
|
|
|
background: conic-gradient(from 90deg, transparent, rgba(127, 231, 214, 0.18), transparent 34%, rgba(95, 202, 255, 0.16), transparent 68%);
|
|
|
|
|
animation: appLoadingAura 4.8s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__card > * {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__brand {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 112px;
|
|
|
|
|
height: 112px;
|
|
|
|
|
display: grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__logo {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 76px;
|
|
|
|
|
height: 76px;
|
|
|
|
|
display: grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
border-radius: 24px;
|
|
|
|
|
border: 1px solid color-mix(in srgb, var(--theme-accent-strong) 34%, transparent);
|
|
|
|
|
background:
|
|
|
|
|
linear-gradient(135deg, rgba(127, 231, 214, 0.2), rgba(95, 202, 255, 0.12)),
|
|
|
|
|
color-mix(in srgb, var(--theme-card-bg) 86%, #090d16);
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 20px 60px rgba(0, 0, 0, 0.28),
|
|
|
|
|
0 0 34px rgba(127, 231, 214, 0.2),
|
|
|
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
|
|
|
|
animation: appLoadingFloat 2.6s ease-in-out infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__logoMain {
|
|
|
|
|
color: var(--theme-accent-strong);
|
|
|
|
|
font-size: 44px;
|
|
|
|
|
font-weight: 950;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
letter-spacing: -0.12em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__logoBar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 18px;
|
|
|
|
|
bottom: 16px;
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
background: #5fcaff;
|
|
|
|
|
box-shadow: 0 0 18px rgba(95, 202, 255, 0.54);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__orb {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
filter: drop-shadow(0 0 12px currentColor);
|
|
|
|
|
animation: appLoadingOrbit 2.4s ease-in-out infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__orb--mint {
|
|
|
|
|
top: 10px;
|
|
|
|
|
right: 18px;
|
|
|
|
|
color: #7fe7d6;
|
|
|
|
|
background: currentColor;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__orb--blue {
|
|
|
|
|
left: 14px;
|
|
|
|
|
bottom: 18px;
|
|
|
|
|
color: #5fcaff;
|
|
|
|
|
background: currentColor;
|
|
|
|
|
animation-delay: -1.1s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.backendFallback__eyebrow,
|
|
|
|
|
.appLoading__eyebrow {
|
|
|
|
|
color: var(--theme-accent-strong);
|
|
|
|
|
@@ -889,6 +1002,10 @@ function reloadApp() {
|
|
|
|
|
letter-spacing: -0.04em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__title {
|
|
|
|
|
font-size: clamp(27px, 4vw, 38px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.backendFallback__desc,
|
|
|
|
|
.appLoading__desc {
|
|
|
|
|
margin: 0;
|
|
|
|
|
@@ -897,21 +1014,74 @@ function reloadApp() {
|
|
|
|
|
line-height: 1.7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appLoading__spinner {
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
.appLoading__progress {
|
|
|
|
|
width: min(100%, 220px);
|
|
|
|
|
height: 6px;
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
border: 3px solid color-mix(in srgb, var(--theme-text-faint) 34%, transparent);
|
|
|
|
|
border-top-color: var(--theme-accent-strong);
|
|
|
|
|
animation: appLoadingSpin 820ms linear infinite;
|
|
|
|
|
background: color-mix(in srgb, var(--theme-text-faint) 18%, transparent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes appLoadingSpin {
|
|
|
|
|
.appLoading__progress span {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 42%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
background: linear-gradient(90deg, #7fe7d6, #5fcaff);
|
|
|
|
|
box-shadow: 0 0 20px rgba(127, 231, 214, 0.46);
|
|
|
|
|
animation: appLoadingProgress 1.35s ease-in-out infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes appLoadingAura {
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes appLoadingFloat {
|
|
|
|
|
0%,
|
|
|
|
|
100% {
|
|
|
|
|
transform: translateY(0) scale(1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50% {
|
|
|
|
|
transform: translateY(-6px) scale(1.02);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes appLoadingOrbit {
|
|
|
|
|
0%,
|
|
|
|
|
100% {
|
|
|
|
|
transform: translate(0, 0);
|
|
|
|
|
opacity: 0.75;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50% {
|
|
|
|
|
transform: translate(8px, -10px);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes appLoadingProgress {
|
|
|
|
|
0% {
|
|
|
|
|
transform: translateX(-110%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
100% {
|
|
|
|
|
transform: translateX(250%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
.appLoading__card::before,
|
|
|
|
|
.appLoading__logo,
|
|
|
|
|
.appLoading__orb,
|
|
|
|
|
.appLoading__progress span {
|
|
|
|
|
animation: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.backendFallback__actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
