paytolaugh/v/b11e33cb.html

98 lines
5.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Astro Formally Protests Cleaning Robots &mdash; PayToLaugh</title>
<meta name="description" content="Robotic vacuum cleaners are sold as autonomous, convenient machines that quietly clean on their own, including underwater pool models.">
<link rel="canonical" href="https://paytolaugh.com/v/b11e33cb.html">
<meta property="og:site_name" content="PayToLaugh">
<meta property="og:type" content="video.other">
<meta property="og:url" content="https://paytolaugh.com/v/b11e33cb.html">
<meta property="og:title" content="Astro Formally Protests Cleaning Robots">
<meta property="og:description" content="Robotic vacuum cleaners are sold as autonomous, convenient machines that quietly clean on their own, including underwater pool models.">
<meta property="og:image" content="https://api.corben.world/files/e4d459b4-17c4-40c1-a688-f22c5530f649/public">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Astro, mid sentence">
<meta property="og:video" content="https://api.corben.world/files/c00b9f3a-9835-4286-875f-fd597226d516/public?v=astro-astro-formally-protests-cleaning-r.mp4">
<meta property="og:video:secure_url" content="https://api.corben.world/files/c00b9f3a-9835-4286-875f-fd597226d516/public?v=astro-astro-formally-protests-cleaning-r.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="720">
<meta property="og:video:height" content="1280">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Astro Formally Protests Cleaning Robots">
<meta name="twitter:description" content="Robotic vacuum cleaners are sold as autonomous, convenient machines that quietly clean on their own, including underwater pool models.">
<meta name="twitter:image" content="https://api.corben.world/files/e4d459b4-17c4-40c1-a688-f22c5530f649/public">
<link rel="stylesheet" href="/assets/app.css">
<style>
.watch{max-width:420px;margin:0 auto;padding:26px 20px 44px;width:100%;box-sizing:border-box}
.watch video{width:100%;aspect-ratio:9/16;border-radius:14px;background:#000;display:block;
border:1px solid var(--line)}
.watch h1{font-size:23px;margin:20px 0 4px;line-height:1.25}
.watch .who{color:var(--muted);font:12px/1.6 var(--mono)}
.watch .cta{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.watch .cta p{color:var(--muted);font-size:14.5px;margin:0 0 14px}
dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);
border-radius:14px;padding:22px;max-width:420px;width:90%}
dialog::backdrop{background:rgba(4,6,10,.72)}
dialog input{width:100%;box-sizing:border-box}
</style>
</head>
<body>
<div class="watch">
<video controls playsinline preload="metadata" poster="https://api.corben.world/files/e4d459b4-17c4-40c1-a688-f22c5530f649/public" src="https://api.corben.world/files/c00b9f3a-9835-4286-875f-fd597226d516/public?v=astro-astro-formally-protests-cleaning-r.mp4"></video>
<h1>Astro Formally Protests Cleaning Robots</h1>
<p class="who">Astro &middot; 32 seconds</p>
<p style="margin:16px 0 0">
<button type="button" class="btn" id="share">Share this</button>
</p>
<div class="cta">
<p>Made on PayToLaugh. Upload a photo of your pet, paste something worth
reacting to, and they will have opinions about it.</p>
<a class="btn" style="display:inline-block;text-decoration:none" href="/">Make one for your pet</a>
</div>
</div>
<dialog id="sharebox">
<h2 class="sec" style="margin-top:0">Share this video</h2>
<p style="color:var(--muted);font-size:14px;margin:0 0 12px">Anyone with this link can watch it.</p>
<input type="text" id="shareurl" readonly value="https://paytolaugh.com/v/b11e33cb.html">
<p style="margin:14px 0 0">
<button type="button" class="btn" id="copy">Copy link</button>
<button type="button" class="btn ghost" id="close" style="margin-left:8px">Close</button>
</p>
</dialog>
<script>
/* Everything above is already in the served HTML, so a preview crawler sees
the tags and the video without running any of this. */
var box = document.getElementById("sharebox");
document.getElementById("share").onclick = async function () {
if (navigator.share) {
try { await navigator.share({ title: "Astro Formally Protests Cleaning Robots", url: "https://paytolaugh.com/v/b11e33cb.html" }); return; }
catch (e) { if (e && e.name === "AbortError") return; }
}
box.showModal();
};
document.getElementById("close").onclick = function () { box.close(); };
document.getElementById("copy").onclick = function () {
var i = document.getElementById("shareurl");
i.select();
var b = this;
navigator.clipboard.writeText(i.value).then(function () {
b.textContent = "Copied";
setTimeout(function () { b.textContent = "Copy link"; }, 1600);
}).catch(function () { b.textContent = "Press Ctrl+C"; });
};
</script>
<script src="/assets/app.js"></script>
<script>
/* Count the view. The page is static, so this is the only moving part. */
try { api("resolve_share", { code: "b11e33cb" }); } catch (e) {}
</script>
</body>
</html>