모의투자 로직 변경
This commit is contained in:
Macbook
@@ -1,4 +1,4 @@
|
||||
/* GoldenChart splash — glassmorphism login + 차트 콜라주 배경 이미지 */
|
||||
/* GoldenChart splash — 프리미엄 흐림 그라데이션 + 글래스 로그인 */
|
||||
|
||||
.splash {
|
||||
position: fixed;
|
||||
@@ -7,13 +7,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #06080d;
|
||||
background: #05070c;
|
||||
color: #e8eaed;
|
||||
overflow: hidden;
|
||||
font-family: var(--font, 'Noto Sans KR', 'Inter', sans-serif);
|
||||
}
|
||||
|
||||
.splash-photo-bg {
|
||||
/* ── 배경 레이어 ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.splash-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
@@ -21,24 +23,271 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.splash-photo-bg::before {
|
||||
content: '';
|
||||
.splash-backdrop__base {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('/splash-bg.png?v=3') center center / cover no-repeat;
|
||||
filter: saturate(1.06) brightness(0.94);
|
||||
background:
|
||||
linear-gradient(155deg, #06080f 0%, #0a0e18 38%, #070a12 68%, #05070c 100%);
|
||||
}
|
||||
|
||||
.splash-photo-overlay {
|
||||
.splash-backdrop__mesh {
|
||||
position: absolute;
|
||||
inset: -20%;
|
||||
opacity: 0.45;
|
||||
background:
|
||||
conic-gradient(
|
||||
from 38deg at 58% 42%,
|
||||
rgba(212, 175, 55, 0.12) 0deg,
|
||||
transparent 48deg,
|
||||
rgba(34, 197, 94, 0.07) 95deg,
|
||||
transparent 165deg,
|
||||
rgba(56, 189, 248, 0.05) 240deg,
|
||||
transparent 360deg
|
||||
);
|
||||
filter: blur(52px);
|
||||
}
|
||||
|
||||
.splash-backdrop__orbs {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(ellipse 108% 92% at 50% 50%, transparent 36%, rgba(2, 4, 8, 0.48) 100%),
|
||||
linear-gradient(to bottom, rgba(2, 4, 8, 0.28) 0%, rgba(2, 4, 8, 0.06) 44%, rgba(2, 4, 8, 0.3) 100%);
|
||||
}
|
||||
|
||||
.splash-backdrop__orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(72px);
|
||||
will-change: transform;
|
||||
animation: splash-orb-float 22s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.splash-backdrop__orb--gold {
|
||||
width: min(52vw, 480px);
|
||||
height: min(52vw, 480px);
|
||||
top: -6%;
|
||||
right: 2%;
|
||||
background: radial-gradient(circle, rgba(249, 226, 156, 0.32) 0%, rgba(212, 175, 55, 0.12) 45%, transparent 72%);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.splash-backdrop__orb--teal {
|
||||
width: min(44vw, 400px);
|
||||
height: min(44vw, 400px);
|
||||
top: 18%;
|
||||
right: -6%;
|
||||
background: radial-gradient(circle, rgba(34, 197, 94, 0.16) 0%, rgba(45, 212, 191, 0.06) 50%, transparent 70%);
|
||||
animation-delay: -8s;
|
||||
animation-duration: 24s;
|
||||
}
|
||||
|
||||
.splash-backdrop__orb--indigo {
|
||||
width: min(38vw, 340px);
|
||||
height: min(38vw, 340px);
|
||||
bottom: -10%;
|
||||
left: -8%;
|
||||
background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 68%);
|
||||
animation-delay: -14s;
|
||||
animation-duration: 26s;
|
||||
}
|
||||
|
||||
@keyframes splash-orb-float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
33% {
|
||||
transform: translate(1.5%, -1%) scale(1.03);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-1%, 1.5%) scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 중앙 → 우측 상단: 캔들·호가 실루엣 ───────────────────────────────────── */
|
||||
|
||||
.splash-backdrop__market-flow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.splash-backdrop__flow-glow {
|
||||
position: absolute;
|
||||
left: 42%;
|
||||
top: 38%;
|
||||
width: min(95vw, 920px);
|
||||
height: min(72vh, 640px);
|
||||
transform: translate(-18%, -22%);
|
||||
background: linear-gradient(
|
||||
128deg,
|
||||
rgba(34, 197, 94, 0.07) 0%,
|
||||
rgba(212, 175, 55, 0.1) 32%,
|
||||
rgba(56, 189, 248, 0.05) 58%,
|
||||
transparent 78%
|
||||
);
|
||||
filter: blur(56px);
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.splash-backdrop__flow-inner {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: min(128vw, 1680px);
|
||||
height: min(96vh, 920px);
|
||||
transform: translate(-42%, -48%);
|
||||
transform-origin: center center;
|
||||
pointer-events: none;
|
||||
/* 중앙(로그인 카드 부근)에서 우측 상단으로 갈수록 서서히 사라짐 */
|
||||
mask-image: linear-gradient(
|
||||
125deg,
|
||||
#000 0%,
|
||||
#000 14%,
|
||||
rgba(0, 0, 0, 0.62) 32%,
|
||||
rgba(0, 0, 0, 0.28) 48%,
|
||||
rgba(0, 0, 0, 0.08) 58%,
|
||||
transparent 72%
|
||||
);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
125deg,
|
||||
#000 0%,
|
||||
#000 14%,
|
||||
rgba(0, 0, 0, 0.62) 32%,
|
||||
rgba(0, 0, 0, 0.28) 48%,
|
||||
rgba(0, 0, 0, 0.08) 58%,
|
||||
transparent 72%
|
||||
);
|
||||
}
|
||||
|
||||
.splash-backdrop__chart-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.38;
|
||||
filter: blur(22px) saturate(0.72) brightness(0.78);
|
||||
}
|
||||
|
||||
.splash-backdrop__orderbook-layer {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 6%;
|
||||
width: min(36vw, 340px);
|
||||
height: min(52vh, 480px);
|
||||
opacity: 0.32;
|
||||
filter: blur(14px) saturate(0.65);
|
||||
}
|
||||
|
||||
.splash-chart-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splash-orderbook-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splash-ob-mid {
|
||||
stroke: rgba(255, 255, 255, 0.08);
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 4 6;
|
||||
}
|
||||
|
||||
.splash-ob-ask-bar {
|
||||
fill: rgba(239, 68, 68, 0.35);
|
||||
}
|
||||
|
||||
.splash-ob-bid-bar {
|
||||
fill: rgba(34, 197, 94, 0.32);
|
||||
}
|
||||
|
||||
.splash-ob-ask-txt,
|
||||
.splash-ob-bid-txt {
|
||||
font-size: 9px;
|
||||
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
fill: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.splash-ob-spread {
|
||||
fill: rgba(212, 175, 55, 0.08);
|
||||
stroke: rgba(212, 175, 55, 0.15);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.splash-chart-grid {
|
||||
stroke: rgba(255, 255, 255, 0.04);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.splash-vol-bar {
|
||||
fill: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.splash-ichi--tenkan { stroke: rgba(250, 204, 21, 0.35); stroke-width: 1.2; fill: none; }
|
||||
.splash-ichi--kijun { stroke: rgba(96, 165, 250, 0.3); stroke-width: 1.2; fill: none; }
|
||||
.splash-ichi--senkou-a { stroke: rgba(34, 197, 94, 0.22); stroke-width: 1; fill: none; }
|
||||
.splash-ichi--senkou-b { stroke: rgba(239, 68, 68, 0.2); stroke-width: 1; fill: none; }
|
||||
|
||||
.splash-candle-wick {
|
||||
stroke: rgba(255, 255, 255, 0.2);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.splash-candle-up {
|
||||
fill: rgba(34, 197, 94, 0.42);
|
||||
}
|
||||
|
||||
.splash-candle-down {
|
||||
fill: rgba(239, 68, 68, 0.38);
|
||||
}
|
||||
|
||||
.splash-backdrop__grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.35;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
|
||||
}
|
||||
|
||||
.splash-backdrop__grain {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.045;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 180px 180px;
|
||||
}
|
||||
|
||||
.splash-backdrop__vignette {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 68% 58% at 50% 50%, transparent 0%, rgba(5, 7, 12, 0.42) 62%, rgba(2, 3, 6, 0.9) 100%),
|
||||
linear-gradient(128deg, transparent 0%, rgba(5, 7, 12, 0.15) 55%, rgba(5, 7, 12, 0.35) 100%),
|
||||
linear-gradient(180deg, rgba(5, 7, 12, 0.45) 0%, transparent 30%, transparent 70%, rgba(5, 7, 12, 0.5) 100%);
|
||||
}
|
||||
|
||||
.splash-backdrop__spotlight {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
ellipse 42% 38% at 50% 46%,
|
||||
rgba(255, 255, 255, 0.06) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.splash-backdrop__orb {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 로그인 카드 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.splash-center {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -54,13 +303,14 @@
|
||||
width: 100%;
|
||||
padding: 36px 32px 28px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(12, 14, 18, 0.55);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(10, 12, 18, 0.52);
|
||||
backdrop-filter: blur(24px) saturate(1.15);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.15);
|
||||
box-shadow:
|
||||
0 24px 64px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
0 0 0 1px rgba(212, 175, 55, 0.06) inset,
|
||||
0 28px 72px rgba(0, 0, 0, 0.55),
|
||||
0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.splash-brand {
|
||||
@@ -70,11 +320,11 @@
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
background: linear-gradient(180deg, #f9e29c 0%, #d4af37 42%, #b8860b 100%);
|
||||
background: linear-gradient(180deg, #fce9a8 0%, #e8c547 38%, #c9a227 72%, #a67c00 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
filter: drop-shadow(0 2px 12px rgba(212, 175, 55, 0.25));
|
||||
filter: drop-shadow(0 2px 16px rgba(212, 175, 55, 0.28));
|
||||
}
|
||||
|
||||
.splash-form {
|
||||
@@ -87,22 +337,23 @@
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 13px 14px;
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
background: rgba(0, 0, 0, 0.38);
|
||||
color: #f3f4f6;
|
||||
font-size: 0.95rem;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.splash-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
color: rgba(255, 255, 255, 0.32);
|
||||
}
|
||||
|
||||
.splash-input:focus {
|
||||
outline: none;
|
||||
border-color: rgba(212, 175, 55, 0.45);
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
|
||||
border-color: rgba(212, 175, 55, 0.5);
|
||||
background: rgba(0, 0, 0, 0.48);
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
|
||||
}
|
||||
|
||||
.splash-input:disabled {
|
||||
@@ -121,19 +372,23 @@
|
||||
margin-top: 4px;
|
||||
padding: 13px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: #1a1408;
|
||||
background: linear-gradient(180deg, #f9e29c 0%, #d4af37 48%, #c9a227 100%);
|
||||
box-shadow: 0 4px 16px rgba(201, 162, 39, 0.35);
|
||||
background: linear-gradient(180deg, #fce9a8 0%, #e0c04a 42%, #c9a227 100%);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.25) inset,
|
||||
0 6px 22px rgba(201, 162, 39, 0.38);
|
||||
transition: transform 0.12s, filter 0.12s, box-shadow 0.12s;
|
||||
}
|
||||
|
||||
.splash-login-btn:hover:not(:disabled) {
|
||||
filter: brightness(1.05);
|
||||
box-shadow: 0 6px 20px rgba(201, 162, 39, 0.45);
|
||||
filter: brightness(1.06);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.3) inset,
|
||||
0 8px 28px rgba(201, 162, 39, 0.48);
|
||||
}
|
||||
|
||||
.splash-login-btn:active:not(:disabled) {
|
||||
@@ -149,14 +404,14 @@
|
||||
margin: 22px 0 0;
|
||||
text-align: center;
|
||||
font-size: 0.68rem;
|
||||
color: rgba(255, 255, 255, 0.32);
|
||||
color: rgba(255, 255, 255, 0.34);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.splash-guest-link {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 0.78rem;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
@@ -164,7 +419,7 @@
|
||||
}
|
||||
|
||||
.splash-guest-link:hover:not(:disabled) {
|
||||
color: rgba(249, 226, 156, 0.85);
|
||||
color: rgba(249, 226, 156, 0.9);
|
||||
}
|
||||
|
||||
.splash-guest-link:disabled {
|
||||
@@ -181,4 +436,19 @@
|
||||
font-size: 1.65rem;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.splash-backdrop__orb {
|
||||
filter: blur(56px);
|
||||
}
|
||||
.splash-backdrop__flow-inner {
|
||||
mask-image: radial-gradient(
|
||||
ellipse 90% 85% at 24% 56%,
|
||||
#000 0%,
|
||||
transparent 75%
|
||||
);
|
||||
-webkit-mask-image: radial-gradient(
|
||||
ellipse 90% 85% at 24% 56%,
|
||||
#000 0%,
|
||||
transparent 75%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user