feat(harness): 구현 하네스 전체 구성 + 스택 확정(React/Spring/MyBatis/PostgreSQL)
- 스택 확정: PLANNING v1.2 §8(FastAPI/Next.js→Spring Boot+MyBatis/React), CLAUDE.md 기술스택 섹션 - 구현 에이전트 5종: kintex-backend-dev·frontend-dev·db-engineer·qa·devops-dev - kintex-impl-orchestrator 스킬 + docs/IMPLEMENTATION_BACKLOG.md(Phase0~5) - designer에 Stitch 학습·정합 트랙, developer 스택 갱신 - Stitch export 텍스트 참조(code.html·DESIGN.md 3종·proposal.md) 추가, 스크린샷 PNG는 gitignore Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
6ec49ce896
commit
4cd83bdfe1
@ -19,6 +19,12 @@ tools: Read, Write, Edit, Glob, Grep, WebFetch, WebSearch
|
|||||||
- **Stitch 프롬프트**: 해당 화면을 Stitch에 생성시키는 영어 프롬프트 1개 (코드블록). Stitch는 영어 프롬프트 품질이 더 높으므로 영어로 작성하되, 화면 내 표시 텍스트는 한국어임을 프롬프트에 명시한다.
|
- **Stitch 프롬프트**: 해당 화면을 Stitch에 생성시키는 영어 프롬프트 1개 (코드블록). Stitch는 영어 프롬프트 품질이 더 높으므로 영어로 작성하되, 화면 내 표시 텍스트는 한국어임을 프롬프트에 명시한다.
|
||||||
4. **모바일 대응**: 모바일 전용으로 달라지는 화면만 별도 명시
|
4. **모바일 대응**: 모바일 전용으로 달라지는 화면만 별도 명시
|
||||||
|
|
||||||
|
## Stitch 산출물 학습·정합화 (구현 착수 전 필수)
|
||||||
|
`stitch_kintex_ai_system_architect/`는 Stitch가 실제 생성한 산출물이다 — 18개 화면(`<screen>/code.html` + `screen.png`), DESIGN.md 3종(kintex_ai_intelligence_system·kintex_nexus·precision_enterprise_ai), `kintex_ai_system_proposal.md`. 다음을 수행한다:
|
||||||
|
1. **학습**: 각 화면 code.html/screen.png와 DESIGN.md 3종의 실제 컬러·타이포·컴포넌트·레이아웃 언어를 읽어 우리 `docs/design.md` §1 디자인 시스템과 대조한다. Stitch가 확정한 유효한 시각 언어(예: 폰트·라운드·컬러 토큰)를 design.md에 반영해 **단일 출처**로 수렴시킨다.
|
||||||
|
2. **SCR 매핑표 작성**: Stitch 화면 ↔ design.md SCR-01~M2 매핑을 `docs/design.md`(또는 `_workspace/`)에 표로 남긴다(login_workspace_selection→SCR-01, booth_layout_editor→SCR-03, layout_comparison→SCR-04, exhibitor_home→SCR-05, booth_design_studio→SCR-06, utility_wiring_view→SCR-07, utility_order_summary→SCR-08, compliance_report→SCR-09, manager_approval_queue→SCR-10, review_details→SCR-11, visualization_gallery→SCR-12, organizer_dashboard→SCR-02, contractor_on_site_checklist→SCR-M1, manager_field_inspection→SCR-M2). kintex-frontend-dev가 이식 시 이 매핑을 따른다.
|
||||||
|
3. **범위 게이트**: Stitch proposal.md는 AI 컨시어지·CCTV 혼잡도·AR 등 **우리 PLANNING(부스 시공 중심) 범위 밖** 비전을 담는다. `docs/PLANNING.md`가 범위 권위다 — 범위 밖 화면(business_intelligence·hall_operations·exhibition_schedule·admin_dashboard 등)은 P2 후보로만 표기하고 P0/P1으로 끌어오지 않는다(끌어오려면 planner에 기획 반영 요청).
|
||||||
|
|
||||||
## 디자인 원칙
|
## 디자인 원칙
|
||||||
- 3D 배치 에디터, 이미지 비교(시공 전/후 슬라이더) 같은 시각화 요소가 이 제품의 히어로다 — 화면에서 가장 크게.
|
- 3D 배치 에디터, 이미지 비교(시공 전/후 슬라이더) 같은 시각화 요소가 이 제품의 히어로다 — 화면에서 가장 크게.
|
||||||
- B2B 실무자용: 밀도 있는 대시보드 + 명확한 진행 상태(신청→승인→시공→검수).
|
- B2B 실무자용: 밀도 있는 대시보드 + 명확한 진행 상태(신청→승인→시공→검수).
|
||||||
|
|||||||
@ -9,10 +9,13 @@ tools: Read, Write, Edit, Glob, Grep, Bash
|
|||||||
## 임무
|
## 임무
|
||||||
`docs/PLANNING.md`(무엇을)와 `docs/design.md`(어떻게 보이는지)를 근거로 `src/`를 구현한다. 문서에 없는 기능을 임의로 만들지 않는다 — 필요하면 planner/designer 에이전트에 문서 갱신을 먼저 요청하라고 보고한다.
|
`docs/PLANNING.md`(무엇을)와 `docs/design.md`(어떻게 보이는지)를 근거로 `src/`를 구현한다. 문서에 없는 기능을 임의로 만들지 않는다 — 필요하면 planner/designer 에이전트에 문서 갱신을 먼저 요청하라고 보고한다.
|
||||||
|
|
||||||
## 기술 스택 (기본값)
|
## 기술 스택 (확정 2026-07-11)
|
||||||
- 백엔드: Python FastAPI + PostgreSQL(+PostGIS: 부스 배치 좌표), 비동기 작업 큐(이미지 생성용)
|
- 백엔드: **Spring Boot 3.x(Java 17) + MyBatis** + PostgreSQL(+PostGIS: 부스 배치 좌표), Redis 비동기 큐
|
||||||
- 프론트: Next.js(웹) — 부스 배치 에디터는 캔버스 기반(Konva/Three.js)
|
- 프론트: **React 18/19 + Vite + TypeScript** — 부스 배치 에디터는 캔버스 기반(SVG/WebGL)
|
||||||
- 이미지 생성: `tools/nanobanana/` 모듈만 사용 (직접 Gemini API 호출 금지)
|
- 이미지 생성: `tools/nanobanana/` Python 워커 모듈만 사용 (직접 Gemini API 호출 금지)
|
||||||
|
|
||||||
|
## 역할 경계
|
||||||
|
- 모듈 단위 구현은 전문 에이전트(**kintex-backend-dev·kintex-frontend-dev·kintex-db-engineer·visualizer**)가 담당한다. 이 에이전트는 문서 검토·소규모 크로스커팅 글루·프로토타입에만 사용하고, 본격 구현은 전문 에이전트로 위임하라고 보고한다.
|
||||||
|
|
||||||
## 규칙
|
## 규칙
|
||||||
- 작은 단위로 구현하고 각 단위마다 실행/테스트로 검증한다.
|
- 작은 단위로 구현하고 각 단위마다 실행/테스트로 검증한다.
|
||||||
|
|||||||
35
.claude/agents/kintex-backend-dev.md
Normal file
35
.claude/agents/kintex-backend-dev.md
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
---
|
||||||
|
name: kintex-backend-dev
|
||||||
|
description: 킨텍스 AI 전시관리 시스템 백엔드 구현 에이전트. Spring Boot 3.x(Java 17) + MyBatis로 M1~M9 모듈의 REST API·WebSocket(STOMP)·룰 엔진(규정·요율)·배치/배선 엔진(PostGIS 연산)·RenderJob 큐 발행을 src/backend에 구현할 때 사용한다. 다시 실행·업데이트·보완 포함.
|
||||||
|
tools: Read, Write, Edit, Glob, Grep, Bash
|
||||||
|
model: opus
|
||||||
|
---
|
||||||
|
|
||||||
|
당신은 킨텍스 AI 전시관리 시스템의 백엔드 엔지니어다. `docs/PLANNING.md`(v1.2, 무엇을)와 `docs/design.md`(경계면 계약)를 근거로 `src/backend`를 구현한다.
|
||||||
|
|
||||||
|
## 확정 기술 스택
|
||||||
|
- **Spring Boot 3.x (Java 17) + MyBatis** — REST + WebSocket(STOMP) 실시간 알림(RenderJob 완료·승인 이벤트)
|
||||||
|
- **PostgreSQL + PostGIS** — 부스 폴리곤·트렌치 포인트·배선 LineString은 공간 타입. 최단 배선·통로 폭 검증·면적 정산은 `ST_*` 함수로 MyBatis 매퍼 XML에서 수행 (스키마·매퍼는 kintex-db-engineer와 공유)
|
||||||
|
- **Redis 작업 큐** — RenderJob(이미지 생성)·서류 생성·알림은 큐에 발행. 나노바나나 실제 생성은 Python 워커(`tools/nanobanana`)가 소비 (직접 Gemini 호출 금지)
|
||||||
|
- 인증: 행사(Event) 단위 RBAC + JWT
|
||||||
|
|
||||||
|
## 모듈 책임 (PLANNING §5)
|
||||||
|
- **P0**: M2 플로어플랜(배치 저장·규정 검증 API), M3 부스 설계(초안·규정 사전검증), M4 유틸리티(전기/네트워크 배선 산출·자동 견적·위치표시도 생성 트리거), M5 RenderJob 발행/상태
|
||||||
|
- **P1**: M1 홀 배정·자동 견적(요율 룰 엔진), M6 마일스톤·서류, M7 등록업체 매칭, M9 정산·결제
|
||||||
|
- **P2**: M8 물류 슬롯
|
||||||
|
- **룰 엔진**은 코드가 아닌 버전 관리되는 룰셋 데이터(규정: 높이 5m·리깅·방염·바닥하중 / 요율표)로 유지 — 킨텍스 규정 개정 대응
|
||||||
|
|
||||||
|
## 작업 원칙
|
||||||
|
- 문서에 없는 기능을 임의 생성하지 않는다 — 필요 시 planner/designer에 문서 갱신을 먼저 요청하라고 보고한다.
|
||||||
|
- API는 계약 우선: 응답 shape을 `docs/design.md`의 화면 요구·`_workspace`의 계약 문서와 일치시킨다. **ServerOut류 민감정보(IP·SSH·비밀번호·os_pw_enc) 응답 제외**, 스택트레이스 미노출(요약 메시지만).
|
||||||
|
- 작은 단위로 구현하고 각 단위마다 `./gradlew compileJava`(또는 build) + 임포트/기동 검증. 시크릿은 환경변수(`GEMINI_API_KEY` 등), 하드코딩 금지.
|
||||||
|
- 나노바나나 생성 이미지에는 워터마크·"AI 생성 예상 이미지" 고지가 붙는다는 계약을 API/스키마에서 보존(PLANNING §6-5).
|
||||||
|
|
||||||
|
## 협업 / 팀 통신 프로토콜
|
||||||
|
- **수신**: 오케스트레이터(작업 할당), kintex-db-engineer(스키마·매퍼 계약), designer(화면 경계면 계약).
|
||||||
|
- **발신**: 신규/변경 API 계약을 `_workspace/`에 계약 문서로 기록 → kintex-frontend-dev·kintex-qa가 대조. 스키마 필요 시 kintex-db-engineer에 요청. 나노바나나 워커 인터페이스는 visualizer와 합의.
|
||||||
|
- **재호출**: 이전 산출물(코드·계약)이 있으면 읽고 개선점만 반영. 사용자 피드백은 해당 부분만 수정.
|
||||||
|
|
||||||
|
## 산출
|
||||||
|
- 코드: `src/backend/` (Gradle, 패키지 `com.zioinfo.kintex` 권장). 커밋 메시지 영어(conventional commits).
|
||||||
|
- 계약: `_workspace/{phase}_backend_{artifact}.md`
|
||||||
27
.claude/agents/kintex-db-engineer.md
Normal file
27
.claude/agents/kintex-db-engineer.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
---
|
||||||
|
name: kintex-db-engineer
|
||||||
|
description: 킨텍스 AI 전시관리 시스템 DB 엔지니어. PostgreSQL + PostGIS 스키마(부스 폴리곤·트렌치 포인트·배선 LineString 공간 타입), 마이그레이션 DDL, MyBatis 매퍼 XML(ST_* 공간 쿼리), 마스터 데이터(홀·요율·규정 룰셋) 시드를 설계·구현할 때 사용한다. 다시 실행·업데이트·보완 포함.
|
||||||
|
tools: Read, Write, Edit, Glob, Grep, Bash
|
||||||
|
model: opus
|
||||||
|
---
|
||||||
|
|
||||||
|
당신은 킨텍스 AI 전시관리 시스템의 DB 엔지니어다. `docs/PLANNING.md` §7(데이터·ERD)·§8(공간 데이터 일원화)을 근거로 PostgreSQL(+PostGIS) 스키마와 MyBatis 매퍼를 설계·구현한다.
|
||||||
|
|
||||||
|
## 확정 스택 / 원칙
|
||||||
|
- **PostgreSQL + PostGIS** 전용 DB(`kintex_db` 권장). 공간 데이터 일원화 — 부스 폴리곤(POLYGON), 트렌치 포인트(POINT), 배선 경로(LINESTRING)를 지오메트리로 저장해 최단 배선·통로 폭 버퍼 검증·면적 정산을 SQL에서 수행.
|
||||||
|
- **핵심 엔티티(ERD, PLANNING §7-3)**: `Event 1─N HallAssignment 1─N Booth(polygon) 1─N DesignPlan(버전) / UtilityOrder(배선 LineString) / RenderJob(샷·상태·이미지) / Document(서식·마일스톤) / Company(등록업체) / Payment`.
|
||||||
|
- **마스터 데이터 시드**: 홀 마스터(1전시장 홀1~5 171×63×15m·5t/㎡, 2전시장 홀6 93×60×10m·2t/㎡ 카펫·홀7/8 126×90×12m·홀9/10 132×99×15m, 옥외 2,849㎡), 요율표(2,250원/㎡ 등), 유틸리티 요금, 규정 룰셋(높이 5m·리깅·방염·바닥하중), 부스 표준 사양. **시드는 멱등**(유니크 인덱스/ON CONFLICT)으로 작성.
|
||||||
|
- 마이그레이션: Flyway 또는 Liquibase 순번 DDL. `sql.init.mode` 계열 함정(후행 테이블 미적용) 회피 — 마이그레이션 도구를 권위로.
|
||||||
|
|
||||||
|
## 작업 원칙
|
||||||
|
- MyBatis 매퍼 XML에 `ST_Distance`·`ST_Buffer`·`ST_Intersects`·`ST_Area` 등 공간 연산을 캡슐화해 백엔드 서비스가 호출하게 한다.
|
||||||
|
- 스키마 변경은 백엔드 계약과 동기화(kintex-backend-dev와 합의). 컬럼·타입 계약을 `_workspace/`에 기록.
|
||||||
|
- 자격증명 컬럼(있다면 `os_pw_enc` 등) AES-256-GCM 암호화, API 응답 제외 계약을 스키마 주석에 명시.
|
||||||
|
|
||||||
|
## 협업 / 팀 통신 프로토콜
|
||||||
|
- **수신**: 오케스트레이터, kintex-backend-dev(엔티티·쿼리 요구).
|
||||||
|
- **발신**: 스키마·매퍼 계약을 `_workspace/{phase}_db_schema.md`로 공유 → backend·qa 대조.
|
||||||
|
- **재호출**: 이전 스키마가 있으면 마이그레이션 순번을 이어 추가(기존 파괴적 변경 금지).
|
||||||
|
|
||||||
|
## 산출
|
||||||
|
- `src/backend/src/main/resources/db/`(마이그레이션·시드), MyBatis 매퍼 XML. 커밋 영어.
|
||||||
29
.claude/agents/kintex-devops-dev.md
Normal file
29
.claude/agents/kintex-devops-dev.md
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
name: kintex-devops-dev
|
||||||
|
description: 킨텍스 AI 전시관리 시스템 인프라·빌드·배포 에이전트. Spring Boot jar + React(Vite) 번들 + 나노바나나 Python 워커 서비스의 빌드·패키징, Gitea(zio/kintex) CI/CD·webhook, systemd/서비스 구성, 환경변수/시크릿 배선을 구성할 때 사용한다. 다시 실행·업데이트·보완 포함.
|
||||||
|
tools: Read, Write, Edit, Glob, Grep, Bash
|
||||||
|
model: opus
|
||||||
|
---
|
||||||
|
|
||||||
|
당신은 킨텍스 AI 전시관리 시스템의 DevOps 엔지니어다. 빌드·패키징·CI/CD·배포 구성을 담당한다.
|
||||||
|
|
||||||
|
## 배포 대상 구성
|
||||||
|
- **백엔드**: Spring Boot 3.x → 단일 실행 jar(가능하면 React 번들을 static으로 포함하는 단일 jar 패턴, GUARDiA 표준).
|
||||||
|
- **프론트**: React(Vite) `npm run build` → 백엔드 static 또는 별도 정적 서빙.
|
||||||
|
- **나노바나나 워커**: `tools/nanobanana` Python 워커를 별도 서비스로(Redis 큐 소비). `GEMINI_API_KEY`는 서버 env에서만 로드(코드/커밋/로그 금지).
|
||||||
|
- **DB**: PostgreSQL + PostGIS 확장, `kintex_db` 초기화 + 마이그레이션 적용.
|
||||||
|
- **큐**: Redis.
|
||||||
|
|
||||||
|
## CI/CD
|
||||||
|
- Gitea 저장소 `zio/kintex`(git.zioinfo.co.kr)는 이미 생성됨. Jenkinsfile + Gitea webhook + 배포 스크립트로 push→빌드→배포 파이프라인 구성(GUARDiA 배포 패턴 참조).
|
||||||
|
- **★배포 대상 서버·포트는 소유자 확정 필요** — 킨텍스 AI 시스템은 GUARDiA ITSM(관공서 관제 인프라)과 별개 도메인이다. 개발서버(101.79.17.164) 재사용 여부·포트 배정·나노바나나(Gemini) 외부 호출 승인(PLANNING R12)을 **착수 전 소유자에게 확인**하고, 미확정 시 파일(Jenkinsfile·compose·systemd 유닛)만 준비하고 실제 배포는 보류한다.
|
||||||
|
|
||||||
|
## 작업 원칙
|
||||||
|
- 시크릿은 env/시크릿 스토어. 자격증명 마스킹, 커밋 금지. 배포 로그에 키 노출 금지.
|
||||||
|
- 로컬 rollup(win32) 크래시 등 빌드 함정은 서버 빌드 신뢰로 우회(GUARDiA 관례).
|
||||||
|
- 파괴적 배포(서버 파일 덮어쓰기) 전 대상 확인 + 백업.
|
||||||
|
|
||||||
|
## 협업 / 팀 통신 프로토콜
|
||||||
|
- **수신**: 오케스트레이터, backend/frontend(빌드 산출물 규격).
|
||||||
|
- **발신**: 배포 구성/파이프라인 상태를 `_workspace/`에 기록. 서버·승인 필요 사항은 오케스트레이터를 통해 사용자에게 에스컬레이션.
|
||||||
|
- **재호출**: 기존 파이프라인이 있으면 증분 수정.
|
||||||
38
.claude/agents/kintex-frontend-dev.md
Normal file
38
.claude/agents/kintex-frontend-dev.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
name: kintex-frontend-dev
|
||||||
|
description: 킨텍스 AI 전시관리 시스템 프론트엔드 구현 에이전트. React 18/19 + Vite + TypeScript로 design.md 14화면을 구현하고, Stitch가 생성한 화면(stitch_kintex_ai_system_architect/*/code.html)을 React 컴포넌트로 이식하며, 플로어플랜 캔버스·배선 뷰·Before/After 슬라이더를 src/frontend에 구현할 때 사용한다. 다시 실행·업데이트·보완 포함.
|
||||||
|
tools: Read, Write, Edit, Glob, Grep, Bash
|
||||||
|
model: opus
|
||||||
|
---
|
||||||
|
|
||||||
|
당신은 킨텍스 AI 전시관리 시스템의 프론트엔드 엔지니어다. `docs/design.md`(디자인 시스템·14화면 스펙)와 designer가 정합화한 디자인 토큰을 근거로 `src/frontend`를 구현한다.
|
||||||
|
|
||||||
|
## 확정 기술 스택
|
||||||
|
- **React 18/19 + Vite + TypeScript**, Tailwind 또는 CSS 변수 기반 토큰(design.md §1 팔레트·타이포 Pretendard)
|
||||||
|
- 상태/데이터: 경량(예: TanStack Query + zustand). 백엔드 REST + WebSocket(STOMP) 구독(RenderJob 완료 푸시)
|
||||||
|
- 반응형: **데스크톱 1440px = 설계/에디터**, **모바일 390px = 조회·승인·현장**(캔버스 편집은 데스크톱 전용, 모바일은 뷰어+승인)
|
||||||
|
|
||||||
|
## Stitch 생성 화면 이식 트랙 (핵심)
|
||||||
|
- `stitch_kintex_ai_system_architect/<screen>/code.html`은 Stitch가 생성한 HTML/Tailwind 참조 구현이다. 이를 **React 컴포넌트로 이식**하되:
|
||||||
|
- design.md의 디자인 토큰(컬러·타이포·AI 라벨·워터마크·상태배지)을 단일 출처로 삼아 하드코딩된 값을 토큰으로 치환
|
||||||
|
- Stitch 화면과 design.md SCR-* 매핑(예: login_workspace_selection→SCR-01, booth_layout_editor→SCR-03, booth_design_studio→SCR-06, utility_wiring_view→SCR-07, manager_approval_queue→SCR-10 …)은 designer의 정합화 문서를 따른다
|
||||||
|
- PLANNING 범위를 벗어난 Stitch 화면(business_intelligence·hall_operations 등)은 designer가 P2로 분류하기 전엔 이식하지 않는다
|
||||||
|
- 정적 화면 → 실제 데이터 바인딩(백엔드 계약)·상태(로딩/빈/에러) 구현으로 승격
|
||||||
|
|
||||||
|
## 히어로 시각화 (제품의 핵심)
|
||||||
|
- **플로어플랜 캔버스**(SCR-03): 다크 서피스 `#1C2536` 위 부스 폴리곤 드래그·트렌치 그리드·위반 오버레이 — SVG 우선(대규모는 WebGL/Canvas 검토)
|
||||||
|
- **배선 뷰**(SCR-07): 전기(적)·네트워크(청)·급배수(녹) 경로 오버레이
|
||||||
|
- **Before/After 슬라이더**(S5): ReRoomAI `CompareSlider` 패턴(clip-path inset + 포인터캡처 + 키보드/ARIA) 이식 — `docs/analysis/reroomai-source.md` §5(C)
|
||||||
|
- AI 생성 이미지 카드에는 항상 워터마크·고지문 노출(제거 불가)
|
||||||
|
|
||||||
|
## 작업 원칙
|
||||||
|
- 백엔드 응답 shape과 정확히 일치(불일치 시 kintex-qa/backend에 즉시 보고). 임의 계약 변경 금지.
|
||||||
|
- 작은 단위 구현 + `npm run build`/`tsc` 통과 검증. 접근성 WCAG AA.
|
||||||
|
|
||||||
|
## 협업 / 팀 통신 프로토콜
|
||||||
|
- **수신**: 오케스트레이터, designer(토큰·SCR 매핑), kintex-backend-dev(API 계약 `_workspace/*_backend_*`).
|
||||||
|
- **발신**: 경계면 불일치·계약 공백을 kintex-qa/backend에 보고. 이식 진행 상황을 `_workspace/`에 기록.
|
||||||
|
- **재호출**: 이전 컴포넌트가 있으면 개선점만 반영.
|
||||||
|
|
||||||
|
## 산출
|
||||||
|
- 코드: `src/frontend/` (Vite 프로젝트). 커밋 영어(conventional commits).
|
||||||
32
.claude/agents/kintex-qa.md
Normal file
32
.claude/agents/kintex-qa.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
---
|
||||||
|
name: kintex-qa
|
||||||
|
description: 킨텍스 AI 전시관리 시스템 통합 QA 에이전트. 백엔드 API 응답 shape과 프론트 훅/컴포넌트 호출을 동시에 읽어 경계면(shape) 불일치를 교차 비교하고, 공간 로직(배치·배선·규정 검증) 정합·보안 불변(자격증명/PII/스택트레이스 미노출·AI 이미지 워터마크 강제)·빌드 회귀를 각 모듈 완성 직후 점진 검증할 때 사용한다. general-purpose 타입. 다시 실행·업데이트·보완 포함.
|
||||||
|
tools: Read, Write, Edit, Glob, Grep, Bash
|
||||||
|
model: opus
|
||||||
|
---
|
||||||
|
|
||||||
|
당신은 킨텍스 AI 전시관리 시스템의 통합 QA다. **general-purpose 타입** — 검증 스크립트를 실제 실행한다.
|
||||||
|
|
||||||
|
## 핵심 원칙 (존재 확인이 아닌 경계면 교차 비교)
|
||||||
|
- API 응답 shape과 이를 소비하는 React 훅/타입을 **동시에 읽어** 필드명·타입·중첩·null 처리 불일치를 찾는다(예: 페이지 봉투 언랩, id String/number 정합).
|
||||||
|
- **각 모듈 완성 직후 점진 검증**(incremental QA) — 전체 완성 후 1회가 아니다.
|
||||||
|
- backend↔db 스키마 계약, backend↔frontend API 계약, design.md↔frontend 토큰 정합을 3중으로 대조.
|
||||||
|
|
||||||
|
## 킨텍스 도메인 특화 검증
|
||||||
|
- **공간 로직**: 배치 통로 폭·바닥하중·비상구 접근 규정 검증 결과가 PostGIS 연산과 일치하는지, 배선 최단 경로/견적 산출이 좌표와 정합하는지.
|
||||||
|
- **규정 룰셋**: 높이 5m·리깅 구조계산서 D-7·방염·복층 룰이 룰셋 버전과 일치하고, 위반 플래그(차단/경고 2단계)가 UI와 매칭되는지.
|
||||||
|
- **나노바나나 계약**: 생성 이미지에 워터마크·"AI 생성 예상 이미지" 고지가 강제되는지, 계약·심사 서류에서 생성 이미지가 자동 배제되는지(PLANNING §6-5·R1).
|
||||||
|
|
||||||
|
## 보안 불변 (반려 사유)
|
||||||
|
- IP·SSH·비밀번호·`os_pw_enc`가 API 응답/로그/에러에 노출되면 즉시 반려. 스택트레이스 미노출(요약 메시지만).
|
||||||
|
- `GEMINI_API_KEY` 등 시크릿이 코드/커밋/응답에 있으면 반려.
|
||||||
|
- RBAC(행사 단위) 우회 가능하면 반려.
|
||||||
|
|
||||||
|
## 작업 원칙
|
||||||
|
- 실패 시 해당 구현 에이전트(backend/frontend/db/visualizer)에 구체적 수정 지시. 통과까지 반려.
|
||||||
|
- 빌드/타입 회귀 확인: `./gradlew build`, `npm run build`/`tsc`, `python -m py_compile`(워커).
|
||||||
|
|
||||||
|
## 협업 / 팀 통신 프로토콜
|
||||||
|
- **수신**: 오케스트레이터(검증 트리거), 각 구현 에이전트(모듈 완성 통지).
|
||||||
|
- **발신**: 결함 리포트를 `_workspace/{phase}_qa_report.md`로, 수정 지시는 SendMessage로 해당 에이전트에.
|
||||||
|
- **재호출**: 이전 리포트의 open 항목부터 재검증.
|
||||||
71
.claude/skills/kintex-impl-orchestrator/SKILL.md
Normal file
71
.claude/skills/kintex-impl-orchestrator/SKILL.md
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
name: kintex-impl-orchestrator
|
||||||
|
description: 킨텍스 AI 전시관리 시스템 구현 오케스트레이터. React(Vite)+Spring Boot 3.x(Java17)+MyBatis+PostgreSQL(PostGIS)+Redis+나노바나나 Python 워커로 PLANNING v1.2의 M1~M9 모듈을 P0(M2 플로어플랜·M3 부스설계·M4 유틸리티배선·M5 시각화)부터 구현하도록 전문 에이전트 팀(kintex-backend-dev·kintex-frontend-dev·kintex-db-engineer·visualizer·kintex-qa·kintex-devops-dev + designer·planner·reviewer)을 조율한다. "킨텍스 구현", "kintex 개발", "부스 배치/설계/배선/시각화 구현", "백엔드/프론트/스키마 구현", "Stitch 화면 이식", "src 구현", "구현 백로그", "배포", "다시 실행", "재실행", "업데이트", "수정", "보완", "특정 모듈만(M2~M9)" 요청 시 반드시 이 스킬을 사용하라. (기획 문서 수정은 planner, 디자인 문서는 designer 경유 — 이 오케스트레이터는 구현 조율 트랙.)
|
||||||
|
---
|
||||||
|
|
||||||
|
# 킨텍스 AI 전시관리 시스템 — 구현 오케스트레이터
|
||||||
|
|
||||||
|
`docs/PLANNING.md`(v1.2)·`docs/design.md`·`docs/IMPLEMENTATION_BACKLOG.md`를 근거로 실제 구현(`src/`)을 에이전트 팀으로 조율한다. **실행 모드: 에이전트 팀**(기본). 모든 Agent 호출은 `model: "opus"`.
|
||||||
|
|
||||||
|
## 확정 스택 (불변)
|
||||||
|
React 18/19(Vite·TS) · Spring Boot 3.x(Java 17)+MyBatis · PostgreSQL(PostGIS) · Redis 큐 · 나노바나나 Python 워커(`tools/nanobanana`, google-genai `gemini-3.1-flash-image-preview`). 상세 아키텍처는 PLANNING §8.
|
||||||
|
|
||||||
|
## 에이전트 로스터
|
||||||
|
| 에이전트 | 역할 | 타입 |
|
||||||
|
|---|---|---|
|
||||||
|
| designer | Stitch 산출물 학습·design.md 정합·SCR 매핑·범위 게이트 | designer |
|
||||||
|
| kintex-db-engineer | PostGIS 스키마·마이그레이션·MyBatis 매퍼·마스터 시드 | kintex-db-engineer |
|
||||||
|
| kintex-backend-dev | Spring Boot+MyBatis M1~M9 API·룰/배치/배선 엔진·RenderJob 발행 | kintex-backend-dev |
|
||||||
|
| kintex-frontend-dev | React 이식(Stitch→컴포넌트)·캔버스·배선뷰·Before/After | kintex-frontend-dev |
|
||||||
|
| visualizer | 나노바나나 Python 워커 구현(RenderJob 소비·생성·오버레이 래스터) | visualizer |
|
||||||
|
| kintex-qa | 경계면 교차 QA(점진)·보안 불변·공간 로직 정합 | kintex-qa (general-purpose) |
|
||||||
|
| kintex-devops-dev | 빌드·CI/CD·배포 구성(승인 게이트) | kintex-devops-dev |
|
||||||
|
| planner / reviewer | 기획 갱신 / 산출물 교차 검증 | planner / reviewer |
|
||||||
|
|
||||||
|
## Phase 0: 컨텍스트 확인 (필수 선행)
|
||||||
|
1. `_workspace/` 존재 여부·`src/` 현황·`docs/IMPLEMENTATION_BACKLOG.md`를 확인해 실행 모드 판별:
|
||||||
|
- `_workspace/` 미존재 → **초기 실행**(Phase 1부터)
|
||||||
|
- `_workspace/` 존재 + 사용자가 부분 수정 요청 → **부분 재실행**(해당 에이전트/모듈만)
|
||||||
|
- `_workspace/` 존재 + 새 입력 → **새 실행**(기존 `_workspace/`를 `_workspace_prev/`로 이동)
|
||||||
|
2. **선행 게이트 2종을 사용자에게 확인**(미확정이면 해당 트랙 보류):
|
||||||
|
- **G1 나노바나나(Gemini) 외부 호출 승인**(PLANNING R12) — M5 실호출·배포 전 필수. 미승인 시 M5는 코드/구조만 작성하고 실 API 호출·배포 보류.
|
||||||
|
- **G2 배포 대상 서버·포트**(kintex는 GUARDiA 관제 인프라와 별개 도메인) — Phase 5 배포 전 확인.
|
||||||
|
|
||||||
|
## Phase 1: 설계 정합 (파이프라인, 팀)
|
||||||
|
`TeamCreate` 후 아래를 `TaskCreate`로 배분(의존성 `blockedBy`):
|
||||||
|
1. **designer** — Stitch 산출물(`stitch_kintex_ai_system_architect/`) 학습 → `docs/design.md` 정합(디자인 시스템 단일 출처 수렴) + SCR 매핑표 + 범위 게이트(범위 밖 Stitch 화면 P2 표기). ★design.md 수정은 designer만.
|
||||||
|
2. **kintex-db-engineer** — PLANNING §7 ERD → PostGIS 스키마 v1·마이그레이션·마스터 시드(홀·요율·규정 룰셋)·MyBatis 매퍼 골격. 스키마 계약 `_workspace/01_db_schema.md`.
|
||||||
|
3. **kintex-backend-dev** — P0 API 계약(OpenAPI 수준) 초안 `_workspace/01_backend_contracts.md`(스키마 계약 참조).
|
||||||
|
→ 종료 시 reviewer가 기획-디자인-스키마-계약 정합 교차 검증.
|
||||||
|
|
||||||
|
## Phase 2: P0 구현 (파이프라인 + 점진 QA)
|
||||||
|
IMPLEMENTATION_BACKLOG의 P0 에픽(M2·M3·M4·M5) 단위로 파이프라인. 각 모듈:
|
||||||
|
- **db → backend → frontend/visualizer → qa** 순으로 흐르되 모듈 간 독립 병렬(배리어 최소화).
|
||||||
|
- **M2 플로어플랜**: db(booth polygon·trench)→backend(배치 저장·규정 검증 PostGIS)→frontend(SCR-03 캔버스 이식)→qa
|
||||||
|
- **M3 부스 설계**: backend(초안·규정 사전검증)→frontend(SCR-06)→qa
|
||||||
|
- **M4 유틸리티 배선**: db(wiring LineString)→backend(배선 산출·견적·위치표시도)→frontend(SCR-07/08)→qa
|
||||||
|
- **M5 시각화**: backend(RenderJob 발행/상태)→visualizer(나노바나나 워커 소비·생성·S6 래스터)→frontend(SCR-12 갤러리·Before/After)→qa (★G1 미승인 시 실호출 제외, 목/폴백으로)
|
||||||
|
- **각 모듈 완성 직후 kintex-qa 점진 검증** — 경계면 shape·보안 불변·공간 로직·워터마크 강제. 실패 시 해당 에이전트에 SendMessage 반려.
|
||||||
|
|
||||||
|
## Phase 3: P1 구현
|
||||||
|
M1(홀 배정·요율 룰 엔진)·M6(마일스톤·서식)·M7(등록업체 매칭)·M9(정산·결제). Phase 2 패턴 반복.
|
||||||
|
|
||||||
|
## Phase 4: P2 구현
|
||||||
|
M8(물류 슬롯) + designer가 P2로 승격 판정한 Stitch 화면(BI·hall ops 등)은 planner 기획 반영 후에만.
|
||||||
|
|
||||||
|
## Phase 5: 빌드·배포 (G2 게이트)
|
||||||
|
kintex-devops-dev — Spring jar + React 번들(+나노바나나 워커 서비스) 빌드, Gitea `zio/kintex` CI/CD·webhook·systemd. **G2(서버·포트)·G1(Gemini 승인) 확정 후 실배포**; 미확정 시 파이프라인 파일만 준비.
|
||||||
|
|
||||||
|
## 데이터 전달
|
||||||
|
태스크 기반(조율) + 파일 기반(`_workspace/{phase}_{agent}_{artifact}`) + 메시지 기반(실시간). 최종 산출물은 `src/`·`docs/`, 중간물은 `_workspace/` 보존.
|
||||||
|
|
||||||
|
## 에러 핸들링
|
||||||
|
1회 재시도 후 재실패 시 해당 결과 없이 진행하고 `_workspace/` 리포트에 누락 명시. 상충 데이터는 삭제 않고 출처 병기. 빌드/QA 실패는 통과까지 반려.
|
||||||
|
|
||||||
|
## 테스트 시나리오
|
||||||
|
- **정상**: "킨텍스 M2 구현" → Phase0 컨텍스트 확인 → Phase1 설계정합 → Phase2 M2(db→backend→frontend→qa) → QA 통과 → 보고.
|
||||||
|
- **부분 재실행**: "SCR-07 배선 뷰만 다시" → Phase0에서 부분 재실행 판정 → kintex-frontend-dev(+backend 계약 확인)만 재호출 → qa 재검증.
|
||||||
|
- **에러**: G1(Gemini) 미승인 상태로 "M5 구현" → M5 실호출 제외·구조만 작성, 사용자에게 승인 요청 에스컬레이션.
|
||||||
|
|
||||||
|
## 후속 작업
|
||||||
|
description의 후속 키워드로 재실행/부분수정/업데이트를 트리거한다. Phase 0의 컨텍스트 확인이 초기/새/부분 실행을 판별한다.
|
||||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -13,3 +13,6 @@ output/
|
|||||||
# OS
|
# OS
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
|
# Stitch export — 대용량 스크린샷 PNG 제외(로컬 참조 유지), code.html·DESIGN.md만 버전관리
|
||||||
|
stitch_kintex_ai_system_architect/*/screen.png
|
||||||
|
|||||||
34
CLAUDE.md
34
CLAUDE.md
@ -20,6 +20,19 @@ kintex/
|
|||||||
└── src/ # 서비스 구현 (백엔드/프론트) — 이후 단계
|
└── src/ # 서비스 구현 (백엔드/프론트) — 이후 단계
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 기술 스택 (확정 2026-07-11 · 사용자 지정)
|
||||||
|
|
||||||
|
| 레이어 | 기술 |
|
||||||
|
|--------|------|
|
||||||
|
| 프론트엔드 | **React 18/19 + Vite + TypeScript** (반응형: 데스크톱=설계/에디터, 모바일=조회·승인·현장) |
|
||||||
|
| 백엔드 | **Spring Boot 3.x (Java 17) + MyBatis** — REST + WebSocket(STOMP), 룰 엔진·배치/배선 엔진 |
|
||||||
|
| DB | **PostgreSQL (+ PostGIS)** — 부스 폴리곤·트렌치 포인트·배선 LineString 공간 데이터 |
|
||||||
|
| 비동기 | Redis 작업 큐 (RenderJob·서류·알림) |
|
||||||
|
| 이미지 생성 | **나노바나나 Python 워커 사이드카** (`tools/nanobanana`, google-genai + `gemini-3.1-flash-image-preview`) — Spring이 큐로 트리거, 결과는 오브젝트 스토리지 + WebSocket 완료 푸시 |
|
||||||
|
| 인증 | 행사 단위 RBAC(JWT) |
|
||||||
|
|
||||||
|
GUARDiA 표준 프레임워크(Spring Boot 3.5 + React 19 + MyBatis + PostgreSQL)와 정렬. 상세 아키텍처는 `docs/PLANNING.md` §8. **신규 코드는 이 스택을 따른다** — developer 에이전트는 `src/` 구현 시 백엔드 Spring Boot/MyBatis, 프론트 React(Vite)를 사용하고, 나노바나나 호출은 `tools/nanobanana` Python 워커 모듈만 경유한다.
|
||||||
|
|
||||||
## 에이전트 워크플로
|
## 에이전트 워크플로
|
||||||
|
|
||||||
작업은 아래 순서의 서브에이전트 체인으로 진행한다. 각 에이전트는 `.claude/agents/`에 정의되어 있다.
|
작업은 아래 순서의 서브에이전트 체인으로 진행한다. 각 에이전트는 `.claude/agents/`에 정의되어 있다.
|
||||||
@ -42,6 +55,25 @@ kintex/
|
|||||||
|
|
||||||
## 참조 자산
|
## 참조 자산
|
||||||
|
|
||||||
|
- `docs/PLANNING.md` — 시스템 기획서(v1.2, M1~M9 모듈·나노바나나 파이프라인). **기획 변경은 planner 경유.**
|
||||||
|
- `docs/design.md` — UI 디자인 스펙(14화면 Stitch 프롬프트). **디자인 변경은 designer 경유.**
|
||||||
|
- `docs/IMPLEMENTATION_BACKLOG.md` — 구현 백로그(Phase 0~5, 모듈별 작업·담당·의존)
|
||||||
- `docs/analysis/kintex-website.md` — kintex.com 전체 페이지 분석
|
- `docs/analysis/kintex-website.md` — kintex.com 전체 페이지 분석
|
||||||
- `docs/analysis/reroomai-source.md` — (예정) ReRoomAI 소스 분석. 소스 폴더(C:\GUARDiA\workspace\ReRoomAI) 연결 후 생성된다. 이 파일이 없으면 ReRoomAI 관련 기획은 "연계 예정"으로만 다룰 것.
|
- `docs/analysis/reroomai-source.md` — ReRoomAI 소스 분석(나노바나나 image-to-image·보존/교체 프롬프트 차용)
|
||||||
- `docs/BACKLOG.md` — 검증 에이전트 지적사항 티켓 목록
|
- `docs/BACKLOG.md` — 검증 에이전트 지적사항 티켓 목록
|
||||||
|
- `stitch_kintex_ai_system_architect/` — Stitch 생성 화면 18종·DESIGN.md 3종(designer 학습·정합화 참조)
|
||||||
|
|
||||||
|
## 하네스: 구현 (kintex-impl-orchestrator)
|
||||||
|
|
||||||
|
**목표:** PLANNING v1.2의 M1~M9를 React(Vite) + Spring Boot 3.x(Java17) + MyBatis + PostgreSQL(PostGIS) + Redis + 나노바나나 Python 워커로 P0(M2·M3·M4·M5)부터 구현.
|
||||||
|
|
||||||
|
**트리거:** 킨텍스 구현·부스 배치/설계/배선/시각화 구현·백엔드/프론트/스키마 구현·Stitch 화면 이식·src 구현·배포·다시 실행·특정 모듈만 요청 시 `kintex-impl-orchestrator` 스킬을 사용하라. 단순 질문은 직접 응답 가능.
|
||||||
|
|
||||||
|
**에이전트:** kintex-backend-dev · kintex-frontend-dev · kintex-db-engineer · visualizer(나노바나나 워커) · kintex-qa · kintex-devops-dev + designer · planner · reviewer
|
||||||
|
|
||||||
|
**선행 게이트:** G1 나노바나나(Gemini) 외부 호출 승인(PLANNING R12) · G2 배포 대상 서버·포트(GUARDiA 인프라와 별개 도메인).
|
||||||
|
|
||||||
|
**변경 이력:**
|
||||||
|
| 날짜 | 변경 내용 | 대상 | 사유 |
|
||||||
|
|------|----------|------|------|
|
||||||
|
| 2026-07-11 | 구현 하네스 초기 구성 — 전문 에이전트 6종 + kintex-impl-orchestrator + 구현 백로그 | 전체 | 범용 에이전트만 존재 → 스택(React/Spring/MyBatis/PostgreSQL) 확정 후 실제 구현 조율 팀 구성. developer 스택 갱신·designer에 Stitch 학습 트랙 추가 |
|
||||||
|
|||||||
97
docs/IMPLEMENTATION_BACKLOG.md
Normal file
97
docs/IMPLEMENTATION_BACKLOG.md
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
# 킨텍스 AI 전시관리 시스템 — 구현 백로그
|
||||||
|
|
||||||
|
> 작성: 2026-07-11 · 근거: `docs/PLANNING.md` v1.2(M1~M9)·`docs/design.md`(SCR-01~M2)·`docs/analysis/reroomai-source.md`·Stitch 산출물(`stitch_kintex_ai_system_architect/`)
|
||||||
|
> 실행: `kintex-impl-orchestrator` 스킬(에이전트 팀). 담당 에이전트 약칭 — BE=kintex-backend-dev, FE=kintex-frontend-dev, DB=kintex-db-engineer, VIZ=visualizer(나노바나나 워커), QA=kintex-qa, DES=designer, OPS=kintex-devops-dev.
|
||||||
|
> 스택: React(Vite·TS) + Spring Boot 3.x(Java17)+MyBatis + PostgreSQL(PostGIS) + Redis + 나노바나나 Python 워커.
|
||||||
|
|
||||||
|
## 선행 게이트 (착수 전 소유자 확인)
|
||||||
|
- **G1 나노바나나(Gemini) 외부 호출 승인**(PLANNING R12) — 미승인 시 M5는 코드/구조만, 실호출·배포 보류.
|
||||||
|
- **G2 배포 대상 서버·포트** — kintex는 GUARDiA 관제 인프라와 별개 도메인. 서버 재사용/포트/도메인 확정 필요(Phase 5 전).
|
||||||
|
|
||||||
|
## Phase 0 — 프로젝트 스캐폴딩 (P0 선행)
|
||||||
|
| ID | 작업 | 담당 | 의존 | 완료 기준 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| S-1 | `src/backend` Spring Boot 3.x(Java17)+MyBatis+PostGIS 스캐폴드, `com.zioinfo.kintex` | BE | — | `./gradlew compileJava` 통과 |
|
||||||
|
| S-2 | `src/frontend` React 18/19+Vite+TS 스캐폴드 + design.md 토큰(팔레트·타이포) CSS 변수화 | FE | 설계정합 | `npm run build` 통과 |
|
||||||
|
| S-3 | `kintex_db`(PostGIS) 마이그레이션 도구(Flyway) + 공통 엔티티 DDL v1 | DB | — | 마이그레이션 적용·롤백 검증 |
|
||||||
|
| S-4 | 나노바나나 워커 서비스 골격(Redis 큐 소비 루프, `tools/nanobanana` 재사용) | VIZ | — | `py_compile` + 큐 소비 스텁 기동 |
|
||||||
|
|
||||||
|
## Phase 1 — 설계 정합
|
||||||
|
| ID | 작업 | 담당 | 의존 | 완료 기준 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| D-1 | Stitch 산출물 학습 → design.md 디자인 시스템 단일 출처 수렴 + SCR 매핑표 + 범위 게이트 | DES | — | design.md 갱신·매핑표·P2 표기 |
|
||||||
|
| D-2 | PostGIS 스키마 v1(Event/Hall/Booth polygon/DesignPlan/UtilityOrder LineString/RenderJob/Document/Company/Payment) + 마스터 시드(홀·요율·규정 룰셋) | DB | S-3 | `_workspace/01_db_schema.md` + 시드 멱등 |
|
||||||
|
| D-3 | P0 API 계약 초안(OpenAPI 수준) | BE | D-2 | `_workspace/01_backend_contracts.md` |
|
||||||
|
| D-4 | 정합 교차 검증(기획-디자인-스키마-계약) | reviewer | D-1..D-3 | 불일치 0 또는 티켓화 |
|
||||||
|
|
||||||
|
## Phase 2 — P0 구현 (핵심)
|
||||||
|
|
||||||
|
### M2 플로어플랜 스튜디오 (부스 배치 자동화)
|
||||||
|
| ID | 작업 | 담당 | 의존 | 완료 기준 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| M2-1 | Booth polygon·Hall·Trench 스키마·매퍼(ST_Area/ST_Buffer/ST_Intersects) | DB | D-2 | 공간 쿼리 단위 검증 |
|
||||||
|
| M2-2 | 배치 저장·조회 API + 규정 검증(통로 폭·바닥하중·비상구·복층) PostGIS 서비스 | BE | M2-1 | 위반 플래그(차단/경고) 응답 |
|
||||||
|
| M2-3 | 배치 자동생성(제약 솔버/휴리스틱) — 복수 배치안 | BE | M2-2 | 조건 입력→복수 안 |
|
||||||
|
| M2-4 | SCR-03 부스 배치 에디터(캔버스 다크서피스·드래그·트렌치·위반 오버레이) — Stitch `booth_layout_editor` 이식 | FE | M2-2 | 드래그·위반핀↔목록 동기 |
|
||||||
|
| M2-5 | SCR-04 배치안 비교(S7 조감 카드) — Stitch `layout_comparison` 이식 | FE | M2-3, M5-1 | 지표 비교·선택 |
|
||||||
|
| M2-6 | 점진 QA(경계면·공간 로직·규정 룰셋 정합) | QA | M2-* | 통과까지 반려 |
|
||||||
|
|
||||||
|
### M3 부스 설계 스튜디오
|
||||||
|
| ID | 작업 | 담당 | 의존 | 완료 기준 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| M3-1 | 부스 설계(조립 옵션/독립 초안)·규정 사전검증(높이5m·리깅D-7·방염·복층) API | BE | D-2 | 위반 사전 플래깅 |
|
||||||
|
| M3-2 | SCR-06 설계 스튜디오(스펙 폼·4샷 그리드·Before/After) — Stitch `booth_design_studio` 이식 | FE | M3-1, M5-1 | 컨펌 흐름·"시공기준=도면" 동의 |
|
||||||
|
| M3-3 | SCR-09 규정 검증 리포트 — Stitch `compliance_report` 이식 | FE | M3-1 | 차단 시 제출 비활성·면책·룰셋 버전 |
|
||||||
|
| M3-4 | 점진 QA | QA | M3-* | 통과 |
|
||||||
|
|
||||||
|
### M4 유틸리티 설계 (전기·조명 / 네트워크·급배수)
|
||||||
|
| ID | 작업 | 담당 | 의존 | 완료 기준 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| M4-1 | Wiring LineString 스키마·최단 배선(ST_Distance/트렌치 라우팅) 매퍼 | DB | D-2 | 최단 경로 쿼리 |
|
||||||
|
| M4-2 | 전기 용량·분전반 산출 + 네트워크/급배수 배선 + 자동 견적 API | BE | M4-1 | kW 합산·요금 정합 |
|
||||||
|
| M4-3 | 위치표시도 자동 생성(수기 작도 대체 서식) | BE | M4-2 | PDF/이미지 산출 |
|
||||||
|
| M4-4 | SCR-07 배선 뷰(트렌치 오버레이·견적 패널) — Stitch `utility_wiring_view` 이식 | FE | M4-2 | 단말 드래그→경로 재계산 |
|
||||||
|
| M4-5 | SCR-08 신청 요약·위치표시도 — Stitch `utility_order_summary` 이식 | FE | M4-3 | 마감(D-25) 고지·제출 |
|
||||||
|
| M4-6 | 점진 QA(견적 산술·"현장 추가불가" 고지·좌표 정합) | QA | M4-* | 통과 |
|
||||||
|
|
||||||
|
### M5 나노바나나 시각화 (★G1 게이트)
|
||||||
|
| ID | 작업 | 담당 | 의존 | 완료 기준 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| M5-1 | RenderJob 발행/상태 API + Redis 큐 + WebSocket 완료 푸시 | BE | D-2 | 큐잉·상태 전이 |
|
||||||
|
| M5-2 | 나노바나나 워커: PLANNING §6-2 scene→build_booth_prompt→생성, 메타데이터 임베드·워터마크·스키마 해시 캐시(`tools/nanobanana` 재사용) | VIZ | M5-1, S-4 | (G1 승인 시) 실 생성 / 미승인 시 목·폴백 |
|
||||||
|
| M5-3 | S6 배선 오버레이 래스터 합성(생성형 아님, PIL 좌표 정합) | VIZ | M4-1, M5-2 | 도면 위 적/청/녹 오버레이 |
|
||||||
|
| M5-4 | SCR-12 시각화 갤러리(S1~S7·Before/After·워터마크 상시) — Stitch `visualization_gallery` 이식 | FE | M5-1 | 온디맨드 생성·재시도·고지바 |
|
||||||
|
| M5-5 | 점진 QA(워터마크 강제·서류 배제·캐시·쿼터) | QA | M5-* | 통과 |
|
||||||
|
|
||||||
|
### 공통 화면 (P0 대시보드·인증)
|
||||||
|
| ID | 작업 | 담당 | 의존 | 완료 기준 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| C-1 | 인증(행사 단위 RBAC+JWT) API + SCR-01 로그인/워크스페이스 — Stitch `login_workspace_selection` 이식 | BE, FE | S-1,S-2 | 미등록 장치업체 초대 차단 |
|
||||||
|
| C-2 | SCR-02 주최자 대시보드(마일스톤 타임라인·KPI) — Stitch `organizer_dashboard` 이식 | FE | C-1 | D-데이·KPI 렌더 |
|
||||||
|
| C-3 | SCR-05 참가업체 부스 홈 — Stitch `exhibitor_home` 이식 | FE | C-1 | 진행 스테퍼·마감 리마인더 |
|
||||||
|
| C-4 | SCR-10 홀매니저 승인 큐 / SCR-11 검수 상세 — Stitch `manager_approval_queue`·`review_details` 이식 | FE | M2-2,M3-1 | AI 사전심사 플래그·일괄승인 |
|
||||||
|
| C-5 | SCR-M1 현장 체크리스트 / SCR-M2 현장 검수(모바일) — Stitch `contractor_on_site_checklist`·`manager_field_inspection` 이식 | FE | C-1 | 오프라인·48px 터치 |
|
||||||
|
|
||||||
|
## Phase 3 — P1
|
||||||
|
| ID | 작업 | 담당 | 완료 기준 |
|
||||||
|
|---|---|---|---|
|
||||||
|
| P1-M1 | 홀 배정·자동 견적(요율 룰 엔진: 성수기·전시장 할증·예치금) | BE, FE, DB | 즉시 견적·배정신청서 생성 |
|
||||||
|
| P1-M6 | 마일스톤(D-150/30/25/7)·서식 자동생성·AI 서류 검수 | BE, FE | 마일스톤 역산·검수 리포트 |
|
||||||
|
| P1-M7 | 등록업체(739) 매칭·RFQ — 미등록 시공 차단 | BE, FE, DB | 추천·견적요청 |
|
||||||
|
| P1-M9 | 정산·결제(납부 스케줄·PG·예치금 정산) | BE, FE | 스케줄 알림·PG 연동 |
|
||||||
|
|
||||||
|
## Phase 4 — P2
|
||||||
|
| ID | 작업 | 담당 | 비고 |
|
||||||
|
|---|---|---|---|
|
||||||
|
| P2-M8 | 반입/반출 물류 슬롯·QR 통행증 | BE, FE | 운영팀 협업 전제 |
|
||||||
|
| P2-X | Stitch 범위밖 화면(BI·hall ops·exhibition schedule·admin) | DES→planner | 기획 반영 후에만 P 승격 |
|
||||||
|
|
||||||
|
## Phase 5 — 빌드·배포 (G2 게이트)
|
||||||
|
| ID | 작업 | 담당 | 완료 기준 |
|
||||||
|
|---|---|---|---|
|
||||||
|
| DEP-1 | Spring jar + React 번들(+워커 서비스) 빌드 파이프라인 | OPS | 로컬/서버 빌드 통과 |
|
||||||
|
| DEP-2 | Gitea `zio/kintex` CI/CD·webhook·systemd·env(GEMINI_API_KEY 서버 env) | OPS | (G2 확정 후) push→배포 |
|
||||||
|
|
||||||
|
## 진행 규칙
|
||||||
|
- **각 모듈 완성 직후 QA 점진 검증**(전체 완성 후 1회 아님). 보안 불변(자격증명·스택트레이스 미노출·AI 워터마크 강제)은 반려 사유.
|
||||||
|
- 기획 변경은 planner, 디자인 변경은 designer 경유(직접 수정 금지).
|
||||||
@ -431,20 +431,21 @@ Render this exhibition booth as if construction is complete.
|
|||||||
|
|
||||||
## 8. 아키텍처 개요
|
## 8. 아키텍처 개요
|
||||||
|
|
||||||
전제 스택: **FastAPI + PostgreSQL(PostGIS) + 비동기 이미지 생성 큐 + Next.js**.
|
전제 스택 (확정, GUARDiA 표준 프레임워크 정렬): **React 18/19(Vite·TypeScript) + Spring Boot 3.x(Java 17) + MyBatis + PostgreSQL(PostGIS) + Redis 작업 큐 + 나노바나나 Python 워커 사이드카**.
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
graph LR
|
graph LR
|
||||||
subgraph Frontend
|
subgraph Frontend
|
||||||
WEB[Next.js 웹<br/>반응형: 데스크톱=설계, 모바일=조회·승인·현장]
|
WEB[React 18/19 웹 (Vite·TS)<br/>반응형: 데스크톱=설계·에디터, 모바일=조회·승인·현장]
|
||||||
CANVAS[플로어플랜 캔버스<br/>SVG/WebGL 편집기]
|
CANVAS[플로어플랜 캔버스<br/>SVG/WebGL 편집기]
|
||||||
end
|
end
|
||||||
subgraph Backend
|
subgraph Backend
|
||||||
API[FastAPI<br/>REST + WebSocket 진행 알림]
|
API[Spring Boot 3.x (Java 17)<br/>REST + WebSocket/STOMP 진행 알림]
|
||||||
RULE[룰 엔진<br/>규정 검증·요율 계산]
|
RULE[룰 엔진<br/>규정 검증·요율 계산 (서비스 계층)]
|
||||||
LAYOUT[배치·배선 엔진<br/>제약 솔버, PostGIS 연산]
|
LAYOUT[배치·배선 엔진<br/>제약 솔버 + PostGIS 공간 SQL]
|
||||||
QUEUE[비동기 큐 Redis/RQ<br/>이미지 생성·서류 생성·알림]
|
MYB[MyBatis<br/>매퍼·공간 SQL 바인딩]
|
||||||
NB[nanobanana 워커<br/>tools/nanobanana 모듈]
|
QUEUE[비동기 작업 큐 Redis<br/>RenderJob·서류 생성·알림]
|
||||||
|
NB[나노바나나 Python 워커 사이드카<br/>tools/nanobanana · google-genai SDK]
|
||||||
end
|
end
|
||||||
subgraph Data
|
subgraph Data
|
||||||
PG[(PostgreSQL + PostGIS<br/>공간 데이터·업무 데이터)]
|
PG[(PostgreSQL + PostGIS<br/>공간 데이터·업무 데이터)]
|
||||||
@ -454,17 +455,20 @@ graph LR
|
|||||||
CANVAS --> API
|
CANVAS --> API
|
||||||
API --> RULE
|
API --> RULE
|
||||||
API --> LAYOUT
|
API --> LAYOUT
|
||||||
|
API --> MYB --> PG
|
||||||
|
LAYOUT --> MYB
|
||||||
API --> QUEUE --> NB --> OBJ
|
API --> QUEUE --> NB --> OBJ
|
||||||
API --> PG
|
NB -.완료 푸시(WebSocket).-> API
|
||||||
LAYOUT --> PG
|
|
||||||
NB -.Gemini API.-> EXT[Google Gemini]
|
NB -.Gemini API.-> EXT[Google Gemini]
|
||||||
```
|
```
|
||||||
|
|
||||||
- **공간 데이터 일원화**: 부스 폴리곤·트렌치 포인트·배선 경로를 PostGIS 지오메트리로 저장 — 최단 배선(라우팅), 통로 폭 검증(버퍼 연산), 면적 정산이 모두 SQL 수준에서 수행.
|
- **백엔드 = Spring Boot 3.x(Java 17) + MyBatis**: REST API와 실시간 진행 알림은 Spring Web + WebSocket(STOMP)로 처리. 룰 엔진(규정·요율)과 배치/배선 엔진은 Spring 서비스 계층으로 두고, 공간 연산은 MyBatis 매퍼가 바인딩하는 **PostgreSQL PostGIS 공간 SQL**(부스 폴리곤·트렌치 포인트·배선 LineString)로 수행.
|
||||||
- **이미지 생성은 전면 비동기**: RenderJob 큐잉 → 워커가 Gemini 호출 → WebSocket으로 완료 푸시. 재시도·비용 상한·스키마 해시 캐시를 워커 레벨에서 관리.
|
- **공간 데이터 일원화**: 부스 폴리곤·트렌치 포인트·배선 경로를 PostGIS 지오메트리로 저장 — 최단 배선(라우팅), 통로 폭 검증(버퍼 연산), 면적 정산이 모두 SQL 수준에서 수행. MyBatis가 `ST_*` 함수 호출을 매퍼 XML로 관리.
|
||||||
- **룰 엔진 분리**: 규정(높이·방염·하중)과 요율을 코드가 아닌 버전 관리되는 룰셋 데이터로 유지 — 킨텍스 규정 개정(연 단위 요율 변경 등) 대응.
|
- **프론트 = React 18/19(Vite·TypeScript)**: 반응형(데스크톱=설계/에디터, 모바일=조회·승인·현장). 플로어플랜 캔버스는 SVG/WebGL. 현장 시나리오(홀매니저 검수 체크, 참가업체 승인, 반입 QR)는 모바일 뷰 최적화. UI 상세는 후속 `docs/design.md`.
|
||||||
- **모바일**: 별도 앱이 아닌 반응형 웹 우선. 현장 시나리오(홀매니저 검수 체크, 참가업체 승인, 반입 QR)는 모바일 뷰 최적화. UI 상세는 후속 `docs/design.md`.
|
- **이미지 생성은 전면 비동기 — Python 워커 사이드카**: Spring 백엔드가 RenderJob을 Redis 작업 큐에 넣으면 **별도 Python 워커(`tools/nanobanana`)** 가 소비해 Gemini(google-genai Python SDK)로 이미지를 생성하고, 결과를 오브젝트 스토리지에 적재한 뒤 WebSocket으로 완료를 푸시한다. 서류/알림 생성도 동일 큐를 경유. 재시도·비용 상한·스키마 해시 캐시는 워커 레벨에서 관리.
|
||||||
- 인증: 행사 단위 RBAC(2장 권한 모델). 도면·설계 데이터는 행사 종료 후 보존 정책 별도 정의(참가업체 자산).
|
- **Python 워커 유지 근거**: 나노바나나 호출 스택(client.py)은 방금 ReRoomAI 검증 패턴으로 확정되었고 **google-genai는 Python SDK**를 사용한다(§6-4). 이를 Java로 재구현하면 검증된 방어 로직·프롬프트 조립을 이식·재검증하는 비용이 발생하므로, image-to-image 파이프라인은 **Python 워커 사이드카로 유지**하고 Spring 백엔드는 큐·오케스트레이션·상태 관리만 담당한다(Java 재구현 대신 얇은 큐 계약으로 결합).
|
||||||
|
- **룰 엔진 분리**: 규정(높이·방염·하중)과 요율을 코드가 아닌 버전 관리되는 룰셋 데이터로 유지 — 킨텍스 규정 개정(연 단위 요율 변경 등) 대응. Spring 서비스 계층이 룰셋을 로드·평가.
|
||||||
|
- 인증: 행사 단위 RBAC(2장 권한 모델) + JWT. 오브젝트 스토리지에 도면·생성 이미지·서식 적재. 도면·설계 데이터는 행사 종료 후 보존 정책 별도 정의(참가업체 자산).
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -523,3 +527,4 @@ graph LR
|
|||||||
|---|---|---|---|
|
|---|---|---|---|
|
||||||
| v1.0 | 2026-07-11 | planner | 최초 작성 — kintex-website.md 분석 기반 전체 기획. ReRoomAI 소스 분석(reroomai-source.md)은 추가 시 6장 갱신 예정 |
|
| v1.0 | 2026-07-11 | planner | 최초 작성 — kintex-website.md 분석 기반 전체 기획. ReRoomAI 소스 분석(reroomai-source.md)은 추가 시 6장 갱신 예정 |
|
||||||
| v1.1 | 2026-07-11 | planner | ReRoomAI 소스 분석 반영. ①§6 나노바나나 파이프라인 제어 파라미터 확정 — 모델 `gemini-3.1-flash-image-preview`(나노바나나 2)·`@google/genai` SDK·image-to-image(inlineData+text parts) 호출 스택, 구조화 사전(BOOTH_TYPES·BOOTH_STYLES·FIXTURE_LAYERS) + "보존/교체 명시 분리" 부스 프롬프트 템플릿(§6-4), Canvas 1024px 전처리·RenderJob 방어 로직(크기 가드·SAFETY·에러 분기·성공 시에만 쿼터 차감)·단계별 로딩 UX 신설(§6-5). ②S6 배선 오버레이 백엔드 래스터 합성 우선 명확화(§6-3). ③§7 마스터 데이터 순증 반영(기본부스 표준 품목·프리미엄 6×3×4m 2kW·조명 반입 금지·이격 30/60cm·옥외 2,849㎡·홀6 93×60×10m·제3전시장 홀11~18). ④§10 R11 해소, R12(Gemini 외부 API 미승인·소유자 승인 게이트) 추가. BACKLOG B-11 done, B-09 정리 |
|
| v1.1 | 2026-07-11 | planner | ReRoomAI 소스 분석 반영. ①§6 나노바나나 파이프라인 제어 파라미터 확정 — 모델 `gemini-3.1-flash-image-preview`(나노바나나 2)·`@google/genai` SDK·image-to-image(inlineData+text parts) 호출 스택, 구조화 사전(BOOTH_TYPES·BOOTH_STYLES·FIXTURE_LAYERS) + "보존/교체 명시 분리" 부스 프롬프트 템플릿(§6-4), Canvas 1024px 전처리·RenderJob 방어 로직(크기 가드·SAFETY·에러 분기·성공 시에만 쿼터 차감)·단계별 로딩 UX 신설(§6-5). ②S6 배선 오버레이 백엔드 래스터 합성 우선 명확화(§6-3). ③§7 마스터 데이터 순증 반영(기본부스 표준 품목·프리미엄 6×3×4m 2kW·조명 반입 금지·이격 30/60cm·옥외 2,849㎡·홀6 93×60×10m·제3전시장 홀11~18). ④§10 R11 해소, R12(Gemini 외부 API 미승인·소유자 승인 게이트) 추가. BACKLOG B-11 done, B-09 정리 |
|
||||||
|
| v1.2 | 2026-07-11 | planner | **기술 스택 확정 — React + Spring Boot 3.x(Java 17) + MyBatis + PostgreSQL(PostGIS), 나노바나나 Python 워커 사이드카. GUARDiA 표준 프레임워크 정렬(사용자 지정).** §8 아키텍처 전면 정합화: 백엔드 FastAPI→Spring Boot 3.x + MyBatis(REST + WebSocket/STOMP, 룰·배치/배선 엔진=서비스 계층 + PostGIS 공간 SQL), 프론트 Next.js→React 18/19(Vite·TS, SVG/WebGL 캔버스), 비동기 큐 Redis 유지 + 이미지 생성은 별도 **Python 워커 사이드카(`tools/nanobanana`, google-genai Python SDK)** 로 분리(Spring이 RenderJob 큐잉→Python 워커 소비·생성→오브젝트 스토리지 적재→WebSocket 완료 푸시, 서류·알림도 동일 큐). Python 워커 유지 근거 명시(ReRoomAI 검증 client.py·Python SDK — Java 재구현 회피). 인증(행사 단위 RBAC+JWT)·오브젝트 스토리지 유지. §8 mermaid 갱신. **기능 범위(M1~M9)·우선순위·나노바나나 파이프라인 로직 불변** — 스택 표기 정합화만 수행 |
|
||||||
|
|||||||
@ -0,0 +1,422 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" lang="en"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX AI CMS - Dashboard</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=Hanken+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400&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": {
|
||||||
|
"surface-border": "#E5E7EB",
|
||||||
|
"surface-dim": "#d9dadb",
|
||||||
|
"surface-bright": "#f8f9fa",
|
||||||
|
"outline": "#727782",
|
||||||
|
"inverse-on-surface": "#f0f1f2",
|
||||||
|
"primary-fixed-dim": "#a6c8ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-background": "#191c1d",
|
||||||
|
"on-surface": "#191c1d",
|
||||||
|
"on-tertiary-container": "#ffc1b8",
|
||||||
|
"on-primary-fixed-variant": "#004786",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"primary-fixed": "#d5e3ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-tertiary-fixed-variant": "#930002",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-container": "#edeeef",
|
||||||
|
"surface-tint": "#115fac",
|
||||||
|
"surface-variant": "#e1e3e4",
|
||||||
|
"surface-container-highest": "#e1e3e4",
|
||||||
|
"status-pending": "#F59E0B",
|
||||||
|
"status-active": "#10B981",
|
||||||
|
"on-tertiary-fixed": "#410000",
|
||||||
|
"primary-container": "#0059a6",
|
||||||
|
"surface-container-high": "#e7e8e9",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-secondary-fixed-variant": "#1e4974",
|
||||||
|
"secondary-fixed": "#d2e4ff",
|
||||||
|
"tertiary": "#8a0002",
|
||||||
|
"tertiary-fixed": "#ffdad5",
|
||||||
|
"secondary-container": "#a6ccff",
|
||||||
|
"outline-variant": "#c2c6d3",
|
||||||
|
"on-surface-variant": "#424751",
|
||||||
|
"surface-container-low": "#f3f4f5",
|
||||||
|
"on-primary-fixed": "#001c3b",
|
||||||
|
"surface": "#f8f9fa",
|
||||||
|
"inverse-surface": "#2e3132",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"tertiary-container": "#b60004",
|
||||||
|
"primary": "#00427d",
|
||||||
|
"on-primary-container": "#b6d1ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-secondary-container": "#2e5682",
|
||||||
|
"secondary": "#39608d",
|
||||||
|
"on-secondary-fixed": "#001c37",
|
||||||
|
"inverse-primary": "#a6c8ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#a3c9fc",
|
||||||
|
"table-header": "#F1F5F9",
|
||||||
|
"tertiary-fixed-dim": "#ffb4a9",
|
||||||
|
"background": "#f8f9fa"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"margin-desktop": "32px",
|
||||||
|
"container-max": "1440px",
|
||||||
|
"margin-mobile": "16px",
|
||||||
|
"gutter": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-md": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"mono-data": [
|
||||||
|
"jetbrainsMono"
|
||||||
|
],
|
||||||
|
"body-md": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"headline-lg": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"headline-lg-mobile": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"body-sm": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"label-md": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"body-lg": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-md": [
|
||||||
|
"20px",
|
||||||
|
{
|
||||||
|
"lineHeight": "28px",
|
||||||
|
"fontWeight": "600"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mono-data": [
|
||||||
|
"13px",
|
||||||
|
{
|
||||||
|
"lineHeight": "18px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body-md": [
|
||||||
|
"14px",
|
||||||
|
{
|
||||||
|
"lineHeight": "20px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"headline-lg": [
|
||||||
|
"30px",
|
||||||
|
{
|
||||||
|
"lineHeight": "38px",
|
||||||
|
"letterSpacing": "-0.02em",
|
||||||
|
"fontWeight": "700"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"headline-lg-mobile": [
|
||||||
|
"24px",
|
||||||
|
{
|
||||||
|
"lineHeight": "32px",
|
||||||
|
"fontWeight": "700"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body-sm": [
|
||||||
|
"13px",
|
||||||
|
{
|
||||||
|
"lineHeight": "18px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"label-md": [
|
||||||
|
"12px",
|
||||||
|
{
|
||||||
|
"lineHeight": "16px",
|
||||||
|
"letterSpacing": "0.05em",
|
||||||
|
"fontWeight": "600"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body-lg": [
|
||||||
|
"16px",
|
||||||
|
{
|
||||||
|
"lineHeight": "24px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.icon-fill {
|
||||||
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background font-body-md overflow-x-hidden antialiased">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="hidden md:flex w-[240px] h-screen fixed left-0 top-0 bg-surface border-r border-surface-border flex-col py-stack-lg z-50">
|
||||||
|
<div class="px-margin-desktop mb-stack-lg">
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">KINTEX CMS</h1>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Exhibition Management</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 px-4 space-y-2">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg bg-secondary-container text-on-secondary-container font-semibold transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined icon-fill">dashboard</span>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 hover:bg-surface-container-high active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined">calendar_month</span>
|
||||||
|
Exhibition Schedule
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 hover:bg-surface-container-high active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined">sensors</span>
|
||||||
|
Hall Operations
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200 hover:bg-surface-container-high active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined">analytics</span>
|
||||||
|
Business Intelligence
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 mt-auto space-y-4">
|
||||||
|
<button class="w-full bg-primary text-on-primary py-2 rounded-lg font-label-md text-label-md hover:bg-primary-fixed-variant transition-colors">
|
||||||
|
Create New Event
|
||||||
|
</button>
|
||||||
|
<div class="pt-4 border-t border-surface-border space-y-2">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
Support
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-4 pt-2">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant">person</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-body-sm text-body-sm text-on-surface-variant">Admin Profile</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="hidden md:flex h-16 w-[calc(100%-240px)] fixed top-0 right-0 z-40 bg-surface border-b border-surface-border items-center justify-between px-margin-desktop ml-[240px]">
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<nav class="flex gap-6">
|
||||||
|
<a class="font-label-md text-label-md text-primary border-b-2 border-primary pb-1" href="#">Overview</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Hall Map</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Reports</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-1.5 bg-surface-container-low border border-surface-border rounded-full text-body-sm font-body-sm focus:outline-none focus:border-primary w-64" placeholder="Search..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="font-label-md text-label-md text-primary hover:bg-primary-container hover:text-on-primary-container px-4 py-1.5 rounded-full transition-colors border border-primary">
|
||||||
|
Refresh Data
|
||||||
|
</button>
|
||||||
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||||
|
<span class="material-symbols-outlined">account_circle</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="md:ml-[240px] pt-16 md:pt-24 px-margin-mobile md:px-margin-desktop pb-stack-lg max-w-container-max mx-auto min-h-screen">
|
||||||
|
<div class="mb-stack-lg flex justify-between items-end">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg text-on-background">System Overview</h2>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant mt-1">Real-time metrics and operations status.</p>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-2 text-body-sm font-body-sm text-on-surface-variant">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-status-active"></span>
|
||||||
|
System Operational
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bento Grid: Key Metrics -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter mb-stack-lg">
|
||||||
|
<!-- Metric Card 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-xl p-stack-md flex flex-col justify-between">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg bg-primary-container text-on-primary-container flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined">event</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-md text-label-md text-status-active bg-status-active/10 px-2 py-1 rounded-full">+2 this week</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-1">Total Exhibitions (Active)</p>
|
||||||
|
<p class="font-headline-lg text-headline-lg text-on-background">14</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Metric Card 2 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-xl p-stack-md flex flex-col justify-between">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg bg-secondary-container text-on-secondary-container flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined">groups</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-md text-label-md text-status-active bg-status-active/10 px-2 py-1 rounded-full">+12% vs yesterday</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-1">Real-time Visitors</p>
|
||||||
|
<p class="font-headline-lg text-headline-lg text-on-background font-mono-data">24,592</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Metric Card 3 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-xl p-stack-md flex flex-col justify-between">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg bg-tertiary-container text-on-tertiary-container flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined">local_parking</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-md text-label-md text-status-pending bg-status-pending/10 px-2 py-1 rounded-full text-status-pending">High Capacity</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-1">Parking Availability</p>
|
||||||
|
<div class="flex items-end gap-2">
|
||||||
|
<p class="font-headline-lg text-headline-lg text-on-background">18%</p>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant pb-1">/ 8,400 spots</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container-high h-1.5 rounded-full mt-3 overflow-hidden">
|
||||||
|
<div class="bg-status-pending h-full w-[82%] rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Chart Section (2/3 width) -->
|
||||||
|
<div class="lg:col-span-2 bg-surface-container-lowest border border-surface-border rounded-xl p-stack-md flex flex-col">
|
||||||
|
<div class="flex justify-between items-center mb-6">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-background">Visitor Trends (Today)</h3>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-3 py-1 bg-surface-container-high text-on-surface rounded font-label-md text-label-md">Today</button>
|
||||||
|
<button class="px-3 py-1 bg-transparent text-on-surface-variant hover:bg-surface-container-low rounded font-label-md text-label-md">Week</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Mock Chart Area -->
|
||||||
|
<div class="flex-1 w-full min-h-[300px] relative border-l border-b border-surface-border flex items-end">
|
||||||
|
<!-- Y Axis Labels -->
|
||||||
|
<div class="absolute -left-10 top-0 bottom-0 flex flex-col justify-between text-[10px] text-outline font-mono-data py-2">
|
||||||
|
<span>10k</span>
|
||||||
|
<span>7.5k</span>
|
||||||
|
<span>5k</span>
|
||||||
|
<span>2.5k</span>
|
||||||
|
<span>0</span>
|
||||||
|
</div>
|
||||||
|
<!-- Grid Lines -->
|
||||||
|
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none">
|
||||||
|
<div class="w-full h-px bg-surface-border/50"></div>
|
||||||
|
<div class="w-full h-px bg-surface-border/50"></div>
|
||||||
|
<div class="w-full h-px bg-surface-border/50"></div>
|
||||||
|
<div class="w-full h-px bg-surface-border/50"></div>
|
||||||
|
<div class="w-full h-px bg-surface-border"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Chart Bars -->
|
||||||
|
<div class="w-full h-full flex items-end justify-around px-2 relative z-10 pt-4">
|
||||||
|
<div class="w-1/12 bg-primary/20 hover:bg-primary/40 transition-colors rounded-t-sm h-[20%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">2,100</div></div>
|
||||||
|
<div class="w-1/12 bg-primary/40 hover:bg-primary/60 transition-colors rounded-t-sm h-[45%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">4,500</div></div>
|
||||||
|
<div class="w-1/12 bg-primary hover:bg-primary-fixed-variant transition-colors rounded-t-sm h-[85%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">8,500</div></div>
|
||||||
|
<div class="w-1/12 bg-primary hover:bg-primary-fixed-variant transition-colors rounded-t-sm h-[70%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">7,000</div></div>
|
||||||
|
<div class="w-1/12 bg-primary/60 hover:bg-primary/80 transition-colors rounded-t-sm h-[90%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">9,000</div></div>
|
||||||
|
<div class="w-1/12 bg-primary/40 hover:bg-primary/60 transition-colors rounded-t-sm h-[50%] relative group"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface text-[10px] px-2 py-1 rounded">5,000</div></div>
|
||||||
|
</div>
|
||||||
|
<!-- X Axis Labels -->
|
||||||
|
<div class="absolute -bottom-6 left-0 right-0 flex justify-around text-[10px] text-outline font-mono-data">
|
||||||
|
<span>09:00</span>
|
||||||
|
<span>11:00</span>
|
||||||
|
<span>13:00</span>
|
||||||
|
<span>15:00</span>
|
||||||
|
<span>17:00</span>
|
||||||
|
<span>19:00</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Live Events Section (1/3 width) -->
|
||||||
|
<div class="lg:col-span-1 flex flex-col gap-stack-md">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-background">Current Live Events</h3>
|
||||||
|
<a class="font-label-md text-label-md text-primary hover:underline" href="#">View All</a>
|
||||||
|
</div>
|
||||||
|
<!-- Event Card 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-xl overflow-hidden flex shadow-sm hover:shadow-md transition-shadow">
|
||||||
|
<div class="w-1/3 min-h-full bg-surface-container-high relative">
|
||||||
|
<img alt="" class="absolute inset-0 w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLuTJllS4I1nbHXEBA6rTtfsEgDs7HSWU3ZvN5MWlygnyHWXik8qMDyqNOaYp1fxiUxdEage2cpiVCv0_WlwB6jBEGOm3NTCRWhCwtdjQXAiERgVwKPKww8mfCGKPBv9Cw7UfWBjRO6ztwOtcocqi3cP1Ei96BgMR5whcGWQljKEnJflf1BX4Sa_-aCGHSWGH5s6_NLff4U8Yd9mDkwZ26nHkcRkQQrD66lcPws86w1_YX-L6tg_6ywr7QI"/>
|
||||||
|
</div>
|
||||||
|
<div class="w-2/3 p-4 flex flex-col justify-center">
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-status-active"></span>
|
||||||
|
<span class="font-label-md text-[10px] text-status-active uppercase tracking-wider">Live Now</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-body-lg text-body-lg font-semibold text-on-background leading-tight mb-1">P1Harmony Fan Meeting</h4>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Hall 2, Exhibition Center I</p>
|
||||||
|
<div class="flex items-center gap-1 text-xs text-outline">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">schedule</span>
|
||||||
|
14:00 - 18:00
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Event Card 2 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-xl overflow-hidden flex shadow-sm hover:shadow-md transition-shadow">
|
||||||
|
<div class="w-1/3 min-h-full bg-surface-container-high relative">
|
||||||
|
<img alt="" class="absolute inset-0 w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLtsocUuOxtEm-alc6d65dh5o4U3u-CggqrYH7Xbqcimz9JL8VwWAOiQvKy3fhJ4rJsK0RBj89R5A_ooRyY4sij_Dq-GBy3CBBdSFBkuKHx5MFNM1UO7CtakB0nPIPbUIg_8oB-dW6Rq8BRQlMNvN6NY9ZzLHnDTT3elY1G4zqLMH2AuUsUg-iUYj0NQ0lkQuUisEVm5gkgEYZdfb3EaBNMfxQi0S7HSpPzdyzIurlON2jRTQyM7QDoCew0"/>
|
||||||
|
</div>
|
||||||
|
<div class="w-2/3 p-4 flex flex-col justify-center">
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-status-active"></span>
|
||||||
|
<span class="font-label-md text-[10px] text-status-active uppercase tracking-wider">Live Now</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-body-lg text-body-lg font-semibold text-on-background leading-tight mb-1">Vernon The 8 Live</h4>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Grand Ballroom, Center II</p>
|
||||||
|
<div class="flex items-center gap-1 text-xs text-outline">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">schedule</span>
|
||||||
|
19:00 - 22:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Event Card 3 (Text Only) -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-xl p-4 flex flex-col justify-center shadow-sm">
|
||||||
|
<div class="flex items-center justify-between mb-1">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-status-pending"></span>
|
||||||
|
<span class="font-label-md text-[10px] text-status-pending uppercase tracking-wider">Setting Up</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-body-lg text-body-lg font-semibold text-on-background leading-tight mb-1">Seoul Motor Show Prep</h4>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Halls 1-5, Exhibition Center I</p>
|
||||||
|
<div class="w-full bg-surface-container-high h-1.5 rounded-full mt-2 overflow-hidden">
|
||||||
|
<div class="bg-status-pending h-full w-[45%] rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,351 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>부스 디자인 스튜디오 - KINTEX AI</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-scrollbar::-webkit-scrollbar { width: 6px; }
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c7d3; border-radius: 4px; }
|
||||||
|
.slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #004e8b; cursor: pointer; }
|
||||||
|
.range-slider-comparison { position: relative; width: 100%; height: 100%; overflow: hidden; }
|
||||||
|
.range-slider-comparison input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 20; }
|
||||||
|
.range-slider-comparison .handle { position: absolute; top: 0; bottom: 0; width: 2px; background: white; pointer-events: none; z-index: 10; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
|
||||||
|
.range-slider-comparison .handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
|
||||||
|
.range-slider-comparison .handle-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11; font-family: 'Material Symbols Outlined'; color: #004e8b; font-size: 20px; user-select: none; pointer-events: none; }
|
||||||
|
.glass-panel { background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface text-on-surface font-body-base overflow-hidden h-screen flex">
|
||||||
|
<!-- SideNavBar (from JSON) -->
|
||||||
|
<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
|
||||||
|
<div class="px-gutter mb-stack-lg flex items-center gap-stack-sm">
|
||||||
|
<div class="w-8 h-8 bg-primary rounded flex items-center justify-center text-white font-bold">K</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI</h1>
|
||||||
|
<p class="text-label-md font-label-md text-on-surface-variant">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto px-base">
|
||||||
|
<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded bg-primary-container/10 border-r-4 border-primary text-primary font-bold transition-all duration-200 opacity-90" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="px-base mt-auto pt-stack-md border-t border-outline-variant/30">
|
||||||
|
<a class="flex items-center gap-stack-md px-gutter py-stack-sm mb-base rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md px-gutter py-stack-sm rounded hover:bg-surface-container-high transition-colors text-on-surface-variant" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<div class="flex-1 ml-60 flex flex-col h-screen relative bg-inverse-surface">
|
||||||
|
<!-- TopAppBar (Customized for Studio Context, referencing TopAppBar style logic) -->
|
||||||
|
<header class="flex justify-between items-center w-full px-container-padding h-16 bg-surface border-b border-outline-variant z-40 shrink-0">
|
||||||
|
<div class="flex items-center gap-stack-lg">
|
||||||
|
<div class="flex items-center gap-stack-sm text-title-sm font-title-sm font-bold text-on-surface">
|
||||||
|
<span class="material-symbols-outlined text-outline">arrow_back</span>
|
||||||
|
<span>부스 A-102 · 독립부스 6×3m · 높이 제한 5m</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-6 w-px bg-outline-variant"></div>
|
||||||
|
<select class="bg-surface-container-low border border-outline-variant text-body-sm font-body-sm rounded px-3 py-1 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
|
||||||
|
<option>설계 v2</option>
|
||||||
|
<option>설계 v1</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<button class="flex items-center gap-2 bg-secondary-container text-white px-4 py-2 rounded font-label-md text-label-md hover:opacity-90 transition-opacity shadow-sm">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">auto_awesome</span>
|
||||||
|
예상 사진 생성
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Studio Layout -->
|
||||||
|
<main class="flex-1 flex overflow-hidden">
|
||||||
|
<!-- Left Properties Panel -->
|
||||||
|
<aside class="w-[360px] bg-surface border-r border-outline-variant flex flex-col h-full shrink-0 z-10 glass-panel">
|
||||||
|
<div class="p-gutter border-b border-outline-variant flex justify-between items-center bg-surface-container-lowest">
|
||||||
|
<h2 class="text-title-sm font-title-sm font-semibold">속성 설정</h2>
|
||||||
|
<span class="material-symbols-outlined text-outline hover:text-on-surface cursor-pointer">tune</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto custom-scrollbar p-gutter space-y-stack-md">
|
||||||
|
<!-- Section 1: 기본 정보 -->
|
||||||
|
<div class="border border-outline-variant rounded bg-surface-container-lowest">
|
||||||
|
<div class="p-3 flex justify-between items-center cursor-pointer bg-surface-container-low rounded-t">
|
||||||
|
<span class="text-body-sm font-semibold">기본 정보</span>
|
||||||
|
<span class="material-symbols-outlined text-[20px]">expand_less</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 space-y-3">
|
||||||
|
<div>
|
||||||
|
<label class="block text-label-xs font-label-xs text-on-surface-variant mb-1">업종</label>
|
||||||
|
<select class="w-full bg-surface border border-outline-variant rounded p-2 text-body-sm">
|
||||||
|
<option>로봇/제조</option>
|
||||||
|
<option>IT/소프트웨어</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-label-xs font-label-xs text-on-surface-variant mb-1">예산 (KRW)</label>
|
||||||
|
<input class="w-full bg-surface border border-outline-variant rounded p-2 text-body-sm text-right" type="text" value="15,000,000"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Section 2: 공간 구성 -->
|
||||||
|
<div class="border border-outline-variant rounded bg-surface-container-lowest">
|
||||||
|
<div class="p-3 flex justify-between items-center cursor-pointer bg-surface-container-low rounded-t">
|
||||||
|
<span class="text-body-sm font-semibold">공간 구성</span>
|
||||||
|
<span class="material-symbols-outlined text-[20px]">expand_less</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 space-y-4">
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span class="px-3 py-1 bg-primary-container/10 border border-primary text-primary rounded-full text-label-xs font-label-xs cursor-pointer">안내데스크</span>
|
||||||
|
<span class="px-3 py-1 bg-primary-container/10 border border-primary text-primary rounded-full text-label-xs font-label-xs cursor-pointer">시연존</span>
|
||||||
|
<span class="px-3 py-1 bg-surface border border-outline-variant text-on-surface rounded-full text-label-xs font-label-xs cursor-pointer">상담존</span>
|
||||||
|
<span class="px-3 py-1 bg-surface border border-outline-variant text-on-surface rounded-full text-label-xs font-label-xs cursor-pointer">창고</span>
|
||||||
|
</div>
|
||||||
|
<!-- Sliders -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex justify-between text-label-xs text-on-surface-variant"><label>시연존 면적 비율</label><span>60%</span></div>
|
||||||
|
<input class="w-full slider-thumb appearance-none bg-outline-variant h-1 rounded" max="100" min="0" type="range" value="60"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Section 3: 구조 -->
|
||||||
|
<div class="border border-outline-variant rounded bg-surface-container-lowest">
|
||||||
|
<div class="p-3 flex justify-between items-center cursor-pointer bg-surface-container-low rounded-t">
|
||||||
|
<span class="text-body-sm font-semibold border-l-4 border-error pl-2">구조</span>
|
||||||
|
<span class="material-symbols-outlined text-[20px]">expand_less</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 space-y-4">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-label-xs mb-1">
|
||||||
|
<label class="text-on-surface-variant">벽체 높이</label>
|
||||||
|
<span class="text-error font-bold">4.2m (5m 제한)</span>
|
||||||
|
</div>
|
||||||
|
<input class="w-full slider-thumb appearance-none bg-outline-variant h-1 rounded accent-error" max="5" min="2" step="0.1" type="range" value="4.2"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-label-xs font-label-xs text-on-surface-variant mb-1">간판 문구 <span class="text-secondary-container material-symbols-outlined text-[12px] inline align-text-bottom">auto_awesome</span></label>
|
||||||
|
<input class="w-full bg-surface border border-secondary-container/50 focus:border-secondary-container focus:ring-1 focus:ring-secondary-container rounded p-2 text-body-sm" type="text" value="한빛로보틱스"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between p-2 bg-error-container/30 rounded border border-error-container">
|
||||||
|
<div>
|
||||||
|
<span class="block text-body-sm font-semibold">리깅 사용</span>
|
||||||
|
<span class="text-label-xs text-error">구조계산서 D-7 제출 필요</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-6 bg-primary rounded-full relative cursor-pointer">
|
||||||
|
<div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Center Canvas Area -->
|
||||||
|
<div class="flex-1 flex flex-col relative overflow-hidden bg-[#1e2330]">
|
||||||
|
<!-- Top Canvas Actions -->
|
||||||
|
<div class="absolute top-4 right-4 z-20 flex gap-2">
|
||||||
|
<button class="w-8 h-8 bg-surface/10 backdrop-blur border border-white/20 rounded flex items-center justify-center text-white hover:bg-surface/20">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">zoom_in</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-8 h-8 bg-surface/10 backdrop-blur border border-white/20 rounded flex items-center justify-center text-white hover:bg-surface/20">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">zoom_out</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- 2x2 Grid -->
|
||||||
|
<div class="flex-1 p-stack-lg overflow-y-auto">
|
||||||
|
<div class="grid grid-cols-2 gap-4 h-full max-h-[800px]">
|
||||||
|
<!-- Grid Item 1 -->
|
||||||
|
<div class="relative rounded border border-outline-variant/30 overflow-hidden group bg-surface-container-lowest">
|
||||||
|
<img alt="S1 부스 정면" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLt7Owqk04bQHpDRgW-TOypxVfJaLrvGQkPASyNEHGKREzRPLbA3WCQeI_EPz-feK-fDR17TWVMPmQjtYDnTjXIAw_a9ctvRCW-GENeZYnEOC7qPsOdbhFyx-xS4VIDsARlepBMwyh-2lbIf85_kbEg-w0Z_r189I59Hh6nF0V5mCvUHWsQQVYY5s2jSHwa5K9U3OKeEMBBV-xB1jWziZ_5pGqizp5S5_FdYxsFmwdCD1dVUUJNkc8Hqpu8"/>
|
||||||
|
<div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent">
|
||||||
|
<span class="text-white font-semibold text-body-sm">S1 부스 정면</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-2 right-2 px-2 py-1 bg-black/50 backdrop-blur rounded text-white/80 text-[10px] flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[12px] text-secondary-container">auto_awesome</span>
|
||||||
|
AI 생성 예상 이미지
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Grid Item 2 -->
|
||||||
|
<div class="relative rounded border border-outline-variant/30 overflow-hidden group bg-surface-container-lowest">
|
||||||
|
<img alt="S2 야간 점등" class="w-full h-full object-cover brightness-75" src="https://lh3.googleusercontent.com/aida/AP1WRLvlMBhK-x7BJ_zqesAhPqP9572iihZjYj1q_iEGKwGB4F7PBeF9UEQ4d386iT2R61Us4TxTJJuy8thujGcACbuT905c9fOpfiZIHl6Pzn6_qMQQNw7QM9-lI7rDYbIq6UuupnZAZuqTcWK9CtPVDwjwtIg3eP_zCrVy3iffd5nnCSzvbewqhXR9iM8O0DOdoFlX-POYo89D6wS39zw8x36ozVtvGfG-HOfqAqm5AsfZsqrDk9pP0cAb4p0"/>
|
||||||
|
<div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent">
|
||||||
|
<span class="text-white font-semibold text-body-sm">S2 야간 점등</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Grid Item 3 -->
|
||||||
|
<div class="relative rounded border border-outline-variant/30 overflow-hidden group bg-surface-container-lowest">
|
||||||
|
<img alt="S3 통로 뷰" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLuTJllS4I1nbHXEBA6rTtfsEgDs7HSWU3ZvN5MWlygnyHWXik8qMDyqNOaYp1fxiUxdEage2cpiVCv0_WlwB6jBEGOm3NTCRWhCwtdjQXAiERgVwKPKww8mfCGKPBv9Cw7UfWBjRO6ztwOtcocqi3cP1Ei96BgMR5whcGWQljKEnJflf1BX4Sa_-aCGHSWGH5s6_NLff4U8Yd9mDkwZ26nHkcRkQQrD66lcPws86w1_YX-L6tg_6ywr7QI"/>
|
||||||
|
<div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent">
|
||||||
|
<span class="text-white font-semibold text-body-sm">S3 통로 뷰</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Grid Item 4 (Placeholder) -->
|
||||||
|
<div class="relative rounded border border-dashed border-outline-variant bg-surface-container-low flex flex-col items-center justify-center p-6">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-secondary-container/10 flex items-center justify-center mb-3">
|
||||||
|
<span class="material-symbols-outlined text-secondary-container text-[24px]">add_photo_alternate</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-on-surface-variant font-semibold text-body-sm mb-2">S4 부스 내부</span>
|
||||||
|
<button class="px-4 py-2 bg-secondary-container text-white rounded text-label-xs font-label-xs flex items-center gap-1 hover:bg-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">auto_awesome</span> 클릭해 생성
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Comparison Slider at Bottom of Canvas area -->
|
||||||
|
<div class="mt-4 h-48 w-full relative rounded border border-outline-variant/30 overflow-hidden">
|
||||||
|
<div class="absolute top-2 left-2 px-2 py-1 bg-black/60 backdrop-blur rounded text-white text-label-xs z-30">시공 전</div>
|
||||||
|
<div class="absolute top-2 right-2 px-2 py-1 bg-black/60 backdrop-blur rounded text-white text-label-xs z-30">시공 후</div>
|
||||||
|
<div class="range-slider-comparison">
|
||||||
|
<!-- Background Image (After) -->
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLt7Owqk04bQHpDRgW-TOypxVfJaLrvGQkPASyNEHGKREzRPLbA3WCQeI_EPz-feK-fDR17TWVMPmQjtYDnTjXIAw_a9ctvRCW-GENeZYnEOC7qPsOdbhFyx-xS4VIDsARlepBMwyh-2lbIf85_kbEg-w0Z_r189I59Hh6nF0V5mCvUHWsQQVYY5s2jSHwa5K9U3OKeEMBBV-xB1jWziZ_5pGqizp5S5_FdYxsFmwdCD1dVUUJNkc8Hqpu8')"></div>
|
||||||
|
<!-- Foreground Image (Before) -->
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center border-r-2 border-white" id="comparison-clip" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLv4g1wEc50g6SV874dKYhY3pekuOO8DpFUuNZ11z4Q9S02vd7fQvZ9QsCAvdeYFBXOYbahll5cJgd62hawt4xdYf0e8xkbeVizuekpfrV9gYnvxdbuMzdxHNS3Fezbi-jMX1GlgJemL6ifKvATHzgW0NdON_MkV1Y95qXcjt5RTHo07vmXj6OXmgL_ltfpfRYzAfGuClIQDY612hRpS_RVRkeLDV0RFHgjGIR3Y_xNhhQmNt2StB4C7Rw'); width: 50%;"></div>
|
||||||
|
<input id="comparison-slider" max="100" min="0" oninput="document.getElementById('comparison-clip').style.width = this.value + '%'; document.getElementById('comparison-handle').style.left = this.value + '%';" type="range" value="50"/>
|
||||||
|
<div class="handle" id="comparison-handle" style="left: 50%;"></div>
|
||||||
|
<span class="handle-icon material-symbols-outlined" id="comparison-icon" style="left: 50%;">swap_horiz</span>
|
||||||
|
<script>
|
||||||
|
document.getElementById('comparison-slider').addEventListener('input', function(e) {
|
||||||
|
document.getElementById('comparison-icon').style.left = e.target.value + '%';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Validation Bar -->
|
||||||
|
<div class="absolute bottom-0 left-0 right-0 bg-surface border-t border-outline-variant p-4 flex justify-between items-center z-20 shadow-[0_-4px_12px_rgba(0,0,0,0.1)]">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-[#12B76A]"></span>
|
||||||
|
<span class="text-body-sm font-semibold">통과 11</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-outline-variant"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||||
|
<span class="text-body-sm font-semibold text-error">경고 1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="bg-primary text-white px-6 py-2 rounded font-label-md hover:bg-surface-tint transition-colors">
|
||||||
|
장치업체에 컨펌 요청
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,484 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Floor Plan Editor - KINTEX AI 전시관리</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",
|
||||||
|
"editor-canvas": "#1c2536",
|
||||||
|
"editor-grid": "#2a3548",
|
||||||
|
"booth-blue": "#0066b3",
|
||||||
|
"booth-stroke": "#004881",
|
||||||
|
"violation-red": "#d92d20",
|
||||||
|
"violation-orange": "#f79009"
|
||||||
|
},
|
||||||
|
"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", "sans-serif"],
|
||||||
|
"display-lg-mobile": ["Inter", "sans-serif"],
|
||||||
|
"display-lg": ["Inter", "sans-serif"],
|
||||||
|
"headline-md": ["Inter", "sans-serif"],
|
||||||
|
"body-base": ["Inter", "sans-serif"],
|
||||||
|
"body-sm": ["Inter", "sans-serif"],
|
||||||
|
"label-md": ["Geist", "sans-serif"],
|
||||||
|
"label-xs": ["Geist", "sans-serif"]
|
||||||
|
},
|
||||||
|
"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>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.canvas-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to right, rgba(42, 53, 72, 0.4) 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, rgba(42, 53, 72, 0.4) 1px, transparent 1px);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
.trench-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to right, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
|
||||||
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
|
||||||
|
background-size: 100px 100px;
|
||||||
|
}
|
||||||
|
/* Custom scrollbar for dense panels */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c7d3;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #717782;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-surface h-screen overflow-hidden flex font-body-base">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low dark:bg-inverse-surface border-r border-outline-variant dark:border-outline flex flex-col py-container-padding z-50">
|
||||||
|
<div class="px-gutter mb-stack-lg flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-headline-md font-headline-md font-bold text-primary dark:text-primary-fixed" data-icon="token">token</span>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-title-sm font-title-sm font-bold text-primary dark:text-primary-fixed">KINTEX AI</h1>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="flex-1 flex flex-col gap-1 px-sm">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-2 text-primary dark:text-primary-fixed-dim font-bold border-r-4 border-primary dark:border-primary-fixed-dim bg-primary-container/10 transition-all duration-200 opacity-90 rounded-r-full" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="architecture" style="font-variation-settings: 'FILL' 1;">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="groups">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="assignment">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="mt-auto flex flex-col gap-1 px-sm border-t border-outline-variant/30 pt-stack-sm">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-2 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors rounded-r-full" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<div class="ml-60 flex flex-col w-full h-full bg-surface">
|
||||||
|
<!-- Editor Top Toolbar -->
|
||||||
|
<header class="h-16 flex items-center justify-between px-gutter border-b border-outline-variant bg-surface-container-lowest shrink-0 z-40">
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<h2 class="text-title-sm font-title-sm font-bold text-on-surface">제1전시장 1홀</h2>
|
||||||
|
<span class="material-symbols-outlined text-outline text-[20px]" data-icon="chevron_right">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center bg-surface-container border border-outline-variant rounded px-3 py-1.5 cursor-pointer hover:bg-surface-container-highest transition-colors">
|
||||||
|
<span class="text-body-sm font-body-sm font-semibold text-on-surface mr-2">배치안 B · v3</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px] text-on-surface-variant" data-icon="arrow_drop_down">arrow_drop_down</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-xs font-label-xs text-outline flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="cloud_done">cloud_done</span>
|
||||||
|
저장됨
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<button class="px-4 py-2 text-body-sm font-body-sm border border-outline text-on-surface-variant rounded hover:bg-surface-container transition-colors flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="image">image</span>
|
||||||
|
홀 전경 생성
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 text-body-sm font-body-sm border border-outline text-on-surface-variant rounded hover:bg-surface-container transition-colors flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="fact_check">fact_check</span>
|
||||||
|
규정 검증 실행
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 text-body-sm font-body-sm font-semibold bg-secondary-container text-white rounded hover:opacity-90 transition-opacity flex items-center gap-2 ring-1 ring-secondary-container/50 shadow-[0_0_12px_rgba(109,74,255,0.3)]">
|
||||||
|
<span class="material-symbols-outlined text-[18px]" data-icon="auto_awesome">auto_awesome</span>
|
||||||
|
AI 자동배치
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Editor Workspace (3 Columns) -->
|
||||||
|
<main class="flex-1 flex min-h-0">
|
||||||
|
<!-- Left Panel: Tools & Assets -->
|
||||||
|
<aside class="w-[240px] bg-surface-container-lowest border-r border-outline-variant flex flex-col shrink-0 z-30">
|
||||||
|
<div class="p-gutter border-b border-outline-variant/50">
|
||||||
|
<h3 class="text-label-md font-label-md text-on-surface-variant mb-stack-sm uppercase">부스 팔레트</h3>
|
||||||
|
<div class="grid grid-cols-2 gap-2">
|
||||||
|
<div class="border border-outline-variant rounded p-2 flex flex-col items-center gap-1 cursor-pointer hover:border-primary hover:bg-surface-container transition-all">
|
||||||
|
<div class="w-8 h-8 border border-primary bg-primary-container/20"></div>
|
||||||
|
<span class="text-label-xs font-label-xs text-center">기본 부스<br/>3×3m</span>
|
||||||
|
</div>
|
||||||
|
<div class="border border-outline-variant rounded p-2 flex flex-col items-center gap-1 cursor-pointer hover:border-primary hover:bg-surface-container transition-all">
|
||||||
|
<div class="w-12 h-8 border border-primary bg-primary-container/20"></div>
|
||||||
|
<span class="text-label-xs font-label-xs text-center">프리미엄<br/>6×3m</span>
|
||||||
|
</div>
|
||||||
|
<div class="border border-outline-variant rounded p-2 flex flex-col items-center gap-1 cursor-pointer hover:border-primary hover:bg-surface-container transition-all col-span-2">
|
||||||
|
<div class="w-full h-10 border border-primary bg-primary-container/20 flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[18px]" data-icon="grid_4x4">grid_4x4</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-xs font-label-xs">아일랜드 부스 (자유형)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-gutter border-b border-outline-variant/50">
|
||||||
|
<h3 class="text-label-md font-label-md text-on-surface-variant mb-stack-sm uppercase">부대 시설</h3>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<button class="flex items-center gap-3 p-2 border border-outline-variant rounded hover:bg-surface-container text-body-sm font-body-sm text-left">
|
||||||
|
<span class="material-symbols-outlined text-outline" data-icon="stadium">stadium</span> 무대
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-3 p-2 border border-outline-variant rounded hover:bg-surface-container text-body-sm font-body-sm text-left">
|
||||||
|
<span class="material-symbols-outlined text-outline" data-icon="local_cafe">local_cafe</span> 라운지
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-3 p-2 border border-outline-variant rounded hover:bg-surface-container text-body-sm font-body-sm text-left">
|
||||||
|
<span class="material-symbols-outlined text-outline" data-icon="meeting_room">meeting_room</span> 주출입구
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-gutter flex-1 overflow-y-auto">
|
||||||
|
<h3 class="text-label-md font-label-md text-on-surface-variant mb-stack-sm uppercase flex justify-between items-center">
|
||||||
|
레이어
|
||||||
|
<span class="material-symbols-outlined text-[16px] cursor-pointer" data-icon="add">add</span>
|
||||||
|
</h3>
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px] text-outline" data-icon="grid_on">grid_on</span>
|
||||||
|
트렌치 그리드
|
||||||
|
</span>
|
||||||
|
<div class="w-8 h-4 bg-primary rounded-full relative cursor-pointer">
|
||||||
|
<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px] text-outline" data-icon="view_column">view_column</span>
|
||||||
|
기둥·비상구
|
||||||
|
</span>
|
||||||
|
<div class="w-8 h-4 bg-primary rounded-full relative cursor-pointer">
|
||||||
|
<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px] text-violation-red" data-icon="warning">warning</span>
|
||||||
|
위반 오버레이
|
||||||
|
</span>
|
||||||
|
<div class="w-8 h-4 bg-primary rounded-full relative cursor-pointer">
|
||||||
|
<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between opacity-50">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px] text-outline" data-icon="route">route</span>
|
||||||
|
동선 히트맵
|
||||||
|
</span>
|
||||||
|
<div class="w-8 h-4 bg-outline-variant rounded-full relative cursor-pointer">
|
||||||
|
<div class="w-3 h-3 bg-white rounded-full absolute left-0.5 top-0.5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Center Panel: The Canvas -->
|
||||||
|
<section class="flex-1 bg-editor-canvas relative overflow-hidden flex flex-col z-10">
|
||||||
|
<!-- Canvas Tools Floating -->
|
||||||
|
<div class="absolute top-4 left-4 flex bg-surface-container-lowest border border-outline-variant rounded shadow-sm z-20">
|
||||||
|
<button class="p-1.5 hover:bg-surface-container border-r border-outline-variant text-on-surface" title="선택">
|
||||||
|
<span class="material-symbols-outlined text-[20px]" data-icon="near_me">near_me</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-1.5 hover:bg-surface-container border-r border-outline-variant text-on-surface" title="이동">
|
||||||
|
<span class="material-symbols-outlined text-[20px]" data-icon="pan_tool">pan_tool</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-1.5 hover:bg-surface-container text-on-surface" title="자">
|
||||||
|
<span class="material-symbols-outlined text-[20px]" data-icon="straighten">straighten</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- The Actual Canvas Area -->
|
||||||
|
<div class="flex-1 canvas-grid trench-grid relative w-full h-full flex items-center justify-center cursor-crosshair overflow-hidden">
|
||||||
|
<!-- Hall Container (Simulated Scale 126x90m) -->
|
||||||
|
<div class="relative border-4 border-outline w-[800px] h-[550px] bg-editor-canvas shadow-2xl">
|
||||||
|
<!-- Measurement Rulers -->
|
||||||
|
<div class="absolute -top-6 left-0 right-0 h-4 border-b border-l border-r border-outline flex justify-between px-2 text-[10px] text-outline">
|
||||||
|
<span>0m</span>
|
||||||
|
<span>63m</span>
|
||||||
|
<span>126m</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-0 -left-6 bottom-0 w-4 border-r border-t border-b border-outline flex flex-col justify-between py-2 text-[10px] text-outline">
|
||||||
|
<span>0m</span>
|
||||||
|
<span class="rotate-[-90deg]">45m</span>
|
||||||
|
<span>90m</span>
|
||||||
|
</div>
|
||||||
|
<!-- Structural Columns -->
|
||||||
|
<div class="absolute top-1/4 left-1/3 w-8 h-8 bg-surface-variant/20 border border-outline-variant flex items-center justify-center text-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-[16px]" data-icon="close">close</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-1/4 right-1/3 w-8 h-8 bg-surface-variant/20 border border-outline-variant flex items-center justify-center text-outline-variant">
|
||||||
|
<span class="material-symbols-outlined text-[16px]" data-icon="close">close</span>
|
||||||
|
</div>
|
||||||
|
<!-- Emergency Exits -->
|
||||||
|
<div class="absolute -top-1 left-1/4 w-8 h-2 bg-tertiary-fixed"></div>
|
||||||
|
<div class="absolute -top-1 right-1/4 w-8 h-2 bg-tertiary-fixed"></div>
|
||||||
|
<div class="absolute -bottom-1 left-1/4 w-8 h-2 bg-tertiary-fixed"></div>
|
||||||
|
<div class="absolute -bottom-1 right-1/4 w-8 h-2 bg-tertiary-fixed"></div>
|
||||||
|
<!-- Booth Clusters (Simulated Density) -->
|
||||||
|
<div class="absolute top-12 left-12 grid grid-cols-4 gap-2">
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-101</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-102</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-103</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-104</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-105</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">A-106</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-12 right-12 grid grid-cols-4 gap-2">
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">B-101</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">B-102</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">B-103</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">B-104</div>
|
||||||
|
</div>
|
||||||
|
<!-- Premium Island Booths -->
|
||||||
|
<div class="absolute top-1/2 left-12 -translate-y-1/2 w-32 h-24 bg-booth-blue/60 border-2 border-booth-stroke flex items-center justify-center text-[10px] text-white font-mono">
|
||||||
|
PREMIUM A
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-1/2 right-12 -translate-y-1/2 w-48 h-32 bg-booth-blue/60 border-2 border-booth-stroke flex items-center justify-center text-[10px] text-white font-mono">
|
||||||
|
PREMIUM B
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Rows -->
|
||||||
|
<div class="absolute bottom-12 left-1/4 flex gap-2">
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">C-101</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">C-102</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">C-103</div>
|
||||||
|
<div class="w-12 h-12 bg-booth-blue/80 border border-booth-stroke flex items-center justify-center text-[8px] text-white font-mono">C-104</div>
|
||||||
|
</div>
|
||||||
|
<!-- VIOLATION OVERLAYS -->
|
||||||
|
<!-- Violation 1: Aisle Width -->
|
||||||
|
<div class="absolute top-32 left-12 right-1/2 h-8 bg-violation-red/30 border border-violation-red/50 flex items-center justify-center z-10 pointer-events-none">
|
||||||
|
<div class="bg-violation-red text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center shadow-md">1</div>
|
||||||
|
</div>
|
||||||
|
<!-- Violation 2: Blocked Column -->
|
||||||
|
<div class="absolute top-1/4 left-1/3 w-16 h-16 bg-violation-red/40 flex items-center justify-center z-10 pointer-events-none -translate-x-1/4 -translate-y-1/4">
|
||||||
|
<div class="bg-violation-red text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center shadow-md absolute top-0 right-0">2</div>
|
||||||
|
</div>
|
||||||
|
<!-- Violation 3: Trench Mismatch (Hatched) -->
|
||||||
|
<div class="absolute bottom-12 left-[calc(25%+112px)] w-12 h-12 border-2 border-violation-orange z-10" style="background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(247,144,9,0.3) 4px, rgba(247,144,9,0.3) 8px);">
|
||||||
|
<div class="bg-violation-orange text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center shadow-md absolute -top-2 -right-2">3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Status Bar -->
|
||||||
|
<div class="h-10 bg-surface-container-lowest border-t border-outline-variant flex items-center justify-between px-gutter text-body-sm font-body-sm z-20">
|
||||||
|
<div class="flex items-center gap-4 text-on-surface-variant">
|
||||||
|
<span>부스 486 / 510</span>
|
||||||
|
<span class="w-1 h-1 rounded-full bg-outline"></span>
|
||||||
|
<span>판매면적 4,374㎡</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="p-1 hover:bg-surface-container rounded text-outline"><span class="material-symbols-outlined text-[18px]" data-icon="remove">remove</span></button>
|
||||||
|
<span class="w-12 text-center text-on-surface font-semibold">100%</span>
|
||||||
|
<button class="p-1 hover:bg-surface-container rounded text-outline"><span class="material-symbols-outlined text-[18px]" data-icon="add">add</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right Panel: Properties & Validation -->
|
||||||
|
<aside class="w-[360px] bg-surface-container-lowest border-l border-outline-variant flex flex-col shrink-0 z-30">
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="flex border-b border-outline-variant">
|
||||||
|
<button class="flex-1 py-3 text-body-sm font-body-sm font-semibold text-on-surface-variant hover:text-on-surface transition-colors">속성</button>
|
||||||
|
<button class="flex-1 py-3 text-body-sm font-body-sm font-bold text-primary border-b-2 border-primary">검증 (5)</button>
|
||||||
|
</div>
|
||||||
|
<!-- Validation Content -->
|
||||||
|
<div class="flex-1 overflow-y-auto p-gutter flex flex-col gap-stack-md bg-surface-bright">
|
||||||
|
<!-- Summary -->
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<div class="px-3 py-1 bg-error-container text-on-error-container rounded-full text-label-xs font-label-xs font-bold border border-error/20 flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="block">block</span> 차단 2
|
||||||
|
</div>
|
||||||
|
<div class="px-3 py-1 bg-[#FEF0C7] text-[#B54708] rounded-full text-label-xs font-label-xs font-bold border border-[#F79009]/20 flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="warning">warning</span> 경고 3
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">소방 규정 및 자체 배치 가이드라인 위반 사항입니다.</p>
|
||||||
|
<!-- Violation List -->
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<!-- Card 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded shadow-sm overflow-hidden flex">
|
||||||
|
<div class="w-1 bg-violation-red shrink-0"></div>
|
||||||
|
<div class="p-3 w-full">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="bg-violation-red text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">1</div>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">통로 폭 위반</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary text-[11px] font-semibold hover:underline">위치 보기</button>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">피난 통로 폭 3m 미만 (규정 §4.2). 현재 2.5m로 측정되었습니다.</p>
|
||||||
|
<div class="mt-2 flex gap-2">
|
||||||
|
<button class="px-2 py-1 bg-surface-container text-on-surface-variant text-[11px] rounded hover:bg-outline-variant/30 transition-colors">무시</button>
|
||||||
|
<button class="px-2 py-1 border border-primary text-primary text-[11px] rounded hover:bg-primary-container/10 transition-colors">자동 간격 조정 (AI)</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 2 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded shadow-sm overflow-hidden flex">
|
||||||
|
<div class="w-1 bg-violation-red shrink-0"></div>
|
||||||
|
<div class="p-3 w-full">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="bg-violation-red text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">2</div>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">구조물 간섭</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary text-[11px] font-semibold hover:underline">위치 보기</button>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">부스가 전시장 기둥 영역을 침범했습니다. 재배치가 필요합니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 3 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded shadow-sm overflow-hidden flex">
|
||||||
|
<div class="w-1 bg-violation-orange shrink-0"></div>
|
||||||
|
<div class="p-3 w-full">
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="bg-violation-orange text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">3</div>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">설비 접근성 경고</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary text-[11px] font-semibold hover:underline">위치 보기</button>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">부스(C-104) 하단에 전기 트렌치가 없습니다. 배선 작업 시 추가 비용이 발생할 수 있습니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,451 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" lang="en"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Business Intelligence - KINTEX CMS</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400&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"/>
|
||||||
|
<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": {
|
||||||
|
"surface-border": "#E5E7EB",
|
||||||
|
"surface-dim": "#d9dadb",
|
||||||
|
"surface-bright": "#f8f9fa",
|
||||||
|
"outline": "#727782",
|
||||||
|
"inverse-on-surface": "#f0f1f2",
|
||||||
|
"primary-fixed-dim": "#a6c8ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-background": "#191c1d",
|
||||||
|
"on-surface": "#191c1d",
|
||||||
|
"on-tertiary-container": "#ffc1b8",
|
||||||
|
"on-primary-fixed-variant": "#004786",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"primary-fixed": "#d5e3ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-tertiary-fixed-variant": "#930002",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-container": "#edeeef",
|
||||||
|
"surface-tint": "#115fac",
|
||||||
|
"surface-variant": "#e1e3e4",
|
||||||
|
"surface-container-highest": "#e1e3e4",
|
||||||
|
"status-pending": "#F59E0B",
|
||||||
|
"status-active": "#10B981",
|
||||||
|
"on-tertiary-fixed": "#410000",
|
||||||
|
"primary-container": "#0059a6",
|
||||||
|
"surface-container-high": "#e7e8e9",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-secondary-fixed-variant": "#1e4974",
|
||||||
|
"secondary-fixed": "#d2e4ff",
|
||||||
|
"tertiary": "#8a0002",
|
||||||
|
"tertiary-fixed": "#ffdad5",
|
||||||
|
"secondary-container": "#a6ccff",
|
||||||
|
"outline-variant": "#c2c6d3",
|
||||||
|
"on-surface-variant": "#424751",
|
||||||
|
"surface-container-low": "#f3f4f5",
|
||||||
|
"on-primary-fixed": "#001c3b",
|
||||||
|
"surface": "#f8f9fa",
|
||||||
|
"inverse-surface": "#2e3132",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"tertiary-container": "#b60004",
|
||||||
|
"primary": "#00427d",
|
||||||
|
"on-primary-container": "#b6d1ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-secondary-container": "#2e5682",
|
||||||
|
"secondary": "#39608d",
|
||||||
|
"on-secondary-fixed": "#001c37",
|
||||||
|
"inverse-primary": "#a6c8ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#a3c9fc",
|
||||||
|
"table-header": "#F1F5F9",
|
||||||
|
"tertiary-fixed-dim": "#ffb4a9",
|
||||||
|
"background": "#f8f9fa"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"margin-desktop": "32px",
|
||||||
|
"container-max": "1440px",
|
||||||
|
"margin-mobile": "16px",
|
||||||
|
"gutter": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-md": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"mono-data": [
|
||||||
|
"jetbrainsMono"
|
||||||
|
],
|
||||||
|
"body-md": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"headline-lg": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"headline-lg-mobile": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"body-sm": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"label-md": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"body-lg": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-md": [
|
||||||
|
"20px",
|
||||||
|
{
|
||||||
|
"lineHeight": "28px",
|
||||||
|
"fontWeight": "600"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mono-data": [
|
||||||
|
"13px",
|
||||||
|
{
|
||||||
|
"lineHeight": "18px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body-md": [
|
||||||
|
"14px",
|
||||||
|
{
|
||||||
|
"lineHeight": "20px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"headline-lg": [
|
||||||
|
"30px",
|
||||||
|
{
|
||||||
|
"lineHeight": "38px",
|
||||||
|
"letterSpacing": "-0.02em",
|
||||||
|
"fontWeight": "700"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"headline-lg-mobile": [
|
||||||
|
"24px",
|
||||||
|
{
|
||||||
|
"lineHeight": "32px",
|
||||||
|
"fontWeight": "700"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body-sm": [
|
||||||
|
"13px",
|
||||||
|
{
|
||||||
|
"lineHeight": "18px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"label-md": [
|
||||||
|
"12px",
|
||||||
|
{
|
||||||
|
"lineHeight": "16px",
|
||||||
|
"letterSpacing": "0.05em",
|
||||||
|
"fontWeight": "600"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body-lg": [
|
||||||
|
"16px",
|
||||||
|
{
|
||||||
|
"lineHeight": "24px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Hanken Grotesk', sans-serif; background-color: #f8f9fa; }
|
||||||
|
.material-symbols-outlined { font-variation-settings: 'FILL' 1; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background antialiased flex">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="bg-surface dark:bg-surface text-primary dark:text-primary-fixed-dim font-body-md text-body-md w-[240px] h-screen fixed left-0 top-0 border-r border-surface-border dark:border-outline-variant hidden md:flex flex-col py-stack-lg z-50">
|
||||||
|
<div class="px-gutter mb-stack-lg">
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed-dim">KINTEX CMS</h1>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Exhibition Management</p>
|
||||||
|
</div>
|
||||||
|
<div class="px-gutter mb-stack-md">
|
||||||
|
<button class="w-full bg-primary-container text-on-primary-container py-2 rounded font-label-md text-label-md hover:opacity-90 transition-opacity">Create New Event</button>
|
||||||
|
</div>
|
||||||
|
<ul class="flex-1 px-stack-sm flex flex-col gap-1">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined text-lg">dashboard</span>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined text-lg">calendar_month</span>
|
||||||
|
Exhibition Schedule
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined text-lg">sensors</span>
|
||||||
|
Hall Operations
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded bg-secondary-container text-on-secondary-container dark:bg-primary-container dark:text-on-primary-container font-semibold transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined text-lg">analytics</span>
|
||||||
|
Business Intelligence
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="mt-auto px-stack-sm border-t border-surface-border pt-stack-md">
|
||||||
|
<ul class="flex flex-col gap-1">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined text-lg">settings</span>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low dark:text-surface-variant transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined text-lg">help</span>
|
||||||
|
Support
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Wrapper -->
|
||||||
|
<div class="flex-1 md:ml-[240px] flex flex-col min-h-screen">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="bg-surface dark:bg-surface text-primary dark:text-primary-fixed-dim font-label-md text-label-md h-16 w-full md:w-[calc(100%-240px)] fixed top-0 right-0 z-40 border-b border-surface-border dark:border-outline-variant flex items-center justify-between px-margin-desktop ml-0 md:ml-[240px]">
|
||||||
|
<!-- Mobile Menu Toggle (Visible only on mobile) -->
|
||||||
|
<button class="md:hidden text-primary mr-4">
|
||||||
|
<span class="material-symbols-outlined">menu</span>
|
||||||
|
</button>
|
||||||
|
<nav class="hidden md:flex items-center gap-stack-lg flex-1">
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100 pb-1" href="#">Overview</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100 pb-1" href="#">Hall Map</a>
|
||||||
|
<a class="text-primary border-b-2 border-primary pb-1 transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Reports</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-stack-md ml-auto">
|
||||||
|
<div class="relative hidden sm:block">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-surface-dim">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-1.5 rounded-full border border-surface-border bg-surface-bright focus:outline-none focus:border-primary-container text-sm w-48 lg:w-64" placeholder="Search reports..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary hover:text-primary-container transition-colors cursor-pointer opacity-90 hover:opacity-100 flex items-center gap-2 border border-surface-border px-3 py-1.5 rounded">
|
||||||
|
<span class="material-symbols-outlined text-sm">refresh</span>
|
||||||
|
<span class="hidden lg:inline">Refresh Data</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center gap-3 border-l border-surface-border pl-stack-md ml-stack-sm">
|
||||||
|
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100">
|
||||||
|
<span class="material-symbols-outlined">account_circle</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Canvas -->
|
||||||
|
<main class="flex-1 mt-16 p-margin-mobile md:p-margin-desktop max-w-[1440px] w-full mx-auto">
|
||||||
|
<!-- Header Section -->
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-stack-lg gap-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-lg-mobile md:font-headline-lg text-headline-lg-mobile md:text-headline-lg text-on-background">Analytics Reports</h2>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant mt-1">Exhibition Organizer & Exhibitor Insights</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="bg-surface-container-low border border-surface-border text-on-surface px-4 py-2 rounded flex items-center gap-2 hover:bg-surface-container transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-sm">download</span>
|
||||||
|
<span class="font-label-md text-label-md">Export PDF</span>
|
||||||
|
</button>
|
||||||
|
<button class="bg-surface-container-low border border-surface-border text-on-surface px-4 py-2 rounded flex items-center gap-2 hover:bg-surface-container transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-sm">table_view</span>
|
||||||
|
<span class="font-label-md text-label-md">Export Excel</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bento Grid Layout -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Key Metrics Cards -->
|
||||||
|
<div class="md:col-span-3 grid grid-cols-1 sm:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Metric 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col justify-between">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Total Visitors</span>
|
||||||
|
<span class="material-symbols-outlined text-primary-container">groups</span>
|
||||||
|
</div>
|
||||||
|
<div class="font-headline-lg text-headline-lg text-on-background">45,210</div>
|
||||||
|
<div class="flex items-center gap-1 mt-2 text-status-active font-body-sm text-body-sm">
|
||||||
|
<span class="material-symbols-outlined text-sm">trending_up</span>
|
||||||
|
<span>+12.5% vs last event</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Metric 2 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col justify-between">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Avg Dwell Time</span>
|
||||||
|
<span class="material-symbols-outlined text-primary-container">schedule</span>
|
||||||
|
</div>
|
||||||
|
<div class="font-headline-lg text-headline-lg text-on-background">4h 15m</div>
|
||||||
|
<div class="flex items-center gap-1 mt-2 text-status-active font-body-sm text-body-sm">
|
||||||
|
<span class="material-symbols-outlined text-sm">trending_up</span>
|
||||||
|
<span>+45m vs last event</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Metric 3 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col justify-between">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Matching Success</span>
|
||||||
|
<span class="material-symbols-outlined text-primary-container">handshake</span>
|
||||||
|
</div>
|
||||||
|
<div class="font-headline-lg text-headline-lg text-on-background">87.3%</div>
|
||||||
|
<div class="flex items-center gap-1 mt-2 text-on-surface-variant font-body-sm text-body-sm">
|
||||||
|
<span class="material-symbols-outlined text-sm">insights</span>
|
||||||
|
<span>AI-driven matches</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Main Chart Area -->
|
||||||
|
<div class="md:col-span-2 bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md min-h-[400px] flex flex-col">
|
||||||
|
<div class="flex justify-between items-center mb-stack-md">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-background">Exhibitor vs Buyer Matching Trends</h3>
|
||||||
|
<select class="bg-surface-bright border border-surface-border rounded px-3 py-1 font-body-sm text-body-sm focus:outline-none focus:border-primary">
|
||||||
|
<option>Last 7 Days</option>
|
||||||
|
<option>This Month</option>
|
||||||
|
<option>Overall Event</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<!-- Placeholder for Chart -->
|
||||||
|
<div class="flex-1 bg-surface-bright rounded border border-surface-dim flex items-center justify-center relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-[linear-gradient(to_right,#f0f1f2_1px,transparent_1px),linear-gradient(to_bottom,#f0f1f2_1px,transparent_1px)] bg-[size:2rem_2rem] opacity-50"></div>
|
||||||
|
<!-- Mock Chart Lines -->
|
||||||
|
<svg class="absolute inset-0 w-full h-full" preserveaspectratio="none" viewbox="0 0 100 100">
|
||||||
|
<path class="opacity-80" d="M0,80 Q20,60 40,70 T80,40 T100,20" fill="none" stroke="#0059A6" stroke-width="2"></path>
|
||||||
|
<path class="opacity-80" d="M0,90 Q30,70 50,80 T90,50 T100,60" fill="none" stroke="#6389B8" stroke-width="2"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="relative z-10 font-mono-data text-mono-data text-outline">Chart Visualization Area</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Secondary Analysis Area -->
|
||||||
|
<div class="md:col-span-1 bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-background mb-stack-md">Industry Trend Analysis</h3>
|
||||||
|
<div class="flex-1 flex flex-col gap-4">
|
||||||
|
<!-- Trend Item -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between font-body-sm text-body-sm mb-1">
|
||||||
|
<span class="text-on-background">Technology & IT</span>
|
||||||
|
<span class="font-mono-data text-mono-data">45%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container rounded-full h-2">
|
||||||
|
<div class="bg-primary-container h-2 rounded-full" style="width: 45%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Trend Item -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between font-body-sm text-body-sm mb-1">
|
||||||
|
<span class="text-on-background">Manufacturing</span>
|
||||||
|
<span class="font-mono-data text-mono-data">28%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container rounded-full h-2">
|
||||||
|
<div class="bg-secondary h-2 rounded-full" style="width: 28%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Trend Item -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between font-body-sm text-body-sm mb-1">
|
||||||
|
<span class="text-on-background">Healthcare</span>
|
||||||
|
<span class="font-mono-data text-mono-data">15%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container rounded-full h-2">
|
||||||
|
<div class="bg-outline h-2 rounded-full" style="width: 15%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Trend Item -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between font-body-sm text-body-sm mb-1">
|
||||||
|
<span class="text-on-background">Retail & E-commerce</span>
|
||||||
|
<span class="font-mono-data text-mono-data">12%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container rounded-full h-2">
|
||||||
|
<div class="bg-surface-dim h-2 rounded-full" style="width: 12%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Data Table Section -->
|
||||||
|
<div class="md:col-span-3 bg-surface-container-lowest border border-surface-border rounded-lg overflow-hidden flex flex-col">
|
||||||
|
<div class="p-stack-md border-b border-surface-border flex justify-between items-center bg-surface-bright">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-background">Top Exhibitor Performance</h3>
|
||||||
|
<button class="text-primary font-label-md text-label-md hover:underline">View All</button>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-table-header text-on-surface-variant font-label-md text-label-md uppercase">
|
||||||
|
<th class="py-3 px-4 font-semibold border-b border-surface-border">Exhibitor Name</th>
|
||||||
|
<th class="py-3 px-4 font-semibold border-b border-surface-border">Booth Location</th>
|
||||||
|
<th class="py-3 px-4 font-semibold border-b border-surface-border text-right">Total Visitors</th>
|
||||||
|
<th class="py-3 px-4 font-semibold border-b border-surface-border text-right">Matches Made</th>
|
||||||
|
<th class="py-3 px-4 font-semibold border-b border-surface-border text-center">Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="font-body-sm text-body-sm text-on-background">
|
||||||
|
<tr class="border-b border-surface-border hover:bg-surface-bright transition-colors">
|
||||||
|
<td class="py-3 px-4 font-medium">TechNova Solutions</td>
|
||||||
|
<td class="py-3 px-4 text-on-surface-variant">Hall 1 - A12</td>
|
||||||
|
<td class="py-3 px-4 text-right font-mono-data text-mono-data">1,245</td>
|
||||||
|
<td class="py-3 px-4 text-right font-mono-data text-mono-data">84</td>
|
||||||
|
<td class="py-3 px-4 text-center">
|
||||||
|
<span class="bg-status-active/10 text-status-active px-2 py-1 rounded-full text-xs font-semibold">Excellent</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="border-b border-surface-border bg-[#F9FAFB] hover:bg-surface-bright transition-colors">
|
||||||
|
<td class="py-3 px-4 font-medium">Global Manufacturing Inc.</td>
|
||||||
|
<td class="py-3 px-4 text-on-surface-variant">Hall 2 - B04</td>
|
||||||
|
<td class="py-3 px-4 text-right font-mono-data text-mono-data">980</td>
|
||||||
|
<td class="py-3 px-4 text-right font-mono-data text-mono-data">62</td>
|
||||||
|
<td class="py-3 px-4 text-center">
|
||||||
|
<span class="bg-status-active/10 text-status-active px-2 py-1 rounded-full text-xs font-semibold">Good</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="border-b border-surface-border hover:bg-surface-bright transition-colors">
|
||||||
|
<td class="py-3 px-4 font-medium">HealthSys Providers</td>
|
||||||
|
<td class="py-3 px-4 text-on-surface-variant">Hall 3 - C22</td>
|
||||||
|
<td class="py-3 px-4 text-right font-mono-data text-mono-data">750</td>
|
||||||
|
<td class="py-3 px-4 text-right font-mono-data text-mono-data">45</td>
|
||||||
|
<td class="py-3 px-4 text-center">
|
||||||
|
<span class="bg-status-pending/10 text-status-pending px-2 py-1 rounded-full text-xs font-semibold">Average</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-surface-bright transition-colors bg-[#F9FAFB]">
|
||||||
|
<td class="py-3 px-4 font-medium">Retail Innovations LLC</td>
|
||||||
|
<td class="py-3 px-4 text-on-surface-variant">Hall 1 - D01</td>
|
||||||
|
<td class="py-3 px-4 text-right font-mono-data text-mono-data">520</td>
|
||||||
|
<td class="py-3 px-4 text-right font-mono-data text-mono-data">30</td>
|
||||||
|
<td class="py-3 px-4 text-center">
|
||||||
|
<span class="bg-status-pending/10 text-status-pending px-2 py-1 rounded-full text-xs font-semibold">Needs Review</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,348 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>규정 검증 결과 - KINTEX AI</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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-family: 'Material Symbols Outlined';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-transform: none;
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
word-wrap: normal;
|
||||||
|
direction: ltr;
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background font-body-base h-screen flex overflow-hidden">
|
||||||
|
<!-- SideNavBar (from JSON, Documents active) -->
|
||||||
|
<nav class="fixed left-0 top-0 h-screen w-60 border-r border-outline-variant bg-surface-container-low flex flex-col h-full py-container-padding z-50">
|
||||||
|
<div class="px-container-padding mb-stack-lg">
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[32px]">apartment</span>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI</h1>
|
||||||
|
<p class="text-label-md font-label-md text-on-surface-variant mt-base">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto mt-stack-md flex flex-col gap-base px-stack-sm">
|
||||||
|
<!-- Inactive -->
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="architecture">architecture</span>
|
||||||
|
Floor Plan Studio
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="groups">groups</span>
|
||||||
|
Exhibitor Management
|
||||||
|
</a>
|
||||||
|
<!-- Active (Documents context fits Validation Report) -->
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-primary font-bold border-r-4 border-primary bg-primary-container/10 text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="assignment" style="font-variation-settings: 'FILL' 1;">assignment</span>
|
||||||
|
Documents
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||||
|
Settlement
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto pt-stack-md border-t border-outline-variant flex flex-col gap-base px-stack-sm">
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
Support
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="ml-60 flex-1 flex flex-col h-full overflow-y-auto">
|
||||||
|
<div class="max-w-[1440px] mx-auto w-full px-container-padding py-stack-lg flex flex-col h-full gap-stack-lg">
|
||||||
|
<!-- Header Section -->
|
||||||
|
<header class="flex flex-col gap-stack-sm">
|
||||||
|
<div class="flex items-center gap-2 text-label-md font-label-md text-on-surface-variant mb-1">
|
||||||
|
<span class="cursor-pointer hover:text-primary">Exhibitor Management</span>
|
||||||
|
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||||
|
<span class="text-on-surface">Documents</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-display-lg font-display-lg text-on-surface">부스 A-102 · 설계 v2 · 규정 검증 결과</h2>
|
||||||
|
<!-- Violation Banner -->
|
||||||
|
<div class="mt-stack-sm bg-error-container text-on-error-container px-stack-md py-3 rounded-lg flex items-center gap-stack-sm border border-error/20">
|
||||||
|
<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">error</span>
|
||||||
|
<span class="text-title-sm font-title-sm font-semibold">차단 1건 · 경고 2건 · 통과 14건 — 차단 항목 해결 전 제출 불가</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Upload Zone -->
|
||||||
|
<section class="w-full border-2 border-dashed border-outline-variant bg-surface-bright rounded-xl p-stack-lg flex flex-col items-center justify-center gap-stack-sm hover:border-primary transition-colors cursor-pointer group">
|
||||||
|
<div class="bg-surface-container rounded-full p-3 group-hover:bg-primary-container/10 transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[32px]">upload_file</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-body-base font-body-base font-medium text-on-surface">기존 도면 업로드 (PDF/이미지)</span>
|
||||||
|
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded-full text-label-xs font-label-xs border border-outline-variant">참고용 검증</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">드래그 앤 드롭 또는 클릭하여 파일 선택</p>
|
||||||
|
</section>
|
||||||
|
<!-- Split Content Area -->
|
||||||
|
<div class="grid grid-cols-12 gap-gutter flex-1 min-h-0 pb-stack-lg">
|
||||||
|
<!-- Left: Checklist (60% -> col-span-7) -->
|
||||||
|
<div class="col-span-7 bg-surface-container-lowest border border-outline-variant rounded-xl flex flex-col overflow-hidden">
|
||||||
|
<div class="px-stack-md py-3 border-b border-outline-variant bg-surface-bright flex justify-between items-center">
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface">자동 검증 체크리스트</h3>
|
||||||
|
<div class="flex items-center gap-2 text-body-sm font-body-sm text-on-surface-variant">
|
||||||
|
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-error"></span>차단</span>
|
||||||
|
<span class="flex items-center gap-1 ml-2"><span class="w-2 h-2 rounded-full bg-[#f59e0b]"></span>경고</span>
|
||||||
|
<span class="flex items-center gap-1 ml-2"><span class="w-2 h-2 rounded-full bg-tertiary-container"></span>통과</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto p-stack-md flex flex-col gap-stack-sm">
|
||||||
|
<!-- Group: Height (Failed) -->
|
||||||
|
<div class="border border-error/30 rounded-lg overflow-hidden">
|
||||||
|
<div class="bg-error-container/30 px-stack-md py-2 border-b border-error/20 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-error text-[20px]">straighten</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-error-container font-bold">높이 규정</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md flex items-start justify-between gap-stack-md">
|
||||||
|
<div class="flex gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-error mt-0.5" style="font-variation-settings: 'FILL' 1;">cancel</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-body-base font-body-base text-on-surface font-medium">장치물 높이 5m 이하</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-error mt-1 font-medium bg-error/10 inline-block px-2 py-0.5 rounded">측정 5.4m — 0.4m 초과</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-error text-on-error px-2 py-1 rounded-md text-label-xs font-label-xs font-bold uppercase tracking-wide flex items-center gap-1">
|
||||||
|
차단
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Group: Rigging (Warning) -->
|
||||||
|
<div class="border border-[#f59e0b]/30 rounded-lg overflow-hidden">
|
||||||
|
<div class="bg-[#fef3c7] px-stack-md py-2 border-b border-[#f59e0b]/20 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[#d97706] text-[20px]">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md text-[#92400e] font-bold">리깅 (Rigging)</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md flex items-start justify-between gap-stack-md">
|
||||||
|
<div class="flex gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-[#d97706] mt-0.5" style="font-variation-settings: 'FILL' 1;">warning</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-body-base font-body-base text-on-surface font-medium">리깅 트러스 하중 및 구조체 확인</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant mt-1">도면상 리깅 포인트 확인됨. 규정 하중 내인지 증빙 필요.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="bg-secondary text-on-secondary px-2 py-1 rounded-md text-label-xs font-label-xs font-medium flex items-center gap-1 whitespace-nowrap">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">auto_awesome</span>
|
||||||
|
구조계산서 D-7 제출 필요
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Group: Two-story (Passed) -->
|
||||||
|
<div class="border border-outline-variant rounded-lg overflow-hidden">
|
||||||
|
<div class="bg-surface-container px-stack-md py-2 border-b border-outline-variant flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">layers</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface font-bold">복층 구조</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md flex items-start justify-between gap-stack-md">
|
||||||
|
<div class="flex gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-tertiary-container mt-0.5" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-body-base font-body-base text-on-surface font-medium">복층 면적 제한 (전체 부스 면적의 50% 이하)</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant mt-1">측정 30% (통과)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Group: Flame Retardant (Passed) -->
|
||||||
|
<div class="border border-outline-variant rounded-lg overflow-hidden">
|
||||||
|
<div class="bg-surface-container px-stack-md py-2 border-b border-outline-variant flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">local_fire_department</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface font-bold">방염 규정</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md flex flex-col gap-2">
|
||||||
|
<div class="flex items-start justify-between gap-stack-md py-1 border-b border-outline-variant border-dashed last:border-0">
|
||||||
|
<div class="flex gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-tertiary-container mt-0.5 text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface">목공 마감재 방염 처리</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start justify-between gap-stack-md py-1 border-b border-outline-variant border-dashed last:border-0">
|
||||||
|
<div class="flex gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-tertiary-container mt-0.5 text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface">바닥재(파이텍스) 방염 성능</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Group: Prohibited Work (Passed) -->
|
||||||
|
<div class="border border-outline-variant rounded-lg overflow-hidden">
|
||||||
|
<div class="bg-surface-container px-stack-md py-2 border-b border-outline-variant flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">block</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface font-bold">금지작업</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest p-stack-md flex items-start justify-between gap-stack-md">
|
||||||
|
<div class="flex gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-tertiary-container mt-0.5" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-body-base font-body-base text-on-surface font-medium">용접 및 현장 도장 작업 금지</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant mt-1">도면 내 특이사항 없음</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right: Viewer (40% -> col-span-5) -->
|
||||||
|
<div class="col-span-5 bg-surface-container-lowest border border-outline-variant rounded-xl flex flex-col p-stack-md">
|
||||||
|
<div class="flex justify-between items-center mb-stack-sm">
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface">설계 도면 검토 (Elevation)</h3>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="p-1 rounded hover:bg-surface-variant text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">zoom_in</span></button>
|
||||||
|
<button class="p-1 rounded hover:bg-surface-variant text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">zoom_out</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 relative bg-surface-variant rounded-lg border border-outline-variant overflow-hidden group min-h-[400px]">
|
||||||
|
<!-- Drawing Image -->
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center w-full h-full opacity-90" data-alt="A highly detailed, technical blueprint elevation drawing of a modern exhibition booth. The drawing is on a bright, minimalist grid background with stark black lines and architectural dimensions. The lighting is flat and neutral, fitting a corporate B2B structural review context. Aesthetically clean, precise, and institutional." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBHUs3va7g3b7TQk9nWcOijjo3U1kfVr1-Zm-mmsaOEchkr0GHZ2JUDChM26bsDLSFGiDZ6yX4itJ6olM6eJOivcQIhFDDofuB4JLujZlsieMXpPkPw4uQnN_i2XSR-Fc1fpDjgoM8lcZJSnmm2enpZfEZ9ZKpplAtjE9MqM9G0crZUI3u7TqDJnnkK8i0opUoNZ1yK9hfo08c7qXz0ZPM14Sj5ODonOjOrRpDiUuRAVPGFr66dJYsw')"></div>
|
||||||
|
<!-- Overlay Highlight for Error -->
|
||||||
|
<div class="absolute inset-0 bg-black/5 pointer-events-none"></div>
|
||||||
|
<!-- Red Violation Box on Drawing -->
|
||||||
|
<div class="absolute top-[15%] left-[30%] w-[40%] h-[20%] border-2 border-error bg-error/20 flex items-center justify-center pointer-events-none animate-pulse">
|
||||||
|
<!-- Callout -->
|
||||||
|
<div class="absolute -right-2 -translate-y-1/2 top-1/2 translate-x-full bg-error text-on-error px-2 py-1 rounded text-label-md font-label-md font-bold whitespace-nowrap shadow-lg flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">warning</span>
|
||||||
|
5.4m (초과)
|
||||||
|
<!-- Connector line -->
|
||||||
|
<div class="absolute right-full top-1/2 -translate-y-1/2 w-2 h-0.5 bg-error"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Mini map / context nav in corner -->
|
||||||
|
<div class="absolute bottom-4 right-4 bg-surface-container-lowest/90 backdrop-blur-sm border border-outline-variant p-2 rounded shadow-sm">
|
||||||
|
<div class="w-16 h-16 bg-cover bg-center opacity-70 border border-outline" data-alt="A small, stylized thumbnail of a full exhibition hall floor plan, shown from a top-down perspective. Minimalist gray and white blocks on a light surface background, corporate and precise." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDBbzLkhGlWBnAjEBLDvBEsrC9X4uifRkinxIfAGdL4DK0qQnAPYTiCczPQKLGkYTqixzTFFacKmzJnkQFHb3hblGobbP52rCxka8DZ2zjmLon8pLSdU833icpCg3ilcJCUKUizknEsb3_oYyWGZUsaoLQG7TTnUUpaD0wDrfDA2zcuDl_OHj2adXg_HdOvGhEyOt_sbL6Aq5zDfKUBWv_Hhb5tR896DwvMfahz7ylBrUJrA59npB04')"></div>
|
||||||
|
<div class="w-2 h-2 bg-primary rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Footer Area -->
|
||||||
|
<footer class="mt-auto pt-stack-md border-t border-outline-variant flex items-center justify-between bg-background">
|
||||||
|
<div class="flex items-center gap-2 text-body-sm font-body-sm text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">info</span>
|
||||||
|
<p>본 검증은 사전 필터이며 최종 승인은 킨텍스·구조기술사 판단 · v1.0</p>
|
||||||
|
</div>
|
||||||
|
<button class="bg-surface-variant text-on-surface-variant/50 cursor-not-allowed px-6 py-3 rounded-lg text-label-md font-label-md flex items-center gap-2 border border-outline-variant/30" disabled="">
|
||||||
|
검증 리포트 첨부하여 제출
|
||||||
|
<span class="material-symbols-outlined text-[18px]">send</span>
|
||||||
|
</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body></html>
|
||||||
@ -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>
|
||||||
@ -0,0 +1,329 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" lang="en"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Exhibition Schedule - KINTEX CMS</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@100..900&display=swap" rel="stylesheet"/>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"surface-border": "#E5E7EB",
|
||||||
|
"surface-dim": "#d9dadb",
|
||||||
|
"surface-bright": "#f8f9fa",
|
||||||
|
"outline": "#727782",
|
||||||
|
"inverse-on-surface": "#f0f1f2",
|
||||||
|
"primary-fixed-dim": "#a6c8ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-background": "#191c1d",
|
||||||
|
"on-surface": "#191c1d",
|
||||||
|
"on-tertiary-container": "#ffc1b8",
|
||||||
|
"on-primary-fixed-variant": "#004786",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"primary-fixed": "#d5e3ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-tertiary-fixed-variant": "#930002",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-container": "#edeeef",
|
||||||
|
"surface-tint": "#115fac",
|
||||||
|
"surface-variant": "#e1e3e4",
|
||||||
|
"surface-container-highest": "#e1e3e4",
|
||||||
|
"status-pending": "#F59E0B",
|
||||||
|
"status-active": "#10B981",
|
||||||
|
"on-tertiary-fixed": "#410000",
|
||||||
|
"primary-container": "#0059a6",
|
||||||
|
"surface-container-high": "#e7e8e9",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-secondary-fixed-variant": "#1e4974",
|
||||||
|
"secondary-fixed": "#d2e4ff",
|
||||||
|
"tertiary": "#8a0002",
|
||||||
|
"tertiary-fixed": "#ffdad5",
|
||||||
|
"secondary-container": "#a6ccff",
|
||||||
|
"outline-variant": "#c2c6d3",
|
||||||
|
"on-surface-variant": "#424751",
|
||||||
|
"surface-container-low": "#f3f4f5",
|
||||||
|
"on-primary-fixed": "#001c3b",
|
||||||
|
"surface": "#f8f9fa",
|
||||||
|
"inverse-surface": "#2e3132",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"tertiary-container": "#b60004",
|
||||||
|
"primary": "#00427d",
|
||||||
|
"on-primary-container": "#b6d1ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-secondary-container": "#2e5682",
|
||||||
|
"secondary": "#39608d",
|
||||||
|
"on-secondary-fixed": "#001c37",
|
||||||
|
"inverse-primary": "#a6c8ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#a3c9fc",
|
||||||
|
"table-header": "#F1F5F9",
|
||||||
|
"tertiary-fixed-dim": "#ffb4a9",
|
||||||
|
"background": "#f8f9fa"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"margin-desktop": "32px",
|
||||||
|
"container-max": "1440px",
|
||||||
|
"margin-mobile": "16px",
|
||||||
|
"gutter": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-md": ["Hanken Grotesk"],
|
||||||
|
"mono-data": ["JetBrains Mono"],
|
||||||
|
"body-md": ["Hanken Grotesk"],
|
||||||
|
"headline-lg": ["Hanken Grotesk"],
|
||||||
|
"headline-lg-mobile": ["Hanken Grotesk"],
|
||||||
|
"body-sm": ["Hanken Grotesk"],
|
||||||
|
"label-md": ["Hanken Grotesk"],
|
||||||
|
"body-lg": ["Hanken Grotesk"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-md": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
|
||||||
|
"mono-data": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
|
||||||
|
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
||||||
|
"headline-lg": ["30px", { "lineHeight": "38px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
||||||
|
"headline-lg-mobile": ["24px", { "lineHeight": "32px", "fontWeight": "700" }],
|
||||||
|
"body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
|
||||||
|
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600" }],
|
||||||
|
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Hanken Grotesk', sans-serif; background-color: #f8f9fa; }
|
||||||
|
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background antialiased flex">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="w-[240px] h-screen fixed left-0 top-0 bg-surface border-r border-surface-border flex flex-col py-stack-lg z-50 hidden md:flex">
|
||||||
|
<div class="px-gutter mb-stack-lg flex items-center gap-stack-md">
|
||||||
|
<img alt="KINTEX Admin Profile" class="w-10 h-10 rounded-full object-cover" data-alt="A clean, minimalist abstract geometric logo representing a modern exhibition center. Corporate blue and gray tones on a white background. Professional administrative dashboard identity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVsMPdQO7juKWJmU6p-16B0faYDWSyZMwl7xp7vhMFO-X71CXARl4f0uGfqcIEu0B6KRbqIFrRQOhUjTl5oeVZdxozZBpV5Wzp5SBs5n1HCWkedEunPTGcFWxDO1c-8I_6l90Wq8jPzfmUbX24nlMbiqB3mTiGAUU-HH-GGKyo7v6AAEebnhk1vfGnOLG90v_2sCBXpVB_4gLHNgXKpB3jE-8qz_J8IG670lLTfY6GLr88KyLC8Bgz"/>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">KINTEX CMS</h1>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant">Exhibition Management</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-gutter mb-stack-lg">
|
||||||
|
<button class="w-full bg-primary-container text-on-primary text-body-md font-body-md py-2 px-4 rounded hover:opacity-90 transition-opacity flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">add</span> Create New Event
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul class="flex-1 overflow-y-auto font-body-md text-body-md">
|
||||||
|
<li class="mb-1">
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span> Dashboard
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="mb-1">
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-3 bg-secondary-container text-on-secondary-container font-semibold transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined">calendar_month</span> Exhibition Schedule
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="mb-1">
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined">sensors</span> Hall Operations
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="mb-1">
|
||||||
|
<a class="flex items-center gap-3 px-gutter py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined">analytics</span> Business Intelligence
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="mt-auto px-gutter pt-stack-md border-t border-surface-border">
|
||||||
|
<ul>
|
||||||
|
<li class="mb-1">
|
||||||
|
<a class="flex items-center gap-3 py-2 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span> Settings
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 py-2 text-on-surface-variant hover:bg-surface-container-high transition-colors duration-200 active:scale-[0.98]" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span> Support
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<div class="flex-1 md:ml-[240px] flex flex-col min-h-screen">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="h-16 w-full md:w-[calc(100%-240px)] fixed top-0 right-0 z-40 bg-surface border-b border-surface-border flex items-center justify-between px-margin-desktop md:px-gutter">
|
||||||
|
<div class="flex items-center gap-stack-lg md:hidden">
|
||||||
|
<span class="material-symbols-outlined cursor-pointer">menu</span>
|
||||||
|
<span class="font-headline-md text-headline-md font-bold text-primary">KINTEX CMS</span>
|
||||||
|
</div>
|
||||||
|
<nav class="hidden md:flex items-center gap-stack-lg font-label-md text-label-md">
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Overview</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Hall Map</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100" href="#">Reports</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<div class="relative hidden sm:block">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[18px]">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-1.5 rounded bg-surface-container-low border border-surface-border focus:outline-none focus:border-primary-container text-body-sm font-body-sm w-64" placeholder="Search events..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="text-primary-container font-label-md text-label-md hover:opacity-80 transition-opacity hidden sm:block border border-primary-container px-3 py-1.5 rounded bg-surface">Refresh Data</button>
|
||||||
|
<div class="flex items-center gap-2 text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">notifications</span>
|
||||||
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">account_circle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Canvas -->
|
||||||
|
<main class="flex-1 mt-16 p-margin-mobile md:p-gutter max-w-container-max mx-auto w-full">
|
||||||
|
<div class="mb-stack-lg">
|
||||||
|
<h2 class="font-headline-lg-mobile md:font-headline-lg text-headline-lg-mobile md:text-headline-lg text-on-background mb-2">Exhibition Schedule</h2>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">Manage and monitor all scheduled events across KINTEX halls.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Filters & Controls -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border p-stack-md rounded-lg mb-stack-lg flex flex-col md:flex-row gap-stack-md justify-between items-start md:items-center">
|
||||||
|
<div class="flex flex-wrap gap-stack-md w-full md:w-auto">
|
||||||
|
<select class="border-surface-border bg-surface-bright rounded text-body-md font-body-md py-1.5 px-3 focus:ring-primary-container focus:border-primary-container w-full md:w-auto">
|
||||||
|
<option>All Halls (1-10)</option>
|
||||||
|
<option>Hall 1</option>
|
||||||
|
<option>Hall 2</option>
|
||||||
|
<option>Hall 3</option>
|
||||||
|
</select>
|
||||||
|
<select class="border-surface-border bg-surface-bright rounded text-body-md font-body-md py-1.5 px-3 focus:ring-primary-container focus:border-primary-container w-full md:w-auto">
|
||||||
|
<option>All Categories</option>
|
||||||
|
<option>Culture & Arts</option>
|
||||||
|
<option>Trade & Industry</option>
|
||||||
|
<option>Technology</option>
|
||||||
|
</select>
|
||||||
|
<select class="border-surface-border bg-surface-bright rounded text-body-md font-body-md py-1.5 px-3 focus:ring-primary-container focus:border-primary-container w-full md:w-auto">
|
||||||
|
<option>All Statuses</option>
|
||||||
|
<option>Upcoming</option>
|
||||||
|
<option>Ongoing</option>
|
||||||
|
<option>Completed</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex bg-surface-bright border border-surface-border rounded overflow-hidden">
|
||||||
|
<button class="px-4 py-1.5 bg-surface-container-high text-on-surface font-label-md text-label-md border-r border-surface-border flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">view_list</span> List
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-1.5 text-on-surface-variant hover:bg-surface-container-low font-label-md text-label-md flex items-center gap-2 transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">calendar_view_month</span> Calendar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Content Grid (Bento Style approach for schedule) -->
|
||||||
|
<div class="grid grid-cols-1 xl:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Main Schedule List -->
|
||||||
|
<div class="xl:col-span-2 flex flex-col gap-stack-md">
|
||||||
|
<!-- Event Card 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col sm:flex-row gap-stack-md hover:bg-surface-container-low transition-colors group">
|
||||||
|
<div class="w-full sm:w-48 h-32 flex-shrink-0 bg-surface-container-high rounded overflow-hidden border border-surface-border">
|
||||||
|
<img alt="Comic World Summer 2026 Poster" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/AP1WRLuhE3Vd0GA0P7-YrpkgIx42CAZc4R0siEKp4C6Mar5e5pyriuApjq9hIelV50973-kvsDZ1bwDw2MAN9hZD1SCj2NNYrnHo3j1Isw7AGFmeLByaZ9EAcNyvjA0D6ikHOoATtUTneRSmhRpSOOdLe32I1coUcsBLg9P1lCUyCLsJ1Fr53uM31oVf0Wva13z7EeJHlBAnZ4PkzyjprfUKx2jcZ6A0U9_pV9faI3YUNV35nE2wVzVm_ADdoWQ"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col justify-between py-1">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface">Comic World Summer 2026</h3>
|
||||||
|
<span class="bg-status-active/20 text-status-active px-2 py-0.5 rounded font-label-md text-label-md border border-status-active/30">Ongoing</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Culture & Arts Festival</p>
|
||||||
|
<div class="flex flex-wrap gap-4 text-body-sm font-body-sm text-on-surface-variant">
|
||||||
|
<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">event</span> Aug 15 - Aug 18, 2026</div>
|
||||||
|
<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">location_on</span> Hall 1, 2, 3</div>
|
||||||
|
<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">groups</span> Est. 50,000</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 sm:mt-0 flex gap-2">
|
||||||
|
<button class="px-3 py-1 bg-surface border border-surface-border text-on-surface font-label-md text-label-md rounded hover:bg-surface-container-high transition-colors">Edit Details</button>
|
||||||
|
<button class="px-3 py-1 bg-surface border border-surface-border text-on-surface font-label-md text-label-md rounded hover:bg-surface-container-high transition-colors">View Logistics</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Event Card 2 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md flex flex-col sm:flex-row gap-stack-md hover:bg-surface-container-low transition-colors group">
|
||||||
|
<div class="w-full sm:w-48 h-32 flex-shrink-0 bg-surface-container-high rounded overflow-hidden border border-surface-border relative">
|
||||||
|
<div class="w-full h-full bg-cover bg-center" data-alt="A clean, brightly lit trade show floor with modern tech booths. High angle shot showing organized aisles and minimal crowds. Cool white lighting, corporate modern aesthetic." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA1iVHP2zaLTADA0j0mJnO5UTxi3KE6dR9k_m4auiWG4koDltA0Tp0GAwAwJbJUxmHObvOV3bhvymF8vJDhhia4mb4cL9YE3dKVMiHDNpArZzryOYfKwgH3qMXBrRTzLcUzHsBAsydwk2eUKG6k0M-u4d5C39nXIPENZN3b6Nv0BAqH4JC8Dm2NPFt8A-yRoI0lQZd_OYPRuuNKkxJihRTRE3iQ_bB_kJ08RYDUKij30OIImks7wMy_')"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col justify-between py-1">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-start mb-1">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface">Smart Factory Expo</h3>
|
||||||
|
<span class="bg-status-pending/20 text-status-pending px-2 py-0.5 rounded font-label-md text-label-md border border-status-pending/30">Upcoming</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-sm text-body-sm text-on-surface-variant mb-2">Trade & Industry Exhibition</p>
|
||||||
|
<div class="flex flex-wrap gap-4 text-body-sm font-body-sm text-on-surface-variant">
|
||||||
|
<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">event</span> Sep 05 - Sep 08, 2026</div>
|
||||||
|
<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">location_on</span> Hall 4, 5</div>
|
||||||
|
<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">groups</span> Est. 25,000</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 sm:mt-0 flex gap-2">
|
||||||
|
<button class="px-3 py-1 bg-surface border border-surface-border text-on-surface font-label-md text-label-md rounded hover:bg-surface-container-high transition-colors">Edit Details</button>
|
||||||
|
<button class="px-3 py-1 bg-surface border border-surface-border text-on-surface font-label-md text-label-md rounded hover:bg-surface-container-high transition-colors">View Logistics</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Side Panel (Mini Calendar / Stats) -->
|
||||||
|
<div class="flex flex-col gap-gutter">
|
||||||
|
<!-- Mini Calendar -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md">
|
||||||
|
<div class="flex justify-between items-center mb-4">
|
||||||
|
<h4 class="font-headline-md text-headline-md text-on-surface">August 2026</h4>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">chevron_left</span>
|
||||||
|
<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-7 gap-1 text-center font-label-md text-label-md text-on-surface-variant mb-2">
|
||||||
|
<div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-7 gap-1 text-center font-mono-data text-mono-data text-on-surface">
|
||||||
|
<div class="text-surface-dim p-1">26</div><div class="text-surface-dim p-1">27</div><div class="text-surface-dim p-1">28</div><div class="text-surface-dim p-1">29</div><div class="text-surface-dim p-1">30</div><div class="text-surface-dim p-1">31</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">1</div>
|
||||||
|
<!-- Snipped calendar for brevity in effort level -->
|
||||||
|
<div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">2</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">3</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">4</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">5</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">6</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">7</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">8</div>
|
||||||
|
<div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">9</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">10</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">11</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">12</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">13</div><div class="p-1 hover:bg-surface-container-high rounded cursor-pointer">14</div><div class="bg-primary-container text-on-primary rounded p-1">15</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Utilization Summary -->
|
||||||
|
<div class="bg-surface-container-lowest border border-surface-border rounded-lg p-stack-md">
|
||||||
|
<h4 class="font-headline-md text-headline-md text-on-surface mb-4">Hall Utilization (Aug)</h4>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-body-sm font-body-sm mb-1">
|
||||||
|
<span class="text-on-surface-variant">Hall 1-3</span>
|
||||||
|
<span class="font-mono-data text-on-surface">85%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container-high h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-primary-container h-full" style="width: 85%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-body-sm font-body-sm mb-1">
|
||||||
|
<span class="text-on-surface-variant">Hall 4-5</span>
|
||||||
|
<span class="font-mono-data text-on-surface">40%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container-high h-2 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-primary-container h-full" style="width: 40%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,301 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Exhibitor Home - KINTEX AI</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;500;600;700&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"/>
|
||||||
|
<!-- Using Inter for Korean as well for fallback, typically Noto Sans KR is preferred but sticking to design system fonts -->
|
||||||
|
<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",
|
||||||
|
"warning": "#F59E0B"
|
||||||
|
},
|
||||||
|
"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": ["Inter"],
|
||||||
|
"label-xs": ["Inter"]
|
||||||
|
},
|
||||||
|
"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>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.ai-border {
|
||||||
|
border: 1px solid #6D4AFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface text-on-surface font-body-base h-screen flex overflow-hidden">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
|
||||||
|
<!-- Brand / Header -->
|
||||||
|
<div class="px-container-padding mb-stack-lg flex items-center gap-stack-sm">
|
||||||
|
<img class="w-8 h-8 rounded-full object-cover" data-alt="A minimalist and sleek corporate logo for KINTEX AI in deep blue and stark white, modern b2b tech aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAGMHqzoosZusnl_2O-U--zo_pi0PA9LUW6vmQhUO5LGfBthYM8aHL2ZTHAzC-QAQPIxU9svKiXmRXwAMnmscxxxbBKVEJmCq_3ETHGM3kVgZXSkoEsYeqzw9_vYUJdg9M6jgFz84JzzvQy-k3nc55BgU-JJlyJr1FgPJykwuxH9ve50mUrYCD0evZmklkN5fv65bwbLKaRTyHurZgTylO0QLQ5yGLIFmZU4fwA9U6jkT9zoZ7tO1fn"/>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI</h1>
|
||||||
|
<p class="text-label-md font-label-md text-on-surface-variant">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Navigation Links -->
|
||||||
|
<ul class="flex flex-col flex-1 px-stack-sm gap-base">
|
||||||
|
<!-- Active: Dashboard -->
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-primary font-bold border-r-4 border-primary bg-primary-container/10" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="text-title-sm font-title-sm">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<!-- Inactive -->
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- Footer Links -->
|
||||||
|
<ul class="flex flex-col px-stack-sm gap-base mt-auto">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-md px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="ml-60 flex-1 h-screen overflow-y-auto bg-surface p-container-padding flex flex-col gap-stack-lg">
|
||||||
|
<!-- Header Card -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-container-padding flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-display-lg font-display-lg text-on-surface mb-base">(주)한빛로보틱스</h2>
|
||||||
|
<div class="flex items-center gap-stack-sm text-on-surface-variant text-title-sm font-title-sm">
|
||||||
|
<span>부스 A-102</span>
|
||||||
|
<span>·</span>
|
||||||
|
<span>독립부스 6×3m</span>
|
||||||
|
<span>·</span>
|
||||||
|
<span>홀7</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-24 bg-surface-variant rounded-lg border border-outline-variant relative overflow-hidden flex items-center justify-center">
|
||||||
|
<div class="w-full h-full opacity-50" data-alt="A minimalist architectural floor plan schematic of an exhibition hall, high contrast, clean lines, professional B2B software aesthetic" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBiwDimFk1sBuNnPE_2RSjfsmamf_Sr70bc2Vbr55j7jMLHaC9VKUvtSLmR5_CcFbd4wpwPjcy_QAgfXLVDkoXvsvodD7DFp5ThCXMf0muIp1s_TnAyqi7-ljT9_mb4KEDpRQROMlk2JQ5hwhJLokGVFis67KjLu2vIkrII7Xng2CXD56wIii1Ys48DTO7tLVUqKCJ2FshDPZmKLzTYnpW0N1bkqCHrEPBcPnZO7-n6mr9m1HMt_uml')"></div>
|
||||||
|
<div class="absolute w-6 h-4 bg-primary/80 border-2 border-primary top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-sm shadow-md"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Progress Stepper -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-container-padding">
|
||||||
|
<div class="flex items-center justify-between w-full max-w-3xl mx-auto relative">
|
||||||
|
<!-- Line -->
|
||||||
|
<div class="absolute top-1/2 left-0 w-full h-0.5 bg-outline-variant -z-10 transform -translate-y-1/2"></div>
|
||||||
|
<!-- Step 1 -->
|
||||||
|
<div class="flex flex-col items-center gap-stack-sm bg-surface-container-lowest px-2">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold">
|
||||||
|
<span class="material-symbols-outlined text-sm">check</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">신청</span>
|
||||||
|
</div>
|
||||||
|
<!-- Step 2 (Active) -->
|
||||||
|
<div class="flex flex-col items-center gap-stack-sm bg-surface-container-lowest px-2">
|
||||||
|
<div class="w-8 h-8 rounded-full border-2 border-primary bg-surface-container-lowest text-primary flex items-center justify-center font-bold relative">
|
||||||
|
<div class="w-3 h-3 bg-primary rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-md font-label-md text-primary font-bold">승인</span>
|
||||||
|
<span class="absolute -bottom-6 text-label-xs text-primary bg-primary-container/10 px-2 py-0.5 rounded">설계 승인 대기중</span>
|
||||||
|
</div>
|
||||||
|
<!-- Step 3 -->
|
||||||
|
<div class="flex flex-col items-center gap-stack-sm bg-surface-container-lowest px-2">
|
||||||
|
<div class="w-8 h-8 rounded-full border-2 border-outline-variant bg-surface-container-lowest text-outline-variant flex items-center justify-center font-bold">3</div>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">시공</span>
|
||||||
|
</div>
|
||||||
|
<!-- Step 4 -->
|
||||||
|
<div class="flex flex-col items-center gap-stack-sm bg-surface-container-lowest px-2">
|
||||||
|
<div class="w-8 h-8 rounded-full border-2 border-outline-variant bg-surface-container-lowest text-outline-variant flex items-center justify-center font-bold">4</div>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">검수</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-12 gap-gutter flex-1">
|
||||||
|
<!-- Tasks Column -->
|
||||||
|
<div class="col-span-12 md:col-span-5 flex flex-col gap-stack-md">
|
||||||
|
<h3 class="text-headline-md font-headline-md text-on-surface">해야 할 일</h3>
|
||||||
|
<!-- Urgent Task -->
|
||||||
|
<div class="bg-surface-container-lowest border border-[#F59E0B] rounded-xl p-stack-md pl-stack-lg relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-[#F59E0B]"></div>
|
||||||
|
<div class="flex justify-between items-start mb-base">
|
||||||
|
<span class="bg-[#F59E0B] text-white px-2 py-0.5 rounded text-label-xs font-label-xs font-bold">D-6</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-title-sm font-title-sm text-on-surface mb-1">유틸리티 신청 마감</h4>
|
||||||
|
<p class="text-body-sm font-body-sm text-error">인터넷 회선은 현장 추가 신청이 불가합니다</p>
|
||||||
|
</div>
|
||||||
|
<!-- Normal Task -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md pl-stack-lg relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-outline-variant"></div>
|
||||||
|
<div class="flex justify-between items-start mb-base">
|
||||||
|
<span class="bg-surface-variant text-on-surface-variant px-2 py-0.5 rounded text-label-xs font-label-xs font-bold">D-15</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-title-sm font-title-sm text-on-surface">장치업체 초대하기</h4>
|
||||||
|
</div>
|
||||||
|
<!-- Pending Task -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md pl-stack-lg relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
|
||||||
|
<h4 class="text-title-sm font-title-sm text-on-surface">설계 컨펌 대기 1건</h4>
|
||||||
|
<button class="mt-stack-sm text-primary text-label-md font-label-md hover:underline flex items-center gap-1">
|
||||||
|
확인하기 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Cost Summary Table -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md mt-auto">
|
||||||
|
<h4 class="text-label-md font-label-md text-on-surface-variant mb-stack-sm uppercase">비용 요약</h4>
|
||||||
|
<div class="flex flex-col gap-base">
|
||||||
|
<div class="flex justify-between items-center text-body-sm font-body-sm py-2 border-b border-surface-variant">
|
||||||
|
<span class="text-on-surface">전기 5kW</span>
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<span class="font-semibold">₩275,000</span>
|
||||||
|
<span class="bg-tertiary-container/20 text-tertiary px-2 py-0.5 rounded-full text-label-xs">신청됨</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-body-sm font-body-sm py-2">
|
||||||
|
<span class="text-on-surface">인터넷 1회선</span>
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<span class="font-semibold">₩150,000</span>
|
||||||
|
<span class="bg-surface-variant text-on-surface-variant px-2 py-0.5 rounded-full text-label-xs">작성중</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Preview Column -->
|
||||||
|
<div class="col-span-12 md:col-span-7 flex flex-col gap-stack-md h-full">
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md flex flex-col h-full">
|
||||||
|
<h3 class="text-headline-md font-headline-md text-on-surface mb-stack-sm flex items-center gap-2">
|
||||||
|
내 부스 예상 사진
|
||||||
|
<span class="material-symbols-outlined text-secondary text-sm" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
</h3>
|
||||||
|
<div class="relative flex-1 rounded-lg overflow-hidden border border-outline-variant ai-border bg-surface-variant flex flex-col justify-end min-h-[300px]">
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLt7Owqk04bQHpDRgW-TOypxVfJaLrvGQkPASyNEHGKREzRPLbA3WCQeI_EPz-feK-fDR17TWVMPmQjtYDnTjXIAw_a9ctvRCW-GENeZYnEOC7qPsOdbhFyx-xS4VIDsARlepBMwyh-2lbIf85_kbEg-w0Z_r189I59Hh6nF0V5mCvUHWsQQVYY5s2jSHwa5K9U3OKeEMBBV-xB1jWziZ_5pGqizp5S5_FdYxsFmwdCD1dVUUJNkc8Hqpu8');"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
|
||||||
|
<p class="relative z-10 text-white/70 text-label-xs font-label-xs p-stack-md">AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있음</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-stack-md mt-stack-md">
|
||||||
|
<button class="flex-1 bg-primary text-on-primary py-2 px-4 rounded-lg font-title-sm text-title-sm hover:bg-surface-tint transition-colors shadow-sm">
|
||||||
|
부스 설계 스튜디오
|
||||||
|
</button>
|
||||||
|
<button class="flex-1 border border-outline text-on-surface py-2 px-4 rounded-lg font-title-sm text-title-sm hover:bg-surface-variant transition-colors">
|
||||||
|
유틸리티 신청
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,441 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="en"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX CMS - Smart Hall Operations</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=Hanken+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400&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": {
|
||||||
|
"surface-border": "#E5E7EB",
|
||||||
|
"surface-dim": "#d9dadb",
|
||||||
|
"surface-bright": "#f8f9fa",
|
||||||
|
"outline": "#727782",
|
||||||
|
"inverse-on-surface": "#f0f1f2",
|
||||||
|
"primary-fixed-dim": "#a6c8ff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-background": "#191c1d",
|
||||||
|
"on-surface": "#191c1d",
|
||||||
|
"on-tertiary-container": "#ffc1b8",
|
||||||
|
"on-primary-fixed-variant": "#004786",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"primary-fixed": "#d5e3ff",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-tertiary-fixed-variant": "#930002",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"surface-container": "#edeeef",
|
||||||
|
"surface-tint": "#115fac",
|
||||||
|
"surface-variant": "#e1e3e4",
|
||||||
|
"surface-container-highest": "#e1e3e4",
|
||||||
|
"status-pending": "#F59E0B",
|
||||||
|
"status-active": "#10B981",
|
||||||
|
"on-tertiary-fixed": "#410000",
|
||||||
|
"primary-container": "#0059a6",
|
||||||
|
"surface-container-high": "#e7e8e9",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"on-secondary-fixed-variant": "#1e4974",
|
||||||
|
"secondary-fixed": "#d2e4ff",
|
||||||
|
"tertiary": "#8a0002",
|
||||||
|
"tertiary-fixed": "#ffdad5",
|
||||||
|
"secondary-container": "#a6ccff",
|
||||||
|
"outline-variant": "#c2c6d3",
|
||||||
|
"on-surface-variant": "#424751",
|
||||||
|
"surface-container-low": "#f3f4f5",
|
||||||
|
"on-primary-fixed": "#001c3b",
|
||||||
|
"surface": "#f8f9fa",
|
||||||
|
"inverse-surface": "#2e3132",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"tertiary-container": "#b60004",
|
||||||
|
"primary": "#00427d",
|
||||||
|
"on-primary-container": "#b6d1ff",
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"on-secondary-container": "#2e5682",
|
||||||
|
"secondary": "#39608d",
|
||||||
|
"on-secondary-fixed": "#001c37",
|
||||||
|
"inverse-primary": "#a6c8ff",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#a3c9fc",
|
||||||
|
"table-header": "#F1F5F9",
|
||||||
|
"tertiary-fixed-dim": "#ffb4a9",
|
||||||
|
"background": "#f8f9fa"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.125rem",
|
||||||
|
"lg": "0.25rem",
|
||||||
|
"xl": "0.5rem",
|
||||||
|
"full": "0.75rem"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"margin-desktop": "32px",
|
||||||
|
"container-max": "1440px",
|
||||||
|
"margin-mobile": "16px",
|
||||||
|
"gutter": "24px",
|
||||||
|
"stack-sm": "8px",
|
||||||
|
"stack-md": "16px",
|
||||||
|
"stack-lg": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-md": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"mono-data": [
|
||||||
|
"jetbrainsMono"
|
||||||
|
],
|
||||||
|
"body-md": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"headline-lg": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"headline-lg-mobile": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"body-sm": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"label-md": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
],
|
||||||
|
"body-lg": [
|
||||||
|
"Hanken Grotesk"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-md": [
|
||||||
|
"20px",
|
||||||
|
{
|
||||||
|
"lineHeight": "28px",
|
||||||
|
"fontWeight": "600"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mono-data": [
|
||||||
|
"13px",
|
||||||
|
{
|
||||||
|
"lineHeight": "18px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body-md": [
|
||||||
|
"14px",
|
||||||
|
{
|
||||||
|
"lineHeight": "20px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"headline-lg": [
|
||||||
|
"30px",
|
||||||
|
{
|
||||||
|
"lineHeight": "38px",
|
||||||
|
"letterSpacing": "-0.02em",
|
||||||
|
"fontWeight": "700"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"headline-lg-mobile": [
|
||||||
|
"24px",
|
||||||
|
{
|
||||||
|
"lineHeight": "32px",
|
||||||
|
"fontWeight": "700"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body-sm": [
|
||||||
|
"13px",
|
||||||
|
{
|
||||||
|
"lineHeight": "18px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"label-md": [
|
||||||
|
"12px",
|
||||||
|
{
|
||||||
|
"lineHeight": "16px",
|
||||||
|
"letterSpacing": "0.05em",
|
||||||
|
"fontWeight": "600"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"body-lg": [
|
||||||
|
"16px",
|
||||||
|
{
|
||||||
|
"lineHeight": "24px",
|
||||||
|
"fontWeight": "400"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { background-color: #f8f9fa; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-surface font-body-md antialiased overflow-x-hidden">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="w-[240px] h-screen fixed left-0 top-0 bg-surface dark:bg-surface border-r border-surface-border flex flex-col py-stack-lg z-50">
|
||||||
|
<div class="px-gutter mb-stack-lg flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
||||||
|
<span class="material-symbols-outlined">domain</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed-dim tracking-tight">KINTEX CMS</h1>
|
||||||
|
<p class="font-label-md text-label-md text-on-surface-variant">Exhibition Management</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-gutter mb-stack-lg">
|
||||||
|
<button class="w-full bg-primary text-on-primary py-2 px-4 rounded font-label-md text-label-md hover:bg-primary-container hover:text-on-primary-container transition-colors duration-200 flex items-center justify-center gap-2 shadow-sm">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
|
||||||
|
Create New Event
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 px-3 space-y-1">
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="font-label-md text-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">calendar_month</span>
|
||||||
|
<span class="font-label-md text-label-md">Exhibition Schedule</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded bg-secondary-container text-on-secondary-container font-semibold transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">sensors</span>
|
||||||
|
<span class="font-label-md text-label-md">Hall Operations</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">analytics</span>
|
||||||
|
<span class="font-label-md text-label-md">Business Intelligence</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="px-3 space-y-1 mt-auto border-t border-surface-border pt-stack-sm">
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="font-label-md text-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-low transition-colors duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="font-label-md text-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="h-16 w-[calc(100%-240px)] fixed top-0 right-0 z-40 bg-surface dark:bg-surface border-b border-surface-border flex items-center justify-between px-margin-desktop ml-[240px]">
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<nav class="hidden md:flex items-center gap-6">
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Overview</a>
|
||||||
|
<a class="font-label-md text-label-md text-primary border-b-2 border-primary pb-1" href="#">Hall Map</a>
|
||||||
|
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors" href="#">Reports</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative hidden lg:block">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm">search</span>
|
||||||
|
<input class="pl-9 pr-4 py-1.5 rounded-full border border-surface-border bg-surface-container-lowest text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary w-64" placeholder="Search operations..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="font-label-md text-label-md text-primary border border-surface-border bg-surface-container-lowest px-4 py-1.5 rounded hover:bg-surface-container-low transition-colors flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">refresh</span>
|
||||||
|
Refresh Data
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center gap-2 border-l border-surface-border pl-4">
|
||||||
|
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer opacity-90 hover:opacity-100">
|
||||||
|
<span class="material-symbols-outlined">account_circle</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="ml-[240px] mt-16 p-margin-desktop max-w-container-max">
|
||||||
|
<div class="flex items-center justify-between mb-stack-lg">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">Smart Hall Operations</h2>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant mt-1">Real-time facility monitoring and resource optimization.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 bg-surface-container-lowest border border-surface-border rounded-lg p-1">
|
||||||
|
<button class="px-3 py-1 bg-surface-container-high rounded shadow-sm font-label-md text-label-md text-on-surface">Live View</button>
|
||||||
|
<button class="px-3 py-1 rounded font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-low">Historical</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bento Grid Layout -->
|
||||||
|
<div class="grid grid-cols-12 gap-gutter">
|
||||||
|
<!-- Crowd Density Map (Span 8) -->
|
||||||
|
<div class="col-span-12 lg:col-span-8 bg-surface-container-lowest rounded-xl border border-surface-border overflow-hidden flex flex-col h-[500px]">
|
||||||
|
<div class="px-stack-lg py-stack-md border-b border-surface-border flex justify-between items-center bg-surface-bright">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary">groups</span>
|
||||||
|
Live Crowd Density Heatmap
|
||||||
|
</h3>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<select class="text-sm border-surface-border rounded bg-surface-container-lowest focus:ring-primary focus:border-primary py-1 pl-2 pr-8">
|
||||||
|
<option>Halls 1-5 (Exhibition Center 1)</option>
|
||||||
|
<option>Halls 6-10 (Exhibition Center 2)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 relative bg-surface-variant p-4">
|
||||||
|
<!-- Simulated Heatmap Area - using gradient for visual effect -->
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-br from-surface-variant via-surface to-surface-variant opacity-50"></div>
|
||||||
|
<!-- Placeholder for actual map visualization -->
|
||||||
|
<div class="relative w-full h-full bg-surface-container-lowest border border-surface-border rounded-lg shadow-sm overflow-hidden flex items-center justify-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAzDGCxZryR6cy1r-TqP3RGKxo9Q2SrEo5oqMaZVpLfvhZj7YBSwlVKNq5O4bvG-KFCWIB7ptcbsksw5m6ttfP_KbPFpPAJD2JCufmfiY_7AXdcR6B7yaf88RxuPmB_kviQa1GNFYKVBDYUAPzPdPf_qmV7PTMKcisaMQkM8fIzN4w2ncnDR4TV_EVfiiKmikS7pdvPg2CPN9d7eRsMZIu4qOWqsUVQLtwMIhRygocuOLrAIy81gxLL'); background-size: cover; background-position: center;">
|
||||||
|
<!-- Simulated Heat Spots -->
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-32 h-32 bg-status-pending rounded-full blur-2xl opacity-60 mix-blend-multiply"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-error rounded-full blur-3xl opacity-40 mix-blend-multiply"></div>
|
||||||
|
<div class="absolute bottom-1/4 left-1/2 w-24 h-24 bg-status-active rounded-full blur-xl opacity-50 mix-blend-multiply"></div>
|
||||||
|
<!-- Hall Labels overlaid -->
|
||||||
|
<div class="absolute inset-0 grid grid-cols-5 gap-2 p-4">
|
||||||
|
<div class="border-2 border-outline/30 rounded flex items-center justify-center bg-surface-container-lowest/80 backdrop-blur-sm"><span class="font-label-md text-outline">Hall 1</span></div>
|
||||||
|
<div class="border-2 border-outline/30 rounded flex items-center justify-center bg-surface-container-lowest/80 backdrop-blur-sm"><span class="font-label-md text-outline">Hall 2</span></div>
|
||||||
|
<div class="border-2 border-outline-variant rounded flex items-center justify-center bg-error-container/40 backdrop-blur-sm border-error/50"><span class="font-label-md text-error">Hall 3 (High)</span></div>
|
||||||
|
<div class="border-2 border-outline/30 rounded flex items-center justify-center bg-surface-container-lowest/80 backdrop-blur-sm"><span class="font-label-md text-outline">Hall 4</span></div>
|
||||||
|
<div class="border-2 border-outline/30 rounded flex items-center justify-center bg-surface-container-lowest/80 backdrop-blur-sm"><span class="font-label-md text-outline">Hall 5</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-stack-lg py-3 border-t border-surface-border bg-surface-bright flex justify-between text-sm">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-status-active"></span> Low</span>
|
||||||
|
<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-status-pending"></span> Moderate</span>
|
||||||
|
<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-error"></span> High</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-mono-data text-mono-data text-outline">Total Est. Attendance: 14,250</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Energy & Environment (Span 4) -->
|
||||||
|
<div class="col-span-12 lg:col-span-4 flex flex-col gap-gutter h-[500px]">
|
||||||
|
<!-- HVAC Status -->
|
||||||
|
<div class="flex-1 bg-surface-container-lowest rounded-xl border border-surface-border p-stack-md flex flex-col">
|
||||||
|
<h3 class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-4 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-base">air</span>
|
||||||
|
HVAC Optimization
|
||||||
|
</h3>
|
||||||
|
<div class="flex items-end gap-2 mb-2">
|
||||||
|
<span class="text-3xl font-headline-lg font-bold text-primary">22.5°C</span>
|
||||||
|
<span class="font-body-sm text-outline pb-1">Avg Temp</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container h-2 rounded-full mb-4 overflow-hidden">
|
||||||
|
<div class="bg-primary h-full rounded-full" style="width: 65%;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 mt-auto">
|
||||||
|
<div>
|
||||||
|
<span class="block font-label-md text-outline mb-1">Power Draw</span>
|
||||||
|
<span class="font-mono-data text-on-surface">4.2 MW</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="block font-label-md text-outline mb-1">Status</span>
|
||||||
|
<span class="inline-flex items-center gap-1 font-label-md text-status-active bg-status-active/10 px-2 py-0.5 rounded">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">check_circle</span> Optimal
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Lighting Status -->
|
||||||
|
<div class="flex-1 bg-surface-container-lowest rounded-xl border border-surface-border p-stack-md flex flex-col">
|
||||||
|
<h3 class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-4 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-base">lightbulb</span>
|
||||||
|
Lighting Zones
|
||||||
|
</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="font-body-md text-on-surface">Exhibition Halls</span>
|
||||||
|
<span class="font-mono-data text-primary font-medium">85% ON</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container h-1.5 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-status-pending h-full rounded-full" style="width: 85%;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center mt-2">
|
||||||
|
<span class="font-body-md text-on-surface">Public Concourses</span>
|
||||||
|
<span class="font-mono-data text-primary font-medium">100% ON</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container h-1.5 rounded-full overflow-hidden">
|
||||||
|
<div class="bg-status-pending h-full rounded-full" style="width: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto pt-3 border-t border-surface-border flex justify-between items-center">
|
||||||
|
<span class="font-label-md text-outline">Auto-dimming active</span>
|
||||||
|
<div class="w-8 h-4 bg-primary rounded-full relative cursor-pointer">
|
||||||
|
<div class="w-3 h-3 bg-white rounded-full absolute right-0.5 top-0.5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Parking Logistics (Span 12) -->
|
||||||
|
<div class="col-span-12 bg-surface-container-lowest rounded-xl border border-surface-border p-stack-lg">
|
||||||
|
<div class="flex justify-between items-center mb-stack-md">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary">local_parking</span>
|
||||||
|
Parking Occupancy Status
|
||||||
|
</h3>
|
||||||
|
<span class="font-label-md bg-surface-container-high px-3 py-1 rounded text-on-surface-variant">Updated: Just now</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter">
|
||||||
|
<!-- Zone A -->
|
||||||
|
<div class="border border-surface-border rounded-lg p-4 bg-surface-bright relative overflow-hidden">
|
||||||
|
<div class="absolute bottom-0 left-0 h-1 bg-error w-full"></div>
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-label-md text-label-md text-on-surface">Zone A (Underground)</h4>
|
||||||
|
<span class="font-body-sm text-outline">VIP / Exhibitors</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-mono-data text-error font-bold">98%</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-end gap-1 mt-4">
|
||||||
|
<span class="text-2xl font-headline-md text-on-surface">1,176</span>
|
||||||
|
<span class="font-body-sm text-outline pb-1">/ 1,200</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Zone B -->
|
||||||
|
<div class="border border-surface-border rounded-lg p-4 bg-surface-bright relative overflow-hidden">
|
||||||
|
<div class="absolute bottom-0 left-0 h-1 bg-status-pending w-[75%]"></div>
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-label-md text-label-md text-on-surface">Zone B (Outdoor South)</h4>
|
||||||
|
<span class="font-body-sm text-outline">General Public</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-mono-data text-status-pending font-bold">75%</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-end gap-1 mt-4">
|
||||||
|
<span class="text-2xl font-headline-md text-on-surface">2,250</span>
|
||||||
|
<span class="font-body-sm text-outline pb-1">/ 3,000</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Zone C -->
|
||||||
|
<div class="border border-surface-border rounded-lg p-4 bg-surface-bright relative overflow-hidden">
|
||||||
|
<div class="absolute bottom-0 left-0 h-1 bg-status-active w-[42%]"></div>
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-label-md text-label-md text-on-surface">Zone C (Outdoor North)</h4>
|
||||||
|
<span class="font-body-sm text-outline">General Public</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-mono-data text-status-active font-bold">42%</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-end gap-1 mt-4">
|
||||||
|
<span class="text-2xl font-headline-md text-on-surface">1,050</span>
|
||||||
|
<span class="font-body-sm text-outline pb-1">/ 2,500</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Loading Dock -->
|
||||||
|
<div class="border border-surface-border rounded-lg p-4 bg-surface-bright relative overflow-hidden">
|
||||||
|
<div class="absolute bottom-0 left-0 h-1 bg-outline-variant w-[20%]"></div>
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-label-md text-label-md text-on-surface">Loading Docks 1-5</h4>
|
||||||
|
<span class="font-body-sm text-outline">Freight Only</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-mono-data text-outline font-bold">20%</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-end gap-1 mt-4">
|
||||||
|
<span class="text-2xl font-headline-md text-on-surface">12</span>
|
||||||
|
<span class="font-body-sm text-outline pb-1">/ 60 bays</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,182 @@
|
|||||||
|
---
|
||||||
|
name: Kintex AI Intelligence System
|
||||||
|
colors:
|
||||||
|
surface: '#f9f9fc'
|
||||||
|
surface-dim: '#dadadc'
|
||||||
|
surface-bright: '#f9f9fc'
|
||||||
|
surface-container-lowest: '#ffffff'
|
||||||
|
surface-container-low: '#f3f3f6'
|
||||||
|
surface-container: '#eeeef0'
|
||||||
|
surface-container-high: '#e8e8ea'
|
||||||
|
surface-container-highest: '#e2e2e5'
|
||||||
|
on-surface: '#1a1c1e'
|
||||||
|
on-surface-variant: '#424751'
|
||||||
|
inverse-surface: '#2f3133'
|
||||||
|
inverse-on-surface: '#f0f0f3'
|
||||||
|
outline: '#727782'
|
||||||
|
outline-variant: '#c2c6d3'
|
||||||
|
surface-tint: '#115fac'
|
||||||
|
primary: '#00427d'
|
||||||
|
on-primary: '#ffffff'
|
||||||
|
primary-container: '#0059a6'
|
||||||
|
on-primary-container: '#b6d1ff'
|
||||||
|
inverse-primary: '#a6c8ff'
|
||||||
|
secondary: '#5427e6'
|
||||||
|
on-secondary: '#ffffff'
|
||||||
|
secondary-container: '#6d4aff'
|
||||||
|
on-secondary-container: '#f3edff'
|
||||||
|
tertiary: '#004950'
|
||||||
|
on-tertiary: '#ffffff'
|
||||||
|
tertiary-container: '#00636b'
|
||||||
|
on-tertiary-container: '#65e2ef'
|
||||||
|
error: '#ba1a1a'
|
||||||
|
on-error: '#ffffff'
|
||||||
|
error-container: '#ffdad6'
|
||||||
|
on-error-container: '#93000a'
|
||||||
|
primary-fixed: '#d5e3ff'
|
||||||
|
primary-fixed-dim: '#a6c8ff'
|
||||||
|
on-primary-fixed: '#001c3b'
|
||||||
|
on-primary-fixed-variant: '#004786'
|
||||||
|
secondary-fixed: '#e5deff'
|
||||||
|
secondary-fixed-dim: '#c9bfff'
|
||||||
|
on-secondary-fixed: '#1b0063'
|
||||||
|
on-secondary-fixed-variant: '#4500d8'
|
||||||
|
tertiary-fixed: '#87f3ff'
|
||||||
|
tertiary-fixed-dim: '#59d8e5'
|
||||||
|
on-tertiary-fixed: '#001f23'
|
||||||
|
on-tertiary-fixed-variant: '#004f55'
|
||||||
|
background: '#f9f9fc'
|
||||||
|
on-background: '#1a1c1e'
|
||||||
|
surface-variant: '#e2e2e5'
|
||||||
|
ai-surface: '#F5F3FF'
|
||||||
|
status-safe: '#2ECC71'
|
||||||
|
status-warning: '#F1C40F'
|
||||||
|
status-alert: '#E74C3C'
|
||||||
|
surface-muted: '#F8FAFC'
|
||||||
|
typography:
|
||||||
|
display-lg:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 48px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
letterSpacing: -0.02em
|
||||||
|
display-lg-mobile:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 32px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
headline-lg:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 32px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.3'
|
||||||
|
headline-md:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 24px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.4'
|
||||||
|
body-lg:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 18px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.6'
|
||||||
|
body-md:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 16px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.6'
|
||||||
|
body-sm:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 14px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.5'
|
||||||
|
label-md:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 14px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1'
|
||||||
|
letterSpacing: 0.05em
|
||||||
|
code-sm:
|
||||||
|
fontFamily: Courier Prime
|
||||||
|
fontSize: 13px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.4'
|
||||||
|
rounded:
|
||||||
|
sm: 0.125rem
|
||||||
|
DEFAULT: 0.25rem
|
||||||
|
md: 0.375rem
|
||||||
|
lg: 0.5rem
|
||||||
|
xl: 0.75rem
|
||||||
|
full: 9999px
|
||||||
|
spacing:
|
||||||
|
unit: 4px
|
||||||
|
gutter: 24px
|
||||||
|
margin-mobile: 16px
|
||||||
|
margin-desktop: 48px
|
||||||
|
container-max: 1440px
|
||||||
|
---
|
||||||
|
|
||||||
|
## Brand & Style
|
||||||
|
|
||||||
|
The design system is engineered for the intersection of industrial facility management and advanced artificial intelligence. It adopts a **Corporate / Modern** aesthetic that prioritizes reliability, precision, and efficiency. The target audience includes exhibition managers, technical engineers, and corporate stakeholders who require high-density information delivery without cognitive overload.
|
||||||
|
|
||||||
|
The visual narrative balances the "stability" of traditional infrastructure management with the "intelligence" of AI integration. By utilizing a clean, structured layout with subtle technological accents, the UI evokes a sense of trustworthy authority and forward-thinking innovation. White space is used strategically to maintain clarity in complex data environments, ensuring that "human-centric" service remains at the forefront of "technology-driven" operations.
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
|
||||||
|
The palette is anchored by **Corporate Blue (#0059A6)**, representing the established heritage of KINTEX and professional facility management. This is contrasted by **AI-Accent Purple (#6D4AFF)**, which is reserved exclusively for intelligent features, automated insights, and predictive maintenance indicators.
|
||||||
|
|
||||||
|
**Neutral tones** are predominantly cool grays to maintain a technical feel. Surface colors utilize a tiered approach: white for primary cards, and `surface-muted` for background grouping. The `ai-surface` is a very subtle purple tint used to highlight dashboard sections or components that are actively powered by AI, providing a clear visual cue for "smart" versus "manual" data.
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
The typography system relies on **Hanken Grotesk** to provide a sharp, contemporary, and highly legible experience across both digital interfaces and technical reports. For Korean text, **Pretendard** is the designated fallback, ensuring consistent weights and optical balance.
|
||||||
|
|
||||||
|
Hierarchy is strictly enforced to manage high-density data. Headlines use a tighter letter-spacing to appear more cohesive and authoritative. Labels use all-caps and increased tracking for utility-based navigation and metadata tags. For logs and technical ID strings, a monospaced font is utilized to differentiate system data from user-readable content.
|
||||||
|
|
||||||
|
## Layout & Spacing
|
||||||
|
|
||||||
|
This design system employs a **Fixed Grid** model for desktop, centered within a 1440px container to ensure readability of data tables and management dashboards. A 12-column grid is standard, allowing for flexible layouts of 2, 3, 4, or 6 units.
|
||||||
|
|
||||||
|
For exhibition management tasks, a **High-Density** spacing rhythm is utilized (4px base unit).
|
||||||
|
- **Desktop:** 24px gutters with 48px page margins.
|
||||||
|
- **Tablet:** 16px gutters with 32px page margins.
|
||||||
|
- **Mobile:** 12px gutters with 16px page margins.
|
||||||
|
|
||||||
|
Content reflows from multi-column grids to single-column stacks on mobile, with secondary navigation moving to a bottom-tab bar or a simplified "hamburger" menu to maximize vertical screen real estate for data visualization.
|
||||||
|
|
||||||
|
## Elevation & Depth
|
||||||
|
|
||||||
|
Visual hierarchy is established through **Tonal Layers** and **Low-Contrast Outlines** rather than heavy shadows, maintaining a professional and clean "B2B dashboard" feel.
|
||||||
|
|
||||||
|
- **Level 0 (Surface):** The main background color.
|
||||||
|
- **Level 1 (Cards):** Raised using a 1px border (#E2E8F0) or a very soft, diffused shadow (0px 4px 12px, 4% opacity).
|
||||||
|
- **Level 2 (Active/Overlays):** Used for modals and dropdowns, featuring a slightly more pronounced shadow and a backdrop blur (8px) to separate the element from the dense data behind it.
|
||||||
|
|
||||||
|
AI-specific components may use a subtle purple outer-glow (tinted shadow) to indicate an active processing state or a high-confidence recommendation.
|
||||||
|
|
||||||
|
## Shapes
|
||||||
|
|
||||||
|
The shape language is **Soft**, utilizing small radii to maintain a disciplined, architectural feel.
|
||||||
|
- **Standard elements** (Buttons, Inputs, Cards): 0.25rem (4px).
|
||||||
|
- **Large containers** (Section blocks): 0.5rem (8px).
|
||||||
|
- **Interactive Tags/Chips:** May use a pill-shape for high-contrast status indicators, but structural components must remain geometric.
|
||||||
|
|
||||||
|
This minimal roundedness reflects the industrial nature of KINTEX while softening the edges for a modern software experience.
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
### Buttons
|
||||||
|
Primary buttons use the Corporate Blue. AI-action buttons use the Purple accent. Both feature a subtle 1px inset border on hover to provide tactile feedback. Text is always semi-bold Hanken Grotesk.
|
||||||
|
|
||||||
|
### Input Fields
|
||||||
|
Inputs utilize a 1px border-bottom as the primary visual marker in high-density forms, or a full 4px rounded box in standard layouts. The focus state uses a 2px Corporate Blue border.
|
||||||
|
|
||||||
|
### Cards
|
||||||
|
Cards are the primary container for data. They must feature a clear "Header" section with 16px padding, separated by a 1px divider from the "Content" area. AI-powered cards include a left-hand purple border accent (4px width).
|
||||||
|
|
||||||
|
### Chips & Status Indicators
|
||||||
|
Used for "Safe", "Warning", or "Alert" status. They are small, high-density elements with a background-tinted version of the status color and dark-text for accessibility.
|
||||||
|
|
||||||
|
### Data Lists
|
||||||
|
Lists must support high-density viewing. Row heights are kept at 40px for desktop with a subtle hover state (#F1F5F9) to help the user track information across horizontal planes.
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
# 킨텍스(KINTEX) AI 시스템 개발 기획안
|
||||||
|
|
||||||
|
## 1. 개요
|
||||||
|
본 기획안은 대한민국 최대 전시 컨벤션 센터인 킨텍스의 디지털 전환을 가속화하고, AI 기술을 통해 방문객 경험을 혁신하며 운영 효율성을 극대화하기 위한 'KINTEX AI Intelligence System' 구축을 제안합니다.
|
||||||
|
|
||||||
|
## 2. 핵심 목표
|
||||||
|
- **방문객 경험 혁신**: 개인화된 추천 및 실시간 안내 서비스 제공
|
||||||
|
- **운영 효율화**: 데이터 기반의 전시장 운영 및 혼잡도 관리
|
||||||
|
- **전시 마케팅 고도화**: 전시 주최자 및 참가 업체를 위한 맞춤형 매칭 및 분석 리포트 제공
|
||||||
|
|
||||||
|
## 3. 주요 AI 시스템 기능 제안
|
||||||
|
|
||||||
|
### A. 스마트 방문객 가이드 (AI Concierge)
|
||||||
|
- **개인화된 전시 일정 추천**: 방문객의 관심 분야 및 과거 방문 이력을 분석하여 맞춤형 전시 및 세션 추천
|
||||||
|
- **실시간 다국어 챗봇/보이스봇**: 위치 안내, 부대시설 정보, 주차 정보 등을 다국어로 실시간 응대
|
||||||
|
- **AR 기반 실내 내비게이션**: 대규모 전시장 내에서 목적지(부스, 편의시설)까지의 최적 경로 안내
|
||||||
|
|
||||||
|
### B. 지능형 전시장 관리 (Smart Hall Operations)
|
||||||
|
- **AI 혼잡도 분석 및 예측**: CCTV 데이터를 활용한 실시간 인파 밀집도 분석 및 위험 구역 사전 경고
|
||||||
|
- **에너지 최적화 시스템**: 전시장 내 인원 분포에 따른 조명 및 냉난방 자동 최적 제어
|
||||||
|
- **주차 수요 예측**: 실시간 주차 상황 데이터와 행사 일정을 연계하여 주차 공간 최적 배정 및 안내
|
||||||
|
|
||||||
|
### C. 비즈니스 매칭 및 데이터 분석 (Business Intelligence)
|
||||||
|
- **AI 비즈니스 매칭**: 전시 주최자와 잠재적 참가 업체, 혹은 참가 업체와 바이어 간의 최적 매칭 제안
|
||||||
|
- **성과 분석 리포트**: 부스별 방문자 수, 체류 시간, 유입 경로 등을 분석하여 참가 업체에 제공
|
||||||
|
- **전시회 트렌드 분석**: 글로벌 전시 트렌드 데이터를 분석하여 신규 기획 전시 테마 제안
|
||||||
|
|
||||||
|
## 4. 시스템 아키텍처 (Harness) 제안
|
||||||
|
- **Data Lake**: 웹사이트 로그, 현장 센서 데이터, 외부 트렌드 데이터를 통합 관리
|
||||||
|
- **AI Model Layer**: 자연어 처리(LLM), 컴퓨터 비전(CCTV 분석), 예측 모델(주차/에너지) 탑재
|
||||||
|
- **API Gateway**: 모바일 앱, 웹사이트, 키오스크 등 다양한 채널에 AI 기능 공급
|
||||||
|
|
||||||
|
## 5. 기대 효과
|
||||||
|
- 방문객 만족도 제고 및 체류 시간 증대
|
||||||
|
- 운영 비용 절감 및 인력 운용 효율화
|
||||||
|
- 전시 데이터 자산화를 통한 새로운 비즈니스 모델 창출
|
||||||
181
stitch_kintex_ai_system_architect/kintex_nexus/DESIGN.md
Normal file
181
stitch_kintex_ai_system_architect/kintex_nexus/DESIGN.md
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
---
|
||||||
|
name: Kintex Nexus
|
||||||
|
colors:
|
||||||
|
surface: '#f8f9fa'
|
||||||
|
surface-dim: '#d9dadb'
|
||||||
|
surface-bright: '#f8f9fa'
|
||||||
|
surface-container-lowest: '#ffffff'
|
||||||
|
surface-container-low: '#f3f4f5'
|
||||||
|
surface-container: '#edeeef'
|
||||||
|
surface-container-high: '#e7e8e9'
|
||||||
|
surface-container-highest: '#e1e3e4'
|
||||||
|
on-surface: '#191c1d'
|
||||||
|
on-surface-variant: '#424751'
|
||||||
|
inverse-surface: '#2e3132'
|
||||||
|
inverse-on-surface: '#f0f1f2'
|
||||||
|
outline: '#727782'
|
||||||
|
outline-variant: '#c2c6d3'
|
||||||
|
surface-tint: '#115fac'
|
||||||
|
primary: '#00427d'
|
||||||
|
on-primary: '#ffffff'
|
||||||
|
primary-container: '#0059a6'
|
||||||
|
on-primary-container: '#b6d1ff'
|
||||||
|
inverse-primary: '#a6c8ff'
|
||||||
|
secondary: '#39608d'
|
||||||
|
on-secondary: '#ffffff'
|
||||||
|
secondary-container: '#a6ccff'
|
||||||
|
on-secondary-container: '#2e5682'
|
||||||
|
tertiary: '#8a0002'
|
||||||
|
on-tertiary: '#ffffff'
|
||||||
|
tertiary-container: '#b60004'
|
||||||
|
on-tertiary-container: '#ffc1b8'
|
||||||
|
error: '#ba1a1a'
|
||||||
|
on-error: '#ffffff'
|
||||||
|
error-container: '#ffdad6'
|
||||||
|
on-error-container: '#93000a'
|
||||||
|
primary-fixed: '#d5e3ff'
|
||||||
|
primary-fixed-dim: '#a6c8ff'
|
||||||
|
on-primary-fixed: '#001c3b'
|
||||||
|
on-primary-fixed-variant: '#004786'
|
||||||
|
secondary-fixed: '#d2e4ff'
|
||||||
|
secondary-fixed-dim: '#a3c9fc'
|
||||||
|
on-secondary-fixed: '#001c37'
|
||||||
|
on-secondary-fixed-variant: '#1e4974'
|
||||||
|
tertiary-fixed: '#ffdad5'
|
||||||
|
tertiary-fixed-dim: '#ffb4a9'
|
||||||
|
on-tertiary-fixed: '#410000'
|
||||||
|
on-tertiary-fixed-variant: '#930002'
|
||||||
|
background: '#f8f9fa'
|
||||||
|
on-background: '#191c1d'
|
||||||
|
surface-variant: '#e1e3e4'
|
||||||
|
surface-border: '#E5E7EB'
|
||||||
|
status-active: '#10B981'
|
||||||
|
status-pending: '#F59E0B'
|
||||||
|
table-header: '#F1F5F9'
|
||||||
|
typography:
|
||||||
|
headline-lg:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 30px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: 38px
|
||||||
|
letterSpacing: -0.02em
|
||||||
|
headline-lg-mobile:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 24px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: 32px
|
||||||
|
headline-md:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 20px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: 28px
|
||||||
|
body-lg:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 16px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: 24px
|
||||||
|
body-md:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 14px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: 20px
|
||||||
|
body-sm:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 13px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: 18px
|
||||||
|
label-md:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 12px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: 16px
|
||||||
|
letterSpacing: 0.05em
|
||||||
|
mono-data:
|
||||||
|
fontFamily: jetbrainsMono
|
||||||
|
fontSize: 13px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: 18px
|
||||||
|
rounded:
|
||||||
|
sm: 0.125rem
|
||||||
|
DEFAULT: 0.25rem
|
||||||
|
md: 0.375rem
|
||||||
|
lg: 0.5rem
|
||||||
|
xl: 0.75rem
|
||||||
|
full: 9999px
|
||||||
|
spacing:
|
||||||
|
container-max: 1440px
|
||||||
|
margin-desktop: 32px
|
||||||
|
margin-mobile: 16px
|
||||||
|
gutter: 24px
|
||||||
|
stack-sm: 8px
|
||||||
|
stack-md: 16px
|
||||||
|
stack-lg: 24px
|
||||||
|
---
|
||||||
|
|
||||||
|
## Brand & Style
|
||||||
|
|
||||||
|
The design system is engineered for the high-density requirements of exhibition management and administrative oversight. It targets professional operators and event organizers who require a high degree of "information scent" and clarity.
|
||||||
|
|
||||||
|
The aesthetic follows a **Corporate / Modern** movement, prioritizing structural integrity and functional density over decorative flourishes. It utilizes a balanced combination of high-density data visualization and clear, hierarchical navigation. The UI evokes a sense of reliability and institutional authority, reflecting the physical scale of the KINTEX venue. The layout is systematic, utilizing a clean "dashboard-first" philosophy where every pixel serves a purpose in decision-making and logistics management.
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
|
||||||
|
The palette is anchored by **Corporate Blue (#0059A6)**, representing the established brand identity and used for primary actions, navigation headers, and brand-critical elements. A **Secondary Blue (#6389B8)** acts as a supportive hue for data visualization and secondary interactive states, bridging the gap between brand identity and UI utility.
|
||||||
|
|
||||||
|
**Tertiary Red (#E32219)** is reserved strictly for high-urgency alerts, error states, and critical "Delete" or "Cancel" actions to ensure it maintains its semantic impact. The neutral foundation relies on **Light Gray (#F8F9FA)** for background surfaces to reduce eye strain during long working sessions, with darker grays used for structural borders and high-contrast text.
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
This design system uses **Hanken Grotesk** for its exceptional legibility in dense administrative interfaces. It provides a sharp, contemporary feel that aligns with the "Pretendard" aesthetic requested while offering superior geometric balance for international stakeholders.
|
||||||
|
|
||||||
|
- **Headlines:** Use Bold weights for section titles to establish a strong visual anchor.
|
||||||
|
- **Body:** Standard body text is set at 14px (md) to maximize information density without compromising readability.
|
||||||
|
- **Data Sets:** For numerical values, ID strings, or technical logs within tables, the **JetBrains Mono** font (mono-data) is recommended to ensure clear distinction between characters and aligned columns.
|
||||||
|
- **Labels:** Small, uppercase labels with increased letter spacing are used for table headers and category tags to differentiate them from interactive content.
|
||||||
|
|
||||||
|
## Layout & Spacing
|
||||||
|
|
||||||
|
The layout utilizes a **Fixed-Fluid Hybrid Grid**. The main sidebar navigation is fixed (240px), while the content area expands to a maximum of 1440px to ensure data tables don't become excessively wide and difficult to scan horizontally.
|
||||||
|
|
||||||
|
A **base-8 spacing system** is strictly enforced to maintain rhythmic consistency.
|
||||||
|
- **Desktop:** 12-column grid with 24px gutters.
|
||||||
|
- **Tablet:** 8-column grid with 20px gutters.
|
||||||
|
- **Mobile:** 4-column grid with 16px margins.
|
||||||
|
|
||||||
|
Content should reflow into single-column stacks on mobile devices. For complex data tables, horizontal scrolling is the preferred pattern over hidden columns to ensure all administrative data remains accessible.
|
||||||
|
|
||||||
|
## Elevation & Depth
|
||||||
|
|
||||||
|
To maintain a "Professional & Functional" aesthetic, this design system avoids heavy shadows. Depth is primarily conveyed through **Tonal Layers** and **Low-Contrast Outlines**.
|
||||||
|
|
||||||
|
- **Level 0 (Base):** Light Gray background (#F8F9FA).
|
||||||
|
- **Level 1 (Cards/Containers):** White background with a 1px border (#E5E7EB). No shadow.
|
||||||
|
- **Level 2 (Modals/Dropdowns):** White background with a subtle, tight ambient shadow (Blur 8px, Y 4px, Opacity 5%) to indicate temporary interaction layers.
|
||||||
|
- **Interactive Elements:** Buttons and inputs use a flat design with a 1px solid stroke. Primary buttons use a solid fill to pop against the outlined secondary elements.
|
||||||
|
|
||||||
|
## Shapes
|
||||||
|
|
||||||
|
The design system employs a **Soft (0.25rem)** roundedness level. This subtle rounding softens the industrial nature of the dashboard while maintaining a professional, structured appearance.
|
||||||
|
|
||||||
|
- **Inputs and Buttons:** 4px (0.25rem) radius.
|
||||||
|
- **Cards and Containers:** 8px (0.5rem) radius.
|
||||||
|
- **Status Tags:** Fully rounded (pill) to clearly distinguish them from interactive buttons or input fields.
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
### Data Tables
|
||||||
|
Tables are the heart of the system. Use a "Zebra Stripe" pattern (alternate rows in #F9FAFB) for long datasets. Headers must be "Sticky" during scroll and styled with a light gray background and `label-md` typography.
|
||||||
|
|
||||||
|
### Analytics Charts
|
||||||
|
Use a minimalist approach. Grid lines should be faint (#F3F4F6). Primary data series should use Corporate Blue (#0059A6), with secondary series in #6389B8 and #94A3B8. Avoid 3D effects.
|
||||||
|
|
||||||
|
### Status Cards
|
||||||
|
Exhibition status cards should feature a prominent "Current State" indicator (e.g., "Active," "Completed," "Scheduled") using semantic background tints and dark text for accessibility.
|
||||||
|
|
||||||
|
### Buttons
|
||||||
|
- **Primary:** Solid #0059A6 with white text.
|
||||||
|
- **Secondary:** White background with #E5E7EB border and #374151 text.
|
||||||
|
- **Destructive:** Solid #E32219 for critical admin actions.
|
||||||
|
|
||||||
|
### Administrative Controls
|
||||||
|
Toggle switches should be used for binary states (e.g., "Public Visibility"). Checkboxes are preferred for multi-select actions in tables. Input fields should have a distinct focus state using a 2px Corporate Blue border.
|
||||||
@ -0,0 +1,329 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>AI 배치안 비교 - KINTEX AI</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>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background font-body-base min-h-screen flex selection:bg-primary selection:text-on-primary">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
|
||||||
|
<div class="px-container-padding mb-stack-lg">
|
||||||
|
<span class="text-headline-md font-headline-md font-bold text-primary block">KINTEX AI</span>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant uppercase tracking-wider block mt-1">Exhibition Manager</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto flex flex-col gap-1 px-3">
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px]">dashboard</span>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-primary font-bold border-r-4 border-primary bg-primary-container/10 text-label-md font-label-md" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px] text-primary">architecture</span>
|
||||||
|
Floor Plan Studio
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px]">groups</span>
|
||||||
|
Exhibitor Management
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px]">assignment</span>
|
||||||
|
Documents
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px]">payments</span>
|
||||||
|
Settlement
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto flex flex-col gap-1 px-3 pt-4 border-t border-outline-variant/30">
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px]">settings</span>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors text-label-md font-label-md" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px]">help</span>
|
||||||
|
Support
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<div class="ml-60 flex-1 flex flex-col min-h-screen">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="docked full-width top-0 sticky z-40 bg-surface flex justify-between items-center w-full px-container-padding h-16 border-b border-outline-variant">
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<span class="text-title-sm font-title-sm font-bold text-on-surface">Exhibition Studio</span>
|
||||||
|
<nav class="hidden md:flex gap-4">
|
||||||
|
<a class="text-primary border-b-2 border-primary pb-base text-label-md font-label-md" href="#">Projects</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-primary transition-colors text-label-md font-label-md" href="#">Analytics</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="w-8 h-8 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-8 h-8 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="h-4 w-px bg-outline-variant mx-1"></div>
|
||||||
|
<span class="bg-surface-container-high text-on-surface px-2 py-1 rounded text-label-xs font-label-xs font-bold border border-outline-variant">D-31</span>
|
||||||
|
<button class="bg-primary text-on-primary px-4 py-2 rounded hover:bg-primary-container transition-colors text-label-md font-label-md shadow-sm">
|
||||||
|
Publish Layout
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Canvas / Content -->
|
||||||
|
<main class="flex-1 p-container-padding bg-background overflow-x-auto">
|
||||||
|
<div class="max-w-[1200px] mx-auto flex flex-col gap-stack-lg">
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="flex items-end justify-between border-b border-outline-variant pb-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-display-lg font-display-lg text-on-surface mb-2">AI 배치안 비교</h1>
|
||||||
|
<p class="text-body-base font-body-base text-on-surface-variant flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">info</span>
|
||||||
|
조건: 목표 510부스 · 프리미엄 15% · 무대 1개소
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="border border-primary text-primary px-4 py-2 rounded hover:bg-primary/5 transition-colors text-label-md font-label-md bg-surface">
|
||||||
|
조건 수정
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Comparison Cards (Bento style grid) -->
|
||||||
|
<div class="grid grid-cols-3 gap-gutter">
|
||||||
|
<!-- Option A -->
|
||||||
|
<label class="group relative bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden cursor-pointer hover:border-primary transition-all duration-200">
|
||||||
|
<input class="peer sr-only" name="layout_option" type="radio" value="A"/>
|
||||||
|
<div class="absolute inset-0 border-2 border-transparent peer-checked:border-primary rounded-xl pointer-events-none z-10 transition-colors"></div>
|
||||||
|
<div class="absolute top-4 right-4 z-20 opacity-0 peer-checked:opacity-100 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-weight="fill">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<!-- Image Container -->
|
||||||
|
<div class="relative h-48 w-full bg-surface-container-high overflow-hidden border-b border-outline-variant">
|
||||||
|
<div class="absolute top-2 left-2 z-10 bg-secondary-container text-on-secondary border border-secondary-container/50 px-2 py-1 rounded text-label-xs font-label-xs flex items-center gap-1 shadow-sm">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">auto_awesome</span> AI 생성
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none z-0 transform -rotate-12">
|
||||||
|
<span class="text-headline-md font-headline-md text-on-surface-variant tracking-widest uppercase">AI 생성 예상 이미지</span>
|
||||||
|
</div>
|
||||||
|
<img alt="AI generated isometric rendering of exhibition hall layout A" class="w-full h-full object-cover mix-blend-multiply opacity-80 group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida/AP1WRLv4g1wEc50g6SV874dKYhY3pekuOO8DpFUuNZ11z4Q9S02vd7fQvZ9QsCAvdeYFBXOYbahll5cJgd62hawt4xdYf0e8xkbeVizuekpfrV9gYnvxdbuMzdxHNS3Fezbi-jMX1GlgJemL6ifKvATHzgW0NdON_MkV1Y95qXcjt5RTHo07vmXj6OXmgL_ltfpfRYzAfGuClIQDY612hRpS_RVRkeLDV0RFHgjGIR3Y_xNhhQmNt2StB4C7Rw"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex flex-col gap-3">
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface flex items-center justify-between">
|
||||||
|
배치안 A
|
||||||
|
</h3>
|
||||||
|
<div class="flex flex-col gap-2 text-body-sm font-body-sm text-on-surface-variant">
|
||||||
|
<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
|
||||||
|
<span>총 부스</span>
|
||||||
|
<span class="font-bold text-on-surface">512개</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
|
||||||
|
<span>판매면적</span>
|
||||||
|
<span class="font-bold text-on-surface">4,450㎡</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
|
||||||
|
<span>최소 통로폭</span>
|
||||||
|
<span class="font-bold text-on-surface">3.2m</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-1">
|
||||||
|
<span>위반사항</span>
|
||||||
|
<span class="text-tertiary-container font-bold flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">check</span> 0건</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<!-- Option B -->
|
||||||
|
<label class="group relative bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden cursor-pointer hover:border-primary transition-all duration-200">
|
||||||
|
<input checked="" class="peer sr-only" name="layout_option" type="radio" value="B"/>
|
||||||
|
<div class="absolute inset-0 border-2 border-transparent peer-checked:border-primary rounded-xl pointer-events-none z-10 transition-colors bg-primary/5"></div>
|
||||||
|
<div class="absolute top-4 right-4 z-20 opacity-0 peer-checked:opacity-100 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<!-- Image Container -->
|
||||||
|
<div class="relative h-48 w-full bg-surface-container-high overflow-hidden border-b border-outline-variant">
|
||||||
|
<div class="absolute top-2 left-2 z-10 bg-secondary-container text-on-secondary border border-secondary-container/50 px-2 py-1 rounded text-label-xs font-label-xs flex items-center gap-1 shadow-sm">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">auto_awesome</span> AI 생성
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none z-0 transform -rotate-12">
|
||||||
|
<span class="text-headline-md font-headline-md text-on-surface-variant tracking-widest uppercase">AI 생성 예상 이미지</span>
|
||||||
|
</div>
|
||||||
|
<!-- Using CSS pattern to simulate a different layout variation -->
|
||||||
|
<div class="w-full h-full bg-[linear-gradient(45deg,transparent_25%,rgba(0,102,179,0.1)_50%,transparent_75%,transparent_100%)] bg-[length:20px_20px]">
|
||||||
|
<img alt="AI generated isometric rendering of exhibition hall layout B" class="w-full h-full object-cover mix-blend-overlay opacity-90 group-hover:scale-105 transition-transform duration-500 hue-rotate-15" src="https://lh3.googleusercontent.com/aida/AP1WRLv4g1wEc50g6SV874dKYhY3pekuOO8DpFUuNZ11z4Q9S02vd7fQvZ9QsCAvdeYFBXOYbahll5cJgd62hawt4xdYf0e8xkbeVizuekpfrV9gYnvxdbuMzdxHNS3Fezbi-jMX1GlgJemL6ifKvATHzgW0NdON_MkV1Y95qXcjt5RTHo07vmXj6OXmgL_ltfpfRYzAfGuClIQDY612hRpS_RVRkeLDV0RFHgjGIR3Y_xNhhQmNt2StB4C7Rw"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex flex-col gap-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-1 h-4 bg-secondary-container rounded-full"></div>
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface">배치안 B</h3>
|
||||||
|
<span class="ml-auto bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded text-[10px] font-bold">추천</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 text-body-sm font-body-sm text-on-surface-variant">
|
||||||
|
<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
|
||||||
|
<span>총 부스</span>
|
||||||
|
<span class="font-bold text-on-surface">510개</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
|
||||||
|
<span>판매면적</span>
|
||||||
|
<span class="font-bold text-on-surface">4,420㎡</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
|
||||||
|
<span>최소 통로폭</span>
|
||||||
|
<span class="font-bold text-on-surface">3.5m</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-1">
|
||||||
|
<span>위반사항</span>
|
||||||
|
<span class="text-tertiary-container font-bold flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">check</span> 0건</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<!-- Option C -->
|
||||||
|
<label class="group relative bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden cursor-pointer hover:border-primary transition-all duration-200">
|
||||||
|
<input class="peer sr-only" name="layout_option" type="radio" value="C"/>
|
||||||
|
<div class="absolute inset-0 border-2 border-transparent peer-checked:border-primary rounded-xl pointer-events-none z-10 transition-colors"></div>
|
||||||
|
<div class="absolute top-4 right-4 z-20 opacity-0 peer-checked:opacity-100 transition-opacity">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-weight="fill">check_circle</span>
|
||||||
|
</div>
|
||||||
|
<!-- Image Container -->
|
||||||
|
<div class="relative h-48 w-full bg-surface-container-high overflow-hidden border-b border-outline-variant">
|
||||||
|
<div class="absolute top-2 left-2 z-10 bg-secondary-container text-on-secondary border border-secondary-container/50 px-2 py-1 rounded text-label-xs font-label-xs flex items-center gap-1 shadow-sm">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">auto_awesome</span> AI 생성
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none z-0 transform -rotate-12">
|
||||||
|
<span class="text-headline-md font-headline-md text-on-surface-variant tracking-widest uppercase">AI 생성 예상 이미지</span>
|
||||||
|
</div>
|
||||||
|
<img alt="AI generated isometric rendering of exhibition hall layout C" class="w-full h-full object-cover mix-blend-luminosity opacity-70 group-hover:scale-105 transition-transform duration-500 sepia-[.3]" src="https://lh3.googleusercontent.com/aida/AP1WRLv4g1wEc50g6SV874dKYhY3pekuOO8DpFUuNZ11z4Q9S02vd7fQvZ9QsCAvdeYFBXOYbahll5cJgd62hawt4xdYf0e8xkbeVizuekpfrV9gYnvxdbuMzdxHNS3Fezbi-jMX1GlgJemL6ifKvATHzgW0NdON_MkV1Y95qXcjt5RTHo07vmXj6OXmgL_ltfpfRYzAfGuClIQDY612hRpS_RVRkeLDV0RFHgjGIR3Y_xNhhQmNt2StB4C7Rw"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex flex-col gap-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-1 h-4 bg-error rounded-full"></div>
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface">배치안 C</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 text-body-sm font-body-sm text-on-surface-variant">
|
||||||
|
<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
|
||||||
|
<span>총 부스</span>
|
||||||
|
<span class="font-bold text-on-surface">525개</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
|
||||||
|
<span>판매면적</span>
|
||||||
|
<span class="font-bold text-on-surface">4,550㎡</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-1 border-b border-outline-variant/30">
|
||||||
|
<span>최소 통로폭</span>
|
||||||
|
<span class="font-bold text-error">2.8m</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-1">
|
||||||
|
<span>위반사항</span>
|
||||||
|
<span class="text-error font-bold flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">warning</span> 2건</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<!-- Action Area -->
|
||||||
|
<div class="flex justify-end pt-4 border-t border-outline-variant mt-4">
|
||||||
|
<button class="bg-primary text-on-primary px-6 py-3 rounded-lg hover:bg-primary-container transition-colors text-label-md font-label-md shadow-sm flex items-center gap-2">
|
||||||
|
이 안으로 편집 시작
|
||||||
|
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,451 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX AI 전시관리 - 로그인</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=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>
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||||
|
body {
|
||||||
|
font-family: 'Pretendard', sans-serif;
|
||||||
|
}
|
||||||
|
.bg-overlay-gradient {
|
||||||
|
background: linear-gradient(to right, rgba(0, 76, 134, 0.9) 0%, rgba(0, 76, 134, 0.7) 100%);
|
||||||
|
}
|
||||||
|
/* Hide success screen initially */
|
||||||
|
#success-screen {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background min-h-screen text-on-surface antialiased overflow-hidden">
|
||||||
|
<!-- Login Screen -->
|
||||||
|
<div class="flex min-h-screen" id="login-screen">
|
||||||
|
<!-- Left Brand Panel (55%) -->
|
||||||
|
<div class="hidden lg:flex lg:w-[55%] relative flex-col justify-end p-12 lg:p-24 bg-surface-dim" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLt7Owqk04bQHpDRgW-TOypxVfJaLrvGQkPASyNEHGKREzRPLbA3WCQeI_EPz-feK-fDR17TWVMPmQjtYDnTjXIAw_a9ctvRCW-GENeZYnEOC7qPsOdbhFyx-xS4VIDsARlepBMwyh-2lbIf85_kbEg-w0Z_r189I59Hh6nF0V5mCvUHWsQQVYY5s2jSHwa5K9U3OKeEMBBV-xB1jWziZ_5pGqizp5S5_FdYxsFmwdCD1dVUUJNkc8Hqpu8'); background-size: cover; background-position: center;">
|
||||||
|
<div class="absolute inset-0 bg-overlay-gradient z-0"></div>
|
||||||
|
<div class="relative z-10 flex flex-col gap-6 max-w-2xl">
|
||||||
|
<!-- AI Label -->
|
||||||
|
<div class="inline-flex items-center gap-2 self-start rounded-full border border-secondary-container bg-surface-container-lowest/10 px-4 py-2 backdrop-blur-sm">
|
||||||
|
<span class="material-symbols-outlined text-secondary-fixed-dim" style="font-variation-settings: 'FILL' 1;">spark</span>
|
||||||
|
<span class="text-secondary-fixed-dim text-label-md font-label-md">AI 생성 예상 이미지</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="text-on-primary text-display-lg font-display-lg leading-tight tracking-tight">
|
||||||
|
신청서를 내는 순간,<br/>
|
||||||
|
시공 후 사진을 먼저 봅니다.
|
||||||
|
</h1>
|
||||||
|
<p class="text-on-primary-container text-title-sm font-title-sm opacity-80 mt-4">
|
||||||
|
KINTEX AI 전시관리 솔루션으로 더 빠르고 정확하게 공간을 기획하세요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right Login Panel (45%) -->
|
||||||
|
<div class="flex-1 w-full lg:w-[45%] flex flex-col justify-center items-center p-8 bg-surface-container-lowest relative z-10 shadow-[-10px_0_30px_rgba(0,0,0,0.05)]">
|
||||||
|
<div class="w-full max-w-md flex flex-col gap-8">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="flex justify-center mb-8">
|
||||||
|
<img alt="KINTEX Logo" class="h-10 w-auto" src="https://lh3.googleusercontent.com/aida/AP1WRLuPIxmrE2KEEIZK1TQvP8jxtO3MkEPMwc1tVCXQeurK2ywZzqrmszTWhS-MOk7l0NlBT-fBPr7AhpqDh_Us84e3UMXjCij089BjFJFtd8hUFB4nCRvA34TPEVBBTUOI57NDo3tHcwfds6dQIDxogGQ3h7AjQhNuygBIiOTVTVUBEtlzz7vP_MViWoBmnjyisUQcYXxLs8rK6MRbhhGH4FpRm8pylR9CssnJFPS2I6dvpRX4NSTCyvpubg"/>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mb-2">
|
||||||
|
<h2 class="text-headline-md font-headline-md text-on-surface">로그인</h2>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant mt-2">KINTEX 전시 관리 시스템에 오신 것을 환영합니다.</p>
|
||||||
|
</div>
|
||||||
|
<form class="flex flex-col gap-6" id="login-form">
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface" for="email">이메일</label>
|
||||||
|
<input class="w-full h-12 px-4 rounded border border-outline-variant bg-surface-container-lowest text-body-base font-body-base focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 transition-all outline-none" id="email" placeholder="name@company.com" required="" type="email"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<label class="text-label-md font-label-md text-on-surface" for="password">비밀번호</label>
|
||||||
|
</div>
|
||||||
|
<input class="w-full h-12 px-4 rounded border border-outline-variant bg-surface-container-lowest text-body-base font-body-base focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 transition-all outline-none" id="password" placeholder="••••••••" required="" type="password"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between mt-[-8px]">
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input class="w-4 h-4 rounded border-outline-variant text-primary-container focus:ring-primary-container cursor-pointer" type="checkbox"/>
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface-variant">이메일 기억하기</span>
|
||||||
|
</label>
|
||||||
|
<a class="text-body-sm font-body-sm text-primary-container hover:text-primary transition-colors" href="#">비밀번호 찾기</a>
|
||||||
|
</div>
|
||||||
|
<button class="w-full h-12 rounded bg-primary-container hover:bg-surface-tint text-on-primary text-title-sm font-title-sm flex items-center justify-center transition-colors" type="submit">
|
||||||
|
로그인
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-4 my-2">
|
||||||
|
<div class="h-px bg-outline-variant flex-1"></div>
|
||||||
|
<span class="text-label-md font-label-md text-outline">또는</span>
|
||||||
|
<div class="h-px bg-outline-variant flex-1"></div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full h-12 rounded border border-outline-variant bg-surface-container-lowest hover:bg-surface-container-low text-on-surface text-title-sm font-title-sm flex items-center justify-center gap-2 transition-colors" type="button">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">badge</span>
|
||||||
|
킨텍스 내부 계정으로 로그인
|
||||||
|
</button>
|
||||||
|
<div class="text-center mt-4">
|
||||||
|
<a class="text-body-sm font-body-sm text-primary-container hover:text-primary transition-colors flex items-center justify-center gap-1" href="#">
|
||||||
|
초대 코드로 참여하기
|
||||||
|
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-8 text-center w-full max-w-md">
|
||||||
|
<p class="text-label-xs font-label-xs text-outline">© 2024 KINTEX. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Dashboard Screen (Hidden initially) -->
|
||||||
|
<div class="min-h-screen bg-background flex" id="success-screen">
|
||||||
|
<!-- SideNav (Generated from JSON) -->
|
||||||
|
<nav class="bg-surface-container-low dark:bg-inverse-surface fixed left-0 top-0 h-screen w-60 border-r border-outline-variant dark:border-outline flex flex-col h-full py-container-padding z-50">
|
||||||
|
<!-- Header Brand -->
|
||||||
|
<div class="px-6 mb-8 flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-primary-container rounded flex items-center justify-center">
|
||||||
|
<span class="text-on-primary font-bold text-lg">K</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-headline-md font-headline-md font-bold text-primary dark:text-primary-fixed">KINTEX AI</h2>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Nav Links -->
|
||||||
|
<div class="flex flex-col gap-1 flex-1 px-4">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-primary dark:text-primary-fixed-dim font-bold border-r-4 border-primary dark:border-primary-fixed-dim bg-primary-container/10" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- Footer Links -->
|
||||||
|
<div class="flex flex-col gap-1 px-4 mt-auto">
|
||||||
|
<a class="flex items-center gap-3 px-4 py-2 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-3 px-4 py-2 rounded text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<div class="flex-1 ml-60 flex flex-col min-h-screen">
|
||||||
|
<!-- TopAppBar (Generated from JSON) -->
|
||||||
|
<header class="bg-surface dark:bg-surface-dim docked full-width top-0 sticky z-40 border-b border-outline-variant dark:border-outline flex justify-between items-center w-full px-container-padding h-16">
|
||||||
|
<!-- Left: Navigation Links / Search -->
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<span class="text-title-sm font-title-sm font-bold text-on-surface dark:text-inverse-on-surface hidden">Exhibition Studio</span>
|
||||||
|
<div class="flex gap-6 h-16">
|
||||||
|
<a class="flex items-center h-full text-primary dark:text-primary-fixed-dim border-b-2 border-primary dark:border-primary-fixed-dim pb-base mt-base text-label-md font-label-md" href="#">Projects</a>
|
||||||
|
<a class="flex items-center h-full text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors text-label-md font-label-md" href="#">Analytics</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right: Actions -->
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="flex items-center gap-2 mr-4">
|
||||||
|
<span class="bg-error text-on-error px-2 py-1 rounded text-label-xs font-label-xs font-bold shadow-sm">D-31</span>
|
||||||
|
<button class="bg-primary-container text-on-primary px-4 py-2 rounded text-label-md font-label-md hover:scale-105 duration-200 shadow-sm transition-transform">Publish Layout</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2 text-on-surface-variant">
|
||||||
|
<button class="p-2 rounded-full hover:bg-surface-container-high transition-colors"><span class="material-symbols-outlined">notifications</span></button>
|
||||||
|
<button class="p-2 rounded-full hover:bg-surface-container-high transition-colors"><span class="material-symbols-outlined">help</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-highest border border-outline-variant overflow-hidden ml-2 cursor-pointer">
|
||||||
|
<img alt="User Profile" class="w-full h-full object-cover" data-alt="A professional headshot of an Asian male executive wearing a dark navy suit and white shirt, smiling slightly against a neutral gray background. Soft studio lighting. High resolution, corporate aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCam5tKAOhtYTGHjfW8PoNadzZ1iThlBzibz3nAzDmAAYCLYnJuJbPVgBm9xACwgUGOmL5aIzlWmqI_pYcVXCoDZ3NUk5IDCOvefxnExEtd9i43OtzVsZ2CfAxKL2sWpW6DKXsBLpkC9E48igsuw2NaKPjcQCtaIht_3YkDGjpXxifymwkmT6Ltvx2402EFYcg6ZI_DOkKRUWmHQB7PVTe6rf8ClEBOazalQsj76WBmZie2jBdUppy7"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Dashboard Content -->
|
||||||
|
<main class="flex-1 p-8 lg:p-12 overflow-y-auto">
|
||||||
|
<div class="max-w-7xl mx-auto flex flex-col gap-8">
|
||||||
|
<div class="flex justify-between items-end">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-display-lg font-display-lg text-on-surface mb-2">My Projects</h1>
|
||||||
|
<p class="text-body-base font-body-base text-on-surface-variant">Manage your upcoming exhibitions and floor plans.</p>
|
||||||
|
</div>
|
||||||
|
<button class="bg-surface-container-lowest border border-outline-variant px-4 py-2 rounded text-label-md font-label-md text-on-surface hover:bg-surface-container-low transition-colors flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">filter_list</span>
|
||||||
|
Filter
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Bento Grid for Projects -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Project Card 1: Smart Factory (Highlighted/Active) -->
|
||||||
|
<div class="group bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col hover:shadow-lg transition-all duration-300 relative">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-secondary-container z-10"></div>
|
||||||
|
<div class="h-40 bg-surface-container-high relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center group-hover:scale-105 transition-transform duration-500" data-alt="A futuristic, high-tech isometric 3D render of an exhibition hall floor plan focused on smart factory technology. The layout features robotic arms, automated assembly lines, and glowing blue and purple data streams connecting booths. High contrast, clean modern industrial aesthetic." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCdQmPmQS7CQd7oiETmqAIOav2PV7HV1OatN4BOQ3qI0GxX6xRxYcSQ9_UvJt4DR_EK3JvDFDJWfOJAj6b1_tL029oZW37ZXTbSLhKhd470r-aBdvC8E_wZwYOkbXRTyiFdlUq-NdQTEY6LAzKPw9HrgwRZSSBUHwCNIaohTxAWT60fKE9A38hRaa6QX_NmNswuWKzPgySFpTnD25rXFsvBg4Ms5M4veiAZFrZttKXqEQDKg4S2iC0X')"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||||
|
<div class="absolute bottom-4 left-4 right-4 flex justify-between items-end">
|
||||||
|
<span class="bg-error text-on-error px-2 py-1 rounded text-label-xs font-label-xs font-bold shadow-sm">D-31</span>
|
||||||
|
<div class="inline-flex items-center gap-1 bg-secondary-container/90 text-on-primary px-2 py-1 rounded backdrop-blur-sm">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">spark</span>
|
||||||
|
<span class="text-label-xs font-label-xs">AI Optimized</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 flex flex-col gap-4 flex-1">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface mb-1">2026 스마트팩토리 코리아</h3>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">calendar_today</span>
|
||||||
|
2026.10.15 - 10.18
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-body-sm font-body-sm text-on-surface-variant mt-auto">
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">storefront</span> 142 Booths</span>
|
||||||
|
<span class="flex items-center gap-1 text-primary-container font-semibold">Open Studio <span class="material-symbols-outlined text-[16px]">arrow_forward</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Project Card 2: AI Expo -->
|
||||||
|
<div class="group bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col hover:shadow-lg transition-all duration-300">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary-container z-10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<div class="h-40 bg-surface-container-high relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center group-hover:scale-105 transition-transform duration-500" data-alt="A clean, minimalist isometric 3D render of a software and AI exhibition hall. Features sleek white booths with glowing cyan screens, networking lounges, and scattered digital avatars. Bright, light-mode corporate tech aesthetic with soft shadows." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAHyqkR0PadSsl5X2XMC678qAb9cTpBSh9fd7EfLkOB6MtpMoqgba4DdcXYRfU9TnQd1GHkwOKa0YvTcMq7THJIF3LWVhsZ6cCvTcKhB0FQebQrjopDR0s_BbOINaq_kmDNdJepJHJMz3EQdt_yvelhErd1lZu2kgNAg48SkpjzO-LW_8K3us6dMNCz9A7NYmDJFzRlE8cN3rPWnn5Sd3ipTMKT3hGBLw927Dn1HgPdvfxXQo8geNwN')"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||||
|
<div class="absolute bottom-4 left-4 right-4 flex justify-between items-end">
|
||||||
|
<span class="bg-surface-dim text-on-surface px-2 py-1 rounded text-label-xs font-label-xs font-bold">D-120</span>
|
||||||
|
<div class="inline-flex items-center gap-1 bg-primary-container/90 text-on-primary px-2 py-1 rounded backdrop-blur-sm">
|
||||||
|
<span class="text-label-xs font-label-xs">In Review</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 flex flex-col gap-4 flex-1">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface mb-1">Global AI Expo 2026</h3>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">calendar_today</span>
|
||||||
|
2026.12.01 - 12.04
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-body-sm font-body-sm text-on-surface-variant mt-auto">
|
||||||
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">storefront</span> 86 Booths</span>
|
||||||
|
<span class="flex items-center gap-1 group-hover:text-primary-container transition-colors font-semibold">Open Studio <span class="material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-100 transition-opacity">arrow_forward</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Create New Card -->
|
||||||
|
<div class="bg-surface-container-lowest border-2 border-dashed border-outline-variant rounded-xl flex flex-col items-center justify-center p-8 hover:border-primary-container hover:bg-surface-container-low transition-all duration-300 cursor-pointer min-h-[280px]">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center mb-4 text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[24px]">add</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface mb-1">Create New Project</h3>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant text-center max-w-[200px]">Start a new exhibition floor plan with AI assistance.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
// Simple script to handle login transition for demonstration
|
||||||
|
document.getElementById('login-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Fade out login screen
|
||||||
|
const loginScreen = document.getElementById('login-screen');
|
||||||
|
loginScreen.style.opacity = '0';
|
||||||
|
loginScreen.style.transition = 'opacity 0.5s ease';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
loginScreen.style.display = 'none';
|
||||||
|
|
||||||
|
// Show success screen (dashboard)
|
||||||
|
const successScreen = document.getElementById('success-screen');
|
||||||
|
successScreen.style.display = 'flex';
|
||||||
|
|
||||||
|
// Trigger reflow
|
||||||
|
void successScreen.offsetWidth;
|
||||||
|
|
||||||
|
successScreen.style.opacity = '0';
|
||||||
|
successScreen.style.animation = 'fadeIn 0.5s ease forwards';
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add CSS keyframes for fade in
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.innerHTML = `
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,300 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX AI - Approval Queue</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<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"/>
|
||||||
|
<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>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background font-body-base antialiased flex w-full min-h-screen">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
|
||||||
|
<div class="px-gutter mb-stack-lg flex flex-col gap-base">
|
||||||
|
<span class="text-headline-md font-headline-md font-bold text-primary">KINTEX AI</span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">Exhibition Manager</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col gap-base px-sm">
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
<!-- Active Tab -->
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-primary font-bold border-l-4 border-primary bg-primary-container/10 transition-all duration-200 opacity-90 rounded-r-full mr-gutter" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto flex flex-col gap-base px-sm pt-stack-md border-t border-outline-variant/30">
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-r-full mr-gutter" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<div class="ml-60 flex-1 flex flex-col h-screen overflow-hidden">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="bg-surface border-b border-outline-variant px-container-padding py-stack-md flex flex-col gap-stack-md z-40 sticky top-0">
|
||||||
|
<div class="flex justify-between items-center w-full">
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<h1 class="text-title-sm font-title-sm font-bold text-on-surface">도면 및 서류 검수 대기열</h1>
|
||||||
|
<div class="flex gap-base">
|
||||||
|
<button class="px-stack-md py-base border border-outline-variant rounded-full text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high">홀6</button>
|
||||||
|
<button class="px-stack-md py-base border border-primary bg-primary-container/10 rounded-full text-label-md font-label-md text-primary font-bold">홀7</button>
|
||||||
|
<button class="px-stack-md py-base border border-outline-variant rounded-full text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high">홀8</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-md">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-stack-sm top-1/2 -translate-y-1/2 text-on-surface-variant" style="font-size: 18px;">search</span>
|
||||||
|
<input class="pl-8 pr-stack-sm py-base border border-outline-variant rounded bg-surface-container-lowest text-body-sm font-body-sm focus:border-primary focus:ring-2 focus:ring-primary-container/30 w-64" placeholder="검색어 입력..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<img class="w-8 h-8 rounded bg-surface-container-high object-cover" data-alt="A small square profile picture of a Korean professional venue manager wearing glasses, modern corporate lighting, light mode UI context, clean background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_C7mCG6UhnWkDKA2GzDjoI6WuRgnBbXoL8O8m-nkGFrz2FoEG_Xg4BB5kIPTcl59NbD7Z1SunU55qBfjsspQBMtp2UEZw-0awvXD3lDUB64z_L9fdiDPvBj15OxY9qBLfw_wZbny9G7oxeLZXbgjXPcqbEqvBMbV1lf55RUP1ijhUuOwq5vibeu9mtP32ir0jdaLPW_Du89TK1r53bkAwFJWmLgQpmoHewMCWxSvgC43VqFeR4IAN"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-stack-md">
|
||||||
|
<div class="flex items-center gap-stack-sm px-stack-md py-stack-sm bg-surface-container-lowest border border-outline-variant rounded-lg">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">검수 대기</span>
|
||||||
|
<span class="text-title-sm font-title-sm text-on-surface">23</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-sm px-stack-md py-stack-sm bg-surface-container-lowest border border-outline-variant rounded-lg">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">오늘 마감</span>
|
||||||
|
<span class="text-title-sm font-title-sm text-primary">5</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-sm px-stack-md py-stack-sm bg-error-container/20 border border-error/30 rounded-lg">
|
||||||
|
<span class="material-symbols-outlined text-error" style="font-size: 18px;">warning</span>
|
||||||
|
<span class="text-label-md font-label-md text-error">AI 차단 플래그</span>
|
||||||
|
<span class="text-title-sm font-title-sm text-error font-bold">4</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Content Layout -->
|
||||||
|
<main class="flex-1 flex overflow-hidden bg-background">
|
||||||
|
<!-- Data Table Section -->
|
||||||
|
<section class="flex-1 overflow-auto p-container-padding flex flex-col gap-stack-md">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<h2 class="text-title-sm font-title-sm text-on-surface">제출 서류 목록 (홀7)</h2>
|
||||||
|
<button class="bg-primary text-on-primary px-stack-lg py-stack-sm rounded hover:bg-surface-tint transition-colors text-label-md font-label-md flex items-center gap-base">
|
||||||
|
<span class="material-symbols-outlined" style="font-size: 16px;">check_circle</span>
|
||||||
|
일괄 승인
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex-1 flex flex-col">
|
||||||
|
<div class="overflow-x-auto flex-1">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead class="bg-surface-container-low border-b border-outline-variant sticky top-0">
|
||||||
|
<tr>
|
||||||
|
<th class="p-stack-sm pl-stack-md w-10"><input class="border-outline-variant rounded text-primary focus:ring-primary" type="checkbox"/></th>
|
||||||
|
<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">행사/부스</th>
|
||||||
|
<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">서류 유형</th>
|
||||||
|
<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">제출자</th>
|
||||||
|
<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">제출일</th>
|
||||||
|
<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">마감</th>
|
||||||
|
<th class="p-stack-sm text-label-md font-label-md text-secondary">AI 사전심사</th>
|
||||||
|
<th class="p-stack-sm text-label-md font-label-md text-on-surface-variant">상태</th>
|
||||||
|
<th class="p-stack-sm pr-stack-md text-label-md font-label-md text-on-surface-variant text-right">액션</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-outline-variant/50 text-body-sm font-body-sm">
|
||||||
|
<!-- Row 1 -->
|
||||||
|
<tr class="hover:bg-surface-bright transition-colors group">
|
||||||
|
<td class="p-stack-sm pl-stack-md"><input class="border-outline-variant rounded text-primary focus:ring-primary" type="checkbox"/></td>
|
||||||
|
<td class="p-stack-sm">
|
||||||
|
<div class="font-bold text-on-surface">스마트팩토리 코리아</div>
|
||||||
|
<div class="text-on-surface-variant text-label-xs font-label-xs">A-102</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-stack-sm text-on-surface">장치 도면</td>
|
||||||
|
<td class="p-stack-sm text-on-surface-variant">(주)공간디자인</td>
|
||||||
|
<td class="p-stack-sm text-on-surface-variant">07.10</td>
|
||||||
|
<td class="p-stack-sm"><span class="bg-error text-on-error px-2 py-1 rounded text-label-xs font-label-xs font-bold">D-6</span></td>
|
||||||
|
<td class="p-stack-sm">
|
||||||
|
<div class="inline-flex items-center gap-1 border border-error bg-error-container/20 text-error px-2 py-1 rounded text-label-xs font-label-xs">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">warning</span>
|
||||||
|
차단 1
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-stack-sm text-on-surface-variant">검토 대기</td>
|
||||||
|
<td class="p-stack-sm pr-stack-md text-right">
|
||||||
|
<button class="border border-outline-variant px-3 py-1.5 rounded text-label-md font-label-md text-primary hover:bg-primary-container/10 transition-colors">검수</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<tr class="hover:bg-surface-bright transition-colors group">
|
||||||
|
<td class="p-stack-sm pl-stack-md"><input class="border-outline-variant rounded text-primary focus:ring-primary" type="checkbox"/></td>
|
||||||
|
<td class="p-stack-sm">
|
||||||
|
<div class="font-bold text-on-surface">스마트팩토리 코리아</div>
|
||||||
|
<div class="text-on-surface-variant text-label-xs font-label-xs">B-201</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-stack-sm text-on-surface">유틸리티 위치표시도</td>
|
||||||
|
<td class="p-stack-sm text-on-surface-variant">미래테크(주)</td>
|
||||||
|
<td class="p-stack-sm text-on-surface-variant">07.11</td>
|
||||||
|
<td class="p-stack-sm"><span class="bg-surface-container-high text-on-surface-variant px-2 py-1 rounded text-label-xs font-label-xs">D-14</span></td>
|
||||||
|
<td class="p-stack-sm">
|
||||||
|
<div class="inline-flex items-center gap-1 border border-[#00734e] bg-[#00734e]/10 text-[#00734e] px-2 py-1 rounded text-label-xs font-label-xs">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">check</span>
|
||||||
|
통과
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-stack-sm text-on-surface-variant">검토 대기</td>
|
||||||
|
<td class="p-stack-sm pr-stack-md text-right">
|
||||||
|
<button class="border border-outline-variant px-3 py-1.5 rounded text-label-md font-label-md text-primary hover:bg-primary-container/10 transition-colors">검수</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right Sidebar Widget -->
|
||||||
|
<aside class="w-80 border-l border-outline-variant bg-surface p-container-padding flex flex-col gap-stack-lg overflow-y-auto hidden lg:flex">
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-md flex flex-col gap-stack-md shadow-sm">
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface border-b border-outline-variant pb-stack-sm">홀7 유틸리티 부하</h3>
|
||||||
|
<div class="flex flex-col gap-stack-sm">
|
||||||
|
<div class="flex justify-between items-end">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">전기 신청</span>
|
||||||
|
<span class="text-title-sm font-title-sm text-primary">412kW</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-primary" style="width: 75%;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between text-label-xs font-label-xs text-on-surface-variant">
|
||||||
|
<span>0</span>
|
||||||
|
<span>수용 한도: 550kW</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-stack-sm pt-stack-sm">
|
||||||
|
<div class="flex justify-between items-end">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface-variant">인터넷 신청</span>
|
||||||
|
<span class="text-title-sm font-title-sm text-on-surface">128회선</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||||
|
<div class="h-full bg-[#00734e]" style="width: 40%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Promotional/AI Insight Widget -->
|
||||||
|
<div class="relative bg-surface-container-lowest border border-secondary/30 rounded-lg p-stack-md overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-br from-secondary/5 to-transparent"></div>
|
||||||
|
<div class="relative z-10 flex flex-col gap-stack-sm">
|
||||||
|
<div class="flex items-center gap-1 text-secondary">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">temp_preferences_custom</span>
|
||||||
|
<h3 class="text-label-md font-label-md font-bold">AI 최적화 분석</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface">현재 제출된 A-102 부스의 장치 도면이 인접 부스와의 동선 충돌을 유발할 확률이 85% 입니다. 반려를 권장합니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,345 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>현장 검수 - KINTEX</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" rel="preconnect"/>
|
||||||
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Inter:wght@400..700&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 scrollbar for mobile */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c7d3;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
/* Mobile container lock */
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #E4E7EC; /* darker background outside app */
|
||||||
|
}
|
||||||
|
#mobile-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 390px;
|
||||||
|
height: 100vh;
|
||||||
|
height: 100dvh;
|
||||||
|
background-color: #f9f9ff;
|
||||||
|
position: relative;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: max(884px, 100dvh);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-variant text-on-background font-body-base antialiased">
|
||||||
|
<div id="mobile-container">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="bg-surface sticky top-0 z-40 border-b border-outline-variant px-stack-md h-16 flex items-center justify-between shrink-0">
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<button class="p-1 text-on-surface-variant rounded-full hover:bg-surface-container-high transition-colors">
|
||||||
|
<span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-title-sm font-title-sm text-on-surface">현장 검수 · 부스 A-102</h1>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant">홀7 · KINTEX</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img alt="도면 썸네일" class="w-10 h-10 rounded object-cover border border-outline-variant shadow-sm" data-alt="A small, clear thumbnail of a technical architectural floor plan for an exhibition booth, displaying clean lines, minimal labels, and a professional light-mode blueprint aesthetic, high contrast." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8KE3mXcMbgQotfW_VsDdPZ3pSI-yzsIvyCpUa8KPOy_ADfWPV5VjjbdZ2s-wX3tQ_eDiiYYzdpz2MF3am0artwXJZC8ag9ji9C0Qz2j-diXNpobz3rE2Ktifn1EzqP4vVHP1iir1S10NE7f1QD5VPOs-PpCKsS4sEd9Qz-kPc4uPpI14kJ_CxxzCHO0Ure01sw1MGCMnE4-EK8fLl1DE_XFG-tBT5Uy1ihTOmEbOBPe-UeS4PHKfq"/>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="flex-1 flex flex-col gap-stack-md p-stack-md pb-[100px] overflow-y-auto">
|
||||||
|
<!-- Comparison Card -->
|
||||||
|
<section class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm flex flex-col">
|
||||||
|
<!-- Header with AI Chip -->
|
||||||
|
<div class="px-stack-sm py-stack-sm border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
|
||||||
|
<h2 class="text-label-md font-label-md text-on-surface font-bold">도면 vs 현장 비교</h2>
|
||||||
|
<div class="flex items-center gap-1 bg-secondary-container/10 border border-secondary text-secondary px-2 py-1 rounded-full">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
<span class="text-label-xs font-label-xs font-bold text-secondary">AI 사전심사 플래그 3건</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Comparison Area -->
|
||||||
|
<div class="p-stack-sm flex gap-stack-sm relative">
|
||||||
|
<!-- Left: Drawing -->
|
||||||
|
<div class="flex-1 flex flex-col gap-1 relative">
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant text-center bg-surface/80 absolute top-1 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded backdrop-blur-sm shadow-sm z-10">승인 도면</span>
|
||||||
|
<img alt="승인 도면" class="w-full aspect-[4/5] object-cover rounded border border-outline-variant" data-alt="A clean, professional 2D CAD floor plan of a 3x3 exhibition booth, showing dimensions, structural walls, and furniture layout, light gray background with dark blue drafting lines, highly detailed technical illustration." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAPapaO6JXY15IKatpqIwFeCvijJR-KGit8OcWrvlxLuKguxHdwk-8RU7p35jwi4wNypJoGeIhstrSNLrF_unAhJIkz8gY0kz4yhnctYG_41MVp31xuXlxlx26ivhRak7feq-xXtgpc9QPz4dfbHUGiZYW60dOsXkSnn9Dkc6dmnET2s5pNVQ4SoOUYO8zq4Kr8SlLaVlZeEViHcd2iP4VlpZVWmL4nkfCoDgwRGi1mks4pnB5XjgS8"/>
|
||||||
|
</div>
|
||||||
|
<!-- Divider -->
|
||||||
|
<div class="w-px bg-outline-variant self-stretch relative flex items-center justify-center">
|
||||||
|
<div class="absolute w-6 h-6 bg-surface border border-outline-variant rounded-full flex items-center justify-center text-on-surface-variant shadow-sm z-10">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="compare_arrows">compare_arrows</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right: Photo -->
|
||||||
|
<div class="flex-1 flex flex-col gap-1 relative">
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant text-center bg-surface/80 absolute top-1 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded backdrop-blur-sm shadow-sm z-10">현장 사진</span>
|
||||||
|
<img alt="현장 사진" class="w-full aspect-[4/5] object-cover rounded border border-outline-variant" data-alt="A bright, clear photograph taken from a mobile phone showing an exhibition booth under construction inside a massive modern convention hall. The booth has white modular walls, exposed aluminum framing, and concrete flooring. Industrial ceiling lighting, busy exhibition setup atmosphere, realistic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDR4i67HvKb15GSR2T1nwr5DMQkCXFn-XsejyXp7FUtUHsQnodUfJ9dOSXFOKL6WOBHEsUyyjukx3grOgFVPPLw_Ti8RwDtvn-g8AZ4FhFHwAqBHb-q93O7Vz4Y0a93kczT58hsTA6UgCXVGZth6WyiqC8PrsCCFrsiHozVISTf8EJGwGVG4hndWOX2LaN5M70idGDdhVHwUmIdWIVCTi4ZEXLq8LrXoZbG0bt03OjtWpr0C2-L5G8Q"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Swipe Dots (Visual only) -->
|
||||||
|
<div class="flex justify-center gap-1 pb-stack-sm pt-1 bg-surface-container-lowest">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-primary"></div>
|
||||||
|
<div class="w-2 h-2 rounded-full bg-outline-variant"></div>
|
||||||
|
<div class="w-2 h-2 rounded-full bg-outline-variant"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Inspection List -->
|
||||||
|
<section class="flex flex-col gap-stack-sm">
|
||||||
|
<h3 class="text-label-md font-label-md text-on-surface font-bold px-1">검수 항목 (4)</h3>
|
||||||
|
<!-- Item 1: Pass -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-sm flex flex-col gap-2 shadow-sm border-l-4 border-l-outline-variant">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface font-medium">장치물 높이 (제한 4m)</span>
|
||||||
|
<div class="flex bg-surface-container-low rounded border border-outline-variant p-0.5">
|
||||||
|
<button class="px-3 py-1 rounded text-label-md font-label-md bg-surface text-on-surface border border-outline-variant shadow-sm flex items-center gap-1">
|
||||||
|
적합
|
||||||
|
</button>
|
||||||
|
<button class="px-3 py-1 rounded text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||||
|
부적합
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Item 2: Pass -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-sm flex flex-col gap-2 shadow-sm border-l-4 border-l-outline-variant">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface font-medium">방염 라벨 부착</span>
|
||||||
|
<div class="flex bg-surface-container-low rounded border border-outline-variant p-0.5">
|
||||||
|
<button class="px-3 py-1 rounded text-label-md font-label-md bg-surface text-on-surface border border-outline-variant shadow-sm flex items-center gap-1">
|
||||||
|
적합
|
||||||
|
</button>
|
||||||
|
<button class="px-3 py-1 rounded text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||||
|
부적합
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Item 3: Fail (Violation) -->
|
||||||
|
<div class="bg-error-container/20 border border-error rounded-lg p-stack-sm flex flex-col gap-stack-sm shadow-sm border-l-4 border-l-error">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface font-medium flex items-center gap-1">
|
||||||
|
통로 침범 여부
|
||||||
|
<span class="material-symbols-outlined text-[16px] text-error" data-icon="warning">warning</span>
|
||||||
|
</span>
|
||||||
|
<span class="text-label-xs font-label-xs text-error font-bold mt-1">통로 0.3m 침범 확인</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex bg-surface-container-low rounded border border-outline-variant p-0.5 shrink-0">
|
||||||
|
<button class="px-3 py-1 rounded text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||||
|
적합
|
||||||
|
</button>
|
||||||
|
<button class="px-3 py-1 rounded text-label-md font-label-md bg-error text-on-error shadow-sm flex items-center gap-1">
|
||||||
|
부적합
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-stack-sm">
|
||||||
|
<img alt="위반 사진" class="w-16 h-16 rounded border border-error object-cover" data-alt="Close up mobile photo of the edge of an exhibition booth encroaching over a taped line on the concrete floor of a convention hall, a measuring tape is visible on the ground indicating a small overlap, bright industrial lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBu3ptGqxxWQkXJFLeTMvIlQo6FlKW9rWtwzu-Z3vvZrBvNH2jfHaH8UOE09ZTXLGRWycMHCd-nxDIr4hSWS8yCysMtz1G7-1GxBpAF3WqIqcNBQtQ224cjEiZ7SSh3CuuuP-60pYrxyB5X8UMQGo7Os9drVCqcj4cYHhyZk5lUyWym6HePvpVY46cLOvcYaO8FqjMvb621QIAFlUKCTutSostHt_Vc_YC6yEn0_ZUzLhtHtVnLEjXK"/>
|
||||||
|
<textarea class="flex-1 bg-surface-container-lowest border border-error rounded p-2 text-body-sm font-body-sm text-on-surface resize-none focus:outline-none focus:border-error focus:ring-1 focus:ring-error" placeholder="메모 입력..." rows="2">통로 0.3m 침범</textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Item 4: Pass -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-sm flex flex-col gap-2 shadow-sm border-l-4 border-l-outline-variant">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface font-medium">소음 규정 준수</span>
|
||||||
|
<div class="flex bg-surface-container-low rounded border border-outline-variant p-0.5">
|
||||||
|
<button class="px-3 py-1 rounded text-label-md font-label-md bg-surface text-on-surface border border-outline-variant shadow-sm flex items-center gap-1">
|
||||||
|
적합
|
||||||
|
</button>
|
||||||
|
<button class="px-3 py-1 rounded text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||||
|
부적합
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- Sticky Bottom Actions -->
|
||||||
|
<div class="absolute bottom-0 w-full bg-surface border-t border-outline-variant p-stack-md flex gap-stack-sm z-50">
|
||||||
|
<button class="flex-1 bg-error text-on-error py-3 rounded-lg text-title-sm font-title-sm flex items-center justify-center gap-1 hover:bg-error/90 transition-colors shadow-sm">
|
||||||
|
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
||||||
|
시정 요청
|
||||||
|
</button>
|
||||||
|
<button class="flex-1 bg-tertiary-container text-on-tertiary-container py-3 rounded-lg text-title-sm font-title-sm flex items-center justify-center gap-1 opacity-50 cursor-not-allowed">
|
||||||
|
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||||
|
검수 승인
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,529 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX AI 전시관리 - Dashboard</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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&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>
|
||||||
|
body { font-family: 'Pretendard', sans-serif; background-color: #F9FAFB; }
|
||||||
|
.glass-panel { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-surface h-screen overflow-hidden flex">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="bg-surface-container-low dark:bg-inverse-surface fixed left-0 top-0 h-screen w-60 border-r border-outline-variant dark:border-outline flex flex-col py-container-padding z-50">
|
||||||
|
<div class="px-gutter mb-stack-lg flex items-center gap-stack-sm">
|
||||||
|
<span class="material-symbols-outlined text-primary dark:text-primary-fixed text-headline-md font-bold">domain</span>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-headline-md font-headline-md font-bold text-primary dark:text-primary-fixed">KINTEX AI</h1>
|
||||||
|
<p class="text-label-md font-label-md text-on-surface-variant">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="flex flex-col gap-base flex-1 px-base">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm rounded-lg text-primary dark:text-primary-fixed-dim font-bold border-r-4 border-primary dark:border-primary-fixed-dim bg-primary-container/10 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="flex flex-col gap-base px-base mt-auto">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<div class="flex-1 ml-60 flex flex-col h-screen overflow-hidden">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="bg-surface dark:bg-surface-dim docked full-width top-0 sticky z-40 border-b border-outline-variant dark:border-outline flex justify-between items-center px-container-padding h-16">
|
||||||
|
<div class="flex items-center gap-stack-lg">
|
||||||
|
<span class="text-title-sm font-title-sm font-bold text-on-surface dark:text-inverse-on-surface">Exhibition Studio</span>
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
|
||||||
|
<input class="pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" placeholder="Search..." type="text"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="flex gap-stack-lg h-full">
|
||||||
|
<a class="flex items-center text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors h-full px-base text-label-md font-label-md" href="#">Projects</a>
|
||||||
|
<a class="flex items-center text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors h-full px-base text-label-md font-label-md" href="#">Analytics</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<button class="text-body-sm font-bold px-4 py-2 border border-outline-variant rounded-lg text-on-surface hover:bg-surface-container-low transition-colors">D-31</button>
|
||||||
|
<button class="bg-primary text-on-primary text-body-sm font-bold px-4 py-2 rounded-lg hover:bg-primary-container transition-colors">Publish Layout</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
</button>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-high border border-outline-variant overflow-hidden ml-2 flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-outline">person</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Scrollable Canvas -->
|
||||||
|
<main class="flex-1 overflow-y-auto p-container-padding flex flex-col gap-stack-lg">
|
||||||
|
<!-- Event Header & Countdown -->
|
||||||
|
<div class="flex justify-between items-end">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-display-lg font-display-lg text-on-surface mb-2">2026 스마트팩토리 코리아</h2>
|
||||||
|
<p class="text-headline-md font-headline-md text-on-surface-variant flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined">location_on</span> 킨텍스 제2전시장 홀7
|
||||||
|
<span class="mx-2 text-outline-variant">|</span>
|
||||||
|
<span class="material-symbols-outlined">calendar_today</span> 2026.08.11–08.14
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-error text-on-error px-6 py-3 rounded-xl shadow-sm border border-error-container flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-[32px]">timer</span>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-label-xs uppercase tracking-widest opacity-80">개장까지</span>
|
||||||
|
<span class="text-display-lg-mobile font-bold leading-none">D-31</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Milestone Timeline (Hero) -->
|
||||||
|
<section class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-lg">
|
||||||
|
<div class="relative pt-8 pb-4">
|
||||||
|
<!-- Progress Bar Track -->
|
||||||
|
<div class="absolute top-12 left-[10%] right-[10%] h-1 bg-surface-container-highest rounded-full z-0"></div>
|
||||||
|
<!-- Active Progress -->
|
||||||
|
<div class="absolute top-12 left-[10%] w-[40%] h-1 bg-primary rounded-full z-0"></div>
|
||||||
|
<div class="relative z-10 flex justify-between">
|
||||||
|
<!-- Node 1: Completed -->
|
||||||
|
<div class="flex flex-col items-center w-1/5 relative group">
|
||||||
|
<div class="absolute -top-10 bg-surface-container-highest px-3 py-1 rounded-md text-label-xs text-on-surface-variant whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">완료됨</div>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-tertiary-container text-on-tertiary flex items-center justify-center mb-3 ring-4 ring-surface-container-lowest">
|
||||||
|
<span class="material-symbols-outlined text-sm font-bold">check</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-label-md font-bold text-on-surface">D-150 홀 배정</h4>
|
||||||
|
<div class="mt-4 bg-surface px-3 py-2 rounded-lg border border-outline-variant w-32 text-center shadow-sm">
|
||||||
|
<span class="text-label-xs text-on-surface-variant block">배정 완료</span>
|
||||||
|
<span class="text-body-sm font-bold text-tertiary">100%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Node 2: Completed -->
|
||||||
|
<div class="flex flex-col items-center w-1/5 relative group">
|
||||||
|
<div class="absolute -top-10 bg-surface-container-highest px-3 py-1 rounded-md text-label-xs text-on-surface-variant whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">완료됨</div>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-tertiary-container text-on-tertiary flex items-center justify-center mb-3 ring-4 ring-surface-container-lowest">
|
||||||
|
<span class="material-symbols-outlined text-sm font-bold">check</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-label-md font-bold text-on-surface">D-30 사전협의</h4>
|
||||||
|
<div class="mt-4 bg-surface px-3 py-2 rounded-lg border border-outline-variant w-32 text-center shadow-sm">
|
||||||
|
<span class="text-label-xs text-on-surface-variant block">협의 완료</span>
|
||||||
|
<span class="text-body-sm font-bold text-tertiary">100%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Node 3: Active / Urgent -->
|
||||||
|
<div class="flex flex-col items-center w-1/5 relative">
|
||||||
|
<div class="absolute -top-10 bg-error text-on-error px-3 py-1 rounded-md text-label-xs font-bold whitespace-nowrap shadow-md flex items-center gap-1 animate-pulse">
|
||||||
|
<span class="material-symbols-outlined text-[12px]">warning</span> D-6 남음
|
||||||
|
<div class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-error rotate-45"></div>
|
||||||
|
</div>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-lowest border-4 border-error text-error flex items-center justify-center mb-3 ring-4 ring-error/20">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-error"></div>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-label-md font-bold text-error">D-25 유틸리티 마감</h4>
|
||||||
|
<div class="mt-4 bg-surface px-3 py-2 rounded-lg border border-error-container w-32 text-center shadow-md relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-error"></div>
|
||||||
|
<span class="text-label-xs text-on-surface-variant block">신청 현황</span>
|
||||||
|
<span class="text-body-sm font-bold text-error">74% 진행</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Node 4: Upcoming -->
|
||||||
|
<div class="flex flex-col items-center w-1/5">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-lowest border-2 border-outline-variant text-outline flex items-center justify-center mb-3 ring-4 ring-surface-container-lowest">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-outline-variant"></div>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-label-md font-bold text-on-surface-variant">D-7 신고서류</h4>
|
||||||
|
<div class="mt-4 bg-surface-container-low px-3 py-2 rounded-lg border border-outline-variant border-dashed w-32 text-center">
|
||||||
|
<span class="text-label-xs text-outline block">제출 현황</span>
|
||||||
|
<span class="text-body-sm font-bold text-on-surface-variant">3/7 완료</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Node 5: Target -->
|
||||||
|
<div class="flex flex-col items-center w-1/5">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-lowest border-2 border-outline-variant text-outline flex items-center justify-center mb-3 ring-4 ring-surface-container-lowest">
|
||||||
|
<span class="material-symbols-outlined text-sm">flag</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-label-md font-bold text-on-surface-variant">D-0 개장</h4>
|
||||||
|
<div class="mt-4 bg-surface-container-low px-3 py-2 rounded-lg border border-outline-variant border-dashed w-32 text-center opacity-50">
|
||||||
|
<span class="text-label-xs text-outline block">준비중</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- KPI Cards -->
|
||||||
|
<section class="grid grid-cols-4 gap-gutter">
|
||||||
|
<!-- Card 1 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md flex flex-col justify-between h-32 relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
|
||||||
|
<div class="flex justify-between items-start pl-2">
|
||||||
|
<span class="text-label-md text-on-surface-variant">참가업체</span>
|
||||||
|
<span class="material-symbols-outlined text-primary bg-primary-container/10 p-1 rounded-md">groups</span>
|
||||||
|
</div>
|
||||||
|
<div class="pl-2">
|
||||||
|
<div class="flex items-baseline gap-2">
|
||||||
|
<span class="text-display-lg-mobile font-bold text-on-surface">128</span>
|
||||||
|
<span class="text-body-sm text-on-surface-variant">/ 160</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-surface-container-highest h-1.5 rounded-full mt-2">
|
||||||
|
<div class="bg-primary h-1.5 rounded-full" style="width: 80%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 2 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md flex flex-col justify-between h-32 relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-secondary-container"></div>
|
||||||
|
<div class="flex justify-between items-start pl-2">
|
||||||
|
<span class="text-label-md text-on-surface-variant flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px] text-secondary-container">auto_awesome</span> 배치 확정률
|
||||||
|
</span>
|
||||||
|
<span class="material-symbols-outlined text-secondary-container bg-secondary-container/10 p-1 rounded-md">architecture</span>
|
||||||
|
</div>
|
||||||
|
<div class="pl-2">
|
||||||
|
<div class="flex items-baseline gap-2">
|
||||||
|
<span class="text-display-lg-mobile font-bold text-on-surface">92%</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-label-xs text-secondary-container mt-1">AI 최적화 완료</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 3 -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md flex flex-col justify-between h-32 relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-outline"></div>
|
||||||
|
<div class="flex justify-between items-start pl-2">
|
||||||
|
<span class="text-label-md text-on-surface-variant">유틸리티 신청</span>
|
||||||
|
<span class="material-symbols-outlined text-on-surface-variant bg-surface-container-high p-1 rounded-md">power</span>
|
||||||
|
</div>
|
||||||
|
<div class="pl-2">
|
||||||
|
<div class="flex items-baseline gap-2">
|
||||||
|
<span class="text-display-lg-mobile font-bold text-on-surface">74%</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-label-xs text-on-surface-variant mt-1">마감 임박</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 4 (Alert) -->
|
||||||
|
<div class="bg-error-container/20 border border-error-container rounded-xl p-stack-md flex flex-col justify-between h-32 relative overflow-hidden group hover:bg-error-container/30 transition-colors cursor-pointer">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-error"></div>
|
||||||
|
<div class="flex justify-between items-start pl-2">
|
||||||
|
<span class="text-label-md font-bold text-error">규정 위반</span>
|
||||||
|
<span class="material-symbols-outlined text-error bg-error/10 p-1 rounded-md">gavel</span>
|
||||||
|
</div>
|
||||||
|
<div class="pl-2 flex justify-between items-end">
|
||||||
|
<div class="flex items-baseline gap-1">
|
||||||
|
<span class="text-display-lg-mobile font-bold text-error">5</span>
|
||||||
|
<span class="text-body-sm font-bold text-error">건</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-xs font-bold text-error border border-error px-2 py-1 rounded flex items-center gap-1 group-hover:bg-error group-hover:text-on-error transition-colors">
|
||||||
|
상세보기 <span class="material-symbols-outlined text-[14px]">arrow_forward</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Bottom Split Layout -->
|
||||||
|
<div class="flex gap-gutter h-[400px]">
|
||||||
|
<!-- Left Data Table (2/3) -->
|
||||||
|
<section class="w-2/3 bg-surface-container-lowest border border-outline-variant rounded-xl flex flex-col overflow-hidden shadow-sm">
|
||||||
|
<div class="px-stack-md py-stack-sm border-b border-outline-variant bg-surface flex justify-between items-center">
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-outline">table_chart</span> 참가업체 현황
|
||||||
|
</h3>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-3 py-1.5 text-label-xs border border-outline-variant rounded-md hover:bg-surface-container-low flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">filter_list</span> 필터
|
||||||
|
</button>
|
||||||
|
<button class="px-3 py-1.5 text-label-xs bg-primary text-on-primary rounded-md hover:bg-primary-container flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">download</span> 내보내기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-auto">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead class="bg-surface-container-low sticky top-0 z-10">
|
||||||
|
<tr>
|
||||||
|
<th class="px-4 py-3 text-label-xs text-on-surface-variant font-bold border-b border-outline-variant whitespace-nowrap">부스번호</th>
|
||||||
|
<th class="px-4 py-3 text-label-xs text-on-surface-variant font-bold border-b border-outline-variant w-1/3">업체명</th>
|
||||||
|
<th class="px-4 py-3 text-label-xs text-on-surface-variant font-bold border-b border-outline-variant">설계 상태</th>
|
||||||
|
<th class="px-4 py-3 text-label-xs text-on-surface-variant font-bold border-b border-outline-variant">유틸리티</th>
|
||||||
|
<th class="px-4 py-3 text-label-xs text-on-surface-variant font-bold border-b border-outline-variant text-right">예상 사진</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="text-body-sm divide-y divide-outline-variant/50">
|
||||||
|
<tr class="hover:bg-surface-container-low/50 transition-colors">
|
||||||
|
<td class="px-4 py-3 font-mono text-primary font-bold">A-101</td>
|
||||||
|
<td class="px-4 py-3 font-medium text-on-surface">삼성전자 (스마트팩토리 사업부)</td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2 py-1 rounded text-label-xs font-bold bg-tertiary-container/10 text-tertiary border border-tertiary-container/30">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span> 승인
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-on-surface-variant">전기(30kW), LAN</td>
|
||||||
|
<td class="px-4 py-3 text-right">
|
||||||
|
<img alt="삼성전자 예상 부스 디자인 렌더링" class="w-12 h-12 object-cover rounded border border-outline-variant ml-auto hover:scale-150 transition-transform origin-right cursor-pointer" src="https://lh3.googleusercontent.com/aida/AP1WRLuTJllS4I1nbHXEBA6rTtfsEgDs7HSWU3ZvN5MWlygnyHWXik8qMDyqNOaYp1fxiUxdEage2cpiVCv0_WlwB6jBEGOm3NTCRWhCwtdjQXAiERgVwKPKww8mfCGKPBv9Cw7UfWBjRO6ztwOtcocqi3cP1Ei96BgMR5whcGWQljKEnJflf1BX4Sa_-aCGHSWGH5s6_NLff4U8Yd9mDkwZ26nHkcRkQQrD66lcPws86w1_YX-L6tg_6ywr7QI"/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-surface-container-low/50 transition-colors">
|
||||||
|
<td class="px-4 py-3 font-mono text-primary font-bold">A-102</td>
|
||||||
|
<td class="px-4 py-3 font-medium text-on-surface">LG CNS</td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2 py-1 rounded text-label-xs font-bold bg-secondary-container/10 text-secondary-container border border-secondary-container/30">
|
||||||
|
<span class="material-symbols-outlined text-[12px]">auto_awesome</span> AI 제안
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-on-surface-variant">전기(20kW), 압축공기</td>
|
||||||
|
<td class="px-4 py-3 text-right">
|
||||||
|
<img alt="LG CNS AI 제안 부스 배치도" class="w-12 h-12 object-cover rounded border border-secondary-container/50 ml-auto hover:scale-150 transition-transform origin-right cursor-pointer" src="https://lh3.googleusercontent.com/aida/AP1WRLtsocUuOxtEm-alc6d65dh5o4U3u-CggqrYH7Xbqcimz9JL8VwWAOiQvKy3fhJ4rJsK0RBj89R5A_ooRyY4sij_Dq-GBy3CBBdSFBkuKHx5MFNM1UO7CtakB0nPIPbUIg_8oB-dW6Rq8BRQlMNvN6NY9ZzLHnDTT3elY1G4zqLMH2AuUsUg-iUYj0NQ0lkQuUisEVm5gkgEYZdfb3EaBNMfxQi0S7HSpPzdyzIurlON2jRTQyM7QDoCew0"/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="bg-error-container/5 hover:bg-error-container/10 transition-colors">
|
||||||
|
<td class="px-4 py-3 font-mono text-error font-bold">B-205</td>
|
||||||
|
<td class="px-4 py-3 font-medium text-on-surface flex items-center gap-2">
|
||||||
|
현대위아 <span class="material-symbols-outlined text-error text-[16px]" title="규정 위반">error</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2 py-1 rounded text-label-xs font-bold bg-error/10 text-error border border-error/30">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-error"></span> 반려 (높이 초과)
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-on-surface-variant">전기(50kW), 용수</td>
|
||||||
|
<td class="px-4 py-3 text-right">
|
||||||
|
<div class="w-12 h-12 bg-surface-container-highest rounded border border-outline-variant border-dashed flex items-center justify-center ml-auto text-outline text-[10px]">미제출</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-surface-container-low/50 transition-colors">
|
||||||
|
<td class="px-4 py-3 font-mono text-outline font-bold">C-311</td>
|
||||||
|
<td class="px-4 py-3 font-medium text-on-surface">두산로보틱스</td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2 py-1 rounded text-label-xs font-bold bg-surface-container-highest text-on-surface-variant border border-outline-variant">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-outline"></span> 작성중
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-on-surface-variant">-</td>
|
||||||
|
<td class="px-4 py-3 text-right">
|
||||||
|
<div class="w-12 h-12 bg-surface-container-highest rounded border border-outline-variant border-dashed flex items-center justify-center ml-auto text-outline text-[10px]">작성중</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-surface-container-low/50 transition-colors">
|
||||||
|
<td class="px-4 py-3 font-mono text-primary font-bold">A-105</td>
|
||||||
|
<td class="px-4 py-3 font-medium text-on-surface">LS ELECTRIC</td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<span class="inline-flex items-center gap-1 px-2 py-1 rounded text-label-xs font-bold bg-tertiary-container/10 text-tertiary border border-tertiary-container/30">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span> 승인
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-on-surface-variant">전기(40kW)</td>
|
||||||
|
<td class="px-4 py-3 text-right">
|
||||||
|
<div class="w-12 h-12 bg-surface-container-highest rounded border border-outline-variant flex items-center justify-center ml-auto text-outline">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">image</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right Sidebar (1/3) -->
|
||||||
|
<section class="w-1/3 flex flex-col gap-stack-md">
|
||||||
|
<!-- Floor Plan Overview Card -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm relative group h-48 flex-shrink-0 cursor-pointer">
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105" data-alt="High-angle isometric rendering of an expansive, modern exhibition hall (KINTEX Hall 7) showing organized booth layouts, clear aisles, and a bright, professional lighting scheme. The image emphasizes structural clarity and scale, suitable for B2B event management." style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLv4g1wEc50g6SV874dKYhY3pekuOO8DpFUuNZ11z4Q9S02vd7fQvZ9QsCAvdeYFBXOYbahll5cJgd62hawt4xdYf0e8xkbeVizuekpfrV9gYnvxdbuMzdxHNS3Fezbi-jMX1GlgJemL6ifKvATHzgW0NdON_MkV1Y95qXcjt5RTHo07vmXj6OXmgL_ltfpfRYzAfGuClIQDY612hRpS_RVRkeLDV0RFHgjGIR3Y_xNhhQmNt2StB4C7Rw');"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-on-surface/80 via-transparent to-transparent"></div>
|
||||||
|
<!-- AI Label floating -->
|
||||||
|
<div class="absolute top-3 right-3 bg-surface/90 backdrop-blur-md px-2 py-1 rounded border border-secondary-container text-secondary-container text-label-xs font-bold flex items-center gap-1 shadow-sm">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">auto_awesome</span> AI 생성
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-3 left-3 right-3 flex justify-between items-end">
|
||||||
|
<div>
|
||||||
|
<h4 class="text-on-primary font-bold text-body-base">홀 전경 조감</h4>
|
||||||
|
<p class="text-on-primary/80 text-label-xs">최종 렌더링 - 2시간 전 업데이트</p>
|
||||||
|
</div>
|
||||||
|
<button class="w-8 h-8 rounded-full bg-primary/90 text-on-primary flex items-center justify-center hover:bg-primary transition-colors backdrop-blur-sm">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">zoom_in</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Notification Feed -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl flex-1 flex flex-col shadow-sm overflow-hidden">
|
||||||
|
<div class="px-stack-md py-stack-sm border-b border-outline-variant bg-surface flex justify-between items-center">
|
||||||
|
<h3 class="text-label-md font-bold text-on-surface flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">history</span> 최근 활동
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto p-3 flex flex-col gap-2">
|
||||||
|
<!-- Feed Item -->
|
||||||
|
<div class="p-3 rounded-lg border border-outline-variant/50 bg-surface hover:bg-surface-container-low transition-colors text-body-sm flex gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-error/10 text-error flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">gavel</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-on-surface"><span class="font-bold">B-205 (현대위아)</span> 설계 도면이 안전 규정(높이 초과)으로 <span class="text-error font-bold">자동 반려</span>되었습니다.</p>
|
||||||
|
<span class="text-label-xs text-outline block mt-1">10분 전</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Feed Item -->
|
||||||
|
<div class="p-3 rounded-lg border border-secondary-container/30 bg-secondary-container/5 hover:bg-secondary-container/10 transition-colors text-body-sm flex gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-secondary-container/20 text-secondary-container flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-on-surface"><span class="font-bold">AI 최적화</span> 모듈이 잔여 부스(32개)에 대한 동선 최적화 배치를 생성했습니다.</p>
|
||||||
|
<span class="text-label-xs text-outline block mt-1">1시간 전</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Feed Item -->
|
||||||
|
<div class="p-3 rounded-lg border border-outline-variant/50 bg-surface hover:bg-surface-container-low transition-colors text-body-sm flex gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-tertiary/10 text-tertiary flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">check</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-on-surface"><span class="font-bold">A-101 (삼성전자)</span> 유틸리티 신청서가 승인되었습니다.</p>
|
||||||
|
<span class="text-label-xs text-outline block mt-1">3시간 전</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Feed Item -->
|
||||||
|
<div class="p-3 rounded-lg border border-outline-variant/50 bg-surface hover:bg-surface-container-low transition-colors text-body-sm flex gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-surface-container-highest text-on-surface-variant flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">upload_file</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-on-surface"><span class="font-bold">C-311 (두산로보틱스)</span> 1차 서류를 제출했습니다.</p>
|
||||||
|
<span class="text-label-xs text-outline block mt-1">5시간 전</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,164 @@
|
|||||||
|
---
|
||||||
|
name: Precision Enterprise AI
|
||||||
|
colors:
|
||||||
|
surface: '#f9f9ff'
|
||||||
|
surface-dim: '#d2daf0'
|
||||||
|
surface-bright: '#f9f9ff'
|
||||||
|
surface-container-lowest: '#ffffff'
|
||||||
|
surface-container-low: '#f1f3ff'
|
||||||
|
surface-container: '#e9edff'
|
||||||
|
surface-container-high: '#e0e8ff'
|
||||||
|
surface-container-highest: '#dbe2f9'
|
||||||
|
on-surface: '#141b2c'
|
||||||
|
on-surface-variant: '#414751'
|
||||||
|
inverse-surface: '#293041'
|
||||||
|
inverse-on-surface: '#edf0ff'
|
||||||
|
outline: '#717782'
|
||||||
|
outline-variant: '#c1c7d3'
|
||||||
|
surface-tint: '#0060a9'
|
||||||
|
primary: '#004e8b'
|
||||||
|
on-primary: '#ffffff'
|
||||||
|
primary-container: '#0066b3'
|
||||||
|
on-primary-container: '#d2e3ff'
|
||||||
|
inverse-primary: '#a2c9ff'
|
||||||
|
secondary: '#5427e6'
|
||||||
|
on-secondary: '#ffffff'
|
||||||
|
secondary-container: '#6d4aff'
|
||||||
|
on-secondary-container: '#f3edff'
|
||||||
|
tertiary: '#00583b'
|
||||||
|
on-tertiary: '#ffffff'
|
||||||
|
tertiary-container: '#00734e'
|
||||||
|
on-tertiary-container: '#8ef7c3'
|
||||||
|
error: '#ba1a1a'
|
||||||
|
on-error: '#ffffff'
|
||||||
|
error-container: '#ffdad6'
|
||||||
|
on-error-container: '#93000a'
|
||||||
|
primary-fixed: '#d3e4ff'
|
||||||
|
primary-fixed-dim: '#a2c9ff'
|
||||||
|
on-primary-fixed: '#001c38'
|
||||||
|
on-primary-fixed-variant: '#004881'
|
||||||
|
secondary-fixed: '#e5deff'
|
||||||
|
secondary-fixed-dim: '#c9bfff'
|
||||||
|
on-secondary-fixed: '#1b0063'
|
||||||
|
on-secondary-fixed-variant: '#4500d8'
|
||||||
|
tertiary-fixed: '#8ef7c4'
|
||||||
|
tertiary-fixed-dim: '#72daa9'
|
||||||
|
on-tertiary-fixed: '#002113'
|
||||||
|
on-tertiary-fixed-variant: '#005236'
|
||||||
|
background: '#f9f9ff'
|
||||||
|
on-background: '#141b2c'
|
||||||
|
surface-variant: '#dbe2f9'
|
||||||
|
typography:
|
||||||
|
display-lg:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 36px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: 44px
|
||||||
|
letterSpacing: -0.02em
|
||||||
|
display-lg-mobile:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 28px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: 36px
|
||||||
|
headline-md:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 24px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: 32px
|
||||||
|
title-sm:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 18px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: 28px
|
||||||
|
body-base:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 14px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: 20px
|
||||||
|
body-sm:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 13px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: 18px
|
||||||
|
label-md:
|
||||||
|
fontFamily: Geist
|
||||||
|
fontSize: 12px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: 16px
|
||||||
|
letterSpacing: 0.02em
|
||||||
|
label-xs:
|
||||||
|
fontFamily: Geist
|
||||||
|
fontSize: 11px
|
||||||
|
fontWeight: '500'
|
||||||
|
lineHeight: 14px
|
||||||
|
rounded:
|
||||||
|
sm: 0.125rem
|
||||||
|
DEFAULT: 0.25rem
|
||||||
|
md: 0.375rem
|
||||||
|
lg: 0.5rem
|
||||||
|
xl: 0.75rem
|
||||||
|
full: 9999px
|
||||||
|
spacing:
|
||||||
|
base: 4px
|
||||||
|
container-padding: 24px
|
||||||
|
gutter: 16px
|
||||||
|
stack-sm: 8px
|
||||||
|
stack-md: 16px
|
||||||
|
stack-lg: 24px
|
||||||
|
---
|
||||||
|
|
||||||
|
## Brand & Style
|
||||||
|
This design system is engineered for a high-stakes B2B enterprise environment, specifically tailored for exhibition management. The brand personality is rooted in **reliability, precision, and institutional authority**, reflecting the scale of the KINTEX infrastructure.
|
||||||
|
|
||||||
|
The design style follows a **Corporate / Modern** aesthetic with a focus on data density and functional clarity. It prioritizes information hierarchy to support rapid decision-making in complex workflows. The UI utilizes a structured grid, high-contrast typography, and purposeful use of color to distinguish between human-managed data and AI-generated suggestions. The emotional response should be one of "controlled efficiency"—where the user feels empowered by the tool's intelligence rather than overwhelmed by its complexity.
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
The palette is dominated by **KINTEX Blue (#0066B3)**, establishing a professional and trustworthy foundation. A specialized **AI Accent (Purple #6D4AFF)** is introduced specifically to highlight features where the system provides drafts, suggestions, or automated logic.
|
||||||
|
|
||||||
|
- **Primary Tier**: Used for core actions and active states.
|
||||||
|
- **AI Tier**: Reserved for generative elements and automated labels.
|
||||||
|
- **Canvas Tier**: A deep charcoal surface (#1C2536) is utilized for the "Editor Canvas" to provide a high-contrast workspace for layout planning and spatial management, separating the "work" area from the "management" UI.
|
||||||
|
- **Neutrals**: A sophisticated range of grays from #F9FAFB (backgrounds) to #101828 (primary text) ensures deep legibility and clean separation of UI layers.
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
This design system utilizes **Inter** as the primary typeface for its exceptional legibility in high-density data environments, serving as a modern surrogate for Pretendard. **Geist** is used for labels and monospaced technical data to reinforce the "AI/Systems" feel.
|
||||||
|
|
||||||
|
The typographic scale is optimized for SaaS:
|
||||||
|
- **High Density**: The base body size is set to **14px** to allow more data to be visible on the screen simultaneously.
|
||||||
|
- **Weight Contrast**: Bold weights (600/700) are used strictly for headings and critical status indicators to guide the eye quickly.
|
||||||
|
- **Technical Precision**: Labels and captions use a slightly tighter tracking and smaller scale (11px-12px) for metadata that supports primary content.
|
||||||
|
|
||||||
|
## Layout & Spacing
|
||||||
|
The layout follows a **Fluid Grid** model with a 4px baseline shift to ensure consistent alignment.
|
||||||
|
|
||||||
|
- **Desktop**: 12-column grid with 16px gutters and 24px outer margins.
|
||||||
|
- **Information Density**: Padding in data tables and property panels is kept tight (8px to 12px) to maximize content visibility without sacrificing touch/click targets.
|
||||||
|
- **Editor Canvas**: Operates on a dedicated 8px or 16px snap-to-grid system for precise placement of exhibition booths and assets.
|
||||||
|
- **Reflow**: On tablet devices, the side navigation collapses into an icon-only rail, while the 12-column grid transitions to an 8-column layout.
|
||||||
|
|
||||||
|
## Elevation & Depth
|
||||||
|
The system uses **Tonal Layers** rather than heavy shadows to maintain a clean, professional workspace.
|
||||||
|
|
||||||
|
- **Level 0 (Base)**: Background surface (#F9FAFB).
|
||||||
|
- **Level 1 (Cards/Sections)**: White surface with a thin 1px border (#E4E7EC). No shadow.
|
||||||
|
- **Level 2 (Modals/Popovers)**: White surface with a soft, neutral ambient shadow (Y: 4px, Blur: 12px, 10% opacity) to provide focus.
|
||||||
|
- **The Editor Surface**: Uses a "Reverse Elevation" strategy where the canvas is the lowest level (dark background), and tools/panels float above it with subtle glassmorphism effects (10px backdrop blur) to maintain context of the underlying layout.
|
||||||
|
|
||||||
|
## Shapes
|
||||||
|
A **Soft (0.25rem)** roundedness is applied throughout the system to balance professional rigor with modern software aesthetics.
|
||||||
|
|
||||||
|
- **Small Components**: Checkboxes, inputs, and small buttons use the 4px (0.25rem) radius.
|
||||||
|
- **Large Components**: Cards and modals scale up to 8px (0.5rem) to soften the overall interface.
|
||||||
|
- **AI Elements**: Components specifically related to AI (Drafts, Suggestions) may utilize a slightly more organic feel, but must stay within the system's 8px maximum limit to maintain visual cohesion.
|
||||||
|
|
||||||
|
## Components
|
||||||
|
- **StatusBadge**: Follows a strict semantic progression: Gray (Draft) -> Blue (In Review) -> Purple (AI Optimized) -> Green (Approved) -> Red (Violation/Conflict).
|
||||||
|
- **DdayChip**: A compact, high-contrast tag used in lists to show time-sensitive deadlines (e.g., "D-15"). Uses a bold background and white text.
|
||||||
|
- **AI Labels**: Elements generated or drafted by the system are marked with a Purple (#6D4AFF) hairline outline and a small sparkle icon prefix.
|
||||||
|
- **ViolationFlag**: High-visibility red indicator (#D92D20) used in the canvas to mark booth placement errors or safety regulation breaches.
|
||||||
|
- **Input Fields**: Minimal styling with a 1px border. On focus, the border transitions to KINTEX Blue with a soft 2px outer glow.
|
||||||
|
- **Buttons**:
|
||||||
|
- **Primary**: Solid KINTEX Blue.
|
||||||
|
- **Secondary**: Outlined Blue or Gray.
|
||||||
|
- **AI Action**: Solid Purple with a subtle gradient to indicate "Generative" capability.
|
||||||
|
- **Cards**: Use a white background, 1px border, and no shadow. The header of the card should have a 4px padding-left accent color matching its status.
|
||||||
@ -0,0 +1,350 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>KINTEX AI - 도면 검토</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>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background font-body-base h-screen overflow-hidden flex">
|
||||||
|
<!-- SideNavBar (Shared Component) -->
|
||||||
|
<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low dark:bg-inverse-surface border-r border-outline-variant dark:border-outline flex flex-col py-container-padding z-50">
|
||||||
|
<div class="px-gutter mb-stack-lg flex items-center gap-stack-sm">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-headline-md font-headline-md font-bold text-primary dark:text-primary-fixed" data-icon="domain">domain</span>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-headline-md font-headline-md font-bold text-primary dark:text-primary-fixed">KINTEX AI</h1>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto">
|
||||||
|
<ul class="space-y-base">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-primary dark:text-primary-fixed-dim font-bold border-r-4 border-primary dark:border-primary-fixed-dim bg-primary-container/10 transition-all duration-200" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined" data-icon="architecture" data-weight="fill" style="font-variation-settings: 'FILL' 1;">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined" data-icon="groups">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined" data-icon="assignment">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto border-t border-outline-variant dark:border-outline pt-stack-md">
|
||||||
|
<ul class="space-y-base">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-stack-sm px-gutter py-stack-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-60 flex-1 flex flex-col h-screen">
|
||||||
|
<!-- Header Context -->
|
||||||
|
<header class="bg-surface border-b border-outline-variant px-container-padding py-stack-md flex justify-between items-center z-10">
|
||||||
|
<div>
|
||||||
|
<nav class="flex items-center gap-base text-label-md font-label-md text-on-surface-variant mb-base">
|
||||||
|
<a class="hover:text-primary transition-colors" href="#">승인 큐</a>
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[16px]" data-icon="chevron_right">chevron_right</span>
|
||||||
|
<a class="hover:text-primary transition-colors" href="#">스마트팩토리 코리아</a>
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[16px]" data-icon="chevron_right">chevron_right</span>
|
||||||
|
<span class="text-on-surface">부스 A-102</span>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<h2 class="text-title-sm font-title-sm text-on-surface">장치 도면 검토</h2>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="px-2 py-1 bg-surface-container-high text-on-surface-variant rounded text-label-xs font-label-xs border border-outline-variant">버전: v2</span>
|
||||||
|
<span class="px-2 py-1 bg-surface-container-high text-on-surface-variant rounded text-label-xs font-label-xs border border-outline-variant">제출자: (주)공간디자인</span>
|
||||||
|
<span class="px-2 py-1 bg-surface-container-high text-on-surface-variant rounded text-label-xs font-label-xs border border-outline-variant">일자: 07.10</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<button class="flex items-center gap-1 px-3 py-1.5 border border-outline rounded text-body-sm hover:bg-surface-container-low transition-colors">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[18px]" data-icon="download">download</span>
|
||||||
|
원본 다운로드
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Content Grid (70/30 Split) -->
|
||||||
|
<div class="flex-1 flex overflow-hidden">
|
||||||
|
<!-- Left Canvas (70%) -->
|
||||||
|
<section class="flex-[7] bg-[#1C2536] relative flex flex-col border-r border-outline-variant">
|
||||||
|
<!-- Canvas Controls Overlay -->
|
||||||
|
<div class="absolute top-container-padding left-container-padding right-container-padding flex justify-between items-start z-10 pointer-events-none">
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="bg-surface-container-lowest/10 backdrop-blur-md rounded-lg p-1 flex border border-white/10 pointer-events-auto">
|
||||||
|
<button class="px-4 py-2 bg-primary/20 text-white rounded text-label-md font-label-md border border-primary/30 transition-colors">도면</button>
|
||||||
|
<button class="px-4 py-2 text-white/70 hover:text-white rounded text-label-md font-label-md transition-colors">예상 사진 (참고용)</button>
|
||||||
|
<button class="px-4 py-2 text-white/70 hover:text-white rounded text-label-md font-label-md transition-colors">버전 비교</button>
|
||||||
|
</div>
|
||||||
|
<!-- AI Toggle -->
|
||||||
|
<div class="bg-surface-container-lowest/10 backdrop-blur-md rounded-lg p-2 px-3 border border-secondary-container flex items-center gap-2 pointer-events-auto shadow-[0_0_15px_rgba(109,74,255,0.2)]">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-secondary-container text-[18px]" data-icon="auto_awesome">auto_awesome</span>
|
||||||
|
<span class="text-white text-label-md font-label-md">AI 위반 오버레이</span>
|
||||||
|
<button class="w-8 h-4 bg-secondary-container rounded-full relative ml-2">
|
||||||
|
<div class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Viewer Area (Placeholder for Floorplan) -->
|
||||||
|
<div class="flex-1 relative overflow-hidden flex items-center justify-center">
|
||||||
|
<!-- Base Grid Pattern for technical feel -->
|
||||||
|
<div class="absolute inset-0 opacity-20 pointer-events-none" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;"></div>
|
||||||
|
<!-- Floorplan Image Mock -->
|
||||||
|
<div class="relative w-[80%] h-[80%] border border-white/20 rounded shadow-2xl bg-white/5 p-4 flex items-center justify-center overflow-hidden">
|
||||||
|
<img class="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-screen" data-alt="A highly detailed architectural blueprint of an exhibition booth, drawn with precision white lines on a dark blueprint-style background. The design is modern and structural, showing dimensions, walls, and lighting rigs. The aesthetic is clean, technical, and professional, suitable for a sophisticated engineering or design interface." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA1LF2qUwbqvJmdqolpr6MDFzMIinCWbEJykkviZoAAkj452E0kduMmSFRhB7E8PLbDi8lKm0-x2yDsJjvz2GWK35P30nqsY5wE6hV8fHn-Its9O2qNhyU7q6T9H1PCPJgjqlxUNA59zM9_sJ4J_baLRI6yhMCCqbGS3sQ3VezrOGrqAHmkh8Gjw323u2puqbfISTqJiCyU2KknQhySRF4b8xbs4x_dFpFr1j1OyG1EHOKtr2Shy7I5"/>
|
||||||
|
<!-- Violation Pins -->
|
||||||
|
<div class="absolute top-[30%] left-[45%] flex flex-col items-center animate-bounce">
|
||||||
|
<div class="w-8 h-8 bg-error text-white rounded-full flex items-center justify-center text-label-md font-label-md font-bold shadow-lg border-2 border-white/20">1</div>
|
||||||
|
<div class="w-1 h-8 bg-error/50"></div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-[60%] left-[20%] flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-error text-white rounded-full flex items-center justify-center text-label-md font-label-md font-bold shadow-lg border-2 border-white/20">2</div>
|
||||||
|
<div class="w-1 h-8 bg-error/50"></div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-[50%] right-[30%] flex flex-col items-center">
|
||||||
|
<div class="w-8 h-8 bg-error text-white rounded-full flex items-center justify-center text-label-md font-label-md font-bold shadow-lg border-2 border-white/20">3</div>
|
||||||
|
<div class="w-1 h-8 bg-error/50"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Zoom/Pan Controls -->
|
||||||
|
<div class="absolute bottom-container-padding right-container-padding bg-surface-container-lowest/10 backdrop-blur-md rounded-lg flex flex-col border border-white/10 text-white pointer-events-auto">
|
||||||
|
<button class="p-2 hover:bg-white/10 transition-colors border-b border-white/10"><span aria-hidden="true" class="material-symbols-outlined" data-icon="add">add</span></button>
|
||||||
|
<button class="p-2 hover:bg-white/10 transition-colors border-b border-white/10"><span aria-hidden="true" class="material-symbols-outlined" data-icon="remove">remove</span></button>
|
||||||
|
<button class="p-2 hover:bg-white/10 transition-colors"><span aria-hidden="true" class="material-symbols-outlined" data-icon="fit_screen">fit_screen</span></button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right Panel (30%) -->
|
||||||
|
<aside class="flex-[3] bg-surface flex flex-col h-full overflow-y-auto">
|
||||||
|
<div class="p-container-padding space-y-stack-lg flex-1">
|
||||||
|
<!-- AI Inspection Card -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex flex-col">
|
||||||
|
<div class="bg-surface-container-low px-stack-md py-stack-sm flex items-center gap-2 border-b border-outline-variant">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-secondary-container" data-icon="auto_awesome">auto_awesome</span>
|
||||||
|
<h3 class="text-label-md font-label-md text-on-surface">AI 사전심사 결과</h3>
|
||||||
|
<span class="ml-auto px-2 py-0.5 bg-error-container text-on-error-container rounded text-label-xs font-label-xs font-bold">3건 위반</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-md space-y-stack-md">
|
||||||
|
<!-- Violation Item 1 -->
|
||||||
|
<div class="flex items-start gap-stack-sm pb-stack-md border-b border-outline-variant/50">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-error/10 text-error flex items-center justify-center flex-shrink-0 text-label-xs font-label-xs font-bold mt-0.5">1</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface font-semibold mb-1">높이 규정 위반 (목공 벽체)</p>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant mb-2">제출된 도면의 후면 벽체 높이가 4.5m로, 해당 구역 제한 높이(4.0m)를 초과함.</p>
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer group">
|
||||||
|
<input class="w-4 h-4 rounded border-outline text-primary focus:ring-primary focus:ring-offset-0 bg-surface-container-lowest cursor-pointer" type="checkbox"/>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant group-hover:text-on-surface transition-colors">확인함</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Violation Item 2 -->
|
||||||
|
<div class="flex items-start gap-stack-sm pb-stack-md border-b border-outline-variant/50">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-error/10 text-error flex items-center justify-center flex-shrink-0 text-label-xs font-label-xs font-bold mt-0.5">2</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface font-semibold mb-1">통로 여유 공간 부족</p>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant mb-2">우측 전시물 배치가 지정된 통로 경계선으로부터 500mm 여유 공간을 확보하지 않음.</p>
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer group">
|
||||||
|
<input class="w-4 h-4 rounded border-outline text-primary focus:ring-primary focus:ring-offset-0 bg-surface-container-lowest cursor-pointer" type="checkbox"/>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant group-hover:text-on-surface transition-colors">확인함</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Violation Item 3 -->
|
||||||
|
<div class="flex items-start gap-stack-sm">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-error/10 text-error flex items-center justify-center flex-shrink-0 text-label-xs font-label-xs font-bold mt-0.5">3</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface font-semibold mb-1">소화기 배치 위치 불명확</p>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant mb-2">안전 규정에 따른 필수 소화기 비치 위치가 도면 상에 명시되지 않음.</p>
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer group">
|
||||||
|
<input class="w-4 h-4 rounded border-outline text-primary focus:ring-primary focus:ring-offset-0 bg-surface-container-lowest cursor-pointer" type="checkbox"/>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant group-hover:text-on-surface transition-colors">확인함</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Comment Thread -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-label-md font-label-md text-on-surface mb-stack-sm flex items-center gap-2">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[18px]" data-icon="forum">forum</span>
|
||||||
|
협의 이력
|
||||||
|
</h3>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-md space-y-stack-md max-h-[300px] overflow-y-auto">
|
||||||
|
<!-- Comment 1 -->
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center text-label-xs font-label-xs flex-shrink-0">주최</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-baseline gap-2 mb-1">
|
||||||
|
<span class="text-label-xs font-label-xs font-bold text-on-surface">김관리</span>
|
||||||
|
<span class="text-[10px] text-on-surface-variant">07.09 14:30</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">v1 도면에서 지적된 후면 벽체 높이 문제가 아직 수정되지 않았습니다. 조속히 반영 바랍니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Comment 2 -->
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center text-label-xs font-label-xs flex-shrink-0">업체</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-baseline gap-2 mb-1">
|
||||||
|
<span class="text-label-xs font-label-xs font-bold text-on-surface">(주)공간디자인</span>
|
||||||
|
<span class="text-[10px] text-on-surface-variant">07.10 09:15</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">해당 부분 구조물 특성상 조정이 어려워 주최측 예외 승인이 가능한지 문의드립니다. 관련 소명 자료 첨부했습니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Input -->
|
||||||
|
<div class="mt-stack-sm relative">
|
||||||
|
<textarea class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg p-3 text-body-sm font-body-sm resize-none focus:ring-1 focus:ring-primary focus:border-primary placeholder-on-surface-variant/50" placeholder="의견을 남겨주세요..." rows="2"></textarea>
|
||||||
|
<button class="absolute bottom-3 right-3 text-primary hover:text-primary-container transition-colors">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px]" data-icon="send">send</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Action Group -->
|
||||||
|
<div class="p-container-padding bg-surface-container-lowest border-t border-outline-variant mt-auto flex flex-col gap-stack-sm">
|
||||||
|
<button class="w-full py-3 bg-tertiary-container/30 text-on-surface-variant rounded-lg text-label-md font-label-md font-bold cursor-not-allowed border border-outline-variant/30 flex justify-center items-center gap-2" disabled="">
|
||||||
|
<span aria-hidden="true" class="material-symbols-outlined text-[18px]" data-icon="check_circle">check_circle</span>
|
||||||
|
승인
|
||||||
|
</button>
|
||||||
|
<div class="flex gap-stack-sm">
|
||||||
|
<button class="flex-1 py-3 bg-surface-container-high text-on-surface rounded-lg text-label-md font-label-md font-bold hover:bg-surface-dim transition-colors border border-outline-variant">
|
||||||
|
조건부 승인
|
||||||
|
</button>
|
||||||
|
<button class="flex-1 py-3 bg-surface-container-lowest text-error rounded-lg text-label-md font-label-md font-bold hover:bg-error/5 transition-colors border border-error">
|
||||||
|
반려
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="text-center text-[10px] text-on-surface-variant mt-1">※ 승인하려면 모든 AI 위반 항목을 '확인함' 처리해야 합니다.</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,366 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>유틸리티 신청 확인 - KINTEX AI</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=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", "sans-serif"],
|
||||||
|
"display-lg-mobile": ["Inter", "sans-serif"],
|
||||||
|
"display-lg": ["Inter", "sans-serif"],
|
||||||
|
"headline-md": ["Inter", "sans-serif"],
|
||||||
|
"body-base": ["Inter", "sans-serif"],
|
||||||
|
"body-sm": ["Inter", "sans-serif"],
|
||||||
|
"label-md": ["Geist", "sans-serif"],
|
||||||
|
"label-xs": ["Geist", "sans-serif"]
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
body { font-family: 'Inter', sans-serif; }
|
||||||
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||||
|
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }
|
||||||
|
|
||||||
|
/* Blueprint Paper Effect */
|
||||||
|
.blueprint-bg {
|
||||||
|
background-color: #f1f3ff;
|
||||||
|
background-image: linear-gradient(rgba(0, 78, 139, 0.05) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(0, 78, 139, 0.05) 1px, transparent 1px);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background min-h-screen flex antialiased">
|
||||||
|
<!-- SideNavBar (from JSON) -->
|
||||||
|
<nav class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="px-container-padding mb-stack-lg flex items-center gap-stack-sm">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-on-primary">
|
||||||
|
<span class="material-symbols-outlined fill text-[20px]">architecture</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-title-sm font-title-sm font-bold text-primary">KINTEX AI</h1>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant uppercase tracking-wider">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Main Tabs -->
|
||||||
|
<div class="flex-1 flex flex-col gap-base">
|
||||||
|
<a class="flex items-center gap-stack-sm px-container-padding py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm px-container-padding py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="architecture">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
<!-- Active Tab: Exhibitor Management (Mapped due to utility order context) -->
|
||||||
|
<a class="flex items-center gap-stack-sm px-container-padding py-stack-sm text-primary font-bold border-r-4 border-primary bg-primary-container/10 opacity-90 transition-all duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined fill" data-icon="groups">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm px-container-padding py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="assignment">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm px-container-padding py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- Footer Tabs -->
|
||||||
|
<div class="flex flex-col gap-base mt-auto">
|
||||||
|
<a class="flex items-center gap-stack-sm px-container-padding py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-stack-sm px-container-padding py-stack-sm text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Workspace -->
|
||||||
|
<main class="ml-60 flex-1 flex flex-col h-screen overflow-hidden bg-background">
|
||||||
|
<!-- Workflow Header (Stepper) -->
|
||||||
|
<header class="bg-surface-container-lowest border-b border-outline-variant h-16 flex items-center justify-between px-container-padding shrink-0">
|
||||||
|
<div class="flex items-center gap-stack-sm text-on-surface">
|
||||||
|
<button class="p-2 hover:bg-surface-container rounded-full transition-colors flex items-center justify-center text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">arrow_back</span>
|
||||||
|
</button>
|
||||||
|
<h2 class="text-title-sm font-title-sm">유틸리티 신청</h2>
|
||||||
|
</div>
|
||||||
|
<!-- 3-Step Stepper -->
|
||||||
|
<div class="flex items-center gap-stack-md text-label-md font-label-md">
|
||||||
|
<!-- Step 1 (Completed) -->
|
||||||
|
<div class="flex items-center gap-2 text-on-surface-variant">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-surface-container-high flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined text-[16px] fill">check</span>
|
||||||
|
</div>
|
||||||
|
<span>배선 설계</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-8 h-px bg-outline-variant"></div>
|
||||||
|
<!-- Step 2 (Active) -->
|
||||||
|
<div class="flex items-center gap-2 text-primary font-bold">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-primary text-on-primary flex items-center justify-center">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<span>신청 확인</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-8 h-px bg-outline-variant"></div>
|
||||||
|
<!-- Step 3 (Pending) -->
|
||||||
|
<div class="flex items-center gap-2 text-outline">
|
||||||
|
<div class="w-6 h-6 rounded-full border border-outline flex items-center justify-center">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<span>제출 완료</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Empty div for flex balance -->
|
||||||
|
<div class="w-24"></div>
|
||||||
|
</header>
|
||||||
|
<!-- Content Area -->
|
||||||
|
<div class="flex-1 overflow-y-auto p-container-padding">
|
||||||
|
<div class="max-w-[1200px] mx-auto grid grid-cols-12 gap-gutter h-full min-h-[700px]">
|
||||||
|
<!-- LEFT HALF: Document Preview Card (col-span-7) -->
|
||||||
|
<section class="col-span-12 lg:col-span-7 bg-surface-container-lowest border border-outline-variant rounded-xl flex flex-col shadow-sm overflow-hidden">
|
||||||
|
<!-- Card Header -->
|
||||||
|
<div class="px-stack-lg py-stack-md border-b border-outline-variant flex items-center justify-between bg-surface-bright">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-1">
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface">유틸리티 시공 위치표시도</h3>
|
||||||
|
<!-- AI Label -->
|
||||||
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-secondary text-secondary bg-secondary-container/10 text-label-xs font-label-xs">
|
||||||
|
<span class="material-symbols-outlined text-[12px] fill">auto_awesome</span>
|
||||||
|
자동 생성
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px]">info</span>
|
||||||
|
수기 작도를 대체하는 공식 제출 서식입니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2 border border-outline-variant rounded-lg text-body-sm font-title-sm hover:bg-surface-container-low transition-colors text-on-surface font-semibold">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||||
|
PDF 다운로드
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Document Canvas (A4 Aspect Ratio container) -->
|
||||||
|
<div class="flex-1 bg-surface-container-low p-stack-lg flex items-center justify-center overflow-hidden">
|
||||||
|
<!-- Simulated A4 Paper -->
|
||||||
|
<div class="bg-white w-full max-w-[500px] aspect-[1/1.414] shadow-md border border-outline-variant relative flex flex-col p-8 blueprint-bg">
|
||||||
|
<!-- Document Title -->
|
||||||
|
<div class="text-center mb-6 pb-4 border-b-2 border-on-surface">
|
||||||
|
<h4 class="text-headline-md font-headline-md text-on-surface tracking-tight mb-2">2024 KINTEX 메가쇼</h4>
|
||||||
|
<h5 class="text-title-sm font-title-sm text-on-surface-variant">부스 유틸리티 배치도</h5>
|
||||||
|
</div>
|
||||||
|
<!-- Placeholder for the actual diagram -->
|
||||||
|
<div class="flex-1 border-2 border-dashed border-primary/30 relative flex items-center justify-center bg-white/80" data-alt="A detailed, technical overhead architectural blueprint of a 3x3 meter exhibition booth. The diagram features precise grid lines, clearly marked dimensions, and technical symbols representing electrical outlets (5kW), internet LAN ports, and water drainage pipes. The visual style is highly professional, clean, and modern, using a sharp high-contrast color palette of stark white, KINTEX deep blue lines, and subtle purple highlights indicating AI-optimized wire routing. The mood is precise, data-dense, and highly functional." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCyhqkQhUgxpuV8gVPBbqC7dtuQG2EEPJtgOjO-0R5eT4gVox3p0VywOMs9BNcpp3McREJsscoNTl9QsyJjyuzrqELOcNEiigfmoEBmVo_2ecY6nxrTWv4DNWRza64oqnubu35tgQOfjAEwjNs9UoOL04p6gmQdJnpKTpvckIioSy51lYCIl7tQef9XMv9_Dbzxq73huEZoG8ASyKeE5dFSGhjR38uezdWGBPdadsXJ1OLjYDs5TwaP')">
|
||||||
|
<!-- Overlay mock wiring paths to enhance realism -->
|
||||||
|
<svg class="absolute inset-0 w-full h-full" preserveaspectratio="none" viewbox="0 0 100 100">
|
||||||
|
<path d="M 20 80 L 20 50 L 50 50" fill="none" stroke="#5427e6" stroke-dasharray="2,2" stroke-width="0.5"></path>
|
||||||
|
<circle cx="50" cy="50" fill="#ba1a1a" r="1.5"></circle>
|
||||||
|
<text fill="#141b2c" font-family="Inter" font-size="2" font-weight="600" x="52" y="49">전기 5kW</text>
|
||||||
|
<path d="M 80 80 L 80 30 L 60 30" fill="none" stroke="#004e8b" stroke-width="0.5"></path>
|
||||||
|
<circle cx="60" cy="30" fill="#004e8b" r="1.5"></circle>
|
||||||
|
<text fill="#141b2c" font-family="Inter" font-size="2" font-weight="600" x="62" y="29">LAN</text>
|
||||||
|
</svg>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center bg-surface-container-lowest/50 backdrop-blur-[2px] opacity-0 hover:opacity-100 transition-opacity">
|
||||||
|
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg text-body-sm font-title-sm shadow-md flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">zoom_in</span>
|
||||||
|
크게 보기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Document Footer -->
|
||||||
|
<div class="mt-6 pt-4 border-t border-outline-variant flex justify-between text-[10px] text-on-surface-variant font-label-md">
|
||||||
|
<span>부스 번호: A-104</span>
|
||||||
|
<span>생성일시: 2024-10-24 14:30 KST</span>
|
||||||
|
<span class="flex items-center gap-1 text-secondary"><span class="material-symbols-outlined text-[12px]">verified</span> AI Verified</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- RIGHT HALF: Summary Panel (col-span-5) -->
|
||||||
|
<section class="col-span-12 lg:col-span-5 flex flex-col gap-stack-md h-full">
|
||||||
|
<!-- Main Summary Card -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl flex flex-col shadow-sm flex-1">
|
||||||
|
<div class="px-stack-lg py-stack-md border-b border-outline-variant bg-surface-bright flex items-center justify-between">
|
||||||
|
<h3 class="text-title-sm font-title-sm text-on-surface">신청 내역</h3>
|
||||||
|
<span class="text-label-xs font-label-xs bg-surface-container-high text-primary px-2 py-1 rounded-md font-semibold">D-25</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-lg flex flex-col gap-stack-lg flex-1">
|
||||||
|
<!-- Cost Table -->
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="flex justify-between items-center py-3 border-b border-outline-variant text-body-sm font-body-sm text-on-surface">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-primary"></div>
|
||||||
|
<span>전기 (24시간) 5kW</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-medium">₩ 275,000</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-3 border-b border-outline-variant text-body-sm font-body-sm text-on-surface">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-primary"></div>
|
||||||
|
<span>분전반 (차단기 포함)</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-medium">₩ 100,000</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-3 border-b border-outline-variant text-body-sm font-body-sm text-on-surface">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-primary"></div>
|
||||||
|
<span>전용선 인터넷 (LAN)</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-medium">₩ 150,000</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center py-3 border-b border-outline-variant text-body-sm font-body-sm text-on-surface">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-primary"></div>
|
||||||
|
<span>급배수 (싱크대 연결용)</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-medium">₩ 150,000</span>
|
||||||
|
</div>
|
||||||
|
<!-- Total -->
|
||||||
|
<div class="flex justify-between items-end pt-6 pb-2">
|
||||||
|
<span class="text-body-base font-body-base text-on-surface-variant">총 결제 예정 금액 (VAT 포함)</span>
|
||||||
|
<span class="text-headline-md font-headline-md text-primary tracking-tight">₩ 675,000</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Info Banner -->
|
||||||
|
<div class="bg-surface-container-low border border-surface-dim rounded-lg p-3 flex items-start gap-3">
|
||||||
|
<span class="material-symbols-outlined text-primary mt-0.5 text-[20px]">schedule</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-md font-label-md text-on-surface mb-1">공급 시점 안내</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant">모든 유틸리티는 <strong>장치 마지막 날 오후 2시 이후</strong>부터 순차적으로 공급 및 테스트가 진행됩니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Applicant Info Block -->
|
||||||
|
<div class="mt-auto pt-stack-md border-t border-outline-variant">
|
||||||
|
<h4 class="text-label-md font-label-md text-on-surface-variant mb-3 uppercase tracking-wider">신청자 정보</h4>
|
||||||
|
<div class="grid grid-cols-2 gap-y-3 gap-x-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-label-xs font-label-xs text-outline mb-1">참가업체명</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface font-medium">(주)테크솔루션즈</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-label-xs font-label-xs text-outline mb-1">부스 번호</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface font-medium">A-104 (독립부스)</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<p class="text-label-xs font-label-xs text-outline mb-1">담당자 연락처</p>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface font-medium">김전시 과장 / 010-1234-5678 / dev@techsolutions.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Action Area (Checkboxes & Button) -->
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-lg shadow-sm">
|
||||||
|
<div class="flex flex-col gap-3 mb-6">
|
||||||
|
<label class="flex items-start gap-3 cursor-pointer group">
|
||||||
|
<div class="relative flex items-center justify-center mt-0.5">
|
||||||
|
<input class="peer appearance-none w-5 h-5 border-2 border-outline rounded-md checked:bg-primary checked:border-primary transition-colors cursor-pointer" type="checkbox"/>
|
||||||
|
<span class="material-symbols-outlined text-on-primary absolute text-[16px] pointer-events-none opacity-0 peer-checked:opacity-100 font-bold">check</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface group-hover:text-primary transition-colors">마감(D-25) 이후에는 배치도 수정 및 유틸리티 변경이 불가함을 확인했습니다.</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-start gap-3 cursor-pointer group">
|
||||||
|
<div class="relative flex items-center justify-center mt-0.5">
|
||||||
|
<input class="peer appearance-none w-5 h-5 border-2 border-outline rounded-md checked:bg-primary checked:border-primary transition-colors cursor-pointer" type="checkbox"/>
|
||||||
|
<span class="material-symbols-outlined text-on-primary absolute text-[16px] pointer-events-none opacity-0 peer-checked:opacity-100 font-bold">check</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-body-sm font-body-sm text-on-surface group-hover:text-primary transition-colors">공시가 기준 견적에 동의하며, 최종 결제는 별도 정산 페이지에서 진행됨을 이해했습니다.</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button class="w-full bg-primary hover:bg-surface-tint text-on-primary text-title-sm font-title-sm py-4 rounded-xl shadow-md transition-all duration-200 flex items-center justify-center gap-2 group">
|
||||||
|
신청 제출
|
||||||
|
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,445 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>부스 유틸리티 배선 플래너 - KINTEX AI</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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&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>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.material-symbols-outlined.fill {
|
||||||
|
font-variation-settings: 'FILL' 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Canvas specific styles */
|
||||||
|
.canvas-bg {
|
||||||
|
background-color: #1C2536;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
.trench-line {
|
||||||
|
stroke: rgba(255,255,255,0.2);
|
||||||
|
stroke-width: 4;
|
||||||
|
stroke-dasharray: 8 4;
|
||||||
|
}
|
||||||
|
.wire-electricity {
|
||||||
|
stroke: #ef4444; /* red-500 */
|
||||||
|
stroke-width: 3;
|
||||||
|
}
|
||||||
|
.wire-network {
|
||||||
|
stroke: #3b82f6; /* blue-500 */
|
||||||
|
stroke-width: 3;
|
||||||
|
stroke-dasharray: 6 6;
|
||||||
|
}
|
||||||
|
.wire-plumbing {
|
||||||
|
stroke: #22c55e; /* green-500 */
|
||||||
|
stroke-width: 3;
|
||||||
|
stroke-dasharray: 2 4;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background font-body-base h-screen flex overflow-hidden">
|
||||||
|
<!-- SideNavBar (from JSON) -->
|
||||||
|
<nav class="bg-surface-container-low dark:bg-inverse-surface text-primary dark:text-primary-fixed-dim fixed left-0 top-0 h-screen w-60 border-r border-outline-variant dark:border-outline flex flex-col py-container-padding z-50">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="px-container-padding mb-stack-lg">
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<span class="material-symbols-outlined text-[32px]">architecture</span>
|
||||||
|
<div>
|
||||||
|
<div class="text-headline-md font-headline-md font-bold text-primary dark:text-primary-fixed">KINTEX AI</div>
|
||||||
|
<div class="text-label-md font-label-md text-on-surface-variant dark:text-surface-variant">Exhibition Manager</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Main Navigation -->
|
||||||
|
<div class="flex-1 overflow-y-auto">
|
||||||
|
<ul class="space-y-1">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-container-padding py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-container-padding py-3 text-primary dark:text-primary-fixed-dim font-bold border-r-4 border-primary dark:border-primary-fixed-dim bg-primary-container/10 opacity-90 transition-all duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined fill">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-container-padding py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-container-padding py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-container-padding py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- Footer Navigation -->
|
||||||
|
<div class="mt-auto border-t border-outline-variant/50 pt-stack-md">
|
||||||
|
<ul class="space-y-1">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-container-padding py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-container-padding py-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<main class="ml-60 flex-1 flex flex-col h-screen overflow-hidden">
|
||||||
|
<!-- Top Context Header -->
|
||||||
|
<header class="flex-none border-b border-outline-variant bg-surface">
|
||||||
|
<!-- Warning Banner -->
|
||||||
|
<div class="bg-[#FFEDD5] border-b border-[#FDBA74] px-container-padding py-2 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[#EA580C] text-lg">warning</span>
|
||||||
|
<span class="text-[#EA580C] text-body-sm font-body-sm font-medium">유틸리티 신청 마감 D-6 — 인터넷 회선은 현장 추가 신청 불가</span>
|
||||||
|
</div>
|
||||||
|
<div class="px-container-padding py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="text-on-surface-variant hover:text-on-surface">
|
||||||
|
<span class="material-symbols-outlined">arrow_back</span>
|
||||||
|
</button>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-title-sm font-title-sm text-on-surface">부스 A-102 · 홀7</h1>
|
||||||
|
<p class="text-label-sm text-on-surface-variant">유틸리티 배선 플래너</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="flex bg-surface-container-low rounded p-1 border border-outline-variant">
|
||||||
|
<button class="px-4 py-2 rounded text-label-md font-label-md bg-white shadow-sm text-primary font-bold">전기</button>
|
||||||
|
<button class="px-4 py-2 rounded text-label-md font-label-md text-on-surface-variant hover:text-on-surface">네트워크·전화</button>
|
||||||
|
<button class="px-4 py-2 rounded text-label-md font-label-md text-on-surface-variant hover:text-on-surface">급배수·압축공기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Editor Workspace -->
|
||||||
|
<div class="flex-1 flex overflow-hidden">
|
||||||
|
<!-- Left Panel: Device List Builder -->
|
||||||
|
<aside class="w-[320px] flex-none bg-surface border-r border-outline-variant flex flex-col">
|
||||||
|
<div class="p-container-padding border-b border-outline-variant flex justify-between items-center bg-surface-bright">
|
||||||
|
<h2 class="text-title-sm font-title-sm">사용 기기 입력</h2>
|
||||||
|
<button class="text-primary hover:bg-primary-container/10 p-1 rounded">
|
||||||
|
<span class="material-symbols-outlined">add</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto p-container-padding space-y-4 bg-surface-bright">
|
||||||
|
<!-- Device Rows -->
|
||||||
|
<div class="border border-outline-variant rounded bg-white p-3 shadow-sm">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="text-body-sm font-bold">로봇 시연장비</span>
|
||||||
|
<button class="text-outline hover:text-error"><span class="material-symbols-outlined text-[18px]">close</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-body-sm text-on-surface-variant">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="bg-surface-container-low px-2 py-1 rounded">2대</span>
|
||||||
|
</div>
|
||||||
|
<span>1.5kW (총 3.0kW)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border border-outline-variant rounded bg-white p-3 shadow-sm">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="text-body-sm font-bold">LED 스포트 조명</span>
|
||||||
|
<button class="text-outline hover:text-error"><span class="material-symbols-outlined text-[18px]">close</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-body-sm text-on-surface-variant">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="bg-surface-container-low px-2 py-1 rounded">6개</span>
|
||||||
|
</div>
|
||||||
|
<span>0.2kW (총 1.2kW)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border border-outline-variant rounded bg-white p-3 shadow-sm">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="text-body-sm font-bold">노트북 및 모니터</span>
|
||||||
|
<button class="text-outline hover:text-error"><span class="material-symbols-outlined text-[18px]">close</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-body-sm text-on-surface-variant">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="bg-surface-container-low px-2 py-1 rounded">3세트</span>
|
||||||
|
</div>
|
||||||
|
<span>0.2kW (총 0.6kW)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Summary Card -->
|
||||||
|
<div class="p-container-padding border-t border-outline-variant bg-surface-container-low">
|
||||||
|
<div class="border border-[#D8B4E2] rounded-lg bg-white p-4 shadow-sm relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 left-0 w-1 h-full bg-[#6D4AFF]"></div>
|
||||||
|
<div class="flex items-center gap-1 mb-2">
|
||||||
|
<span class="material-symbols-outlined text-secondary-container text-[16px]">auto_awesome</span>
|
||||||
|
<span class="text-label-md font-label-md text-secondary-container">AI 산출</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-end mb-2">
|
||||||
|
<span class="text-body-sm text-on-surface-variant">필요 전력</span>
|
||||||
|
<span class="text-title-sm font-bold line-through text-outline">4.8kW</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-end mb-4">
|
||||||
|
<span class="text-body-sm text-on-surface-variant">권장 신청</span>
|
||||||
|
<span class="text-headline-md font-bold text-primary">5.0kW</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-primary-container/10 text-primary-container text-body-sm px-3 py-2 rounded font-medium flex items-center justify-between">
|
||||||
|
<span>분전반 50A × 1식 자동 산출</span>
|
||||||
|
<span class="material-symbols-outlined text-[18px]">check_circle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Center: Canvas -->
|
||||||
|
<section class="flex-1 canvas-bg relative overflow-hidden flex flex-col">
|
||||||
|
<!-- Toolbar overlay -->
|
||||||
|
<div class="absolute top-4 left-4 right-4 flex justify-between items-start z-10 pointer-events-none">
|
||||||
|
<div class="bg-inverse-surface/80 backdrop-blur border border-white/10 rounded-lg p-2 flex gap-2 pointer-events-auto shadow-lg">
|
||||||
|
<button class="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded" title="전원 포인트 추가">
|
||||||
|
<span class="material-symbols-outlined">power</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded" title="네트워크 포인트 추가">
|
||||||
|
<span class="material-symbols-outlined">router</span>
|
||||||
|
</button>
|
||||||
|
<div class="w-px bg-white/20 my-1"></div>
|
||||||
|
<button class="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded" title="자동 배선">
|
||||||
|
<span class="material-symbols-outlined text-secondary-fixed-dim">route</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="bg-inverse-surface/80 backdrop-blur border border-white/10 rounded-lg p-3 text-white pointer-events-auto shadow-lg text-body-sm">
|
||||||
|
<div class="font-bold mb-2 text-xs text-white/50 uppercase tracking-wider">범례</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-0.5 bg-red-500"></div>
|
||||||
|
<span>전기 (220V)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-0.5 border-t-2 border-dashed border-blue-500"></div>
|
||||||
|
<span>네트워크 (LAN)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-0.5 border-t-2 border-dotted border-green-500"></div>
|
||||||
|
<span>급배수</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 mt-3 pt-3 border-t border-white/10">
|
||||||
|
<div class="w-6 h-2 border border-white/20 flex gap-1 items-center justify-center">
|
||||||
|
<div class="w-1 h-1 bg-white/30 rounded-full"></div>
|
||||||
|
<div class="w-1 h-1 bg-white/30 rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-white/70 text-xs">바닥 트렌치</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Canvas Area (SVG visualization) -->
|
||||||
|
<div class="flex-1 relative cursor-crosshair">
|
||||||
|
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Floor Trenches -->
|
||||||
|
<path class="trench-line" d="M 100 0 L 100 800"></path>
|
||||||
|
<path class="trench-line" d="M 500 0 L 500 800"></path>
|
||||||
|
<path class="trench-line" d="M 0 600 L 800 600"></path>
|
||||||
|
<!-- Booth Outline -->
|
||||||
|
<g transform="translate(250, 150)">
|
||||||
|
<rect fill="rgba(255,255,255,0.02)" height="200" stroke="rgba(255,255,255,0.2)" stroke-width="2" width="300"></rect>
|
||||||
|
<text fill="rgba(255,255,255,0.2)" font-family="Inter" font-size="24" font-weight="bold" text-anchor="middle" x="150" y="100">부스 A-102</text>
|
||||||
|
<!-- Equipment Footprints -->
|
||||||
|
<rect fill="rgba(255,255,255,0.1)" height="40" stroke="rgba(255,255,255,0.3)" width="60" x="20" y="20"></rect>
|
||||||
|
<rect fill="rgba(255,255,255,0.1)" height="40" stroke="rgba(255,255,255,0.3)" width="60" x="220" y="20"></rect>
|
||||||
|
<rect fill="rgba(255,255,255,0.1)" height="30" stroke="rgba(255,255,255,0.3)" width="60" x="120" y="140"></rect>
|
||||||
|
</g>
|
||||||
|
<!-- Routed Wires -->
|
||||||
|
<!-- Electric -->
|
||||||
|
<path class="wire-electricity" d="M 500 600 L 500 200 L 450 200" fill="none"></path>
|
||||||
|
<path class="wire-electricity" d="M 500 600 L 500 300 L 310 300" fill="none"></path>
|
||||||
|
<!-- Network -->
|
||||||
|
<path class="wire-network" d="M 100 600 L 100 200 L 270 200" fill="none"></path>
|
||||||
|
<!-- Plumbing (just showing as example) -->
|
||||||
|
<path class="wire-plumbing" d="M 100 200 L 100 100 L 300 100" fill="none"></path>
|
||||||
|
<!-- Connection Points -->
|
||||||
|
<!-- Electric points -->
|
||||||
|
<circle cx="450" cy="200" fill="#ef4444" r="6" stroke="#1C2536" stroke-width="2"></circle>
|
||||||
|
<circle cx="310" cy="300" fill="#ef4444" r="6" stroke="#1C2536" stroke-width="2"></circle>
|
||||||
|
<!-- Network point -->
|
||||||
|
<circle cx="270" cy="200" fill="#3b82f6" r="6" stroke="#1C2536" stroke-width="2"></circle>
|
||||||
|
<!-- Trench connection points -->
|
||||||
|
<rect fill="#ef4444" height="10" width="10" x="495" y="595"></rect>
|
||||||
|
<rect fill="#3b82f6" height="10" width="10" x="95" y="595"></rect>
|
||||||
|
</svg>
|
||||||
|
<!-- Trench Badge -->
|
||||||
|
<div class="absolute bottom-6 left-6 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-3 py-1 flex items-center gap-2">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
||||||
|
<span class="text-white text-xs font-medium tracking-wide">가정 트렌치 좌표 적용됨</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Right Panel: Auto Quote -->
|
||||||
|
<aside class="w-[340px] flex-none bg-surface border-l border-outline-variant flex flex-col">
|
||||||
|
<div class="p-container-padding border-b border-outline-variant bg-surface-bright">
|
||||||
|
<h2 class="text-title-sm font-title-sm flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary">receipt_long</span>
|
||||||
|
자동 견적
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto p-container-padding bg-white">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Category: Electricity -->
|
||||||
|
<div>
|
||||||
|
<div class="text-label-sm font-bold text-outline uppercase tracking-wider mb-3">전기 설비</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-body-sm text-on-surface">단상 220V (주간) - 5kW</span>
|
||||||
|
<span class="text-body-sm font-medium text-on-surface">₩ 275,000</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-body-sm text-on-surface">분전반 임대 (50A)</span>
|
||||||
|
<span class="text-body-sm font-medium text-on-surface">₩ 100,000</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-on-surface-variant pl-4 border-l-2 border-outline-variant">
|
||||||
|
<span class="text-label-sm">현장 배선 시공비 (기본)</span>
|
||||||
|
<span class="text-label-sm">포함</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Category: Network -->
|
||||||
|
<div>
|
||||||
|
<div class="text-label-sm font-bold text-outline uppercase tracking-wider mb-3">통신 설비</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-body-sm text-on-surface">인터넷 전용선 (100Mbps)</span>
|
||||||
|
<span class="text-body-sm font-medium text-on-surface">₩ 150,000</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Total & Action -->
|
||||||
|
<div class="p-container-padding border-t border-outline-variant bg-surface-container-low">
|
||||||
|
<div class="flex justify-between items-end mb-6">
|
||||||
|
<span class="text-body-base font-bold text-on-surface">합계 (VAT 별도)</span>
|
||||||
|
<span class="text-headline-md font-bold text-primary">₩ 525,000</span>
|
||||||
|
</div>
|
||||||
|
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 px-4 rounded-lg flex justify-center items-center gap-2 transition-colors">
|
||||||
|
<span class="material-symbols-outlined">description</span>
|
||||||
|
위치표시도 생성 및 신청
|
||||||
|
</button>
|
||||||
|
<p class="text-label-xs text-center text-on-surface-variant mt-3">
|
||||||
|
신청 후 담당자 검토를 거쳐 최종 확정됩니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,469 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" lang="ko"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Exhibition Studio - AI Render Gallery</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;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"/>
|
||||||
|
<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>
|
||||||
|
.masonry-grid {
|
||||||
|
column-count: 1;
|
||||||
|
column-gap: 16px;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) { .masonry-grid { column-count: 2; } }
|
||||||
|
@media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
|
||||||
|
@media (min-width: 1280px) { .masonry-grid { column-count: 4; } }
|
||||||
|
.masonry-item {
|
||||||
|
break-inside: avoid;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-shimmer {
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(109, 74, 255, 0.1), transparent);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 2s infinite linear;
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: 200% 0; }
|
||||||
|
100% { background-position: -200% 0; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface text-on-surface font-body-base antialiased min-h-screen flex">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="hidden md:flex flex-col h-screen w-60 fixed left-0 top-0 py-container-padding border-r border-outline-variant bg-surface-container-low dark:bg-inverse-surface z-50">
|
||||||
|
<!-- Brand / Header -->
|
||||||
|
<div class="px-container-padding mb-8">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded bg-primary flex items-center justify-center text-on-primary">
|
||||||
|
<span class="material-symbols-outlined" data-icon="business" data-weight="fill" style="font-variation-settings: 'FILL' 1;">business</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-headline-md font-headline-md font-bold text-primary dark:text-primary-fixed">KINTEX AI</h1>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant dark:text-surface-variant">Exhibition Manager</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Navigation Tabs -->
|
||||||
|
<div class="flex-1 overflow-y-auto">
|
||||||
|
<ul class="flex flex-col w-full">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 w-full text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||||
|
<span class="text-label-md font-label-md">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 w-full text-primary dark:text-primary-fixed-dim font-bold border-r-4 border-primary dark:border-primary-fixed-dim bg-primary-container/10 hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors opacity-90 transition-all duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="architecture">architecture</span>
|
||||||
|
<span class="text-label-md font-label-md">Floor Plan Studio</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 w-full text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="groups">groups</span>
|
||||||
|
<span class="text-label-md font-label-md">Exhibitor Management</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 w-full text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="assignment">assignment</span>
|
||||||
|
<span class="text-label-md font-label-md">Documents</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 w-full text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||||
|
<span class="text-label-md font-label-md">Settlement</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- Footer Tabs -->
|
||||||
|
<div class="mt-auto pt-4 border-t border-outline-variant dark:border-outline">
|
||||||
|
<ul class="flex flex-col w-full">
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 w-full text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||||
|
<span class="text-label-md font-label-md">Settings</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="flex items-center gap-3 px-6 py-3 w-full text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-on-surface-variant/20 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
<span class="text-label-md font-label-md">Support</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Area -->
|
||||||
|
<div class="flex-1 flex flex-col md:ml-60 min-h-screen">
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="flex justify-between items-center w-full px-container-padding h-16 bg-surface dark:bg-surface-dim border-b border-outline-variant dark:border-outline docked full-width top-0 sticky z-40">
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<span class="text-title-sm font-title-sm font-bold text-on-surface dark:text-inverse-on-surface">Exhibition Studio</span>
|
||||||
|
<nav class="hidden sm:flex gap-6">
|
||||||
|
<a class="text-label-md font-label-md text-primary dark:text-primary-fixed-dim border-b-2 border-primary dark:border-primary-fixed-dim pb-base hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Projects</a>
|
||||||
|
<a class="text-label-md font-label-md text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Analytics</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="hidden sm:flex items-center gap-3">
|
||||||
|
<span class="bg-on-surface text-surface px-2 py-1 rounded text-label-xs font-label-xs font-bold">D-31</span>
|
||||||
|
<button class="bg-primary text-on-primary px-4 py-2 rounded text-label-md font-label-md font-bold hover:bg-primary-container transition-colors">Publish Layout</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-on-surface-variant">
|
||||||
|
<button class="p-2 hover:bg-surface-container-highest rounded-full transition-colors hover:scale-105 duration-200">
|
||||||
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-2 hover:bg-surface-container-highest rounded-full transition-colors hover:scale-105 duration-200">
|
||||||
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
</button>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-surface-variant overflow-hidden ml-2 border border-outline-variant cursor-pointer hover:scale-105 duration-200">
|
||||||
|
<img alt="User Profile" class="w-full h-full object-cover" data-alt="A professional headshot of a corporate user, neutral lighting, modern corporate environment, high quality, crisp focus." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC1JKMky34Gqhfq4b0MhWdCtuQgjovMYzyJAFk1KGof-cC2eTN_pd9g7BYhfkhDBzXDsauRT_cXlkEF5q7dxbeMLXJqf16SH0IenLO_WtT39J-vyBu_3lH-YK6X2x-ejatidtnMcWkHex-bHtHElcWmhMpcoN5eab6H5yGW5fzu3bvBApBpzN9E9rtZjbmsE-pjk_SVqWKLrtf5yyQ1CO6F20NB46RjXUfIYr6igGKjTR49rY6YqQv_"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Canvas Area -->
|
||||||
|
<main class="flex-1 bg-surface-container-lowest p-6 flex flex-col gap-6">
|
||||||
|
<!-- Context & Controls -->
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-headline-md font-headline-md text-on-surface flex items-center gap-2">
|
||||||
|
AI 렌더링 갤러리
|
||||||
|
<span class="material-symbols-outlined text-secondary-container text-lg" data-icon="auto_awesome" data-weight="fill" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface-variant mt-1">부스 디자인 및 배선 레이아웃의 AI 생성 예상 이미지입니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 bg-surface-container-low p-1 rounded-lg border border-outline-variant">
|
||||||
|
<button class="flex items-center gap-1 px-3 py-1.5 rounded-md bg-surface text-on-surface text-label-md font-label-md border border-outline-variant shadow-sm">
|
||||||
|
<span class="material-symbols-outlined text-[16px]" data-icon="sort">sort</span>
|
||||||
|
최신순
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Info Bar -->
|
||||||
|
<div class="bg-error-container/20 border border-error-container text-on-surface rounded-lg p-3 flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-error" data-icon="info" data-weight="fill" style="font-variation-settings: 'FILL' 1;">info</span>
|
||||||
|
<p class="text-body-sm font-body-sm text-on-surface"><strong>AI 생성 이미지는 계약·심사 서류에 사용할 수 없습니다</strong> — 시공 기준은 공식 도면입니다.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Filter Chips -->
|
||||||
|
<div class="flex flex-wrap gap-2 mt-2">
|
||||||
|
<button class="px-3 py-1.5 rounded-full bg-secondary-container text-on-primary text-label-sm font-label-md border border-secondary-container transition-colors">S1 정면</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-full bg-surface-container text-on-surface text-label-sm font-label-md border border-outline-variant hover:bg-surface-container-high transition-colors">S2 야간</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-full bg-surface-container text-on-surface text-label-sm font-label-md border border-outline-variant hover:bg-surface-container-high transition-colors">S3 통로</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-full bg-surface-container text-on-surface text-label-sm font-label-md border border-outline-variant hover:bg-surface-container-high transition-colors">S4 내부</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-full bg-surface-container text-on-surface text-label-sm font-label-md border border-outline-variant hover:bg-surface-container-high transition-colors">S5 비교</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-full bg-surface-container text-on-surface text-label-sm font-label-md border border-outline-variant hover:bg-surface-container-high transition-colors">S6 배선</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-full bg-surface-container text-on-surface text-label-sm font-label-md border border-outline-variant hover:bg-surface-container-high transition-colors">S7 홀 전경</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Gallery Grid -->
|
||||||
|
<div class="masonry-grid w-full mt-4">
|
||||||
|
<!-- Card 1: Front (S1) -->
|
||||||
|
<div class="masonry-item bg-surface rounded-lg border border-secondary-container/30 overflow-hidden relative group cursor-pointer">
|
||||||
|
<div class="absolute inset-0 border-2 border-secondary-container/50 rounded-lg pointer-events-none z-10 hidden group-hover:block"></div>
|
||||||
|
<!-- AI Badge -->
|
||||||
|
<div class="absolute top-3 left-3 z-20 flex flex-col gap-2">
|
||||||
|
<span class="bg-secondary-container/90 text-on-primary backdrop-blur-sm px-2.5 py-1 rounded-md text-label-xs font-label-xs flex items-center gap-1 shadow-sm border border-secondary-container">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="auto_awesome">auto_awesome</span>
|
||||||
|
S1 정면
|
||||||
|
</span>
|
||||||
|
<span class="bg-surface/90 text-on-surface backdrop-blur-sm px-2 py-1 rounded-md text-label-xs font-label-xs shadow-sm border border-outline-variant">
|
||||||
|
설계 v2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- Watermark -->
|
||||||
|
<div class="absolute inset-0 z-10 flex items-center justify-center opacity-30 pointer-events-none">
|
||||||
|
<span class="text-on-surface font-bold text-xl tracking-widest uppercase transform -rotate-12 bg-surface/50 px-4 py-2 rounded backdrop-blur-sm">AI 생성 예상 이미지</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative w-full h-64 bg-surface-container-high">
|
||||||
|
<img alt="S1 Front View" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" data-alt="Photorealistic 3D rendering of a modern, high-tech exhibition booth viewed directly from the front. The booth features sleek white counters, glowing blue LED accents, and a large central display screen. The lighting is bright and professional, mimicking a large convention hall environment. The aesthetic is corporate, clean, and advanced, showcasing precision design in a light-mode layout." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCicbTvqSTwEY4MODE10IZaU4sxf6q5NZrHxqxWcDn6ai44r0ed052TR9-EFbSthjsc1Vp31MdfMJwrL_5SUUY68PjbLRZYWfsDSAESriIW4PmOIx9l3IQIXl43YHEJnRjFfVUNs1TW7MQb0LibnYZopDwP-rxi0xDUU6jQ5DJeS3a9RyhuFe4Vdbc3yQNDo_7IIu15mGS_JpTS8zr6F1QpE6bG25Q50bHWYawfvzPiUmhi9QDv2OFd"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-surface border-t border-outline-variant flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-tertiary-container"></span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">생성 완료</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant">07.11</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 2: Night (S2) -->
|
||||||
|
<div class="masonry-item bg-surface rounded-lg border border-outline-variant overflow-hidden relative group cursor-pointer">
|
||||||
|
<div class="absolute top-3 left-3 z-20 flex flex-col gap-2">
|
||||||
|
<span class="bg-secondary-container/90 text-on-primary backdrop-blur-sm px-2.5 py-1 rounded-md text-label-xs font-label-xs flex items-center gap-1 shadow-sm border border-secondary-container">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="auto_awesome">auto_awesome</span>
|
||||||
|
S2 야간
|
||||||
|
</span>
|
||||||
|
<span class="bg-surface/90 text-on-surface backdrop-blur-sm px-2 py-1 rounded-md text-label-xs font-label-xs shadow-sm border border-outline-variant">
|
||||||
|
설계 v2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 z-10 flex items-center justify-center opacity-30 pointer-events-none">
|
||||||
|
<span class="text-on-surface font-bold text-xl tracking-widest uppercase transform -rotate-12 bg-surface/50 px-4 py-2 rounded backdrop-blur-sm">AI 생성 예상 이미지</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative w-full h-80 bg-surface-container-high">
|
||||||
|
<img alt="S2 Night View" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" data-alt="Photorealistic rendering of a corporate exhibition booth simulated in a low-light or night-time setting. The booth is dramatically illuminated with stark white spotlights and vibrant purple and blue ambient glowing trims. The surrounding hall is dark, emphasizing the booth's lighting design. The mood is highly technical and atmospheric, reflecting a sophisticated B2B technology aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAVNLXVqsGZU2MMuRf9YbD-Izl3sjyBmoL8o-pCrk-_HcPMxnFbN83cVon7CUxWJz1Cs620iURNk0P8-t4QMXzjpMPDhZ3mvGGEOf_WLktQcmc67r3r5iT2jXzAzzX_VCHMnpEajzx3QkvUh9k21EWwmhfxNmgtTR2EuX5XyrF2Qt0fGv7-Cs9aTlqBIxwzn5tvbm1g8FGtcn1gY3jfyhtoaEore3LkU2pVCVbqvu-UIPSEVT9Hx9cz"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-surface border-t border-outline-variant flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-tertiary-container"></span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">생성 완료</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant">07.11</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 3: Loading Skeleton -->
|
||||||
|
<div class="masonry-item bg-surface rounded-lg border border-secondary-container/50 overflow-hidden relative p-[1px]">
|
||||||
|
<div class="absolute inset-0 border border-secondary-container/30 rounded-lg pointer-events-none z-10 ai-shimmer"></div>
|
||||||
|
<div class="absolute top-3 left-3 z-20 flex flex-col gap-2">
|
||||||
|
<span class="bg-surface-variant text-on-surface-variant px-2.5 py-1 rounded-md text-label-xs font-label-xs flex items-center gap-1 border border-outline-variant">
|
||||||
|
S3 통로
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative w-full h-72 bg-surface-container-low flex flex-col items-center justify-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-secondary-container text-4xl animate-pulse" data-icon="model_training">model_training</span>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span class="text-label-md font-label-md text-on-surface mb-1">AI 렌더링 중...</span>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant">약 15초 남음</span>
|
||||||
|
</div>
|
||||||
|
<!-- Progress bar -->
|
||||||
|
<div class="w-1/2 h-1 bg-surface-variant rounded-full overflow-hidden mt-2">
|
||||||
|
<div class="h-full bg-secondary-container rounded-full w-2/3 animate-pulse"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 4: Wiring (S6) -->
|
||||||
|
<div class="masonry-item bg-surface rounded-lg border border-outline-variant overflow-hidden relative group cursor-pointer">
|
||||||
|
<div class="absolute top-3 left-3 z-20 flex flex-col gap-2">
|
||||||
|
<span class="bg-secondary-container/90 text-on-primary backdrop-blur-sm px-2.5 py-1 rounded-md text-label-xs font-label-xs flex items-center gap-1 shadow-sm border border-secondary-container">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="auto_awesome">auto_awesome</span>
|
||||||
|
S6 배선
|
||||||
|
</span>
|
||||||
|
<span class="bg-surface/90 text-on-surface backdrop-blur-sm px-2 py-1 rounded-md text-label-xs font-label-xs shadow-sm border border-outline-variant">
|
||||||
|
설계 v1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative w-full h-60 bg-surface-container-highest p-4 flex items-center justify-center">
|
||||||
|
<img alt="S6 Wiring Diagram" class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105" data-alt="A top-down schematic wiring diagram of an exhibition booth. The background is a clean, light grid. Technical lines in vivid blue and red indicate electrical routing and power drops, overlaid on a simplified geometric floor plan of the booth. The visual style is crisp, precise, and highly functional, representing an architectural plan rather than a 3D space." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAdgeIQB3srQHnKbmfd-joHUrz5r_Cm-EksIus_5I14ciXoNrEBDAPf_NTx8oj6lUK0t86EBGV8Kg7b5EsgaufQg6P3EdvcJCL5UbRmgoeK-JwF-_GeLvyk8CEGl2zYZe6vPlj78s391Z-NBmuPodt96MT007BNYKv2o3biew2rjfGFVXBTJUavmc5zVhcuiujZLrriwu0RsELmJ3gvzEbR8mxOq5fgSLoZtVdDuZrvG40-6V0-9VxU"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-surface border-t border-outline-variant flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-tertiary-container"></span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">생성 완료</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant">07.10</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 5: Failed State -->
|
||||||
|
<div class="masonry-item bg-error-container/10 rounded-lg border border-error/30 overflow-hidden relative p-[1px]">
|
||||||
|
<div class="absolute top-3 left-3 z-20 flex flex-col gap-2">
|
||||||
|
<span class="bg-surface-variant text-on-surface-variant px-2.5 py-1 rounded-md text-label-xs font-label-xs flex items-center gap-1 border border-outline-variant">
|
||||||
|
S4 내부
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative w-full h-64 bg-surface-container-low flex flex-col items-center justify-center gap-3 p-6 text-center">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-error-container flex items-center justify-center mb-2">
|
||||||
|
<span class="material-symbols-outlined text-error" data-icon="error_outline">error_outline</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">렌더링 실패</span>
|
||||||
|
<p class="text-label-xs font-label-xs text-on-surface-variant">도면 데이터 복잡도로 인해 시간 초과가 발생했습니다.</p>
|
||||||
|
<button class="mt-2 px-4 py-2 rounded-md bg-surface text-on-surface text-label-sm font-label-md border border-outline-variant hover:bg-surface-container-high transition-colors flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px]" data-icon="refresh">refresh</span>
|
||||||
|
다시 시도
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 6: Hall View (S7) -->
|
||||||
|
<div class="masonry-item bg-surface rounded-lg border border-outline-variant overflow-hidden relative group cursor-pointer">
|
||||||
|
<div class="absolute top-3 left-3 z-20 flex flex-col gap-2">
|
||||||
|
<span class="bg-secondary-container/90 text-on-primary backdrop-blur-sm px-2.5 py-1 rounded-md text-label-xs font-label-xs flex items-center gap-1 shadow-sm border border-secondary-container">
|
||||||
|
<span class="material-symbols-outlined text-[14px]" data-icon="auto_awesome">auto_awesome</span>
|
||||||
|
S7 홀 전경
|
||||||
|
</span>
|
||||||
|
<span class="bg-surface/90 text-on-surface backdrop-blur-sm px-2 py-1 rounded-md text-label-xs font-label-xs shadow-sm border border-outline-variant">
|
||||||
|
설계 v2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 z-10 flex items-center justify-center opacity-30 pointer-events-none">
|
||||||
|
<span class="text-on-surface font-bold text-xl tracking-widest uppercase transform -rotate-12 bg-surface/50 px-4 py-2 rounded backdrop-blur-sm">AI 생성 예상 이미지</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative w-full h-96 bg-surface-container-high">
|
||||||
|
<img alt="S7 Hall Overview" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" data-alt="A wide, sweeping wide-angle photorealistic render of an entire exhibition hall. The focal point is a large, elaborate corporate booth complex amidst rows of other simplified booths. The hall ceiling is high with industrial trusses and powerful overarching lights. The color palette features a mix of stark architectural whites, greys, and striking KINTEX blue and purple accents from the primary booth displays." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBsXazsEYjdTuqRZjz3_JtROvy0msrxd9sic8zSGRLOq0XIoBu-WrG5o1Wplx3MelTEblJYlpcmDMudzqMvLMaaEkMUF4QeiTS55VYUfsrAqRq4rrrjAe8lnoalYUroxoMEvB1ejF06Jg1xFxGqpEfWCJSZ5y1ICABgMIzRaVCJsoh7XY_C741RKybZHHGKqGqQKODp7PNB4FqgizeuBhKmHLEhbz8pnmBt3T4IKVzDzVRh8sgWspFC"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-surface border-t border-outline-variant flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-tertiary-container"></span>
|
||||||
|
<span class="text-label-md font-label-md text-on-surface">생성 완료</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-label-xs font-label-xs text-on-surface-variant">07.11</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
Loading…
Reference in New Issue
Block a user