<!doctype html>


  
  
  Trang Truyện
  <style>

/* Danh sách truyện */
#story-list-1 {
  display: flex;
  gap: 20px; /* Giảm khoảng cách trên điện thoại */
  overflow-x: auto;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
  justify-content: flex-start; 
  overflow-x: auto;
  -ms-overflow-style: none; /* Loại bỏ thanh cuộn trên IE và Edge */
  scrollbar-width: none; /* Loại bỏ thanh cuộn trên Firefox */
}

#story-list-1::-webkit-scrollbar {
  display: none; /* Loại bỏ thanh cuộn trên Chrome, Safari và Edge */
}


/* Container từng truyện */
.story-container-1 {
  flex: 0 0 auto;
  width: 150px; /* Giảm kích thước bìa trên màn hình nhỏ */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  scroll-snap-align: start;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.story-container-1.visible {
  opacity: 1;
  transform: scale(1);
}


.story-title-1 {
  text-align: center;
  font-size: 14px; /* Nhỏ hơn trên điện thoại */
  font-weight: bold;
  color: #333;
  margin-top: 8px;
  display: -webkit-box; /* Sử dụng để áp dụng -webkit-line-clamp */
  -webkit-line-clamp: 2; /* Giới hạn tối đa 2 dòng */
  -webkit-box-orient: vertical; /* Hướng dọc */
  overflow: hidden; /* Ẩn nội dung dư thừa */
  text-overflow: ellipsis; /* Thêm dấu "..." nếu văn bản bị cắt */
  width: 100%;
  height: 33px; /* Chiều cao cố định cho 2 dòng (tùy chỉnh theo font-size và line-height) */
  line-height: 1.2; /* Điều chỉnh khoảng cách dòng */
}



    .story-cover-1 {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 10px;
    }
    .story-cover-1 img {
      width: 100%;
      aspect-ratio: 2 / 3;
      object-fit: cover;
      border-radius: 10px;
      transition: transform 0.3s ease;
    }
    .story-cover-1 img:hover {
      transform: scale(1.1);
    }

    /* Ribbon Styles */
.ribbon {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #FFA726, #FB8C00);
  color: white;
  font-size: 10px; /* Giữ chữ vừa phải */
  font-weight: bold;
  text-transform: uppercase;
  padding: 6px 10px 6px 10px; /* Thu hẹp nhẹ ribbon */
  border-bottom-left-radius: 8px; /* Bo góc dưới bên trái */
  border-bottom-right-radius: 8px; /* Bo góc dưới bên phải */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Hiệu ứng bóng giữ nguyên */
  z-index: 1;
}

.ribbon span {
  margin-right: 16px;
  display: block; /* Đảm bảo nội dung hiển thị trên một dòng */
}
/* Circle Styles */
.circle {
  position: absolute;
  top: -3px; /* Điều chỉnh vị trí vòng tròn theo trục dọc */
  right: -6px; /* Điều chỉnh vị trí vòng tròn theo trục ngang */
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; /* Đảm bảo vòng tròn nằm trên ribbon */
}

.circle svg {
  width: 16px;
  height: 16px;

  /* Thuộc tính mới để tùy chỉnh vị trí SVG */
  margin-top: 4px; /* Dịch chuyển SVG lên/xuống */
  margin-left: -4px; /* Dịch chuyển SVG trái/phải */
}
/* Danh sách truyện */
#story-list-1 {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
  justify-content: flex-start;
  -ms-overflow-style: none; /* Loại bỏ thanh cuộn trên IE và Edge */
  scrollbar-width: none; /* Loại bỏ thanh cuộn trên Firefox */
}

#story-list-1::-webkit-scrollbar {
  display: none; /* Loại bỏ thanh cuộn trên Chrome, Safari và Edge */
}

/* Nút cuộn */
.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none; /* Loại bỏ nền */
  border: none;
  padding: 0; /* Loại bỏ khoảng cách bên trong */
  cursor: pointer;
  z-index: 10;
  display: none;
}
.scroll-button.active {
  display: block; /* Hiển thị khi thêm class "active" */
}
.scroll-button.left {
  left: 10px; /* Đặt nút bên trái */
}

.scroll-button.right {
  right: 10px; /* Đặt nút bên phải */
}

.scroll-button svg {
  width: 24px;
  height: 24px;
  fill: white; /* Màu của biểu tượng SVG */
}

