*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-primary: #0d0d0d; --bg-secondary: #1a1a1a; --bg-tertiary: #222222; --bg-card: #1e1e1e; --gold: #c9a962; --gold-light: #e6c88a; --gold-dark: #a88840; --amber: #d4a843; --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #999999; --border: #333333; --border-light: #444444; --shadow: 0 4px 20px rgba(0,0,0,0.5); --shadow-gold: 0 4px 20px rgba(201,169,98,0.2); --radius: 4px; --transition: all 0.3s ease; --font-heading: 'Cinzel', serif; --font-body: 'Jost', sans-serif; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-secondary); line-height: 1.6; font-size: 15px; overflow-x: hidden; } a { color: inherit; text-decoration: none; transition: var(--transition); } a:hover { color: var(--gold); } img { max-width: 100%; height: auto; display: block; } button { cursor: pointer; font-family: inherit; border: none; background: none; } .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; } /* ============ ANNOUNCEMENT BAR ============ */ .announcement { background: var(--bg-secondary); color: var(--gold-light); text-align: center; padding: 10px 20px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border); } .announcement i { margin-right: 8px; } /* ============ TOP SOCIAL BAR ============ */ .top-bar { background: var(--bg-tertiary); padding: 8px 20px; border-bottom: 1px solid var(--border); } .top-bar-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto; } .social-icons { display: flex; gap: 18px; } .social-icons a { color: var(--text-muted); font-size: 14px; transition: var(--transition); } .social-icons a:hover { color: var(--gold); } .top-bar-info { color: var(--text-muted); font-size: 12px; letter-spacing: 0.5px; } /* ============ HEADER / LOGO ============ */ .header { background: var(--bg-primary); padding: 30px 20px; text-align: center; border-bottom: 1px solid var(--border); } .header-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto; } .logo { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: var(--gold); letter-spacing: 4px; text-transform: uppercase; } .logo span { color: var(--gold-light); } .logo-sub { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 6px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; } .header-actions { display: flex; gap: 20px; align-items: center; } .header-actions button { color: var(--text-secondary); font-size: 18px; transition: var(--transition); position: relative; } .header-actions button:hover { color: var(--gold); } /* Language Switcher */ .lang-switcher { position: relative; display: inline-block; } .lang-switcher-btn { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius); transition: var(--transition); background: transparent; border: 1px solid var(--border); } .lang-switcher-btn:hover { color: var(--gold); border-color: var(--gold-dark); } .lang-switcher-btn i { font-size: 12px; } .lang-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 160px; max-height: 400px; overflow-y: auto; z-index: 9999; } .lang-dropdown.open { display: block; } .lang-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--text-secondary); font-size: 13px; border-bottom: 1px solid var(--border); transition: var(--transition); } .lang-dropdown a:last-child { border-bottom: none; } .lang-dropdown a:hover { background: var(--bg-tertiary); color: var(--gold); } .lang-dropdown a.active { color: var(--gold); font-weight: 600; } .lang-dropdown a .flag { font-size: 18px; } .cart-count { position: absolute; top: -8px; right: -10px; background: var(--gold); color: var(--bg-primary); font-size: 10px; font-weight: 600; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .menu-toggle { display: none; color: var(--text-secondary); font-size: 22px; } /* ============ NAVIGATION ============ */ .navigation { background: var(--bg-secondary); border-bottom: 2px solid var(--gold-dark); } .nav-list { display: flex; justify-content: center; gap: 40px; list-style: none; max-width: 1280px; margin: 0 auto; padding: 15px 20px; flex-wrap: wrap; } .nav-list a { color: var(--text-primary); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; position: relative; padding: 5px 0; } .nav-list a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.3s ease; } .nav-list a:hover::after { width: 100%; } .nav-list a:hover { color: var(--gold); } /* ============ HERO BANNER ============ */ .hero { position: relative; background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 50%, #1a1a1a 100%); padding: 80px 20px; text-align: center; overflow: hidden; border-bottom: 1px solid var(--border); } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(201,169,98,0.1) 0%, transparent 70%); pointer-events: none; } .hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .hero h1 { font-family: var(--font-heading); font-size: 48px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; letter-spacing: 3px; line-height: 1.2; } .hero h1 .accent { color: var(--gold); } .hero p { font-size: 18px; color: var(--text-secondary); margin-bottom: 35px; letter-spacing: 1px; } .btn-gold { display: inline-block; background: var(--gold); color: var(--bg-primary); padding: 16px 45px; font-family: var(--font-heading); font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; border: 2px solid var(--gold); transition: var(--transition); cursor: pointer; } .btn-gold:hover { background: transparent; color: var(--gold); } .btn-outline { display: inline-block; background: transparent; color: var(--gold); padding: 14px 40px; font-family: var(--font-heading); font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; border: 2px solid var(--gold); transition: var(--transition); cursor: pointer; } .btn-outline:hover { background: var(--gold); color: var(--bg-primary); } /* ============ FEATURES ============ */ .features { background: var(--bg-secondary); padding: 60px 20px; border-bottom: 1px solid var(--border); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1280px; margin: 0 auto; } .feature-item { text-align: center; padding: 20px; } .feature-icon { font-size: 42px; color: var(--gold); margin-bottom: 20px; display: inline-block; } .feature-item h3 { font-family: var(--font-heading); font-size: 18px; color: var(--text-primary); letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; } .feature-item p { color: var(--text-muted); font-size: 14px; line-height: 1.7; } /* ============ SECTION HEADERS ============ */ .section-header { text-align: center; margin-bottom: 50px; } .section-header .subtitle { font-family: var(--font-heading); font-size: 12px; letter-spacing: 4px; color: var(--gold); text-transform: uppercase; margin-bottom: 10px; } .section-header h2 { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--text-primary); letter-spacing: 2px; text-transform: uppercase; position: relative; display: inline-block; padding: 0 60px; } .section-header h2::before, .section-header h2::after { content: '❖'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 20px; } .section-header h2::before { left: 0; } .section-header h2::after { right: 0; } /* ============ PRODUCT GRID ============ */ .products-section { padding: 80px 20px; background: var(--bg-primary); border-bottom: 1px solid var(--border); } .products-section.alt-bg { background: var(--bg-secondary); } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1280px; margin: 0 auto; } .product-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); position: relative; } .product-card:hover { transform: translateY(-5px); border-color: var(--gold-dark); box-shadow: var(--shadow-gold); } .product-image { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-tertiary); } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.05); } .product-badge { position: absolute; top: 12px; left: 12px; background: var(--gold); color: var(--bg-primary); padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 2px; } .product-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; opacity: 0; transform: translateX(10px); transition: var(--transition); } .product-card:hover .product-actions { opacity: 1; transform: translateX(0); } .product-actions button { width: 36px; height: 36px; background: rgba(0,0,0,0.7); color: var(--text-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: var(--transition); } .product-actions button:hover { background: var(--gold); color: var(--bg-primary); } .product-info { padding: 20px; text-align: center; } .product-name { font-family: var(--font-heading); font-size: 15px; color: var(--text-primary); margin-bottom: 10px; letter-spacing: 1px; line-height: 1.4; min-height: 42px; } .product-price { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 10px; } .price-original { color: var(--text-muted); text-decoration: line-through; font-size: 14px; } .price-sale { color: var(--gold); font-weight: 600; font-size: 17px; } .price-regular { color: var(--gold); font-weight: 600; font-size: 17px; } .product-rating { display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 12px; } .product-rating .stars { color: var(--gold); letter-spacing: 1px; } .product-rating .rating-count { color: var(--text-muted); } .view-all-btn { text-align: center; margin-top: 50px; } /* ============ CATEGORY SHOWCASE ============ */ .category-section { padding: 70px 20px; background: var(--bg-primary); border-bottom: 1px solid var(--border); } .category-header { display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .category-title { font-family: var(--font-heading); font-size: 24px; color: var(--text-primary); letter-spacing: 2px; text-transform: uppercase; } .category-title i { color: var(--gold); margin-right: 12px; } .category-link { color: var(--gold); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; } .category-link:hover { color: var(--gold-light); } /* ============ TESTIMONIALS ============ */ .testimonials { background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); padding: 80px 20px; border-bottom: 1px solid var(--border); } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1280px; margin: 0 auto; } .testimonial-card { background: var(--bg-card); border: 1px solid var(--border); padding: 35px 30px; text-align: center; border-radius: var(--radius); transition: var(--transition); } .testimonial-card:hover { border-color: var(--gold-dark); } .testimonial-stars { color: var(--gold); font-size: 16px; margin-bottom: 20px; letter-spacing: 2px; } .testimonial-text { color: var(--text-secondary); font-style: italic; font-size: 15px; line-height: 1.8; margin-bottom: 25px; position: relative; } .testimonial-text::before { content: '\201C'; position: absolute; top: -10px; left: 0; font-size: 60px; color: var(--gold); opacity: 0.3; font-family: Georgia, serif; line-height: 1; } .testimonial-author { font-family: var(--font-heading); font-size: 14px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 5px; } .testimonial-verified { color: var(--text-muted); font-size: 12px; } /* ============ FAQ ============ */ .faq-section { padding: 80px 20px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { border: 1px solid var(--border); margin-bottom: 12px; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); transition: var(--transition); } .faq-item.active { border-color: var(--gold-dark); } .faq-question { width: 100%; text-align: left; padding: 22px 25px; color: var(--text-primary); font-family: var(--font-heading); font-size: 15px; letter-spacing: 1px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); } .faq-question:hover { color: var(--gold); } .faq-icon { color: var(--gold); transition: transform 0.3s ease; font-size: 12px; } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer-inner { padding: 0 25px 22px; color: var(--text-secondary); font-size: 14px; line-height: 1.8; } .faq-item.active .faq-answer { max-height: 500px; } /* ============ INSTAGRAM FEED ============ */ .instagram-section { padding: 70px 20px; background: var(--bg-primary); border-bottom: 1px solid var(--border); } .instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 1280px; margin: 0 auto; } .instagram-item { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-tertiary); } .instagram-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .instagram-item:hover img { transform: scale(1.08); } .instagram-overlay { position: absolute; inset: 0; background: rgba(201,169,98,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); color: #fff; font-size: 28px; } .instagram-item:hover .instagram-overlay { opacity: 1; } .instagram-follow { text-align: center; margin-top: 30px; color: var(--text-muted); font-size: 13px; letter-spacing: 2px; } .instagram-follow a { color: var(--gold); } /* ============ FOOTER ============ */ .footer { background: var(--bg-secondary); padding: 70px 20px 30px; border-top: 2px solid var(--gold-dark); } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; max-width: 1280px; margin: 0 auto; } .footer-col h4 { font-family: var(--font-heading); font-size: 15px; color: var(--text-primary); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 25px; position: relative; padding-bottom: 15px; } .footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--gold); } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 12px; } .footer-col li a { color: var(--text-muted); font-size: 14px; transition: var(--transition); } .footer-col li a:hover { color: var(--gold); padding-left: 5px; } .footer-contact li { color: var(--text-muted); font-size: 14px; display: flex; gap: 12px; align-items: flex-start; } .footer-contact li i { color: var(--gold); margin-top: 4px; } .footer-contact li a { color: var(--gold); } .newsletter-form { display: flex; gap: 0; margin-top: 5px; } .newsletter-form input { flex: 1; padding: 14px 18px; background: var(--bg-tertiary); border: 1px solid var(--border); border-right: none; color: var(--text-primary); font-family: var(--font-body); font-size: 14px; outline: none; transition: var(--transition); } .newsletter-form input::placeholder { color: var(--text-muted); } .newsletter-form input:focus { border-color: var(--gold-dark); } .newsletter-form button { background: var(--gold); color: var(--bg-primary); padding: 0 25px; font-size: 14px; transition: var(--transition); } .newsletter-form button:hover { background: var(--gold-light); } .newsletter-success { color: var(--gold); font-size: 13px; margin-top: 10px; display: none; } /* ============ COPYRIGHT ============ */ .copyright { background: var(--bg-primary); padding: 25px 20px; border-top: 1px solid var(--border); } .copyright-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .copyright-text { color: var(--text-muted); font-size: 13px; letter-spacing: 1px; } .payment-methods { display: flex; gap: 15px; align-items: center; } .payment-methods i { font-size: 24px; color: var(--text-muted); transition: var(--transition); } .payment-methods i:hover { color: var(--gold); } /* ============ MOBILE MENU ============ */ .mobile-menu { display: none; position: fixed; top: 0; left: 0; width: 300px; height: 100vh; background: var(--bg-secondary); z-index: 1000; transform: translateX(-100%); transition: transform 0.3s ease; padding: 30px 25px; overflow-y: auto; } .mobile-menu.open { transform: translateX(0); } .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .mobile-menu-close { color: var(--text-secondary); font-size: 24px; cursor: pointer; } .mobile-menu-close:hover { color: var(--gold); } .mobile-menu ul { list-style: none; } .mobile-menu li { border-bottom: 1px solid var(--border); } .mobile-menu li a { display: block; padding: 15px 0; color: var(--text-secondary); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; } .mobile-menu li a:hover { color: var(--gold); } .mobile-menu-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999; } .mobile-menu-backdrop.active { display: block; } /* ============ LOADING ============ */ .loading-spinner { display: flex; justify-content: center; align-items: center; padding: 40px; color: var(--gold); font-size: 14px; letter-spacing: 2px; } .loading-spinner i { animation: spin 1s linear infinite; margin-right: 10px; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; grid-column: 1 / -1; } /* ============ RESPONSIVE ============ */ @media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(3, 1fr); } .instagram-grid { grid-template-columns: repeat(4, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } .hero h1 { font-size: 38px; } .section-header h2 { font-size: 28px; padding: 0 45px; } } @media (max-width: 768px) { .menu-toggle { display: block; } .nav-list { display: none; } .header-inner { flex-wrap: wrap; gap: 15px; } .logo { font-size: 24px; } .logo-sub { font-size: 9px; letter-spacing: 4px; } .hero { padding: 50px 20px; } .hero h1 { font-size: 28px; letter-spacing: 2px; } .hero p { font-size: 15px; } .features-grid { grid-template-columns: 1fr; gap: 30px; } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .testimonials-grid { grid-template-columns: 1fr; } .instagram-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr; gap: 35px; } .section-header h2 { font-size: 22px; padding: 0 35px; } .section-header h2::before, .section-header h2::after { font-size: 16px; } .copyright-inner { flex-direction: column; text-align: center; } .top-bar-info { display: none; } .category-header { flex-direction: column; gap: 10px; align-items: flex-start; } } @media (max-width: 480px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .product-info { padding: 15px; } .product-name { font-size: 13px; min-height: 36px; } .product-price { flex-direction: column; gap: 3px; } .instagram-grid { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 24px; } .btn-gold, .btn-outline { padding: 14px 30px; font-size: 12px; } .announcement { font-size: 11px; letter-spacing: 1px; } }
전 세계 무료 배송
고객센터: [email protected]

