<!DOCTYPE html>

<html lang="it">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="theme-color" content="#111111">

<title>Reader · Cantalu</title>

<style>

  * { box-sizing: border-box; }

  body {

    margin: 0;

    min-height: 100vh;

    display: grid;

    place-items: center;

    background: #111;

    color: #fff;

    font-family: -apple-system, BlinkMacSystemFont, sans-serif;

    padding: 24px;

  }

  main { width: 100%; max-width: 420px; }

  h1 { font-size: 32px; margin-bottom: 8px; }

  p { color: #aaa; line-height: 1.5; }

  a {

    display: block;

    margin-top: 28px;

    padding: 17px;

    border-radius: 14px;

    background: #fff;

    color: #111;

    text-align: center;

    text-decoration: none;

    font-weight: 700;

  }

  .url {

    overflow-wrap: anywhere;

    font-size: 13px;

    color: #888;

  }

</style>

</head>

<body>

<main>

  <h1>Reader.</h1>

  <p>Il tuo articolo è pronto per Reeder.</p>

  <div class="url" id="article"></div>

  <a id="open" href="#">Apri in Reeder ↗</a>

  <p id="error"></p>

</main>

<script>

  const article = new URLSearchParams(location.search).get("url");

  const output = document.getElementById("article");

  const button = document.getElementById("open");

  const error = document.getElementById("error");

  if (article && /^https?:\/\//i.test(article)) {

    output.textContent = article;

    const shortcut = new URL(

      "shortcuts://run-shortcut"

    );

    shortcut.searchParams.set("name", "Apri in Reeder");

    shortcut.searchParams.set("input", "text");

    shortcut.searchParams.set("text", article);

    button.href = shortcut.toString();

  } else {

    button.style.display = "none";

    error.textContent = "Nessun articolo valido ricevuto.";

  }

</script>

</body>

</html>