Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Trà Sữa Ngon - Thương Hiệu Trà Sữa Hàng Đầu</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #e91e63; | |
| --secondary-color: #ff6090; | |
| --accent-color: #ffc1e3; | |
| --dark-color: #333; | |
| --light-color: #fff; | |
| --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); | |
| min-height: 100vh; | |
| } | |
| /* Header */ | |
| header { | |
| background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%); | |
| padding: 1rem 2rem; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.2); | |
| } | |
| .header-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: white; | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| .logo i { | |
| font-size: 2rem; | |
| } | |
| .built-with { | |
| color: rgba(255,255,255,0.8); | |
| font-size: 0.75rem; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .built-with:hover { | |
| color: white; | |
| } | |
| nav { | |
| display: flex; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| nav a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| position: relative; | |
| } | |
| nav a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: white; | |
| transition: width 0.3s; | |
| } | |
| nav a:hover::after { | |
| width: 100%; | |
| } | |
| .cart-icon { | |
| position: relative; | |
| cursor: pointer; | |
| font-size: 1.5rem; | |
| color: white; | |
| } | |
| .cart-count { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| background: #ffeb3b; | |
| color: #333; | |
| border-radius: 50%; | |
| width: 22px; | |
| height: 22px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| } | |
| .mobile-menu { | |
| display: none; | |
| font-size: 1.5rem; | |
| color: white; | |
| cursor: pointer; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(135deg, rgba(233,30,99,0.9) 0%, rgba(156,39,176,0.9) 100%), | |
| url('https://images.unsplash.com/photo-1558857563-c0c3a8b7c8b5?w=1200') center/cover; | |
| padding: 6rem 2rem; | |
| text-align: center; | |
| color: white; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2rem, 5vw, 3.5rem); | |
| margin-bottom: 1rem; | |
| text-shadow: 2px 2px 10px rgba(0,0,0,0.3); | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| } | |
| .hero-btn { | |
| background: white; | |
| color: var(--primary-color); | |
| padding: 1rem 2.5rem; | |
| border: none; | |
| border-radius: 50px; | |
| font-size: 1.1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| } | |
| .hero-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 40px rgba(0,0,0,0.3); | |
| } | |
| /* Categories */ | |
| .categories { | |
| padding: 3rem 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: 2rem; | |
| color: var(--dark-color); | |
| margin-bottom: 2rem; | |
| position: relative; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| display: block; | |
| width: 80px; | |
| height: 4px; | |
| background: var(--primary-color); | |
| margin: 0.5rem auto; | |
| border-radius: 2px; | |
| } | |
| .category-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .category-card { | |
| background: white; | |
| padding: 2rem 1rem; | |
| border-radius: 20px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| box-shadow: 0 5px 20px rgba(0,0,0,0.1); | |
| } | |
| .category-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(233,30,99,0.2); | |
| } | |
| .category-card.active { | |
| background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%); | |
| color: white; | |
| } | |
| .category-card i { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary-color); | |
| } | |
| .category-card.active i { | |
| color: white; | |
| } | |
| /* Products */ | |
| .products { | |
| padding: 3rem 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .product-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .product-card { | |
| background: white; | |
| border-radius: 25px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| transition: all 0.3s; | |
| position: relative; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 50px rgba(233,30,99,0.2); | |
| } | |
| .product-badge { | |
| position: absolute; | |
| top: 15px; | |
| left: 15px; | |
| background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); | |
| color: white; | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| } | |
| .product-image { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| transition: transform 0.5s; | |
| } | |
| .product-card:hover .product-image { | |
| transform: scale(1.1); | |
| } | |
| .product-image-container { | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .quick-add { | |
| position: absolute; | |
| bottom: -50px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-weight: bold; | |
| } | |
| .product-card:hover .quick-add { | |
| bottom: 15px; | |
| } | |
| .product-info { | |
| padding: 1.5rem; | |
| } | |
| .product-name { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: var(--dark-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .product-desc { | |
| color: #777; | |
| font-size: 0.9rem; | |
| margin-bottom: 1rem; | |
| } | |
| .product-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .product-price { | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| } | |
| .product-rating { | |
| color: #ffc107; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| } | |
| .add-to-cart { | |
| background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%); | |
| color: white; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .add-to-cart:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 5px 20px rgba(233,30,99,0.4); | |
| } | |
| /* Cart Sidebar */ | |
| .cart-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.5); | |
| z-index: 2000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s; | |
| } | |
| .cart-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .cart-sidebar { | |
| position: fixed; | |
| top: 0; | |
| right: -400px; | |
| width: 100%; | |
| max-width: 400px; | |
| height: 100%; | |
| background: white; | |
| z-index: 2001; | |
| transition: right 0.3s; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .cart-sidebar.active { | |
| right: 0; | |
| } | |
| .cart-header { | |
| background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%); | |
| color: white; | |
| padding: 1.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .cart-header h2 { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .close-cart { | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .cart-items { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| } | |
| .cart-item { | |
| display: flex; | |
| gap: 1rem; | |
| padding: 1rem; | |
| border-bottom: 1px solid #eee; | |
| align-items: center; | |
| } | |
| .cart-item-image { | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 15px; | |
| object-fit: cover; | |
| } | |
| .cart-item-info { | |
| flex: 1; | |
| } | |
| .cart-item-name { | |
| font-weight: bold; | |
| margin-bottom: 0.3rem; | |
| } | |
| .cart-item-price { | |
| color: var(--primary-color); | |
| font-weight: bold; | |
| } | |
| .cart-item-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| .qty-btn { | |
| background: #f0f0f0; | |
| border: none; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .qty-btn:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .remove-item { | |
| color: #ff6b6b; | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| } | |
| .cart-footer { | |
| padding: 1.5rem; | |
| border-top: 2px solid #eee; | |
| } | |
| .cart-total { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| .checkout-btn { | |
| width: 100%; | |
| background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%); | |
| color: white; | |
| border: none; | |
| padding: 1rem; | |
| border-radius: 25px; | |
| font-size: 1.1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .checkout-btn:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 30px rgba(233,30,99,0.4); | |
| } | |
| .empty-cart { | |
| text-align: center; | |
| padding: 3rem; | |
| color: #999; | |
| } | |
| .empty-cart i { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| } | |
| /* Product Modal */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.7); | |
| z-index: 3000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s; | |
| padding: 1rem; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal { | |
| background: white; | |
| border-radius: 30px; | |
| max-width: 500px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| transform: scale(0.8); | |
| transition: transform 0.3s; | |
| } | |
| .modal-overlay.active .modal { | |
| transform: scale(1); | |
| } | |
| .modal-image { | |
| width: 100%; | |
| height: 250px; | |
| object-fit: cover; | |
| border-radius: 30px 30px 0 0; | |
| } | |
| .modal-content { | |
| padding: 2rem; | |
| } | |
| .modal-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .modal-price { | |
| font-size: 1.8rem; | |
| color: var(--primary-color); | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| .modal-desc { | |
| color: #666; | |
| margin-bottom: 1.5rem; | |
| } | |
| .option-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .option-title { | |
| font-weight: bold; | |
| margin-bottom: 0.8rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .option-buttons { | |
| display: flex; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .option-btn { | |
| padding: 0.6rem 1.2rem; | |
| border: 2px solid #ddd; | |
| border-radius: 25px; | |
| background: white; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .option-btn:hover, .option-btn.active { | |
| border-color: var(--primary-color); | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .topping-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 0.5rem; | |
| } | |
| .topping-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| border: 2px solid #ddd; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .topping-item:hover, .topping-item.active { | |
| border-color: var(--primary-color); | |
| background: rgba(233,30,99,0.1); | |
| } | |
| .topping-item input { | |
| display: none; | |
| } | |
| .modal-footer { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| } | |
| .modal-qty { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| background: #f5f5f5; | |
| padding: 0.5rem 1rem; | |
| border-radius: 25px; | |
| } | |
| .modal-qty-btn { | |
| background: white; | |
| border: none; | |
| width: 35px; | |
| height: 35px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| .modal-add-btn { | |
| flex: 1; | |
| background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%); | |
| color: white; | |
| border: none; | |
| padding: 1rem; | |
| border-radius: 25px; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .modal-add-btn:hover { | |
| transform: scale(1.02); | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| background: white; | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.2); | |
| } | |
| /* Promotions */ | |
| .promotions { | |
| padding: 3rem 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .promo-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .promo-card { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border-radius: 25px; | |
| padding: 2rem; | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .promo-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -50%; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 50%; | |
| } | |
| .promo-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .promo-card p { | |
| opacity: 0.9; | |
| margin-bottom: 1rem; | |
| } | |
| .promo-code { | |
| background: rgba(255,255,255,0.2); | |
| padding: 0.5rem 1rem; | |
| border-radius: 10px; | |
| display: inline-block; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| color: white; | |
| padding: 3rem 2rem; | |
| margin-top: 3rem; | |
| } | |
| .footer-grid { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .footer-section h3 { | |
| margin-bottom: 1rem; | |
| color: var(--secondary-color); | |
| } | |
| .footer-section p, .footer-section a { | |
| color: rgba(255,255,255,0.7); | |
| text-decoration: none; | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| transition: color 0.3s; | |
| } | |
| .footer-section a:hover { | |
| color: white; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .social-links a { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s; | |
| } | |
| .social-links a:hover { | |
| background: var(--primary-color); | |
| transform: translateY(-3px); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| margin-top: 2rem; | |
| border-top: 1px solid rgba(255,255,255,0.1); | |
| color: rgba(255,255,255,0.5); | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.3); | |
| z-index: 5000; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: transform 0.3s; | |
| } | |
| .toast.show { | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .mobile-menu { | |
| display: block; | |
| } | |
| nav { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%); | |
| flex-direction: column; | |
| padding: 1rem; | |
| gap: 1rem; | |
| } | |
| nav.active { | |
| display: flex; | |
| } | |
| .hero { | |
| padding: 4rem 1rem; | |
| } | |
| .modal { | |
| margin: 1rem; | |
| } | |
| .modal-footer { | |
| flex-direction: column; | |
| } | |
| .cart-sidebar { | |
| max-width: 100%; | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .product-card { | |
| animation: fadeInUp 0.5s ease forwards; | |
| } | |
| .product-card:nth-child(1) { animation-delay: 0.1s; } | |
| .product-card:nth-child(2) { animation-delay: 0.2s; } | |
| .product-card:nth-child(3) { animation-delay: 0.3s; } | |
| .product-card:nth-child(4) { animation-delay: 0.4s; } | |
| .product-card:nth-child(5) { animation-delay: 0.5s; } | |
| .product-card:nth-child(6) { animation-delay: 0.6s; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-container"> | |
| <div> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-mug-hot"></i> | |
| Trà Sữa Ngon | |
| </a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> | |
| </div> | |
| <nav id="nav"> | |
| <a href="#home">Trang chủ</a> | |
| <a href="#menu">Thực đơn</a> | |
| <a href="#promo">Khuyến mãi</a> | |
| <a href="#contact">Liên hệ</a> | |
| </nav> | |
| <div style="display: flex; align-items: center; gap: 1rem;"> | |
| <div class="cart-icon" onclick="toggleCart()"> | |
| <i class="fas fa-shopping-bag"></i> | |
| <span class="cart-count" id="cartCount">0</span> | |
| </div> | |
| <div class="mobile-menu" onclick="toggleMenu()"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <h1>🧋 Trà Sữa Thượng Hạng</h1> | |
| <p>Hương vị đậm đà, nguyên liệu tươi ngon, giao hàng siêu tốc!</p> | |
| <button class="hero-btn" onclick="scrollToMenu()"> | |
| <i class="fas fa-utensils"></i> Xem Thực Đơn | |
| </button> | |
| </section> | |
| <!-- Categories --> | |
| <section class="categories"> | |
| <h2 class="section-title">Danh Mục</h2> | |
| <div class="category-grid"> | |
| <div class="category-card active" onclick="filterProducts('all')"> | |
| <i class="fas fa-th-large"></i> | |
| <h3>Tất cả</h3> | |
| </div> | |
| <div class="category-card" onclick="filterProducts('milk-tea')"> | |
| <i class="fas fa-mug-hot"></i> | |
| <h3>Trà Sữa</h3> | |
| </div> | |
| <div class="category-card" onclick="filterProducts('fruit-tea')"> | |
| <i class="fas fa-lemon"></i> | |
| <h3>Trà Trái Cây</h3> | |
| </div> | |
| <div class="category-card" onclick="filterProducts('special')"> | |
| <i class="fas fa-star"></i> | |
| <h3>Đặc Biệt</h3> | |
| </div> | |
| <div class="category-card" onclick="filterProducts('topping')"> | |
| <i class="fas fa-cookie"></i> | |
| <h3>Topping</h3> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products --> | |
| <section class="products" id="menu"> | |
| <h2 class="section-title">Thực Đơn</h2> | |
| <div class="product-grid" id="productGrid"> | |
| <!-- Products will be rendered here --> | |
| </div> | |
| </section> | |
| <!-- Promotions --> | |
| <section class="promotions" id="promo"> | |
| <h2 class="section-title">Khuyến Mãi Hot</h2> | |
| <div class="promo-grid"> | |
| <div class="promo-card"> | |
| <h3>🎉 Giảm 20% Đơn Đầu Tiên</h3> | |
| <p>Áp dụng cho khách hàng mới đặt hàng lần đầu</p> | |
| <span class="promo-code">NEWBIE20</span> | |
| </div> | |
| <div class="promo-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"> | |
| <h3>🧋 Mua 2 Tặng 1</h3> | |
| <p>Mua 2 ly trà sữa bất kỳ, tặng 1 ly size M</p> | |
| <span class="promo-code">BUY2GET1</span> | |
| </div> | |
| <div class="promo-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"> | |
| <h3>🚚 Freeship Đơn 100K</h3> | |
| <p>Miễn phí giao hàng cho đơn từ 100.000đ</p> | |
| <span class="promo-code">FREESHIP</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact"> | |
| <div class="footer-grid"> | |
| <div class="footer-section"> | |
| <h3><i class="fas fa-mug-hot"></i> Trà Sữa Ngon</h3> | |
| <p>Thương hiệu trà sữa hàng đầu Việt Nam với hơn 100 cửa hàng trên toàn quốc.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-tiktok"></i></a> | |
| <a href="#"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Liên hệ</h3> | |
| <p><i class="fas fa-phone"></i> 1900 1234</p> | |
| <p><i class="fas fa-envelope"></i> info@trasuangon.vn</p> | |
| <p><i class="fas fa-map-marker-alt"></i> 123 Nguyễn Huệ, Q.1, TP.HCM</p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Giờ mở cửa</h3> | |
| <p>Thứ 2 - Thứ 6: 8:00 - 22:00</p> | |
| <p>Thứ 7 - Chủ nhật: 9:00 - 23:00</p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Thanh toán</h3> | |
| <p><i class="fas fa-credit-card"></i> Thẻ tín dụng</p> | |
| <p><i class="fas fa-mobile-alt"></i> Momo, ZaloPay</p> | |
| <p><i class="fas fa-money-bill"></i> Tiền mặt</p> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2024 Trà Sữa Ngon. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <!-- Cart Sidebar --> | |
| <div class="cart-overlay" id="cartOverlay" onclick="toggleCart()"></div> | |
| <div class="cart-sidebar" id="cartSidebar"> | |
| <div class="cart-header"> | |
| <h2><i class="fas fa-shopping-bag"></i> Giỏ hàng</h2> | |
| <button class="close-cart" onclick="toggleCart()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="cart-items" id="cartItems"> | |
| <!-- Cart items will be rendered here --> | |
| </div> | |
| <div class="cart-footer"> | |
| <div class="cart-total"> | |
| <span>Tổng cộng:</span> | |
| <span id="cartTotal">0đ</span> | |
| </div> | |
| <button class="checkout-btn" onclick="checkout()"> | |
| <i class="fas fa-credit-card"></i> Thanh toán | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product Modal --> | |
| <div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)"> | |
| <div class="modal" onclick="event.stopPropagation()"> | |
| <button class="close-modal" onclick="closeModalBtn()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <img src="" alt="" class="modal-image" id="modalImage"> | |
| <div class="modal-content"> | |
| <h2 class="modal-title" id="modalTitle"></h2> | |
| <div class="modal-price" id="modalPrice"></div> | |
| <p class="modal-desc" id="modalDesc"></p> | |
| <div class="option-group"> | |
| <div class="option-title"><i class="fas fa-glass-whiskey"></i> Chọn size</div> | |
| <div class="option-buttons"> | |
| <button class="option-btn active" data-size="M" data-price="0">Size M</button> | |
| <button class="option-btn" data-size="L" data-price="6000">Size L (+6k)</button> | |
| <button class="option-btn" data-size="XL" data-price="10000">Size XL (+10k)</button> | |
| </div> | |
| </div> | |
| <div class="option-group"> | |
| <div class="option-title"><i class="fas fa-snowflake"></i> Chọn đá</div> | |
| <div class="option-buttons"> | |
| <button class="option-btn" data-ice="0">Không đá</button> | |
| <button class="option-btn" data-ice="30">Ít đá</button> | |
| <button class="option-btn active" data-ice="70">Bình thường</button> | |
| <button class="option-btn" data-ice="100">Nhiều đá</button> | |
| </div> | |
| </div> | |
| <div class="option-group"> | |
| <div class="option-title"><i class="fas fa-candy-cane"></i> Chọn đường</div> | |
| <div class="option-buttons"> | |
| <button class="option-btn" data-sugar="0">Không đường</button> | |
| <button class="option-btn" data-sugar="30">30%</button> | |
| <button class="option-btn" data-sugar="50">50%</button> | |
| <button class="option-btn active" data-sugar="70">70%</button> | |
| <button class="option-btn" data-sugar="100">100%</button> | |
| </div> | |
| </div> | |
| <div class="option-group"> | |
| <div class="option-title"><i class="fas fa-cookie-bite"></i> Thêm topping</div> | |
| <div class="topping-grid" id="toppingGrid"> | |
| <!-- Toppings will be rendered here --> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <div class="modal-qty"> | |
| <button class="modal-qty-btn" onclick="changeModalQty(-1)">-</button> | |
| <span id="modalQty">1</span> | |
| <button class="modal-qty-btn" onclick="changeModalQty(1)">+</button> | |
| </div> | |
| <button class="modal-add-btn" onclick="addToCartFromModal()"> | |
| <i class="fas fa-cart-plus"></i> Thêm vào giỏ - <span id="modalTotalPrice">0đ</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast --> | |
| <div class="toast" id="toast"> | |
| <i class="fas fa-check-circle"></i> | |
| <span i |