105 lines
2.8 KiB
HTML
105 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html lang="vi">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>BESTPC - Trang chủ</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
violet: {
|
|
50: "#f5f3ff",
|
|
900: "#4c1d95",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
<link rel="stylesheet" media="screen" href="{{ 'style.css' | asset_url }}" />
|
|
</head>
|
|
|
|
<body>
|
|
<main class="flex overflow-hidden flex-col items-center bg-white">
|
|
|
|
{% include shared/header %}
|
|
|
|
{{ page_content }}
|
|
|
|
{% include shared/footer %}
|
|
|
|
</main>
|
|
|
|
{% include javascript/index %}
|
|
|
|
|
|
<script>
|
|
var swiper = new Swiper("#js-banner-slider", {
|
|
slidesPerView: 1,
|
|
navigation: {
|
|
nextEl: "#js-banner-slider .swiper-button-next",
|
|
prevEl: "#js-banner-slider .swiper-button-prev",
|
|
},
|
|
});
|
|
|
|
var swiper_product = new Swiper("#js-product-best", {
|
|
slidesPerView: 5,
|
|
spaceBetween: 15,
|
|
loop: false,
|
|
rewind: false,
|
|
lazy: true,
|
|
navigation: {
|
|
nextEl: "#js-product-best-btn .swiper-button-next",
|
|
prevEl: "#js-product-best-btn .swiper-button-prev",
|
|
},
|
|
});
|
|
|
|
var swiper_businesses = new Swiper("#list-businesses", {
|
|
slidesPerView: 7,
|
|
spaceBetween: 20,
|
|
loop: false,
|
|
rewind: false,
|
|
lazy: true,
|
|
});
|
|
|
|
runVideo("#js-video");
|
|
|
|
|
|
function runVideo(holder) {
|
|
$(holder).on("click", function () {
|
|
$(this).addClass("active");
|
|
let url = $(holder).attr("data-url");
|
|
let width = $(holder).width();
|
|
let height = $(holder).height();
|
|
const videoUrl = getEmbedVideoUrl(url);
|
|
if (videoUrl) {
|
|
$(holder).html(`<iframe width="${width}" height="${height}" src="${videoUrl}?mute=1&autoplay=1" frameborder="0" allowfullscreen></iframe>`);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function getEmbedVideoUrl(url) {
|
|
const youtubeRegex = /(?:youtube\.com\/(?:shorts\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/(?:shorts\/)?)([a-zA-Z0-9_-]{11})/;
|
|
const tiktokRegex = /(?:tiktok\.com\/@[^\/]+\/video\/)(\d+)/;
|
|
|
|
const youtubeMatch = url.match(youtubeRegex);
|
|
if (youtubeMatch) return 'https://www.youtube.com/embed/' + youtubeMatch[1];
|
|
|
|
const tiktokMatch = url.match(tiktokRegex);
|
|
if (tiktokMatch) return 'https://www.tiktok.com/player/v1/' + tiktokMatch[1];
|
|
|
|
return null;
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|