<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1" /> <title>Fedifeed - embeddable ActivityPub feeds</title> <link rel="stylesheet" href="./css/stylesheet.css" /> <script src="./js/script.js" defer></script> </head> <body> <br /> <div> <h1>Fedifeed</h1> <h4>Embedded Mastodon/Pleroma/Misskey feeds for blogs, websites, etc.</h4> <a href="https://git.froth.zone/sam/fedifeed" class="cta button alt" >Fork on Gitea <img class="link-logo after" src="img/gitea-logo.svg" alt="Gitea Logo" /></a> <br /> <br /> <hr /> <br /> <form action="javascript:genUrl()"> <label >Instance URL:<input required type="text" id="urlin" placeholder="froth.zone" oninvalid="this.setCustomValidity('Insert your instance URL. Example: mastodon.social')" oninput="this.setCustomValidity('')" /></label> <br /> <label >Username:<input required type="text" id="usernamein" placeholder="sam" oninvalid="this.setCustomValidity('Insert your username. Example: gargron')" oninput="this.setCustomValidity('')" /></label> <br /> <label >Width (px):<input required type="number" id="width" value="400" oninvalid="this.setCustomValidity('Insert width of generated feed. Default: 400')" oninput="this.setCustomValidity('')" /></label> <br /> <label >Height (px):<input required type="number" id="height" value="800" oninvalid="this.setCustomValidity('Insert height of generated feed. Default: 800')" oninput="this.setCustomValidity('')" /></label> <br /> <label >UI Scale (percent):<input required type="number" id="size" value="100" oninvalid="this.setCustomValidity('Insert UI scale. Default: 100')" oninput="this.setCustomValidity('')" /></label> <br /> <label >Theme: <select id="theme"> <option value="auto-auto"> auto-auto (depends on instance, automatic) </option> <option value="auto-dark" selected> auto-dark (depends on instance, use dark) </option> <option value="auto-light"> auto-light (depends on instance, use light) </option> <option value="masto-dark">masto-dark</option> <option value="masto-light">masto-light</option> <option value="masto-auto"> masto-auto (based on css prefers-color-scheme) </option> <option value="misskey-dark">misskey-dark</option> <option value="misskey-light">misskey-light</option> <option value="misskey-auto"> misskey-auto (based on css prefers-color-scheme) </option> <option value="pleroma">pleroma</option> </select> </label> <br /> <label >Show Header?<input id="header" type="checkbox" checked="checked" /></label> <br /> <label>Hide replies?<input type="checkbox" id="hidereplies" /></label> <br /> <label>Hide boosts?<input type="checkbox" id="hideboosts" /></label> <br /> <br /> <button value="generate">Generate</button> </form> <br /><br /> <label >Use this markup in your HTML: <br /><textarea id="result" placeholder="result will go here" ></textarea> </label> <br /><br /> <h3>Live Preview:</h3> <span class="iframe-contain"> <iframe id="frame" title="Powered by Fedifeed" allowfullscreen sandbox="allow-top-navigation allow-scripts" width="400" height="800" src="/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=&theme=pleroma&size=100&header=true&replies=true&boosts=true" ></iframe> </span> <br /> </div> </body> </html>