-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
137 lines (123 loc) · 4.99 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mastodon Share Button</title>
<meta name="description" content="Mastodon button demo">
<meta name="author" content="Alyve">
<meta property="og:title" content="Mastodon Share Button"/>
<link rel="stylesheet" href="assets/css/style.css"/>
<link rel="stylesheet" href="assets/css/fork-awesome.min.css"/>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/js/jquery-3.2.1.slim.min.js" ></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<!-- <nav class="navbar navbar-light bg-light">
<div class="container">
<span class="navbar-brand mb-0 h1"><i class="fa fa-mastodon" aria-hidden="true"></i> Mastodon Share Button</span>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<span class="navbar-brand mb-0 h1"><i class="fa fa-mastodon" aria-hidden="true"></i> Mastodon Share Button</span>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="btn btn-outline-primary" href="https://github.com/Aly-ve/Mastodon-share-button">
<i class="fa fa-github" aria-hidden="true"></i> See the project on Github
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="display-4">Mastodon Share Button</h1>
<p class="lead">A little library to add buttons for sharing a web page on Mastodon</p>
<p>Works on modern browser.</p>
<!-- <p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p> -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<img class="card-img-top" src="assets/img/1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Test it!</h5>
<p class="card-text">
Bellow this card, you can click on the button. A little modal will be displayed to ask to the user his/her instance.
</p>
<p class="card-text">
<div
class="mastodon-share-button"
data-target="https://aly-ve.github.io/Mastodon-share-button/"
data-name="Test of #MSB"
data-buttonstyle="btn btn-primary"
data-text="Share on Mastodon"
></div>
</p>
</div>
</div>
</div>
<div class="col-6">
<h2>Easy to use</h2>
<p>It's so simple than my grandmother is able to add these buttons.<br/>
<p>Just include mastodon.js, set the configuration and add your button.</p>
<h2>Keep the liberty</h2>
<p>Mastodon Share Button is very customizable. Keep your freedom by customizing the text, the button or adding a button.<br/>
It works without any library. No tracker included, just a button.
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Instance address</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="msb-address">Enter your instance's address</label>
<input type="text" class="form-control" id="msb-address" placeholder="https://framapiaf.org">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="msb-memorize-instance">
<label class="form-check-label" for="msb-memorize-instance">Memorize my instance</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="msb-share" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<img src="https://framaclic.org/h/129I693AIEb9g" alt="">
</div>
<script>
const msbConfig = {
openModal: function () {
$('#exampleModal').modal('show');
},
closeModal: function () {
$('#exampleModal').modal('hide');
},
addressFieldSelector: '#msb-address',
buttonModalSelector: '#msb-share',
memorizeFieldId: 'msb-memorize-instance',
buttonIconHtml: '<i class="fa fa-mastodon" aria-hidden="true"></i>'
};
$('.modal').on('shown.bs.modal', function() {
$('#msb-address').focus();
});
</script>
<script src="dist/mastodon.js"></script>
</body>
</html>