mirror of
https://github.com/offen/website.git
synced 2024-11-22 09:00:28 +01:00
compare operator user 03
This commit is contained in:
parent
1bf44206c6
commit
e59a3597eb
@ -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;
|
||||
|
||||
@ -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 %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user