[260203] 인벤토리 프로젝트 초안
This commit is contained in:
306
index.html
Normal file
306
index.html
Normal file
@@ -0,0 +1,306 @@
|
||||
<!doctype html>
|
||||
|
||||
<html class="light" lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>Minimalist Product Catalog</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">Studio Archive</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>
|
||||
<a class="text-slate-500 dark:text-slate-400 text-sm font-medium hover:text-primary transition-colors" href="#">Tech</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 text-sm font-medium hover:text-primary transition-colors" href="#">Archive</a>
|
||||
</nav> -->
|
||||
</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="Search items..." value="" />
|
||||
</div>
|
||||
</label>
|
||||
<!-- <div
|
||||
class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-9 border border-slate-200 dark:border-slate-700"
|
||||
data-alt="Portrait of a person profile picture"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBU9SHb3BY7t3kVP81gp9gRzobkneoAoEWyLZTb8OkxnYI0bwWzk_iPiExHkPUCEq1AnlBnrCBOTB0rRx0qdDYF_KML3YtftYZP4bXiA1IY5Y5u0r16HQpYhzTYmQnnY-k52Z6u1DsCkepdeftke78K45WWvluFzOif6NcHRnfe9_LTOTDEwhD4mtsWJOYI5BenKhudyufV9u1SXblfulp5JXYm4MwqYMGLD4iLzXkjiVH5C-0Ry66mfrxkOhME00b-vfj9luQIVtE");'></div> -->
|
||||
</div>
|
||||
</header>
|
||||
<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>
|
||||
</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">
|
||||
<!-- <div id="filter-chips" class="flex gap-2 flex-wrap"></div> -->
|
||||
<!-- <div id="status-chips" class="flex gap-2 flex-wrap mt-2"></div> -->
|
||||
<!-- <div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg bg-white dark:bg-slate-700 shadow-sm cursor-pointer transition-all">
|
||||
<p class="text-slate-900 dark:text-white text-sm font-semibold">All Items</p>
|
||||
</div>
|
||||
<div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg hover:bg-white/50 dark:hover:bg-slate-700/50 cursor-pointer transition-all">
|
||||
<p class="text-slate-500 dark:text-slate-300 text-sm font-medium">Available</p>
|
||||
</div>
|
||||
<div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg hover:bg-white/50 dark:hover:bg-slate-700/50 cursor-pointer transition-all">
|
||||
<p class="text-slate-500 dark:text-slate-300 text-sm font-medium">Computing</p>
|
||||
</div>
|
||||
<div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg hover:bg-white/50 dark:hover:bg-slate-700/50 cursor-pointer transition-all">
|
||||
<p class="text-slate-500 dark:text-slate-300 text-sm font-medium">Furniture</p>
|
||||
</div>
|
||||
<div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg hover:bg-white/50 dark:hover:bg-slate-700/50 cursor-pointer transition-all">
|
||||
<p class="text-slate-500 dark:text-slate-300 text-sm font-medium">Sold</p>
|
||||
</div> -->
|
||||
</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 gap-8">
|
||||
<!-- Product Item -->
|
||||
<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"
|
||||
data-alt="Modern smartphone against minimalist background"
|
||||
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY");'></div>
|
||||
<div class="absolute top-3 left-3">
|
||||
<span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded bg-primary/10 text-primary backdrop-blur-md border border-primary/20">Available</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="text-slate-900 dark:text-white text-base font-semibold leading-tight group-hover:text-primary transition-colors">iPhone 13 Pro</h3>
|
||||
<p class="text-slate-900 dark:text-white text-base font-bold">$750</p>
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm font-normal">Sierra Blue, 256GB, Pristine</p>
|
||||
</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">
|
||||
<!-- <a class="flex size-10 items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</a>
|
||||
<a class="text-sm font-bold flex size-10 items-center justify-center text-white rounded-lg bg-primary" href="#">1</a>
|
||||
<a class="text-sm font-medium flex size-10 items-center justify-center text-slate-500 dark:text-slate-400 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800" href="#">2</a>
|
||||
<a class="text-sm font-medium flex size-10 items-center justify-center text-slate-500 dark:text-slate-400 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800" href="#">3</a>
|
||||
<a class="flex size-10 items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</a> -->
|
||||
</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">
|
||||
<!-- 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 bg-gray-50 dark:bg-gray-900 flex flex-col relative overflow-hidden">
|
||||
<!-- Main Carousel -->
|
||||
<div id="modal-main-carousel-container" class="flex-1 overflow-x-auto no-scrollbar flex items-center ml-0 lg:ml-24">
|
||||
<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>
|
||||
<!-- Carousel Navigation -->
|
||||
<div id="modal-dots" class="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2">
|
||||
<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>
|
||||
<!-- 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 & 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>
|
||||
</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>
|
||||
<!-- Price -->
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<!-- Footer / CTA -->
|
||||
<div class="mt-auto pt-6 border-t border-gray-100 dark:border-gray-800">
|
||||
<button class="w-full flex items-center justify-center gap-2 bg-primary hover:bg-blue-600 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg shadow-primary/25">
|
||||
<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>
|
||||
</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>© 2024 Studio Archive Catalog</span>
|
||||
<span class="px-1 text-slate-300">•</span>
|
||||
<span>Personal Sales Page</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a class="text-slate-500 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">mail</span></a>
|
||||
<a class="text-slate-500 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">share</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/scripts/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user