2
0
mirror of https://github.com/offen/website.git synced 2024-12-25 14:20:22 +01:00

Merge pull request #42 from offen/download-page

Add 'Get started' page
This commit is contained in:
Hendrik Niefeld 2020-02-02 20:52:58 +01:00 committed by GitHub
commit 74a60b5afa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 181 additions and 35 deletions

View File

@ -33,10 +33,10 @@ The current state of *Offen runs on this domain.* You should have noticed our co
### Testdrive on your system
Whether you are a developer that want to contribute or a website operator that wants to test Offen. Have a demo up and running in no time on your local machine. Download and install a single binary file on Linux, Windows or MacOS.
[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.1/offen-v0.1.0-alpha.1.tar.gz){: target="_blank" data-button="yellow"}
[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz){: data-button="yellow"}
### Feeling adventurous?
Offen is under active development but with the introduction of the user consent banner has become usable for the general public. If you are brave enough you can use our [very first alpha release](https://github.com/offen/offen/releases/tag/v0.1.0-alpha.1){: target="_blank"} in a production environment.
Offen is under active development but with the introduction of the user consent banner has become usable for the general public. If you are brave enough you can use our [latest alpha release](https://github.com/offen/offen/releases/latest/){: target="_blank"} in a production environment.
### We need to talk about Safari
Currently, the way we store encryption keys securely on the client side does not work in Apple's Safari browser. Fortunately, our improved opt-in flow will allow us to resume Safari support in milestone 3. Please bear with us until then.

View File

@ -0,0 +1,5 @@
title: Get started | Offen
description: Want to collect usage statistics transparently? Like to contribute as a developer? Download our latest release and learn how to run, use and develop Open.
slug: get-started
template: getstarted
sitemap_priority: 0.8

View File

@ -70,5 +70,7 @@ GPG_KEY_FILE = '74B041E23DB29D552644CEB1B18C633D6967FE3F.asc'
PATREON_URL = 'https://www.patreon.com/offen'
LINKEDIN_URL = 'https://www.linkedin.com/company/hioffen'
TWITTER_URL = 'https://twitter.com/hioffen'
RELEASE_URL = 'https://github.com/offen/offen/releases/latest/'
RELEASE_DIRECT_URL = 'https://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz'
OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None)

View File

@ -11,12 +11,18 @@ COLORS
.brd-cclr-mid-yellow {
border-color: #F7BF08;
}
.cclr-bright-yellow {
.cclr-yellow-bright {
background-color: #fde28c;
}
.fnt-cclr-yellow-bright {
color: #fde28c;
}
.cclr-mid-mint {
background-color: #BBD9D3;
}
.fnt-cclr-mint-bright {
color: #E2F6F2;
}
.cclr-mid-black {
background-color: #39352A;
}
@ -71,7 +77,6 @@ LAYOUT
}
/* ---------------------------------------------------
TYPO AND LAYOUT ELEMENTS
----------------------------------------------------*/
@ -100,6 +105,10 @@ em {
background: linear-gradient(transparent 66%, #fde28c 66%);
font-style: normal;
}
.em-extra {
background: linear-gradient(transparent 66%, #BBD9D3 66%);
font-style: normal;
}
hr {
margin-left: -1rem;
margin-right: -1rem;
@ -116,14 +125,20 @@ ul {
padding-inline-start: 1rem;
}
}
.tracked-min {
letter-spacing: .03em;
}
.intro-margin-a {
margin-top: 0.3rem;
}
.intro-margin-b {
margin-top: 0.7rem;
}
/* ---------------------------------------------------
MENU
----------------------------------------------------*/
.nav-list {
margin: 0 0.7rem 0 0;
}
.nav-bar {
height: 4rem;
}
@ -160,10 +175,19 @@ nav ul li a:visited {
background: #F7BF08;
color: #39352A;
}
nav ul li:last-child a {
padding-right: 2rem;
background: #39352A;
color: #fff;
}
nav ul li a:hover,
nav ul li a:visited:hover {
color: #39352A;
}
nav ul li:last-child a:hover,
nav ul li:last-child a:visited:hover {
color: #fff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 0.4rem;
@ -212,17 +236,19 @@ nav ul li ul li a {
nav ul li a {
padding: 1rem;
line-height: 1;
padding-left: 20%;
padding-left: 4.2rem;
}
nav ul li ul li a {
padding-left: 30%;
}
nav ul li:last-child a {
padding-bottom: 4rem;
}
nav ul li:last-child a {
box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
padding-bottom: 1.2rem;
margin: 0;
box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
}
nav ul li:first-child a {
padding-top: 0.2rem;
}
.nav-dropdown {
position: static;
}
@ -306,7 +332,20 @@ IMAGES
GRAPHICS
----------------------------------------------------*/
#bg-intro {
background: url(/theme/images/gfx-intro.svg) no-repeat center;
background: url(/theme/images/gfx-intro.svg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 200px 130px;
}
@media only screen and (min-width: 30.1em) and (max-width: 60em) {
#bg-intro {
background-position: calc(20% + 120px) 130px;
}
}
@media only screen and (max-width: 30em) {
#bg-intro {
background-position: 10px 60px;
}
}
#bg-feature {
background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
@ -320,4 +359,3 @@ GRAPHICS
#bg-cta-bottom {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View File

@ -37,9 +37,11 @@
<div class="menu w-100 cclr-mid-yellow">
<section class="nav-bar">
<div class="nav-container">
<div class="icon">
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
<div class="icon flex">
<a class="link dim" href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
<a class="link dim" href="/"><p class="f25 normal ma0 ml2 white">Offen</p></a>
</div>
{% if is_getstarted != 'true' %}
<nav>
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
<ul class="nav-list">
@ -61,8 +63,12 @@
<li>
<a class="b link dim fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
</li>
<li>
<a class="b link dim" href="/get-started/">Get started</a>
</li>
</ul>
</nav>
{% endif %}
</div>
</section>
</div>
@ -74,6 +80,7 @@
</div>
{% endblock %}
{% if is_getstarted != 'true' %}
{% block outro %}
<div class="w-100 cclr-mid-yellow">
<div class="pt3 pb6 ph3" id="bg-cta-bottom">
@ -113,6 +120,7 @@
</div>
</div>
{% endblock %}
{% endif %}
<div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
<div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
<div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
@ -123,6 +131,7 @@
<p class="ma0">for everyone</p>
</div>
<div class="w-25-l mt3 mr3">
{% if is_getstarted != 'true' %}
<p class="ma0">
<a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
</p>
@ -135,8 +144,10 @@
<p class="ma0">
<a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
</p>
{% endif %}
</div>
<div class="w-25-l mt3 mr3">
{% if is_getstarted != 'true' %}
<p class="ma0">
<a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
</p>
@ -146,6 +157,7 @@
<p class="ma0">
<a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
</p>
{% endif %}
</div>
<div class="w-25-l mt3 tr-l">
{{ BUILD_DATE }}

View File

@ -0,0 +1,51 @@
{% extends "page.html" %}
{% set is_getstarted = 'true' %}
{% block content %}
<div class="w-100 mt5-ns" id="bg-feature">
<div class="pv5 ph4">
<div class="mw8 center flex flex-column flex-row-ns mb5 cclr-mid-mint">
<div class="w-100 w-60-ns">
<h2 class="f25 normal tc tl-ns ma0 mb3">
<em>Our alpha release</em>
</h2>
<p class="ma0 mb3 tc tl-ns">
Offen is in active development. Do something brave and test our latest alpha release today. Its free and always will be.
</p>
</div>
<div class="w-100 w-40-ns ml4-m ml6-l">
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
Single binary file for <br>Linux, Windows or MacOS
</p>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<div class="tc">
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ RELEASE_URL }}" rel="noopener" target="_blank">Open GitHub release page</a>
</div>
</div>
</div>
</div>
</div>
<div class="w-100" id="bg-outro">
<div class="pv5 ph4">
<div class="mw8 center flex flex-column flex-row-ns mb3 mb5 cclr-mid-yellow">
<div class="w-100 w-60-ns">
<h2 class="f25 normal tc tl-ns ma0 mb3">
<em class="em-extra">
Get started now
</em>
</h2>
<p class="ma0 mb3 tc tl-ns">
Running a website and need to collect usage statistics? Want to contribute as a developer? Our guides will help you kick off.
</p>
</div>
<div class="w-100 w-40-ns ml4-m ml6-l">
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
Details on how to run, use <br>and develop Offen
</p>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open guides</a>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@ -3,11 +3,19 @@
{% block content %}
<div class="w-100 mt5-ns cclr-mid-yellow">
<div class="mw8 center" id="bg-intro">
<div class="flex flex-wrap pt6-ns pt-3 ph4">
<div class="mw5 pr4 pb3">
<img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90">
<div class="flex justify-center pt6-ns pt5 ph4">
<div class="dn db-ns w-20 tr pr3 pb3">
<img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="58" height="63">
</div>
<div class="mw6">
<div class="w-100 w-80-ns">
<div class="flex">
<div class="db dn-ns intro-margin-a mb2 mr2">
<img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="40" height="43">
</div>
<h1 class="f1-ns f2 normal lh-solid ma0 mb1 intro-margin-b white">
Offen
</h1>
</div>
<h1 class="f1-ns f2 normal lh-solid ma0 mb3">
Transparent <span>web analytics</span>
</h1>
@ -15,7 +23,7 @@
Offen is an open source analytics software for websites <span>and web applications. It allows respectful handling of data </span> <span>for operators and users.</span>
</p>
<div class="pb6">
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/get-started/" rel="noopener">Start now</a>
</div>
</div>
</div>
@ -26,7 +34,7 @@
<div class="pt3 pb6 ph3" id="bg-feature">
<div class="mw8 center">
<div class="flex flex-wrap justify-around">
<div class="w55 mh3 pt5 tc">
<div class="w55 mh3 mt5 tc cclr-mid-mint">
<h2 class="f25 normal lh-solid ma0 mb3">
<em>Free & Open</em>
</h2>
@ -34,7 +42,7 @@
Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
</p>
</div>
<div class="w55 mh3 pt5 tc">
<div class="w55 mh3 mt5 tc cclr-mid-mint">
<h2 class="f25 normal lh-solid ma0 mb3">
<em>Fair & Secure</em>
</h2>
@ -42,7 +50,7 @@
Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
</p>
</div>
<div class="w55 mh3 pt5 tc">
<div class="w55 mh3 mt5 tc cclr-mid-mint">
<h2 class="f25 normal lh-solid ma0 mb3">
<em>Easy to use</em>
</h2>
@ -87,19 +95,49 @@
{% block outro %}
<div class="w-100 cclr-mid-yellow">
<div class="pt3 pb6 ph4" id="bg-outro">
<div class="flex justify-end mw6 center pt5">
<div class="w55 tr">
<h2 class="f25 normal lh-solid ma0 mb3">
Ethical internet
</h2>
<p class="mb4">
We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
</p>
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{PATREON_URL}}" rel="noopener" target="_blank">Support us</a>
<div class="w-100" id="bg-feature">
<div class="pv5 ph4">
<div class="mw8 center flex flex-column flex-row-ns mb5 cclr-mid-mint">
<div class="w-100 w-60-ns">
<h2 class="f25 normal tc tl-ns ma0 mb3">
<em>Our alpha release</em>
</h2>
<p class="ma0 mb3 tc tl-ns">
Offen is in active development. Do something brave and test our latest alpha release today. Its free and always will be.
</p>
</div>
<div class="w-100 w-40-ns ml4-m ml6-l">
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
Single binary file for <br>Linux, Windows or MacOS
</p>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<div class="tc">
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ RELEASE_URL }}" rel="noopener" target="_blank">Open GitHub release page</a>
</div>
</div>
</div>
</div>
</div>
<div class="w-100" id="bg-outro">
<div class="pv5 ph4">
<div class="mw8 center flex flex-column flex-row-ns mb3 mb5 cclr-mid-yellow">
<div class="w-100 w-60-ns">
<h2 class="f25 normal tc tl-ns ma0 mb3">
<em class="em-extra">
Get started now
</em>
</h2>
<p class="ma0 mb3 tc tl-ns">
Running a website and need to collect usage statistics? Want to contribute as a developer? Our guides will help you kick off.
</p>
</div>
<div class="w-100 w-40-ns ml4-m ml6-l">
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
Details on how to run, use <br>and develop Offen
</p>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open guides</a>
</div>
</div>
</div>
</div>
{% endblock %}