mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-23 01:57:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

tabs on discover :3

Browse source
This commit is contained in:
Ashley 2022-10-03 19:18:14 +02:00
parent 7b86319d9d
commit 6531087532
1 changed files with 127 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
html/main.ejs
View file

@ -25,7 +25,7 @@
<meta content=website property=og:type> <meta content=website property=og:type>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="PokeTube - Privacy Is Your Right" property=og:title> <meta content="PokeTube - Privacy Is Your Right" property=og:title>
<meta content="Privacy Is Your Right - Poketube is an a libre front end for YouTube Thats focused on your privacy! your personal data should be nobody's business" property=twitter:description> <meta content="Privacy Is Your Right - Poketube is a libre front end for YouTube Thats focused on your privacy! your personal data should be nobody's business" property=twitter:description>
<meta content="https://cdn.glitch.global/5d35aeaf-2df2-4f2f-a4b7-b486694c329b/0d71ef53-9fc2-4ddd-8814-fcf00ba69155.image.png?v=1664301040809" property=og:image> <meta content="https://cdn.glitch.global/5d35aeaf-2df2-4f2f-a4b7-b486694c329b/0d71ef53-9fc2-4ddd-8814-fcf00ba69155.image.png?v=1664301040809" property=og:image>
<meta content=summary_large_image name=twitter:card> <meta content=summary_large_image name=twitter:card>
<meta content=@PoketaleBot name=twitter:site> <meta content=@PoketaleBot name=twitter:site>
@ -193,7 +193,77 @@ summary:hover{
.closebtn:hover { .closebtn:hover {
color: black; color: black;
} }
</style> </style>
<style>section p {
font-family:Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight:400;
color:#fff;
font-size:16px;
line-height:24px;
margin-top:12px
}
.sticky-top {
position: sticky;
top: 0px;
z-index: 999;
}
.responsive {
width: 100%;
overflow-x: auto;
}
.tabs {
display: table;
font-family:inter;
border-collapse: separate;
table-layout: auto;
}
.tabs.tabs-center {
margin: auto;
}
.tabs.tabs-justify {
width: 100%;
table-layout: fixed;
}
.tabs a.tab {
position: relative;
display: table-cell;
transition: all ease 0.3s;
padding: 1em 1.6em;
transform: translate3d(0, 0, 0);
color: #fff;
white-space: nowrap;
cursor: pointer;
}
.tabs a.tab:hover {
color: #3cb4fa;
}
.tabs a.tab:after {
transition: all 0.3s cubic-bezier(1, 0, 0, 1);
will-change: transform, box-shadow, opacity;
position: absolute;
content: '';
height: 3px;
bottom: 0px;
left: 0px;
right: 0px;
border-radius: 3px 3px 0px 0px;
background: #9fdafd;
box-shadow: 0px 4px 10px 3px rgba(60, 180, 250, .15);
opacity: 0;
transform: scale(0, 1);
}
.tabs a.tab.active {
color: #fff;
}
.tabs a.tab.active:after {
opacity: 1;
transform: scale(1, 1);
}
</style>
<style> <style>
.channel-info-container > img { .channel-info-container > img {
@ -239,7 +309,7 @@ background-size: cover;
<div class="discover-some-bitches"> <div class="discover-some-bitches">
<div class="video-title" style="font-family:'Ginto nord';font-weight:900;white-space:nowrap;font-size: xxx-large;">Privacy Is Your Right</div> <div class="video-title" style="font-family:'Ginto nord';font-weight:900;white-space:nowrap;font-size: xxx-large;">Privacy Is Your Right</div>
<div class="video-info-bar" style="font-family:'Inter';border-bottom:none;padding:0;">Poketube is an a libre front end <div class="video-info-bar" style="font-family:'Inter';border-bottom:none;padding:0;">Poketube is a libre front end
for youtube &amp; yt music! your personal data is nobody's business while using poketube. for youtube &amp; yt music! your personal data is nobody's business while using poketube.
<a href="/privacy">(not our business too!)</a> <a href="/privacy">(not our business too!)</a>
</div> </div>
@ -281,6 +351,7 @@ background-size: cover;
<div class="video-title" style="font-family:'Ginto nord';font-weight:900;white-space:yes;font-size: xxx-large;"> Privacy Is Your Right</div> <div class="video-title" style="font-family:'Ginto nord';font-weight:900;white-space:yes;font-size: xxx-large;"> Privacy Is Your Right</div>
<div class="video-info-bar" style="font-family:'Ginto nord';border-bottom:none;padding:0;font-size: small;"> <div class="video-info-bar" style="font-family:'Ginto nord';border-bottom:none;padding:0;font-size: small;">
PokeTube is a libre youtube-front end that respects your privacy! </div> PokeTube is a libre youtube-front end that respects your privacy! </div>
</div> </div>
<div class=search> <div class=search>
@ -289,6 +360,9 @@ background-size: cover;
</form> </form>
</div> </div>
<br> <br>
<br> <br>
<br> <br style="display: none;">
</div> </div>
<% } %> <% } %>
@ -296,15 +370,45 @@ background-size: cover;
<div class="channel-page" style="background-color: var(--channel-contents-background);"> <div class="channel-page" style="background-color: var(--channel-contents-background);">
<img src="https://t.poketube.fun/t/rep.gif" style="width: 0;visibility: hidden;" id="discover_main"> <img src="https://t.poketube.fun/t/rep.gif" style="width: 0;visibility: hidden;" id="discover_main">
<div class="video-title" style="font-family:'Ginto nord';font-weight:900;white-space:nowrap;font-size: xxx-large;">Discover</div> <div class="video-title" style="font-family:'Ginto nord';font-weight:900;white-space:nowrap;font-size: xxx-large;">Trending</div>
<% if (!isMobile) { %> <% if (!isMobile) { %>
<p style="margin:0;"> <p style="margin:0;">
Discover popular and trending content on poketube! (<s>or dont</s>) See the trending videos shorts and music videos on poketube! (<s>or dont</s>)
</p> </p>
<% } %> <% } %>
<% if (isMobile) { %>
<p style="margin:0;">
See the trending videos on poketube!
</p>
<% } %>
<% if (!tab) { %>
<div class="tabs tabs-center">
<a href="" class="tab active">Videos</a>
<a href="?tab=shorts" class="tab">TikToks</a>
</div>
<% } %>
<% if (tab) { %>
<div class="tabs tabs-center">
<a href="/" class="tab ">Videos</a>
<a href="?tab=shorts" class="tab active">TikToks</a>
</div>
<% } %>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<% if (!tab) { %>
<div class="video-grid"> <div class="video-grid">
<% k.Explore.Videos.ItemSection[2].Shelf.Items.Video.forEach(x => { %> <% k.Explore.Videos.ItemSection[3].Shelf.Items.Video.forEach(x => { %>
<a href="/watch?v=<%- x.id %>" class="video"> <a href="/watch?v=<%- x.id %>" class="video">
<div class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-top-left-radius: 16px;border-top-right-radius: 16px;"><span class="video-length"><%- x.duration %></span></div> <div class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-top-left-radius: 16px;border-top-right-radius: 16px;"><span class="video-length"><%- x.duration %></span></div>
<div class="info"> <div class="info">
@ -315,6 +419,23 @@ background-size: cover;
<% }) %> <% }) %>
</div> </div>
<% } %>
<% if (tab) { %>
<div class="video-grid">
<% k.Explore.Videos.ItemSection[2].Shelf.Items.Video.forEach(x => { %>
<a href="/watch?v=<%- x.id %>" class="video">
<div class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-top-left-radius: 16px;border-top-right-radius: 16px;"><span class="video-length">PT <%- x.duration %></span></div>
<div class="info">
<span class="title max-lines-2" title="<%- x.Title %>" style="font-family:Ginto Nord,sans-serif;"><%- x.Title %></span>
</div>
</a>
<% }) %>
</div>
<% } %>