438 lines
33 KiB
Plaintext
438 lines
33 KiB
Plaintext
<!--
|
||
|
||
This Source Code Form is subject to the terms of the GNU General Public License:
|
||
|
||
Copyright (C) 2021-2025 Poke (https://codeberg.org/ashley/poke)
|
||
|
||
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 lang="en">
|
||
<head>
|
||
<title>Poke | The privacy app of your dreams!</title>
|
||
<meta charset="UTF-8">
|
||
<meta name="theme-color" content="#141027">
|
||
<meta http-equiv="content-language" content="en-us">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<link rel="stylesheet" href="/css/landing.css?v=4545">
|
||
<link rel="stylesheet" href="/css/snow.css">
|
||
<link rel="stylesheet" href="/css/app.main.css">
|
||
<link href="/css/yt-ukraine.svg?v=7" rel="icon">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="darkreader-lock">
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Poke - The only (good) front-end in the world!">
|
||
<% if (embedtype === "woke") { %>
|
||
<meta property="og:description" content="Poke is a 𝔀𝓸𝓴𝓮 software YouTube front-end, translator, 𝔀𝓸𝓴𝓮 app, and even 𝔀𝓸𝓴𝓮!! Watch 𝔀𝓸𝓴𝓮 videos, and do all of that and more 𝔀𝓸𝓴𝓮 in this all-in-one 𝔀𝓸𝓴𝓮 app!!!">
|
||
<meta property="og:image" content="https://cdn.glitch.me/302c6ee0-629f-453b-9024-bad1f8d7be36/9fhFiXJ.png?v=1717357642758">
|
||
<% } else { %>
|
||
<meta property="og:description" content="Poke is a free software YouTube front-end, translator, map app, and more!! Watch silly videos, check your weather, and do all of that and more anonymously in this all-in-one privacy app!!!">
|
||
<meta property="og:image" content="/static/poke.webp">
|
||
<% } %>
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:title" content="Poke - The only (good) front-end in the world!">
|
||
<% if (embedtype === "woke") { %>
|
||
<meta name="twitter:description" content="Poke is a 𝔀𝓸𝓴𝓮 software YouTube front-end, translator, 𝔀𝓸𝓴𝓮 app, and even 𝔀𝓸𝓴𝓮!! Watch 𝔀𝓸𝓴𝓮 videos, and do all of that and more 𝔀𝓸𝓴𝓮 in this all-in-one 𝔀𝓸𝓴𝓮 app!!!">
|
||
<meta name="twitter:image" content="https://cdn.glitch.me/302c6ee0-629f-453b-9024-bad1f8d7be36/9fhFiXJ.png?v=1717357642758">
|
||
<% } else { %>
|
||
<meta name="twitter:description" content="Poke is a free software YouTube front-end, translator, map app, and more!! Watch silly videos, check your weather, and do all of that and more anonymously in this all-in-one privacy app!!!">
|
||
<meta property="og:image" content="/static/poke.webp">
|
||
<% } %>
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
|
||
<!-- Facebook -->
|
||
<meta property="facebook:title" content="Poke - The only (good) front-end in the world!">
|
||
<% if (embedtype === "woke") { %>
|
||
<meta property="facebook:description" content="Poke is a 𝔀𝓸𝓴𝓮 software YouTube front-end, translator, 𝔀𝓸𝓴𝓮 app, and even 𝔀𝓸𝓴𝓮!! Watch 𝔀𝓸𝓴𝓮 videos, and do all of that and more 𝔀𝓸𝓴𝓮 in this all-in-one 𝔀𝓸𝓴𝓮 app!!!">
|
||
<meta property="facebook:image" content="https://cdn.glitch.me/302c6ee0-629f-453b-9024-bad1f8d7be36/9fhFiXJ.png?v=1717357642758">
|
||
<% } else { %>
|
||
<meta property="facebook:description" content="Poke is a free software YouTube front-end, translator, map app, and more!! Watch silly videos, check your weather, and do all of that and more anonymously in this all-in-one privacy app!!!">
|
||
<meta property="og:image" content="/static/poke.webp">
|
||
<% } %>
|
||
|
||
<% if(isOldWindows) { %>
|
||
<style>
|
||
@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"); }
|
||
h1 { font-family: "Ginto Nord" !important; }
|
||
</style>
|
||
<% } %>
|
||
|
||
<style>
|
||
:root{
|
||
--bg-0:#0b0a14; --bg-1:#0e0a1e; --bg-2:#0b1329; --ink:#edf1ff;
|
||
--muted:#aeb3cf; --accent:#66ccff; --accent-2:#b38bfa;
|
||
--glass:255,255,255; --glass-a:0.08; --glass-a-strong:0.14;
|
||
--border:rgba(255,255,255,0.12); --radius:22px; --blur:26px;
|
||
--shadow:0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,0.06);
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
html,body{height:100%;background:var(--bg-0);color:var(--ink);}
|
||
body{margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji"; overflow-x:hidden}
|
||
|
||
/* Background video and overlays */
|
||
.bg-wrap{position:fixed; inset:0; z-index:-2}
|
||
#bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.2) brightness(.6) contrast(1.1);}
|
||
.bg-overlay{position:absolute; inset:0; z-index:1; pointer-events:none; background:
|
||
radial-gradient(1300px 700px at 12% 15%, rgba(102,204,255,.25), transparent 60%),
|
||
radial-gradient(1000px 600px at 88% 20%, rgba(179,139,250,.21), transparent 60%),
|
||
radial-gradient(1200px 700px at 70% 90%, rgba(255,85,170,.16), transparent 62%),
|
||
linear-gradient(180deg, rgba(8,7,20,.3), rgba(8,7,20,.55) 38%, rgba(8,7,20,.85) 80%, rgba(8,7,20,.95));
|
||
mix-blend: normal; backdrop-filter: blur(2px);
|
||
}
|
||
.grain{position:absolute; inset:-50%; z-index:2; pointer-events:none; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' type='fractalNoise' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); animation:grain 12s steps(6) infinite}
|
||
@keyframes grain{to{transform:translate3d(-10%, -10%, 0)}}
|
||
|
||
/* Global glass */
|
||
.g{background:rgba(var(--glass),var(--glass-a)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));}
|
||
.gx{background:rgba(var(--glass),var(--glass-a-strong)); border:1px solid rgba(255,255,255,.18)}
|
||
|
||
/* Header wrapper (keeps your include) */
|
||
.nova-header{position:sticky; top:0; z-index:30; backdrop-filter:saturate(1.2) blur(10px); background:linear-gradient(180deg, rgba(10,8,25,.7), rgba(10,8,25,.15)); border-bottom:1px solid rgba(255,255,255,.08)}
|
||
|
||
/* Banner pill */
|
||
#banner_text{position:relative; z-index:20; margin-top:88px!important; background:rgba(0,0,0,.5)!important; border:1px solid rgba(255,255,255,.14)!important; border-radius:999px!important; color:#fff!important; text-align:center; padding:.6rem 1rem!important; max-width:max-content; box-shadow:0 6px 24px rgba(0,0,0,.45)}
|
||
|
||
/* Hero */
|
||
.hero{position:relative; z-index:10; max-width:1200px; margin:40px auto 0; padding:0 20px; display:grid; grid-template-columns: 1.15fr .85fr; gap:28px; align-items:center}
|
||
.hero-left{display:flex; flex-direction:column; gap:18px}
|
||
.brand-kicker{display:inline-flex; align-items:center; gap:10px; padding:6px 12px; border-radius:999px; font-size:12px; letter-spacing:.3px}
|
||
.brand-kicker .dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 0 18px var(--accent)}
|
||
.hero-title{font-size: clamp(34px, 5vw, 64px); line-height:1.05; margin:0; letter-spacing:.2px; background:linear-gradient(92deg, #cfe6ff 0%, #ffffff 42%, #d8c7ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 10px 40px rgba(179,139,250,.18)}
|
||
.hero-sub{max-width:720px; color:var(--muted); font-size:clamp(15px, 1.8vw, 18px)}
|
||
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
|
||
.cta{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; text-decoration:none; color:#06131a; font-weight:700; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 16px 40px rgba(102,204,255,.25), inset 0 1px 0 rgba(255,255,255,.5)}
|
||
.cta:hover{transform:translateY(-1px)}
|
||
.cta-secondary{color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16)}
|
||
|
||
/* Humanitarian details glass */
|
||
.support-details{margin-top:8px}
|
||
.support-details details{border-radius:16px; padding:12px 14px}
|
||
.support-details summary{cursor:pointer; font-weight:700}
|
||
.support-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
|
||
.support-links a{color:#fff; text-decoration:underline}
|
||
|
||
/* Poke-chan capsule */
|
||
.capsule{position:relative; height:480px; display:flex; align-items:center; justify-content:center}
|
||
.capsule::before{content:""; position:absolute; inset:-1px; border-radius:30px; padding:1px; background:radial-gradient(1200px 300px at 50% 0%, rgba(102,204,255,.35), rgba(179,139,250,.25), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude}
|
||
.capsule .cap-glass{position:absolute; inset:0; border-radius:30px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(22px)}
|
||
.poke-chan{position:relative; z-index:2; width:min(360px, 90%); filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); animation:float 6s ease-in-out infinite}
|
||
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
|
||
|
||
/* Device showcase */
|
||
.showcase{max-width:1200px; margin:28px auto 0; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:18px}
|
||
.shot{position:relative; border-radius:20px; overflow:hidden; transform-style:preserve-3d; box-shadow:0 20px 60px rgba(0,0,0,.5)}
|
||
.shot img{display:block; width:100%; height:auto; transform:perspective(900px) rotateY(-8deg) translateZ(0); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.92) 85%, rgba(0,0,0,0) 100%)}
|
||
.shot:nth-child(2) img{transform:perspective(900px) rotateY(8deg)}
|
||
.shot::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.18), transparent 60%)}
|
||
|
||
/* Features */
|
||
.features{max-width:1200px; margin:42px auto 0; padding:0 20px}
|
||
.features h2{margin:0 0 12px; font-size:clamp(24px,3.5vw,36px); text-align:center}
|
||
.feature-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
|
||
.feature-card{position:relative; padding:16px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(22px)}
|
||
.feature-title{display:flex; align-items:center; gap:10px; margin:0 0 6px}
|
||
.feature-title svg{border-radius:10px; padding:8px}
|
||
.feature-card p{margin:0; color:var(--muted)}
|
||
|
||
/* Community/License cards area (wraps your includes) */
|
||
.cards-wrap{max-width:1200px; margin:26px auto 0; padding:0 20px}
|
||
.adaptive-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
|
||
.adaptive-grid [data-card], .adaptive-grid .card, .adaptive-grid .pk-card{border-radius:18px}
|
||
|
||
/* Big bottom CTA */
|
||
.bottom-cta{max-width:1100px; margin:46px auto; padding:0 20px}
|
||
.bottom-cta .cta-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px}
|
||
.bottom-cta .cta-text{font-size:22px; font-weight:800}
|
||
|
||
/* Footer polish (keeping your markup as-is) */
|
||
footer{position:relative}
|
||
footer::before{content:""; position:absolute; inset:-2px 0 auto 0; height:2px; background:linear-gradient(90deg, rgba(102,204,255,.9), rgba(179,139,250,.9)); filter:blur(.6px)}
|
||
|
||
/* Marquee in footer already styled in your markup */
|
||
|
||
/* Banner discover button legacy styles override (kept but restyled) */
|
||
.discover-video-button > a{border:0; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#06131a; font-weight:900}
|
||
.discover-video-button > a:hover{filter:none; transform:translateY(-1px)}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 980px){
|
||
.hero{grid-template-columns:1fr; gap:18px}
|
||
.capsule{height:380px}
|
||
.showcase{grid-template-columns:1fr}
|
||
.feature-grid{grid-template-columns:1fr}
|
||
.adaptive-grid{grid-template-columns:1fr}
|
||
.bottom-cta .cta-bar{flex-direction:column; align-items:flex-start}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce){
|
||
.grain{display:none}
|
||
.shot img, .poke-chan{animation:none; transform:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="bg-wrap" aria-hidden="true">
|
||
<video id="bg-video" autoplay muted playsinline loop poster="/static/poke.webp">
|
||
<source src="/bg-480.webm" type="video/webm">
|
||
</video>
|
||
<div class="bg-overlay"></div>
|
||
<div class="grain"></div>
|
||
</div>
|
||
|
||
<div class="nova-header">
|
||
<%- include('./partials/header.ejs') %>
|
||
</div>
|
||
|
||
<main class="nova">
|
||
<div id="banner_text"><%- banner %></div>
|
||
|
||
<section class="hero">
|
||
<div class="hero-left">
|
||
<span class="brand-kicker g"><span class="dot"></span> Welcome to Poke</span>
|
||
<h1 class="hero-title">WELCOME TO POKE!</h1>
|
||
<p class="hero-sub">Poke is a free software AD-FREE ! YouTube front-end, translator, weather app, and more!!1! Watch videos and explore without a trace in this all-in-one privacy app!!1! :3</p>
|
||
<div class="cta-row">
|
||
<a class="cta" href="/app">
|
||
<span>Start Discovering</span>
|
||
</a>
|
||
<a class="cta cta-secondary" href="#features">Why Poke?</a>
|
||
</div>
|
||
<div class="support-details g">
|
||
<details class="gx">
|
||
<summary>Support Humanitarian Efforts</summary>
|
||
<div class="support-links">
|
||
<a href="https://buildpalestine.com/2021/05/15/trusted-organizations-to-donate-to-palestine">Support Palestine</a>
|
||
<a href="https://gazaesims.com">(or donate eSIMs to Gaza)</a>
|
||
<span>—</span>
|
||
<a href="https://war.ukraine.ua/donate">Donate to Ukraine</a>
|
||
<span>—</span>
|
||
<a href="https://donate.unhcr.org/int/en/general">Donate to other conflict areas</a>
|
||
<span>—</span>
|
||
<a href="https://initiative.poketube.fun/donate/trevor-project/">Donate to The Trevor Project</a>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-right">
|
||
<div class="capsule">
|
||
<div class="cap-glass"></div>
|
||
<% if(!DisablePokeChan) { %>
|
||
<img class="poke-chan" src="/static/poke-chan-outfit-a.webp" alt="Poke-chan sitting :3" title="Poke-chan sitting :3">
|
||
<% } %>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="showcase" aria-label="App preview shots">
|
||
<div class="shot g"><img src="/static/poke-player-landing-v2.webp" alt="Poke Player preview"></div>
|
||
<div class="shot g"><img src="/static/the-contract-mobile-landing.webp" alt="Poke mobile preview"></div>
|
||
</section>
|
||
|
||
<section id="features" class="features">
|
||
<h2>TOP 3 REASONS WHY POKE IZ COOL!!</h2>
|
||
<%
|
||
const features = [
|
||
{ title: "No Tracking and Ads", description: "Poke Has no Trackers or ads - we dont and we wont see the vids ur watching :3", icon: "<svg style='background: #ea6d6d;' width='24px' height='24px' viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg' color='#ffffff'><path d='M19.5 16L17.0248 12.6038' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M12 17.5V14' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M4.5 16L6.96895 12.6124' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M3 8C6.6 16 17.4 16 21 8' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>" },
|
||
{ title: "Speedy", description: "Poke is really fast (both on server and client :3) so you can still use it on poor connections :3", icon: "<svg style='background: #6d8cea;' width='24px' height='24px' stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' color='#ffffff'><path d='M15 7C16.1046 7 17 6.10457 17 5C17 3.89543 16.1046 3 15 3C13.8954 3 13 3.89543 13 5C13 6.10457 13.8954 7 15 7Z' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M12.6133 8.26691L9.30505 12.4021L13.4403 16.5374L11.3727 21.0861' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M6.4104 9.5075L9.79728 6.19931L12.6132 8.26692L15.508 11.5752H19.2297' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M8.89152 15.7103L7.65095 16.5374H4.34277' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>" },
|
||
{ title: "Downloader", description: "You wouldnt download a car - welp i would :D u can download videos from poke for 0$!", icon: "<svg style='background: #519355;' width='24px' height='24px' stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' color='#ffffff'><path d='M12 8V16M12 16L15.5 12.5M12 16L8.5 12.5' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>" },
|
||
{ title: "DRM Free", description: "Poke comes without digital restrictions management - poke is free software :3", icon: "<svg style='background: #b7a358;' width='24px' height='24px' stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' color='#ffffff'><path d='M4.62323 5.24841C2.99408 7.02743 2 9.39765 2 12C2 17.5229 6.47715 22 12 22C14.5361 22 16.8517 21.0559 18.6146 19.5' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M21.3021 15.6775C21.7525 14.5392 22 13.2985 22 12C22 6.47715 17.5228 2 12 2C10.7687 2 9.58934 2.22255 8.5 2.62961' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 15C9.64448 15.8593 10.8428 16.3494 12 16.391C13.1141 16.431 14.1901 16.0554 14.6973 15.1933' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M12 16.391V18.5' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M9.5 9.5C9.5 10.6811 10.3525 11.1647 11.3862 11.5' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M15 8.5C14.315 7.81501 13.1087 7.33855 12 7.30872V5.5' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M3 3L21 21' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>" },
|
||
{ title: "Games Included", description: "U can play funnie games on poke!", icon: "<svg style='background: #886dea;' width='24px' height='24px' viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg' color='#ffffff'><path d='M17.5 17.5C20 21 23.9486 18.4151 23 15C21.5753 9.87113 20.8001 7.01556 20.3969 5.50793C20.1597 4.62136 19.3562 4 18.4384 4L5.56155 4C4.64382 4 3.844 4.62481 3.62085 5.515C2.7815 8.86349 2.0326 11.8016 1.14415 15C0.195501 18.4151 4.14415 21 6.64415 17.5' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M16 4V6C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6L8 4' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M8 16C9.10457 16 10 15.1046 10 14C10 12.8954 9.10457 12 8 12C6.89543 12 6 12.8954 6 14C6 15.1046 6.89543 16 8 16Z' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M16 16C17.1046 16 18 15.1046 18 14C18 12.8954 17.1046 12 16 12C14.8954 12 14 12.8954 14 14C14 15.1046 14.8954 16 16 16Z' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>" }
|
||
];
|
||
const randomFeatures = features.sort(() => 0.5 - Math.random()).slice(0, 3);
|
||
%>
|
||
<div class="feature-grid">
|
||
<% randomFeatures.forEach(feature => { %>
|
||
<article class="feature-card">
|
||
<div class="feature-title"><%- feature.icon %><h3 style="margin:0"><%- feature.title %></h3></div>
|
||
<p><%- feature.description %></p>
|
||
</article>
|
||
<% }) %>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cards-wrap">
|
||
<div class="adaptive-grid">
|
||
<%- include('./partials/card',
|
||
icon_background='transparent',
|
||
icon="none",
|
||
title='Join Us',
|
||
description='join our community if you want to! :3',
|
||
actions='true',
|
||
has_secondary_action='true',
|
||
secondary_icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg>',
|
||
secondary_text='Discord',
|
||
secondary_link='https://discord.poketube.fun'
|
||
)%>
|
||
|
||
<%- include('./partials/card',
|
||
icon_background='transparent',
|
||
icon="none",
|
||
title='Free and libre',
|
||
description='Poke is free and libre software! u can view, edit and redistribute under GNU GPL 3 or later :3',
|
||
actions='true',
|
||
has_secondary_action='true',
|
||
secondary_icon='<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 4.233 4.233"><defs><linearGradient id="linearGradient6924-6"><stop style="stop-color:#000000;stop-opacity:0" offset="0"></stop><stop offset=".495" style="stop-color:#000000;stop-opacity:.30000001"></stop><stop style="stop-color:#000000;stop-opacity:.30000001" offset="1"></stop></linearGradient></defs><g transform="matrix(0.06551432,0,0,0.06551432,-2.232417,-1.431776)"><path style="fill:#2185d0" d="m 42519.285,-7078.7891 a 0.76086879,0.56791688 0 0 0 -0.738,0.6739 l 33.586,125.8886 a 87.182358,87.182358 0 0 0 39.381,-33.7636 l -71.565,-92.5196 a 0.76086879,0.56791688 0 0 0 -0.664,-0.2793 z" transform="matrix(0.37058478,0,0,0.37058478,-15690.065,2662.0533)"></path><path style="fill:#fff" d="m 11249.461,-1883.6961 c -12.74,0 -23.067,10.3275 -23.067,23.0671 0,4.3335 1.22,8.5795 3.522,12.2514 l 19.232,-24.8636 c 0.138,-0.1796 0.486,-0.1796 0.624,0 l 19.233,24.8646 c 2.302,-3.6721 3.523,-7.9185 3.523,-12.2524 0,-12.7396 -10.327,-23.0671 -23.067,-23.0671 z" transform="matrix(1.4006354,0,0,1.4006354,-15690.065,2662.0533)"></path></g></svg>',
|
||
secondary_text='Codeberg',
|
||
secondary_link='https://codeberg.org/ashley/poke'
|
||
)%>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bottom-cta">
|
||
<div class="cta-bar g">
|
||
<div class="cta-text">The page is over... So, wha ru waiting 4?</div>
|
||
<a class="cta" href="/app">Start Discovering! :3</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer style="
|
||
background:#000; color:#fff;
|
||
width:100vw;
|
||
margin-left:calc(50% - 50vw);
|
||
margin-right:calc(50% - 50vw);
|
||
border-top:2px solid #fff;
|
||
font-family:Ubuntu, sans-serif;
|
||
padding-top:60px;
|
||
overflow:hidden;">
|
||
|
||
<div style="max-width:1200px; margin:auto; padding:0 20px 60px 20px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:40px;">
|
||
<div style="flex:1 1 300px; min-width:220px;">
|
||
<p style="color:#ccc; font-size:14px; line-height:1.6; margin-top:0;">Poke is a free software privacy app that lets you watch, explore and do MORE!!! — all ad-free and without tracking!!!</p>
|
||
<p style="margin-top:10px; color:#aaa; font-size:12px;">© 2021-<%= new Date().getFullYear() %> <a style="text-decoration:none;color:#aaa;" href="https://initiative.poketube.fun/">Poke Project Initiative</a> With Love!! ❤️ - Licensed under GNU GPL v3+</p>
|
||
</div>
|
||
|
||
<div style="display:flex; flex:2 1 600px; justify-content:space-around; flex-wrap:wrap; gap:40px;">
|
||
<div>
|
||
<h3 style="color:#fff; font-size:16px; margin-bottom:10px;">Project</h3>
|
||
<ul style="list-style:none; padding:0; margin:0; line-height:1.8;">
|
||
<li><a href="/app" style="color:#ccc; text-decoration:none;">Discover</a></li>
|
||
<li><a href="/weather" style="color:#ccc; text-decoration:none;">Weather</a></li>
|
||
<li><a href="https://initiative.poketube.fun" style="color:#ccc; text-decoration:none;">Initiative</a></li>
|
||
<li><a href="/game-hub" style="color:#ccc; text-decoration:none;">Games :D</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:#fff; font-size:16px; margin-bottom:10px;">Community</h3>
|
||
<ul style="list-style:none; padding:0; margin:0; line-height:1.8;">
|
||
<li><a href="https://discord.poketube.fun" style="color:#ccc; text-decoration:none;">Discord</a></li>
|
||
<li><a href="https://codeberg.org/ashley/poke" style="color:#ccc; text-decoration:none;">Codeberg</a></li>
|
||
<li><a href="https://social.poketube.fun" style="color:#ccc; text-decoration:none;">PokeSocial</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:#fff; font-size:16px; margin-bottom:10px;">Resources</h3>
|
||
<ul style="list-style:none; padding:0; margin:0; line-height:1.8;">
|
||
<li><a href="/privacy" style="color:#ccc; text-decoration:none;">Privacy</a></li>
|
||
<li><a href="/license" style="color:#ccc; text-decoration:none;">Licenses</a></li>
|
||
<li><a href="/code-of-conduct" style="color:#ccc; text-decoration:none;">Code Of Conduct</a></li>
|
||
<li><a href="https://codeberg.org/ashley/poke/src/branch/main#hosting-poke" style="color:#ccc; text-decoration:none;">How 2 Host?</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center; border-top:1px solid #222; padding:40px 0 20px 0;">
|
||
<img src="/static/logo-poke.svg" alt="POKE logo" style="width:57em; height:auto; margin-bottom:16px; mask-image:none; border-radius:0;">
|
||
<style>
|
||
.pk-marquee{--gap:32px; --speed:30s; position:relative; overflow:hidden; margin:0 auto; max-width:1200px; height:44px; display:flex; align-items:center; background:transparent; border:none}
|
||
.pk-marquee:focus-within .pk-marquee__track, .pk-marquee:hover .pk-marquee__track{animation-play-state:paused}
|
||
.pk-marquee__track{display:flex; align-items:center; gap:var(--gap); white-space:nowrap; will-change:transform; animation:pk-scroll var(--speed) linear infinite; padding-inline:var(--gap)}
|
||
.pk-marquee__item a{color:#fff; text-decoration:none; font-size:14px; line-height:1; padding:0; background:none; border:none; transition:opacity .2s ease, transform .15s ease}
|
||
.pk-marquee__item a:hover{opacity:.7; transform:translateY(-1px)}
|
||
@keyframes pk-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
|
||
@media (prefers-reduced-motion: reduce){.pk-marquee__track{animation:none}}
|
||
</style>
|
||
|
||
<%
|
||
const _terms = Array.isArray(typeof searchMarquee !== 'undefined' ? searchMarquee : null) && (typeof searchMarquee !== 'undefined')
|
||
? searchMarquee
|
||
: [
|
||
"Gaming videos", "Deltarune Chapter 3&4", "K-Pop mixes", "Lo-fi playlists", "GNU/Linux tips",
|
||
"Privacy guides", "Games hub", "News highlights", "Cozy movies", "Study music",
|
||
"ASMR", "Live cams", "Nature ambiences", "City pop", "Retro tech", "Omori",
|
||
"Twenty One Pilots", "Smoorez", "Assassin's Creed Shadows", "Elden Ring", "Monster Hunter: Wilds",
|
||
"Mario Kart World", "Split Fiction", "Citizen Sleeper 2", "Doom: The Dark Ages", "Helldivers 2",
|
||
"Call of Duty: Black Ops 6", "Fable", "Vampire: Bloodlines 2", "Metallica", "Radiohead",
|
||
"Coldplay", "Billie Eilish", "Taylor Swift", "The Beatles", "Nirvana", "Pink Floyd",
|
||
"Linkin Park", "BTS", "BLACKPINK", "Stray Kids", "Ed Sheeran", "Adele", "Drake",
|
||
"Kendrick Lamar", "Bad Bunny", "Inception", "Interstellar", "Spirited Away", "Your Name",
|
||
"Coco", "Parasite", "Stranger Things", "Arcane", "Attack on Titan", "One Piece",
|
||
"My Hero Academia", "Looney Tunes", "Mandalorian", "Doctor Who", "Cyberpunk 2077",
|
||
"Minecraft", "Nintendo Games", "Windows 11", "GNU/Linux", "Operating Systems",
|
||
"macOS", "Apple", "iOS", "iPhone", "Samsung Galaxy", "Z Flip", "AMD",
|
||
"Free software", "OpenMW", "LibreOffice", "KDE Plasma", "GNOME Shell", "Trisquel GNU/Linux",
|
||
"Fedora", "Debian", "Arch GNU/Linux", "Poke Project", "PokeTube", "Privacy tools",
|
||
"Firefox", "LibreWolf", "DuckDuckGo", "Tor Browser", "Mastodon", "Pixelfed",
|
||
"PeerTube", "Matrix", "Element", "Signal", "F-Droid", "Retro computing",
|
||
"Pixel art", "Synthwave", "Vaporwave", "Chillstep", "Lo-fi hip hop", "Jazz nights",
|
||
"Beach ambience", "Cozy café", "Rain sounds", "Coding music", "Ambient chill",
|
||
"Indie games", "Celeste", "Hollow Knight", "Stardew Valley", "Undertale", "Sonic Frontiers",
|
||
"Persona 5", "Final Fantasy VII", "Kingdom Hearts", "Genshin Impact", "Honkai Star Rail",
|
||
"NieR: Automata", "Tekken 8", "Street Fighter 6", "Valorant", "Overwatch 2",
|
||
"Apex Legends", "Fortnite", "Roblox", "Terraria", "osu!", "Steam Deck", "Proton",
|
||
"Wine", "Lutris", "RetroArch", "PCSX2", "RPCS3", "Yuzu", "Ryujinx", "PPSSPP"
|
||
];
|
||
|
||
const shuffle = arr => arr.map(v => ({ v, s: Math.random() })).sort((a, b) => a.s - b.s).map(({ v }) => v);
|
||
const shuffledTerms = shuffle(_terms);
|
||
const enc = str => encodeURIComponent(String(str));
|
||
%>
|
||
|
||
<div class="pk-marquee" aria-label="Quick search suggestions. Hover to pause.">
|
||
<div class="pk-marquee__track" aria-hidden="false">
|
||
<% _terms.forEach(t => { %>
|
||
<span class="pk-marquee__item"><a href="/search?query=<%= enc(t) %>" title="Search: <%= t %>"><%= t %></a></span>
|
||
<% }) %>
|
||
</div>
|
||
<div class="pk-marquee__track" aria-hidden="true">
|
||
<% _terms.forEach(t => { %>
|
||
<span class="pk-marquee__item"><a href="/search?query=<%= enc(t) %>" title="Search: <%= t %>"><%= t %></a></span>
|
||
<% }) %>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function(){
|
||
var marquee=document.querySelector('.pk-marquee'); if(!marquee) return;
|
||
var tracks=marquee.querySelectorAll('.pk-marquee__track'); if(tracks.length<2) return;
|
||
function tuneSpeed(){
|
||
var w=tracks[0].scrollWidth; var vp=marquee.clientWidth||1; var ratio=w/vp; var base=18; var t=Math.max(base, Math.min(60, base*ratio)); marquee.style.setProperty('--speed', t.toFixed(2)+'s');
|
||
}
|
||
tuneSpeed(); window.addEventListener('resize', tuneSpeed);
|
||
})();
|
||
</script>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
if('serviceWorker' in navigator){
|
||
navigator.serviceWorker.getRegistrations().then(function(registrations){ for(let r of registrations){ r.unregister(); }});
|
||
if('caches' in window){ caches.keys().then(function(names){ names.forEach(function(n){ caches.delete(n); }); }); }
|
||
}
|
||
|
||
(function(){
|
||
var v=document.getElementById('bg-video'); if(!v) return;
|
||
function play(){ var p=v.play(); if(p && p.catch){ p.catch(function(){ v.muted=true; v.play().catch(function(){}); }); }}
|
||
if(v.readyState>=2) play(); else v.addEventListener('canplay', play, {once:true});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |