92 lines
3.4 KiB
HTML
92 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"
|
|
class="h-100"
|
|
data-bs-theme="auto">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0">
|
|
<title>Fediverse Sharing Button</title>
|
|
<meta name="description"
|
|
content="One of the current objections to Communism, and Socialism altogether, is that the idea is so old, and yet it has never been realized.">
|
|
<link rel="stylesheet"
|
|
href="./assets/libs/bootstrap/5.3.3/css/bootstrap.min.css">
|
|
<link rel="stylesheet"
|
|
href="./fediverse-share-button/styles.min.css">
|
|
<style>
|
|
/* Demo page styles, not needed for the share button. */
|
|
|
|
.explainer {
|
|
font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
|
|
font-weight: normal;
|
|
font-size: 1.4rem;
|
|
-webkit-transform: rotate(-1deg);
|
|
-ms-transform: rotate(-1deg);
|
|
transform: rotate(-1deg);
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="d-flex flex-column h-100">
|
|
<main class="flex-shrink-0">
|
|
<div class="container">
|
|
<h1 class="mt-5 fw-bold">Fediverse Sharing Button</h1>
|
|
<p class="lead">Make it easy to share your website or a blog with the fediverse</p>
|
|
<ul class="mt-4">
|
|
<li>Minimalist design with no pop-ups</li>
|
|
<li>Remembers the last fediverse domain used</li>
|
|
<li>Supports several fediverse platform (<a
|
|
href="https://github.com/stefanbohacek/fediverse-share-button/#q-which-platforms-are-supported">see full
|
|
list</a>) and shows a matching logo</li>
|
|
<li>Open-source</li>
|
|
</ul>
|
|
<p class="explainer d-block mt-5 mb-3">Try it here ⤵</p>
|
|
<form class="fsb-prompt mt-0">
|
|
<label>Share this page from your <a href="https://jointhefediverse.net/">fediverse</a> server</label>
|
|
<div class="fsb-input-group mb-3">
|
|
<span class="fsb-input-group-text">https://</span>
|
|
<input required
|
|
type="text"
|
|
name="fediverse-domain"
|
|
placeholder="mastodon.social"
|
|
class="fsb-input fsb-domain"
|
|
aria-label="Server domain">
|
|
<button class="fsb-button"
|
|
type="submit"><img alt="Fediverse platform logo"
|
|
src="./fediverse-share-button/icons/mastodon.svg"
|
|
class="fsb-icon"></span>Share</button>
|
|
</div>
|
|
<p class="fsb-support-note fsb-d-none">This server does not support sharing. Please visit <a
|
|
class="fsb-support-note-link"
|
|
target="_blank"
|
|
href=""></a>.</p>
|
|
</form>
|
|
|
|
<p class="mt-5">
|
|
<a class="btn btn-dark"
|
|
href="https://github.com/stefanbohacek/fediverse-share-button/">Get the code</a>
|
|
<a class="btn btn-dark"
|
|
href="https://github.com/stefanbohacek/fediverse-share-button-wordpress/">Add to WordPress <sup>beta</sup></a>
|
|
<a class="btn btn-light"
|
|
href="https://stefanbohacek.com/project/fediverse-sharing-button/">Learn more</a>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer mt-auto py-3 bg-body-tertiary">
|
|
<div class="container">
|
|
<span class="text-body-secondary">Created by <a class="text-body-secondary"
|
|
href="https://stefanbohacek.com/">Stefan Bohacek</a>.</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script class="fsb-script"
|
|
src="./fediverse-share-button/script.min.js"
|
|
defer>
|
|
</script>
|
|
</body>
|
|
|
|
</html> |