fix(login): 좌측 히어로 이미지 + KINTEX CI 로고 반영 + Stitch 14화면 재취득
- 로그인 좌측 브랜드 패널: Stitch 디자인의 전시홀 히어로 이미지(public/brand/login-hero.jpg) + 블루/하단 그라디언트 오버레이(가독성) — '이미지 없어 썰렁' 해소 - 우측 로그인 카드 로고: KINTEX CI 워드마크(ci/CI_JPG → public/brand/kintex-wordmark.jpg) - Stitch 프로젝트(9385904003821333054) 14화면 code.html 최신 재취득(screen.png는 gitignore) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
95dc76f150
commit
4e9ec42444
BIN
src/frontend/public/brand/kintex-wordmark.jpg
Normal file
BIN
src/frontend/public/brand/kintex-wordmark.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/frontend/public/brand/login-hero.jpg
Normal file
BIN
src/frontend/public/brand/login-hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
@ -128,8 +128,12 @@ export function LoginPage() {
|
||||
<section className="kx-login__panel">
|
||||
<div className="kx-login__card">
|
||||
<div className="kx-login__logo">
|
||||
<span className="kx-login__logo-mark">K</span>
|
||||
<span className="kx-login__logo-text">KINTEX AI</span>
|
||||
<img
|
||||
className="kx-login__logo-img"
|
||||
src="/brand/kintex-wordmark.jpg"
|
||||
alt="KINTEX"
|
||||
/>
|
||||
<span className="kx-login__logo-suffix">AI 전시관리</span>
|
||||
</div>
|
||||
<h2 className="kx-login__title">로그인</h2>
|
||||
<p className="kx-login__title-sub">KINTEX 전시 관리 시스템에 오신 것을 환영합니다.</p>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
position: relative;
|
||||
width: 55%;
|
||||
display: none;
|
||||
background: linear-gradient(135deg, #0a2a47, #004c86);
|
||||
background: #0a2a47 url('/brand/login-hero.jpg') center / cover no-repeat;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
@ -19,11 +19,9 @@
|
||||
.kx-login__brand-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 76, 134, 0.92) 0%,
|
||||
rgba(0, 76, 134, 0.7) 100%
|
||||
);
|
||||
background:
|
||||
linear-gradient(to top, rgba(2, 20, 40, 0.88) 0%, rgba(2, 20, 40, 0) 58%),
|
||||
linear-gradient(to right, rgba(0, 76, 134, 0.8) 0%, rgba(0, 76, 134, 0.48) 100%);
|
||||
}
|
||||
.kx-login__brand-content {
|
||||
position: absolute;
|
||||
@ -108,6 +106,20 @@
|
||||
font-weight: 700;
|
||||
color: var(--color-primary-700);
|
||||
}
|
||||
.kx-login__logo-img {
|
||||
height: 30px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
.kx-login__logo-suffix {
|
||||
font-size: var(--fs-body);
|
||||
font-weight: 600;
|
||||
color: var(--color-neutral-500);
|
||||
padding-left: 2px;
|
||||
border-left: 1px solid var(--color-neutral-200);
|
||||
padding-left: 10px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.kx-login__title {
|
||||
font-size: var(--fs-h1);
|
||||
line-height: var(--lh-h1);
|
||||
|
||||
@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="ko"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>KINTEX AI - Booth Construction Checklist</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Geist:wght@500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-fixed-variant": "#4500d8",
|
||||
"on-primary-container": "#d2e3ff",
|
||||
"primary-fixed": "#d3e4ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-variant": "#dbe2f9",
|
||||
"on-error-container": "#93000a",
|
||||
"on-surface": "#141b2c",
|
||||
"surface-bright": "#f9f9ff",
|
||||
"surface": "#f9f9ff",
|
||||
"inverse-surface": "#293041",
|
||||
"on-tertiary-fixed": "#002113",
|
||||
"inverse-primary": "#a2c9ff",
|
||||
"primary-fixed-dim": "#a2c9ff",
|
||||
"secondary-container": "#6d4aff",
|
||||
"on-primary-fixed-variant": "#004881",
|
||||
"on-primary-fixed": "#001c38",
|
||||
"outline": "#717782",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"background": "#f9f9ff",
|
||||
"tertiary": "#00583b",
|
||||
"on-primary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"secondary": "#5427e6",
|
||||
"on-surface-variant": "#414751",
|
||||
"on-secondary-fixed": "#1b0063",
|
||||
"on-secondary": "#ffffff",
|
||||
"outline-variant": "#c1c7d3",
|
||||
"surface-container-high": "#e0e8ff",
|
||||
"tertiary-container": "#00734e",
|
||||
"on-tertiary-fixed-variant": "#005236",
|
||||
"primary": "#004e8b",
|
||||
"secondary-fixed-dim": "#c9bfff",
|
||||
"surface-dim": "#d2daf0",
|
||||
"primary-container": "#0066b3",
|
||||
"on-tertiary-container": "#8ef7c3",
|
||||
"secondary-fixed": "#e5deff",
|
||||
"on-secondary-container": "#f3edff",
|
||||
"tertiary-fixed-dim": "#72daa9",
|
||||
"surface-container-highest": "#dbe2f9",
|
||||
"surface-tint": "#0060a9",
|
||||
"surface-container-low": "#f1f3ff",
|
||||
"inverse-on-surface": "#edf0ff",
|
||||
"tertiary-fixed": "#8ef7c4",
|
||||
"surface-container": "#e9edff",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#141b2c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "24px",
|
||||
"container-padding": "24px",
|
||||
"gutter": "16px",
|
||||
"stack-sm": "8px",
|
||||
"base": "4px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"title-sm": ["Inter"],
|
||||
"display-lg-mobile": ["Inter"],
|
||||
"display-lg": ["Inter"],
|
||||
"headline-md": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-md": ["Geist"],
|
||||
"label-xs": ["Geist"]
|
||||
},
|
||||
"fontSize": {
|
||||
"title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
|
||||
"display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
|
||||
"display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
||||
"headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
|
||||
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
||||
"body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
|
||||
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
|
||||
"label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* Custom toggle switch styling */
|
||||
.toggle-checkbox:checked {
|
||||
right: 0;
|
||||
border-color: #0066b3;
|
||||
}
|
||||
.toggle-checkbox:checked + .toggle-label {
|
||||
background-color: #0066b3;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for clean mobile view */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* Large custom checkboxes */
|
||||
.checklist-box {
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
color: currentColor;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 2px solid #c1c7d3;
|
||||
border-radius: 0.25rem;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.checklist-box::before {
|
||||
content: "";
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
transform: scale(0);
|
||||
transition: 120ms transform ease-in-out;
|
||||
box-shadow: inset 1em 1em white;
|
||||
background-color: Transform;
|
||||
transform-origin: center;
|
||||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||||
}
|
||||
|
||||
.checklist-box:checked {
|
||||
background-color: #0066b3;
|
||||
border-color: #0066b3;
|
||||
}
|
||||
|
||||
.checklist-box:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-base antialiased w-[390px] mx-auto min-h-screen relative flex flex-col shadow-xl">
|
||||
<!-- Sticky Header -->
|
||||
<header class="sticky top-0 z-50 bg-surface border-b border-outline-variant shadow-sm px-4 py-3 flex flex-col gap-3">
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<button aria-label="Back" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high transition-colors -ml-2">
|
||||
<span class="material-symbols-outlined text-on-surface">arrow_back</span>
|
||||
</button>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="font-title-sm text-title-sm text-on-surface">부스 A-102</h1>
|
||||
<div class="flex items-center gap-1 text-on-surface-variant font-label-xs text-label-xs">
|
||||
<span>홀7</span>
|
||||
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||
<span class="font-bold text-primary">장치 1일차</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Offline Badge -->
|
||||
<div class="flex items-center gap-1 bg-surface-container-highest px-2 py-1 rounded-full border border-outline-variant">
|
||||
<span class="material-symbols-outlined text-[14px] text-on-surface-variant">cloud_off</span>
|
||||
<span class="font-label-xs text-label-xs text-on-surface-variant">오프라인</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Thumbnail Toggles -->
|
||||
<div class="flex bg-surface-container-low rounded-lg p-1 border border-outline-variant w-full">
|
||||
<button class="flex-1 py-1.5 bg-surface text-primary font-label-md text-label-md rounded shadow-sm flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">architecture</span>도면
|
||||
</button>
|
||||
<button class="flex-1 py-1.5 text-on-surface-variant font-label-md text-label-md rounded flex items-center justify-center gap-1 hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-[16px]">image</span>예상 사진
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 overflow-y-auto no-scrollbar pb-32 px-4 py-4 flex flex-col gap-4">
|
||||
<!-- Info Card: Remaining Items -->
|
||||
<div class="flex items-center gap-2 bg-primary-container/10 border border-primary-container rounded-lg p-3">
|
||||
<span class="material-symbols-outlined text-primary-container">info</span>
|
||||
<span class="font-label-md text-label-md text-primary-container">필수 항목 3개 남음</span>
|
||||
</div>
|
||||
<!-- Accordion Group 1: 반입 전 (Completed) -->
|
||||
<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden">
|
||||
<button class="w-full flex justify-between items-center p-4 bg-surface-container-lowest hover:bg-surface-container-low transition-colors text-left border-b border-outline-variant">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-tertiary-container">check_circle</span>
|
||||
<h2 class="font-title-sm text-title-sm text-on-surface">반입 전</h2>
|
||||
<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-variant px-2 py-0.5 rounded-full">2/2</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">expand_more</span>
|
||||
</button>
|
||||
<div class="p-4 flex flex-col gap-4 bg-surface-container-lowest">
|
||||
<!-- Checklist Item 1 (Checked) -->
|
||||
<div class="flex items-start gap-4 p-3 bg-surface-container-low rounded-lg border border-outline-variant">
|
||||
<input checked="" class="checklist-box mt-1" disabled="" type="checkbox"/>
|
||||
<div class="flex flex-col flex-1">
|
||||
<span class="font-body-base text-body-base text-on-surface line-through text-on-surface-variant">방염 확인서 제출 확인</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Checklist Item 2 (Checked) -->
|
||||
<div class="flex items-start gap-4 p-3 bg-surface-container-low rounded-lg border border-outline-variant">
|
||||
<input checked="" class="checklist-box mt-1" disabled="" type="checkbox"/>
|
||||
<div class="flex flex-col flex-1">
|
||||
<span class="font-body-base text-body-base text-on-surface line-through text-on-surface-variant">안전모 및 보호장구 착용</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Red Warning Card -->
|
||||
<div class="bg-error-container border border-error rounded-xl p-4 flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">warning</span>
|
||||
<h3 class="font-label-md text-label-md text-error">장내 금지 작업 주의</h3>
|
||||
</div>
|
||||
<ul class="list-disc list-inside font-body-sm text-body-sm text-on-error-container space-y-1">
|
||||
<li>금지: 전기톱, 용접, 페인트 작업</li>
|
||||
<li>소음 한도: 70~75dB 준수</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Accordion Group 2: 시공 중 (Active) -->
|
||||
<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
|
||||
<button class="w-full flex justify-between items-center p-4 bg-surface-container-low transition-colors text-left border-b border-outline-variant">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">build</span>
|
||||
<h2 class="font-title-sm text-title-sm text-on-surface">시공 중</h2>
|
||||
<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-variant px-2 py-0.5 rounded-full">0/2</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant transform rotate-180">expand_more</span>
|
||||
</button>
|
||||
<div class="p-4 flex flex-col gap-4">
|
||||
<!-- Checklist Item 3 -->
|
||||
<div class="flex items-center gap-4 p-3 bg-surface-bright rounded-lg border-2 border-outline-variant hover:border-primary-container transition-colors">
|
||||
<input class="checklist-box flex-shrink-0" id="check-floor" type="checkbox"/>
|
||||
<label class="flex-1 cursor-pointer" for="check-floor">
|
||||
<span class="font-body-base text-body-base text-on-surface block">바닥 마감 상태 양호</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface-variant mt-1 block">테이핑 및 단차 확인</span>
|
||||
</label>
|
||||
<button class="w-12 h-12 flex items-center justify-center rounded-full bg-surface-container-highest border border-outline-variant text-on-surface-variant hover:bg-surface-variant transition-colors flex-shrink-0">
|
||||
<span class="material-symbols-outlined">photo_camera</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Checklist Item 4 -->
|
||||
<div class="flex items-center gap-4 p-3 bg-surface-bright rounded-lg border-2 border-outline-variant hover:border-primary-container transition-colors">
|
||||
<input class="checklist-box flex-shrink-0" id="check-elec" type="checkbox"/>
|
||||
<label class="flex-1 cursor-pointer" for="check-elec">
|
||||
<span class="font-body-base text-body-base text-on-surface block">전기 배선 안전 확인</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface-variant mt-1 block">노출된 전선 정리</span>
|
||||
</label>
|
||||
<button class="w-12 h-12 flex items-center justify-center rounded-full bg-surface-container-highest border border-outline-variant text-on-surface-variant hover:bg-surface-variant transition-colors flex-shrink-0">
|
||||
<span class="material-symbols-outlined">photo_camera</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Accordion Group 3: 구조 확인 -->
|
||||
<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
|
||||
<button class="w-full flex justify-between items-center p-4 bg-surface-container-low transition-colors text-left border-b border-outline-variant">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">square_foot</span>
|
||||
<h2 class="font-title-sm text-title-sm text-on-surface">구조 확인</h2>
|
||||
<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-variant px-2 py-0.5 rounded-full">0/1</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant transform rotate-180">expand_more</span>
|
||||
</button>
|
||||
<div class="p-4 flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2 p-3 bg-surface-bright rounded-lg border-2 border-outline-variant">
|
||||
<label class="font-body-base text-body-base text-on-surface flex justify-between items-center" for="height-input">
|
||||
장치물 최고 높이 실측
|
||||
<span class="font-label-xs text-label-xs text-on-surface-variant bg-surface-container-high px-2 py-1 rounded">규정: 5m 이하</span>
|
||||
</label>
|
||||
<div class="relative mt-2">
|
||||
<input class="w-full h-14 pl-4 pr-12 rounded-lg border border-outline bg-surface-container-lowest text-on-surface font-title-sm text-title-sm focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 transition-shadow" id="height-input" placeholder="4.2" type="number"/>
|
||||
<span class="absolute right-4 top-1/2 -translate-y-1/2 font-title-sm text-title-sm text-on-surface-variant">m</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Sticky Bottom Action Bar -->
|
||||
<footer class="fixed bottom-0 left-1/2 -translate-x-1/2 w-[390px] bg-surface border-t border-outline-variant p-4 z-50 pb-8">
|
||||
<div class="text-center mb-2">
|
||||
<span class="font-label-xs text-label-xs text-on-surface-variant flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">sync</span>
|
||||
오프라인 — 연결 시 동기화
|
||||
</span>
|
||||
</div>
|
||||
<button class="w-full h-14 rounded-xl bg-primary-container/50 text-on-primary-container/50 font-title-sm text-title-sm font-bold flex items-center justify-center gap-2 cursor-not-allowed" disabled="">
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
검수 요청 보내기
|
||||
</button>
|
||||
</footer>
|
||||
</body></html>
|
||||
Loading…
Reference in New Issue
Block a user