Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

/apps/: Redesign apps page. 

Tweaked by tabbott to update the URLs to point to the Electron desktop app.
This commit is contained in:
Brock Whittaker 2017-07-07 17:28:18 -07:00
parent 3f60074c33
commit dc671ac0bd
5 changed files with 277 additions and 498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/landing-page/ubuntu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 300 KiB

BIN
static/images/waves.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

145
static/js/portico/landing-page.js
View File

@ -1,6 +1,11 @@
import fuzzysearch from 'fuzzysearch';
import blueslip from './../blueslip';
const ELECTRON_APP_VERSION = "1.2.0-beta";
const ELECTRON_APP_URL_LINUX = `https://github.com/zulip/zulip-electron/releases/download/v${ELECTRON_APP_VERSION}/Zulip-${ELECTRON_APP_VERSION}-x86_64.AppImage`;
const ELECTRON_APP_URL_MAC = `https://github.com/zulip/zulip-electron/releases/download/v${ELECTRON_APP_VERSION}/Zulip-${ELECTRON_APP_VERSION}.dmg`;
const ELECTRON_APP_URL_WINDOWS = `https://github.com/zulip/zulip-electron/releases/download/v${ELECTRON_APP_VERSION}/Zulip-Web-Setup-${ELECTRON_APP_VERSION}.exe`;
// this will either smooth scroll to an anchor where the `name`
// is the same as the `scroll-to` reference, or to a px height
// (as specified like `scroll-to='0px'`).
@ -271,13 +276,97 @@ var hello_events = function () {
$(".footer").addClass("hello");
};
var apps_events = function () {
var version;
var info = {
windows: {
image: "/static/images/landing-page/microsoft.png",
alt: "Windows",
description: "Zulip for Windows is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
link: ELECTRON_APP_URL_WINDOWS,
},
mac: {
image: "/static/images/landing-page/macbook.png",
alt: "MacOS",
description: "Zulip on MacOS is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
link: ELECTRON_APP_URL_MAC,
},
android: {
image: "/static/images/app-screenshots/zulip-android.png",
alt: "Android",
description: "Zulip's native Android app makes it easy to keep up while on the go.",
link: "https://play.google.com/store/apps/details?id=com.zulip.android",
},
ios: {
image: "/static/images/app-screenshots/zulip-iphone-rough.png",
alt: "iOS",
description: "Zulip's native iOS app makes it easy to keep up while on the go.",
link: "https://itunes.apple.com/us/app/zulip/id1203036395",
},
linux: {
image: "/static/images/landing-page/ubuntu.png",
alt: "Linux",
description: "Zulip on the Linux desktop is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
link: ELECTRON_APP_URL_LINUX,
},
};
var nav_version = {
Win: "windows",
MacIntel: "mac",
Linux: "linux",
iP: "ios",
};
// if the hash is not a valid section, then identify it.
version = window.location.hash.replace(/^#/, "");
if (info[version]) {
window.location.hash = version;
} else {
for (var x in nav_version) {
if (navigator.platform.indexOf(x) !== -1) {
window.location.hash = nav_version[x];
version = nav_version[x];
break;
}
}
if (!version || !info[version]) {
version = "mac";
}
window.location.hash = version;
}
var update_version = function (version) {
var version_info = info[version];
$(".info .platform").text(version_info.alt);
$(".info .description").text(version_info.description);
$(".info .link").attr("href", version_info.link);
$(".image img").attr("src", version_info.image);
};
window.onhashchange = function () {
update_version(window.location.hash.substr(1));
};
update_version(version);
$(".apps > .icon").click(function () {
$("body").animate({ scrollTop: 0 }, 200);
});
};
var events = function () {
ScrollTo();
$("a").click(function (e) {
// if the pathname is different than what we are already on, run the
// custom transition function.
if (window.location.pathname !== this.pathname && !this.hasAttribute("download")) {
if (window.location.pathname !== this.pathname && !this.hasAttribute("download") &&
!/no-action/.test(this.className)) {
e.preventDefault();
$(".portico-landing").removeClass("show");
setTimeout(function () {
@ -306,57 +395,9 @@ var events = function () {
$("nav ul").addClass("show");
});
(function () {
var $last = $(".details-box").eq(0).addClass("show");
var $li = $("ul.sidebar li");
var version;
var nav_version = {
Win: "windows",
MacIntel: "mac",
Linux: "linux",
iP: "ios",
};
for (var x in nav_version) {
if (navigator.platform.indexOf(x) !== -1) {
$('li[data-name="' + nav_version[x] + '"]').click();
version = nav_version[x];
break;
}
}
var switch_to_tab = function (elem) {
var target = $(elem).data("name");
var $el = $(".details-box[data-name='" + target + "']");
// $li is a semi-global variable from the closure above.
$li.removeClass("active");
$(elem).addClass("active");
$last.removeClass("show");
$el.addClass("show");
$last = $el;
};
// this is for the sidebar on the /apps/ page to trigger the correct info box.
$li.click(function () {
window.location.hash = $(this).data("name");
});
if (detectPath() === "apps") {
var hash = function () {
return window.location.hash.replace(/^#/, "");
};
switch_to_tab($("ul.sidebar li[data-name='" + (hash() || version || "windows") + "']"));
window.onhashchange = function () {
switch_to_tab($("ul.sidebar li[data-name='" + hash() + "']"));
};
}
}());
if (detectPath() === "apps") {
apps_events();
}
if (detectPath() === "integrations") {
integration_events();

414
static/styles/landing-page.css
View File

@ -1300,308 +1300,146 @@ nav ul li.active::after {
}
/* -- apps page -- */
.portico-landing.apps {
padding-top: 0px;
}
.portico-landing.apps .main,
.portico-landing.features-app .main {
background-color: #fff;
}
.portico-landing.apps .main {
max-width: 1600px;
}
.portico-landing.apps .main .padded-content.headline {
padding-bottom: 0px;
}
.portico-landing.apps .main .headline h1 {
font-size: 2.5em;
}
.portico-landing.apps .main .headline h3 {
font-weight: 400;
font-size: 1.1em;
color: hsl(0, 0%, 66%);
}
.portico-landing.apps .main ul.sidebar {
display: inline-block;
vertical-align: top;
margin: 0 -4px 0 0;
list-style: none;
font-weight: 500;
color: hsl(0, 0%, 66%);
}
.portico-landing.apps .main ul.sidebar li {
.portico-landing.apps .hero {
position: relative;
padding: 20px 15px 20px 0px;
margin: 2px 0px;
width: 130px;
text-align: right;
background-color: #fff;
cursor: pointer;
transition: all 0.3s ease;
padding: 100px 50px 50px 50px;
background: linear-gradient(35deg, #0d7373, #6ae4c8);
height: 600px;
color: #fff;
overflow: hidden;
}
.portico-landing.apps .main ul.sidebar li:first-of-type {
.portico-landing.apps .hero h1 {
font-size: 3em;
margin-bottom: 0px;
}
.portico-landing.apps .hero h1 {
margin-top: 0px;
}
.portico-landing.apps .main ul.sidebar li.active {
color: hsl(0, 0%, 27%);
font-weight: 600;
transform: translateX(-10px);
}
/* active arrow that slides in when a tab is .active on */
.portico-landing.apps .main ul.sidebar li::after {
content: ">";
position: absolute;
right: 0px;
top: 21px;
opacity: 0;
transform: translateX(3px);
}
.portico-landing.apps .main ul.sidebar li.active::after {
transform: translateX(0px);
opacity: 1;
}
.portico-landing.apps .main .details-container {
position: relative;
display: inline-block;
vertical-align: top;
height: 500px;
width: calc(100% - 155px);
background-color: hsl(0, 0%, 53%);
}
.portico-landing.apps .main .details-container .details-box {
.portico-landing.apps .hero #waves {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
background-image: url(/static/images/waves.svg);
background-size: cover;
background-repeat: no-repeat;
}
.portico-landing.apps .hero .info,
.portico-landing.apps .hero .image {
position: relative;
width: 50%;
float: left;
height: 100%;
z-index: 1;
}
.portico-landing.apps .main .details-container .details-box.show {
opacity: 1;
pointer-events: auto;
z-index: 2;
.portico-landing.apps .hero .info .cta {
text-shadow: 0px 0px 60px rgba(0,0,0,0.3);
}
.portico-landing.apps .main .details-container .details-box[data-name="android"] {
color: hsl(156, 56%, 95%);
background: -webkit-radial-gradient(top right, ellipse cover, hsl(128, 78%, 84%) 0%, hsl(191, 74%, 35%) 100%);
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(128, 78%, 84%) 0%, hsl(191, 74%, 35%) 100%);
}
.portico-landing.apps .main .details-container .details-box[data-name="ios"] {
color: hsl(203, 48%, 95%);
background: -webkit-radial-gradient(top right, ellipse cover, hsl(36, 98%, 84%) 0%, hsl(197, 80%, 37%) 100%);
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(36, 98%, 84%) 0%, hsl(197, 80%, 37%) 100%);
}
.portico-landing.apps .main .details-container .details-box[data-name="windows"] {
color: hsl(0, 0%, 93%);
background: -webkit-radial-gradient(top right, ellipse cover, hsl(212, 60%, 78%) 0%, hsl(216, 91%, 21%) 100%);
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(212, 60%, 78%) 0%, hsl(216, 91%, 21%) 100%);
}
.portico-landing.apps .main .details-container .details-box[data-name="mac"] {
color: hsl(350, 92%, 95%);
background: -webkit-radial-gradient(top right, ellipse cover, hsl(44, 97%, 85%) 0%, hsl(340, 73%, 32%) 100%);
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(44, 97%, 85%) 0%, hsl(340, 73%, 32%) 100%);
}
.portico-landing.apps .main .details-container .details-box[data-name="linux"] {
color: hsl(16, 93%, 95%);
background: -webkit-radial-gradient(top right, ellipse cover, hsl(16, 98%, 81%) 0%, hsl(6, 88%, 43%) 100%);
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(16, 98%, 81%) 0%, hsl(6, 88%, 43%) 100%);
}
.portico-landing.apps .main .details-container .details-box[data-name="snipe"] {
color: hsl(350, 92%, 95%);
background: -webkit-radial-gradient(top right, ellipse cover, hsl(9, 97%, 87%) 0%, hsl(246, 82%, 30%) 100%);
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(9, 97%, 87%) 0%, hsl(246, 82%, 30%) 100%);
}
.portico-landing.apps .main .details-container .details-box[data-name="plan9"] {
color: hsl(350, 92%, 95%);
background: -webkit-radial-gradient(top right, ellipse cover, hsl(9, 97%, 87%) 0%, hsl(356, 82%, 30%) 100%);
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(9, 97%, 87%) 0%, hsl(356, 82%, 30%) 100%);
}
.portico-landing.apps .main ul.sidebar li[data-name="android"].active {
color: hsl(175, 74%, 35%);
}
.portico-landing.apps .main ul.sidebar li[data-name="ios"].active {
color: hsl(196, 57%, 58%);
}
.portico-landing.apps .main ul.sidebar li[data-name="windows"].active {
color: hsl(216, 70%, 39%);
}
.portico-landing.apps .main ul.sidebar li[data-name="mac"].active {
color: hsl(340, 55%, 51%);
}
.portico-landing.apps .main ul.sidebar li[data-name="linux"].active {
color: hsl(6, 88%, 43%);
}
.portico-landing.apps .main ul.sidebar li[data-name="snipe"].active {
color: hsl(246, 82%, 30%);
}
.portico-landing.apps .main ul.sidebar li[data-name="plan9"].active {
color: hsl(356, 82%, 30%);
}
.portico-landing.apps .main .details-container .platform.description {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
padding: 50px;
}
.portico-landing.apps .main .details-container .platform.image {
float: right;
width: calc(49.5% - 40px);
}
.portico-landing.apps .main .details-container {
overflow: hidden;
}
.portico-landing.apps .details-box[data-name="mac"] .platform.image {
text-align: center;
}
.portico-landing.apps .main .details-box .platform.image {
opacity: 0;
transform: scale(0.2);
transition: transform 0.3s ease;
}
.portico-landing.apps .main .details-box.show .platform.image {
opacity: 1;
transform: scale(1);
}
.portico-landing.apps .details-box[data-name="mac"] .platform.image img {
width: 450px;
}
.portico-landing.apps .details-box[data-name="windows"] .platform.image img {
width: 450px;
}
.portico-landing.apps .details-box[data-name="ios"] .platform.image img {
width: 175px;
}
.portico-landing.apps .details-box[data-name="android"] .platform.image img {
width: 240px;
}
.portico-landing.apps .details-box button.grey-transparent {
margin-top: 30px;
}
.portico-landing.apps .details-box[data-name="mac"] button.grey-transparent:active {
color: hsl(356, 58%, 47%);
}
.portico-landing.apps .details-box[data-name="ios"] button.grey-transparent:active {
color: hsl(205, 33%, 56%);
}
.portico-landing.apps .details-box[data-name="windows"] button.grey-transparent:active {
color: hsl(216, 50%, 35%);
}
.portico-landing.apps .main .details-box > .image {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 35px 0px;
height: calc(100% - 70px);
background-color: hsla(0, 0%, 100%, 0.1);
}
.portico-landing.apps .main .details-container h1 {
margin: 20px 0px;
}
.portico-landing.apps .main .details-container .platform {
display: inline-block;
vertical-align: top;
padding: 20px;
text-align: center;
.portico-landing.apps .hero .image img[src="/static/images/landing-page/tar.gz.svg"] {
width: 50%;
}
.portico-landing.apps .main .details-container .platform h2 {
margin-top: 0px;
.portico-landing.apps .hero .image img[src="/static/images/app-screenshots/zulip-iphone-rough.png"] {
height: 85%;
}
.portico-landing.apps .main .details-container pre {
display: inline-block;
max-width: 400px;
border: none;
padding: 15px;
box-shadow: 0px 0px 30px hsla(0, 0%, 100%, 0.3);
text-align: left;
background-color: hsl(16, 93%, 95%);
color: hsl(7, 32%, 57%);
.portico-landing.apps .hero .image img[src="/static/images/app-screenshots/zulip-android.png"] {
height: 100%;
}
.portico-landing.apps .main .details-container .instructions {
margin: 30px auto 0 auto;
text-align: left;
font-size: 1.1rem;
.portico-landing.apps .hero .info .flex {
height: 100%;
}
.portico-landing.apps .main .details-container .instructions a {
.portico-landing.apps .hero .info button {
padding: 10px 20px;
margin-top: 50px;
font-size: 1em;
font-weight: 600;
border: 2px solid #fff;
color: #fff;
background-color: transparent;
}
.portico-landing.apps .main .details-container .instructions a:not(.no-style):before {
background-color: hsla(0, 0%, 100%, 0.5);
width: 50%;
left: 25%;
}
.portico-landing.apps .main .details-container .instructions a:not(.no-style):hover:before {
.portico-landing.apps .other-apps {
background-color: #fff;
width: 100%;
left: 0%;
padding: 50px 50px 120px 50px;
text-align: center;
}
.portico-landing.apps .main .details-container .instructions img {
.portico-landing.apps .other-apps h2 {
width: 600px;
margin: 0 auto;
text-align: center;
}
.portico-landing.apps .other-apps .apps {
display: inline-block;
margin: 50px 0px 0px 0px;
}
.portico-landing.apps .other-apps .apps .icon {
vertical-align: top;
width: 50px;
padding: 20px 30px;
border-radius: 70px;
color: #ccc;
font-size: 3em;
text-align: center;
transition: all 0.2s ease;
}
.portico-landing.apps .other-apps .apps .icon:hover {
color: #777;
background: linear-gradient(-45deg, #d4d4d4, #fafafa);
}
.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone {
font-size: 4em;
padding: 11.5px 27px;
}
.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone::after {
margin-top: 1px;
}
.portico-landing.apps .other-apps .apps .icon::after {
content: attr(data-label);
display: block;
margin: -32px auto 0px auto;
width: 195px;
font-size: 0.8rem;
font-weight: 600;
font-family: "Humbug", sans-serif;
margin-top: 10px;
}
/* -- /for/open-source/ -- */
@ -1657,6 +1495,7 @@ nav ul li.active::after {
color: #333;
}
/* -- hello page styling -- */
.portico-landing.hello .apps .screen {
display: inline-block;
margin: 0px 10px;
@ -2433,6 +2272,55 @@ nav ul li.active::after {
padding-top: 120px;
}
.portico-landing.apps .hero {
height: 350px;
}
.portico-landing.apps .hero h1 {
font-size: 1.9em;
font-weight: 400;
}
.portico-landing.apps .other-apps {
padding: 50px 5px 120px 5px;
}
.portico-landing.apps .other-apps h2 {
font-size: 1.5em;
width: 100%;
}
.portico-landing.apps .other-apps .apps .icon {
padding: 0px 14px;
width: 30px;
padding-top: 8px;
padding-bottom: 0px;
font-size: 2.3em;
}
.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone {
padding: 7px 10px 5px 10px;
width: 35px;
font-size: 2.5em;
}
.portico-landing.apps .other-apps .apps .icon.fa-windows {
font-size: 2em;
padding: 10px 13px 2px 13px !important;
}
.portico-landing.apps .other-apps .apps .icon::after {
content: "";
}
.portico-landing.apps .hero .image {
display: none;
}
.portico-landing.apps .hero .info {
width: 100%;
}
.portico-landing.integrations .main,
.main {
width: calc(100% - 50px);

216
templates/zerver/apps.html
View File

@ -2,6 +2,11 @@
{% block customhead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style media="screen">
.app.portico-page {
padding-bottom: 0px;
}
</style>
{% stylesheet 'portico' %}
{% stylesheet 'landing-page' %}
{{ render_bundle('landing-page') }}
@ -13,192 +18,37 @@
{% include 'zerver/landing_nav.html' %}
{% include 'zerver/gradients.html' %}
<div class="portico-landing apps">
<div class="main">
<div class="padded-content headline">
<h1 class="center">{% trans %}Do we have apps? Appsolutely.{% endtrans %}</h1>
<h3 class="center">{% trans %}Ok, I take it back, I'm sorry, please don't go.{% endtrans %}</h3>
</div>
<div class="padded-content">
<ul class="sidebar">
<li data-name="android">Android</li>
<li data-name="ios">iOS</li>
<li data-name="mac">MacOS</li>
<li data-name="windows">Windows</li>
<li data-name="linux">{{ _('Linux desktop') }}</li>
<li data-name="snipe">{{ _('Terminal client') }}</li>
<li data-name="plan9">Plan 9</li>
</ul>
<div class="details-container">
<div class="details-box" data-name="ios">
<div class="image">
<div class="platform description">
<div class="wrapper">
<h2>iOS</h2>
<div class="instructions">
<p class="center">
{% trans %}Zulip's brand-new
iOS app makes it easy to
browse your messages with
lightning-fast scrolling!
{% endtrans %}
</p>
</div>
<a href="https://itunes.apple.com/us/app/zulip/id1203036395" target="_blank">
<button class="button grey-transparent" type="button" name="button">{{ _('Get from App Store') }}</button>
</a>
</div>
</div>
<div class="platform image">
<img src="/static/images/app-screenshots/zulip-iphone-rough.png" alt="{{ _('Zulip iOS') }}" />
</div>
</div>
</div>
<div class="details-box" data-name="android">
<div class="image">
<div class="platform description">
<div class="wrapper">
<h2>Android</h2>
<div class="instructions">
<p class="center">
{% trans %}Read and reply to
your messages while on the go
with Zulip's free, native app
for Android.
{% endtrans %}
</p>
</div>
<a href="https://play.google.com/store/apps/details?id=com.zulip.android" target="_blank">
<button class="button grey-transparent" type="button" name="button">{{ _('Get from Play Store') }}</button>
</a>
</div>
</div>
<div class="platform image">
<img src="/static/images/app-screenshots/zulip-android.png" alt="{{ _('Zulip Android') }}" />
</div>
</div>
</div>
<div class="details-box" data-name="mac">
<div class="image">
<div class="platform description">
<div class="wrapper">
<h2>MacOS</h2>
<div class="instructions">
<p class="center">
{% trans %}You love your Mac. And you love Zulip. So what could be better than a Zulip app for Mac? Enjoy notifications for messages and PMs in your dock whether you're in Sublime, emacs, or Photoshop.{% endtrans %}
</p>
</div>
<a href="https://zulip.org/dist/apps/mac/Zulip-latest.dmg" download>
<button class="button grey-transparent" type="button" name="button">{{ _('Download now') }}</button>
</a>
</div>
</div>
<div class="platform image">
<img src="/static/images/landing-page/macbook.png" alt="{{ _('MacOS') }}" />
</div>
</div>
</div>
<div class="details-box" data-name="windows">
<div class="image">
<div class="platform description">
<div class="wrapper">
<h2>{{ _('Windows 7+') }}</h2>
<div class="instructions">
<p class="center">
{% trans %}We proudly present Zulip for Windows: the second-best app for Windows on the market today (after Solitaire, obviously).{% endtrans %}
</p>
</div>
<a href="https://github.com/zulip/zulip-electron/releases/download/v1.0.0-beta/Zulip-Web-Setup-1.0.0-beta.exe" download>
<button class="button grey-transparent" type="button" name="button">{{ _('Download now') }}</button>
</a>
</div>
</div>
<div class="platform image">
<img src="/static/images/landing-page/microsoft.png" alt="{{ _('Windows') }}" />
</div>
</div>
</div>
<div class="details-box" data-name="linux">
<div class="image">
<div class="platform">
<h2>{{ _('Ubuntu &amp; Debian') }}</h2>
<div class="instructions">
<p>
{% trans %}We have an APT repository for Zulip, so adding and installing the app is easy.{% endtrans %}
</p>
</div>
<pre>
wget https://zulip.org/dist/keys/user-apt.asc
cat user-apt.asc | sudo apt-key add -
sudo apt-add-repository http://apt.zulip.com/user/
sudo apt-get update
sudo apt-get install zulip-desktop
</pre>
</div>
<div class="platform">
<h2>{{ _('Other platforms') }}</h2>
<div class="instructions">
<p>{% trans %}We provide a <a href="https://zulip.org/dist/apps/linux/zulip-desktop_latest.bin.tar.gz" download>binary tarball</a> of the Zulip application, built for 64-bit systems.{% endtrans %}
</p>
<a href="https://zulip.org/dist/apps/linux/zulip-desktop_latest.bin.tar.gz" download>
<img src="/static/images/landing-page/tar.gz.svg" alt="{{ _('Download') }}" />
</a>
</div>
</div>
</div>
</div>
<div class="details-box" data-name="plan9">
<div class="image">
<div class="platform description">
<div class="wrapper">
<h2>Plan 9</h2>
<div class="instructions">
<p class="center">
{% trans %}First, connect to our
hosted 9P filesystem
at <tt>plan9.zulip.org</tt> and
then... no, we're - totally
kidding. There definitely isn't
a version of Zulip - for Plan
9.{% endtrans %}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="details-box" data-name="snipe">
<div class="image">
<div class="platform description">
<div class="wrapper">
<h2>Snipe</h2>
<div class="instructions">
<p class="center">
{% trans %}Snipe, a modern
multi-protocol terminal-based
chat client, is a great way to
use Zulip from a terminal.
{% endtrans %}
</p>
<a href="https://github.com/kcr/snipe">
<button class="button
grey-transparent" type="button"
name="button">{{ _('Download from GitHub') }}</button>
</a>
</div>
</div>
</div>
</div>
<div class="portico-landing apps no-slide">
<div class="hero">
<div id="waves"></div>
<div class="info">
<div class="flex">
<div class="cta">
<h1>Zulip for <span class="platform"></span></h1>
<p><span class="description"></span></p>
<a class="link no-style no-action" href="">
<button type="button" name="button">Download Zulip for <span class="platform"></span></button>
</a>
</div>
</div>
</div>
<div class="image">
<div class="flex">
<img src="" />
</div>
</div>
</div>
<div class="other-apps">
<h2>Apps for every platform.</h2>
<div class="apps">
<a class="icon fa fa-apple no-style" href="/apps/#mac" data-label="MacOS"></a>
<a class="icon fa fa-windows no-style" href="/apps/#windows" data-label="Windows"></a>
<a class="icon fa fa-linux no-style" href="/apps/#linux" data-label="Linux"></a>
<a class="icon fa fa-android no-style" href="/apps/#android" data-label="Android"></a>
<a class="icon fa fa-mobile-phone no-style" href="/apps/#ios" data-label="iOS"></a>
</div>
</div>
</div>
{% endblock %}