Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
im-changing.ru
/
converse.js
spogulis no https://github.com/conversejs/converse.js.git
2
0
Atdalīts 0
Faili Problēmas 0 Vikivietne
Pārlūkot izejas kodu

Update website

JC Brand 3 nedēļas atpakaļ
vecāks
8deaa73c16
revīzija
a2beacc3d2
3 mainītis faili ar 372 papildinājumiem un 447 dzēšanām
Apvienotais skats Rādīt salīdzināšanas statistiku
  1. 178 160
      index.html
  2. 155 263
      src/shared/styles/website.scss
  3. 39 24
      src/website.js

+ 178 - 160
index.html
Parādīt failu 

@@ -4,18 +4,27 @@
 
     <title>Converse</title>
 
     <title>Converse</title>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <meta name="description" content="Converse XMPP/Jabber Chat"/>
 
+    <meta name="description" content="Converse.js - Open source, web-based XMPP chat client. Self-hosted, customizable web chat with end-to-end encryption."/>
 
     <meta name="author" content="JC Brand" />
 
     <meta name="author" content="JC Brand" />
 
     <meta name="keywords" content="xmpp chat webchat converse.js Converse" />
 
     <meta name="keywords" content="xmpp chat webchat converse.js Converse" />
 
-
 
-    <link rel="shortcut icon" type="image/ico" href="/dist/favicon.ico"/>
 
+    <link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
 
     <link type="text/css" rel="stylesheet" media="screen" href="/dist/converse.min.css" />
 
     <link type="text/css" rel="stylesheet" media="screen" href="/dist/converse.min.css" />
 
     <link type="text/css" rel="stylesheet" media="screen" href="/dist/website.min.css" />
 
     <link type="text/css" rel="stylesheet" media="screen" href="/dist/website.min.css" />
 
-    <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
 
-    <script type="text/javascript" src="analytics.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 
+    <script src="src/website.js"></script>
 
 </head>
 
 </head>
 
+<script type="application/ld+json">
 
+{
 
+  "@context": "https://schema.org",
 
+  "@type": "SoftwareApplication",
 
+  "name": "Converse.js",
 
+  "description": "Open source XMPP chat client for the web",
 
+  "url": "https://conversejs.org",
 
+  "applicationCategory": "CommunicationApplication",
 
+  "operatingSystem": "Web Browser",
 
+}
 
+</script>
 
 
 
 <body id="page-top" data-spy="scroll" class="converse-website">
 
 <body id="page-top" data-spy="scroll" class="converse-website">
 
 
 
@@ -26,39 +35,33 @@
 
         </button>
 
         </button>
 
         <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
 
         <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
 
             <span class="page-scroll">
 
             <span class="page-scroll">
 
-                <a class="navbar-brand" href="#intro"><span class="converse-brand-heading">Converse</span></a>
 
+                <a class="navbar-brand" href="#intro"><span class="converse-brand-heading">Home</span></a>
 
             </span>
 
             </span>
 
             <ul class="navbar-nav mt-2 mt-lg-0">
 
             <ul class="navbar-nav mt-2 mt-lg-0">
 
                 <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
 
                 <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
 
                 <li class="hidden">
 
                 <li class="hidden">
 
-                        <a class="nav-link" href="#page-top"></a>
 
-                </li>
 
-                <li class="nav-item page-scroll">
 
-                        <a class="nav-link" href="#about">About</a>
 
-                </li>
 
-                <li class="nav-item page-scroll">
 
-                        <a class="nav-link" href="#features">Features</a>
 
+                    <a class="nav-link" href="#page-top"></a>
 
                 </li>
 
                 </li>
 
                 <li class="nav-item page-scroll">
 
                 <li class="nav-item page-scroll">
 
-                        <a class="nav-link" href="#contact">Contact</a>
 
+                    <a class="nav-link" href="#about">About</a>
 
                 </li>
 
                 </li>
 
                 <li class="nav-item page-scroll">
 
                 <li class="nav-item page-scroll">
 
-                        <a class="nav-link" href="#sponsors">Sponsor</a>
 
+                    <a class="nav-link" href="#contact">Contact</a>
 
                 </li>
 
                 </li>
 
                 <li class="nav-item">
 
                 <li class="nav-item">
 
-                        <a class="nav-link" href="https://github.com/conversejs/converse.js" target="_blank" rel="noopener">Github&nbsp;<i class="fa fa-external-link-alt"></i></a>
 
+                    <a class="nav-link" href="https://github.com/conversejs/converse.js" target="_blank" rel="noopener">Github&nbsp;<i class="fa fa-external-link-alt"></i></a>
 
                 </li>
 
                 </li>
 
                 <li class="nav-item">
 
                 <li class="nav-item">
 
-                        <a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
 
+                    <a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
 
                 </li>
 
                 </li>
 
                 <li class="nav-item">
 
                 <li class="nav-item">
 
-                        <a class="nav-link" href="https://github.com/conversejs/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
 
+                    <a class="nav-link" href="https://github.com/conversejs/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
 
         </div>
 
         </div>
 
     </nav>
 
     </nav>
 
 
 
-    <section id="intro" class="intro" class="container">
 
+    <section id="intro" class="intro text-center" class="container">
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-md-12 col-md-offset-2">
 
             <div class="col-md-12 col-md-offset-2">
 
                 <h1 class="brand-heading fade-in">
 
                 <h1 class="brand-heading fade-in">
 
@@ -87,166 +90,181 @@
 
                 </span>
 
                 </span>
 
                 </h1>
 
                 </h1>
 
 
 
-                <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
 
-                <p class="intro-text">Try the <a href="/fullscreen.html">fullpage</a> and <a href="https://github.com/conversejs/converse-desktop/releases" target="_blank" rel="noopener">desktop</a> versions<p>
 
-                <p style="padding-top: 1.5em">
 
-                <a href="https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org"
 
-                   target="_blank" rel="noopener"><img src="https://conference.conversejs.org/muc_badge/discuss@conference.conversejs.org"/></a>
 
-                </p>
 
+                <p class="intro-text">A powerful, open-source and web-based <a href="https://xmpp.org" target="_blank" rel="noopener">XMPP</a> chat client.</p>
 
+                <p class="intro-text">Pluggable and customizable with end-to-end encryption, DMs, group chats, and 30+ language support.</p>
 
+
 
                 <div class="page-scroll">
 
                 <div class="page-scroll">
 
-                    <a href="#about" class="btn btn-default btn-lg"><span class="btn-text">Learn More</span></a>
 
+                    <a href="#about" class="btn btn-primary btn-lg rounded mt-4 mb-4">Take me to the app</a>
 
+                    <p class="intro-text">Or download the <a href="https://github.com/conversejs/converse-desktop/releases" target="_blank" rel="noopener">desktop</a> version.<p>
 
+                </div>
 
+
 
+                <div id="screenshotCarousel" class="carousel slide mx-auto pt-5" style="max-width: 1200px">
 
+                    <div class="carousel-indicators">
 
+                        <button type="button" data-bs-target="#screenshotCarousel" data-bs-slide-to="0" class="active"></button>
 
+                        <button type="button" data-bs-target="#screenshotCarousel" data-bs-slide-to="1"></button>
 
+                        <button type="button" data-bs-target="#screenshotCarousel" data-bs-slide-to="2"></button>
 
+                        <button type="button" data-bs-target="#screenshotCarousel" data-bs-slide-to="3"></button>
 
