2
0
mirror of https://github.com/offen/website.git synced 2024-11-27 03:00:25 +01:00
website/homepage/theme/templates/index.html

708 lines
26 KiB
HTML
Raw Normal View History

2019-12-22 19:02:00 +01:00
{% extends "page.html" %}
{% block content %}
2020-04-25 21:34:32 +02:00
<div class="w-100 mt5-ns cclr-bg-yellow-mid">
<div class="mw8 center">
2020-05-31 20:22:33 +02:00
<div class="flex justify-center pt3 ph4">
2020-02-01 21:47:08 +01:00
<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">
2019-12-22 15:22:13 +01:00
</div>
2020-02-01 21:47:08 +01:00
<div class="w-100 w-80-ns">
<div class="flex">
2020-02-01 23:16:55 +01:00
<div class="db dn-ns intro-margin-a mb2 mr2">
2020-02-01 21:47:08 +01:00
<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>
2020-01-28 14:38:52 +01:00
<h1 class="f1-ns f2 normal lh-solid ma0 mb3">
2019-12-22 19:02:00 +01:00
Transparent <span>web analytics</span>
</h1>
<p class="ma0 mb4">
2020-05-31 20:22:33 +02:00
Offen is a fair alternative to common web analytics tools. <span>Gain insights while your users have full access to their data. </span>Self hosted, open source and free.
2019-12-22 19:02:00 +01:00
</p>
2020-02-25 19:41:09 +01:00
<div class="pb5 mb2">
2020-04-27 21:51:46 +02:00
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="#bg-explainer" rel="noopener">Learn more</a>
2019-12-22 19:02:00 +01:00
</div>
</div>
</div>
</div>
</div>
2020-04-27 21:51:46 +02:00
<!-- FEATURE -->
2020-04-26 20:06:13 +02:00
<div class="w-100 overflow-hidden cclr-bg-mint-mid">
<div id="bg-pattern">
2020-04-25 13:40:22 +02:00
2020-04-26 20:06:13 +02:00
<div class="mw8 flex flex-wrap justify-center center tc">
2020-04-25 13:40:22 +02:00
2020-04-26 20:06:13 +02:00
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature">
<div class="relative">
<div class="absolute bg-feature-1">
<img src="/theme/images/gfx-feature-1.png" alt="feature-2" width="640px" height="480px">
</div>
2020-04-26 13:44:53 +02:00
</div>
2020-04-26 20:06:13 +02:00
<h2 class="f2 normal lh-solid ma0 mb3 pt5">
<em class="em-mint-1">
2020-04-29 10:46:22 +02:00
Free & open
2020-04-26 20:06:13 +02:00
</em>
</h2>
<p class="wx18 center ma0">
2020-04-27 08:01:30 +02:00
<i>Our</i> open source code <i>can be fully audited by the community. It will always be</i> available for free. <i>Seriously.</i>
2020-04-26 20:06:13 +02:00
</p>
2020-04-25 13:40:22 +02:00
2020-04-26 20:06:13 +02:00
</div>
2020-04-25 13:40:22 +02:00
</div>
2020-04-26 20:06:13 +02:00
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
<div class="hx-feature" id="bg-feature-2">
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-2">
<em class="em-mint-1">
Self hosted
</em>
</h2>
<p class="wx18 center ma0">
2020-04-27 08:01:30 +02:00
Comply with GDPR <i>guidelines. Don't share data with third parties. Your</i> users have full access <i>to their data.</i>
2020-04-26 20:06:13 +02:00
</p>
</div>
2020-04-25 13:40:22 +02:00
</div>
2020-04-26 20:06:13 +02:00
<div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature">
2020-04-25 13:40:22 +02:00
2020-04-26 20:06:13 +02:00
<div class="relative">
<div class="absolute bg-feature-3">
<img src="/theme/images/gfx-feature-3.png" alt="feature-3" width="640px" height="480px">
</div>
</div>
2020-04-25 13:40:22 +02:00
2020-04-26 20:06:13 +02:00
<div>
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
<em class="em-mint-1">
2020-04-29 10:46:22 +02:00
Fair & secure
2020-04-26 20:06:13 +02:00
</em>
</h2>
<p class="wx18 center ma0">
2020-05-21 07:38:16 +02:00
Opt in only. <i>Users must actively give their consent to data collection. All data is</i> encrypted end-to-end.
2020-04-26 20:06:13 +02:00
</p>
2020-04-26 13:44:53 +02:00
</div>
</div>
2020-04-25 13:40:22 +02:00
</div>
2020-04-26 20:06:13 +02:00
2020-04-25 13:40:22 +02:00
</div>
</div>
2020-02-23 23:21:26 +01:00
</div>
2020-04-22 21:32:41 +02:00
<!-- INSIGHTS -->
<div class="w-100 dib bg-white">
2020-04-25 08:16:43 +02:00
<div class="tc mh4">
<p class="f1-ns f2 lh-solid ma0 mt6">
2020-04-23 13:29:00 +02:00
Gain insights in an ethical way
2020-04-22 21:32:41 +02:00
</p>
2020-04-27 08:01:30 +02:00
<div class="mw7 center">
<p class="f5 ma0 mt3 mb6 mh0 mh3-m mh5-l">
Web analytics <i>is still an unfair and impenetrable business.</i> A proper alternative to common tools <i>is missing. Therefore we develop one.</i> <a class="b link dim cclr-fnt-black-mid" href="/deep-dive/">Deep dive</a>
2020-04-23 13:29:00 +02:00
</p>
</div>
2020-04-22 21:32:41 +02:00
</div>
</div>
<!-- COMPARE -->
2020-04-25 08:16:43 +02:00
<div class="w-100" id="bg-explainer">
2020-04-23 13:29:00 +02:00
<div class="mw8 center flex flex-wrap justify-center">
2020-04-22 21:32:41 +02:00
2020-04-24 07:46:37 +02:00
<!-- COMPARE A -->
2020-04-26 20:06:13 +02:00
<div class="w-50-l w-100 cclr-bg-yellow-mid">
2020-04-22 21:32:41 +02:00
2020-04-27 08:01:30 +02:00
<div class="w-100 dib">
<div class="wx24 center">
<div class="relative">
<div class="absolute bg-compare-a-pfeil">
<img src="/theme/images/gfx-compare-a-pfeil.png" alt="arrow" width="40px" height=="120px">
</div>
2020-04-25 22:54:20 +02:00
</div>
2020-04-27 08:01:30 +02:00
<p class="f25 lh-solid ma0 mt6 mb3">
Your job
</p>
</div>
2020-04-22 21:32:41 +02:00
</div>
2020-04-22 20:07:07 +02:00
2020-04-23 13:29:00 +02:00
<div class="w-100 hx24 dib cclr-bg-white-fade">
2020-04-23 22:09:36 +02:00
<div class="wx24 center">
2020-04-25 21:34:32 +02:00
<div class="flex flex-wrap justify-center">
<div class="w-20 mt4">
<img src="/theme/images/gfx-compare-a.png" alt="numbers" width="75px" height="315px">
</div>
<div class="w-80 mt4">
<p class="ma0 ml3">
2020-04-28 15:51:34 +02:00
Self host <i>Offen in compliance with GDPR guidelines.</i>
2020-04-25 21:34:32 +02:00
</p>
<p class="ma0 ml3 mt4">
2020-04-27 08:01:30 +02:00
<i>Integrate the</i> code snippet <i>into pages you want to track.</i>
2020-04-25 21:34:32 +02:00
</p>
<p class="ma0 ml3 mt4">
2020-04-28 15:51:34 +02:00
<i>Make your</i> users aware <i>of the ability to access their data.</i>
2020-04-25 21:34:32 +02:00
</p>
<p class="ma0 ml3 mt4 mb5">
2020-04-28 19:28:35 +02:00
<i>Improve your service with</i> fair and transparent insights.
2020-04-25 21:34:32 +02:00
</p>
</div>
2020-04-23 13:29:00 +02:00
</div>
2020-04-25 21:34:32 +02:00
2020-04-22 21:32:41 +02:00
</div>
</div>
2020-04-23 13:29:00 +02:00
</div>
2020-04-24 07:46:37 +02:00
<!-- COMPARE B -->
2020-04-23 13:29:00 +02:00
<div class="w-50-l w-100">
<div class="w-100 dn db-l h3 bg-white">
</div>
2020-04-22 20:07:07 +02:00
2020-04-26 20:06:13 +02:00
<div class="w-100 dib cclr-bg-mint-mid">
2020-04-23 22:09:36 +02:00
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb3">
2020-04-23 13:29:00 +02:00
Benefits for your users
</p>
</div>
</div>
2020-04-22 20:07:07 +02:00
2020-04-23 13:29:00 +02:00
<div class="w-100 hx24 dib cclr-bg-white-fade">
2020-04-23 22:09:36 +02:00
<div class="wx24 center">
2020-04-25 21:34:32 +02:00
2020-04-26 08:52:20 +02:00
<div class="relative">
<div class="absolute bg-compare-b-smile">
<img src="/theme/images/gfx-compare-b-smile.png" alt="smile" width="210px" height="140px">
</div>
</div>
2020-04-25 21:34:32 +02:00
<div class="flex flex-wrap justify-center">
2020-04-26 08:52:20 +02:00
2020-04-25 21:34:32 +02:00
<div class="w-20 mt4">
<img src="/theme/images/gfx-compare-b.png" alt="ok" width="75px" height="315px">
</div>
<div class="w-80 mt4">
<p class="ma0 ml3">
2020-04-27 08:01:30 +02:00
Opt in to data collection <i>or decide to not participate at all.</i>
2020-04-25 21:34:32 +02:00
</p>
<p class="ma0 ml3 mt4">
2020-04-27 08:01:30 +02:00
Review own data <i>with detailed explanations of metrics and terms.</i>
2020-04-25 21:34:32 +02:00
</p>
<p class="ma0 ml3 mt4">
2020-04-28 19:28:35 +02:00
<i>Opt out completely at any time or only</i> delete existing usage data.
2020-04-25 21:34:32 +02:00
</p>
2020-04-26 08:52:20 +02:00
2020-04-25 21:34:32 +02:00
</div>
2020-04-23 13:29:00 +02:00
</div>
2020-04-25 21:34:32 +02:00
2020-04-23 13:29:00 +02:00
</div>
</div>
2020-04-22 20:07:07 +02:00
2020-04-23 22:09:36 +02:00
</div>
2020-04-24 07:46:37 +02:00
<!-- COMPARE C -->
2020-04-23 22:09:36 +02:00
<div class="w-50-l w-100">
2020-04-26 13:44:53 +02:00
<div class="w-100 hx-compare-c dib cclr-bg-white-fade">
2020-04-27 08:01:30 +02:00
<div class="h-100" id="bg-pattern">
2020-04-26 08:52:20 +02:00
2020-04-27 08:01:30 +02:00
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4">
<em>
What you see
</em>
2020-04-23 22:09:36 +02:00
</p>
2020-04-27 08:01:30 +02:00
<p class="ma0 mb2 mr6-ns gray">
Data of all pages where your Offen installation is active.
2020-04-23 22:09:36 +02:00
</p>
2020-04-27 08:01:30 +02:00
<p class="ma0 mb4 gray">
2020-04-28 19:28:35 +02:00
For example
2020-04-23 22:09:36 +02:00
</p>
2020-04-27 08:01:30 +02:00
<!-- BOX -->
<div class="w-100 dib br2 pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
<div class="relative">
<div class="absolute bg-compare-c-pfeil">
<img src="/theme/images/gfx-compare-c-pfeil.png" alt="arrow" width="150px" height="150px">
</div>
</div>
<p class="f25 lh-solid ma0 mb2">
2020-04-28 19:28:35 +02:00
859
2020-04-27 08:01:30 +02:00
</p>
<p class="f7 lh-solid ma0 mb4">
Unique users
</p>
<p class="f25 lh-solid ma0 mb2">
2020-04-28 19:28:35 +02:00
3.372
2020-04-27 08:01:30 +02:00
</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>
2020-04-23 22:09:36 +02:00
</div>
</div>
2020-04-23 13:29:00 +02:00
</div>
2020-04-22 20:07:07 +02:00
2020-04-22 21:32:41 +02:00
</div>
2020-04-23 13:29:00 +02:00
2020-04-23 22:09:36 +02:00
<!-- COMPARE D -->
2020-04-24 07:46:37 +02:00
<div class="w-50-l w-100">
2020-04-23 22:09:36 +02:00
2020-04-26 13:44:53 +02:00
<div class="w-100 hx-compare-d dib cclr-bg-white-fade">
2020-04-27 21:51:46 +02:00
<div class="h-100" id="bg-pattern">
2020-04-24 07:46:37 +02:00
2020-04-27 21:51:46 +02:00
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4">
<em class="em-mint-2">
What your users see
</em>
2020-04-24 07:46:37 +02:00
</p>
2020-04-27 21:51:46 +02:00
<p class="ma0 mb2 mr5-ns gray">
Data of all pages a user has visited where your Offen installation is active.
2020-04-24 07:46:37 +02:00
</p>
2020-04-27 21:51:46 +02:00
<p class="ma0 mb4 gray">
2020-04-28 19:28:35 +02:00
For example
2020-04-24 07:46:37 +02:00
</p>
2020-04-23 22:09:36 +02:00
2020-04-27 21:51:46 +02:00
<!-- BOX -->
<div class="w-100 dib br2 mb5 mb0-l 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">
2020-04-28 19:28:35 +02:00
Unique website
2020-04-27 21:51:46 +02:00
</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>
2020-04-27 08:01:30 +02:00
2020-04-27 21:51:46 +02:00
</div>
2020-04-27 08:01:30 +02:00
2020-04-27 21:51:46 +02:00
</div>
2020-04-24 07:46:37 +02:00
</div>
2020-04-23 22:09:36 +02:00
2020-04-24 07:46:37 +02:00
</div>
<!-- COMPARE E -->
<div class="w-50-l w-100">
2020-04-26 08:52:20 +02:00
<div class="w-100 hx-more dib cclr-bg-yellow-mid">
2020-04-24 07:46:37 +02:00
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5">
More features
</p>
2020-04-25 21:34:32 +02:00
<div class="flex flex-wrap justify-center">
<div class="w-20 mt4">
<img src="/theme/images/gfx-compare-e.png" alt="plus" width="75px" height="315px">
</div>
<div class="w-80 mt4">
<p class="ma0">
2020-04-28 15:51:34 +02:00
All your accounts can be shared <i class="i-on-yellow">within your team.</i>
2020-04-25 21:34:32 +02:00
</p>
<p class="ma0 mt4">
2020-04-28 15:51:34 +02:00
<i class="i-on-yellow">User</i> data is only stored for 6 months <i class="i-on-yellow">and then deleted.</i>
2020-04-25 21:34:32 +02:00
</p>
<p class="ma0 mt4">
2020-04-28 15:51:34 +02:00
<i class="i-on-yellow">Use the</i> in-browser screen <i class="i-on-yellow">for a more intuitive setup.</i>
2020-04-25 21:34:32 +02:00
</p>
<p class="ma0 mt4 mb5">
2020-04-28 15:51:34 +02:00
<i class="i-on-yellow">A</i> detailed documentation <i class="i-on-yellow">on how to run Offen is available.</i>
2020-04-25 21:34:32 +02:00
</p>
</div>
2020-04-24 07:46:37 +02:00
</div>
</div>
</div>
</div>
<!-- COMPARE F -->
<div class="w-50-l w-100">
2020-04-23 22:09:36 +02:00
2020-04-25 08:16:43 +02:00
<div class="w-100 hx-try-user dib cclr-bg-mint-mid">
2020-04-24 07:46:37 +02:00
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5">
Try as user
</p>
<p class="ma0 mt4 mr0 mr4-ns">
2020-04-27 08:01:30 +02:00
<i>Offen is installed on this website. Access</i> your actual usage data <i>now.</i>
2020-04-24 07:46:37 +02:00
</p>
2020-04-25 21:34:32 +02:00
<div class="mt4">
2020-04-27 21:51:46 +02:00
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ OFFEN_AUDITORIUM_URL }}" target="_blank" rel="noopener">Open Auditorium</a>
2020-04-25 21:34:32 +02:00
<img src="/theme/images/gfx-compare-f-scribble.png" alt="smile" width="300px" height="100px">
2020-04-24 07:46:37 +02:00
</div>
</div>
2020-04-25 08:16:43 +02:00
<div class="w-100 dn db-l h4 bg-white">
2020-04-23 22:09:36 +02:00
</div>
2020-04-24 07:46:37 +02:00
</div>
2020-04-23 22:09:36 +02:00
2020-04-24 07:46:37 +02:00
</div>
2020-04-23 22:09:36 +02:00
2020-04-24 07:46:37 +02:00
<!-- METRICS -->
2020-04-25 08:16:43 +02:00
<div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics">
2020-04-27 08:01:30 +02:00
<div class="h-100" id="bg-pattern">
2020-04-23 22:09:36 +02:00
2020-04-27 08:01:30 +02:00
<div class="wx24-metrics center">
2020-04-24 21:02:01 +02:00
2020-04-27 08:01:30 +02:00
<div class="relative">
<div class="absolute bg-metrics-bulb">
<img src="/theme/images/gfx-metrics-bulb.png" alt="smile" width="170px" height="170px">
</div>
2020-04-26 13:44:53 +02:00
</div>
2020-04-27 08:01:30 +02:00
<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 mb5">
All important statistics <i>that help you to improve your service. Collected</i> without violating the privacy of your users.
</p>
</div>
2020-04-23 22:09:36 +02:00
2020-04-27 08:01:30 +02:00
<!-- 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>
2020-04-25 13:40:22 +02:00
</div>
</div>
2020-04-27 08:01:30 +02:00
<!-- 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>
2020-04-24 12:38:35 +02:00
</div>
2020-04-24 07:46:37 +02:00
</div>
2020-04-23 22:09:36 +02:00
2020-04-27 08:01:30 +02:00
<!-- 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>
2020-04-24 16:35:37 +02:00
</div>
2020-04-24 07:46:37 +02:00
</div>
2020-04-24 16:35:37 +02:00
2020-04-27 08:01:30 +02:00
<!-- 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>
2020-04-24 21:02:01 +02:00
</div>
</div>
2020-04-23 22:09:36 +02:00
2020-04-27 08:01:30 +02:00
<!-- 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>
2020-04-24 21:02:01 +02:00
</div>
</div>
2020-04-23 22:09:36 +02:00
2020-04-27 08:01:30 +02:00
</div>
2020-04-24 21:02:01 +02:00
</div>
2020-04-23 13:29:00 +02:00
2020-05-20 20:50:59 +02:00
<!-- TABLE -->
<div class="w-100">
2020-05-20 22:21:23 +02:00
<div class="w-100 hx-difference dib cclr-bg-white-fade">
2020-05-20 20:50:59 +02:00
<div class="h-100" id="bg-pattern">
2020-05-20 22:21:23 +02:00
<div class="wx24-metrics center">
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
<em>
Make a difference
</em>
</p>
</div>
2020-05-20 20:50:59 +02:00
<!-- BOX -->
2020-05-20 22:21:23 +02:00
<div class="mh0 mh5-l">
2020-05-24 20:08:40 +02:00
<div class="w-100 dib br0 br2-l mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
<div class="relative">
<div class="absolute bg-table">
2020-05-24 20:17:15 +02:00
<img src="/theme/images/gfx-table-fade.png" alt="fade" width="100px" height="290px">
2020-05-24 20:08:40 +02:00
</div>
</div>
2020-05-20 22:21:23 +02:00
<div class="hscroll">
<table class="f7 tc collapse dt--fixed mb3">
<tbody>
<tr>
<td class="wx-table-a truncate pv2 pl2 pr1"></td>
<td class="wx-table-b truncate pv2 pl2 pr1 gray">Google Analytics</td>
<td class="wx-table-b truncate pv2 pl2 pr1 gray">Matomo On-Premise</td>
2020-05-21 07:27:15 +02:00
<td class="wx-table-c truncate pv2 pl2 pr1 gray">Fathom</td>
2020-05-24 20:08:40 +02:00
<td class="wx-table-d truncate pv2 pl2 pr1">Offen</td>
2020-05-20 22:21:23 +02:00
</tr>
<tr class="bg-near-white">
2020-05-20 22:25:03 +02:00
<td class="tl truncate pv2 pl2 pr1">Fully self hosted</td>
2020-05-20 22:21:23 +02:00
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
2020-05-24 20:08:40 +02:00
<td class="wx-table-d truncate pv2 pl2 pr1">
2020-05-20 22:21:23 +02:00
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
</svg>
</td>
</tr>
<tr>
<td class="tl truncate pv2 pl2 pr1">Open Source code</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
2020-05-24 20:08:40 +02:00
<td class="wx-table-d truncate pv2 pl2 pr1">
2020-05-20 22:21:23 +02:00
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
</svg>
</td>
</tr>
<tr class="bg-near-white">
<td class="tl truncate pv2 pl2 pr1">Data can be exported</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
</svg>
</td>
2020-05-24 20:08:40 +02:00
<td class="wx-table-d truncate pv2 pl2 pr1">
2020-05-20 22:21:23 +02:00
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
</tr>
<tr>
2020-05-21 07:27:15 +02:00
<td class="tl truncate pv2 pl2 pr1">Users can see and manage own data</td>
2020-05-20 22:21:23 +02:00
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
2020-05-24 20:08:40 +02:00
<td class="wx-table-d truncate pv2 pl2 pr1">
2020-05-20 22:21:23 +02:00
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
</svg>
</td>
</tr>
<tr class="bg-near-white">
2020-05-21 07:27:15 +02:00
<td class="tl truncate pv2 pl2 pr1">Opt in only data collection</td>
2020-05-20 22:21:23 +02:00
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
<td class="truncate pv2 pl2 pr1">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
</svg>
</td>
2020-05-24 20:08:40 +02:00
<td class="wx-table-d truncate pv2 pl2 pr1">
2020-05-20 22:21:23 +02:00
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
</svg>
</td>
</tr>
</tbody>
</table>
2020-05-20 20:50:59 +02:00
2020-05-20 22:21:23 +02:00
</div>
2020-05-20 20:50:59 +02:00
</div>
</div>
</div>
</div>
</div>
2020-04-22 21:32:41 +02:00
</div>
2020-04-23 13:29:00 +02:00
</div>
2020-04-22 21:32:41 +02:00
2020-04-25 08:16:43 +02:00
<!-- CTA -->
<div class="w-100 dib bg-white">
2020-04-26 13:44:53 +02:00
2020-04-25 08:16:43 +02:00
<div class="tc mh4">
2020-04-26 13:44:53 +02:00
<div class="relative">
<div class="absolute bg-cta-pfeil">
<img src="/theme/images/gfx-cta-pfeil.png" alt="arrow" width="150px" height="150px">
</div>
</div>
2020-04-25 08:16:43 +02:00
<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">
2020-04-27 13:10:08 +02:00
<p class="tc f5 ma0 mb3 gray mh4">
2020-04-27 21:51:46 +02:00
Test drive Offen on your system today
2020-04-25 08:16:43 +02:00
</p>
2020-04-27 21:51:46 +02:00
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/try-demo/" rel="noopener">Try demo</a>
2020-04-25 08:16:43 +02:00
</div>
<div class="mw5 mb7 mh0 mh4-ns">
2020-04-27 09:29:06 +02:00
<p class="tc f5 ma0 mb3 mh4">
2020-04-27 21:51:46 +02:00
All you need to use Offen in production
2020-04-25 08:16:43 +02:00
</p>
2020-04-27 21:51:46 +02:00
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
2020-04-25 08:16:43 +02:00
</div>
</div>
</div>
</div>
2020-04-22 21:32:41 +02:00
{% endblock %}
{% block outro %}
{% endblock %}