181 lines
No EOL
12 KiB
HTML
181 lines
No EOL
12 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="be"></html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>FluffyChat Official Website | Home</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="/assets/favicon.png">
|
|
<link rel="preload" href="/assets/tailwind.css" as="style" onload="this.rel='stylesheet'">
|
|
<noscript><link rel="stylesheet" href="/assets/tailwind.css"></noscript>
|
|
</head>
|
|
<body
|
|
class="flex flex-col items-center min-h-screen w-full bg-white dark:bg-slate-800"
|
|
style="font-family: 'Zen Kurenaido', sans-serif;">
|
|
<!--Header-->
|
|
<div class="w-full lg:h-12 min-h-12 py-4 lg:py-0 mb-8 border-b border-gray-200 dark:border-gray-700">
|
|
<nav class="flex flex-wrap h-full justify-center items-center space-x-6 w-full max-w-4xl m-auto">
|
|
<a href="/be/" class="underline text-lg">Home</a>
|
|
<a href="/be/faq" class=" text-lg">FAQ</a>
|
|
<a href="/be/changelog" class=" text-lg">
|
|
Changelog</a>
|
|
<a href="https://ko-fi.com/krille/posts" target="_blank" class="text-lg">Blog
|
|
</a>
|
|
<div class="lg:flex-grow"></div>
|
|
<a href='https://ko-fi.com/C1C86VN53' class="hover:scale-110 transition-transform" target='_blank'>
|
|
<div class="rounded-xl bg-slate-900 dark:bg-slate-50 p-2 flex flex-row spacing-4"><img src="/assets/ko-fi.png" class="h-5 mr-2"/>
|
|
<span class="text-white dark:text-black text-xs flex items-center mr-2">Support me on Ko-Fi</span>
|
|
</div>
|
|
</a>
|
|
<a href="https://troet.cafe/@krille" rel="me" class="m-2 hover:scale-110 transition-transform "><img src="/assets/mastodon.svg" class="h-7"/>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<img src="/assets/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>
|
|
<div class="flex flex-wrap justify-center mb-16 w-full px-8 gap-4">
|
|
<img
|
|
src="/assets/screenshots/mobile.png"
|
|
alt="Mobile screenshot"
|
|
class="h-96 w-auto object-contain rounded-xl border border-gray-300 shadow-xl"/>
|
|
<img
|
|
src="/assets/screenshots/desktop.png"
|
|
alt="Desktop screenshot"
|
|
class="h-96 w-auto hidden md:inline-block object-contain rounded-xl border border-gray-300 shadow-xl"/>
|
|
</div>
|
|
<div class="max-w-lg mb-16 flex justify-center flex-wrap">
|
|
<a href="https://apps.apple.com/app/fluffychat/id1551469600"><img src="/assets/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="/assets/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="/assets/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="/assets/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="/assets/snap-store-badge.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="/assets/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 features">
|
|
<div class="flex flex-col justify-center items-center p-8">
|
|
<img alt="Animated dancing woman" loading="lazy" src="/assets/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="/assets/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="/assets/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="/assets/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">server</a> you want to use or even <a href="https://matrix.org/ecosystem/servers/">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="/assets/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">Unified Push</a>.</p>
|
|
</div>
|
|
<div class="flex flex-col justify-center items-center p-8">
|
|
<img alt="Animated rocket" loading="lazy" src="/assets/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="/assets/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="/assets/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="/assets/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">Element</a>, <a href="https://nheko-reborn.github.io/">Nheko</a>, <a href="https://cinny.in">Cinny</a> or <a href="https://apps.kde.org/de/neochat/">NeoChat</a>.</p>
|
|
</div>
|
|
</div>
|
|
<!--Footer-->
|
|
<div class="w-full flex justify-center border-t border-gray-200 dark:border-gray-700">
|
|
<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 underline hover:text-purple-800 text-sm" href="/be/impressum">
|
|
Imprint</a>
|
|
-
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/be/privacy">
|
|
Privacy policy</a>
|
|
-
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/be/tos">
|
|
Terms of service</a>
|
|
-
|
|
<a
|
|
class="text-slate-700 dark:text-slate-200 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 underline hover:text-purple-800 text-sm"
|
|
href="https://liberapay.com/KrilleChritzelius">Liberapay</a>
|
|
-
|
|
<a
|
|
class="text-slate-700 dark:text-slate-200 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 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 underline hover:text-purple-800 text-sm"
|
|
href="https://krille-chan.github.io">Created by Krille-chan</a>
|
|
<br/>
|
|
<span class="text-slate-700 dark:text-slate-200 text-sm">Language:
|
|
</span>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/be/">Беларуская</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/de/">Deutsch</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/en/">English</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/et/">eesti keel</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/fi/"></a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/fy/">Frysk</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/gl/">Galego</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/lv/">Latviešu</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/nb_NO/">Norsk</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/nl/">Nederlands</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/ta/">ஆங்கிலம்</a>
|
|
|
|
<a class="text-slate-700 dark:text-slate-200 underline hover:text-purple-800 text-sm" href="/uz/">O'zbekcha</a>
|
|
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html> |