From cd2d23e7836f35016050d51db7bf2c6c5aa36052 Mon Sep 17 00:00:00 2001
From: Ashley <iamashley@duck.com>
Date: Wed, 22 Feb 2023 15:54:13 +0000
Subject: [PATCH] add custom css :3

---
 html/custom-css.ejs | 402 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 402 insertions(+)
 create mode 100644 html/custom-css.ejs
diff --git a/html/custom-css.ejs b/html/custom-css.ejs
new file mode 100644
index 00000000..dc2eb765
--- /dev/null
+++ b/html/custom-css.ejs
@@ -0,0 +1,402 @@
+ <!--
+    This Source Code Form is subject to the terms of the GNU General Public License:
+
+    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
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program. If not, see https://www.gnu.org/licenses/.
+-->
+
+  
+<!DOCTYPE html><html>
+<head>
+    <title>PokeTube | Privacy Is Your Right</title>
+    <link href=/css/yt-ukraine.svg?v=6 rel=icon>
+      <meta content="PokeTube | Custom Theme " property=og:title>
+      <meta content="Theme Poketube and do wild stuff!" 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.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>
+  </head>
+
+ <body>
+     
+     <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
+}
+  summary{
+    color:gray;
+}
+summary:hover{
+    color:white;
+}
+</style>
+  <!-- WIGGLE WIGGLE WIGGLE -->
+  <style>
+    body{
+        overflow: hidden; /* Hide 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: #1a1a1a;
+    --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://cdn.statically.io/gh/brecert/discord-quote-generator/main/Ginto-Nord-800.woff') format("woff");
+      }
+
+.alert {
+  padding: 20px;
+  background-color: #f44336;
+  color: white;
+  opacity: 1;
+  transition: opacity 0.6s;
+  margin-bottom: 15px;
+}
+
+.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> 
+ 
+        .channel-info-container > img {
+  width: 100%;
+}
+ 
+   .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%);
+}
+   
+   .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 */"
+   }
+
+ .h {
+margin: auto;
+display: flex;
+flex-flow: column;
+align-content: center;
+background: #333;
+color: #fff;
+text-align:center;
+padding: 1em;
+border-radius: 31px;
+min-height: 83vh;
+width: 87vh;
+      }
+   
+textarea {
+resize: none;
+background: #111;
+min-height: 69vh;
+border: none;
+border-radius: 2em;
+margin-top: 1em;
+margin-bottom: 1em;
+padding:1em;
+}
+      </style>
+  <script type="text/javascript">
+<!--//--><![CDATA[//><!--
+/**
+ * @licstart The following is the entire license notice for the JavaScript
+ * code in this page.
+ *
+ *  Copyright (C) 2021-2022 POKETUBE (https://github.com/iamashley0/poketube)
+ *
+ * The JavaScript code in this page is free software: you can 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.
+ */
+
+//--><!]]>
+</script>
+       <div class="app">   
+        
+     <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>
+            </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: 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;"> 
+
+      </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>
+            </div>
+     
+      </nav>
+  
+         <div class="h">
+         <div class="video-title" style="font-family:PokeTube Flex,sans-serif;font-weight:1000;font-stretch: ultra-expanded;">
+            Custom Css
+           </div> 
+
+           
+           <textarea id="custom-css">
+             
+             
+  
+           </textarea>
+           
+       <button onclick="setCustomCss()" style="background: #1a1a1a;width: fit-content;margin-left: auto;margin-right: auto;padding: 7px;border-radius: 8px;">
+           Save
+           </button>    
+         </div>
+  
+         
+</div>
+ 
+        <script>
+          
+    const cookie = localStorage.getItem("poke-custom-css");
+          
+    if(cookie !== " ") {
+      document.getElementById("custom-css").value = cookie
+    }
+      
+     
+    
+    function setCustomCss(){
+      localStorage.setItem('poke-custom-css',  document.getElementById("custom-css").value);
+    alert("saved!")
+    
+     }
+          
+          
+        </script>
+       <script src="/css/custom-css.js"> </script>
+ </body>
+</html>   
+  
