503 lines
27 KiB
HTML
503 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link href="./style/tailwind.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div class="bg-white">
|
|
<div>
|
|
<main class="mx-auto w-full px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-baseline justify-between border-b border-gray-200 pt-8 pb-6">
|
|
<a href="./index.html"><h1 class="text-4xl font-bold tracking-tight text-gray-900">Title</h1></a>
|
|
<div class="flex items-center"></div>
|
|
</div>
|
|
|
|
<section aria-labelledby="products-heading" class="pt-6 pb-12">
|
|
<div class="grid grid-cols-1 gap-x-8 gap-y-2 lg:grid-cols-4">
|
|
<!-- 필터 섹션 -->
|
|
<div class="lg:block">
|
|
<!-- <div class="lg:hidden">
|
|
<button
|
|
id="filterToggle"
|
|
class="w-full flex items-center justify-between pl-4 pr-2 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 cursor-pointer">
|
|
<span>필터 메뉴</span>
|
|
<svg
|
|
class="w-4 h-4 transform transition-transform duration-200"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
</div> -->
|
|
<div
|
|
id="filterContent"
|
|
class="absolute z-10 mt-1 w-[calc(100%-3rem)] max-h-96 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm hidden lg:block lg:relative lg:mt-0 lg:w-full lg:max-h-none lg:overflow-visible lg:shadow-none lg:ring-0">
|
|
<div class="p-4">
|
|
<div>
|
|
<div class="flex items-center space-x-4 lg:flex-col lg:items-start">
|
|
<label class="text-base font-medium text-gray-900">언어 선택</label>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<input
|
|
id="ko"
|
|
name="language"
|
|
type="radio"
|
|
value="ko"
|
|
class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer"
|
|
checked />
|
|
<label
|
|
for="ko"
|
|
class="ml-2 block text-sm font-medium leading-6 text-gray-900 cursor-pointer">
|
|
한국어
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input
|
|
id="ja"
|
|
name="language"
|
|
type="radio"
|
|
value="ja"
|
|
class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer" />
|
|
<label
|
|
for="ja"
|
|
class="ml-2 block text-sm font-medium leading-6 text-gray-900 cursor-pointer">
|
|
日本語
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-500">선택한 언어로 표시됩니다</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="w-full">
|
|
<form id="searchForm" class="mb-4">
|
|
<label
|
|
for="search-input"
|
|
class="block text-sm font-medium leading-6 text-gray-900">
|
|
직접 검색
|
|
</label>
|
|
<div class="relative mt-2 flex rounded-md shadow-sm">
|
|
<span
|
|
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 sm:text-sm">
|
|
게임명
|
|
</span>
|
|
<input
|
|
type="text"
|
|
name="search-input"
|
|
id="search-input"
|
|
class="block w-full px-2 min-w-0 flex-1 rounded-none rounded-r-md py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
|
placeholder=" " />
|
|
<div
|
|
class="cursor-pointer absolute inset-y-0 right-0 flex items-center pr-3"
|
|
id="reset-search">
|
|
<svg
|
|
class="h-5 w-5 text-gray-400"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<button
|
|
type="button"
|
|
class="w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
id="resetFilters">
|
|
필터 초기화
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-6 space-y-6">
|
|
<!-- 언어 필터 -->
|
|
<div class="space-y-2">
|
|
<h3 class="text-base font-medium text-gray-900">Language</h3>
|
|
<div class="space-y-2">
|
|
<div class="language">
|
|
<div class="flex items-center">
|
|
<input
|
|
id="korean-support"
|
|
name="language-filter"
|
|
type="checkbox"
|
|
value="koreanSupport"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label
|
|
for="korean-support"
|
|
class="ml-3 text-sm font-medium leading-6 text-gray-900">
|
|
한국어 지원
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input
|
|
id="korean-not-support"
|
|
name="language-filter"
|
|
type="checkbox"
|
|
value="koreanNotSupport"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label
|
|
for="korean-not-support"
|
|
class="ml-3 text-sm font-medium leading-6 text-gray-900">
|
|
한국어 미지원
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 판매 상태 필터 -->
|
|
<div class="space-y-2">
|
|
<h3 class="text-base font-medium text-gray-900">Sale Status</h3>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center">
|
|
<input
|
|
id="available"
|
|
name="status-filter"
|
|
type="checkbox"
|
|
value="available"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label for="available" class="ml-2 text-sm text-gray-900">
|
|
판매 가능
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input
|
|
id="sold"
|
|
name="status-filter"
|
|
type="checkbox"
|
|
value="sold"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label for="sold" class="ml-2 text-sm text-gray-900">판매완료</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 국가 필터 -->
|
|
<div class="space-y-2">
|
|
<h3 class="text-base font-medium text-gray-900">Edition</h3>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center">
|
|
<input
|
|
id="kor"
|
|
name="country-filter"
|
|
type="checkbox"
|
|
value="KOR"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label for="kor" class="ml-2 text-sm text-gray-900">
|
|
Korea Edition
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input
|
|
id="jpn"
|
|
name="country-filter"
|
|
type="checkbox"
|
|
value="JPN"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label for="jpn" class="ml-2 text-sm text-gray-900">
|
|
Japan Edition
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CERO 필터 -->
|
|
<div class="space-y-2">
|
|
<h3 class="text-base font-medium text-gray-900">CERO</h3>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center">
|
|
<input
|
|
id="cero-a"
|
|
name="cero-filter"
|
|
type="checkbox"
|
|
value="A"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label for="cero-a" class="ml-2 text-sm text-gray-900">A</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input
|
|
id="cero-b"
|
|
name="cero-filter"
|
|
type="checkbox"
|
|
value="B"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label for="cero-b" class="ml-2 text-sm text-gray-900">B</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input
|
|
id="cero-c"
|
|
name="cero-filter"
|
|
type="checkbox"
|
|
value="C"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label for="cero-c" class="ml-2 text-sm text-gray-900">C</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input
|
|
id="cero-d"
|
|
name="cero-filter"
|
|
type="checkbox"
|
|
value="D"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
|
|
<label for="cero-d" class="ml-2 text-sm text-gray-900">D</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-3">
|
|
<div class="sm:px-6 lg:px-8">
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center justify-between sm:flex-auto sm:-mx-6 lg:-mx-4">
|
|
<p class="mt-2 sm:mt-0 text-sm text-gray-700">
|
|
개수:
|
|
<span id="gameCount">0</span>
|
|
</p>
|
|
<div class="sort">
|
|
<div class="flex items-center gap-2">
|
|
<label id="sort-label" class="block text-sm/6 font-medium text-gray-900">
|
|
정렬
|
|
</label>
|
|
<div class="relative w-40 mt-2 sm:mt-0">
|
|
<button
|
|
type="button"
|
|
class="flex justify-between items-center w-full cursor-pointer rounded-md bg-white py-1.5 pl-3 pr-2 text-left text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
|
|
id="sort-button"
|
|
aria-expanded="false"
|
|
aria-haspopup="true">
|
|
<span class="col-start-1 row-start-1 truncate pr-6">순번 최신순</span>
|
|
<svg
|
|
class="w-4 h-4 transform transition-transform duration-200"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<ul
|
|
id="sort-options"
|
|
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm hidden"
|
|
tabindex="-1"
|
|
role="listbox"
|
|
aria-labelledby="sort-label">
|
|
<li
|
|
class="relative cursor-pointer hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900"
|
|
role="option"
|
|
data-value="sortByNoDesc">
|
|
<span class="block truncate font-semibold">순번 최신순</span>
|
|
<span
|
|
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600">
|
|
<svg
|
|
class="size-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</li>
|
|
<li
|
|
class="relative cursor-pointer hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900"
|
|
role="option"
|
|
data-value="sortByNo">
|
|
<span class="block truncate">순번 과거순</span>
|
|
<span
|
|
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 hidden">
|
|
<svg
|
|
class="size-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</li>
|
|
<li
|
|
class="relative cursor-pointer hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900"
|
|
role="option"
|
|
data-value="sortByDateDesc">
|
|
<span class="block truncate">발매일 최신순</span>
|
|
<span
|
|
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 hidden">
|
|
<svg
|
|
class="size-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</li>
|
|
<li
|
|
class="relative cursor-pointer hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900"
|
|
role="option"
|
|
data-value="sortByDate">
|
|
<span class="block truncate">발매일 과거순</span>
|
|
<span
|
|
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 hidden">
|
|
<svg
|
|
class="size-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</li>
|
|
<li
|
|
class="relative cursor-pointer hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900"
|
|
role="option"
|
|
data-value="sortByPriceDesc">
|
|
<span class="block truncate">판매가 높은순</span>
|
|
<span
|
|
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 hidden">
|
|
<svg
|
|
class="size-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</li>
|
|
<li
|
|
class="relative cursor-pointer hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900"
|
|
role="option"
|
|
data-value="sortByPrice">
|
|
<span class="block truncate">판매가 낮은순</span>
|
|
<span
|
|
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 hidden">
|
|
<svg
|
|
class="size-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</li>
|
|
<li
|
|
class="relative cursor-pointer hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900"
|
|
role="option"
|
|
data-value="sortByRandom">
|
|
<span class="block truncate">무작위</span>
|
|
<span
|
|
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 hidden">
|
|
<svg
|
|
class="size-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 flow-root">
|
|
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div class="inline-block min-w-full py-2 align-middle sm:px-2 lg:px-4">
|
|
<div
|
|
class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-300">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">
|
|
Title
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden w-32 px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">
|
|
Infomation
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden w-28 px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">
|
|
Status
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden w-56 px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">
|
|
Role
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden py-3.5 pl-3 pr-4 text-left text-sm font-semibold text-gray-900 sm:table-cell">
|
|
Location
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody
|
|
id="gameList"
|
|
class="divide-y divide-gray-200 bg-white"></tbody>
|
|
</table>
|
|
<div id="loading" class="hidden">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="./script/nsw.js"></script>
|
|
</body>
|
|
</html>
|