Spaces:

thoptk
/

vodanh

Paused

App Files Files Community

thoptk commited on Nov 2, 2025

Commit

cfdc7a4

verified ·

1 Parent(s): 9611b54

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +257 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,257 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cửa Hàng Pháp Duyên - Vật Phẩm Tâm Linh</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'phap-duyen-vang': '#F59E0B', // Vàng saffron
+                        'phap-duyen-nau': '#5B4B49',  // Nâu đất đậm
+                        'phap-duyen-nen': '#FEFDFB', // Kem/Nền trắng ngà
+                        'facebook': '#1877F2',
+                        'twitter': '#1DA1F2',
+                        'youtube': '#FF0000',
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'sans-serif'],
+                        'serif': ['"Noto Serif"', 'serif']
+                    },
+                    animation: {
+                        'fade-in': 'fade-in 0.3s ease-out',
+                    },
+                    keyframes: {
+                        'fade-in': {
+                            '0%': { opacity: '0', transform: 'scale(0.95)' },
+                            '100%': { opacity: '1', transform: 'scale(1)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .video-container {
+            position: relative;
+            padding-bottom: 56.25%; /* 16:9 */
+            height: 0;
+            overflow: hidden;
+            border-radius: 0.5rem;
+        }
+        .video-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body class="bg-phap-duyen-nen">
+    <div class="max-w-md mx-auto min-h-screen bg-white text-phap-duyen-nau shadow-xl">
+        <header class="bg-phap-duyen-nau text-white p-5 text-center rounded-t-lg relative z-10">
+            <h1 class="text-3xl font-serif font-bold text-phap-duyen-vang">Pháp Duyên</h1>
+            <p class="text-sm text-gray-200 mt-1">Gieo duyên lành, gặt quả thiện</p>
+            <div class="flex justify-center space-x-6 mt-4">
+                <a href="https://www.facebook.com/profile.php?id=61581831332376" target="_blank" rel="noopener noreferrer" class="hover:opacity-80 transition-opacity" title="Facebook">
+                    <span class="sr-only">Facebook</span>
+                    <img src="/static/facebook.png" alt="Facebook Icon" class="w-6 h-6">
+                </a>
+                <a href="https://www.youtube.com/channel/UCcLHjyFoquOScNkUWVNF57A/" target="_blank" rel="noopener noreferrer" class="hover:opacity-80 transition-opacity" title="YouTube">
+                    <span class="sr-only">YouTube</span>
+                    <img src="/static/youtube.png" alt="YouTube Icon" class="w-6 h-6">
+                </a>
+                <a href="https://s.shopee.vn/6KwIWAo9Yq?share_channel_code=5" target="_blank" rel="noopener noreferrer" class="hover:opacity-80 transition-opacity" title="TikTok">
+                    <span class="sr-only">TikTok</span>
+                    <img src="/static/tiktok.png" alt="TikTok Icon" class="w-6 h-6">
+                </a>
+                <a href="https://s.shopee.vn/6KwIWAo9Yq?share_channel_code=5" target="_blank" rel="noopener noreferrer" class="hover:opacity-80 transition-opacity" title="Twitter (X)">
+                    <span class="sr-only">Twitter (X)</span>
+                    <img src="/static/twitter.png" alt="Twitter Icon" class="w-6 h-6">
+                </a>
+            </div>
+        </header>
+        <nav class="flex justify-around bg-white p-2 sticky top-0 z-10 shadow-md">
+            <button id="btn-products" class="flex-1 py-3 px-4 text-center text-sm font-semibold transition-all duration-300 border-b-4 border-phap-duyen-vang text-phap-duyen-nau">
+                Sản Phẩm
+            </button>
+            <button id="btn-lectures" class="flex-1 py-3 px-4 text-center text-sm font-semibold transition-all duration-300 border-b-4 border-transparent text-gray-500 hover:text-phap-duyen-nau">
+                Pháp Thoại
+            </button>
+        </nav>
+        <main id="products-section" class="p-4">
+            <h2 class="text-xl font-bold text-phap-duyen-nau border-b-2 border-phap-duyen-vang pb-2 mb-4">
+                Sản Phẩm Tâm Linh
+            </h2>
+            <div class="bg-yellow-50 border border-yellow-200 text-yellow-800 p-3 rounded-lg text-sm mb-4">
+                Mỗi sản phẩm bạn mua là một sự ủng hộ quý báu, giúp Pháp Duyên có thêm kinh phí để thực hiện và chia sẻ nhiều bài pháp thoại ý nghĩa hơn.
+            </div>
+              <div class="grid grid-cols-2 gap-4">
+                {% for product in products %}
+                <a href="{{ product.shopee_link_processed }}"
+                   target="_blank"
+                   rel="noopener noreferrer"
+                   class="block rounded-lg shadow-md overflow-hidden border border-gray-100 bg-phap-duyen-nen group hover:shadow-lg transition-shadow duration-200">
+                    <img src="{{ product.image_url_processed }}"
+                         alt="{{ product.name }}" class="w-full h-36 object-cover">
+                    <div class="p-3">
+                        <h3 class="font-semibold text-sm truncate">{{ product.name }}</h3>
+                        <p class="text-xs text-gray-500">{{ product.description }}</p>
+                        <p class="text-base font-bold text-red-700 mt-1">{{ product.price }}</p>
+                        <div class="w-full bg-phap-duyen-vang text-white py-1.5 rounded-md mt-2 text-sm font-semibold text-center group-hover:bg-yellow-600 transition-colors">
+                            Chi Tiết
+                        </div>
+                    </div>
+                </a> {% endfor %}
+                </div> </main>
+        <main id="lectures-section" class="p-4 space-y-6 hidden">
+            <h2 class="text-xl font-bold text-phap-duyen-nau border-b-2 border-phap-duyen-vang pb-2 mb-4">
+                Pháp Thoại & Giảng Đạo
+            </h2>
+            {% for video in videos %}
+            <div class="rounded-lg shadow-md border border-gray-100 bg-white">
+                <div class="video-container">
+                    <iframe
+                        src="https://www.youtube.com/embed/{{ video.youtube_id }}"
+                        title="YouTube video player"
+                        frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen>
+                    </iframe>
+                </div>
+                <div class="p-3">
+                    <button class="open-modal-btn w-full bg-red-600 text-white py-2 rounded-md mt-2 text-sm font-semibold hover:bg-red-700 transition-colors">
+                        Tuỳ hỷ ủng hộ
+                    </button>
+                </div>
+            </div>
+            {% endfor %}
+            </main>
+        <footer class="bg-phap-duyen-nau text-gray-200 p-6 text-center text-sm rounded-b-lg mt-6">
+            <p class="font-bold text-white mb-2">Liên Hệ & Góp Duyên</p>
+            <p>Email: <a href="mailto:phapduyen.contact@example.com" class="text-phap-duyen-vang hover:underline">phapduyen.contact@example.com</a></p>
+            <p class="mt-2 text-xs">Hãy theo dõi chúng tôi trên mạng xã hội để cập nhật những bài pháp thoại mới nhất!</p>
+            <p class="mt-4 text-xs text-gray-400">&copy; 2025 Pháp Duyên. Bảo lưu mọi quyền.</p>
+        </footer>
+    </div> <div id="donationModal" class="fixed inset-0 bg-black bg-opacity-70 z-50 hidden items-center justify-center p-4 animate-fade-in">
+        <div class="bg-white rounded-lg p-6 w-full max-w-sm mx-auto text-center relative shadow-xl">
+            <button id="closeModalButton" class="absolute top-2 right-3 text-gray-400 hover:text-gray-700 text-3xl font-bold">&times;</button>
+            <h3 class="text-xl font-bold text-phap-duyen-nau mb-3">Tuỳ hỷ ủng hộ</h3>
+            <p class="text-sm text-gray-600 mb-4">
+                Sự ủng hộ của quý vị, dù lớn hay nhỏ, đều là động lực vô giá giúp Pháp Duyên tiếp tục gieo duyên lành qua nhiều bài pháp thoại ý nghĩa hơn.
+            </p>
+            <img src="https://placehold.co/250x250/eee/333?text=Mã+QR+Ủng+Hộ"
+                 alt="Mã QR Ngân Hàng" class="w-48 h-48 mx-auto rounded-md border">
+            <div class="bg-gray-50 p-3 rounded-md mt-4 text-left text-sm border">
+                <p class="mt-2 text-xs italic">Xin chân thành cảm niệm công đức của quý vị!</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Lấy các phần tử DOM
+        const btnProducts = document.getElementById('btn-products');
+        const btnLectures = document.getElementById('btn-lectures');
+        const productsSection = document.getElementById('products-section');
+        const lecturesSection = document.getElementById('lectures-section');
+        const donationModal = document.getElementById('donationModal');
+        const closeModalButton = document.getElementById('closeModalButton');
+        const openModalButtons = document.querySelectorAll('.open-modal-btn');
+        // Định nghĩa các lớp CSS cho tab
+        const activeClasses = 'border-phap-duyen-vang text-phap-duyen-nau';
+        const inactiveClasses = 'border-transparent text-gray-500 hover:text-phap-duyen-nau';
+        // Hàm chung để đặt tab active
+        function setActiveTab(activeBtn, inactiveBtn, activeSection, inactiveSection) {
+            activeBtn.classList.remove(...inactiveClasses.split(' '));
+            activeBtn.classList.add(...activeClasses.split(' '));
+            inactiveBtn.classList.remove(...activeClasses.split(' '));
+            inactiveBtn.classList.add(...inactiveClasses.split(' '));
+            activeSection.classList.remove('hidden');
+            inactiveSection.classList.add('hidden');
+        }
+        // Sự kiện khi nhấn nút "Sản Phẩm"
+        if (btnProducts) {
+            btnProducts.addEventListener('click', () => {
+                setActiveTab(btnProducts, btnLectures, productsSection, lecturesSection);
+            });
+        }
+        // Sự kiện khi nhấn nút "Pháp Thoại"
+        if (btnLectures) {
+            btnLectures.addEventListener('click', () => {
+                setActiveTab(btnLectures, btnProducts, lecturesSection, productsSection);
+            });
+        }
+        // ----- Code cho Modal -----
+        // Gắn sự kiện cho tất cả các nút "Tuỳ hỷ ủng hộ"
+        openModalButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                if (donationModal) {
+                    donationModal.style.display = 'flex';
+                }
+            });
+        });
+        // Sự kiện đóng modal (khi nhấn nút X)
+        if (closeModalButton) {
+            closeModalButton.addEventListener('click', () => {
+                if (donationModal) {
+                    donationModal.style.display = 'none';
+                }
+            });
+        }
+        // Sự kiện đóng modal (khi nhấn vào nền mờ bên ngoài)
+        if (donationModal) {
+            donationModal.addEventListener('click', (event) => {
+                if (event.target === donationModal) {
+                    donationModal.style.display = 'none';
+                }
+            });
+        }
+    </script>
+</body>
+</html>