forked from stefanbohacek/fediverse-share-button
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (85 loc) · 3.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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>