This repository has been archived by the owner on Apr 18, 2021. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
219 lines (180 loc) · 15.2 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hop on Discord</title>
<link rel="shortcut icon" href="/favicon.ico">
<meta name="theme-color" content="#36393f">
<style>
/* https://github.com/IonicaBizau/gridly | MIT */
.row{display:flex}.col{flex:1}@media(max-width:48em){.row{flex-direction:column}.col{flex:0 0 auto}}
@media(min-width:48em){.col-tenth{flex:0 0 10%}.col-fifth{flex:0 0 20%}.col-quarter{flex:0 0 25%}.col-third{flex:0 0 33.3333334%}.col-half{flex:0 0 50%}}
/* Base */
body { margin: 0; }
html {
background: #36393f;
color: rgba(255, 255, 255, 0.7);
font: 16px/1.4 'Whitney', 'Roboto', sans-serif;
}
/* Elements */
a {
color: #f6f6f7;
text-decoration: none;
}
.icon {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.5rem;
}
.icon path { fill: #f6f6f7; }
.right { text-align: right; }
select, input[type=text] {
margin-top: 0.5rem;
color: #aaa;
display: block;
padding: 0.5rem;
background: #313339;
outline: 0;
border: 1px solid rgba(0,0,0, 0.3);
}
select { padding-left: 0.25rem; padding-right: 0.75rem; }
/* Links */
nav a:hover {
opacity: 0.5;
}
small {
display: block;
opacity: 0.8;
}
/* Nav */
nav {
padding: 6rem 3rem;
background: #7289da;
color: #fff;
min-height: 100vh;
}
nav small {
margin: 1rem 0;
}
h1 {
font-weight: normal;
color: #f6f6f7;
text-transform: uppercase;
font-weight: bold;
font-size: 3rem;
margin: 0;
line-height: 1;
}
/* Main */
main {
padding: 3rem 4rem;
}
h2 {
padding-bottom: 0.75rem;
color: #fff;
border-bottom: 0.25rem solid rgba(185,187,190,.1);
}
</style>
</head>
<body>
<div id="app" class="row">
<nav class="col-quarter">
<h1>Hop on Discord</h1>
<p>
Making your Discord server more accessible with a live chat style floating action button. It's quite FABulous. Get it? It's a pun. It's great. Like you, if you use this. You should.
</p>
<div>
<a href="https://github.com/mistermantas/hop-on-discord/blob/master/snippet-dark.html"><img alt="Github file size" src="https://img.shields.io/github/size/mistermantas/hop-on-discord/snippet-dark.html.svg?style=flat-square" style="max-width:100%;"></a>
<a href="https://github.com/mistermantas/hop-on-discord/commits/master"><img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/mistermantas/hop-on-discord.svg?style=flat-square" style="max-width:100%;"></a>
</div>
<small>
<a href="https://github.com/mistermantas/hop-on-discord/blob/master/LICENSE.md">
Made by Mantas Vilčinskas<br>
Open source under MIT
</a>
</small>
<div>
<a href="http://github.com/mistermantas">
<svg class="icon" viewBox="0 0 24 24">
<path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
</svg>
</a>
<a href="http://twitter.com/mistermantas">
<svg class="icon" viewBox="0 0 24 24">
<path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
</svg>
</a>
<a href="http://behance.net/mistermantas">
<svg class="icon" viewBox="0 0 24 24">
<path d="M19.58,12.27C19.54,11.65 19.33,11.18 18.96,10.86C18.59,10.54 18.13,10.38 17.58,10.38C17,10.38 16.5,10.55 16.19,10.89C15.86,11.23 15.65,11.69 15.57,12.27M21.92,12.04C22,12.45 22,13.04 22,13.81H15.5C15.55,14.71 15.85,15.33 16.44,15.69C16.79,15.92 17.22,16.03 17.73,16.03C18.26,16.03 18.69,15.89 19,15.62C19.2,15.47 19.36,15.27 19.5,15H21.88C21.82,15.54 21.53,16.07 21,16.62C20.22,17.5 19.1,17.92 17.66,17.92C16.47,17.92 15.43,17.55 14.5,16.82C13.62,16.09 13.16,14.9 13.16,13.25C13.16,11.7 13.57,10.5 14.39,9.7C15.21,8.87 16.27,8.46 17.58,8.46C18.35,8.46 19.05,8.6 19.67,8.88C20.29,9.16 20.81,9.59 21.21,10.2C21.58,10.73 21.81,11.34 21.92,12.04M9.58,14.07C9.58,13.42 9.31,12.97 8.79,12.73C8.5,12.6 8.08,12.53 7.54,12.5H4.87V15.84H7.5C8.04,15.84 8.46,15.77 8.76,15.62C9.31,15.35 9.58,14.83 9.58,14.07M4.87,10.46H7.5C8.04,10.46 8.5,10.36 8.82,10.15C9.16,9.95 9.32,9.58 9.32,9.06C9.32,8.5 9.1,8.1 8.66,7.91C8.27,7.78 7.78,7.72 7.19,7.72H4.87M11.72,12.42C12.04,12.92 12.2,13.53 12.2,14.24C12.2,15 12,15.64 11.65,16.23C11.41,16.62 11.12,16.94 10.77,17.21C10.37,17.5 9.9,17.72 9.36,17.83C8.82,17.94 8.24,18 7.61,18H2V5.55H8C9.53,5.58 10.6,6 11.23,6.88C11.61,7.41 11.8,8.04 11.8,8.78C11.8,9.54 11.61,10.15 11.23,10.61C11,10.87 10.7,11.11 10.28,11.32C10.91,11.55 11.39,11.92 11.72,12.42M20.06,7.32H15.05V6.07H20.06V7.32Z" />
</svg>
</a>
</div>
</nav>
<main class="col">
<h2 id="what">Wait, what? 🤔</h2>
<p>Have you ever wanted to link to a Discord server but never knew how to make it prominent enough or keep it light without loading too much crap?
Hop on Discord is a simple tool to add a floating action button that links to your Discord server, which looks very similiar to the UI of Discord.</p>
<p>Here is the beautiful feature list:</p>
<ul>
<li>Pretty freaking beautiful design</li>
<li>Very compact (~7kb uncompressed)</li>
<li>Simple to add & tweak</li>
<li>Dark & light modes</li>
<li>Can change accent color</li>
<li>Maintainable SCSS using <a href="https://css-tricks.com/bem-101/" rel="nofollow">BEM</a></li>
<li>Minimal JavaScript</li>
<li>No dependencies</li>
<li>Works everywhere</li>
<li>No tracking</li>
</ul>
<h2 id="setup">I want it. 🔥</h2>
<p>For this, you need to know a little bit of HTML.</p>
<p>On the repo, you will find <em>dark and light mode snippets</em>. Choose whatever you like best. On the site, here, we have dark mode, but for the white mode that <em>doesn't</em> burn your eyes, head over to <a href="https://eggylyte.com">eggylyte.com</a> to see what can be done with light mode and custom colors.</p>
<p>There's also a source SCSS (Sass) file, so if you're a developer, you can use that to get some sweet looking Discord action.</p>
<p><a href="https://github.com/mistermantas/hop-on-discord"><strong>Click this linky to go to the GitHub repo! 💻</strong></a></p>
<p>You can change the images, the text, or anything you want, really. What you see is what you get.</p>
<p>If you need extra help or want a new feature, <a href="https://github.com/mistermantas/hop-on-discord/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc">create an issue on GitHub</a>. I usually reply swiftly, so do it. Do it. Come on. Do it. Do it! I need to find them bugs! 💥</p>
</main>
</div>
<!-- SNIPPET START -->
<script>
var elements = document.querySelectorAll('.discord-dialog__close-button, .discord-dialog')
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
toggle('.discord-dialog')
})
}
</script>
<style>
@import url(https://fonts.cdnfonts.com/css/whitney-2);.discord-dialog *,.discord-dialog :after,.discord-dialog :before{box-sizing:inherit}.discord-dialog a{text-decoration:none}@keyframes discord-dialog__transition{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}.discord-dialog{-webkit-tap-highlight-color:transparent;box-sizing:border-box;display:none;z-index:2147483647;position:fixed;max-width:288px;right:0;bottom:0;margin:18px;border-radius:10px;font-family:Whitney,sans-serif;background:#2e3136;color:#72767d;box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.4);transition:opacity .3s cubic-bezier(.25,.8,.25,1),transform .3s cubic-bezier(.25,.8,.25,1);animation:discord-dialog__transition .2s}.discord-dialog--active{display:block}.discord-dialog__container{font-size:14px;line-height:1.2;color:#99aab5;padding:8px 28px 28px 28px}.discord-dialog__logo{display:none;width:auto;margin-top:5px;height:24px}.discord-dialog__logo path{fill:#fff}.discord-dialog__close-button{position:absolute;right:0;padding:16px;cursor:pointer}.discord-dialog__close-button svg{height:20px;width:20px}.discord-dialog__close-button svg path{fill:#ccc}.discord-dialog__close-button:hover{opacity:.8}.discord-dialog__close-button:active{opacity:.4}.discord-dialog__footer{padding:10px 20px}.discord-dialog__guild-icon{border-radius:50%;width:64px;display:block;height:auto;margin:16px 0}.discord-dialog__guild{font-size:24px;line-height:30px;margin-bottom:12px;font-weight:700;color:#fff}.discord-dialog__btn{background:#7289da;color:#fff;text-align:center;display:block;border-radius:1px;margin:8px;font-size:16px;line-height:24px;border-radius:3px;text-align:center;padding:12px 16px;position:relative;top:-6px;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:box-shadow .3s cubic-bezier(.25,.8,.25,1),background .3s cubic-bezier(.25,.8,.25,1)}.discord-dialog__btn:hover{background:#8095de}.discord-dialog__btn:active{background:#677bc4}.discord-dialog__explainer{display:block;margin:2px 8px;color:#7289da;font-size:12px;text-align:right;top:-6px}.discord-dialog__explainer:hover{opacity:.8}.discord-dialog__explainer:active{opacity:.6}.discord-button{-webkit-tap-highlight-color:transparent;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);position:fixed;bottom:0;right:0;z-index:50;margin:23.5px;padding:15.5px;border-radius:50%;background:#7289da;cursor:pointer;transition:box-shadow .3s cubic-bezier(.25,.8,.25,1),background .3s cubic-bezier(.25,.8,.25,1);display:flex;text-align:center;align-items:center;justify-content:center}.discord-button svg{height:28px;width:28px;transition:background .3s cubic-bezier(.25,.8,.25,1)}.discord-button svg path{fill:#fff}.discord-button:hover{box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.discord-button:hover svg{opacity:.6}.discord-button:active{box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}.discord-button:active svg{opacity:.4}
</style>
<div class="discord-button" onclick="document.querySelector('.discord-dialog').className = 'discord-dialog discord-dialog--active'">
<svg class="discord-button__icon" viewBox="0 0 24 24"><path d="M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z"></path></svg>
</div>
<div class="discord-dialog">
<div class="discord-dialog__header">
<a href="https://discordapp.com">
<svg class="discord-dialog__logo" viewBox="0 0 532 130"><path d="M53.2,20.3H20v37.6l22.1,20V41.4H54c7.5,0,11.2,3.7,11.2,9.5v27.9c0,5.8-3.5,9.7-11.2,9.7H20v21.2h33.2 c17.8,0.1,34.5-8.8,34.5-29.4V50.2C87.7,29.4,71,20.3,53.2,20.3z M227.3,80.4V49.6c0-11.1,19.8-13.7,25.8-2.5l18.3-7.5 C264.3,23.7,251.1,19,240.2,19c-17.8,0-35.4,10.4-35.4,30.6v30.8c0,20.3,17.6,30.6,35,30.6c11.2,0,24.6-5.6,32-20.1l-19.6-9.1 C247.4,94.2,227.3,91.2,227.3,80.4z M166.7,53.8c-6.9-1.5-11.5-4-11.8-8.3c0.4-10.4,16.3-10.7,25.6-0.8l14.7-11.4 C186,22,175.6,19,164.8,19c-16.3,0-32.1,9.2-32.1,26.8c0,17.1,13,26.2,27.3,28.4c7.3,1,15.4,3.9,15.2,9c-0.6,9.6-20.2,9.1-29.1-1.8 L132,94.8c8.3,10.7,19.6,16.2,30.2,16.2c16.3,0,34.4-9.5,35.1-26.8C198.3,62.2,182.5,56.7,166.7,53.8z M99.8,109.7h22.4V20.3H99.8 V109.7z M477.5,20.3h-33.2v37.6l22.1,20V41.4h11.8c7.5,0,11.2,3.7,11.2,9.5v27.9c0,5.8-3.5,9.7-11.2,9.7h-34v21.2h33.2 c17.8,0.1,34.5-8.8,34.5-29.4V50.2C512,29.4,495.3,20.3,477.5,20.3z M314.6,19c-18.4,0-36.7,10.1-36.7,30.7v30.6 c0,20.5,18.4,30.7,36.9,30.7c18.4,0,36.7-10.2,36.7-30.7V49.7C351.5,29.2,333,19,314.6,19z M329,80.3c0,6.4-7.2,9.7-14.3,9.7 c-7.2,0-14.4-3.2-14.4-9.7V49.7c0-6.6,7-10.1,14-10.1c7.3,0,14.7,3.2,14.7,10.1V80.3z M431.8,49.7c-0.5-21-14.7-29.4-33-29.4h-35.5 v89.5h22.7V81.3h4l20.6,28.4h28L414.4,79C425.2,75.6,431.8,66.3,431.8,49.7z M399.2,61.8h-13.2V41.4h13.2 C413.4,41.4,413.4,61.8,399.2,61.8z"/></svg>
</a>
</div>
<div class="discord-dialog__close-button" onclick="document.querySelector('.discord-dialog').className = 'discord-dialog'">
<svg viewBox="0 0 24 24">
<path fill="#000000" d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" />
</svg>
</div>
<div class="discord-dialog__container">
<img src="https://hop-on-discord.netlify.com/icon.jpg" class="discord-dialog__guild-icon">
<div class="discord-dialog__guild">You're invited to join our Discord server</div>
Join our Discord server! If you haven't used Discord before: it's free, secure, and works on both your desktop and phone.
</div>
<div class="discord-dialog__footer">
<a href="https://discordapp.com/invite/0sg9HNylRzK4SnCr" class="discord-dialog__btn">Join the server now</a>
<a href="https://hop-on-discord.netlify.com/#what" class="discord-dialog__explainer">What is this?</a>
</div>
</div>
<!-- END -->
</body>
</html>