This repository has been archived on 2023-05-27. You can view files and clone it, but cannot push or open issues or pull requests.
fedifeed/public/index.html
Sam Therapy cfa59ce479
Some checks failed
continuous-integration/drone/push Build is failing
Migrate to yarn v2
Signed-off-by: Sam Therapy <sam@samtherapy.net>
2022-05-11 20:37:55 +02:00

134 lines
4.3 KiB
HTML

<!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 ActivityPub 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">
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"
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>