2
0
mirror of https://github.com/offen/website.git synced 2024-12-24 05:40:22 +01:00
website/homepage/theme/templates/index.html
2020-04-24 07:46:37 +02:00

407 lines
13 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" id="bg-feature">
<div class="center">
<div class="flex flex-wrap justify-center w-100">
<div class="flex justify-center w55-container" id="bg-feature-1">
<div class="w56 tc pa3">
<h2 class="f25 normal lh-solid mt5 mb3">
<em class="em-mint-1">
Free & Open
</em>
</h2>
<p class="ma0 mb5">
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
</p>
</div>
</div>
<div class="flex justify-center w55-container" id="bg-feature-3">
<div class="w56 tc pa3">
<h2 class="f25 normal lh-solid mt6 mb3">
<em class="em-mint-1">
Self hosted
</em>
</h2>
<p class="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="flex justify-center w55-container" id="bg-feature-2">
<div class=" w56 tc pa3">
<h2 class="f25 normal lh-solid mt7 mb3">
<em class="em-mint-1">
Fair & Secure
</em>
</h2>
<p class="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>
</div>
<!-- INSIGHTS -->
<div class="w-100 dib bg-white">
<div class="mh4">
<p class="tc f1-ns f2 lh-solid ma0 mt5">
Gain insights in an ethical way
</p>
<div class="mw6 center">
<p class="tc f5 ma0 mt3 mb5 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">
<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="lh-solid ma0 mb4">
Unique users
</p>
<p class="f25 lh-solid ma0 mb2">
2.530
</p>
<p class="lh-solid ma0 mb4">
Unique sessions
</p>
<p class="lh-solid pt2 ma0 mb3">
Top pages
</p>
<table class="f7 f5-ns collapse dt--fixed mb4">
<tbody>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/blog/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/landing/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/otherpage/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://sub.yourpage.xyz/</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="lh-solid ma0 mb4">
Unique websites
</p>
<p class="f25 lh-solid ma0 mb2">
5
</p>
<p class="lh-solid ma0 mb4">
Unique sessions
</p>
<p class="lh-solid pt2 ma0 mb3">
Top pages
</p>
<table class="f7 f5-ns collapse dt--fixed mb4">
<tbody>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/blog/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/otherpage/</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- COMPARE E -->
<div class="w-50-l w-100">
<div class="w-100 hx30 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 hx30 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-light-gray">
</div>
</div>
</div>
<!-- METRICS -->
<div class="relative w-100 hx200 dib cclr-bg-white-fade">
<p class="f25 lh-solid ma0 ml5 mt5">
<em>
Essential metrics
</em>
</p>
<!-- BOX 1 -->
<div class="absolute stackbox-1">
<div class="w-100 h-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
<p class="">
temp1
</p>
</div>
</div>
<!-- BOX 2 -->
<div class="absolute stackbox-2">
<div class="w-100 h-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
<p class="">
temp2
</p>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block outro %}
{% endblock %}