+                        <button type="button" data-bs-target="#screenshotCarousel" data-bs-slide-to="4"></button>
 
+                    </div>
 
+                    <div class="carousel-inner">
 
+                        <div class="carousel-item active">
 
+                            <img src="/media/screenshots/converse-enter-muc.png" class="rounded shadow d-block w-100" alt="Converse fullpage chat">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                            <img src="/media/screenshots/converse-overlayed.png" class="rounded shadow d-block w-100" alt="Converse overlayed chat">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                            <img src="/media/screenshots/converse-nordic.png" class="rounded shadow d-block w-100" alt="Converses Nordic Theme">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                            <img src="/media/screenshots/converse-prosody.png" class="rounded shadow d-block w-100" alt="Converse Prosody chat">
 
+                        </div>
 
+                    </div>
 
+                    <button class="carousel-control-prev" type="button" data-bs-target="#screenshotCarousel" data-bs-slide="prev">
 
+                        <span class="carousel-control-prev-icon"></span>
 
+                        <span class="visually-hidden">Previous</span>
 
+                    </button>
 
+                    <button class="carousel-control-next" type="button" data-bs-target="#screenshotCarousel" data-bs-slide="next">
 
+                        <span class="carousel-control-next-icon"></span>
 
+                        <span class="visually-hidden">Next</span>
 
+                    </button>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
 
 
 
-    <section id="about" class="container content-section text-center">
 
-        <div class="row">
 
-            <div class="col-lg-12 col-lg-offset-2">
 
-                <h2>What is Converse?</h2>
 
-                <p>Converse is a free and open-source XMPP chat client that runs in a web browser.</p>
 
+    <section id="about" class="content-section">
 
+        <div class="container mx-auto w-50">
 
+            <div class="row row-cols-1 g-2">
 
+                <div class="col text-center">
 
+                    <div class="h-100 p-3 bg-light rounded-3">
 
+                        <h2>Why Choose Converse?</h2>
 
+                        <p>Converse is the leading open-source XMPP chat solution for developers, communities, organizations and businesses needing feature-rich, secure and customizable messaging.</p>
 
+                        <p>Get a feature-rich chat solution with just a few lines of JavaScript.</p>
 
+                    </div>
 
+                </div>
 
+            </div>
 
 
 
-                <h2>Converse is easy to set up</h2>
 
-                <p>You can use it here, host it yourself, or <a href="/docs/html/index.html">integrate it into your own website</a>.
 
-                   It's possible to connect to any publically accessible <a href="https://xmpp.org" target="_blank" rel="noopener">XMPP/Jabber</a> server.
 
-                   Take a look at the <a href="/demo">demo page</a> for other examples of how Converse can be configured and used.</a>
 
-                </p>
 
+            <div class="row row-cols-1 row-cols-lg-2 g-2">
 
+                <div class="col">
 
+                    <div class="h-100 p-3 bg-light">
 
+                        <h2>Powerful Features 💪</h2>
 
+                        <ul class="list-group">
 
+                            <li><strong>Flexible Deployment</strong> - Embed as an overlayed chat, an embedded widget or use as a full-page app.</li>
 
+                            <li><strong>Security</strong> - End-to-end encryption and powerful moderator tools.</li>
 
+                            <li><strong>Customizable</strong> - Plugin architecture with many <a href="https://github.com/conversejs/community-plugins/" target="_blank" rel="noopener">extensions</a> available.</li>
 
+                            <li><strong>Compatible</strong> - Seamless integration with any XMPP server.</li>
 
+                            <li>Chat statuses (online, busy, away, offline)</li>
 
+                            <li>Desktop notifications</li>
 