수제 단조
우수성
1985년부터

조상의 장인 정신으로 만든 프리미엄 검과 고급 보석

컬렉션 탐색

최고급 재료

최고급 원료에서 추출 — 다마스커스 강, 스털링 은, 18K 금

수제 단조 품질

각 제품은 숙련된 검장인과 보석 세공사가 정성껏 handmade

평생 내구성

대대로 이어질 작품 — 평생 장인 정신 보증

가장 인기 있는

베스트셀러

모든 베스트셀러 보기
새 컬렉션

신상품

모든 신상품 보기
반지와 검
모두 보기
목걸이
모두 보기
귀걸이
모두 보기
팔찌
모두 보기
고객의 말씀

고객 리뷰

★★★★★

The craftsmanship of the sword I ordered is absolutely breathtaking. The attention to detail is incredible — a true work of art that will be treasured for generations.

Marcus T.
Verified Buyer · United States
★★★★★

I purchased a ring for my wedding anniversary and my wife was speechless. The quality and finish exceeded all expectations. This is jewelry that will be passed down as a family heirloom.

Sofia R.
Verified Buyer · Italy
★★★★★

Longquan Forge is the real deal. Their customer service is as impeccable as their craftsmanship. The necklace I ordered arrived in perfect condition, beautifully packaged.