.scroll-button:hover svg {
  fill: #555; /* Đổi màu khi hover */
}

/* Ẩn nút cuộn trên màn hình nhỏ */
@media (max-width: 1024px) {
  .scroll-button {
    display: none;
  }
}
.loader {
  display: none;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #007BFF;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: loader 1s linear infinite;
  margin: 0 auto;
}

@keyframes loader {
  to { transform: rotate(360deg); }
}

  </style>


<div style="position: relative; width: 100%; overflow: hidden;">
  <div class="loader"></div> <!-- Loader -->
  <div id="story-list-1"></div>
  <button class="scroll-button left" onclick="scrollStoryList('left')">
<svg class='line' width="100%" height="100%" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path class='c' d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </path></svg>
  </button>
  <button class="scroll-button right" onclick="scrollStoryList('right')">
<svg class='line' width="100%" height="100%" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path class='c' d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </path></svg>
  </button>
</div>


  

  <script>
    const apiUrl = "https://script.google.com/macros/s/AKfycbxOOHp5RYr8mkbbEO9taOOESqLlqwrZqiQ-rnvU6sMEqQt0Goln_2zlHlREkgXfmX6cOg/exec?tab=Kinh%20d%E1%BB%8B";

function getRibbon(status) {
  let background, gradientId, svgPath, label;

  switch (status) {
    case "Đang viết":
      gradientId = "gradient-writing";
      svgPath = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
  <defs>
    <linearGradient id="gradient-writing" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFA726" />
      <stop offset="100%" stop-color="#FB8C00" />
    </linearGradient>
  </defs>
  <!-- Đường chữ nhật -->
  <rect x="4" y="16" width="16" height="4" rx="2" fill="none" stroke="url(#gradient-writing)" stroke-width="3"></rect>
  <!-- Hình tam giác -->
  <path d="M4.90949 11.3642L8 16H16L19.0905 11.3642C19.5259 10.7112 19.7436 10.3847 19.7083 10.0289C19.6731 9.67311 19.3956 9.39561 18.8406 8.84062L12 2L5.15938 8.84062C4.60439 9.39561 4.32689 9.67311 4.29166 10.0289C4.25643 10.3847 4.47412 10.7112 4.90949 11.3642Z" fill="none" stroke="url(#gradient-writing)" stroke-width="3"></path>
  <!-- Hình tròn -->
  <circle cx="12" cy="11" r="2" fill="none" stroke="url(#gradient-writing)" stroke-width="3"></circle>
  <!-- Đường thẳng -->
  <path d="M12 2V9" fill="none" stroke="url(#gradient-writing)" stroke-width="3"></path>
</svg>

`;
      background = "linear-gradient(135deg, #FFA726, #FB8C00)";
      label = "Đang viết";
      break;
    case "Tạm ngừng":
      gradientId = "gradient-paused";
      svgPath = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.149 512.149" fill="none">
  <defs>
    <linearGradient id="gradient-paused" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FF5252" />
      <stop offset="100%" stop-color="#D32F2F" />
    </linearGradient>
  </defs>
  <g transform="translate(-1)">
    <g>
      <path d="M504.427,111.44l-1.253-1.254c-11.776-11.776-30.967-11.802-42.814,0.035l-46.089,46.574 c-2.428,2.436-6.312,2.534-8.845,0.203l-64.618-59.657c-6.276-5.8-14.442-8.987-22.996-8.987h-96.124 c-2.269,0-4.44,0.865-6.082,2.419l-81.47,77.356c-11.935,11.944-12.756,31.197-1.818,42.92 c5.844,6.268,13.736,9.719,22.219,9.719h0.15c8.413-0.044,16.499-3.619,22.087-9.728l57.538-60.893h20.595L120.63,300.218H37.81 c-19.633,0-35.778,14.68-36.758,33.421c-0.521,9.79,2.904,19.094,9.64,26.191c6.638,7,15.969,11.008,25.618,11.008h123.586 c2.436,0,4.767-1.006,6.444-2.798l63.32-67.593l53.248,55.684l-16.075,102.735c-4.052,17.02,4.114,34.357,19.412,41.198 c4.714,2.119,9.719,3.178,14.698,3.178c5.358,0,10.69-1.227,15.598-3.655c9.481-4.696,16.296-13.285,18.776-23.967 l27.463-147.306c0.53-2.86-0.38-5.809-2.445-7.865l-73.295-73.198l58.227-58.138l40.589,40.58 c11.335,11.335,31.091,11.335,42.417,0l76.156-76.147c5.623-5.623,8.722-13.109,8.722-21.054 C513.149,124.54,510.05,117.063,504.427,111.44z" fill="url(#gradient-paused)" />
      <path d="M407.065,114.837c29.211,0,52.966-23.755,52.966-52.966c0-29.211-23.755-52.966-52.966-52.966 c-29.21,0-52.966,23.755-52.966,52.966C354.1,91.082,377.855,114.837,407.065,114.837z" fill="url(#gradient-paused)" />
    </g>
  </g>
</svg>
 `;
      background = "linear-gradient(135deg, #FF5252, #D32F2F)";
      label = "Tạm ngừng";
      break;
    case "Hoàn thành":
      gradientId = "gradient-completed";
      svgPath = `
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient-complete" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#42A5F5" />
      <stop offset="100%" stop-color="#1E88E5" />
    </linearGradient>
  </defs>
  <path
    d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM11.5 17.25C11.5 17.61 11.14 17.85 10.81 17.71C9.6 17.19 8.02 16.71 6.92 16.57L6.73 16.55C6.12 16.47 5.62 15.9 5.62 15.28V7.58C5.62 6.81 6.24 6.24 7 6.3C8.25 6.4 10.1 7 11.26 7.66C11.42 7.75 11.5 7.92 11.5 8.09V17.25ZM18.38 15.27C18.38 15.89 17.88 16.46 17.27 16.54L17.06 16.56C15.97 16.71 14.4 17.18 13.19 17.69C12.86 17.83 12.5 17.59 12.5 17.23V8.08C12.5 7.9 12.59 7.73 12.75 7.64C13.91 6.99 15.72 6.41 16.95 6.3H16.99C17.76 6.3 18.38 6.92 18.38 7.69V15.27Z"
    stroke="url(#gradient-complete)"
    fill="none"
    stroke-width="3"
  />
</svg>

`;
      background = "linear-gradient(135deg, #42A5F5, #1E88E5)";
      label = "Hoàn thành";
      break;
  }

  return `
    <div class="ribbon" style="background: ${background}">
      <span>${label}</span>
    </div>
    <div class="circle">
      ${svgPath}
    </div>
  `;
}

