d

2025-05-27 14:28:47 +07:00
parent 170122ad32
commit 4fb79660b2
144 changed files with 5973 additions and 0 deletions
--- a/template/theme.html
+++ b/template/theme.html
@@ -0,0 +1,104 @@
+<!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>