mirror of
https://github.com/offen/website.git
synced 2024-11-22 17:10:29 +01:00
compare operator user 03
This commit is contained in:
parent
1bf44206c6
commit
e59a3597eb
@ -23,6 +23,17 @@ COLORS NEW
|
|||||||
background-color: #DEF0ED;
|
background-color: #DEF0ED;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Black */
|
||||||
|
.cclr-bg-black-mid {
|
||||||
|
background-color: #39352A;
|
||||||
|
}
|
||||||
|
.cclr-fnt-black-mid {
|
||||||
|
color: #39352A;
|
||||||
|
}
|
||||||
|
.cclr-brd-black-mid {
|
||||||
|
color: #39352A;
|
||||||
|
}
|
||||||
|
|
||||||
/* White */
|
/* White */
|
||||||
.cclr-bg-white-fade {
|
.cclr-bg-white-fade {
|
||||||
background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F9F7F2;
|
background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F9F7F2;
|
||||||
@ -114,16 +125,22 @@ LAYOUT
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* NEW */
|
/* NEW */
|
||||||
.wx28 {
|
.wx24 {
|
||||||
width: 28rem;
|
width: 24rem;
|
||||||
}
|
}
|
||||||
.hx24 {
|
.hx24 {
|
||||||
height: 24rem;
|
height: 24rem;
|
||||||
}
|
}
|
||||||
|
.hx30 {
|
||||||
|
height: 30rem;
|
||||||
|
}
|
||||||
|
.hx50 {
|
||||||
|
height: 50rem;
|
||||||
|
}
|
||||||
/* Tachyons breakpoints 30 & 60 */
|
/* Tachyons breakpoints 30 & 60 */
|
||||||
@media only screen and (max-width: 30em) {
|
@media only screen and (max-width: 30em) {
|
||||||
.wx28 {
|
.wx24 {
|
||||||
width: 100%;
|
width: 86%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -156,10 +173,14 @@ em {
|
|||||||
background: linear-gradient(transparent 66%, #fde28c 66%);
|
background: linear-gradient(transparent 66%, #fde28c 66%);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
.em-mint {
|
.em-mint-1 {
|
||||||
background: linear-gradient(transparent 66%, #E5FDF8 66%);
|
background: linear-gradient(transparent 66%, #E5FDF8 66%);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
.em-mint-2 {
|
||||||
|
background: linear-gradient(transparent 66%, #BBD9D3 66%);
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
hr {
|
hr {
|
||||||
margin-left: -1rem;
|
margin-left: -1rem;
|
||||||
margin-right: -1rem;
|
margin-right: -1rem;
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
<div class="flex justify-center w55-container" id="bg-feature-1">
|
<div class="flex justify-center w55-container" id="bg-feature-1">
|
||||||
<div class="w56 tc pa3">
|
<div class="w56 tc pa3">
|
||||||
<h2 class="f25 normal lh-solid mt5 mb3">
|
<h2 class="f25 normal lh-solid mt5 mb3">
|
||||||
<em class="em-mint">
|
<em class="em-mint-1">
|
||||||
Free & Open
|
Free & Open
|
||||||
</em>
|
</em>
|
||||||
</h2>
|
</h2>
|
||||||
@ -48,7 +48,7 @@
|
|||||||
<div class="flex justify-center w55-container" id="bg-feature-3">
|
<div class="flex justify-center w55-container" id="bg-feature-3">
|
||||||
<div class="w56 tc pa3">
|
<div class="w56 tc pa3">
|
||||||
<h2 class="f25 normal lh-solid mt6 mb3">
|
<h2 class="f25 normal lh-solid mt6 mb3">
|
||||||
<em class="em-mint">
|
<em class="em-mint-1">
|
||||||
Self hosted
|
Self hosted
|
||||||
</em>
|
</em>
|
||||||
</h2>
|
</h2>
|
||||||
@ -60,7 +60,7 @@
|
|||||||
<div class="flex justify-center w55-container" id="bg-feature-2">
|
<div class="flex justify-center w55-container" id="bg-feature-2">
|
||||||
<div class=" w56 tc pa3">
|
<div class=" w56 tc pa3">
|
||||||
<h2 class="f25 normal lh-solid mt7 mb3">
|
<h2 class="f25 normal lh-solid mt7 mb3">
|
||||||
<em class="em-mint">
|
<em class="em-mint-1">
|
||||||
Fair & Secure
|
Fair & Secure
|
||||||
</em>
|
</em>
|
||||||
</h2>
|
</h2>
|
||||||
@ -96,39 +96,40 @@
|
|||||||
<div class="w-100">
|
<div class="w-100">
|
||||||
<div class="mw8 center flex flex-wrap justify-center">
|
<div class="mw8 center flex flex-wrap justify-center">
|
||||||
|
|
||||||
|
<!-- COMPARE A -->
|
||||||
<div class="w-50-l w-100">
|
<div class="w-50-l w-100">
|
||||||
|
|
||||||
<div class="w-100 dib cclr-bg-yellow-mid">
|
<div class="w-100 dib cclr-bg-yellow-mid">
|
||||||
<div class="wx28 center">
|
<div class="wx24 center">
|
||||||
<p class="f25 lh-solid ma0 mt6 mb3 mh4">
|
<p class="f25 lh-solid ma0 mt6 mb3">
|
||||||
Your job
|
Your job
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-100 hx24 dib cclr-bg-white-fade">
|
<div class="w-100 hx24 dib cclr-bg-white-fade">
|
||||||
<div class="wx28 center">
|
<div class="wx24 center">
|
||||||
<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">
|
<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.
|
Self host Offen and thereby comply with GDPR guidelines.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<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.
|
Integrate the code snippet into pages you want to track.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<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.
|
Make your users aware of the access to their data.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<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.
|
Improve your services with fair and transparent insights.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -137,49 +138,221 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- COMPARE B -->
|
||||||
<div class="w-50-l w-100">
|
<div class="w-50-l w-100">
|
||||||
|
|
||||||
<div class="w-100 dn db-l h3 bg-white">
|
<div class="w-100 dn db-l h3 bg-white">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-100 dib cclr-bg-mint-mid">
|
<div class="w-100 dib cclr-bg-mint-mid">
|
||||||
|
<div class="wx24 center">
|
||||||
<div class="wx28 center">
|
<p class="f25 lh-solid ma0 mt5 mb3">
|
||||||
<p class="f25 lh-solid ma0 mt5 mb3 mh4">
|
|
||||||
Benefits for your users
|
Benefits for your users
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-100 hx24 dib cclr-bg-white-fade">
|
<div class="w-100 hx24 dib cclr-bg-white-fade">
|
||||||
<div class="wx28 center">
|
<div class="wx24 center">
|
||||||
<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">
|
<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.
|
Opt in to data collection or decide to not participate at all.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<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.
|
Review own data with detailed explanations of metrics and terms.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
|
||||||
<p class="ma0 ml3">
|
<p class="ma0 ml3 mr4-ns">
|
||||||
Delete only usage data or opt out completly at any time.
|
Only delete usage data or opt out completly at any time.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
@ -194,6 +367,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block outro %}
|
{% block outro %}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user