From dc204943a7ff946b15257388ea397af74cbf3f35 Mon Sep 17 00:00:00 2001 From: Ashley <iamashley@duck.com> Date: Wed, 15 Mar 2023 17:41:41 +0000 Subject: [PATCH] hehe yes --- html/main.ejs | 1236 +++++++------------------------------------------ 1 file changed, 159 insertions(+), 1077 deletions(-) diff --git a/html/main.ejs b/html/main.ejs index 7d22e5c9..ed8c9c40 100644 --- a/html/main.ejs +++ b/html/main.ejs @@ -1,7 +1,7 @@ <!-- This Source Code Form is subject to the terms of the GNU General Public License: - Copyright (C) 2021-2022 POKETUBE (https://github.com/iamashley0/poketube) + Copyright (C) 2021-2023 POKETUBE (https://github.com/iamashley0/poketube) This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by @@ -16,56 +16,40 @@ You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/. --> - <% if (!isMobile) { %> + <!DOCTYPE html><html> <head> - <title>PokeTube - Privacy Is Your Right</title> + <title>PokeTube | Privacy Is Your Right</title> <link href=/css/yt-ukraine.svg?v=6 rel=icon> - <meta content=website property=og:type> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta content="PokeTube - Discover" property=og:title> - <meta content="Discover Popular videos on poketube!" property=twitter:description> - <meta content="https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/17a7fa1d-cdf9-4b73-9686-21e62c7fb285.image.png?v=1667739586452" property=og:image> - <meta content=summary_large_image name=twitter:card> + <meta content="PokeTube | Privacy is your right " property=og:title> + <meta content="Watch Cat Videos goofy ahh videos epico memes and more coolu stuff from all over the interwebs without tracking!" property=twitter:description> + <meta content="https://cdn.glitch.global/33bc0843-7505-4fb9-92a6-4e8b0e74979f/0ddd4508-9a7d-4c3c-9f8e-da5a8c115e16.image.png?v=1671545627005" property="og:image" /> + <meta content="summary_large_image" name="twitter:card" /> + <!-- + + these are old lol <meta content=@PoketaleBot name=twitter:site> <meta content=@PoketaleBot name=twitter:creator> - <link href=/css/app-cdn.min.css rel=stylesheet> +--> +<link href=/css/app-cdn.min.css rel=stylesheet> <link href=/css/app-cdn.min.css rel=stylesheet> <link href=/css/app.main.css rel=stylesheet> <link href=/css/search.main.css rel=stylesheet> + <meta content="#f97794" name="theme-color" /> <link href=/css/watch.main.css rel=stylesheet> <link href="https://fonts.poketube.fun/css/fonts.css" rel=stylesheet> - <meta content="#1a1a1a" name="theme-color"> </head> - <style> - .mn { - background: #181818; - border-radius: 26px; - padding: 6px; - margin: auto; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - } - @font-face { - font-family: 'Ginto Nord'; - font-weight: 800; - src:url('https://p.poketube.fun/https://cdn.statically.io/gh/brecert/discord-quote-generator/main/Ginto-Nord-800.woff') format("woff"); - } - </style> <style nonce="IJD3y0awTwA2dd0pWOP+ZQ"> - #yt-masthead{line-height:0;margin:15px auto;width:440px;margin-top:25px}#logo-container{margin-right:5px;float:left;cursor:pointer;text-decoration:none}.logo{background:no-repeat url("//www.gstatic.com/youtube/img/branding/youtubelogo/1x/youtubelogo_30.png");width:125px;height:30px;cursor:pointer;display:inline-block}#masthead-search{display:flex;margin-top:3px;max-width:650px;overflow:hidden;padding:0;position:relative}.search-button{border-left:0;-moz-border-radius-topleft:0;border-top-left-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;float:right;height:29px;padding:0;border:solid 1px transparent;border-color:#ffff;background:#999;;color:#333;cursor:pointer}.search-button:hover{border-color:#c6c6c6;background:#f0f0f0;box-shadow:0 1px 0 rgba(0,0,0,0.0)}.search-button-content{border:none;display:block;opacity:.6;padding:0;text-indent:-10000px;background:no-repeat url(//www.gstatic.com/youtube/src/web/htdocs/img/search.png);background-size:auto;width:15px;height:15px;box-shadow:none;margin:0 25px}#masthead-search-terms-border{flex:1 1 auto;border:1px solid #ccc;box-shadow:inset 0 1px 2px #eee;background-color:#fff;font-size:14px;height:29px;line-height:30px;margin:0 0 2px;overflow:hidden;position:relative;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color .2s ease;transition:border-color .2s ease}#masthead-search-terms{background:#2c2f33;border:0;font-size:16px;height:100%;left:0;margin:0;outline:none;padding:2px 6px;position:absolute;width:100%;-moz-box-sizing:border-box;box-sizing:border-box} - </style> <body> - - <section class=youtube-video> - - - <style> - @import url("https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css"); - + + <section class=youtube-video> + +<style> + @import url("https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css"); + * { + font-family:ubuntu, sans-serif + } a.class:hover { text-decoration:underline; font-weight:bold @@ -77,11 +61,11 @@ summary:hover{ color:white; } </style> - <!-- WIGGLE WIGGLE WIGGLE --> <style> body{ - overflow-x: hidden; /* Hide horizontal scrollbar */ + overflow: hidden; /* Hide scrollbar */ + color:#111111 } @@ -95,8 +79,7 @@ summary:hover{ -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; } - - + @-webkit-keyframes wiggle { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } @@ -132,7 +115,7 @@ summary:hover{ animation-timing-function: ease-in; } - .animated.wiggle { + .animated.wiggle { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } @@ -142,7 +125,7 @@ summary:hover{ --text-secondary: #fff; --text-link: #3ea6ff; - --app-background: #111111; + --app-background: #1a1a1a; --context-menu-background: #333; --border-color: #444; --item-hover-background: #373737; @@ -159,51 +142,9 @@ summary:hover{ @font-face { font-family: 'Ginto Nord'; font-weight: 800; - src:url('https://p.poketube.fun/https://cdn.statically.io/gh/brecert/discord-quote-generator/main/Ginto-Nord-800.woff') format("woff"); + src:url('https://cdn.statically.io/gh/brecert/discord-quote-generator/main/Ginto-Nord-800.woff') format("woff"); } - .video > .info { - grid-area: info; - font-size: small; - margin-left: 2px; - height: auto; - width: fit-content; - text-align: left; - margin-top: -7px; - padding: 2px; - } - -.progress-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 3px; - z-index: 9999; - display:none; - background-color: #f2f2f2; -} - -.progress-bar { - position: absolute; - top: 0; - left: 0; - width: 0%; - height: 100%; - background-color: purple; - transition: width 0.5s ease-in-out; -} - .video > .info > .title { - color: var(--text-primary) !important; - font-weight: bold; - font-size: initial; - margin-bottom: 0px; -} - .video-grid{ - justify-content: center; - margin-left: auto; -margin-right: auto; - } .alert { padding: 20px; background-color: #f44336; @@ -231,146 +172,133 @@ margin-right: auto; .closebtn:hover { color: black; } - </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 -} - .news { - margin: 2em; - background: #333; - padding: 10px; - border-radius: 1.5em; - display:none; -} - -.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-left: 2em; - } - .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> .channel-info-container > img { width: 100%; } - .video-grid > .video:hover{ -border:solid; -} - .video-grid > .video { - border-radius: 16px; - background: black; - padding: 6px; - border: #333 solid; + + .video-grid > .video { + background-color: #181818; +border-radius: 8px; + } + +section#landing-page { + position: fixed; + width: 100%; + max-width: 90%; + margin: auto; + left: 0; + right: 0; + z-index: 999; + } + +.content { + border-radius: 26px; + padding: 1em; + margin: auto; + display: flex; + justify-content: center; + align-items: center; + position: relative; + top: 50%; + transform: translateY(50%); } - /* nice classname am i rigth */ - .discover-some-bitches{ - text-align: center; - width: 673px; - margin: auto; + .content-inner{ + padding: 10px;color:#fff;position: relative;top: 50%;transform: translateY(50%); + } +.heading { + color: #fff; + font-size: xxx-large; + font-family: 'PokeTube flex'; + +font-stretch: ultra-expanded; + font-weight: 1000; +} + +.product-container { + display: flex; + justify-content: center; + position: relative; + top: 11.5em; + padding-bottom: 2em; + overflow: hidden; +} + +.btn-explore { + padding: 20px; + display: flex; + font-family: 'PokeTube flex'; + font-stretch: ultra-expanded; + font-weight: 1000; + margin-top: 20px !important; + background-color: #fff; + border-radius: 6px; + width: 186px; + color: #000; + font-size: 20px; + text-decoration: unset; + margin: auto; + margin-top: auto; +} + + .news { + display: flex; + justify-content: center; + background: #111; + width: 18em; + margin: auto; + margin-bottom: auto; + border-radius: 3em; + color: white; + margin-bottom: -10em; +} + + + .news > * { + color:#fff + } + + .news > a { + display: flex; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; + margin-top: 1rem; + margin-bottom: 1rem; + margin-left: 0.2rem; + font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; +font-weight: 400; + font-size: 16px; +line-height: 24px; +z-index: 10; /* Was 2 */" } </style> - <body> - <div class="app" style="background-color: var(--channel-contents-background);"> - <div class="progress-container"> - <div class="progress-bar"></div> -</div> - - <div style="position: inherit;background: red;margin: -1em;"> - <p style="color: black;margin-right: auto;margin-left: auto;width: fit-content;"> - A magnitude 7.4 earthquake just hit Türkiye's Kahramanmaras province, please donate to the turkish people via: <a href="https://www.kizilay.org.tr/Bagis/BagisYap/215/afet-acil-durum-bagisi" style="color:black">Here </a> | to see latest news check <a href="https://poketube.fun/search?query=turkey+earthquake+news" style="color:black"> poketube</a> or <a href="https://duckduckgo.com/?q=turkey+earthquake&iar=news&ia=news" style="color:black">duckduckgo</a> + <div class="app" style="background-image: url(/css/land.svg);background-size: auto;background-repeat: no-repeat;"> + + <nav> + <div class="left"> - </p> - </div> - <nav> - <div class=left> - - <a class="class" href="/143" style=font-family:Inter,sans-serif;color:#fff> <img style="transform: scale(1.3);width:8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo.svg?v=5"></a> + <a class="class" href="/143" style="font-family:Inter,sans-serif;color:#fff"> <img style="transform: scale(1.3);width:8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo-dark.svg?v=5"></a> </div> <div class="middle"> <div class="search"> - <form action=/search><input class=search-bar autocomplete="on" id=fname name=query style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;"> - <button class="btn btn-success" type=submit><i class="fa-light fa-search"></i></button> - + <form action="/search"><input class="search-bar" autocomplete="on" id="fname" name="query" style="color:#fff;font-family:Inter,sans-serif;border-radius: 2em;" data-ddg-inputtype="identities.firstName"> +<button class="btn btn-success" type="submit" style="transform: translate(21em, -1.25em);"><i class="fa-light fa-search"></i></button> </form> - <img src="https://search-metrics.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;"> + <img src="https://search-metrics.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;"> - </div> </div> - - - <div class=right> - - -<button title="Play/Pause Ambient music" class="a" id="audioButton" onclick="toggleAudio()"> - <i id="audioIcon" class="fas fa-pause"></i> -</button> - - <a href="/domains"><i style="display: block;margin-left: auto;margin-right: auto;" class="fa-light fa-server"></i> </a> + </div> + </div> + <div class="right"> + <a href="/domains"><i style="display: block;margin-left: auto;margin-right: auto;" class="fa-light fa-server"></i> </a> <a href="/privacy"><i class="fa-light fa-shield"></i></a> <a href="/video/upload?from="><i class="fa-light fa-video"></i></a> <a href="https://github.com/iamashley0/poketube/issues"><i class="fa-light fa-bug"></i></a> @@ -379,885 +307,39 @@ border:solid; </nav> - + <div class="channel-page"> + <div class="news"> + <img src="/css/ua.svg" style="width: 1.2em;align-self: center;margin-right: 3px;"> - <div class="channel-page" > - <audio id="audio" style="display:none;" loop autoplay></audio> - - <img src="https://t.poketube.fun/t/rep.gif" style="width: 0;visibility: hidden;display:none;" id="discover_main"> - - - <% if (!tab) { %> - - <div class="tabs tabs-center"> - - <a href="" class="tab active">Videos</a> - - <a href="?tab=music"class="tab">Music</a> - - <a href="?tab=gaming" class="tab">Gaming</a> - <% if (!isMobile) { %> - - <a href="?tab=movies" class="tab">Movie Trailers</a> - - <% } %> - - </div> - <% } %> - <% if (tab === "music") { %> - - <div class="tabs tabs-center"> + <a href="https://u24.gov.ua/"> + Support Ukraine + </a> - <a href="/" class="tab">Videos</a> - - <a href="" class="tab active ">Music</a> + </div> - <a href="?tab=gaming" class="tab">Gaming</a> - <% if (!isMobile) { %> - - <a href="?tab=movies" class="tab">Movies</a> - - <% } %> - - - - </div> - <% } %> - <% if (tab === "gaming") { %> - - <div class="tabs tabs-center"> - - - <a href="/" class="tab">Videos</a> - - <a href="?tab=music" class="tab">Music</a> - <% if (!isMobile) { %> - - <a href="" class="tab active">Gaming</a> - <a href="?tab=movies" class="tab">Movies</a> - <% } %> - - - - </div> - <% } %> - - <% if (tab === "movies") { %> - - <div class="tabs tabs-center"> - - - <a href="/" class="tab">Videos</a> - <a href="?tab=music" class="tab">Music</a> - <a href="?tab=gaming" class="tab">Gaming</a> - <a href="" class="tab active">Movies</a> - - - - </div> - <% } %> - - - - <div class="video-grid"> - <% inv.forEach(x => { %> - <a href="/watch?v=<%- x.videoId %>" class="video"> - <div class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 10px;"><span class="video-length"><%- turntomins(x.lengthSeconds) %></span></div> - <div class="info"> - <span class="title max-lines-2" title="<%- x.title %>" style="font-family:Inter,sans-serif;"><%- x.title %></span> - <span class="title max-lines-2" title="Video By <%- x.author %>" style="margin-top:1px">By <%- x.author %></span> - - </div> - - </a> - - - <% }) %> - - - </div> - - </div> - - - - <script src="/css/custom-css.js"> </script> - <script> - // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later - - document.addEventListener('DOMContentLoaded', function() { - let bgs = document.querySelectorAll('[data-bg]'); - let bgCount = bgs.length; - - function loadBg(index) { - let bg = bgs[index]; - let bgUrl = bg.getAttribute('data-bg'); - bg.style.backgroundImage = `url(${bgUrl})`; - bg.removeAttribute('data-bg'); - bg.classList.add('loaded'); - } - - function lazyLoadBg() { - for (let i = 0; i < bgCount; i++) { - let bg = bgs[i]; - let bgRect = bg.getBoundingClientRect(); - if (bgRect.top < window.innerHeight && bgRect.bottom > 0) { - loadBg(i); - } - } - } - - lazyLoadBg(); - - window.addEventListener('scroll', lazyLoadBg); - window.addEventListener('resize', lazyLoadBg); -}); - -// Get the progress bar and container elements -const progressBar1 = document.querySelector(".progress-bar"); -const progressContainer1 = document.querySelector(".progress-container"); - -// Set the initial width of the progress bar to 0% -progressBar1.style.width = "0%"; -progressContainer1.style.display = 'block'; - -// Attach an event listener to the window object to listen for the 'load' event -window.addEventListener("load", () => { - progressBar1.style.width = "100%"; - setTimeout(() => { - progressContainer1.style.display = 'none'; - }, 500); -}); - - </script> - - <script> -// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later - - const audioElement = document.getElementById("audio"); -audioElement.volume = 0.1; -let audioToggled = JSON.parse(localStorage.getItem("audioToggled")); - -// When the audio player is loaded, check for stored time value and set current time -audioElement.addEventListener("loadedmetadata", () => { - if (audioToggled) { - const storedTime = localStorage.getItem("audioTime-main"); - if (storedTime) { - audioElement.currentTime = storedTime; - } - } -}); - -// When the user leaves the page, store the current time value -window.addEventListener("beforeunload", () => { - if (audioToggled) { - localStorage.setItem("audioTime-main", audioElement.currentTime); - } -}); - -const audio = document.getElementById("audio"); -const button = document.getElementById("audioButton"); -const icon = document.getElementById("audioIcon"); - -function toggleAudio() { - if (audio.paused) { - audio.play(); - audio.volume = 0.1; - button.classList.add("playing"); - icon.classList.remove("fa-play"); - icon.classList.add("fa-pause"); - localStorage.setItem("audioToggled", true); // save that audio is toggled - } else { - audio.pause(); - button.classList.remove("playing"); - icon.classList.remove("fa-pause"); - icon.classList.add("fa-play"); - localStorage.setItem("audioToggled", false); // save that audio is not toggled - } -} - -if (audioToggled === null || audioToggled === undefined) { - audioToggled = true; -} - -if (audioToggled == false) { - audio.pause(); - button.classList.remove("playing"); - icon.classList.remove("fa-pause"); - icon.classList.add("fa-play"); -} else { - audio.play(); - audio.volume = 0.1; - audio.src = "https://inv.zzls.xyz/latest_version?id=k3UevKvP9RU&itag=18" - button.classList.add("playing"); - icon.classList.remove("fa-play"); - icon.classList.add("fa-pause"); -} - -// Show the audio button -button.style.display = "block"; - - </script> - </body > - -</html> - <% } %> - - - - <% if (isMobile) { %> - <% if (isMobile) { %> - -<!DOCTYPE html><html> -<head> - <title>PokeTube - Privacy Is Your Right</title> - <link href=/css/yt-ukraine.svg?v=6 rel=icon> - <meta content=website property=og:type> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta content="PokeTube - Privacy Is Your Right" property=og:title> - <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=summary_large_image name=twitter:card> - <meta content=@PoketaleBot name=twitter:site> - <meta content=@PoketaleBot name=twitter:creator> - <link href=/css/app-cdn.min.css rel=stylesheet> - <link href="https://fonts.poketube.fun/css/fonts.css" rel=stylesheet> - <meta content="#715efb" name="theme-color"> - </head> - <style> - .mn { - background: #181818; - border-radius: 26px; - padding: 6px; - margin: auto; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - } - @font-face { - font-family: 'Ginto Nord'; - font-weight: 800; - src:url('https://p.poketube.fun/https://cdn.statically.io/gh/brecert/discord-quote-generator/main/Ginto-Nord-800.woff') format("woff"); - } - - </style> <style nonce="IJD3y0awTwA2dd0pWOP+ZQ"> - #yt-masthead{line-height:0;margin:15px auto;width:440px;margin-top:25px}#logo-container{margin-right:5px;float:left;cursor:pointer;text-decoration:none}.logo{background:no-repeat url("//www.gstatic.com/youtube/img/branding/youtubelogo/1x/youtubelogo_30.png");width:125px;height:30px;cursor:pointer;display:inline-block}#masthead-search{display:flex;margin-top:3px;max-width:650px;overflow:hidden;padding:0;position:relative}.search-button{border-left:0;-moz-border-radius-topleft:0;border-top-left-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;float:right;height:29px;padding:0;border:solid 1px transparent;border-color:#ffff;background:#999;;color:#333;cursor:pointer}.search-button:hover{border-color:#c6c6c6;background:#f0f0f0;box-shadow:0 1px 0 rgba(0,0,0,0.0)}.search-button-content{border:none;display:block;opacity:.6;padding:0;text-indent:-10000px;background:no-repeat url(//www.gstatic.com/youtube/src/web/htdocs/img/search.png);background-size:auto;width:15px;height:15px;box-shadow:none;margin:0 25px}#masthead-search-terms-border{flex:1 1 auto;border:1px solid #ccc;box-shadow:inset 0 1px 2px #eee;background-color:#fff;font-size:14px;height:29px;line-height:30px;margin:0 0 2px;overflow:hidden;position:relative;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color .2s ease;transition:border-color .2s ease}#masthead-search-terms{background:#2c2f33;border:0;font-size:16px;height:100%;left:0;margin:0;outline:none;padding:2px 6px;position:absolute;width:100%;-moz-box-sizing:border-box;box-sizing:border-box} - </style> - <body> - <center> - - <center> - <section class=youtube-video> - <link href=/css/app-cdn.min.css rel=stylesheet> -<link href=/css/app.main.css rel=stylesheet> -<link href="/css/search.main.css?v=56" rel=stylesheet> - - <style> - @import url("https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css"); - - a.class:hover { - text-decoration:underline; - font-weight:bold -} - summary{ - color:gray; -} -summary:hover{ - color:white; -} -</style> - - <!-- WIGGLE WIGGLE WIGGLE --> - <style> - body{ - overflow-x: hidden; /* Hide horizontal scrollbar */ - color:#111111 - } - - .animated { - -webkit-animation-duration: 10s; - animation-duration: 10s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - -webkit-animation-iteration-count: infinite; - -o-animation-iteration-count: infinite; - } - - - @-webkit-keyframes wiggle { - 0% { -webkit-transform: skewX(9deg); } - 10% { -webkit-transform: skewX(-8deg); } - 20% { -webkit-transform: skewX(7deg); } - 30% { -webkit-transform: skewX(-6deg); } - 40% { -webkit-transform: skewX(5deg); } - 50% { -webkit-transform: skewX(-4deg); } - 60% { -webkit-transform: skewX(3deg); } - 70% { -webkit-transform: skewX(-2deg); } - 80% { -webkit-transform: skewX(1deg); } - 90% { -webkit-transform: skewX(0deg); } - 100% { -webkit-transform: skewX(0deg); } - } - - @keyframes wiggle { - 0% { transform: skewX(9deg); } - 10% { transform: skewX(-8deg); } - 20% { transform: skewX(7deg); } - 30% { transform: skewX(-6deg); } - 40% { transform: skewX(5deg); } - 50% { transform: skewX(-4deg); } - 60% { transform: skewX(3deg); } - 70% { transform: skewX(-2deg); } - 80% { transform: skewX(1deg); } - 90% { transform: skewX(0deg); } - 100% { transform: skewX(0deg); } - } - - .wiggle { - -webkit-animation-name: wiggle; - animation-name: wiggle; - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - .animated.wiggle { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; - } - - :root { - --text-primary: #fff; - --text-secondary: #fff; - --text-link: #3ea6ff; - - --app-background: #111111; - --context-menu-background: #333; - --border-color: #444; - --item-hover-background: #373737; - --item-active-background: #383838; - - --top-bar-background: #202020; - --guide-background: #212121; - - --thumbnail-background: #252525; - - --channel-info-background: #181818; - --channel-contents-background: #0f0f0f; -} - @font-face { - font-family: 'Ginto Nord'; - font-weight: 800; - src:url('https://p.poketube.fun/https://cdn.statically.io/gh/brecert/discord-quote-generator/main/Ginto-Nord-800.woff') format("woff"); - } - - .video > .info { - grid-area: info; - font-size: small; - margin-left: 2px; - height: auto; - width: fit-content; - text-align: left; - margin-top: -9px; - padding: 2px; - } - - .video > .info > .title { - color: var(--text-primary) !important; - font-weight: bold; - font-size: initial; - margin-bottom: 0px; -} - -.alert { - padding: 20px; - background-color: #f44336; - color: white; - opacity: 1; - transition: opacity 0.6s; - margin-bottom: 15px; -} - .downnav{ - position: fixed; - bottom: 0; - left: 0; - width: 100%; - margin: auto; - overflow: hidden; - z-index: 1; - background-color: #0f0f0f -} - .search button { - transform: none; - display: flex; - background: #454545; - color: #999; - border: 1px; - border-radius: 12px; - margin: 2em; - width: 6em; - justify-content: center; - height: 2.6em; -} - -.alert.success {background-color: #04AA6D;} -.alert.info {background-color: #2196F3;} -.alert.warning {background-color: #ff9800;} - -.closebtn { - margin-left: 15px; - color: white; - font-weight: bold; - float: right; - font-size: 22px; - line-height: 20px; - cursor: pointer; - transition: 0.3s; -} - -.closebtn:hover { - color: black; -} - - </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> - - .channel-info-container > img { - width: 100%; -} + <div class="content"> -.search .search-bar { - display: flex; - transform: translateY(1.5em); - background: #222; - border: 1px solid #444; - width: 298px; - height: 30px; -} - - /* nice classname am i rigth */ - .discover-some-bitches{ - text-align: center; - width: 673px; - margin: auto; - } - </style> - - - <style> - #more-button-container .backtotop { - margin: 0%; - display: none; -} -#more-button-container .backtotop a { - margin-top: .5em; -} -#more-button .close { display: none; } -#more-button { -font-size: .94em; -line-height: 1.2em; -text-align: left; -padding: .6em 3%; -margin: 0; -background: #000; -border-top: none; -border-radius: 23px; -height: 100%; -} -#set-language { margin-bottom: .2em; } -#set-language + p { - display: inline-block; - font-size: 1em; /* 15px */ - margin: .45em 0 0; -} - -#more-buttons { padding: .4em 0; } -#more-buttons p {margin: 0; -font-weight: 900; -font-stretch: ultra-expanded; -padding: 3px; - } -#more-buttons span { - display: inline-block; - width: 10.5em; - line-height: 2em; -} -#more-buttons span a { - line-height: 1.9em; -} -#more-buttons span.original { font-weight: bold; } -/* Display/hide language list */ - - #more-button-container { display: none; } - #more-button-container:target { display: block; } - - #rec-cont:target { display: none; } - #rec-cont { display: block; } - - .backtotop b { display: none; } - - body { position: relative; } -#more-button-container { - position: absolute; - position: fixed; - bottom: 0; - left: 0; - width: 100%; - margin: auto; - overflow: hidden; - z-index: 1; - height: 16em; -} - #language-container .backtotop a { - position: absolute; - width: 100%; - height: 100%; - background: transparent; - border: none; - margin-top: 0; - } - #more-button .close { - float: right; - display: block; - } - #more-button.close span { - display: none; - } - #more-button .close:after { - content: "\2A09"; - float: right; - position: relative; bottom: .1em; - cursor: pointer; - } - - #more-buttons { - column-width: 10em; - column-count: 3; - column-gap: 0; - } - #more-buttons span { display: block; } - #more-buttons span a { display: inline-block; } -</style> - - <body> - - <div class="app" > - <div class="app"> - <nav> - - <div class=left><a class="class" href="/" style=font-family:Inter,sans-serif;color:#fff> <img style="width: 8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo-mobile.svg"> </a> - </div> - - - - <div class=right> - - <a href="?tab=search"><i class="fa-light fa-search"></i></a> - - </div> - - </nav> - - - - - </div> - <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;display:none;" id="discover_main"> - - - <% if (!tab) { %> - <% if (!mobilesearch) { %> - - <div class="tabs tabs-center"> - - <a href="" class="tab active">Videos</a> - - <a href="?tab=music"class="tab">Music</a> - - <% if (!isMobile) { %> - - <a href="?tab=movies" class="tab">Movies</a> - - <% } %> - - </div> - <% } %> - - <% if (tab === "music") { %> - - <div class="tabs tabs-center"> - - - <a href="/" class="tab">Videos</a> - - <a href="" class="tab active ">Music</a> - - <% if (!isMobile) { %> - - <a href="?tab=movies" class="tab">Movies</a> - - <% } %> - - - - </div> - <% } %> - - <% } %> - - <% if (tab === "search") { %> - - <div class="tabs tabs-center"> - - - <a href="/" class="tab">Videos</a> - - <a href="?tab=music" class="tab">Music</a> - - - - - </div> - <% } %> - - <% if (mobilesearch) { %> - - <div class="tabs tabs-center"> - - - <a href="/" class="tab">Videos</a> - - <a href="?tab=music" class="tab">Music</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 || tab == "music" ) { %> - <% if (!mobilesearch) { %> - - <div class="video-grid"> - <% inv.forEach(x => { %> - <a href="/watch?v=<%- x.videoId %>" class="video"> - <div class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-top-left-radius: 16px;border-top-right-radius: 16px;"><span class="video-length"><%- turntomins(x.lengthSeconds) %></span></div> - <div class="info"> - <span class="title max-lines-2" title="<%- x.title %>" style="font-family:Inter,sans-serif;"><%- x.title %></span> - <span class="title max-lines-2" title="Video By <%- x.author %>" style="margin-top:1px">By <%- x.author %></span> - - </div> - - </a> <% }) %> - - <div id="more-button-container"> - - <div class="backtotop"> - <hr class="no-display" /> - <a href="#top"><b>▲</b></a> - </div> - <div id="more-button" class="rounded-corners"> - <a href="#top"> - <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;"><hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;"> - </a> - -<div id="more-buttons" style="display: contents;"> - - <div style="padding: 1em;"> - <span style="margin-left: 0em;font-weight: 1000;font-size: x-large;margin-top: 0em;font-family: "Poketube flex";font-stretch: ultra-expanded;"> -More Options :3 - </span> - - - <a href="/video/upload?from=" style="padding-bottom:10em"><i class="fa-light fa-video" style="font-size: xx-large;background: #333;padding: 10px;border-radius: 50%;"></i> - <span style="margin-left: 2.4em;font-weight: 500;font-size: x-large;margin-top: -2em;font-family: "Poketube flex";"> -Upload - </span> - </a> - <br> - - <a href="/privacy" style=""><i class="fa-light fa-shield" style="font-size: xx-large;background: #333;padding: 10px;border-radius: 50%;"></i> - <span style="margin-left: 2.4em;font-weight: 500;font-size: x-large;margin-top: -2em;font-family: "Poketube flex";"> -Privacy - </span> - </a> - - - </div> - - </div> - </div> - </div> - - <div class="downnav"> - <a href="#more-button-container"> - - - <i style="font-size:xx-large;color:#fff;margin-top: 7px;margin-bottom: 7px;" class="fa-thin fa-circle-plus"></i> - </a> - </div> - - <% } %> - <% } %> - - - </div> - <% if (tab == "search") { %> - - <div class=search> - - <form action="/discover"> - - - <input class="search-bar" autocomplete="on" id="fname" name="mobilesearch" placeholder="Search some videos lol "style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;"> - - - <button class="btn btn-success" type=submit> - <i class="fa-light fa-search" style="margin: auto;"></i></button></form> - <img src="https://search-metrics.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;"> - +<div class="content-inner" style="padding: 10px;color:#fff;"> + <br> + <h1 class="heading">PRIVACY IS YOUR RIGHT</h1> + <div style="text-align: center;color: #fff;margin-top: 8px;"> + Poketube is a libre front end for YouTube That is focused on your privacy! </div> + <a href="/discover" class="btn-explore">Discover Videos</a> </div> - </div> - <% } %> + </div> + <div class="product-container"> + <img src="/css/product.svg" style="width: 25em;transform: scale(1.3);margin-right: 1em;margin-bottom: 1em;"> + </div> + </div> - <% if (mobilesearch ) { %> - - <div class=search> - - <form action="/discover"> - <input class="search-bar" autocomplete="on" id="fname" name="mobilesearch" value="<%=mobilesearch%>" placeholder="Search some videos lol "style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;"> - - - <button class="btn btn-success" type=submit> - <i class="fa-light fa-search" style="margin: auto;"></i></button></form> - <img src="https://search-metrics.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;"> - </div> - </div> - - <div class="video-grid" style="background-color: var(--app-background);"> - - <% j.Search.Results.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-radius: 16px;"> <span class="video-length"><%=x.duration %></span> </div> - <div class="info"> - <span class="title max-lines-2" title="<%- x.title %>" style="font-family:Inter,sans-serif;"><%- x.Title %></span> - <span class="title max-lines-2" title="Video By <%- x.author %>" style="margin-top:1px">By <%- x.Channel.Name %></span> - - </div> - - <% }) %> - - - <% if (continuation) { %> - -<p style="text-align: left;margin-left: 16em;color: var(--text-secondary);text-decoration: none;"> - <a href="/?mobilesearch=<%=mobilesearch%>">First Page</a> - </p> - <p style="text-align: left;;color: var(--text-secondary);text-decoration: none;"> - <a href="/discover?mobilesearch=<%=mobilesearch%>&continuation=<%=j.Search.continuation%>">Next Page</a> - </p> - <% } %> - - <% if (!continuation) { %> - <p style="text-align: left;margin-left: 16em;;color: var(--text-secondary);text-decoration: none;"> - <a href="/discover?mobilesearch=<%=mobilesearch%>&continuation=<%=j.Search.continuation%>">Next Page</a> - </p> - - <% } %> - - </div> - - - - <% } %> - - - </body > - -</html> <% } %> - - - \ No newline at end of file + +</div> + <script src="/css/custom-css.js"> </script> + </body> +</html> +