233 lines
11 KiB
HTML
233 lines
11 KiB
HTML
<!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.0">
|
|
|
|
<link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="css/index.css">
|
|
|
|
<link rel="icon" type="image/png" sizes="48x48" href="assets/favicon.png">
|
|
|
|
<title>Extera Project</title>
|
|
<meta name="name" content="Extera">
|
|
<meta name="author" content="OfficialDakari">
|
|
<meta name="description" content="A Matrix client with new cool features based on Cinny.">
|
|
<meta name="keywords" content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element, extera">
|
|
|
|
<meta property="og:title" content="Extera">
|
|
<meta property="og:url" content="https://extera.xyz">
|
|
<meta property="og:image" content="https://extera.xyz/assets/favicon-48x48.png">
|
|
<meta property="og:description" content="A Matrix client with new cool features based on Cinny.">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="root">
|
|
<nav class="nav">
|
|
<div class="nav__base">
|
|
<div class="branding-container">
|
|
<img src="assets/extera.svg" alt="Cinny logo">
|
|
<div>
|
|
<h2 class="text-h2">Extera</h2>
|
|
<p class="text-s1">A new Matrix client</p>
|
|
</div>
|
|
</div>
|
|
<div class="nav__options">
|
|
<a class="btn-primary" href="https://app.extera.xyz">
|
|
<span class="text-b1">Try it</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<section class="hero">
|
|
<div class="base-grid-12">
|
|
<div class="hero__info">
|
|
<div class="hero__intro">
|
|
<h1 class="text-h1">Imagine a <a href="https://matrix.org" target="_blank">Matrix</a> client...
|
|
</h1>
|
|
<p class="text-b1">Where you can enjoy conversation in Material-designed UI via protocol
|
|
protected by power of the open-source.</p>
|
|
<div class="hero__intro__btns">
|
|
<a class="btn-primary btn-large"
|
|
href="https://cloud.officialdakari.ru/index.php/apps/forms/s/arBS3eL4A8oDcHSnz7dgNQkf">
|
|
<span class="text-s1">Register</span>
|
|
</a>
|
|
<a class="btn-secondary btn-large" href="https://app.extera.xyz">
|
|
<span class="text-s1">Open Extera</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero__preview">
|
|
<div class="hero__preview__container">
|
|
<img id="previewImage" src="assets/preview-light.png" alt="Cinny preview image">
|
|
<p class="text-b3">Preview from Firefox (desktop)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero__info">
|
|
<div class="themes">
|
|
<h4 class="text-s1">Themes</h4>
|
|
<p id="themeStatus" class="text-b3">Selected: light</p>
|
|
<div class="themes__btn">
|
|
<button onclick="changeTheme(this)" themeName=""
|
|
class="theme-btn theme-btn--light theme-btn--active" />
|
|
<button onclick="changeTheme(this)" themeName="dark-theme"
|
|
class="theme-btn theme-btn--dark" />
|
|
<button onclick="changeTheme(this)" themeName="monet-dark-theme"
|
|
class="theme-btn theme-btn--monet-dark" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features" class="features">
|
|
<div class="base-grid-12">
|
|
<div class="features__info">
|
|
<h1 class="text-h1">Features</h1>
|
|
<p class="text-b1">Below is the list of features we added.</p>
|
|
</div>
|
|
</div>
|
|
<div class="features__list">
|
|
<div class="scrollbar scrollbar__h scrollbar--auto-hide">
|
|
<div class="feature__cards">
|
|
|
|
<div class="feat-card">
|
|
<div class="feat-card__info">
|
|
<h2 class="text-h2">Captions</h2>
|
|
<p class="text-b1">Send captions with attachments in one message. Your group chat won't
|
|
think that you are schizophrenic when a caption is sent, but the meme is
|
|
still uploading.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feat-card">
|
|
<div class="feat-card__info">
|
|
<h2 class="text-h2">Presence status</h2>
|
|
<p class="text-b1">Have full control over your presence status: from online status to
|
|
ghost mode.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feat-card">
|
|
<div class="feat-card__info">
|
|
<h2 class="text-h2">Rich profile</h2>
|
|
<p class="text-b1">If modifying your display name and profile picture is not enough for
|
|
you, you can also set profile banner.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feat-card">
|
|
<div class="feat-card__info">
|
|
<h2 class="text-h2">Custom themes</h2>
|
|
<p class="text-b1">Easily modify Extera's look by adding custom CSS themes. You can get
|
|
some themes <a href="https://matrix.to/#/#themes:extera.xyz">here</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="about">
|
|
<div class="base-grid-12">
|
|
<div class="about__info">
|
|
<img src="assets/extera.svg" alt="Extera logo" />
|
|
<h1 class="text-h1">Extera is open-source</h1>
|
|
<p class="text-b1">Extera uses <a href="https://matrix.org" target="_blank">Matrix</a> as it's
|
|
communication protocol
|
|
— An open
|
|
network for secure, decentralized
|
|
communication. We have also made the source code of Extera open to everyone, so you can enhance,
|
|
modify and
|
|
inspect it.</p>
|
|
|
|
<div class="about__info__btns">
|
|
<a class="btn-surface btn-large" href="https://github.com/OfficialDakari/Extera"
|
|
target="_blank">
|
|
<span class="text-b1">Source code</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="sponsor" class="support">
|
|
<div class="base-grid-12">
|
|
<div class="support__info">
|
|
<h1 class="text-h1">Financial contribution</h1>
|
|
<p class="text-b1">Support this project by becoming a financial contributor.</p>
|
|
<a class="btn-surface btn-large" href="https://officialdakari.ru/sponsor/" target="_blank">
|
|
<span class="text-b1">Go to sponsor page</span>
|
|
</a>
|
|
</div>
|
|
<div class="support__list">
|
|
<p class="support__label text-b2">Organizations</p>
|
|
<div id="supportOrg" class="support__container"></div>
|
|
<p class="support__label text-b2">Individuals</p>
|
|
<div id="supportInd" class="support__container">
|
|
<ul>
|
|
<li class="text-b1">konrad (@konrad:re128.org)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="footer">
|
|
<div class="base-grid-12">
|
|
<div class="footer__branding">
|
|
<div class="branding-container">
|
|
<img src="assets/extera.svg" alt="Cinny logo">
|
|
<div>
|
|
<h2 class="text-h2">Extera</h2>
|
|
<p class="text-s1">A new cool Matrix client</p>
|
|
</div>
|
|
</div>
|
|
<div class="footer__branding__options">
|
|
<a class="btn-primary" href="https://app.extera.xyz">
|
|
<span class="text-b1">Get Started</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px;">
|
|
<div class="footer__menu">
|
|
<div class="footer__menu-container">
|
|
<h4 class="text-b3">Menu</h4>
|
|
<a href="/" class="text-b2">Home</a>
|
|
<a href="#features" class="text-b2">Features</a>
|
|
<a href="#about" class="text-b2">About</a>
|
|
<a href="#sponsor" class="text-b2">Sponsor</a>
|
|
</div>
|
|
<div class="footer__menu-container">
|
|
<h4 class="text-b3">Community</h4>
|
|
<a class="text-b2" href="https://matrix.to/#/#extera:extera.xyz" target="_blank">Matrix
|
|
(#extera:extera.xyz)</a>
|
|
<a class="text-b2" href="https://matrix.to/#/#themes:extera.xyz" target="_blank">CSS
|
|
(#themes:extera.xyz)</a>
|
|
<!-- <a class="text-b2" rel="me" href="https://fosstodon.org/@cinnyapp" target="_blank">Mastodon</a> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="footer__creator text-b3">Copyright © 2024 <a href="https://officialdakari.ru"
|
|
target="_blank">OfficialDakari</a> • <a href="https://github.com/cinnyapp/cinny-site"
|
|
target="_blank">Based
|
|
on Cinny's website</a> • <a href="https://git.extera.xyz/OfficialDakari/ExteraWebsite">Source
|
|
code</a></p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
|
|
</html> |