James K.
Verified Buyer · United Kingdom
도움말 및 정보

자주 묻는 질문

저희 검은 완전히 실용적이며, 고품질 탄소강으로 수제 단조됩니다. 전통 기법으로 담금질하고 경화시켜 절단 능력이 있습니다. 그러나 소장품으로 취급하는 것을 권장합니다.
30일 반품 정책을 제공합니다. 만족하지 못하시면 고객센터로 연락하여 반품을 시작하세요. 모든 제품은 원래 상태로 포장을 포함하여 반환해야 합니다.
대부분의 주문은 2-3영업일 이내에 발송됩니다. 국제 배송은 지역에 따라 보통 7-14영업일이 걸립니다. 체크아웃 시 익스프레스 옵션을 사용할 수 있습니다.
네! 전 세계 100개국 이상에 배송합니다. $199 이상 주문 시 무료 배송입니다. 국가의 수입 규정에 따라 추가 관세가 발생할 수 있습니다.
제공된 보호 상자나 파우치에 보관하세요. 습기, 화학 물질, 극단적인 온도 노출을 피하세요. 부드러운 마른 천으로 부드럽게 닦으세요. 자세한 관리 지침은 사이즈 가이드 페이지를 참조하거나 고객센터에 문의하세요.
Instagram에서 팔로우하세요