async function fetchBooks() {
  const loader = document.querySelector('.loader');
  const scrollButtons = document.querySelectorAll('.scroll-button'); // Lấy tất cả nút cuộn

  try {
    loader.style.display = 'block'; // Hiển thị loader
    const response = await fetch(apiUrl);
    const books = await response.json();

    // Chọn ngẫu nhiên 21 bộ truyện
    const randomBooks = books.sort(() => 0.5 - Math.random()).slice(0, 21);

    const storyList = document.getElementById('story-list-1');
    storyList.innerHTML = '';

    randomBooks.forEach(book => {
      const storyContainer = document.createElement('div');
      storyContainer.className = 'story-container-1 visible';

      // Lấy trạng thái tiến độ từ API
      const progressStatus = book.tienDo || "Không rõ";

      storyContainer.innerHTML = `
        <div class="story-cover-1">
          <a href="${book.cotJ}" target="_self">
            <img src="${book.urlBia}" alt="${book.tacPham}">
            ${getRibbon(progressStatus)}
          </a>
        </div>
        <a href="${book.cotJ}" target="_self" class="story-title-1">${book.tacPham}</a>
      `;
      storyList.appendChild(storyContainer);
    });

    // Hiển thị nút cuộn sau khi tải xong
    scrollButtons.forEach(button => button.classList.add('active'));
  } catch (error) {
    console.error("Lỗi khi tải dữ liệu:", error);
  } finally {
    loader.style.display = 'none'; // Ẩn loader
  }
}


fetchBooks();

    function scrollStoryList(direction) {
  const storyList = document.getElementById('story-list-1');
  const scrollAmount = 300; // Độ dài cuộn mỗi lần nhấp (pixel)

  if (direction === 'left') {
    storyList.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
  } else if (direction === 'right') {
    storyList.scrollBy({ left: scrollAmount, behavior: 'smooth' });
  }
}

  </script>

</!doctype>