Sakurai/poke
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update html/account-me.ejs

Browse Source
This commit is contained in:
ashley 2025-10-18 22:30:33 +02:00
parent d8c709468e
commit 130bca9e9e
1 changed files with 87 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
html/account-me.ejs
View File

@ -58,6 +58,7 @@
border-right:1px solid var(--border); border-right:1px solid var(--border);
display:flex; display:flex;
flex-direction:column; flex-direction:column;
justify-content:space-between;
box-shadow:var(--shadow); box-shadow:var(--shadow);
} }
@ -77,25 +78,6 @@
-webkit-text-fill-color:transparent; -webkit-text-fill-color:transparent;
margin:0; margin:0;
} }
.uid{
font-size:12px;
color:var(--muted);
background:rgba(255,255,255,0.08);
padding:4px 10px;
border-radius:999px;
border:1px solid var(--border);
align-self:flex-start;
}
.privacy-link{
margin-top:8px;
font-size:12.5px;
color:var(--accent);
text-decoration:none;
align-self:flex-start;
transition:opacity .2s ease;
}
.privacy-link:hover{opacity:0.7}
.search-bar{ .search-bar{
display:flex; display:flex;
@ -194,6 +176,31 @@
font-size:14px; font-size:14px;
} }
.sidebar-footer{
border-top:1px solid var(--border);
padding:14px;
display:flex;
flex-direction:column;
gap:8px;
background:rgba(255,255,255,0.04);
}
.uid{
font-size:12px;
color:var(--muted);
background:rgba(255,255,255,0.08);
padding:4px 10px;
border-radius:999px;
border:1px solid var(--border);
align-self:flex-start;
}
.privacy-link{
font-size:12.5px;
color:var(--accent);
text-decoration:none;
transition:opacity .2s ease;
}
.privacy-link:hover{opacity:0.7}
main{ main{
position:relative; position:relative;
display:flex; display:flex;
@ -295,83 +302,71 @@
</head> </head>
<body> <body>
<noscript> <noscript>
JavaScript seems to be disabled (oh noes!) <br> JavaScript seems to be disabled.<br>
This page won’t show your subscriptions without it.<br> This page won’t show your subscriptions without it.<br>
Please enable JavaScript or use a browser that supports scripts. You can still open channels directly by clicking their names below.
</noscript> </noscript>
<div class="layout"> <div class="layout">
<aside> <aside>
<header> <div>
<h1>my poke</h1> <header>
<h1>my poke</h1>
</header>
<div class="search-bar js-only">
<input id="search" type="text" placeholder="search ur channels">
<button id="clearSearch">clear</button>
</div>
<div class="sort js-only">
<button id="sortAZ" class="active">a → z</button>
<button id="sortZA">z → a</button>
</div>
<%
const subKeys = (userSubs && Object.keys(userSubs)) || [];
const subs = subKeys.map(id => ({
id,
name: userSubs[id]?.channelName || "unknown channel",
avatar: userSubs[id]?.avatar
}));
subs.sort((a,b)=>a.name.localeCompare(b.name,'en',{sensitivity:'base'}));
%>
<div class="channel-list" id="channelList">
<% subs.forEach(c => { %>
<a class="channel" href="/channel?id=<%= c.id %>" data-id="<%= c.id %>" data-name="<%= c.name.toLowerCase() %>">
<img src="<%= c.avatar %>" alt="">
<div class="channel-name"><%= c.name %></div>
</a>
<% }) %>
</div>
</div>
<div class="sidebar-footer">
<span class="uid">logged in as <%= userid %></span> <span class="uid">logged in as <%= userid %></span>
<a href="/privacy" class="privacy-link">privacy stuff</a> <a href="/privacy" class="privacy-link">privacy policy</a>
</header>
<div class="search-bar">
<input id="search" type="text" placeholder="search ur channels">
<button id="clearSearch">clear</button>
</div>
<div class="sort">
<button id="sortAZ" class="active">a → z</button>
<button id="sortZA">z → a</button>
</div>
<%
const subKeys = (userSubs && Object.keys(userSubs)) || [];
const subs = subKeys.map(id => ({
id,
name: userSubs[id]?.channelName || "unknown channel",
avatar: userSubs[id]?.avatar
}));
subs.sort((a,b)=>a.name.localeCompare(b.name,'en',{sensitivity:'base'}));
%>
<div class="channel-list" id="channelList">
<% subs.forEach(c => { %>
<div class="channel" data-id="<%= c.id %>" data-name="<%= c.name.toLowerCase() %>">
<img src="<%= c.avatar %>" alt="">
<div class="channel-name"><%= c.name %></div>
</div>
<% }) %>
</div> </div>
</aside> </aside>
<main> <main class="js-only">
<div class="toolbar"> <div class="toolbar">
<span id="channelTitle">nothing selected yet</span> <span id="channelTitle">nothing selected yet</span>
<a href="/api/get-channel-subs?ID=<%= encodeURIComponent(userid) %>" class="btn">view json</a> <a href="/api/get-channel-subs?ID=<%= encodeURIComponent(userid) %>" class="btn">view json</a>
</div> </div>
<div class="viewer" id="viewer"> <div class="viewer" id="viewer">
<div class="placeholder">u can select a channel on the left to view it</div> <div class="placeholder">select a channel on the left to view it</div>
</div> </div>
</main> </main>
</div> </div>
<script type="text/javascript" id="poke-subs" data-name="My Poke Subscriptions JS"> <script type="text/javascript" id="poke-subs" data-name="My Poke Subscriptions JS">
/* /*
@licstart The following is the entire license notice for the @licstart
JavaScript code in this page.
Copyright (C) 2024 Poke Project Copyright (C) 2024 Poke Project
GPLv3-or-later notice below
The JavaScript code in this page is free software: you can @licend
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this page.
*/ */
document.addEventListener("DOMContentLoaded",()=>{ document.addEventListener("DOMContentLoaded",()=>{
const channels=[...document.querySelectorAll(".channel")]; const channels=[...document.querySelectorAll(".channel")];
@ -383,6 +378,9 @@ document.addEventListener("DOMContentLoaded",()=>{
const viewer=document.getElementById("viewer"); const viewer=document.getElementById("viewer");
const title=document.getElementById("channelTitle"); const title=document.getElementById("channelTitle");
// hide no-js links behaviour
channels.forEach(ch=>ch.removeAttribute("href"));
function renderIframe(id,name){ function renderIframe(id,name){
viewer.innerHTML=` viewer.innerHTML=`
<div class="close-view" title="close">✖</div> <div class="close-view" title="close">✖</div>
@ -391,14 +389,15 @@ document.addEventListener("DOMContentLoaded",()=>{
const closeBtn=viewer.querySelector(".close-view"); const closeBtn=viewer.querySelector(".close-view");
closeBtn.addEventListener("click",()=>{ closeBtn.addEventListener("click",()=>{
viewer.innerHTML='<div class="placeholder">u can select a channel on the left to view it</div>'; viewer.innerHTML='<div class="placeholder">select a channel on the left to view it</div>';
channels.forEach(c=>c.classList.remove("active")); channels.forEach(c=>c.classList.remove("active"));
title.textContent="nothing selected yet"; title.textContent="nothing selected yet";
}); });
} }
channels.forEach(ch=>{ channels.forEach(ch=>{
ch.addEventListener("click",()=>{ ch.addEventListener("click",e=>{
e.preventDefault();
channels.forEach(c=>c.classList.remove("active")); channels.forEach(c=>c.classList.remove("active"));
ch.classList.add("active"); ch.classList.add("active");
renderIframe(ch.dataset.id,ch.querySelector(".channel-name").textContent); renderIframe(ch.dataset.id,ch.querySelector(".channel-name").textContent);
@ -411,17 +410,8 @@ document.addEventListener("DOMContentLoaded",()=>{
c.style.display=c.dataset.name.includes(term)?'flex':'none'; c.style.display=c.dataset.name.includes(term)?'flex':'none';
}); });
} }
search.addEventListener("input",filter); search?.addEventListener("input",filter);
clear.addEventListener("click",()=>{search.value='';filter();search.focus();}); clear?.addEventListener("click",()=>{search.value='';filter();search.focus();});
sortAZ.addEventListener("click",()=>{
sortAZ.classList.add("active");sortZA.classList.remove("active");
sortList(true);
});
sortZA.addEventListener("click",()=>{
sortZA.classList.add("active");sortAZ.classList.remove("active");
sortList(false);
});
function sortList(asc){ function sortList(asc){
const items=[...channels]; const items=[...channels];
@ -431,6 +421,15 @@ document.addEventListener("DOMContentLoaded",()=>{
}); });
items.forEach(i=>list.appendChild(i)); items.forEach(i=>list.appendChild(i));
} }
sortAZ?.addEventListener("click",()=>{
sortAZ.classList.add("active");sortZA.classList.remove("active");
sortList(true);
});
sortZA?.addEventListener("click",()=>{
sortZA.classList.add("active");sortAZ.classList.remove("active");
sortList(false);
});
}); });
</script> </script>
</body> </body>