<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="Baixe o aplicativo VANTA para Android ou abra a VANTA no navegador.">
<title>VANTA — Baixar aplicativo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page-shell">
<header class="site-header">
<a class="brand" href="./" aria-label="VANTA início">
<span class="brand-mark" aria-hidden="true">V</span>
<span>VANTA</span>
</a>
<span class="header-caption">Compartilhe momentos e descubra histórias</span>
</header>
<section class="hero" aria-labelledby="hero-title">
<div class="hero-copy">
<p class="eyebrow"><span></span> REDE SOCIAL</p>
<h1 id="hero-title">VANTA</h1>
<p class="hero-description">Compartilhe momentos, acompanhe pessoas e descubra novas histórias.</p>
<div class="link-cards">
<div class="link-card">
<label for="apk-link">Download do aplicativo Android</label>
<div class="link-row">
<input id="apk-link" type="text" value="https://drive.google.com/file/d/1vU7vrPY7fS4zvZlC-1XIfP9TJatLW6_D/view?usp=sharing" readonly>
<button class="button button-download" type="button" data-copy="apk-link">Copiar link</button>
</div>
</div>
<div class="link-card">
<label for="site-link">Abrir VANTA no navegador</label>
<div class="link-row">
<input id="site-link" type="text" value="https://htmldrop.com/vanta" readonly>
<button class="button button-browser" type="button" data-copy="site-link">Copiar link</button>
</div>
</div>
</div>
<p class="copy-status" role="status" aria-live="polite">Toque em “Copiar link” e cole no navegador.</p>
</div>
</section>
<footer class="site-footer">
<span>VANTA</span>
<span>O aplicativo abre o site oficial da VANTA. O site é atualizado automaticamente.</span>
</footer>
</main>
<script>
document.querySelectorAll("[data-copy]").forEach((button) => {
button.addEventListener("click", async () => {
const input = document.getElementById(button.dataset.copy);
const status = document.querySelector(".copy-status");
try {
await navigator.clipboard.writeText(input.value);
status.textContent = "Link copiado. Cole-o no navegador.";
} catch {
const fallback = document.createElement("textarea");
fallback.value = input.value;
fallback.setAttribute("readonly", "");
fallback.style.position = "fixed";
fallback.style.left = "-9999px";
document.body.appendChild(fallback);
fallback.focus();
fallback.select();
fallback.setSelectionRange(0, fallback.value.length);
let copied = false;
try {
copied = document.execCommand("copy");
} finally {
fallback.remove();
}
if (copied) {
status.textContent = "Link copiado. Cole-o no navegador.";
} else {
input.focus();
input.select();
input.setSelectionRange(0, input.value.length);
status.textContent = "Não foi possível copiar automaticamente. O link está selecionado: toque em Copiar no menu do aparelho.";
}
}
});
});
</script>
</body>
</html>