mirror of
https://github.com/direct-img/vibegif.direct-img.link.git
synced 2026-10-29 03:34:51 +00:00
87 lines
5.8 KiB
HTML
87 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>vibegif · <!--count--> free public domain gifs and animated webp</title>
|
|
<link rel="icon" type="image/webp" href="/favicon.webp">
|
|
<link rel="canonical" href="https://vibegif.direct-img.link/">
|
|
<meta name="description" content="public domain gallery of <!--count--> gifs and animated webp, free to use and hot link (CC0)">
|
|
<meta name="robots" content="max-image-preview:large">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="vibegif">
|
|
<meta property="og:url" content="https://vibegif.direct-img.link/">
|
|
<meta property="og:title" content="vibegif · <!--count--> free public domain gifs and animated webp">
|
|
<meta property="og:description" content="public domain gallery of <!--count--> gifs and animated webp, free to use and hot link (CC0)">
|
|
<meta property="og:image" content="https://vibegif.direct-img.link/og.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<!--ld-->
|
|
<script>try{localStorage.bg&&document.documentElement.classList.add("dark")}catch{}</script>
|
|
<style>
|
|
:root{--bg:#fff;--fg:#000;--mute:#888}
|
|
.dark{--bg:#000;--fg:#fff;--mute:#777}
|
|
@font-face{font-family:"Stain";src:url("https://cdn.jsdelivr.net/gh/multipleof4/stain.otf@master/dist/Stain.otf") format("opentype");font-display:swap}
|
|
*{box-sizing:border-box;margin:0}
|
|
body{background:var(--bg);color:var(--fg);font-family:"Stain",sans-serif;text-align:center;padding:24px 16px}
|
|
h1{font-weight:400;font-size:clamp(22px,5vw,44px);line-height:1.2;margin:8px auto 12px;padding:0 40px;text-wrap:balance}
|
|
p{font-size:clamp(16px,3vw,22px);margin-bottom:16px}
|
|
iframe{border:0;border-radius:6px;margin-bottom:28px}
|
|
main{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;max-width:1400px;margin:auto}
|
|
figure>a{display:flex;align-items:center;justify-content:center;aspect-ratio:1}
|
|
figcaption{font-size:14px;margin-top:4px}
|
|
figcaption a{color:var(--mute);text-decoration:none;margin:0 4px}
|
|
figcaption a:hover{color:var(--fg);text-decoration:underline}
|
|
#bg{position:absolute;top:16px;right:16px;width:28px;height:28px;padding:0;border:2px solid var(--fg);border-radius:50%;background:linear-gradient(90deg,var(--fg) 50%,var(--bg) 50%);cursor:pointer}
|
|
#gh{position:absolute;top:0;left:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--fg);color:var(--bg)}
|
|
#gh svg{width:20px;height:20px;fill:currentColor}
|
|
img{width:100%;height:100%;object-fit:contain}
|
|
hr{grid-column:1/-1;border:0;border-top:3px dashed var(--mute);margin:24px 0}
|
|
#nl{display:grid;grid-template-columns:1fr auto;gap:8px;max-width:420px;margin:48px auto 0}
|
|
#nl p,#nl div,#nl output{grid-column:1/-1;margin:0}
|
|
#nl input,#nl button{font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--fg);border-radius:6px;background:var(--bg);color:var(--fg);min-width:0}
|
|
#nl button{background:var(--fg);color:var(--bg);cursor:pointer}
|
|
#nl output{font-size:14px;color:var(--mute)}
|
|
@media(max-width:480px){main{grid-template-columns:repeat(3,1fr);gap:10px}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a id="gh" href="https://github.com/direct-img/vibegif.direct-img.link" aria-label="source on GitHub"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg></a>
|
|
<button id="bg" aria-label="black background" aria-pressed="false"></button>
|
|
<h1>public domain gallery of <!--count--> gifs and animated webp</h1>
|
|
<p>feel free to hot link them</p>
|
|
<iframe src="https://github.com/sponsors/multipleof4/button" title="Sponsor multipleof4" height="32" width="114"></iframe>
|
|
<main>
|
|
<!--gallery-->
|
|
</main>
|
|
<form id="nl">
|
|
<p>signup for vibegif newsletter</p>
|
|
<input type="email" name="email" required placeholder="you@example.com" aria-label="email">
|
|
<button>subscribe</button>
|
|
<div class="cf-turnstile" data-sitekey="0x4AAAAAAFG4HWETOcDDQ5vg" data-appearance="interaction-only" data-size="flexible"></div>
|
|
<output></output>
|
|
</form>
|
|
<script>
|
|
const d=document.documentElement,b=document.getElementById("bg"),sync=()=>b.setAttribute("aria-pressed",d.classList.contains("dark"))
|
|
b.onclick=()=>{const v=d.classList.toggle("dark");try{localStorage.bg=v?1:""}catch{}sync()}
|
|
sync()
|
|
const nl=document.getElementById("nl"),m=nl.querySelector("output"),tk=()=>nl.querySelector("[name=cf-turnstile-response]")?.value
|
|
nl.querySelector(".cf-turnstile").dataset.theme=d.classList.contains("dark")?"dark":"light"
|
|
nl.onsubmit=async e=>{
|
|
e.preventDefault()
|
|
m.value="subscribing..."
|
|
for(let i=0;i<50&&!tk();i++)await new Promise(r=>setTimeout(r,100))
|
|
try{
|
|
const r=await(await fetch("https://newsletter.planetrenox.com/api/sub",{method:"POST",headers:{"Content-Type":"application/json"},
|
|
body:JSON.stringify({pool:"vibegif",email:nl.email.value.trim(),token:tk()||""})})).json()
|
|
m.value=r.ok?"✓ subscribed!":r.error=="captcha failed"?"couldn't verify you're human, try again":r.error||"error"
|
|
}catch{m.value="network error"}
|
|
window.turnstile?.reset()
|
|
}
|
|
</script>
|
|
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
|
|
<script data-goatcounter="https://vibegif.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
|
|
</body>
|
|
</html>
|