149 lines
8.2 KiB
HTML
149 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sản phẩm - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="index.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Sản phẩm</h1>
|
|
<a href="cart.html" class="back-button" style="position: relative;">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
<span class="badge">3</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Search Bar -->
|
|
<div class="search-bar">
|
|
<i class="fas fa-search search-icon"></i>
|
|
<input type="text" class="search-input" placeholder="Tìm kiếm sản phẩm...">
|
|
</div>
|
|
|
|
<!-- Filter Pills -->
|
|
<div class="filter-container">
|
|
<button class="filter-pill active">Tất cả</button>
|
|
<button class="filter-pill">Gạch lát nền</button>
|
|
<button class="filter-pill">Gạch ốp tường</button>
|
|
<button class="filter-pill">Gạch trang trí</button>
|
|
<button class="filter-pill">Gạch ngoài trời</button>
|
|
<button class="filter-pill">Phụ kiện</button>
|
|
</div>
|
|
|
|
<!-- Product Grid -->
|
|
<div class="product-grid">
|
|
<!-- Product 1 -->
|
|
<div class="product-card">
|
|
<img src="https://www.eurotile.vn/pictures/catalog/product/0-gachkholon/cat-tuong/CAT-S01G-1.jpg" alt="Gạch men" class="product-image" onclick="window.location.href='product-detail.html'">
|
|
<div class="product-info">
|
|
<div class="product-name" onclick="window.location.href='product-detail.html'">Gạch Cát Tường 1200x1200</div>
|
|
<div class="product-price">450.000đ/m²</div>
|
|
<div class="product-actions">
|
|
<button class="btn btn-primary btn-sm btn-add-cart">
|
|
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
|
</button>
|
|
<button class="btn btn-secondary btn-sm btn-360" onclick="window.location.href='https://design.eurotile.vn/pub/tool/panorama/show?obsPlanId=3FO3H1VE59R5&locale=en_US&_gl=1*1udzqeo*_gcl_au*MTI3NjIxMzY1NS4xNzU5NzE2Mjg5'">
|
|
<i class="fas fa-cube"></i> Phối cảnh 360°
|
|
</button>
|
|
</div>
|
|
<!--<button class="btn btn-primary btn-sm btn-block">
|
|
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
|
</button>-->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product 2 -->
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?w=300&h=300&fit=crop" alt="Gạch granite" class="product-image">
|
|
<div class="product-info">
|
|
<div class="product-name">Gạch granite nhập khẩu</div>
|
|
<div class="product-price">680.000đ/m²</div>
|
|
<button class="btn btn-primary btn-sm btn-block">
|
|
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
|
</button>
|
|
<button class="btn btn-secondary btn-sm btn-360" onclick="window.location.href='https://design.eurotile.vn/pub/tool/panorama/show?obsPlanId=3FO3H1VE59R&locale=en_US&_gl=1*1udzqeo*_gcl_au*MTI3NjIxMzY1NS4xNzU5NzE2Mjg5'">
|
|
<i class="fas fa-cube"></i> Phối cảnh 360°
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product 3 -->
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1615971677499-5467cbab01c0?w=300&h=300&fit=crop" alt="Gạch mosaic" class="product-image">
|
|
<div class="product-info">
|
|
<div class="product-name">Gạch mosaic trang trí</div>
|
|
<div class="product-price">320.000đ/m²</div>
|
|
<button class="btn btn-primary btn-sm btn-block">
|
|
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
|
</button>
|
|
<button class="btn btn-secondary btn-sm btn-360" onclick="window.location.href='https://design.eurotile.vn/pub/tool/panorama/show?obsPlanId=3FO3H1VE59R5&locale=en_US&_gl=1*1udzqeo*_gcl_au*MTI3NjIxMzY1NS4xNzU5NzE2Mjg5'">
|
|
<i class="fas fa-cube"></i> Phối cảnh 360°
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product 4 -->
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=300&h=300&fit=crop" alt="Gạch 3D" class="product-image">
|
|
<div class="product-info">
|
|
<div class="product-name">Gạch 3D họa tiết</div>
|
|
<div class="product-price">750.000đ/m²</div>
|
|
<button class="btn btn-primary btn-sm btn-block">
|
|
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
|
</button>
|
|
<button class="btn btn-secondary btn-sm btn-360" onclick="window.location.href='https://design.eurotile.vn/pub/tool/panorama/show?obsPlanId=3FO3H1VE59R5&locale=en_US&_gl=1*1udzqeo*_gcl_au*MTI3NjIxMzY1NS4xNzU5NzE2Mjg5'">
|
|
<i class="fas fa-cube"></i> Phối cảnh 360°
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product 5 -->
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1615874694520-474822394e73?w=300&h=300&fit=crop" alt="Gạch ceramic" class="product-image">
|
|
<div class="product-info">
|
|
<div class="product-name">Gạch ceramic chống trượt</div>
|
|
<div class="product-price">380.000đ/m²</div>
|
|
<button class="btn btn-primary btn-sm btn-block">
|
|
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
|
</button>
|
|
<button class="btn btn-secondary btn-sm btn-360" onclick="window.location.href='https://design.eurotile.vn/pub/tool/panorama/show?obsPlanId=3FO3H1VE59R5&locale=en_US&_gl=1*1udzqeo*_gcl_au*MTI3NjIxMzY1NS4xNzU5NzE2Mjg5'">
|
|
<i class="fas fa-cube"></i> Phối cảnh 360°
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product 6 -->
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=300&h=300&fit=crop" alt="Gạch terrazzo" class="product-image">
|
|
<div class="product-info">
|
|
<div class="product-name">Gạch terrazzo đá mài</div>
|
|
<div class="product-price">890.000đ/m²</div>
|
|
<button class="btn btn-primary btn-sm btn-block">
|
|
<i class="fas fa-cart-plus"></i> Thêm vào giỏ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load More -->
|
|
<div class="text-center mt-4 mb-4">
|
|
<button class="btn btn-secondary">
|
|
<i class="fas fa-sync-alt"></i> Tải thêm sản phẩm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |