250 lines
19 KiB
HTML
250 lines
19 KiB
HTML
<!doctype html>
|
|
|
|
<html class="light" lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4516420168710424" crossorigin="anonymous"></script>
|
|
<title>zenn's inventory</title>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<!-- Google Fonts: Inter -->
|
|
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<!-- Material Symbols -->
|
|
<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: {
|
|
"primary": "#137fec",
|
|
"background-light": "#f6f7f8",
|
|
"background-dark": "#101922",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"]
|
|
},
|
|
borderRadius: {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
/* .material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
} */
|
|
/* 스크롤바 완전히 숨기기 */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
#modal-main-carousel-container {
|
|
scroll-snap-type: none;
|
|
overflow-x: hidden;
|
|
}
|
|
/* .filter-chip,
|
|
.status-chip {
|
|
@apply px-4 py-2 rounded-full text-sm font-medium transition
|
|
border border-slate-200 dark:border-slate-700
|
|
bg-slate-50 dark:bg-slate-800
|
|
text-slate-700 dark:text-slate-300;
|
|
} */
|
|
|
|
/* .filter-chip.active,
|
|
.status-chip.active {
|
|
@apply bg-primary text-white border-primary;
|
|
} */
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark transition-colors duration-200">
|
|
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
|
|
<div class="layout-container flex h-full grow flex-col">
|
|
<!-- Top Navigation Bar -->
|
|
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-40 py-3">
|
|
<div class="flex items-center gap-8">
|
|
<div class="flex items-center gap-3 text-slate-900 dark:text-white">
|
|
<div class="flex items-center justify-center size-8 bg-primary rounded-lg text-white">
|
|
<span class="material-symbols-outlined text-xl">inventory_2</span>
|
|
</div>
|
|
<h2 class="text-lg font-bold leading-tight tracking-tight">sori.inventory</h2>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-1 justify-end gap-4 items-center">
|
|
<label class="hidden sm:flex flex-col min-w-40 !h-10 max-w-64">
|
|
<div class="flex w-full flex-1 items-stretch rounded-lg h-full border border-slate-200 dark:border-slate-700">
|
|
<div class="text-slate-400 flex items-center justify-center pl-3">
|
|
<span class="material-symbols-outlined text-[20px]">search</span>
|
|
</div>
|
|
<input id="search-input" class="form-input flex w-full min-w-0 flex-1 border-none bg-transparent focus:outline-0 focus:ring-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 px-3 text-sm font-normal" placeholder="검색어 입력..." value="" />
|
|
</div>
|
|
</label>
|
|
<button id="theme-toggle" class="flex items-center justify-center size-10 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
|
|
<span id="theme-toggle-dark-icon" class="material-symbols-outlined hidden">dark_mode</span>
|
|
<span id="theme-toggle-light-icon" class="material-symbols-outlined hidden">light_mode</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="flex-1">
|
|
<!-- Headline Section -->
|
|
<div class="px-6 md:px-40 py-12 flex flex-col items-center">
|
|
<h2 class="text-slate-900 dark:text-white tracking-tight text-3xl md:text-5xl font-bold leading-tight text-center max-w-3xl">
|
|
일상의 조각들,
|
|
<br />
|
|
그리고 취향의 공유.
|
|
</h2>
|
|
<p class="mt-4 text-slate-500 dark:text-slate-400 text-center text-lg max-w-xl break-keep">현재 제 곁에서 일상을 채우고 있는 도구와 물건들입니다. 때로는 기록으로, 때로는 누군가를 위한 제안으로 이 공간을 채워갑니다.</p>
|
|
</div>
|
|
<!-- -->
|
|
|
|
<section class="mb-8 px-6 md:px-40">
|
|
<div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 flex flex-col gap-4">
|
|
<!-- 카테고리 -->
|
|
<div class="flex flex-col gap-2">
|
|
<h4 class="text-xs font-semibold uppercase tracking-wider text-slate-500">Category</h4>
|
|
<div id="filter-chips" class="flex flex-wrap gap-2"></div>
|
|
</div>
|
|
|
|
<div class="h-px bg-slate-100 dark:bg-slate-700"></div>
|
|
|
|
<!-- 상태 -->
|
|
<div class="flex flex-col gap-2">
|
|
<h4 class="text-xs font-semibold uppercase tracking-wider text-slate-500">Status</h4>
|
|
<div id="status-chips" class="flex flex-wrap gap-2"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Filters/Chips Section -->
|
|
|
|
<div class="px-6 md:px-40 flex justify-center">
|
|
<div class="flex gap-2 p-1 flex-wrap justify-center bg-slate-100 dark:bg-slate-800 rounded-xl">
|
|
<!-- filter-chips -->
|
|
</div>
|
|
</div>
|
|
<!-- Product Grid -->
|
|
<div class="px-6 md:px-40 py-10">
|
|
<div id="product-grid" class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
|
|
<!-- Product Item -->
|
|
</div>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="px-6 md:px-40 py-12">
|
|
<div id="pagination" class="flex items-center justify-center gap-2"></div>
|
|
</div>
|
|
</main>
|
|
<!-- Modal -->
|
|
<!-- Backdrop Overlay -->
|
|
<div id="product-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4 md:p-10 hidden" onclick="if(event.target === this) closeModal()">
|
|
<!-- Modal Container: 모바일에서 화면 안에 맞춤 (dvh), 이미지 영역 높이 제한 -->
|
|
<div class="relative w-full max-w-6xl max-h-[calc(100dvh-2rem)] md:max-h-[90vh] min-h-0 md:min-h-[60vh] bg-white dark:bg-background-dark rounded-xl shadow-2xl overflow-hidden flex flex-col md:flex-row border border-gray-200 dark:border-gray-800">
|
|
<!-- Close Button -->
|
|
<button onclick="closeModal()" class="absolute top-4 right-4 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-white/80 dark:bg-gray-800/80 backdrop-blur hover:bg-white dark:hover:bg-gray-700 transition-colors shadow-sm">
|
|
<span class="material-symbols-outlined text-gray-900 dark:text-white">close</span>
|
|
</button>
|
|
<!-- Left: Gallery Section (모바일: 상하좌우 패딩으로 이미지 영역 확실히) -->
|
|
<div class="w-full md:w-3/5 flex flex-col relative overflow-hidden min-h-0 max-h-[40dvh] md:max-h-none p-3 md:p-0">
|
|
<!-- 캐러셀 래퍼: dots는 여기 기준으로 고정, 스크롤은 안쪽만 -->
|
|
<div class="relative flex-1 min-h-0 flex ml-0 md:ml-24 rounded-md">
|
|
<div id="modal-main-carousel-container" class="flex-1 min-h-0 overflow-x-auto no-scrollbar flex items-center justify-center">
|
|
<div id="modal-main-carousel" class="flex h-full w-full">
|
|
<!-- Image -->
|
|
<div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-4">
|
|
<div
|
|
class="w-full h-full bg-center bg-no-repeat bg-contain rounded-lg"
|
|
data-alt="Front view of Sony WH-1000XM5 headphones in black"
|
|
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc");'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Dots: 스크롤 영역 밖에 둬서 슬라이드해도 고정 -->
|
|
<div id="modal-dots" class="absolute bottom-6 left-1/2 -translate-x-1/2 z-10 flex md:hidden items-center gap-2 pointer-events-none">
|
|
<div class="w-2 h-2 rounded-full bg-primary"></div>
|
|
<div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
|
|
<div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Side Thumbnails (Visible on Large Screens) -->
|
|
<div id="modal-thumbnails" class="hidden md:flex absolute left-4 top-1/2 -translate-y-1/2 flex-col gap-3 max-h-[70vh] overflow-y-auto no-scrollbar pr-1"></div>
|
|
</div>
|
|
<!-- Right: Details Section (스크롤 영역 + 하단 버튼 고정) -->
|
|
<div class="w-full md:w-2/5 flex flex-col min-h-0 flex-1 bg-white dark:bg-background-dark overflow-hidden">
|
|
<!-- 스크롤 영역: 뱃지~설명 (스크롤바 숨김, 설명 잘림 방지) -->
|
|
<div class="flex-1 min-h-0 overflow-y-auto no-scrollbar p-4 sm:p-6 md:p-8 lg:p-10">
|
|
<!-- Category/Badge: 배지 단위로만 줄바꿈, 중간 사이즈 대응 -->
|
|
<div class="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-3 sm:mb-4">
|
|
<span
|
|
id="modal-category"
|
|
class="inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
|
|
<span id="modal-status" class="inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg bg-green-100 text-green-700 text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
|
|
<span id="modal-custom-tag" class="hidden inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
|
|
</div>
|
|
<!-- Title: 중간 사이즈까지 단계별 크기 + 자연스러운 줄바꿈 -->
|
|
<h1 id="modal-title" class="text-[#111418] dark:text-white text-lg sm:text-xl md:text-2xl lg:text-3xl font-black leading-tight tracking-tight mb-2 break-words hyphens-auto">Sony WH-1000XM5 Noise Canceling Headphones</h1>
|
|
<!-- Price: 중간 사이즈 대응 -->
|
|
<p id="modal-price" class="text-[#111418] dark:text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-6 sm:mb-8">₩320,000</p>
|
|
<!-- Spec List: 라벨/값 줄바꿈 정리 -->
|
|
<div class="space-y-0 mb-6 sm:mb-8">
|
|
<div id="modal-date-row" class="flex items-center justify-between gap-3 py-3 sm:py-4 border-t border-gray-100 dark:border-gray-800">
|
|
<span class="shrink-0 text-gray-500 dark:text-gray-400 text-xs sm:text-sm font-medium uppercase tracking-tight">구매일자</span>
|
|
<span id="modal-date" class="text-[#111418] dark:text-white text-xs sm:text-sm font-semibold text-right break-words min-w-0">October 2023</span>
|
|
</div>
|
|
<div class="flex items-start sm:items-center justify-between gap-3 py-3 sm:py-4 border-t border-gray-100 dark:border-gray-800">
|
|
<span class="shrink-0 text-gray-500 dark:text-gray-400 text-xs sm:text-sm font-medium uppercase tracking-tight">제품 상태</span>
|
|
<div id="modal-condition-row" class="flex items-center justify-end gap-1.5 min-w-0">
|
|
<svg id="modal-verified-icon" class="w-4 h-4 sm:w-5 sm:h-5 text-primary shrink-0 hidden" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 11l3 3L22 4"></path>
|
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
|
</svg>
|
|
<span id="modal-condition" class="text-[#111418] dark:text-white text-xs sm:text-sm font-semibold text-right break-words"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Description -->
|
|
<div class="mb-6">
|
|
<h3 class="text-[#111418] dark:text-white text-xs sm:text-sm font-bold uppercase tracking-widest mb-2 sm:mb-3">제품 설명</h3>
|
|
<p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed break-words"></p>
|
|
</div>
|
|
</div>
|
|
<!-- Footer / CTA: 항상 하단 고정, 버튼이 설명 위로 겹치지 않음 -->
|
|
<div class="flex-shrink-0 pt-4 pb-6 px-4 sm:px-6 md:px-8 lg:px-10 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-background-dark">
|
|
<button id="copy-link-btn" class="w-full flex items-center justify-center gap-2 bg-slate-900 dark:bg-white dark:text-slate-900 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg">
|
|
<span class="material-symbols-outlined">link</span>
|
|
<span id="copy-btn-text">상품 링크 복사하기</span>
|
|
</button>
|
|
<p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-4 font-medium">링크를 복사해 문의 시 전달해주세요.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<footer class="px-6 md:px-40 py-12 border-t border-slate-200 dark:border-slate-800">
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-sm font-medium">
|
|
<span>© 2026 sori.studio</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-sm font-medium">
|
|
<span>by zenn</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/scripts/main.js"></script>
|
|
</body>
|
|
</html>
|