<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>장혁이의 웹하드</title>
  <style>
    body {
      margin: 0;
      font-family: 'Noto Sans KR', Arial, sans-serif;
      background: linear-gradient(to right, #1f1c2c, #928dab);
      color: #fff;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    header {
      text-align: center;
      padding: 60px 20px;
      background: rgba(0,0,0,0.5);
    }
    header h1 {
      font-size: 3em;
      margin: 0;
      color: #00c6ff;
    }
    header p {
      font-size: 1.2em;
      opacity: 0.8;
    }
    nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background: rgba(255,255,255,0.1);
      padding: 15px;
    }
    nav a {
      color: #fff;
      margin: 10px 15px;
      text-decoration: none;
      font-weight: bold;
      transition: color 0.3s;
    }
    nav a:hover {
      color: #00c6ff;
    }
    .container {
      display: flex;
      flex: 1;
      max-width: 1200px;
      margin: 30px auto;
      gap: 20px;
    }
    aside {
      width: 250px;
      background: rgba(255,255,255,0.1);
      padding: 20px;
      border-radius: 10px;
    }
    aside h2 {
      font-size: 1.5em;
      border-bottom: 2px solid #00c6ff;
      padding-bottom: 10px;
      margin-bottom: 15px;
    }
    aside ul {
      list-style: none;
      padding: 0;
    }
    aside ul li {
      margin: 10px 0;
    }
    aside ul li a {
      color: #fff;
      text-decoration: none;
      cursor: pointer;
      transition: color 0.3s;
    }
    aside ul li a:hover {
      color: #00c6ff;
    }
    main {
      flex: 1;
      background: rgba(255,255,255,0.05);
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    main h2 {
      border-bottom: 2px solid #00c6ff;
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
    .product-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 15px;
    }
    .product {
      background: rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 15px;
      text-align: center;
      min-height: 180px; /* 빈 공간 확보 */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .product img {
      max-width: 100%;
      max-height: 150px;
      border-radius: 5px;
    }
    footer {
      text-align: center;
      padding: 30px;
      background: rgba(255,255,255,0.1);
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <header>
    <h1>장혁이의 웹하드</h1>
    <p>다양한 프로젝트와 자료를 모아둔 공간</p>
  </header>

  <nav>
    <!-- 기존 상단 메뉴 유지 -->
    <a href="https://gaja.work/wordpress" target="_blank">상점</a>
    <a href="https://gaja.work:443/good" target="_blank">상점2</a>
    <a href="https://gaja.work/eb" target="_blank">이윰빌더</a>
    <a href="https://eb.gaja.work" target="_blank">docker(eb)</a>
    <a href="https://xe.gaja.work" target="_blank">docker(xe)</a>
    <a href="http://gaja.work/photo" target="_blank">photo</a>
    <a href="https://gaja.work:443/gb6" target="_blank">굿빌더</a>
    <a href="https://ycartuser.gajaga.work" target="_blank">docker(youngcart)</a>
    <a href="https://worduser.gajaga.work" target="_blank">docker(wordpress)</a>
    <a href="https://gaja.work:443/cart" target="_blank">영카트</a>
    <a href="https://gaja.work:443/gnuboard" target="_blank">그누보드</a>
    <a href="https://gaja.work:443/mwbuilder" target="_blank">게시판</a>
    <a href="https://xeuser.gajaga.work" target="_blank">제로보드(xe)</a>
    <a href="mailto:cothaa@naver.com">E-mail</a>
  </nav>

  <div class="container">
    <aside>
      <h2>쇼핑 카테고리</h2>
      <ul>
        <li><a onclick="showProducts('의류')">의류</a></li>
        <li><a onclick="showProducts('잡화')">잡화</a></li>
        <li><a onclick="showProducts('생활건강')">생활건강</a></li>
        <li><a onclick="showProducts('가전디지털')">가전디지털</a></li>
        <li><a onclick="showProducts('베스트')">베스트</a></li>
      </ul>
    </aside>

    <main id="mainContent">
      <h2>소개</h2>
      <p>이곳은 장혁이의 웹하드입니다. 다양한 웹 프로젝트와 자료를 한 곳에서 쉽게 접근할 수 있도록 정리했습니다.</p>
    </main>
  </div>

  <footer>
    © 2026 JangHyuk. All rights reserved.
  </footer>

<script>
  function showProducts(category) {
    const main = document.getElementById('mainContent');
    let productsHTML = `<h2>${category}</h2><div class="product-grid">`;

    // 카테고리별 상품 데이터
    const products = {
      "의류": [
        {name: "티셔츠", price: 15000},
        {name: "청바지", price: 35000},
        {name: "자켓", price: 55000},
        {name: "운동화", price: 60000},
        {name: "모자", price: 12000},
        // ... 나머지 상품들
      ],
      "잡화": [
        {name: "가죽지갑", price: 45000},
        {name: "벨트", price: 25000},
        {name: "손목시계", price: 80000},
        {name: "백팩", price: 70000},
        {name: "스카프", price: 20000},
        // ... 나머지 상품들
      ],
      "생활건강": [
        {name: "홍삼정", price: 99000},
        {name: "비타민C", price: 25000},
        {name: "유산균", price: 30000},
        {name: "마사지기", price: 120000},
        {name: "공기청정기", price: 150000},
        // ... 나머지 상품들
      ],
      "가전디지털": [
        {name: "스마트폰", price: 950000},
        {name: "노트북", price: 1200000},
        {name: "태블릿", price: 650000},
        {name: "TV", price: 1500000},
        {name: "이어폰", price: 120000},
        // ... 나머지 상품들
      ],
      "베스트": [
        {name: "베스트상품1", price: 30000},
        {name: "베스트상품2", price: 45000},
        {name: "베스트상품3", price: 60000},
        {name: "베스트상품4", price: 75000},
        {name: "베스트상품5", price: 90000},
        // ... 나머지 상품들
      ]
    };

    // 카테고리별 주문 페이지 기본 URL
    let baseUrl = "";
    switch(category) {
      case "의류": baseUrl = "https://gajaga.work/order/clothes"; break;
      case "잡화": baseUrl = "https://gajaga.work/order/accessories"; break;
      case "생활건강": baseUrl = "https://gajaga.work/order/health"; break;
      case "가전디지털": baseUrl = "https://gajaga.work/order/electronics"; break;
      case "베스트": baseUrl = "https://gajaga.work/order/best"; break;
      default: baseUrl = "https://gajaga.work/order";
    }

    // 상품 출력 (최대 30개)
    for (let i = 0; i < 30; i++) {
      const product = products[category][i] || {name: `상품${i+1}`, price: (i+1)*1000};
      productsHTML += `
        <div class="product">
          <a href="${baseUrl}/product${i+1}" target="_blank">
            <img src="file:///D:/shop/product${i+1}.jpg" alt="${product.name}">
            <p>${product.name}</p>
            <p>₩${product.price.toLocaleString()}원</p>
          </a>
        </div>
      `;
    }

    productsHTML += `</div>`;
    main.innerHTML = productsHTML;
  }
</script>
</body>
</html>