Update script.js

script.js

@@ -1,159 +1,33 @@
-const PRODUCTS = [
-  "C1012 Glacier White", "C1026 Polar", "C3269 Ash Grey", "C3168 Silver Wave", "C1005 Milky White",
-  "C2103 Onyx Carrara", "C2104 Massa", "C3105 Casla Cloudy", "C3146 Casla Nova", "C2240 Marquin",
-  "C2262 Concrete (Honed)", "C3311 Calacatta Sky", "C3346 Massimo", "C4143 Mario", "C4145 Marina",
-  "C4202 Calacatta Gold", "C1205 Casla Everest", "C4211 Calacatta Supreme", "C4204 Calacatta Classic",
-  "C1102 Super White", "C4246 Casla Mystery", "C4345 Oro", "C4346 Luxe", "C4342 Casla Eternal",
-  "C4221 Athena", "C4255 Calacatta Extra"
-];
-
-function switchTab(tab) {
-  document.querySelectorAll('.section').forEach(el => el.style.display = 'none');
-  document.querySelectorAll('.tab-button').forEach(el => el.classList.remove('active'));
-  document.getElementById(tab).style.display = 'block';
-  document.querySelector(`button[onclick="switchTab('${tab}')"]`).classList.add('active');
-  resetOutput();
-}
-
-function renderProducts(containerId) {
-  const container = document.getElementById(containerId);
-  PRODUCTS.forEach(product => {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'product-button';
-    button.textContent = product;
-    button.onclick = () => button.classList.toggle('selected');
-    container.appendChild(button);
-  });
-}
-
-function resetOutput() {
-  document.getElementById('loading').style.display = 'none';
-  document.getElementById('error').style.display = 'none';
-  document.getElementById('generated-image').style.display = 'none';
-  document.getElementById('download-link').style.display = 'none';
-}
-
-async function generateText2Img(event) {
-  event.preventDefault();
-  const prompt = document.getElementById('prompt').value;
-  const size = document.getElementById('size').value;
-  const customSize = document.getElementById('custom-size').value;
-  const selectedProducts = Array.from(document.querySelectorAll('#text2img-products .product-button.selected')).map(btn => btn.textContent);
-
-  if (!prompt || !selectedProducts.length) {
-    showError('Vui lòng nhập mô tả và chọn ít nhất một sản phẩm.');
-    return;
-  }
-
-  showLoading(true);
-  try {
-    const response = await fetch('https://YOUR_USERNAME-caslaquartz-backend.hf.space/api/text2img', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        prompt,
-        size,
-        custom_size: size === 'Custom size' ? customSize : null,
-        product_codes: selectedProducts
-      })
+// Hiệu ứng cuộn mượt mà khi nhấp vào liên kết (nếu thêm nav sau này)
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
     });
-    const data = await response.json();
-    if (data.error) throw new Error(data.error);
-    showImage(data.image_url);
-  } catch (err) {
-    showError(err.message);
-  } finally {
-    showLoading(false);
-  }
-}
-
-async function generateImg2Img(event) {
-  event.preventDefault();
-  const fileInput = document.getElementById('image-upload');
-  const position = document.getElementById('position').value;
-  const size = document.getElementById('size-img2img').value;
-  const customSize = document.getElementById('custom-size-img2img').value;
-  const selectedProducts = Array.from(document.querySelectorAll('#img2img-products .product-button.selected')).map(btn => btn.textContent);
-
-  if (!fileInput.files[0] || !selectedProducts.length) {
-    showError('Vui lòng tải ảnh và chọn ít nhất một sản phẩm.');
-    return;
-  }
-
-  showLoading(true);
-  const formData = new FormData();
-  formData.append('file', fileInput.files[0]);
-  formData.append('position', position);
-  formData.append('size', size);
-  if (size === 'Custom size') formData.append('custom_size', customSize);
-  selectedProducts.forEach(code => formData.append('product_codes', code));
+});
 
-  try {
-    const response = await fetch('https://YOUR_USERNAME-caslaquartz-backend.hf.space/api/img2img', {
-      method: 'POST',
-      body: formData
+// Hiệu ứng xuất hiện khi cuộn
+const sections = document.querySelectorAll('section');
+const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+            observer.unobserve(entry.target);
+        }
     });
-    const data = await response.json();
-    if (data.error) throw new Error(data.error);
-    showImage(data.image_url);
-  } catch (err) {
-    showError(err.message);
-  } finally {
-    showLoading(false);
-  }
-}
-
-function showLoading(show) {
-  document.getElementById('loading').style.display = show ? 'block' : 'none';
-}
-
-function showError(message) {
-  const error = document.getElementById('error');
-  error.textContent = message;
-  error.style.display = 'block';
-  setTimeout(() => error.style.display = 'none', 5000);
-}
-
-function showImage(url) {
-  const img = document.getElementById('generated-image');
-  const link = document.getElementById('download-link');
-  img.src = url;
-  img.style.display = 'block';
-  link.href = url;
-  link.style.display = 'inline-block';
-}
-
-// Dropzone handlers
-function dropHandler(event) {
-  event.preventDefault();
-  const file = event.dataTransfer.files[0];
-  if (file) {
-    document.getElementById('image-upload').files = event.dataTransfer.files;
-    previewImage(file);
-  }
-}
+}, { threshold: 0.1 });
 
-function dragOverHandler(event) {
-  event.preventDefault();
-}
-
-document.getElementById('image-upload').addEventListener('change', (e) => {
-  if (e.target.files[0]) previewImage(e.target.files[0]);
+sections.forEach(section => {
+    section.classList.add('hidden');
+    observer.observe(section);
 });
 
-function previewImage(file) {
-  const preview = document.getElementById('preview-image');
-  preview.src = URL.createObjectURL(file);
-  preview.style.display = 'block';
-}
-
-// Khởi tạo
-document.getElementById('size').addEventListener('change', (e) => {
-  document.getElementById('custom-size').style.display = e.target.value === 'Custom size' ? 'block' : 'none';
-});
-document.getElementById('size-img2img').addEventListener('change', (e) => {
-  document.getElementById('custom-size-img2img').style.display = e.target.value === 'Custom size' ? 'block' : 'none';
-});
-renderProducts('text2img-products');
-renderProducts('img2img-products');
+// Thêm CSS động qua JS
+const style = document.createElement('style');
+style.textContent = `
+    .hidden { opacity: 0; transform: translateY(20px); transition: all 0.5s; }
+    .visible { opacity: 1; transform: translateY(0); }
+`;
+document.head.appendChild(style);