forked from krille-chan/fluffychat
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
179 lines (159 loc) · 9.6 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
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>FluffyChat Official Website</title>
<meta name="identifier-url" content="https://fluffychat.im" />
<meta name="title" content="FluffyChat Official Website" />
<meta name="description" content="The cutest messenger in the Matrix network" />
<meta name="abstract" content="FluffyChat is the cutest messenger in the Matrix network" />
<meta name="keywords" content="FluffyChat, Matrix, Flutter, App" />
<meta name="author" content="Krille Fear" />
<meta name="revisit-after" content="15" />
<meta name="language" content="EN" />
<meta name="robots" content="All" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.png">
<link href="tailwind.css" rel="stylesheet">
</head>
<body
class="flex flex-col items-center min-h-screen w-full bg-gradient-to-t from-purple-200 to-blue-50 dark:from-purple-900 dark:to-slate-900"
style="font-family: 'Zen Kurenaido', sans-serif;">
<div
class="w-full md:h-12 min-h-12 bg-white dark:bg-gray-800 bg-opacity-50 border-b dark:border-gray-600 px-4 py-4 md:py-0 mb-8">
<nav class="flex flex-wrap h-full justify-center items-center space-x-6 w-full max-w-4xl m-auto">
<a href="https://ko-fi.com/krille/posts"
class="text-lg dark:text-white hover:text-purple-800 dark:hover:text-purple-400">News</a>
<a href="https://github.com/krille-chan/fluffychat/blob/main/CHANGELOG.md"
class="text-lg dark:text-white hover:text-purple-800 dark:hover:text-purple-400">Changelog</a>
<a href="https://github.com/krille-chan/fluffychat/wiki"
class="text-lg dark:text-white hover:text-purple-800 dark:hover:text-purple-400">Wiki</a>
<a href="https://github.com/krille-chan/fluffychat"
class="text-lg dark:text-white hover:text-purple-800 dark:hover:text-purple-400">Code</a>
<div class="md:flex-grow"> </div>
<a href='https://ko-fi.com/C1C86VN53' target='_blank' class="m-2 hover:scale-110 transition-transform "><img
class="h-7" src='https://storage.ko-fi.com/cdn/kofi2.png?v=3' border='0'
alt='Buy Me a Coffee at ko-fi.com' /></a>
<a href="https://troet.cafe/@krille" rel="me" class="m-2 hover:scale-110 transition-transform "><img
src="mastodon.svg" class="h-7" /></a>
</nav>
</div>
<img src="info-logo.png" alt="FluffyChat Logo" class="h-56" />
<p class="text-xl dark:text-gray-200 text-gray-700 mb-8">The cutest messenger in [<a href="https://matrix.org"
target="_blank" class="text-xl underline hover:text-purple-800 dark:hover:text-purple-400">matrix</a>]
</p>
<img src="screenshots/screenshots.png" alt="Mobile and desktop screenshots" class="max-w-xl mb-16 w-full px-8" />
<div class="max-w-lg mb-16 flex justify-center flex-wrap">
<a href="https://apps.apple.com/app/fluffychat/id1551469600"><img src="appstore-badge.png"
class="w-36 pr-2 mb-2 inline hover:scale-105 transition-transform"></a>
<a href="https://play.google.com/store/apps/details?id=chat.fluffy.fluffychat"><img src="google-play-badge.png"
class="w-36 pr-2 mb-2 hover:scale-105 transition-transform inline">
</a><a href="https://f-droid.org/packages/chat.fluffy.fluffychat/"><img src="fdroid_button.png"
class="w-36 pr-2 mb-2 hover:scale-105 transition-transform inline">
</a>
<a href="https://fluffychat.im/web">
<img src="browser-badge.png" class="w-36 pr-2 mb-2 hover:scale-105 transition-transform inline"></a>
<a href="https://snapcraft.io/fluffychat"><img src="snap-store-black.svg"
class="w-36 pr-2 mb-2 hover:scale-105 transition-transform inline"></a>
<a href="https://flathub.org/apps/details/im.fluffychat.Fluffychat"><img src="flathub-badge-en.png"
class="w-36 pr-2 mb-2 hover:scale-105 transition-transform inline"></a>
</div>
<div class="grid md:grid-cols-3 md:grid-rows-3 max-w-4xl justify-center w-full mb-16">
<div class="flex flex-col justify-center items-center p-8">
<img alt="Animated dancing woman" loading="lazy" src="feature1.gif" class="h-32" />
<h1 class="text-purple-500 dark:text-purple-300 text-2xl">Easy to use</h1>
<p class="text-center dark:text-white">FluffyChat is designed to be as easy to use as possible. No one
should be left behind.</p>
</div>
<div class="flex flex-col justify-center items-center p-8">
<img alt="Animated pencil" loading="lazy" src="feature2.gif" class="h-32" />
<h1 class="text-purple-500 dark:text-purple-300 text-2xl">Material You</h1>
<p class="text-center dark:text-white">The well polished design is based on Material You and works great on
all platforms.</p>
</div>
<div class="flex flex-col justify-center items-center p-8">
<img alt="Animated mechanical arm" loading="lazy" src="feature3.gif" class="h-32" />
<h1 class="text-purple-500 dark:text-purple-300 text-2xl">Secure</h1>
<p class="text-center dark:text-white">With end-to-end encryption, cross-signing and encrypted backups,
FluffyChat is one of the most secure messenger out there.</p>
</div>
<div class="flex flex-col justify-center items-center p-8">
<img alt="Animated planet earth" loading="lazy" src="feature4.gif" class="h-32" />
<h1 class="text-purple-500 dark:text-purple-300 text-2xl">Decentral</h1>
<p class="text-center dark:text-white">You can choose the <a href="https://joinmatrix.org"
class="underline hover:text-purple-800 dark:hover:text-purple-400">server</a> you want to use or
even <a href="https://matrix.org/ecosystem/servers/"
class="underline hover:text-purple-800 dark:hover:text-purple-400">self-host</a> your own!</p>
</div>
<div class="flex flex-col justify-center items-center p-8">
<img alt="Animated bell" loading="lazy" src="feature5.gif" class="h-32" />
<h1 class="text-purple-500 dark:text-purple-300 text-2xl">Push Notifications</h1>
<p class="text-center dark:text-white">You can choose between Firebase Cloud Messaging or the more privacy
focused <a href="https://unifiedpush.org"
class="underline hover:text-purple-800 dark:hover:text-purple-400">Unified Push</a>.</p>
</div>
<div class="flex flex-col justify-center items-center p-8">
<img alt="Animated rocket" loading="lazy" src="feature6.gif" class="h-32" />
<h1 class="text-purple-500 dark:text-purple-300 text-2xl">Spaces</h1>
<p class="text-center dark:text-white">With spaces you can join or create a community which organizes chats
and users. Using sub-spaces you can even nest your communities.</p>
</div>
<div class="flex flex-col justify-center items-center p-8">
<img alt="Animated glass sphere" loading="lazy" src="feature7.gif" class="h-32" />
<h1 class="text-purple-500 dark:text-purple-300 text-2xl">Video calls</h1>
<p class="text-center dark:text-white">Still an experimental feature but you can already try out video and
audio calls, compatible with other [matrix] clients.</p>
</div>
<div class="flex flex-col justify-center items-center p-8">
<img alt="Animated chick" loading="lazy" src="feature8.gif" class="h-32" />
<h1 class="text-purple-500 dark:text-purple-300 text-2xl">Stickers</h1>
<p class="text-center dark:text-white">Create your own sticker sets and share them with your friends. You
can even use them as inline emojis.</p>
</div>
<div class="flex flex-col justify-center items-center p-8">
<img alt="Animated whoa emoji" loading="lazy" src="feature9.gif" class="h-32" />
<h1 class="text-purple-500 dark:text-purple-300 text-2xl">Compatible</h1>
<p class="text-center dark:text-white">FluffyChat is compatible with any other [matrix] client like <a
href="https://element.io"
class="underline hover:text-purple-800 dark:hover:text-purple-400">Element</a>,
<a href="https://nheko-reborn.github.io/"
class="underline hover:text-purple-800 dark:hover:text-purple-400">Nheko</a>, <a
href="https://cinny.in" class="underline hover:text-purple-800 dark:hover:text-purple-400">Cinny</a>
or <a href="https://apps.kde.org/de/neochat/"
class="underline hover:text-purple-800 dark:hover:text-purple-400">NeoChat</a>.
</p>
</div>
</div>
<!--Footer-->
<div class="w-full bg-white dark:bg-gray-800 bg-opacity-50 border-t dark:border-gray-600 flex justify-center">
<footer class="w-full text-center max-w-4xl p-4 text-slate-700 dark:text-slate-200">
<a class="text-slate-700 dark:text-slate-200 no-underline hover:text-purple-800 text-sm"
href="https://liberapay.com/KrilleChritzelius">Liberapay</a>
-
<a class="text-slate-700 dark:text-slate-200 no-underline hover:text-purple-800 text-sm"
href="https://github.com/krille-chan/fluffychat">Source
code</a>
-
<a class="text-slate-700 dark:text-slate-200 no-underline hover:text-purple-800 text-sm"
href="https://github.com/krille-chan/fluffychat/blob/main/PRIVACY.md">Privacy</a>
-
<a class="text-slate-700 dark:text-slate-200 no-underline hover:text-purple-800 text-sm"
href="https://github.com/krille-chan/fluffychat/blob/main/CHANGELOG.md">Changelog</a>
-
<a class="text-slate-700 dark:text-slate-200 no-underline hover:text-purple-800 text-sm"
href="https://hosted.weblate.org/projects/fluffychat/">Translations</a>
-
<a class="text-slate-700 dark:text-slate-200 no-underline hover:text-purple-800 text-sm"
href="https://googlefonts.github.io/noto-emoji-animation/">Noto Animated Emojis</a>
-
<a class="text-slate-700 dark:text-slate-200 no-underline hover:text-purple-800 text-sm"
href="https://keys.mailvelope.com/pks/lookup?op=get&search=christian-pauly%40posteo.de">Contact</a>
-
<a class="text-slate-700 dark:text-slate-200 no-underline hover:text-purple-800 text-sm"
href="https://krille-chan.github.io">Created
by Krille-chan</a>
</footer>
</div>
</body>
</html>