hmw1001
460 lines
21 KiB
PHP
460 lines
21 KiB
PHP
<?php
|
||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||
|
||
// 레이아웃 폴더내 style.css 파일
|
||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||
?>
|
||
|
||
<!-- E-commerce Modern Layout -->
|
||
<div class="ecommerce-modern-container">
|
||
<!-- Hero Banner Section -->
|
||
<section class="hero-banner">
|
||
<div class="banner-slider">
|
||
<div class="banner-slide active">
|
||
<div class="banner-content">
|
||
<div class="banner-text">
|
||
<span class="banner-badge">NEW COLLECTION</span>
|
||
<h1 class="banner-title">2024 Spring Collection</h1>
|
||
<p class="banner-subtitle">최신 트렌드를 반영한 프리미엄 컬렉션을 만나보세요</p>
|
||
<div class="banner-cta">
|
||
<a href="#shop" class="btn-shop">쇼핑하기</a>
|
||
<a href="#lookbook" class="btn-lookbook">룩북 보기</a>
|
||
</div>
|
||
</div>
|
||
<div class="banner-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Spring Collection" class="hero-img">
|
||
<div class="image-overlay">
|
||
<div class="price-tag">
|
||
<span class="price-label">Starting from</span>
|
||
<span class="price-amount">₩89,000</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="banner-slide">
|
||
<div class="banner-content">
|
||
<div class="banner-text">
|
||
<span class="banner-badge">SALE</span>
|
||
<h1 class="banner-title">Up to 50% OFF</h1>
|
||
<p class="banner-subtitle">한정 기간 특가 할인으로 특별한 혜택을 누리세요</p>
|
||
<div class="banner-cta">
|
||
<a href="#sale" class="btn-shop">할인 상품 보기</a>
|
||
</div>
|
||
</div>
|
||
<div class="banner-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sale Collection" class="hero-img">
|
||
<div class="image-overlay">
|
||
<div class="discount-badge">
|
||
<span class="discount-text">50% OFF</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="banner-controls">
|
||
<button class="banner-prev">‹</button>
|
||
<button class="banner-next">›</button>
|
||
</div>
|
||
<div class="banner-indicators">
|
||
<span class="indicator active" data-slide="0"></span>
|
||
<span class="indicator" data-slide="1"></span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Featured Categories -->
|
||
<section class="categories-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">카테고리별 쇼핑</h2>
|
||
<p class="section-subtitle">다양한 카테고리에서 원하는 상품을 찾아보세요</p>
|
||
</div>
|
||
<div class="categories-grid">
|
||
<div class="category-card">
|
||
<div class="category-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="패션">
|
||
<div class="category-overlay">
|
||
<span class="category-count">1,234개 상품</span>
|
||
</div>
|
||
</div>
|
||
<div class="category-info">
|
||
<h3>패션</h3>
|
||
<p>의류, 신발, 액세서리</p>
|
||
</div>
|
||
</div>
|
||
<div class="category-card">
|
||
<div class="category-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="뷰티">
|
||
<div class="category-overlay">
|
||
<span class="category-count">567개 상품</span>
|
||
</div>
|
||
</div>
|
||
<div class="category-info">
|
||
<h3>뷰티</h3>
|
||
<p>화장품, 스킨케어</p>
|
||
</div>
|
||
</div>
|
||
<div class="category-card">
|
||
<div class="category-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1618220179428-22790b461013?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="홈&리빙">
|
||
<div class="category-overlay">
|
||
<span class="category-count">890개 상품</span>
|
||
</div>
|
||
</div>
|
||
<div class="category-info">
|
||
<h3>홈&리빙</h3>
|
||
<p>가구, 인테리어</p>
|
||
</div>
|
||
</div>
|
||
<div class="category-card">
|
||
<div class="category-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="디지털">
|
||
<div class="category-overlay">
|
||
<span class="category-count">345개 상품</span>
|
||
</div>
|
||
</div>
|
||
<div class="category-info">
|
||
<h3>디지털</h3>
|
||
<p>전자제품, 가전</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Featured Products -->
|
||
<section class="products-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">인기 상품</h2>
|
||
<div class="section-controls">
|
||
<div class="filter-tabs">
|
||
<button class="filter-tab active" data-filter="all">전체</button>
|
||
<button class="filter-tab" data-filter="new">신상품</button>
|
||
<button class="filter-tab" data-filter="sale">할인상품</button>
|
||
<button class="filter-tab" data-filter="best">베스트</button>
|
||
</div>
|
||
<div class="view-controls">
|
||
<button class="view-btn active" data-view="grid">⊞</button>
|
||
<button class="view-btn" data-view="list">☰</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="products-grid" id="products-grid">
|
||
<!-- Product items will be loaded here -->
|
||
<div class="product-card">
|
||
<div class="product-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="프리미엄 코트">
|
||
<div class="product-overlay">
|
||
<button class="btn-quick-view">빠른보기</button>
|
||
<button class="btn-wishlist">♡</button>
|
||
</div>
|
||
<div class="product-badges">
|
||
<span class="badge-new">NEW</span>
|
||
</div>
|
||
</div>
|
||
<div class="product-info">
|
||
<h3 class="product-name">프리미엄 코트</h3>
|
||
<p class="product-brand">Brand Name</p>
|
||
<div class="product-rating">
|
||
<div class="stars">★★★★★</div>
|
||
<span class="rating-count">(128)</span>
|
||
</div>
|
||
<div class="product-price">
|
||
<span class="current-price">₩89,000</span>
|
||
<span class="original-price">₩120,000</span>
|
||
</div>
|
||
<button class="btn-add-cart">장바구니 담기</button>
|
||
</div>
|
||
</div>
|
||
<div class="product-card">
|
||
<div class="product-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="스타일리시 스니커즈">
|
||
<div class="product-overlay">
|
||
<button class="btn-quick-view">빠른보기</button>
|
||
<button class="btn-wishlist">♡</button>
|
||
</div>
|
||
<div class="product-badges">
|
||
<span class="badge-sale">SALE</span>
|
||
</div>
|
||
</div>
|
||
<div class="product-info">
|
||
<h3 class="product-name">스타일리시 스니커즈</h3>
|
||
<p class="product-brand">Brand Name</p>
|
||
<div class="product-rating">
|
||
<div class="stars">★★★★☆</div>
|
||
<span class="rating-count">(89)</span>
|
||
</div>
|
||
<div class="product-price">
|
||
<span class="current-price">₩65,000</span>
|
||
<span class="original-price">₩95,000</span>
|
||
</div>
|
||
<button class="btn-add-cart">장바구니 담기</button>
|
||
</div>
|
||
</div>
|
||
<div class="product-card">
|
||
<div class="product-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1598532163257-ae24b244c626?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="럭셔리 핸드백">
|
||
<div class="product-overlay">
|
||
<button class="btn-quick-view">빠른보기</button>
|
||
<button class="btn-wishlist">♡</button>
|
||
</div>
|
||
<div class="product-badges">
|
||
<span class="badge-best">BEST</span>
|
||
</div>
|
||
</div>
|
||
<div class="product-info">
|
||
<h3 class="product-name">럭셔리 핸드백</h3>
|
||
<p class="product-brand">Brand Name</p>
|
||
<div class="product-rating">
|
||
<div class="stars">★★★★★</div>
|
||
<span class="rating-count">(256)</span>
|
||
</div>
|
||
<div class="product-price">
|
||
<span class="current-price">₩150,000</span>
|
||
</div>
|
||
<button class="btn-add-cart">장바구니 담기</button>
|
||
</div>
|
||
</div>
|
||
<div class="product-card">
|
||
<div class="product-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="모던 시계">
|
||
<div class="product-overlay">
|
||
<button class="btn-quick-view">빠른보기</button>
|
||
<button class="btn-wishlist">♡</button>
|
||
</div>
|
||
</div>
|
||
<div class="product-info">
|
||
<h3 class="product-name">모던 시계</h3>
|
||
<p class="product-brand">Brand Name</p>
|
||
<div class="product-rating">
|
||
<div class="stars">★★★★☆</div>
|
||
<span class="rating-count">(67)</span>
|
||
</div>
|
||
<div class="product-price">
|
||
<span class="current-price">₩45,000</span>
|
||
</div>
|
||
<button class="btn-add-cart">장바구니 담기</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="load-more">
|
||
<button class="btn-load-more">더 많은 상품 보기</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Newsletter Section -->
|
||
<section class="newsletter-section">
|
||
<div class="container">
|
||
<div class="newsletter-content">
|
||
<div class="newsletter-text">
|
||
<h2>새로운 소식을 받아보세요</h2>
|
||
<p>최신 상품과 특별 할인 정보를 이메일로 받아보세요</p>
|
||
</div>
|
||
<div class="newsletter-form">
|
||
<form class="email-form">
|
||
<input type="email" placeholder="이메일 주소를 입력하세요" class="email-input">
|
||
<button type="submit" class="btn-subscribe">구독하기</button>
|
||
</form>
|
||
<p class="newsletter-note">언제든지 구독을 취소할 수 있습니다.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section -->
|
||
<section class="features-section">
|
||
<div class="container">
|
||
<div class="features-grid">
|
||
<div class="feature-item">
|
||
<div class="feature-icon">🚚</div>
|
||
<h3>무료 배송</h3>
|
||
<p>5만원 이상 구매 시 무료 배송</p>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">↩️</div>
|
||
<h3>쉬운 반품</h3>
|
||
<p>30일 무조건 반품 가능</p>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3>안전한 결제</h3>
|
||
<p>SSL 암호화로 안전한 결제</p>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">💬</div>
|
||
<h3>고객 지원</h3>
|
||
<p>24/7 고객 서비스 지원</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- E-commerce Modern JavaScript -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Banner slider functionality
|
||
initBannerSlider();
|
||
|
||
// Product filtering
|
||
initProductFiltering();
|
||
|
||
// Wishlist functionality
|
||
initWishlist();
|
||
|
||
// Newsletter form
|
||
initNewsletterForm();
|
||
|
||
// Quick view modal
|
||
initQuickView();
|
||
});
|
||
|
||
function initBannerSlider() {
|
||
const slides = document.querySelectorAll('.banner-slide');
|
||
const indicators = document.querySelectorAll('.indicator');
|
||
const prevBtn = document.querySelector('.banner-prev');
|
||
const nextBtn = document.querySelector('.banner-next');
|
||
let currentSlide = 0;
|
||
|
||
function showSlide(index) {
|
||
slides.forEach(slide => slide.classList.remove('active'));
|
||
indicators.forEach(indicator => indicator.classList.remove('active'));
|
||
|
||
slides[index].classList.add('active');
|
||
indicators[index].classList.add('active');
|
||
}
|
||
|
||
function nextSlide() {
|
||
currentSlide = (currentSlide + 1) % slides.length;
|
||
showSlide(currentSlide);
|
||
}
|
||
|
||
function prevSlide() {
|
||
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
|
||
showSlide(currentSlide);
|
||
}
|
||
|
||
nextBtn.addEventListener('click', nextSlide);
|
||
prevBtn.addEventListener('click', prevSlide);
|
||
|
||
indicators.forEach((indicator, index) => {
|
||
indicator.addEventListener('click', () => {
|
||
currentSlide = index;
|
||
showSlide(currentSlide);
|
||
});
|
||
});
|
||
|
||
// Auto-slide
|
||
setInterval(nextSlide, 5000);
|
||
}
|
||
|
||
function initProductFiltering() {
|
||
const filterTabs = document.querySelectorAll('.filter-tab');
|
||
const viewBtns = document.querySelectorAll('.view-btn');
|
||
const productsGrid = document.getElementById('products-grid');
|
||
|
||
filterTabs.forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
filterTabs.forEach(t => t.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
|
||
const filter = tab.dataset.filter;
|
||
filterProducts(filter);
|
||
});
|
||
});
|
||
|
||
viewBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
viewBtns.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
const view = btn.dataset.view;
|
||
productsGrid.className = `products-grid ${view}-view`;
|
||
});
|
||
});
|
||
}
|
||
|
||
function filterProducts(filter) {
|
||
const products = document.querySelectorAll('.product-card');
|
||
|
||
products.forEach(product => {
|
||
if (filter === 'all' || product.dataset.category === filter) {
|
||
product.style.display = 'block';
|
||
} else {
|
||
product.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
function initWishlist() {
|
||
const wishlistBtns = document.querySelectorAll('.btn-wishlist');
|
||
|
||
wishlistBtns.forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
btn.classList.toggle('active');
|
||
|
||
if (btn.classList.contains('active')) {
|
||
btn.textContent = '♥';
|
||
btn.style.color = '#e74c3c';
|
||
} else {
|
||
btn.textContent = '♡';
|
||
btn.style.color = '#999';
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
function initNewsletterForm() {
|
||
const form = document.querySelector('.email-form');
|
||
|
||
form.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const email = form.querySelector('.email-input').value;
|
||
|
||
if (email) {
|
||
alert('구독해주셔서 감사합니다!');
|
||
form.reset();
|
||
}
|
||
});
|
||
}
|
||
|
||
function initQuickView() {
|
||
const quickViewBtns = document.querySelectorAll('.btn-quick-view');
|
||
|
||
quickViewBtns.forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
// Quick view modal implementation
|
||
alert('빠른보기 기능이 곧 추가됩니다!');
|
||
});
|
||
});
|
||
}
|
||
|
||
// Smooth scrolling for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|