mirror of
https://github.com/offen/website.git
synced 2024-11-23 01:20:29 +01:00
480 lines
16 KiB
HTML
480 lines
16 KiB
HTML
{% extends "page.html" %}
|
|
|
|
{% block content %}
|
|
<div class="w-100 mt5-ns cclr-mid-yellow">
|
|
<div class="mw8 center" id="bg-intro">
|
|
<div class="flex justify-center 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="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>
|
|
<p class="ma0 mb4">
|
|
Offen is a fair alternative to common web analytics tools. <span>Pay respect to your users while gaining insight into their behavior. </span>Self hosted, open source and free.
|
|
</p>
|
|
<div class="pb5 mb2">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-100 cclr-bg-mint-mid">
|
|
<div class="mw8 flex flex-wrap justify-center center tc">
|
|
|
|
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
|
|
<div class="hx-feature" id="bg-feature-1">
|
|
|
|
<h2 class="f25 normal lh-solid ma0 mb3 pt5">
|
|
<em class="em-mint-1">
|
|
Free & Open
|
|
</em>
|
|
</h2>
|
|
<p class="wx18 center ma0">
|
|
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
|
|
<div class="hx-feature" id="bg-feature-2">
|
|
|
|
<h2 class="f25 normal lh-solid ma0 mb3 pt6">
|
|
<em class="em-mint-1">
|
|
Self hosted
|
|
</em>
|
|
</h2>
|
|
<p class="wx18 center ma0">
|
|
Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
|
|
<div class="hx-feature" id="bg-feature-3">
|
|
|
|
<h2 class="f25 normal lh-solid ma0 mb3 pt7">
|
|
<em class="em-mint-1">
|
|
Fair & Secure
|
|
</em>
|
|
</h2>
|
|
<p class="wx18 center ma0">
|
|
Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- INSIGHTS -->
|
|
<div class="w-100 dib bg-white">
|
|
<div class="tc mh4">
|
|
<p class="f1-ns f2 lh-solid ma0 mt6">
|
|
Gain insights in an ethical way
|
|
</p>
|
|
<div class="mw6 center">
|
|
<p class="f5 ma0 mt3 mb6 gray">
|
|
Web analytics is still an unfair and impenetrable business. A proper alternative to common tools is missing. Therefore we develop one. <a class="b link dim gray" href="/deep-dive/">Learn more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- COMPARE -->
|
|
<div class="w-100" id="bg-explainer">
|
|
<div class="mw8 center flex flex-wrap justify-center">
|
|
|
|
<!-- COMPARE A -->
|
|
<div class="w-50-l w-100">
|
|
|
|
<div class="w-100 dib cclr-bg-yellow-mid">
|
|
<div class="wx24 center">
|
|
<p class="f25 lh-solid ma0 mt6 mb3">
|
|
Your job
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-100 hx24 dib cclr-bg-white-fade">
|
|
<div class="wx24 center">
|
|
<div class="flex items-center mt4">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3 mr4-ns">
|
|
Self host Offen and thereby comply with GDPR guidelines.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center mt4">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3 mr4-ns">
|
|
Integrate the code snippet into pages you want to track.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center mt4">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3 mr4-ns">
|
|
Make your users aware of the access to their data.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center mt4">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3 mr4-ns">
|
|
Improve your services with fair and transparent insights.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- COMPARE B -->
|
|
<div class="w-50-l w-100">
|
|
|
|
<div class="w-100 dn db-l h3 bg-white">
|
|
</div>
|
|
|
|
<div class="w-100 dib cclr-bg-mint-mid">
|
|
<div class="wx24 center">
|
|
<p class="f25 lh-solid ma0 mt5 mb3">
|
|
Benefits for your users
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-100 hx24 dib cclr-bg-white-fade">
|
|
<div class="wx24 center">
|
|
<div class="flex items-center mt4">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3 mr4-ns">
|
|
Opt in to data collection or decide to not participate at all.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center mt4 mb2">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3 mr4-ns">
|
|
Review own data with detailed explanations of metrics and terms.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center mt4 mb2">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3 mr4-ns">
|
|
Only delete usage data or opt out completly at any time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- COMPARE C -->
|
|
<div class="w-50-l w-100">
|
|
|
|
<div class="w-100 hx50 dib cclr-bg-white-fade">
|
|
<div class="wx24 center">
|
|
<p class="f25 lh-solid ma0 mt5 mb4">
|
|
<em>
|
|
What you see
|
|
</em>
|
|
</p>
|
|
<p class="ma0 mb2 mr6-ns gray">
|
|
Data of all pages where your Offen installation is active.
|
|
</p>
|
|
<p class="ma0 mb4 gray">
|
|
For example:
|
|
</p>
|
|
|
|
<!-- BOX -->
|
|
<div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
|
|
<p class="f25 lh-solid ma0 mb2">
|
|
478
|
|
</p>
|
|
<p class="f7 lh-solid ma0 mb4">
|
|
Unique users
|
|
</p>
|
|
<p class="f25 lh-solid ma0 mb2">
|
|
2.530
|
|
</p>
|
|
<p class="f7 lh-solid ma0 mb4">
|
|
Unique sessions
|
|
</p>
|
|
<p class="f7 lh-solid pt2 ma0 mb3">
|
|
Top pages
|
|
</p>
|
|
<table class="f7 collapse dt--fixed mb4">
|
|
<tbody>
|
|
<tr class="striped--near-white">
|
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/</td>
|
|
</tr>
|
|
<tr class="striped--near-white">
|
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/blog/</td>
|
|
</tr>
|
|
<tr class="striped--near-white">
|
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/landing/</td>
|
|
</tr>
|
|
<tr class="striped--near-white">
|
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/otherpage/</td>
|
|
</tr>
|
|
<tr class="striped--near-white">
|
|
<td class="truncate pv2 pl2 pr1">https://sub.yourpage.org/</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- COMPARE D -->
|
|
<div class="w-50-l w-100">
|
|
|
|
<div class="w-100 hx50 dib cclr-bg-white-fade">
|
|
<div class="wx24 center">
|
|
<p class="f25 lh-solid ma0 mt5 mb4">
|
|
<em class="em-mint-2">
|
|
What your users see
|
|
</em>
|
|
</p>
|
|
<p class="ma0 mb2 mr5-ns gray">
|
|
Data of all pages a user has visited where your Offen installation is active.
|
|
</p>
|
|
<p class="ma0 mb4 gray">
|
|
For example:
|
|
</p>
|
|
|
|
<!-- BOX -->
|
|
<div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
|
|
<p class="f25 lh-solid ma0 mb2">
|
|
1
|
|
</p>
|
|
<p class="f7 lh-solid ma0 mb4">
|
|
Unique websites
|
|
</p>
|
|
<p class="f25 lh-solid ma0 mb2">
|
|
5
|
|
</p>
|
|
<p class="f7 lh-solid ma0 mb4">
|
|
Unique sessions
|
|
</p>
|
|
<p class="f7 lh-solid pt2 ma0 mb3">
|
|
Top pages
|
|
</p>
|
|
<table class="f7 collapse dt--fixed mb4">
|
|
<tbody>
|
|
<tr class="striped--near-white">
|
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/</td>
|
|
</tr>
|
|
<tr class="striped--near-white">
|
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/blog/</td>
|
|
</tr>
|
|
<tr class="striped--near-white">
|
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/otherpage/</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- COMPARE E -->
|
|
<div class="w-50-l w-100">
|
|
|
|
<div class="w-100 hx-features dib cclr-bg-yellow-mid">
|
|
<div class="wx24 center">
|
|
|
|
<p class="f25 lh-solid ma0 mt5">
|
|
More features
|
|
</p>
|
|
|
|
<div class="flex items-center mt4">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3">
|
|
Accounts can be shared within a team.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center mt4">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3">
|
|
User data is only stored for 6 months.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center mt4">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3">
|
|
In-browser screen for an intuitive setup.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center mt4 mb5">
|
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
|
<p class="ma0 ml3">
|
|
Detailed documentation is available.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- COMPARE F -->
|
|
<div class="w-50-l w-100">
|
|
|
|
<div class="w-100 hx-try-user dib cclr-bg-mint-mid">
|
|
<div class="wx24 center">
|
|
<p class="f25 lh-solid ma0 mt5">
|
|
Try as user
|
|
</p>
|
|
<p class="ma0 mt4 mr0 mr4-ns">
|
|
Offen is installed on this website. Access your actual usage data now.
|
|
</p>
|
|
<div class="mt4 mb6">
|
|
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/deep-dive/" rel="noopener">Open Auditorium</a>
|
|
</div>
|
|
</div>
|
|
<div class="w-100 dn db-l h4 bg-white">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- METRICS -->
|
|
<div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics">
|
|
|
|
|
|
<div class="wx24-metrics center">
|
|
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
|
<em>
|
|
Essential metrics
|
|
</em>
|
|
</p>
|
|
<p class="ma0 ml0 ml5-l w-100 w-33-l gray">
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- BOX 10 Real -->
|
|
<div class="relative">
|
|
<div class="relative absolute-m absolute-l stackbox-10 center">
|
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
|
<p class="lh-solid ma0 mb4">
|
|
Real time
|
|
</p>
|
|
<img src="/theme/images/gfx-metrics-real.svg" alt="temp" width="320px" class="mb3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOX 20 Bars -->
|
|
<div class="relative">
|
|
<div class="relative absolute-m absolute-l stackbox-20 center">
|
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
|
<p class="lh-solid ma0 mb4">
|
|
Page views and users
|
|
</p>
|
|
<img src="/theme/images/gfx-metrics-bars.svg" alt="temp" width="320px" class="mb3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOX 30 Key -->
|
|
<div class="relative">
|
|
<div class="relative absolute-m absolute-l stackbox-30 center">
|
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
|
<p class="lh-solid ma0 mb4">
|
|
Key metrics
|
|
</p>
|
|
<img src="/theme/images/gfx-metrics-key.svg" alt="temp" width="320px" class="mb3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOX 40 Pages -->
|
|
<div class="relative">
|
|
<div class="relative absolute-m absolute-l stackbox-40 center">
|
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
|
<p class="lh-solid ma0 mb4">
|
|
Top pages
|
|
</p>
|
|
<img src="/theme/images/gfx-metrics-pages.svg" alt="temp" width="320px" class="mb3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOX 50 Retention -->
|
|
<div class="relative">
|
|
<div class="relative absolute-m absolute-l stackbox-50 center mb5 mb0-ns">
|
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
|
<p class="lh-solid ma0 mb4">
|
|
Weekly retention
|
|
</p>
|
|
<img src="/theme/images/gfx-metrics-retention.svg" alt="temp" width="320px" class="mb3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="w-100 dib bg-white">
|
|
<div class="tc mh4">
|
|
<p class="f1-ns f2 lh-solid ma0 mt6 mb5">
|
|
Switch to fair web analytics
|
|
</p>
|
|
<div class="flex flex flex-wrap justify-center">
|
|
<div class="mw5 mb5 mh0 mh4-ns">
|
|
<p class="tc f5 ma0 gray mb3">
|
|
Single binary file for Linux, Windows or MacOS
|
|
</p>
|
|
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="#" rel="noopener">Download demo</a>
|
|
</div>
|
|
<div class="mw5 mb7 mh0 mh4-ns">
|
|
<p class="tc f5 ma0 gray mb3">
|
|
All you need to use Offen in production
|
|
</p>
|
|
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endblock %}
|
|
|
|
{% block outro %}
|
|
{% endblock %}
|