@LongquanForge

Sword craftsmanship
 Gold ring
 Damascus steel
 Jewelry craft
 Necklace
 Sword detail
#LongquanForge로 태그하면 소개될 수 있습니다
© 2024 용천단조. 판권 소유.
(function() { 'use strict'; var API_BASE = ''; function $(id) { return document.getElementById(id); } function renderProducts(containerId, products) { var container = $(containerId); if (!container) return; container.innerHTML = ''; if (!products || products.length === 0) { container.innerHTML = '
No products available at this time.
'; return; } var html = ''; products.forEach(function(p) { var hasDiscount = p.original_price && p.original_price > p.price; var originalPriceHtml = hasDiscount ? '$' + p.original_price.toFixed(2) + '' : ''; var priceHtml = hasDiscount ? '$' + p.price.toFixed(2) + '' : '$' + p.price.toFixed(2) + ''; var badgeHtml = p.is_bestseller ? 'Best Seller' : ''; var ratingStars = '★★★★★'; if (p.rating) { var r = Math.round(p.rating); ratingStars = '★★★★★'.substring(0, r) + '☆☆☆☆☆'.substring(0, 5 - r); } html += '
' + '
' + (badgeHtml) + '' + escapeHtml(p.name || '') + '' + '
' + '' + '' + '' + '
' + '
' + '
' + '
' + escapeHtml(p.name || '') + '
' + '
' + originalPriceHtml + priceHtml + '
' + '
' + '' + ratingStars + '' + '(' + (p.review_count || 0) + ')' + '
' + '
' + '
'; }); container.innerHTML = html; } function escapeHtml(str) { var div = document.createElement('div'); div.appendChild(document.createTextNode(str)); return div.innerHTML; } function fetchJSON(url, fallback) { return fetch(url, { headers: { 'Content-Type': 'application/json' } }) .then(function(res) { if (!res.ok) throw new Error('API request failed: ' + res.status); return res.json(); }) .catch(function(err) { console.warn('API fetch failed for ' + url + ': ' + err.message); return fallback; }); } function loadProducts() { var endpoints = [ { id: 'bestSellersGrid', url: API_BASE + '/api/products?category=bestsellers&status=active' }, { id: 'newArrivalsGrid', url: API_BASE + '/api/products?category=new-arrivals&status=active' }, { id: 'ringsSwordsGrid', url: API_BASE + '/api/products?category=rings-swords&status=active' }, { id: 'necklacesGrid', url: API_BASE + '/api/products?category=necklaces&status=active' }, { id: 'earringsGrid', url: API_BASE + '/api/products?category=earrings&status=active' }, { id: 'braceletsGrid', url: API_BASE + '/api/products?category=bracelets&status=active' } ]; endpoints.forEach(function(ep) { fetchJSON(ep.url, []).then(function(data) { var products = Array.isArray(data) ? data : (data.products || data.data || []); renderProducts(ep.id, products); }); }); } function loadHeaderMenu() { fetchJSON(API_BASE + '/api/menu?position=header', null).then(function(data) { if (!data || !data.length) return; var items = Array.isArray(data) ? data : (data.items || data.data || []); var navList = $('navList'); var mobileNavList = $('mobileNavList'); if (!navList) return; var navHtml = ''; var mobileHtml = ''; items.forEach(function(item) { var label = escapeHtml(item.name || item.label || ''); var url = escapeHtml(item.url || '/'); navHtml += '
  • ' + label + '
    • '; mobileHtml += '
  • ' + label + '
    • '; }); navList.innerHTML = navHtml; if (mobileNavList) mobileNavList.innerHTML = mobileHtml; }); } function loadCategories() { fetchJSON(API_BASE + '/api/categories', null).then(function(data) { if (!data || !data.length) return; var cats = Array.isArray(data) ? data : (data.categories || data.data || []); document.querySelectorAll('.category-section').forEach(function(section) { var catSlug = section.id.replace('Section', '').toLowerCase(); var match = cats.find(function(c) { var name = (c.name || '').toLowerCase(); var slug = (c.slug || c.alias || '').toLowerCase(); return name.indexOf(catSlug) !== -1 || slug.indexOf(catSlug) !== -1 || catSlug.indexOf(name) !== -1 || catSlug.indexOf(slug) !== -1; }); if (match && match.name) { var titleEl = section.querySelector('.category-title'); if (titleEl) titleEl.innerHTML = ' ' + escapeHtml(match.name); } }); }); } function loadFooterMenu() { fetchJSON(API_BASE + '/api/menu?position=footer', null).then(function(data) { if (!data || !data.length) return; var items = Array.isArray(data) ? data : (data.items || data.data || []); var footerCol = document.querySelector('.footer-col:nth-child(2) ul'); if (!footerCol) return; var html = ''; items.forEach(function(item) { var label = escapeHtml(item.name || item.label || ''); var url = escapeHtml(item.url || '/'); html += '
  • ' + label + '
    • '; }); footerCol.innerHTML = html; }); } function initFAQ() { var questions = document.querySelectorAll('.faq-question'); questions.forEach(function(btn) { btn.addEventListener('click', function() { var item = btn.closest('.faq-item'); var wasActive = item.classList.contains('active'); document.querySelectorAll('.faq-item').forEach(function(i) { i.classList.remove('active'); }); if (!wasActive) item.classList.add('active'); }); }); } function initMobileMenu() { var toggle = $('menuToggle'); var close = $('menuClose'); var menu = $('mobileMenu'); var backdrop = $('mobileBackdrop'); function openMenu() { menu.classList.add('open'); backdrop.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeMenuFn() { menu.classList.remove('open'); backdrop.classList.remove('active'); document.body.style.overflow = ''; } if (toggle) toggle.addEventListener('click', openMenu); if (close) close.addEventListener('click', closeMenuFn); if (backdrop) backdrop.addEventListener('click', closeMenuFn); } function initNewsletter() { var form = $('newsletterForm'); var success = $('newsletterSuccess'); if (!form) return; form.addEventListener('submit', function(e) { e.preventDefault(); var email = form.querySelector('input[name="email"]').value; if (!email) return; fetch(API_BASE + '/api/subscribers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email }) }).then(function(res) { if (res.ok) { success.style.display = 'block'; form.reset(); setTimeout(function() { success.style.display = 'none'; }, 4000); } else { success.style.color = '#e74c3c'; success.textContent = 'Subscription failed. Please try again.'; success.style.display = 'block'; setTimeout(function() { success.style.display = 'none'; }, 4000); } }).catch(function() { success.style.display = 'block'; setTimeout(function() { success.style.display = 'none'; }, 4000); }); }); } function initLangSwitcher() { var btn = document.getElementById('langSwitcherBtn'); var dropdown = document.getElementById('langDropdown'); if (!btn || !dropdown) return; btn.addEventListener('click', function(e) { e.stopPropagation(); dropdown.classList.toggle('open'); }); document.addEventListener('click', function() { dropdown.classList.remove('open'); }); dropdown.addEventListener('click', function(e) { if (e.target.tagName === 'A') dropdown.classList.remove('open'); }); } function init() { loadProducts(); loadHeaderMenu(); loadCategories(); loadFooterMenu(); initFAQ(); initMobileMenu(); initNewsletter(); initLangSwitcher(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();