zenn/zenn.inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[260204] 샘플 파일 적용

Browse Source
This commit is contained in:
zenn
2026-02-04 01:43:58 +09:00
parent b0e5fec03e
commit c185fd1cef
7 changed files with 609 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
index.html
View File

@@ -38,37 +38,37 @@
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
.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;
}
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 */
.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;
}
#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;
}
.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">
@@ -81,7 +81,7 @@
<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">Studio Archive</h2>
<h2 class="text-lg font-bold leading-tight tracking-tight">sori.inventory</h2>
</div>
<!-- <nav class="hidden md:flex items-center gap-8">
<a class="text-slate-900 dark:text-slate-100 text-sm font-medium hover:text-primary transition-colors" href="#">Collection</a>
@@ -95,7 +95,7 @@
<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="Search items..." value="" />
<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>
<!-- <div
@@ -107,34 +107,32 @@
<main class="flex-1">
<!-- Headline Section -->
<div class="px-6 md:px-40 py-12 flex flex-col items-center">
<h1 class="text-slate-900 dark:text-white tracking-tight text-3xl md:text-5xl font-bold leading-tight text-center max-w-3xl">Curated quality items for your creative workspace.</h1>
<p class="mt-4 text-slate-500 dark:text-slate-400 text-center text-lg max-w-xl">A personal collection of tech, furniture, and tools, looking for their next home.</p>
<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>
<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="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>
<!-- 상태 -->
<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">
@@ -160,9 +158,9 @@
</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 gap-8">
<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 class="group flex flex-col gap-4">
<!-- <div class="group flex flex-col gap-4">
<div class="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm group-hover:shadow-md transition-shadow">
<div
class="w-full h-full bg-center bg-no-repeat bg-cover transform group-hover:scale-105 transition-transform duration-500"
@@ -179,20 +177,19 @@
</div>
<p class="text-slate-500 dark:text-slate-400 text-sm font-normal">Sierra Blue, 256GB, Pristine</p>
</div>
</div>
</div> -->
</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 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 -->
<div class="relative w-full max-w-6xl max-h-[90vh] 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">
<div class="relative w-full max-w-6xl max-h-[90vh] 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>
@@ -219,26 +216,15 @@
</div>
<!-- Side Thumbnails (Visible on Large Screens) -->
<div id="modal-thumbnails" class="hidden lg: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
class="size-16 rounded-lg border-2 border-primary bg-cover bg-center overflow-hidden cursor-pointer"
data-alt="Thumbnail front view"
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBFrW2dPhArwFKxHL3LH03GD_jG31BBbMo0Dfkz7QOOhw7j5e-11atdSMyIhfiQiILtIulqm20x3fMcXr50IbtwKu3cZLMwpPbNqsnHyZiIB1jZL3a-Fvaq95WLPmyWZU82rrpFZozX2ICjWK4H1oO0Q1VuyIksmBoKaXce3-HxGY_pD8HuO1ua_PgT_ZGTTVagbUpcDDuUjbqEZ_Xd9XY74NyYBP-CwuG0ab_rvav-c9DFrkxQ1PKe-TLvJf-lXAA1iuEkhdKGVDQ");'></div>
<div
class="size-16 rounded-lg border border-transparent bg-cover bg-center overflow-hidden cursor-pointer opacity-70 hover:opacity-100"
data-alt="Thumbnail side view"
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAq1q1Tdi4V77S-ZpUxbkru_BT1vkcqXqQELpgawTTZ-iNZEM2VRXChC2bpa38TSAGt8TCyZ1exgHFPCwaswHv4d4SS-8EfpDv3hYwyvYWbl6j9-gSpmTsaRQE2Sn86yRkrABWZSA68TMtZaI138Q440vVOS52qd_cINWShrdv-rM-DgW2q15sWcWToiqLtiDnpGiQMHOK8BU97VOLd-9WPP-WQSUqf8FCuho2PvmupnqrYvrBWjN83upohCeer5xMQWpMGoIbZztg");'></div>
<div
class="size-16 rounded-lg border border-transparent bg-cover bg-center overflow-hidden cursor-pointer opacity-70 hover:opacity-100"
data-alt="Thumbnail case view"
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDvRgvsYOJNQ2ow1S9CIvQ20TEk6U75hkG-ZNfwYk_htB6pRZNw87XJvXZGtRIva58DthJxX_yPNsbUPwntguucSfqBdeFERyYx_sH0Ta-KqZhwKpnCpCLUdFli_JgSzg2L-s5UsYPadChOKdsiV2iieblFwRFkB_0_Qap99PY7W6mZ5KFzpyx3M4LhBJnq06MQlJF6_P5NSBUbMy2VxveNFQWb8wMuJVTK8GC_XeVvC9wdxuf9fZOLAMc6wB_vY_LgBBRsfCb-8Tw");'></div>
</div>
</div>
<!-- Right: Details Section -->
<div class="w-full md:w-2/5 flex flex-col h-full bg-white dark:bg-background-dark p-6 md:p-10 overflow-y-auto">
<!-- Category/Badge -->
<div class="flex items-center gap-2 mb-4">
<span id="modal-category" class="px-2.5 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs font-bold uppercase tracking-wider">Audio &amp; Tech</span>
<span id="modal-status" class="px-2.5 py-1 rounded-lg bg-green-100 text-green-700 text-xs font-bold uppercase tracking-wider">Available</span>
<span id="modal-category" class="px-2.5 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs font-bold uppercase tracking-wider"></span>
<span id="modal-status" class="px-2.5 py-1 rounded-lg bg-green-100 text-green-700 text-xs font-bold uppercase tracking-wider"></span>
<span id="modal-custom-tag" class="hidden px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider"></span>
</div>
<!-- Title -->
<h1 id="modal-title" class="text-[#111418] dark:text-white text-3xl font-black leading-tight tracking-tight mb-2">Sony WH-1000XM5 Noise Canceling Headphones</h1>
@@ -246,24 +232,27 @@
<p id="modal-price" class="text-[#111418] dark:text-white text-4xl font-bold mb-8">₩320,000</p>
<!-- Spec List -->
<div class="space-y-0 mb-8">
<div class="flex items-center justify-between py-4 border-t border-gray-100 dark:border-gray-800">
<span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">Purchase Date</span>
<div id="modal-date-row" class="flex items-center justify-between py-4 border-t border-gray-100 dark:border-gray-800">
<span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">구매일자</span>
<span id="modal-date" class="text-[#111418] dark:text-white text-sm font-semibold">October 2023</span>
</div>
<div class="flex items-center justify-between py-4 border-t border-gray-100 dark:border-gray-800">
<span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">Condition Status</span>
<div class="flex items-center gap-1.5">
<span class="material-symbols-outlined text-primary text-lg">verified</span>
<span id="modal-condition" class="text-[#111418] dark:text-white text-sm font-semibold">Mint (S-Grade)</span>
<span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">제품 상태</span>
<div id="modal-condition-row" class="flex items-center justify-between border-t border-gray-100 dark:border-gray-800">
<div class="flex items-center gap-1.5">
<svg id="modal-verified-icon" class="w-5 h-5 text-primary 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-sm font-semibold"></span>
</div>
</div>
</div>
</div>
<!-- Description -->
<div class="mb-10">
<h3 class="text-[#111418] dark:text-white text-sm font-bold uppercase tracking-widest mb-3">Item Description</h3>
<p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-base leading-relaxed">
Pristine condition, used for less than 2 months for office work only. No visible scratches or dents. Battery health is at 99%. Comes with original retail box, carrying case, USB-C charging cable, and 3.5mm jack. Selling as I switched to a different setup.
</p>
<div class="mb-10 min-h-80">
<h3 class="text-[#111418] dark:text-white text-sm font-bold uppercase tracking-widest mb-3">제품 설명</h3>
<p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-base leading-relaxed"></p>
</div>
<!-- Footer / CTA -->
<div class="mt-auto pt-6 border-t border-gray-100 dark:border-gray-800">
@@ -271,7 +260,7 @@
<span class="material-symbols-outlined">chat_bubble</span>
<span>오픈카톡으로 문의하기</span>
</button>
<p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-4 font-medium">Secure transaction recommended. Ships within 24 hours.</p>
<p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-4 font-medium">입금 확인 후, 24시간 이내 발송</p>
</div>
</div>
</div>