2
0
mirror of https://github.com/offen/website.git synced 2024-12-23 13:30:20 +01:00

compare operator user 03

This commit is contained in:
Hendrik Niefeld 2020-04-23 22:09:36 +02:00
parent 1bf44206c6
commit e59a3597eb
2 changed files with 227 additions and 32 deletions

View File

@ -23,6 +23,17 @@ COLORS NEW
background-color: #DEF0ED;
}
/* Black */
.cclr-bg-black-mid {
background-color: #39352A;
}
.cclr-fnt-black-mid {
color: #39352A;
}
.cclr-brd-black-mid {
color: #39352A;
}
/* White */
.cclr-bg-white-fade {
background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F9F7F2;
@ -114,16 +125,22 @@ LAYOUT
}
/* NEW */
.wx28 {
width: 28rem;
.wx24 {
width: 24rem;
}
.hx24 {
height: 24rem;
}
.hx30 {
height: 30rem;
}
.hx50 {
height: 50rem;
}
/* Tachyons breakpoints 30 & 60 */
@media only screen and (max-width: 30em) {
.wx28 {
width: 100%;
.wx24 {
width: 86%;
}
}
@ -156,10 +173,14 @@ em {
background: linear-gradient(transparent 66%, #fde28c 66%);
font-style: normal;
}
.em-mint {
.em-mint-1 {
background: linear-gradient(transparent 66%, #E5FDF8 66%);
font-style: normal;
}
.em-mint-2 {
background: linear-gradient(transparent 66%, #BBD9D3 66%);
font-style: normal;
}
hr {
margin-left: -1rem;
margin-right: -1rem;

View File

@ -36,7 +36,7 @@
<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">
<em class="em-mint-1">
Free & Open
</em>
</h2>
@ -48,7 +48,7 @@
<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">
<em class="em-mint-1">
Self hosted
</em>
</h2>
@ -60,7 +60,7 @@
<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">
<em class="em-mint-1">
Fair & Secure
</em>
</h2>
@ -96,39 +96,40 @@
<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="wx28 center">
<p class="f25 lh-solid ma0 mt6 mb3 mh4">
<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="wx28 center">
<div class="flex items-center mt4 mh4">
<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">
<p class="ma0 ml3 mr4-ns">
Self host Offen and thereby comply with GDPR guidelines.
</p>
</div>
<div class="flex items-center mt4 mh4">
<div class="flex items-center mt4">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
<p class="ma0 ml3 mr4-ns">
Integrate the code snippet into pages you want to track.
</p>
</div>
<div class="flex items-center mt4 mh4">
<div class="flex items-center mt4">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
<p class="ma0 ml3 mr4-ns">
Make your users aware of the access to their data.
</p>
</div>
<div class="flex items-center mt4 mh4">
<div class="flex items-center mt4">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
<p class="ma0 ml3 mr4-ns">
Improve your services with fair and transparent insights.
</p>
</div>
@ -137,49 +138,221 @@
</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="wx28 center">
<p class="f25 lh-solid ma0 mt5 mb3 mh4">
<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="wx28 center">
<div class="flex items-center mt4 mh4">
<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">
<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 mh4">
<div class="flex items-center mt4 mb2">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
<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 mh4">
<div class="flex items-center mt4 mb2">
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
<p class="ma0 ml3">
Delete only usage data or opt out completly at any time.
<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">
2
</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>
</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 bg-white">
</div>
</div>
</div>
</div>
</div>
@ -194,6 +367,7 @@
{% endblock %}
{% block outro %}