Topic Page at urdutubes

This page is created for Rail Cards Topics which are created in G Sheet. [<!--=============================== TOPIC PAGE STYLE CONTROL...

This page is created for Rail Cards Topics which are created in G Sheet.

[
<div id="topicStyleControl" data-style="modern"></div>

<style>
.topic-wrapper{
max-width:1100px;
margin:auto;
padding:20px;
font-family:Arial, sans-serif;
}

.topic-header{
text-align:center;
margin-bottom:25px;
}

.topic-header h2{
margin:0;
font-size:28px;
}

.topic-header p{
margin:6px 0 0;
color:#777;
font-size:14px;
}

.topic-controls{
text-align:right;
margin-bottom:15px;
}

.topic-controls select{
padding:6px 10px;
border-radius:6px;
}

/* ===== Fixed 2 Columns ===== */
.topic-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
}

@media(max-width:768px){
.topic-grid{
grid-template-columns:1fr;
}
}

/* ===== Card Base ===== */
.topic-card{
position:relative;
overflow:hidden;
background:#fff;
opacity:0;
transform:translateY(20px);
transition:all 0.4s ease;
}

.topic-card.show{
opacity:1;
transform:translateY(0);
}

.topic-card.fade-out{
opacity:0;
transform:translateY(-10px);
}

.topic-thumb img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}

.topic-content{
padding:15px;
}

.topic-content a{
text-decoration:none;
font-weight:bold;
font-size:17px;
color:#222;
}

/* ===== Style Modes ===== */

.topic-card.modern{
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.topic-card.simple{
border:1px solid #eee;
border-radius:8px;
box-shadow:none;
}

.topic-card.overlay .topic-content{
position:absolute;
bottom:0;
width:100%;
background:linear-gradient(to top, rgba(0,0,0,0.75), transparent);
color:#fff;
}
.topic-card.overlay .topic-content a{ color:#fff; }

.topic-card.neon{
border-radius:14px;
box-shadow:0 0 10px #00f0ff,
0 0 20px #00f0ff,
0 0 30px #00f0ff;
}

.topic-card.poster .topic-thumb img{
height:320px;
}
.topic-card.poster{
border-radius:18px;
box-shadow:0 12px 35px rgba(0,0,0,0.18);
}

.topic-card.textonly .topic-thumb{ display:none; }
.topic-card.textonly{
border-bottom:1px solid #ddd;
box-shadow:none;
border-radius:0;
}

/* ===== Pagination ===== */
.topic-pagination{
text-align:center;
margin:20px 0;
}

.topic-pagination button{
padding:8px 14px;
margin:5px;
border:none;
border-radius:6px;
background:#0077ff;
color:white;
cursor:pointer;
}

.topic-pagination button:disabled{
background:#ccc;
}

/* ===== Auto Dark Mode ===== */
@media (prefers-color-scheme: dark){
.topic-card{ background:#1e1e1e; }
.topic-content a{ color:#f1f1f1; }
.topic-header p{ color:#aaa; }
}
</style>

<div class="topic-wrapper">

<div class="topic-header">
<h2 id="topicTitle"></h2>
<p id="topicCount"></p>
</div>

<div class="topic-controls">
Posts per page:
<select id="limitSelect">
<option value="6">6</option>
<option value="10" selected>10</option>
<option value="14">14</option>
<option value="18">18</option>
<option value="22">22</option>
</select>
</div>


<div class="topic-pagination">
<button id="prevBtnTop">Previous</button>
<span id="pageInfoTop"></span>
<button id="nextBtnTop">Next</button>
</div>

<div id="topicPosts" class="topic-grid"></div>


<div class="topic-pagination">
<button id="prevBtnBottom">Previous</button>
<span id="pageInfoBottom"></span>
<button id="nextBtnBottom">Next</button>
</div>

</div>

<script>
const sheetURL = "https://docs.google.com/spreadsheets/d/1tj3xg0toFl8vT_O0SFQY2inq6XZqKRSqPMGlgcbLXMI/gviz/tq?tqx=out:json";

const params = new URLSearchParams(window.location.search);
const topicQuery = params.get("topic") || "";

const container = document.getElementById("topicPosts");
const topicTitle = document.getElementById("topicTitle");
const topicCount = document.getElementById("topicCount");
const limitSelect = document.getElementById("limitSelect");

const prevBtnTop = document.getElementById("prevBtnTop");
const nextBtnTop = document.getElementById("nextBtnTop");
const pageInfoTop = document.getElementById("pageInfoTop");

const prevBtnBottom = document.getElementById("prevBtnBottom");
const nextBtnBottom = document.getElementById("nextBtnBottom");
const pageInfoBottom = document.getElementById("pageInfoBottom");

const topicStyle = document
.getElementById("topicStyleControl")
.getAttribute("data-style");

let posts = [];
let currentPage = 1;
let postsPerPage = parseInt(limitSelect.value);

fetch(sheetURL)
.then(r => r.text())
.then(t => {
const json = JSON.parse(t.substr(47).slice(0,-2));

posts = json.table.rows.map(r => {
const topics = r.c[13]?.v
? r.c[13].v.split(",").map(s=>s.trim().toLowerCase())
: [];

return {
title: r.c[4]?.v || "No title",
url: (r.c[5]?.v || "#").split("?")[0].replace(/\/$/,""),
img: r.c[6]?.v || "",
topics
};
}).filter(p => p.topics.includes(topicQuery.toLowerCase()));

topicTitle.innerHTML = "Topic: <strong>" + topicQuery + "</strong>";
topicCount.textContent = posts.length + " posts found";

render();
});

function render(){

const oldCards = document.querySelectorAll(".topic-card");
oldCards.forEach(card => card.classList.add("fade-out"));

setTimeout(() => {

container.innerHTML = "";
postsPerPage = parseInt(limitSelect.value);

const totalPages = Math.ceil(posts.length / postsPerPage);
if(currentPage > totalPages) currentPage = 1;

const start = (currentPage - 1) * postsPerPage;
const end = start + postsPerPage;
const pagePosts = posts.slice(start, end);

pagePosts.forEach((p,index) => {

const div = document.createElement("div");
div.className = "topic-card " + topicStyle;

let html = "";

if(p.img){
html += `<div class="topic-thumb">
<a href="${p.url}">
<img src="${p.img}" loading="lazy">
</a>
</div>`;
}

html += `<div class="topic-content">
<a href="${p.url}">${p.title}</a>
</div>`;

div.innerHTML = html;
container.appendChild(div);

setTimeout(() => {
div.classList.add("show");
}, index * 80);

});

pageInfoTop.textContent = "Page " + currentPage + " of " + totalPages;
pageInfoBottom.textContent = "Page " + currentPage + " of " + totalPages;

prevBtnTop.disabled = currentPage === 1;
prevBtnBottom.disabled = currentPage === 1;

nextBtnTop.disabled = currentPage === totalPages;
nextBtnBottom.disabled = currentPage === totalPages;

}, 250);
}

function goPrev(){
if(currentPage > 1){
currentPage--;
render();
window.scrollTo({top:0, behavior:"smooth"});
}
}

function goNext(){
const totalPages = Math.ceil(posts.length / postsPerPage);
if(currentPage < totalPages){
currentPage++;
render();
window.scrollTo({top:0, behavior:"smooth"});
}
}

prevBtnTop.onclick = goPrev;
prevBtnBottom.onclick = goPrev;

nextBtnTop.onclick = goNext;
nextBtnBottom.onclick = goNext;

limitSelect.onchange = function(){
currentPage = 1;
render();
};
</script>
]