201 lines
5.5 KiB
Plaintext
201 lines
5.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Poke | Subscriptions</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<link href="/css/yt-ukraine.svg?v=6" rel="icon">
|
|
<link href="/css/app.main.css?v=44600" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--bg1:#0e0820; --bg2:#150c29; --bg3:#08121c; --bg4:#0c101b;
|
|
--glass:rgba(255,255,255,0.06);
|
|
--glass-border:rgba(255,255,255,0.12);
|
|
--accent:#66ccff;
|
|
--muted:#c9c9c9;
|
|
--ink:#fff;
|
|
--radius:18px;
|
|
--blur:24px;
|
|
--shadow:0 4px 30px rgba(0,0,0,0.3);
|
|
}
|
|
*{box-sizing:border-box}
|
|
html,body{margin:0;padding:0;height:100%}
|
|
body{
|
|
background:radial-gradient(circle at 20% 20%,var(--bg1),var(--bg2),var(--bg3),var(--bg4));
|
|
background-size:400% 400%;
|
|
animation:bg-pan 40s ease infinite;
|
|
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu;
|
|
color:var(--ink);
|
|
overflow-x:hidden;
|
|
}
|
|
@keyframes bg-pan{
|
|
0%{background-position:0 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0 50%}
|
|
}
|
|
|
|
a{color:inherit;text-decoration:none}
|
|
|
|
.wrap{
|
|
max-width:1200px;
|
|
margin:40px auto;
|
|
padding:20px;
|
|
background:rgba(255,255,255,0.05);
|
|
border:1px solid var(--glass-border);
|
|
backdrop-filter:blur(var(--blur)) saturate(180%);
|
|
-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
|
|
border-radius:var(--radius);
|
|
box-shadow:var(--shadow);
|
|
}
|
|
|
|
header{
|
|
display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px;
|
|
}
|
|
h1{
|
|
font-family:"poketube flex",system-ui;
|
|
font-size:1.8rem;
|
|
font-weight:800;
|
|
background:linear-gradient(90deg,#9fe6ff,#66ccff);
|
|
-webkit-background-clip:text;
|
|
-webkit-text-fill-color:transparent;
|
|
margin:0;
|
|
}
|
|
|
|
.tabs{
|
|
display:flex;
|
|
overflow-x:auto;
|
|
gap:10px;
|
|
background:rgba(255,255,255,0.04);
|
|
border-radius:var(--radius);
|
|
padding:8px 10px;
|
|
border:1px solid var(--glass-border);
|
|
scrollbar-width:none;
|
|
}
|
|
.tabs::-webkit-scrollbar{display:none}
|
|
.tab{
|
|
flex:0 0 auto;
|
|
padding:10px 16px;
|
|
border-radius:12px;
|
|
font-size:15px;
|
|
background:rgba(255,255,255,0.08);
|
|
border:1px solid transparent;
|
|
transition:all .25s ease;
|
|
cursor:pointer;
|
|
white-space:nowrap;
|
|
}
|
|
.tab:hover{
|
|
background:rgba(255,255,255,0.15);
|
|
}
|
|
.tab.active{
|
|
background:linear-gradient(120deg,rgba(102,204,255,0.25),rgba(102,204,255,0.05));
|
|
border:1px solid var(--accent);
|
|
box-shadow:0 0 10px rgba(102,204,255,0.3);
|
|
}
|
|
|
|
.content{
|
|
margin-top:18px;
|
|
border-radius:var(--radius);
|
|
border:1px solid var(--glass-border);
|
|
background:var(--glass);
|
|
backdrop-filter:blur(var(--blur));
|
|
-webkit-backdrop-filter:blur(var(--blur));
|
|
box-shadow:var(--shadow);
|
|
height:70vh;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
overflow:hidden;
|
|
position:relative;
|
|
}
|
|
|
|
iframe{
|
|
width:100%;
|
|
height:100%;
|
|
border:none;
|
|
border-radius:inherit;
|
|
}
|
|
|
|
.placeholder{
|
|
color:var(--muted);
|
|
font-size:15px;
|
|
text-align:center;
|
|
padding:20px;
|
|
}
|
|
|
|
.uid{
|
|
display:inline-flex;align-items:center;gap:6px;
|
|
background:rgba(255,255,255,0.08);
|
|
border-radius:999px;
|
|
padding:4px 10px;
|
|
border:1px solid var(--glass-border);
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header>
|
|
<h1>My Subscriptions</h1>
|
|
<span class="uid">User: <%= userid %></span>
|
|
</header>
|
|
|
|
<%
|
|
const subKeys = (userSubs && Object.keys(userSubs)) || [];
|
|
const subCount = subKeys.length;
|
|
const channels = subKeys.map(id => ({
|
|
id,
|
|
name: userSubs[id]?.channelName || "Unknown",
|
|
avatar: userSubs[id]?.avatar
|
|
}));
|
|
channels.sort((a,b)=>a.name.localeCompare(b.name,'en',{sensitivity:'base'}));
|
|
%>
|
|
|
|
<div class="tabs" id="tabs">
|
|
<% channels.forEach(c => { %>
|
|
<div class="tab" data-channel="<%= c.id %>">
|
|
<img src="<%= c.avatar %>" alt="" width="20" height="20" style="border-radius:50%;vertical-align:middle;margin-right:6px">
|
|
<%= c.name %>
|
|
</div>
|
|
<% }) %>
|
|
</div>
|
|
|
|
<div class="content" id="content">
|
|
<div class="placeholder">
|
|
Select a channel tab above to view its content.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded",()=>{
|
|
const tabs=document.querySelectorAll(".tab");
|
|
const content=document.getElementById("content");
|
|
|
|
tabs.forEach(tab=>{
|
|
tab.addEventListener("click",()=>{
|
|
tabs.forEach(t=>t.classList.remove("active"));
|
|
tab.classList.add("active");
|
|
const id=tab.dataset.channel;
|
|
content.innerHTML=
|
|
`<iframe src="/channel?id=${encodeURIComponent(id)}" allowfullscreen loading="lazy"></iframe>`;
|
|
});
|
|
});
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener("keydown",(e)=>{
|
|
const active=document.querySelector(".tab.active");
|
|
const index=[...tabs].indexOf(active);
|
|
if(e.key==="ArrowRight"&&index<tabs.length-1){
|
|
tabs[index+1].click();
|
|
}else if(e.key==="ArrowLeft"&&index>0){
|
|
tabs[index-1].click();
|
|
}else if(e.key==="Home"){tabs[0].click();}
|
|
else if(e.key==="End"){tabs[tabs.length-1].click();}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|