fluffychat/docs/index.html

<!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-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="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>