+                            <li>URL Previews (requires server support, for example <a href="https://modules.prosody.im/mod_ogp.html" target="_blank" rel="noopener">mod_ogp</a></li>
 
+                            <li>Multi-user chatrooms (<a href="https://xmpp.org/extensions/xep-0045.html" target="_blank" rel="noopener">XEP-045</a>, <a href="https://xmpp.org/extensions/xep-0402.html" target="_blank" rel="noopener">XEP-402</a>)</li>
 
+                            <li>Invitations to chat rooms (<a href="https://xmpp.org/extensions/xep-0249.html" target="_blank" rel="noopener">XEP 249</a>)</li>
 
+                            <li>vCard support (<a href="https://xmpp.org/extensions/xep-0054.html" target="_blank" rel="noopener">XEP 54</a>)</li>
 
+                            <li>Service discovery (<a href="https://xmpp.org/extensions/xep-0030.html" target="_blank" rel="noopener">XEP 30</a>)</li>
 
+                            <li>In-band registration (<a href="https://xmpp.org/extensions/xep-0077.html" target="_blank" rel="noopener">XEP 77</a>)</li>
 
+                            <li>Typing and chat state notifications (<a href="https://xmpp.org/extensions/xep-0085.html" target="_blank" rel="noopener">XEP 85</a>)</li>
 
+                            <li>File sharing / HTTP File Upload (<a href="https://xmpp.org/extensions/xep-0363.html" target="_blank" rel="noopener">XEP 363</a>)</li>
 
+                            <li>Message archiving (<a href="https://xmpp.org/extensions/xep-0313.html" target="_blank" rel="noopener">XEP 313</a>)</li>
 
+                            <li>Client state indication (<a href="https://xmpp.org/extensions/xep-0352.html" target="_blank" rel="noopener">XEP 352</a>)</li>
 
+                            <li>OMEMO end-to-end encrypted messaging (<a href="https://xmpp.org/extensions/xep-0384.html" target="_blank" rel="noopener">XEP 384</a>)</li>
 
+                            <li>Message Styling (<a href="https://xmpp.org/extensions/xep-0384.html" target="_blank" rel="noopener">XEP 393</a>)</li>
 
+                            <li>Anonymous logins, see the <a href="/demo/anonymous.html" target="_blank" rel="noopener">anonymous login demo</a></li>
 
+                            <li>Message corrections, retractions and moderation</li>
 
+                            <li>Translated into over 30 languages</li>
 
+                        </ul>
 
+                    </div>
 
+                </div>
 
 
 
-                <h3>Need an XMPP/Jabber account?</h3>
 
-                <p>No problem! With Converse you can register an account on any public XMPP server that allows in-band registration,
 
-                   including our own at <span style="color: #89B7CD">conversejs.org</span>.</p>
 
+                <div class="col">
 
+                    <div class="row row-cols-1">
 
+                        <div class="h-100">
 
+                            <h2>Developer Friendly 🔨</h2>
 
+                            <p>Built by developers, for developers
 
+                            <ul class="list-group">
 
+                                <li><strong>No vendor lock-in</strong> - <a href="https://github.com/conversejs/converse.js/blob/master/LICENSE" target="_blank" rel="noopener">MPLv2</a> licensed</li>
 
+                                <li><strong>Plugin architecture</strong> - Enables easy customization</li>
 
+                                <li><strong>Comprehensive <a href="/docs/html/index.html">documentation</a> and <a href="/demo">demos</a></strong></li>
 
+                                <li>Active <strong>community</strong> with 130+ contributors</li>
 
+                            </ul>
 
+                            </p>
 
+                        </div>
 
 
 
-                <h2>Converse is a community</h2>
 
-                <p>Over 130 people have contributed features, bugfixes and translations, and many more have integrated it into their own websites or applications.</p>
 
-                <p>Come and chat with us at <a href="https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org" class="xmpp JSnocheck" title="Converse chat room">discuss@conference.conversejs.org</a>.</p>
 
+                        <div class="h-100">
 
+                            <h2>Integration Ready 🔧</h2>
 
+                            <p>Converse has been integrated into many open source and proprietary applications.</p>
 
+                            <p>A non-exaustive list of open source integrations includes:
 
+                                <ul class="list-group">
 
+                                    <li><a href="https://github.com/JohnXLivingston/peertube-plugin-livechat" target="_blank" rel="noopener">Peertube</a></li>
 
+                                    <li><a href="https://doc.tiki.org/xmpp" target="_blank" rel="noopener">Tiki Wiki CMS Groupware</a></li>
 
+                                    <li><a href="https://elgg.org/plugins/2997196" target="_blank" rel="noopener">Elgg</a></li>
 
+                                    <li><a href="https://github.com/devurandom/roundcube-converse.js-xmpp-plugin" target="_blank" rel="noopener">Roundcube</a></li>
 
+                                    <li><a href="https://github.com/friendica/friendica-addons/tree/master/xmpp/converse" target="_blank" rel="noopener">Friendica</a></li>
 
+                                    <li><a href="https://github.com/keensoft/alfresco-js-chat-share" target="_blank" rel="noopener">Alfresco</a></li>
 
+                                    <li><a href="https://wordpress.org/plugins/conversejs/" target="_blank" rel="noopener">Wordpress</a></li>
 
+                                    <li><a href="https://open-store.io/app/conversejs.luigi311" target="_blank" rel="noopener">ConverseJS for Ubuntu-Touch</a></li>
 
+                                </ul>
 
+                            </p>
 
+                            <p>For ease of use, Converse is available as a plugin or add-on module for the
 
+                                <a href="https://www.igniterealtime.org/projects/openfire/plugins.jsp" target="_blank" rel="noopener">Openfire</a>
 
+                                <a href="https://modules.prosody.im/mod_conversejs.html" target="_blank" rel="noopener">Prosody</a>
 
+                                <a href="https://docs.ejabberd.im/admin/configuration/modules/#mod-conversejs" target="_blank" rel="noopener">Ejabberd</a>
 
+                                XMPP servers.
 
+                            </p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
             </div>
 
             </div>
 
-        </div>
 
-    </section>
 
-
 
-    <section class="features-section content-section" id="features">
 
-        <div class="container">
 
             <div class="row">
 
             <div class="row">
 
-                <div class="col-lg-6">
 
-                    <header>
 
-                        <h2>Integration</h2>
 
-                    </header>
 
-                    <ul class="integration">
 
-                        <!-- xmpp server -->
 
-                        <li style="list-style: none">XMPP Servers</li>
 
-                        <li><a href="https://www.igniterealtime.org/projects/openfire/plugins.jsp" target="_blank" rel="noopener">Openfire</a></li>
 
-                        <li><a href="https://modules.prosody.im/mod_conversejs.html" target="_blank" rel="noopener">Prosody</a></li>
 
-                        <li><a href="https://docs.ejabberd.im/admin/configuration/modules/#mod-conversejs" target="_blank" rel="noopener">Ejabberd</a></li>
 
-                    </ul>
 
-                    <ul class="integration">
 
-                        <li style="list-style: none">Frameworks</li>
 
-                        <li><a href="https://github.com/mikemarsian/conversejs-rails" target="_blank" rel="noopener">Ruby on Rails</a></li>
 
-                        <li>Django: <a href="https://pypi.python.org/pypi/django-conversejs" target="_blank" rel="noopener">option 1</a>,&nbsp;<a href="https://github.com/fpytloun/django-xmpp" target="_blank" rel="noopener">option 2</a></li>
 
-                    </ul>
 
-                    <ul class="integration">
 
-                        <li style="list-style: none">Plugins</li>
 
-                        <li><a href="https://doc.tiki.org/xmpp" target="_blank" rel="noopener">Tiki Wiki CMS Groupware</a></li>
 
-                        <li><a href="https://elgg.org/plugins/2997196" target="_blank" rel="noopener">Elgg</a></li>
 
-                        <li><a href="https://github.com/collective/collective.converse" target="_blank" rel="noopener">Plone</a></li>
 
-                        <li><a href="https://github.com/devurandom/roundcube-converse.js-xmpp-plugin" target="_blank" rel="noopener">Roundcube</a></li>
 
-                        <li><a href="https://github.com/friendica/friendica-addons/tree/master/xmpp/converse" target="_blank" rel="noopener">Friendica</a></li>
 
-                        <li><a href="https://github.com/jcbrand/patterns.converse" target="_blank" rel="noopener">Patternslib</a></li>
 
-                        <li><a href="https://github.com/keensoft/alfresco-js-chat-share" target="_blank" rel="noopener">Alfresco</a></li>
 
-                        <li><a href="https://wordpress.org/plugins/conversejs/" target="_blank" rel="noopener">Wordpress</a></li>
 
-                    </ul>
 
-                    <header>
 
-                        <h2>Applications</h2>
 
-                    </header>
 
-                    <ul class="integration">
 
-                        <!-- xmpp stand alone apps -->
 
-                        <li><a href="https://github.com/conversejs/converse-desktop" target="_blank" rel="noopener">Converse Desktop</a></li>
 
-                        <li><a href="https://open-store.io/app/conversejs.luigi311" target="_blank" rel="noopener">ConverseJS for Ubuntu-Touch</a></li>
 
-                    </ul>
 
-                </div>
 
-                <div class="col-lg-6">
 
-                    <header>
 
-                        <h2>Features</h2>
 
-                    </header>
 
-                    <ul class="features">
 
-                        <li>Converse supports many XMPP extensions.<br/>See here for a <a href="https://github.com/conversejs/converse.js#supported-xmpp-extensions" target="_blank" rel="noopener">list of supported XEPs</a>.</li>
 
-                        <li>Available as overlayed chat boxes or as a full-page app. See <a href="https://conversejs.org/fullscreen.html" target="_blank" rel="noopener">here</a> for the fullscreen version. </li>
 
-                        <li>A <a href="https://conversejs.org/docs/html/plugin_development.html" target="_blank" rel="noopener">plugin architecture</a> based on <a href="https://conversejs.github.io/pluggable.js/" target="_blank" rel="noopener">pluggable.js</a></li>
 
-                        <li>Chat statuses (online, busy, away, offline)</li>
 
-                        <li>Desktop notifications</li>
 
-                        <li>URL Previews (requires server support, for example <a href="https://modules.prosody.im/mod_ogp.html" target="_blank" rel="noopener">mod_ogp</a></li>
 
-                        <li>Multi-user chatrooms (<a href="https://xmpp.org/extensions/xep-0045.html" target="_blank" rel="noopener">XEP 45</a>)</li>
 
-                        <li>Chatroom bookmarks (<a href="https://xmpp.org/extensions/xep-0048.html" target="_blank" rel="noopener">XEP 48</a>)</li>
 
-                        <li>Direct invitations to chat rooms (<a href="https://xmpp.org/extensions/xep-0249.html" target="_blank" rel="noopener">XEP 249</a>)</li>
 
-                        <li>vCard support (<a href="https://xmpp.org/extensions/xep-0054.html" target="_blank" rel="noopener">XEP 54</a>)</li>
 
-                        <li>Service discovery (<a href="https://xmpp.org/extensions/xep-0030.html" target="_blank" rel="noopener">XEP 30</a>)</li>
 
-                        <li>In-band registration (<a href="https://xmpp.org/extensions/xep-0077.html" target="_blank" rel="noopener">XEP 77</a>)</li>
 
-                        <li>Typing and chat state notifications (<a href="https://xmpp.org/extensions/xep-0085.html" target="_blank" rel="noopener">XEP 85</a>)</li>
 
-                        <li>File sharing / HTTP File Upload (<a href="https://xmpp.org/extensions/xep-0363.html" target="_blank" rel="noopener">XEP 363</a>)</li>
 
-                        <li>Server-side archiving of messages (<a href="https://xmpp.org/extensions/xep-0313.html" target="_blank" rel="noopener">XEP 313</a>)</li>
 
-                        <li>Hidden messages (aka Spoilers) (<a href="https://xmpp.org/extensions/xep-0382.html" target="_blank" rel="noopener">XEP 382</a>)</li>
 
-                        <li>Client state indication (<a href="https://xmpp.org/extensions/xep-0352.html" target="_blank" rel="noopener">XEP 352</a>)</li>
 
-                        <li>OMEMO encrypted messaging (<a href="https://xmpp.org/extensions/xep-0384.html" target="_blank" rel="noopener">XEP 384</a>)</li>
 
-                        <li>Message Styling (<a href="https://xmpp.org/extensions/xep-0384.html" target="_blank" rel="noopener">XEP 393</a>)</li>
 
-                        <li>Anonymous logins, see the <a href="/demo/anonymous.html" target="_blank" rel="noopener">anonymous login demo</a></li>
 
-                        <li>Message corrections, retractions and moderation</li>
 
-                        <li>Translated into over 30 languages</li>
 
-                    </ul>
 
+                <div class="h-100 p-3 rounded-3 text-center">
 
+                    <h2>Get Started in Minutes 🚀</h2>
 
+                    <p>Use our <a href="/fullscreen.html">web app</a> to connect to any XMPP server. You can log in with your existing XMPP account.</p>
 
+                    <p>No account? No problem! With Converse you can register an account on any public XMPP server that allows in-band registration.
 
+                        Have a look at the <a href="https://compliance.conversations.im/" target="_blank" rel="noopener">Conversations compliance page</a> for public XMPP servers that allow registrations.</p>
 
+                    <p>Come and chat with us at <a href="https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org" class="xmpp JSnocheck" title="Converse chat room">discuss@conference.conversejs.org</a>.</p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
 
 
 
-    <section class="outro content-section text-center" id="contact">
 
-        <div class="container">
 
-            <div class="row">
 
-                <div class="col-lg-12 col-lg-offset-2">
 
-                    <h2>Contact</h2>
 
-                    <ul class="contact">
 
-                        <li>Follow on <a href="https://mastodon.xyz/@jcbrand" target="_blank" rel="noopener">the fediverse</a>
 
-                        <li>Chat via XMPP at <a href="xmpp:jc@opkode.com" class="xmpp JSnocheck" title="XMPP/Jabber">jc@opkode.com</a></li>
 
-                        <li>If you have a programming question, you can ask on <a href="https://stackoverflow.com/questions/tagged/converse.js">Stack Overflow</a>
 
-                        <li>For technical discussions, you can join the Converse XMPP chatroom: <a href="xmpp:discuss@conference.conversejs.org?join" class="xmpp JSnocheck chatroom-name" title="Converse chat room">discuss@conference.conversejs.org</a></li>
 
-                        <li>Please file bugs and feature requests on <a target="_blank" rel="noopener" href="https://github.com/jcbrand/converse.js/issues">Github</a></li>
 
-                    </ul>
 
-                </div>
 
-
 
-                <div class="col-lg-12 col-lg-offset-2" style="margin-top: 4em; text-align: left">
 
-                    <h2 style="text-align: center">Professional support and custom development</h2>
 
-                    <p> We'll put you into contact with developers
 
-                        who can help you to integrate and customize Converse for your needs.
 
-                        <br/> <br/>
 
-                        You can use the following <a href="https://opkode.com/contact.html" target="_blank" rel="noopener">contact form</a>.
 
-                        <br/> <br/>
 
-                        Please don't use the contact form for free support, use the other channels mentioned above.<br/><br/>
 
-                    </p>
 
-                </div>
 
-            </div>
 
+    <section class="outro content-section text-center d-flex flex-column justify-content-between" id="contact">
 
+        <div class="container mx-auto w-50 pb-3">
 
+            <h2>Contact ✉️</h2>
 
+            <ul class="list-group">
 
+                <li class="list-group-item"">Follow on the <a href="https://mastodon.xyz/@jcbrand" target="_blank" rel="noopener">Fediverse</a> or
 
+                    <a href="https://npub.world/npub1purzvv7zzxqymk9q53qmjvlvlrwhy4dsyjt77nxjym9m77e62wtsnlnndd" target="_blank" rel="noopener">Nostr</a>
 
+                <li class="list-group-item"">Chat via XMPP: <a href="xmpp:jc@opkode.com" class="xmpp JSnocheck" title="XMPP/Jabber">jc@opkode.com</a></li>
 
+                <li class="list-group-item"">If you have a programming question, you can ask on <a href="https://stackoverflow.com/questions/tagged/converse.js">Stack Overflow</a>
 
+                <li class="list-group-item"">You can join the Converse XMPP chatroom: <a href="xmpp:discuss@conference.conversejs.org?join" class="xmpp JSnocheck chatroom-name" title="Converse chat room">discuss@conference.conversejs.org</a></li>
 
+                <li class="list-group-item"">Please file bugs and feature requests on <a target="_blank" rel="noopener" href="https://github.com/jcbrand/converse.js/issues">Github</a></li>
 
+            </ul>
 
         </div>
 
         </div>
 
-    </section>
 
 
 
-    <section class="outro content-section text-center" id="sponsors">
 
-        <div class="container">
 
-            <div class="row">
 
-                <div class="col-lg-12 col-lg-offset-2" style="margin-top: 3em">
 
-                    <div class="sponsors">
 
-                        <h2>Converse is supported by:</h2>
 
-                        <ul >
 
-                            <li><a href="https://bairesdev.com/sponsoring-open-source-projects/?utm_source=conversejs" target="_blank" rel="noopener"><img style="width: 13em" src="/media/logos/bairesdev-primary.png" alt="BairesDev"></a></li>
 
-                            <li><a href="https://blokt.com?utm_source=conversejs" target="_blank" rel="noopener"><img style="width: 12em" src="/logo/blokt.png" alt="Blokt Crypto & Privacy"></a></li>
 
-                            <li><a href="https://www.keycdn.com?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/keycdn.svg" alt="KeyCDN"></a></li>
 
-                            <li><a href="https://weblate.org?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 2.6em" src="/logo/weblate-button.svg" alt="Weblate"></a></li>
 
-                        </ul>
 
-                    </div>
 
+        <div class="container mx-auto w-50 pt-3 pb-5">
 
+            <h2 style="text-align: center">Professional support and custom development 👷</h2>
 
+            <p>Converse is brought to you by <a href="https://opkode.com" target="_blank" rel="noopener">Opkode</a>, a boutique software consultancy.</p>
 
+            <p>You can hire us for custom software development, including professional support, customizations or integration of Converse into your site.</p>
 
+            <p>For inquiries please use our <a href="https://opkode.com/contact.html" target="_blank" rel="noopener">contact form</a>.</p>
 
+        </div>
 
 
 
-                    <p class="sponsors-text">Converse is a software commons, available at no cost to you or anyone else.
 
-                       Sponsorships allow us to fund further development and improvements.
 
-                       If you'd like to sponsor this project, please visit
 
-                       <a href="https://github.com/sponsors/jcbrand" target="_blank" rel="noopener">Github</a>,
 
-                       <a href="https://www.patreon.com/jcbrand" target="_blank" rel="noopener">Patreon</a>,
 
-                       <a href="https://liberapay.com/jcbrand" target="_blank" rel="noopener">Liberapay</a> or
 
-                       <a href="https://opkode.com/contact.html" target="_blank" rel="noopener">contact us</a>.
 
-                    </p>
 
-                </div>
 
+        <div class="container mx-auto w-50">
 
+            <div class="sponsors">
 
+                <h2>Special thanks to our sponsors</h2>
 
+                <ul class="list-unstyled row row-cols-1 row-cols-lg-2 row-cols-xl-4 justify-content-center align-items-center">
 
+                    <li class="col text-center"><a href="https://bairesdev.com/sponsoring-open-source-projects/?utm_source=conversejs" target="_blank" rel="noopener"><img class="img-fluid" style="max-width: 13em" src="/media/logos/bairesdev-primary.png" alt="BairesDev"></a></li>
 
+                    <li class="col text-center"><a href="https://blokt.com?utm_source=conversejs" target="_blank" rel="noopener"><img class="img-fluid" style="max-width: 12em" src="/logo/blokt.png" alt="Blokt Crypto & Privacy"></a></li>
 
+                    <li class="col text-center"><a href="https://www.keycdn.com?utm_source=conversejs" target="_blank" rel="noopener"><img class="img-fluid" style="max-height: 3em" src="/logo/keycdn.svg" alt="KeyCDN"></a></li>
 
+                    <li class="col text-center"><a href="https://weblate.org?utm_source=conversejs" target="_blank" rel="noopener"><img class="img-fluid" style="max-height: 2.6em" src="/logo/weblate-button.svg" alt="Weblate"></a></li>
 
+                </ul>
 
             </div>
 
             </div>
 
+
 
+            <p class="text-center">Sponsorships allow us to fund further development and improvements.</p>
 
+            <p>
 
+                If you'd like to sponsor this project, please visit
 
+                <a href="https://github.com/sponsors/jcbrand" target="_blank" rel="noopener">Github</a>,
 
+                <a href="https://www.patreon.com/jcbrand" target="_blank" rel="noopener">Patreon</a>,
 
+                <a href="https://liberapay.com/jcbrand" target="_blank" rel="noopener">Liberapay</a> or
 
+                <a href="https://opkode.com/contact.html" target="_blank" rel="noopener">contact us</a>.
 
+            </p>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
 
 </body>
 
 </body>

+ 155 - 263
src/shared/styles/website.scss
Parādīt failu 

@@ -1,45 +1,57 @@
 
-@import "bootstrap/scss/functions";
 
-@import "bootstrap/scss/variables";
 
-@import "bootstrap/scss/variables-dark";
 
-@import "bootstrap/scss/maps";
 
-@import "bootstrap/scss/mixins";
 
-@import "bootstrap/scss/utilities";
 
-
 
-@import "bootstrap/scss/reboot";
 
-@import "bootstrap/scss/type";
 
-@import "bootstrap/scss/images";
 
-// @import "bootstrap/scss/containers";
 
-// @import "bootstrap/scss/grid";
 
-// @import "bootstrap/scss/tables";
 
-// @import "bootstrap/scss/forms";
 
-@import "bootstrap/scss/buttons";
 
-@import "bootstrap/scss/transitions";
 
-@import "bootstrap/scss/dropdown";
 
-@import "bootstrap/scss/button-group";
 
-@import "bootstrap/scss/nav";
 
-@import "bootstrap/scss/navbar";
 
+@import 'bootstrap/scss/functions';
 
+@import 'bootstrap/scss/variables';
 
+@import 'bootstrap/scss/variables-dark';
 
+@import 'bootstrap/scss/maps';
 
+@import 'bootstrap/scss/mixins';
 
+@import 'bootstrap/scss/utilities';
 
+
 
+@import 'bootstrap/scss/reboot';
 
+@import 'bootstrap/scss/type';
 
+@import 'bootstrap/scss/images';
 
+@import 'bootstrap/scss/containers';
 
+@import 'bootstrap/scss/grid';
 
+@import 'bootstrap/scss/tables';
 
+@import 'bootstrap/scss/forms';
 
+@import 'bootstrap/scss/buttons';
 
+@import 'bootstrap/scss/transitions';
 
+// @import 'bootstrap/scss/dropdown';
 
+@import 'bootstrap/scss/button-group';
 
+@import 'bootstrap/scss/nav';
 
+@import 'bootstrap/scss/navbar';
 
 // @import "bootstrap/scss/card";
 
 // @import "bootstrap/scss/card";
 
 // @import "bootstrap/scss/accordion";
 
 // @import "bootstrap/scss/accordion";
 
 // @import "bootstrap/scss/breadcrumb";
 
 // @import "bootstrap/scss/breadcrumb";
 
 // @import "bootstrap/scss/pagination";
 
 // @import "bootstrap/scss/pagination";
 
-@import "bootstrap/scss/badge";
 
+// @import 'bootstrap/scss/badge';
 
 // @import "bootstrap/scss/alert";
 
 // @import "bootstrap/scss/alert";
 
 // @import "bootstrap/scss/progress";
 
 // @import "bootstrap/scss/progress";
 
-@import "bootstrap/scss/list-group";
 
-@import "bootstrap/scss/close";
 
+@import 'bootstrap/scss/list-group';
 
+@import 'bootstrap/scss/close';
 
 // @import "bootstrap/scss/toasts";
 
 // @import "bootstrap/scss/toasts";
 
 // @import "bootstrap/scss/modal";
 
 // @import "bootstrap/scss/modal";
 
-@import "bootstrap/scss/tooltip";
 
-@import "bootstrap/scss/popover";
 
-// @import "bootstrap/scss/carousel";
 
-@import "bootstrap/scss/spinners";
 
+// @import 'bootstrap/scss/tooltip';
 
+// @import 'bootstrap/scss/popover';
 
+@import 'bootstrap/scss/carousel';
 
+// @import 'bootstrap/scss/spinners';
 
 // @import "bootstrap/scss/offcanvas";
 
 // @import "bootstrap/scss/offcanvas";
 
-// @import "bootstrap/scss/placeholders";
 
-@import "bootstrap/scss/helpers";
 
-@import "bootstrap/scss/utilities/api";
 
+@import 'bootstrap/scss/placeholders';
 
+@import 'bootstrap/scss/helpers';
 
+@import 'bootstrap/scss/utilities/api';
 
+
 
+:root {
 
+    --bs-border-radius: 0.25rem;
 
+}
 
+
 
+.btn-primary {
 
+    --bs-btn-bg: #89b7cd;
 
+    --bs-btn-hover-bg: #5B91AB;
 
+    &:hover {
 
+        text-decoration: none;
 
+    }
 
+}
 
 
 
 @mixin fade-in {
 
 @mixin fade-in {
 
-    opacity: 0;  /* make things invisible upon start */
 
+    opacity: 0; /* make things invisible upon start */
 
     animation-name: fadein;
 
     animation-name: fadein;
 
     animation-fill-mode: forwards;
 
     animation-fill-mode: forwards;
 
     animation-duration: 1s;
 
     animation-duration: 1s;
 
@@ -56,10 +68,9 @@ html {
 
 }
 
 }
 
 
 
 body {
 
 body {
 
-    webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 
-    font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
+    font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
     color: #ffffff;
 
     color: #ffffff;
 
     background-color: #211018;
 
     background-color: #211018;
 
 }
 
 }
 
@@ -75,36 +86,23 @@ img::-moz-selection {
 
     background: transparent;
 
     background: transparent;
 
 }
 
 }
 
 
 
-h1, h2, h3, h4, h5, h6 {
 
-    margin: 0 0 35px;
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6 {
 
+    margin: 1em 0;
 
     font-family: 'Muli', sans-serif;
 
     font-family: 'Muli', sans-serif;
 
-    font-weight: normal;
 
-    letter-spacing: 1px;
 
-}
 
-
 
-p {
 
-    margin: 0 0 25px;
 
-    font-size: 18px;
 
-    line-height: 1.5;
 
-}
 
-
 
-@media (min-width: 767px) {
 
-    p {
 
-        margin: 0 0 35px;
 
-        font-size: 20px;
 
-        line-height: 1.6;
 
-    }
 
 }
 
 }
 
 
 
 a {
 
 a {
 
-    color: #82B397;
 
-    -webkit-transition: all 0.2s ease-in-out;
 
-    -moz-transition: all 0.2s ease-in-out;
 
+    color: #bad9e8;
 
+    text-decoration: none;
 
     transition: all 0.2s ease-in-out;
 
     transition: all 0.2s ease-in-out;
 
-
 
-    &:hover, &:focus {
 
-        text-decoration: none;
 
-        color: #00aaff;
 
+    &:hover,
 
+    &:focus {
 
+        text-decoration: underline;
 
     }
 
     }
 
 }
 
 }
 
 
 
@@ -112,7 +110,20 @@ a {
 
     display: none !important;
 
     display: none !important;
 
 }
 
 }
 
 
 
+.list-group {
 
+    line-height: 1.5em;
 
+    li {
 
+        margin-left: 1em;
 
+    }
 
+}
 
+
 
 #about {
 
 #about {
 
+    background:
 
+        url('/images/bgtr.svg') top right no-repeat,
 
+        url('/images/bgbl.svg') bottom left no-repeat,
 
+        url('/images/bgbl.svg') bottom left no-repeat,
 
+        url('/images/overlay.png'),
 
+        linear-gradient(45deg, #85505f, #384955, #655361);
 
     p {
 
     p {
 
         opacity: 0.9;
 
         opacity: 0.9;
 
     }
 
     }
 
@@ -129,28 +140,23 @@ a {
 
     font-size: 95%;
 
     font-size: 95%;
 
     font-weight: normal;
 
     font-weight: normal;
 
 
 
-	.navbar-collapse {
 
-		justify-content: space-between;
 
-	}
 
-	a {
 
-		color: white;
 
-	}
 
-}
 
-
 
-.pricing-table {
 
-    p {
 
-        margin-bottom: 0;
 
-        padding-bottom: 0;
 
-        color: darkgrey;
 
-        font-size: 95%;
 
+    .navbar-collapse {
 
+        justify-content: space-between;
 
+    }
 
+    a {
 
+        color: white;
 
     }
 
     }
 
 }
 
 }
 
 
 
 .navbar-brand {
 
 .navbar-brand {
 
+    display: none;
 
+    transition: opacity 0.3s ease-in-out;
 
+    padding-left: 1em;
 
     &:focus {
 
     &:focus {
 
         outline: none;
 
         outline: none;
 
     }
 
     }
 
 }
 
 }
 
+
 
 .navbar-custom {
 
 .navbar-custom {
 
     a {
 
     a {
 
         color: #ffffff;
 
         color: #ffffff;
 
@@ -158,9 +164,9 @@ a {
 
 }
 
 }
 
 
 
 .navbar-custom .nav li a {
 
 .navbar-custom .nav li a {
 
-  -webkit-transition: background 0.3s ease-in-out;
 
-  -moz-transition: background 0.3s ease-in-out;
 
-  transition: background 0.3s ease-in-out;
 
+    -webkit-transition: background 0.3s ease-in-out;
 
+    -moz-transition: background 0.3s ease-in-out;
 
+    transition: background 0.3s ease-in-out;
 
 }
 
 }
 
 .navbar-custom .nav li a:hover,
 
 .navbar-custom .nav li a:hover,
 
 .navbar-custom .nav li a:focus,
 
 .navbar-custom .nav li a:focus,
 
@@ -182,9 +188,15 @@ a {
 
         border-bottom: none;
 
         border-bottom: none;
 
         letter-spacing: 1px;
 
         letter-spacing: 1px;
 
         background-color: rgba(0, 0, 0, 0.5);
 
         background-color: rgba(0, 0, 0, 0.5);
 
-        -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
 
-        -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
 
-        transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
 
+        -webkit-transition:
 
+            background 0.5s ease-in-out,
 
+            padding 0.5s ease-in-out;
 
+        -moz-transition:
 
+            background 0.5s ease-in-out,
 
+            padding 0.5s ease-in-out;
 
+        transition:
 
+            background 0.5s ease-in-out,
 
+            padding 0.5s ease-in-out;
 
     }
 
     }
 
     .top-nav-collapse {
 
     .top-nav-collapse {
 
         padding-top: 0;
 
         padding-top: 0;
 
@@ -201,43 +213,42 @@ a {
 
     }
 
     }
 
 }
 
 }
 
 
 
-.features-section,
 
-.outro,
 
-.intro {
 
-    width: 100%;
 
-    padding: 100px 0;
 
-    text-align: center;
 
-    color: #fff;
 
-}
 
 .intro {
 
 .intro {
 
     margin-top: -4em;
 
     margin-top: -4em;
 
     height: calc(100vh + 4em);
 
     height: calc(100vh + 4em);
 
     background: url(/images/header.jpg) no-repeat bottom center scroll;
 
     background: url(/images/header.jpg) no-repeat bottom center scroll;
 
     background-color: #211018;
 
     background-color: #211018;
 
-    -webkit-background-size: cover;
 
-    -moz-background-size: cover;
 
     background-size: cover;
 
     background-size: cover;
 
-    -o-background-size: cover;
 
+    overflow-x: hidden;
 
 }
 
 }
 
 .features-section {
 
 .features-section {
 
-    background: url('/images/bgtr.svg') top right no-repeat, url('/images/bgbl.svg') bottom left no-repeat, url('/images/bgbl.svg') bottom left no-repeat, url('/images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361);
 
+    background:
 
+        url('/images/bgtr.svg') top right no-repeat,
 
+        url('/images/bgbl.svg') bottom left no-repeat,
 
+        url('/images/bgbl.svg') bottom left no-repeat,
 
+        url('/images/overlay.png'),
 
+        linear-gradient(45deg, #85505f, #384955, #655361);
 
 }
 
 }
 
 .features-section a {
 
 .features-section a {
 
-    color: #82B397;
 
+    color: #82b397;
 
 }
 
 }
 
 .outro {
 
 .outro {
 
-    background: url('/images/bgtr.svg') top right no-repeat, url('/images/bgbl.svg') bottom left no-repeat, url('/images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
 
+    background:
 
+        url('/images/bgtr.svg') top right no-repeat,
 
+        url('/images/bgbl.svg') bottom left no-repeat,
 
+        url('/images/overlay.png'),
 
+        linear-gradient(45deg, #384955, #655361, #85505f);
 
 }
 
 }
 
 
 
 section {
 
 section {
 
     h2 {
 
     h2 {
 
-        color: #E7A151;
 
+        color: #e7a151;
 
     }
 
     }
 
     h3 {
 
     h3 {
 
-        color: #89B7CD;
 
+        color: #89b7cd;
 
     }
 
     }
 
     h4 {
 
     h4 {
 
-        color: #5CBC86;
 
+        color: #5cbc86;
 
         font-size: 1.5em;
 
         font-size: 1.5em;
 
     }
 
     }
 
 }
 
 }
 
@@ -247,8 +258,8 @@ section {
 
     align-items: center;
 
     align-items: center;
 
     font-family: 'Baumans', cursive;
 
     font-family: 'Baumans', cursive;
 
     font-size: 6em;
 
     font-size: 6em;
 
-    margin-top: 2em;
 
-    margin-bottom: 0.5em;
 
+    margin-top: 1.5em;
 
+    margin-bottom: 0;
 
     color: white;
 
     color: white;
 
 
 
     .byline {
 
     .byline {
 
@@ -276,20 +287,16 @@ section {
 
             opacity: 0.5;
 
             opacity: 0.5;
 
             mix-blend-mode: multiply;
 
             mix-blend-mode: multiply;
 
         }
 
         }
 
-        .cls-3{
 
+        .cls-3 {
 
             fill: white;
 
             fill: white;
 
         }
 
         }
 
-        .cls-4{
 
+        .cls-4 {
 
             fill: white;
 
             fill: white;
 
         }
 
         }
 
     }
 
     }
 
 }
 
 }
 
 
 
 @include media-breakpoint-down(sm) {
 
 @include media-breakpoint-down(sm) {
 
-    .banner-social-buttons {
 
-        display: none;
 
-    }
 
-
 
     .chatroom-name {
 
     .chatroom-name {
 
         font-size: 16px;
 
         font-size: 16px;
 
     }
 
     }
 
@@ -316,96 +323,74 @@ section {
 
     margin-top: 1.5em;
 
     margin-top: 1.5em;
 
 }
 
 }
 
 @media (min-width: 767px) {
 
 @media (min-width: 767px) {
 
-  .intro {
 
-    padding: 0;
 
-  }
 
+    .intro {
 
+        padding: 0;
 
+    }
 
 }
 
 }
 
 
 
 .intro-text {
 
 .intro-text {
 
     font-size: 1.1em;
 
     font-size: 1.1em;
 
     opacity: 0.8;
 
     opacity: 0.8;
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
-    padding-bottom: 1em;
 
+    padding-bottom: 0.2em;
 
 }
 
 }
 
 
 
-.btn-circle {
 
-    width: 70px;
 
-    height: 70px;
 
-    margin-top: 15px;
 
-    padding: 7px 16px;
 
-    border: 2px solid #ffffff;
 
-    border-radius: 35px;
 
-    font-size: 40px;
 
-    color: #ffffff;
 
-    background: transparent;
 
-    -webkit-transition: background 0.3s ease-in-out;
 
-    -moz-transition: background 0.3s ease-in-out;
 
-    transition: background 0.3s ease-in-out;
 
-}
 
-.btn-circle:hover,
 
-.btn-circle:focus {
 
-    outline: none;
 
-    color: #ffffff;
 
-    background: rgba(255, 255, 255, 0.1);
 
-}
 
-.page-scroll .btn-circle i.animated {
 
-    -webkit-transition-property: -webkit-transform;
 
-    -webkit-transition-duration: 1s;
 
-    -moz-transition-property: -moz-transform;
 
-    -moz-transition-duration: 1s;
 
+.carousel {
 
+    opacity: 0.9;
 
+    overflow: hidden;
 
+
 
+    .carousel-inner {
 
+        padding: 1em;
 
+    }
 
+
 
+    .carousel-indicators button {
 
+        width: 10px;
 
+        height: 10px;
 
+        border-radius: 100%;
 
+    }
 
+
 
+    .carousel-control-prev-icon,
 
+    .carousel-control-next-icon {
 
+        width: 2rem;
 
+        height: 2rem;
 
+    }
 
 }
 
 }
 
-.page-scroll .btn-circle:hover i.animated {
 
-    -webkit-animation-name: pulse;
 
-    -moz-animation-name: pulse;
 
-    -webkit-animation-duration: 1.5s;
 
-    -moz-animation-duration: 1.5s;
 
-    -webkit-animation-iteration-count: infinite;
 
-    -moz-animation-iteration-count: infinite;
 
-    -webkit-animation-timing-function: linear;
 
-    -moz-animation-timing-function: linear;
 
+
 
+@media (max-width: 768px) {
 
+    .carousel {
 
+        max-width: 95% !important;
 
+    }
 
 }
 
 }
 
 
 
 .nav-item {
 
 .nav-item {
 
-	&.active {
 
-		a {
 
-			color: #E7A151 !important;
 
-		}
 
-	}
 
+    a {
 
+        &:hover,
 
+        &:focus {
 
+            text-decoration: none;
 
+        }
 
+    }
 
+    &.active {
 
+        a {
 
+            color: #e7a151 !important;
 
+        }
 
+    }
 
 }
 
 }
 
 
 
 .content-section {
 
 .content-section {
 
-    padding-top: 100px;
 
-    padding-top: 100px;
 
+    padding-top: 5em;
 
     min-height: 100vh;
 
     min-height: 100vh;
 
-
 
-    &.account-hosting {
 
-        font-size: 80%;
 
-    }
 
-
 
-    .privacy-policy {
 
+    &#about {
 
         padding-top: 2em;
 
         padding-top: 2em;
 
-        h4 {
 
-            padding: 0;
 
-            margin-top: 0.5em;
 
-            margin-bottom: 0.5em;
 
-            font-size: 2em;
 
-        }
 
-        p {
 
-            font-size: 1.2em;
 
-            padding-bottom: 0;
 
-            margin-bottom: 1em;
 
-        }
 
     }
 
     }
 
 }
 
 }
 
+
 
 .donate-section {
 
 .donate-section {
 
     width: 100%;
 
     width: 100%;
 
     padding: 50px 0;
 
     padding: 50px 0;
 
     color: #ffffff;
 
     color: #ffffff;
 
     background-color: #211018;
 
     background-color: #211018;
 
 }
 
 }
 
-.donate-section p.bitcoin-header {
 
-    margin: 0 0 5px;
 
-}
 
+
 
 @media (min-width: 767px) {
 
 @media (min-width: 767px) {
 
     .content-section {
 
     .content-section {
 
         padding-bottom: 50px;
 
         padding-bottom: 50px;
 
@@ -414,94 +399,13 @@ section {
 
         padding: 100px 0;
 
         padding: 100px 0;
 
     }
 
     }
 
 }
 
 }
 
+
 
 .btn {
 
 .btn {
 
     font-family: 'Muli', sans-serif;
 
     font-family: 'Muli', sans-serif;
 
     font-weight: 400;
 
     font-weight: 400;
 
-    -webkit-transition: all 0.3s ease-in-out;
 
-    -moz-transition: all 0.3s ease-in-out;
 
     transition: all 0.3s ease-in-out;
 
     transition: all 0.3s ease-in-out;
 
 }
 
 }
 
 
 
-.btn-default {
 
-    border: 1px solid #89B7CD;
 
-    color: #89B7CD;
 
-    background-color: transparent;
 
-}
 
-
 
-.btn-default:hover,
 
-.btn-default:focus {
 
-    border: 1px solid #82B397;
 
-    outline: none;
 
-    color: #211018;
 
-    background-color: #89B7CD;
 
-}
 
-.btn-huge {
 
-    padding: 25px;
 
-    font-size: 26px;
 
-}
 
-
 
-.banner-social-buttons {
 
-    padding-top: 3em;
 
-    a {
 
-        padding: 0.15em;
 
-        i {
 
-            font-size: 115%;
 
-        }
 
-    }
 
-}
 
-
 
-ul.contact,
 
-ul.integration,
 
-ul.screencasts,
 
-ul.features {
 
-    text-align: start;
 
-    font-size: 19px;
 
-}
 
-.feature-icon {
 
-    display: inline-block;
 
-    position: relative;
 
-    padding-bottom: 5em;
 
-    margin-bottom: 2.75em;
 
-    cursor: default;
 
-    color: #fff;
 
-}
 
-.feature-icon .fa {
 
-    display: inline-block;
 
-    width: 2em;
 
-    height: 2em;
 
-    font-size: 4em;
 
-    border-radius: 100%;
 
-    box-shadow: inset 0 0 0 1px white;
 
-    color: white;
 
-    line-height: 2.1em;
 
-}
 
-.feature-icon:before {
 
-    content: '';
 
-    background: white;
 
-    position: absolute;
 
-    bottom: 0;
 
-    left: 50%;
 
-    margin-inline-start: -0.325em;
 
-    width: 0.65em;
 
-    height: 0.65em;
 
-    display: block;
 
-    border-radius: 100%;
 
-}
 
-.feature-icon:after {
 
-    content: '';
 
-    position: absolute;
 
-    left: 50%;
 
-    bottom: 0.65em;
 
-    width: 1px;
 
-    height: 4.35em;
 
-    background: white;
 
-    margin-inline-start: -0.5px;
 
-}
 
-.row {
 
-    margin-inline-start: 0;
 
-    margin-inline-end: 0;
 
-}
 
-
 
 .mastodon {
 
 .mastodon {
 
     width: 3.6em;
 
     width: 3.6em;
 
     height: 3.6em;
 
     height: 3.6em;
 
@@ -511,7 +415,7 @@ ul.features {
 
 .sponsors {
 
 .sponsors {
 
     clear: both;
 
     clear: both;
 
     font-size: 1.4em;
 
     font-size: 1.4em;
 
-    padding: 0 0 4em 0;
 
+    padding: 0 0 2em 0;
 
     ul {
 
     ul {
 
         columns: 2;
 
         columns: 2;
 
         padding: 0;
 
         padding: 0;
 
@@ -520,15 +424,3 @@ ul.features {
 
 .sponsors h2 {
 
 .sponsors h2 {
 
     text-align: center;
 
     text-align: center;
 
 }
 
 }
 
-.sponsors ul {
 
-    margin: 0 0 1em 0;
 
-}
 
-.sponsors ul li {
 
-    margin: 0;
 
-    padding: 1em 0;
 
-    list-style: none;
 
-}
 
-.sponsors-text {
 
-    text-align: start;
 
-    padding: 0 0 1em 0;
 
-}

+ 39 - 24
src/website.js
Parādīt failu 

@@ -1,21 +1,32 @@
 
 (function () {
 
 (function () {
 
-    document.addEventListener("DOMContentLoaded", function () {
 
+    document.addEventListener('DOMContentLoaded', function () {
 
+        new bootstrap.Carousel('#screenshotCarousel', {
 
+            interval: 3000,
 
+            ride: 'carousel',
 
+            wrap: true,
 
+        });
 
 
 
         window.addEventListener('scroll', function () {
 
         window.addEventListener('scroll', function () {
 
-            var navbar = document.querySelector(".navbar");
 
-            var rect = navbar.getBoundingClientRect();
 
-            if (rect.top + window.scrollY > 50) {
 
-                navbar.classList.add("top-nav-collapse");
 
+            const navbarBrand = document.querySelector('.navbar-brand');
 
+            const navbar = document.querySelector('.navbar');
 
+            const rect = navbar.getBoundingClientRect();
 
+            if (rect.top + window.scrollY > 100) {
 
+                navbar.classList.add('top-nav-collapse');
 
+                navbarBrand.style.display = 'inline-block';
 
             } else {
 
             } else {
 
-                navbar.classList.remove("top-nav-collapse");
 
+                navbar.classList.remove('top-nav-collapse');
 
+                navbarBrand.style.display = 'none';
 
             }
 
             }
 
         });
 
         });
 
 
 
-        var getDocumentHeight = function () {
 
+        const getDocumentHeight = function () {
 
             return Math.max(
 
             return Math.max(
 
-                document.body.scrollHeight, document.documentElement.scrollHeight,
 
-                document.body.offsetHeight, document.documentElement.offsetHeight,
 
-                document.body.clientHeight, document.documentElement.clientHeight
 
+                document.body.clientHeight,
 
+                document.body.offsetHeight,
 
+                document.body.scrollHeight,
 
+                document.documentElement.clientHeight,
 
+                document.documentElement.offsetHeight,
 
+                document.documentElement.scrollHeight
 
             );
 
             );
 
         };
 
         };
 
 
 
@@ -27,25 +38,29 @@
 
                 });
 
                 });
 
                 this.parentElement.classList.add('active');
 
                 this.parentElement.classList.add('active');
 
 
 
-                var hash = this.getAttribute("href");
 
-                var endLocation = document.querySelector(hash).offsetTop;
 
-                var startLocation = window.pageYOffset;
 
-                var distance = endLocation - startLocation;
 
-                var start, percentage, position;
 
-                var timeLapsed = 0;
 
+                let hash = this.getAttribute('href');
 
+                let endLocation = document.querySelector(hash).offsetTop;
 
+                let startLocation = window.pageYOffset;
 
+                let distance = endLocation - startLocation;
 
+                let start, percentage, position;
 
+                let timeLapsed = 0;
 
 
 
                 function scrollAnimation(timestamp) {
 
                 function scrollAnimation(timestamp) {
 
-                    if (!start) { start = timestamp; }
 
+                    if (!start) {
 
+                        start = timestamp;
 
+                    }
 
                     timeLapsed += timestamp - start;
 
                     timeLapsed += timestamp - start;
 
-                    percentage = (timeLapsed / parseInt(500, 10));
 
-                    percentage = (percentage > 1) ? 1 : percentage;
 
-                    position = startLocation + (distance * percentage * percentage);
 
+                    percentage = timeLapsed / parseInt(500, 10);
 
+                    percentage = percentage > 1 ? 1 : percentage;
 
+                    position = startLocation + distance * percentage * percentage;
 
                     window.scrollTo(0, Math.floor(position));
 
                     window.scrollTo(0, Math.floor(position));
 
 
 
-                    var currentLocation = window.pageYOffset;
 
-                    if (position == endLocation ||
 
-                            currentLocation == endLocation ||
 
-                            ((startLocation < endLocation && window.innerHeight + currentLocation) >= getDocumentHeight())) {
 
+                    let currentLocation = window.pageYOffset;
 
+                    if (
 
+                        position == endLocation ||
 
+                        currentLocation == endLocation ||
 
+                        (startLocation < endLocation && window.innerHeight + currentLocation) >= getDocumentHeight()
 
+                    ) {
 
                         window.location.hash = hash;
 
                         window.location.hash = hash;
 
                         return;
 
                         return;
 
                     }
 
                     }