ducdt/giao_dien_web_mau
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update 14h - 30/03/2023

Browse Source
This commit is contained in:
quannd
2023-03-30 13:55:14 +07:00
parent 23dcb80772
commit 930ec14440
18 changed files with 3558 additions and 4229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
demo-audio-2/index.html
View File

@@ -5,17 +5,14 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="/images/favicon_audio.png" type="image/x-icon" />
<title>DEMO AUDIO 2</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="/css/library.css">
<link rel="stylesheet" href="/css/style_pc.css">
@@ -23,7 +20,7 @@
<body>
<!-- HEADER -->
<header class="header">
<header class="global-header">
<!-- HEADER TOP -->
<div class="header-top bg-secondary">
<div class="container">
@@ -58,7 +55,7 @@
<div class="row align-items-center">
<div class="col-2">
<a href="/" class="logo">
<img src="/images/audio-logo.png" alt="Logo" class="d-flex w-100">
<img src="/images/audio-logo-demo-2.png" alt="Logo" class="d-flex w-100">
</a>
</div>
<div class="col-9 category">
@@ -126,28 +123,8 @@
</div>
</header>
<!-- BREADCRUMB -->
<section class="section-breadcrumb routing py-12px">
<div class="global-breadcrumb container">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none d-flex">
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="/" itemprop="item" class="nopad-l">
<span itemprop="name">Trang chủ</span>
</a>
<meta itemprop="position" content="1">
</li>
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="/linh-kien-may-tinh" itemprop="item" class="nopad-l">
<span itemprop="name"> Linh kiện máy tính </span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
</section>
<!-- HOMEPAGE -->
<div class="homepage d-none">
<div class="homepage">
<!-- SECTION HERO -->
<div class="section-hero">
<div class="swiper swiper-section-hero">
@@ -556,8 +533,28 @@
</div>
</div>
<!-- BREADCRUMB -->
<section class="section-breadcrumb routing py-12px">
<div class="global-breadcrumb container">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none d-flex">
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="/" itemprop="item" class="nopad-l">
<span itemprop="name">Trang chủ</span>
</a>
<meta itemprop="position" content="1">
</li>
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="/linh-kien-may-tinh" itemprop="item" class="nopad-l">
<span itemprop="name"> Linh kiện máy tính </span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
</section>
<!-- CATEGORY PAGE -->
<div class="category-page d-none">
<div class="product-page d-none">
<div class="container">
<!-- BANNER -->
<div class="banner p-relative mb-3">
@@ -702,7 +699,7 @@
</div>
<!-- DETAIL PAGE -->
<div class="detail-page">
<div class="product-detail-page d-none">
<div class="container">
<!-- SECTION PRODUCT -->
<div class="section-product row">
@@ -804,8 +801,8 @@
<!-- -->
<div class="pro-cart d-flex align-items-center justify-content-between my-3">
<input type="number" name="product quantity" class="pro-cart-quantity" value="1" min="1">
<a href="" class="pro-cart-btn bg-primary color-white">Mua ngay</a>
<a href="" class="pro-cart-btn color-primary">
<a href="javascript:;" class="pro-cart-btn bg-primary color-white">Mua ngay</a>
<a href="javascript:;" class="pro-cart-btn color-primary" onclick="toggleModal('#js-modal-ct')">
<i class="static-icons static-icons-static-icon-phone-ct-orange mr-2"></i>
Liên hệ ngay
</a>
@@ -1051,11 +1048,285 @@
</div>
</div>
<!-- DEATAIL CONTACT POPUP -->
<div class="modal-global modal-player d-none" id="js-modal-ct">
<div class="contact-box game-policy">
<!-- PLAYER -->
<div class="contact-form" id="play-game-inside">
<div action="" class="form play-container">
<h4 class="form-title text-16 font-weight-700 text-uppercase color-secondary pb-12px mb-3 text-center">
Thông tin khách hàng</h4>
<div class="form-list px-3" id="js-user-info">
<input type="email" placeholder="Email*" id="js-ct-email" class="form-input" value="">
<input type="text" placeholder="Họ tên*" id="js-ct-name" class="form-input" value="">
<input type="text" placeholder="Số điện thoại*" id="js-ct-tel" class="form-input" value="">
<p class="text-13 text-center my-3">
Liên hệ ngay
<a href="tel:0828826688" class="font-weight-600 color-primary">0828826688</a>
hoặc
<a href="tel:0828826688" class="font-weight-600 color-primary">0828826688</a>
để được tư vấn
</p>
<a href="javascript:;" type="submit"
class="form-btn bg-primary d-flex align-items-center justify-content-center color-white text-uppercase font-weight-600"
onclick="_submitContact()">Nhận báo giá tốt nhất hôm nay</a>
</div>
</div>
</div>
<button class="btn-close" onclick="toggleModal('#js-modal-ct')">
<span class="text-24 font-weight-500 color-white">X</span>
</button>
</div>
</div>
</div>
</div>
<!-- DEAL PAGE -->
<div class="deal-page d-none">
<div class="container homepage">
<!-- SECTION DEAL -->
<div class="section-deal mt-12px">
<!-- HEADING -->
<div class="heading-deal row align-items-center justify-content-center gap-24">
<div class="">
<div class="wrapper-title d-flex align-items-center gap-8">
<i class="title">Flash Sale</i>
<i class="static-icons static-icons-static-icon-thunder"></i>
<i class="time">15.02</i>
</div>
</div>
<div class="d-flex align-items-center gap-8">
<span>Kết thúc trong</span>
<div class="global-time-deal d-flex align-items-center font-weight-700 color-white">
<p>9</p>
<p>9</p>
<span>:</span>
<p>9</p>
<p>9</p>
<span>:</span>
<p>9</p>
<p>9</p>
<span>:</span>
<p>9</p>
<p>9</p>
</div>
</div>
</div>
<!-- PRODUCT -->
<div class="product-deal p-deal-other grid grid--4-cols">
<div class="p-item">
<a href="" class="p-image">
<img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
</a>
<a href="">
<h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
</a>
<div class="p-price d-flex">
<div class="p-price-sale">72.880.000₫</div>
<div class="p-price-stock">82.880.000₫</div>
</div>
<div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
<div class="p-summary">
<span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
+ Hỗ trợ kỹ thuật 24/7
+ Bảo hành chính hãng</span>
</div>
<a href="javascript:;" class="p-cart">
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
</a>
</div>
<div class="wrapper-deal p-relative mt-4">
<div class="deal-line total"></div>
<div class="deal-line remaining"></div>
<i class="static-icons static-icons-static-icon-fire"></i>
<p class="sold text-12 color-white">Đã bán 30</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CART PAGE -->
<div class="cart-page d-none">
<div class="container">
<form class="row">
<div class="col-4">
<div class="cart-box customer-info">
<div class="heading bg-primary color-white d-flex gap-12 p-12px">
<img src="/images/static-icon-cart-location.png" alt="icon cart" class="cart-icon d-flex">
<h2 class="text-16 text-uppercase font-weight-700">Thông tin giao hàng</h2>
</div>
<div class="content">
<p class="text-13 mb-12px">
Để tiếp tục đặt hàng, quý khách xin vui lòng
<a href="/taikhoan" class="color-primary text-under-line">Đăng nhập</a>
hoặc nhập thông tin bên dưới
</p>
<input type="text" name="" id="" class="input-w" placeholder="Họ và tên">
<input type="text" name="" id="" class="input-w" placeholder="Email">
<input type="text" name="" id="" class="input-w" placeholder="Số điện thoại">
<div class="d-flex gap-12">
<select name="" id="" class="input-w">
<option value="">Chọn Tỉnh thành</option>
</select>
<select name="" id="" class="input-w">
<option value="">Chọn Quận/ Huyện</option>
</select>
</div>
<input type="text" name="" id="" class="input-w" placeholder="Địa chỉ">
<textarea name="" id="" cols="30" rows="10" class="input-w" placeholder="Ghi chú"></textarea>
</div>
</div>
</div>
<div class="col-4">
<div class="cart-box payment mb-12px">
<div class="heading bg-primary color-white d-flex gap-12 p-12px">
<img src="/images/static-icon-cart-card.png" alt="icon cart" class="cart-icon d-flex">
<h2 class="text-16 text-uppercase font-weight-700">Phương thức thanh toán</h2>
</div>
<div class="content">
<ul class="list list-radio">
<li class="item">
<input class="d-none" type="radio" id="check-payment-1" name="payment" checked>
<label for="check-payment-1">Thanh toán tiền mặt khi nhận hàng (tiền mặt/quẹt thẻ
ATM,Visa,Master)</label>
</li>
<li class="item">
<input class="d-none" type="radio" id="check-payment-2" name="payment">
<label for="check-payment-2">Thanh toán qua chuyển khoản qua tài khoản ngân hàng(khuyên dùng)</label>
</li>
<li class="item">
<input class="d-none" type="radio" id="check-payment-3" name="payment">
<label for="check-payment-3">Thanh toán qua Ngân Lượng (ATM nội địa, Visa,Master)</label>
</li>
<li class="item">
<input class="d-none" type="radio" id="check-payment-4" name="payment">
<label for="check-payment-4">Trả góp Alepay (Ngân Lượng)</label>
</li>
<li class="item">
<input class="d-none" type="radio" id="check-payment-5" name="payment">
<label for="check-payment-5">Thanh toán trực tuyến (Bằng thẻ ATM/Visa/Master qua cổng VnPay)</label>
</li>
</ul>
</div>
</div>
<div class="cart-box delivery">
<div class="heading bg-primary color-white d-flex gap-12 p-12px">
<img src="/images/static-icon-cart-truck.png" alt="icon cart" class="cart-icon d-flex">
<h2 class="text-16 text-uppercase font-weight-700">Phương thức vận chuyển</h2>
</div>
<div class="content">
<ul class="list list-radio">
<li class="item">
<input class="d-none" type="radio" id="check-delivery-1" name="delivery" checked>
<label for="check-delivery-1">Giao hàng trong 48h: 0đ</label>
</li>
<li class="item">
<input class="d-none" type="radio" id="check-delivery-2" name="delivery">
<label for="check-delivery-2">[NowFree] Giao hàng nhanh trong 2 giờ: 9,000 đ Đơn hàng không đủ điều
kiện giao nhanh 2 giờ (xem
thêm)
</label>
</li>
<li class="item">
<input class="d-none" type="radio" id="check-delivery-3" name="delivery">
<label for="check-delivery-3">[Nhanh] Nhận hàng vào 11 Th03 - 17 Th03: 16,000 đ</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-4">
<div class="cart-box cart-container mb-12px">
<div class="heading d-flex align-items-center gap-12 p-12px">
<h2 class="text-16 text-uppercase font-weight-700">Giỏ hàng</h2>
<span>1 sản phẩm</span>
</div>
<div class="content-w">
<!-- CART LIST -->
<div class="cart-list">
<div class="c-item">
<div class="c-left">
<img src="/images/static-image-pro-1.png" alt="cart-item" class="c-img d-flex w-100"
class="d-flex w-100">
<a href="javascript:;" class="c-delete">Xóa</a>
</div>
<div class="c-right flex-1">
<h3 class="c-name line-clamp-2">Loa đứng Loa Cột Floor Standing Hi-end</h3>
<p class="c-price">72.880.000₫</p>
<p class="d-flex align-items-center gap-12">
<span>Số lượng</span>
<input class="c-quantity" type="number" value="1" min="1">
</p>
</div>
</div>
</div>
<!-- CART VOUCHER -->
<div class="cart-voucher d-flex gap-8 pb-3 px-12px">
<input class="cart-voucher-input" type="text" name="" id="" placeholder="Nhập mã ưu đãi">
<a class="cart-btn">Áp dụng</a>
</div>
<!-- CART SEND -->
<div class="cart-send p-12px text-14">
<div class="d-flex align-items-center justify-content-between pb-3">
<p>Phí vận chuyển:</p>
<p>Miễn phí</p>
</div>
<div class="d-flex align-items-center justify-content-between pb-3 font-weight-700">
<p>Tổng tiền:</p>
<p>72.880.000₫</p>
</div>
<a class="cart-btn">Hoàn tất đơn hàng</a>
<a href="/" class="d-block text-16 text-center font-weight-500 color-primary pt-3 pb-2">Tiếp tục mua
sắm</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- SCROLL TOP -->
<a href="javascript:window.scrollTo({ top: 0, behavior: 'smooth' });" class="scroll-top-btn"
title="Di chuyển lên đầu trang!" style="display: flex">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>
<!--SUCCESS -->
<div class="success-form hide">
<div class="cart-success">
<svg class="success-form-svg" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
<g stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"
stroke-linejoin="round">
<path class="circle"
d="M13 1C6.372583 1 1 6.372583 1 13s5.372583 12 12 12 12-5.372583 12-12S19.627417 1 13 1z" />
<path class="tick" d="M6.5 13.5L10 17 l8.808621-8.308621" />
</g>
</svg>
<p class="text-cart-success">
Thêm sản phẩm vào giỏ hàng thành công!
</p>
</div>
</div>
<!-- FOOTER -->
<footer class="footer mt-4">
<footer class="global-footer mt-4">
<!-- FOOTER TOP -->
<div class="footer-top">
<div class="container">
@@ -1106,7 +1377,7 @@
<div class="row align-items-center">
<div class="col-2">
<a href="/" class="logo">
<img src="/images/audio-logo.png" alt="Logo" class="d-flex w-100">
<img src="/images/audio-logo-demo-2.png" alt="Logo" class="d-flex w-100">
</a>
</div>
<div class="col-6">