diff --git a/homepage/content/articles/0010-milestone-1.md b/homepage/content/articles/0010-milestone-1.md index a0d4a7c..2bd6353 100644 --- a/homepage/content/articles/0010-milestone-1.md +++ b/homepage/content/articles/0010-milestone-1.md @@ -20,18 +20,18 @@ We have further refined the existing application architecture to make it more ro ### Easy to test drive Download a single binary file and run it on your local computer to get an Offen instance up and running immediately. At the moment this setup only supports Linux. Windows and MacOS will follow soon. -[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="yellow"} +[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="outline"} ### Develop without complex setup Docker and Docker-Compose are the only hard requirement for you to develop Offen. We have successfully tested this setup under Linux, Windows and MacOS. Head over to our wiki for instructions how to get the setup up and running. -[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="yellow"} +[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="outline"} ### Lightweight and accessible interfaces The *Auditorium* is ready for a dry run. It's a functional prototype for accessing and managing user data. We opted for [Choo](https://choo.io/){: target="_blank"} as the application framework and [Tachyons](https://tachyons.io/){: target="_blank"} as the CSS framework. ### Ready to localize You can now localize all user-related content in server- and client-side applications. At the moment English is the only supported locale, but we would be happy to add more locales soon. Contributors wanted after milestone 3 is completed. -[Get in touch](mailto:hioffen@posteo.de){: data-button="yellow"} +[Get in touch](mailto:hioffen@posteo.de){: data-button="outline"} ### Read the docs The work on our wiki has started. Including documentation for [developers](https://github.com/offen/offen/wiki/Developing-offen){: target="_blank"} as well as for [website operators](https://github.com/offen/offen/wiki/Running-offen){: target="_blank"} who want to deploy and run Offen. @@ -46,4 +46,4 @@ We have further hardened and improved the HTTP server that Offen exposes. If you ### Deep dive Interested in the details? Want to get your hands dirty? Head over to our GitHub repo. -[Open milestone 1 Pull Request](https://github.com/offen/offen/pull/192){: target="_blank" data-button="black"} +[Open milestone 1 Pull Request](https://github.com/offen/offen/pull/192){: target="_blank" data-button="full"} diff --git a/homepage/content/articles/0030-milestone-2.md b/homepage/content/articles/0030-milestone-2.md index 7be8a1c..9bb0c9b 100644 --- a/homepage/content/articles/0030-milestone-2.md +++ b/homepage/content/articles/0030-milestone-2.md @@ -17,7 +17,7 @@ We finished milestone 2. Here is what we' ve been doing for the last 8 weeks. ### Collecting data only with consent A first approach to one of our major features is implemented. Websites that embed the Offen script now display a user consent banner. In case of user's deny, no other requests than loading the script are made from then on. -[Learn more](https://analytics.offen.dev/){: target="_blank" data-button="yellow"} +[Learn more](https://analytics.offen.dev/){: target="_blank" data-button="outline"} ### Accidental leaks don't expose data We encrypt all event data before it leaves the browser. [Two types](https://github.com/offen/offen/pull/270){: target="_blank"} of crypto implementations are used for this. This allows us to handle user data from both https and http-only sites securely. @@ -29,11 +29,11 @@ The insight into user behavior has been improved. Still, no sensitive user infor The current state of *Offen runs on this domain.* You should have noticed our conset banner by now. Opted in? Head to the [Auditorium](https://analytics.offen.dev/auditorium/){: target="_blank"} to manage your data. If not, please have a look at our [Explainer.](https://analytics.offen.dev/){: target="_blank"} *We welcome any feedback* on this key subject. Did our banner text inform you sufficiently? Which issues have been left open? How can we do better? Thanks in advance. -[Send feedback](mailto:hioffen@posteo.de){: target="_blank" data-button="yellow"} +[Send feedback](mailto:hioffen@posteo.de){: target="_blank" data-button="outline"} ### Testdrive on your system Whether you are a developer that want to contribute or a website operator that wants to test Offen. Have a demo up and running in no time on your local machine. Download and install a single binary file on Linux, Windows or MacOS. -[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz){: data-button="yellow"} +[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz){: data-button="outline"} ### Feeling adventurous? Offen is under active development but with the introduction of the user consent banner has become usable for the general public. If you are brave enough you can use our [latest alpha release](https://github.com/offen/offen/releases/latest/){: target="_blank"} in a production environment. @@ -48,4 +48,4 @@ Currently, the way we store encryption keys securely on the client side does not ### Deep dive Interested in the details? Want to get your hands dirty? Head over to our GitHub repo. -[Open milestone 2 Pull Request](https://github.com/offen/offen/pull/270){: target="_blank" data-button="black"} +[Open milestone 2 Pull Request](https://github.com/offen/offen/pull/270){: target="_blank" data-button="full"} diff --git a/homepage/content/articles/0040-test-offen-today.md b/homepage/content/articles/0040-test-offen-today.md index 7020266..02bd87e 100644 --- a/homepage/content/articles/0040-test-offen-today.md +++ b/homepage/content/articles/0040-test-offen-today.md @@ -26,10 +26,10 @@ Although we have dug very deep, things may still contain issues. Therefore, we r ## Offen v0.1.0-alpha.3 ##### Single binary file for Linux, Windows or MacOS -[Download](https://get.offen.dev/){: data-button="black"} +[Download](https://get.offen.dev/){: data-button="full"} ##### Your own Offen instance -[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master){: target="_blank" data-button-mb5="black"} +[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master){: target="_blank" data-button-mb5="full"} Download or deploy Offen today and give it a spin. *[Check our Docs](https://docs.offen.dev/){: target="_blank"} for detailed instructions.* @@ -37,4 +37,4 @@ We appreciate any feedback. No matter if you have difficulties with the installa We look forward to hearing from you. Happy testing! -[Give feedback](mailto:hioffen@posteo.de){: data-button="yellow"} +[Give feedback](mailto:hioffen@posteo.de){: data-button="outline"} diff --git a/homepage/content/articles/0050-milestone-3.md b/homepage/content/articles/0050-milestone-3.md index 401edbc..a5decdc 100644 --- a/homepage/content/articles/0050-milestone-3.md +++ b/homepage/content/articles/0050-milestone-3.md @@ -19,7 +19,7 @@ Milestone 3 has been completed. This is what we have achieved in the last ten we The Auditorium for users is now annotated with explanations of all metrics as well as analytics-specific terms. It also contains an FAQ section. In general, new metrics were added and the UX was refined for users and operators. browser setup These updates are already *up and running in our own instance* for users. Opt in and open the Auditorium. -[Check it out](https://analytics.offen.dev/){: target="_blank" data-button="yellow"} +[Check it out](https://analytics.offen.dev/){: target="_blank" data-button="outline"} ### Working in teams If you want to improve your services with transparent and fair web analytics, it is very likely that you collaborate in groups. Therefore, in a first draft we have added basic utilities for managing user logins and accounts. These tools will be further refined during milestone 4. @@ -33,7 +33,7 @@ Using the command line can be a bit intimidating. This is why we have added an i ### Verifying download integrity Our binaries are now signed with a GPG key. After downloading Offen, you can now check if the binary you want to use is the one we intend to distribute. -[Learn more](https://docs.offen.dev/running-offen/downloads-distributions/#verifying-the-binaries-signatures){: target="_blank" data-button="yellow"} +[Learn more](https://docs.offen.dev/running-offen/downloads-distributions/#verifying-the-binaries-signatures){: target="_blank" data-button="outline"} ### Safari now fully supported At the end of milestone 2 we noticed problems with the way the Safari browser stores keys. We fixed this by adding a dedicated fallback mechanism. [Give it a try.](https://analytics.offen.dev/){: target="_blank"} @@ -42,7 +42,7 @@ At the end of milestone 2 we noticed problems with the way the Safari browser st Self-hosting is ideal for privacy focused software. Based on free resources, you can now deploy a production ready Offen instance to Heroku in a jiffy. browser setup We are currently working on further 1-click options for platforms such as [DigitalOcean](https://github.com/offen/digitalocean){: target="_blank"} and YunoHost. -[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/maste){: target="_blank" data-button="yellow"} +[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/maste){: target="_blank" data-button="outline"} ### Happy Birthday to us Offen is now [one year old.](https://github.com/offen/offen/commit/3a50763bbd93c9c655fad002e94c340a623ee613){: target="_blank"} We made some progress on our way to develop a self hosted and transparent alternative to established web analytics tools. @@ -56,4 +56,4 @@ But it is not yet the time for standing ovations. There is still a lot to be don ### Deep dive Interested in the details? Want to get your hands dirty? Take a look at our code. -[Open GitHub repo](https://github.com/offen/offen){: target="_blank" data-button="black"} +[Open GitHub repo](https://github.com/offen/offen){: target="_blank" data-button="full"} diff --git a/homepage/content/pages/get-started.md b/homepage/content/pages/get-started.md index e1d6f65..2ff2121 100644 --- a/homepage/content/pages/get-started.md +++ b/homepage/content/pages/get-started.md @@ -1,5 +1,5 @@ title: Get started | Offen -description: Want to collect usage statistics transparently? Like to contribute as a developer? Download our latest release and learn how to run, use and develop Open. +description: Want to collect usage statistics transparently? Like to contribute as a developer? Download our latest release and learn how to run, use and develop Offen. slug: get-started template: getstarted sitemap_priority: 0.8 diff --git a/homepage/content/pages/index.md b/homepage/content/pages/index.md index 035080a..5b3ba1c 100644 --- a/homepage/content/pages/index.md +++ b/homepage/content/pages/index.md @@ -1,13 +1,5 @@ title: Transparent web analytics for everyone | Offen -description: Offen is a fair alternative to common web analytics tools. Respect your users while gaining insight into their behavior. Self hosted, open source and free. +description: Offen is a fair alternative to common web analytics tools. Respect your users and gain insight at the same time. Self hosted, open source and free. save_as: index.html template: index sitemap_priority: 1.0 - -Offen is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are able to use the analytics tools, but also _the users themselves are granted access to their data._ - -Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details _which kind of data is not collected._ All data can be deleted by the users or the collection can be disabled altogether. - -Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make _autonomous and informed decisions regarding the use of their data._ Operators are enabled to gain insights while respecting their users' privacy and data. - -Offen is currently in the early stages of development and is applying for funds to sustain its development. diff --git a/homepage/content/pages/try-demo.md b/homepage/content/pages/try-demo.md new file mode 100644 index 0000000..f3ef08a --- /dev/null +++ b/homepage/content/pages/try-demo.md @@ -0,0 +1,5 @@ +title: Try demo | Offen +description: Test drive Offen on your system today. +slug: try-demo +template: trydemo +sitemap_priority: 0.1 diff --git a/homepage/pelicanconf.py b/homepage/pelicanconf.py index 51c8fcd..60f0ebb 100644 --- a/homepage/pelicanconf.py +++ b/homepage/pelicanconf.py @@ -50,14 +50,14 @@ PLUGINS = ['decorate_content', 'assets'] DECORATE_CONTENT = { '[data-button]': ['w-100', 'w-auto-ns', 'tc', 'tl-ns', 'dib', 'mt3', 'ph4', 'pv2', 'b--solid', 'bw2'], '[data-button-mb5]': ['w-100', 'w-auto-ns', 'tc', 'tl-ns', 'dib', 'mt3', 'mb5', 'ph4', 'pv2', 'b--solid', 'bw2'], - '[data-button="yellow"]': ['brd-cclr-mid-yellow', 'fnt-cclr-mid-yellow'], - '[data-button="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'], - '[data-button-mb5="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'], + '[data-button="outline"]': ['b--gray', 'gray'], + '[data-button="full"]': ['cclr-brd-black-mid', 'white', 'cclr-bg-black-mid'], + '[data-button-mb5="full"]': ['cclr-brd-black-mid', 'white', 'cclr-bg-black-mid'], 'a': ['link', 'b', 'dim'], 'a:not([data-button])': ['gray'], 'h1': ['f2', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3', 'light-silver'], 'h2': ['f25', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3', 'light-silver'], - 'h3': ['f5', 'normal', 'mt5', 'ma0', 'mb3', 'fnt-cclr-mid-black'], + 'h3': ['f5', 'normal', 'mt5', 'ma0', 'mb3', '.cclr-fnt-black-mid'], 'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'], 'h5': ['f5', 'b', 'mt4', 'ma0', 'mb1'], # text over button 'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'mb3', 'light-silver'], # date @@ -75,6 +75,8 @@ PATREON_URL = 'https://www.patreon.com/offen' LINKEDIN_URL = 'https://www.linkedin.com/company/hioffen' TWITTER_URL = 'https://twitter.com/hioffen' RELEASE_DIRECT_URL = 'https://get.offen.dev' +DOCKER_DIRECT_URL = 'https://hub.docker.com/r/offen/offen' HEROKU_DIRECT_URL = 'https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master' +OFFEN_AUDITORIUM_URL = 'https://analytics.offen.dev/auditorium' OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None) diff --git a/homepage/theme/static/css/fix.css b/homepage/theme/static/css/fix.css index 6723e43..fe042f0 100644 --- a/homepage/theme/static/css/fix.css +++ b/homepage/theme/static/css/fix.css @@ -1,56 +1,73 @@ /* --------------------------------------------------- COLORS ----------------------------------------------------*/ -/* Custom Tachyons classes */ -.cclr-mid-yellow { - background-color: #F7BF08; +/* Yellows */ +.cclr-bg-yellow-mid { + background-color: #F7BF08; } -.fnt-cclr-mid-yellow { - color: #F7BF08; +.cclr-fnt-yellow-mid { + color: #F7BF08; } -.brd-cclr-mid-yellow { - border-color: #F7BF08; +.cclr-bg-yellow-bright { + background-color: #FDE28C; } -.cclr-yellow-bright { - background-color: #fde28c; +.cclr-bg-yellow-bright-very { + background-color: #F9F7F2; } -.fnt-cclr-yellow-bright { - color: #fde28c; + +/* Mint */ +.cclr-bg-mint-dark { + background-color: #9BC5BC; } -.cclr-mid-mint { - background-color: #BBD9D3; +.cclr-bg-mint-mid { + background-color: #BBD9D3; } -.fnt-cclr-mint-bright { - color: #E2F6F2; +.cclr-bg-mint-bright { + background-color: #DEF0ED; } -.cclr-mid-black { - background-color: #39352A; +.cclr-bg-mint-fade-a { + background: linear-gradient(207.34deg, rgba(222, 240, 237, 0.6) 11.24%, rgba(255, 255, 255, 0) 102.6%), #BBD9D3; } -.fnt-cclr-mid-black { - color: #39352A; +.cclr-bg-mint-fade-b { + background: linear-gradient(207.34deg, rgba(222, 240, 237, 0.6) 11.24%, rgba(255, 255, 255, 0) 102.6%), #BBD9D3; + transform: rotate(-180deg); } -.brd-cclr-mid-black { - border-color: #39352A; + +/* Black */ +.cclr-bg-black-mid { + background-color: #39352A; } -.cclr-dark-white { - background-color: #f9f7f2; +.cclr-fnt-black-mid { + color: #39352A; +} +.cclr-brd-black-mid { + border-color: #39352A; +} + +/* White */ +.cclr-bg-white-dark { + background-color: #f9f7f2; +} +.cclr-bg-white-fade { + background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F3F0E7; +} +.cclr-bg-white-fade-metrics { + background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F3F0E7; } /* --------------------------------------------------- LAYOUT ----------------------------------------------------*/ +/* Menu */ .menu { width: 100%; height: 4rem; /* Tachyons mt5 */ position: fixed; - z-index: 1; + z-index: 999; top: 0; right: 0; } -.columns { - column-count: 1; -} /* Custom media query */ @media only screen and (min-width: 60rem) { .columns { @@ -65,21 +82,143 @@ LAYOUT position: static; } } -/* Custom Tachyons class */ -.w55-container, -.w55 { - width: 20rem; + +/* HWidths and heights */ +.wx18 { + width: 18rem; } -.w56 { - width: 20rem; - height: 480px; +.wx24, +.wx24-metrics { + width: 86%; } -/* Custom media query - extra small */ -@media only screen and (max-width: 40em) { - .w55-container { - width: 100%; - } +.hx24 { + height: 24rem; } +.hx-feature { + height: 30rem; +} +.hx-more { + height: 30rem; +} +.hx-compare-c, +.hx-compare-d { + height: 100%; +} +.hx-metrics { + height: 100%; +} +@media only screen and (min-width: 30em) { + .wx24, + .wx24-metrics { + width: 24rem; + } + .hx-try-user { + height: 24rem; + } + .hx-metrics { + height: 128rem; + } +} +@media only screen and (min-width: 60em) { + .wx24-metrics { + width: 100%; + } + .hx-compare-c, + .hx-compare-d { + height: 50rem; + } + .hx-metrics { + height: 132rem; + } +} + +/* Margins an paddings */ +.ptx-feature-2 { + padding-top: 9rem; +} +.ptx-feature-3 { + padding-top: 18rem; +} + +/* Stacking boxes */ +.stackbox-10 img, +.stackbox-20 img, +.stackbox-30 img, +.stackbox-40 img, +.stackbox-50 img { + max-width: 100%; +} +.stackbox-10, +.stackbox-20, +.stackbox-30, +.stackbox-40, +.stackbox-50 { + width: 86%; +} +@media only screen and (min-width: 30em) { + .stackbox-10 img, + .stackbox-20 img, + .stackbox-30 img, + .stackbox-40 img, + .stackbox-50 img { + max-width: none; + } + .stackbox-10, + .stackbox-20, + .stackbox-30, + .stackbox-40, + .stackbox-50 { + width: 24rem; + } + .stackbox-10 { + z-index : 110; + top: 2rem; + left: calc(100% - 27rem) + } + .stackbox-20 { + z-index : 120; + top: 12rem; + left: 3rem; + } + .stackbox-30 { + z-index : 140; + top: 33rem; + left: calc(100% - 27rem) + } + .stackbox-40 { + z-index : 130; + top: 52rem; + left: 3rem; + } + .stackbox-50 { + z-index : 148; + top: 74rem; + left: calc(100% - 27rem) + } +} +@media only screen and (min-width: 60em) { + .stackbox-10 { + top: -6rem; + left: 34rem; + } + .stackbox-20 { + top: 10rem; + left: 6rem; + } + .stackbox-30 { + top: 28rem; + left: 29rem; + } + .stackbox-40 { + top: 55rem; + left: 10rem; + } + .stackbox-50 { + top: 74rem; + left: 31rem; + } +} + /* --------------------------------------------------- TYPO AND LAYOUT ELEMENTS @@ -87,11 +226,25 @@ TYPO AND LAYOUT ELEMENTS .link:focus { outline: none; } +/* index logo */ +.intro-margin-a { + margin-top: 0.3rem; +} +.intro-margin-b { + margin-top: 0.7rem; +} + /* Break long word on mobile */ body { overflow-wrap: break-word; overscroll-behavior: none; } +/* font size iPhone 5 etc */ +@media only screen and (max-width: 20em) { + .f5 { + font-size: 0.95rem; + } +} /* Custom Tachyons class */ .f25 { font-size: 1.9rem; @@ -109,10 +262,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; @@ -129,14 +286,145 @@ ul { padding-inline-start: 1rem; } } -.tracked-min { - letter-spacing: .03em; +i { + font-style: normal; + color: #777777; } -.intro-margin-a { - margin-top: 0.3rem; +.i-on-yellow { + color: #8c7839; } -.intro-margin-b { - margin-top: 0.7rem; +.inner-shaddow { + box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.75); +} + + +/* --------------------------------------------------- +IMAGES +----------------------------------------------------*/ +/* Put article image outside of container margins */ +.larger-image { + margin-top: -4rem; + margin-left: -1rem; + margin-right: -1rem; +} +.smaller-image { + width: 200px; + height: 109px; + margin-bottom: -2rem; +} +.screencast { + border: 1px solid #DDDDDD; +} +@media only screen and (min-width: 30em) { + .larger-image { + margin-top: -4rem; + margin-left: -4rem; + margin-right: -4rem; + } + .smaller-image { + width: 350px; + height: 190px; + } +} + + +/* --------------------------------------------------- +STACKING IMAGES +----------------------------------------------------*/ +.bg-feature-1 img, +.bg-feature-3 img { + max-width: none; +} +.bg-feature-1 { + top: 0; + left: -25%; + z-index : 400; +} +.bg-feature-3 { + top: 0; + left: -35%; + z-index : 410; +} +.bg-compare-a-pfeil { + top: -10rem; + left: 0; + z-index : 510; +} +.bg-compare-b-smile { + top: 17rem; + left: 6rem; + z-index : 520; +} +.bg-compare-c-pfeil { + top: -5rem; + left: 7rem; + z-index : 530; +} +.bg-metrics-bulb { + top: 8.5rem; + left: calc(100% - 10rem); + z-index : 550; +} +.bg-cta-pfeil { + top: -11rem; + left: 66%; + z-index : 570; +} +@media only screen and (min-width: 30em) { + .bg-feature-1 { + left: calc(50% - 21rem); + } + .bg-feature-3 { + left: calc(50% - 18rem); + } + .bg-compare-c-pfeil { + top: -5rem; + left: 10rem; + } + .bg-metrics-bulb { + top: 11rem; + left: calc(100% - 30rem); + z-index : 550; + } + .bg-cta-pfeil { + top: -12rem; + left: 72%; + } +} +@media only screen and (min-width: 60em) { + .bg-feature-1 { + left: -50%; + } + .bg-feature-3 { + left: -50%; + } + .bg-metrics-bulb { + top: -3rem; + left: calc(100% - 20rem); + } + .bg-cta-pfeil { + top: -12rem; + left: 66%; + } +} + + +/* --------------------------------------------------- +BACKROUND IMAGES +----------------------------------------------------*/ +#bg-feature-2 { + background: url(/theme/images/gfx-feature-2.png) center; + background-repeat: no-repeat; + background-size: 640px 480px; + transform: rotate(180deg); +} +#bg-pattern { + background: url(/theme/images/gfx-bg-pattern.svg) 8rem 2rem; +} +#bg-explainer { + background: + url(/theme/images/gfx-bg-explainer.svg) top center repeat-x, + url(/theme/images/gfx-bg-explainer.svg) bottom center repeat-x; } @@ -302,84 +590,3 @@ nav ul li ul li a { #nav-toggle.active span:after { transform: rotate(-45deg); } - - -/* --------------------------------------------------- -IMAGES -----------------------------------------------------*/ -/* Put article image outside of container margins */ -.larger-image { - margin-top: -4rem; - margin-left: -1rem; - margin-right: -1rem; -} -.smaller-image { - width: 200px; - height: 109px; - margin-bottom: -2rem; -} -.screencast { - border: 1px solid #DDDDDD; -} -/* Custom media query - extra small */ -@media only screen and (min-width: 30em) { - .larger-image { - margin-top: -4rem; - margin-left: -4rem; - margin-right: -4rem; - } - .smaller-image { - width: 350px; - height: 190px; - } -} - - -/* --------------------------------------------------- -GRAPHICS -----------------------------------------------------*/ -#bg-intro { - background: url(/theme/images/gfx-intro.svg); - background-repeat: no-repeat; - background-attachment: scroll; - background-position: 200px 80px; -} -@media only screen and (min-width: 30.1em) and (max-width: 60em) { - #bg-intro { - background-position: calc(20% + 120px) 80px; - } -} -@media only screen and (max-width: 30em) { - #bg-intro { - background-position: 10px 60px; - } -} -/* --------------------------------------------- */ -#bg-feature-1 { - background: url(/theme/images/gfx-feature-1.png) center; - background-repeat: no-repeat; - background-size: 640px 480px; -} -#bg-feature-2 { - background: url(/theme/images/gfx-feature-2.png) center; - background-repeat: no-repeat; - background-size: 640px 480px; -} -#bg-feature-3 { - background: url(/theme/images/gfx-feature-3.png) center; - background-repeat: no-repeat; - background-size: 640px 480px; -} -/* --------------------------------------------- */ -#bg-feature { - background: url(/theme/images/gfx-pattern-mint-bright.svg) center; -} -#bg-cta-top { - background: url(/theme/images/gfx-object-white.svg) center; -} -#bg-outro { - background: url(/theme/images/gfx-pattern-yellow-bright.svg) center; -} -#bg-cta-bottom { - background: url(/theme/images/gfx-pattern-yellow-bright.svg) center; -} diff --git a/homepage/theme/static/images/gfx-bg-explainer.svg b/homepage/theme/static/images/gfx-bg-explainer.svg new file mode 100644 index 0000000..32d8414 --- /dev/null +++ b/homepage/theme/static/images/gfx-bg-explainer.svg @@ -0,0 +1,3 @@ + + + diff --git a/homepage/theme/static/images/gfx-bg-pattern.svg b/homepage/theme/static/images/gfx-bg-pattern.svg new file mode 100644 index 0000000..12866f1 --- /dev/null +++ b/homepage/theme/static/images/gfx-bg-pattern.svg @@ -0,0 +1,3 @@ + + + diff --git a/homepage/theme/static/images/gfx-compare-a-pfeil.png b/homepage/theme/static/images/gfx-compare-a-pfeil.png new file mode 100644 index 0000000..81e990a Binary files /dev/null and b/homepage/theme/static/images/gfx-compare-a-pfeil.png differ diff --git a/homepage/theme/static/images/gfx-compare-a.png b/homepage/theme/static/images/gfx-compare-a.png new file mode 100644 index 0000000..e5f0862 Binary files /dev/null and b/homepage/theme/static/images/gfx-compare-a.png differ diff --git a/homepage/theme/static/images/gfx-compare-b-smile.png b/homepage/theme/static/images/gfx-compare-b-smile.png new file mode 100644 index 0000000..979f412 Binary files /dev/null and b/homepage/theme/static/images/gfx-compare-b-smile.png differ diff --git a/homepage/theme/static/images/gfx-compare-b.png b/homepage/theme/static/images/gfx-compare-b.png new file mode 100644 index 0000000..c0e49d4 Binary files /dev/null and b/homepage/theme/static/images/gfx-compare-b.png differ diff --git a/homepage/theme/static/images/gfx-compare-c-pfeil.png b/homepage/theme/static/images/gfx-compare-c-pfeil.png new file mode 100644 index 0000000..2190b9d Binary files /dev/null and b/homepage/theme/static/images/gfx-compare-c-pfeil.png differ diff --git a/homepage/theme/static/images/gfx-compare-e.png b/homepage/theme/static/images/gfx-compare-e.png new file mode 100644 index 0000000..a686ee0 Binary files /dev/null and b/homepage/theme/static/images/gfx-compare-e.png differ diff --git a/homepage/theme/static/images/gfx-compare-f-scribble.png b/homepage/theme/static/images/gfx-compare-f-scribble.png new file mode 100644 index 0000000..7c61692 Binary files /dev/null and b/homepage/theme/static/images/gfx-compare-f-scribble.png differ diff --git a/homepage/theme/static/images/gfx-cta-pfeil.png b/homepage/theme/static/images/gfx-cta-pfeil.png new file mode 100644 index 0000000..aa9bc2a Binary files /dev/null and b/homepage/theme/static/images/gfx-cta-pfeil.png differ diff --git a/homepage/theme/static/images/gfx-feature-1.png b/homepage/theme/static/images/gfx-feature-1.png index 65fdcce..1be39da 100644 Binary files a/homepage/theme/static/images/gfx-feature-1.png and b/homepage/theme/static/images/gfx-feature-1.png differ diff --git a/homepage/theme/static/images/gfx-feature-2.png b/homepage/theme/static/images/gfx-feature-2.png index e3f7e5b..50e9412 100644 Binary files a/homepage/theme/static/images/gfx-feature-2.png and b/homepage/theme/static/images/gfx-feature-2.png differ diff --git a/homepage/theme/static/images/gfx-feature-3.png b/homepage/theme/static/images/gfx-feature-3.png index e8922e8..319b142 100644 Binary files a/homepage/theme/static/images/gfx-feature-3.png and b/homepage/theme/static/images/gfx-feature-3.png differ diff --git a/homepage/theme/static/images/gfx-intro.svg b/homepage/theme/static/images/gfx-intro.svg deleted file mode 100644 index 42bd18a..0000000 --- a/homepage/theme/static/images/gfx-intro.svg +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - diff --git a/homepage/theme/static/images/gfx-metrics-bars.svg b/homepage/theme/static/images/gfx-metrics-bars.svg new file mode 100644 index 0000000..0bed460 --- /dev/null +++ b/homepage/theme/static/images/gfx-metrics-bars.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-metrics-bulb.png b/homepage/theme/static/images/gfx-metrics-bulb.png new file mode 100644 index 0000000..7a5055a Binary files /dev/null and b/homepage/theme/static/images/gfx-metrics-bulb.png differ diff --git a/homepage/theme/static/images/gfx-metrics-key.svg b/homepage/theme/static/images/gfx-metrics-key.svg new file mode 100644 index 0000000..8c4f66b --- /dev/null +++ b/homepage/theme/static/images/gfx-metrics-key.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-metrics-pages.svg b/homepage/theme/static/images/gfx-metrics-pages.svg new file mode 100644 index 0000000..e61a846 --- /dev/null +++ b/homepage/theme/static/images/gfx-metrics-pages.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-metrics-real.svg b/homepage/theme/static/images/gfx-metrics-real.svg new file mode 100644 index 0000000..0b485b0 --- /dev/null +++ b/homepage/theme/static/images/gfx-metrics-real.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-metrics-retention.svg b/homepage/theme/static/images/gfx-metrics-retention.svg new file mode 100644 index 0000000..b24ccd9 --- /dev/null +++ b/homepage/theme/static/images/gfx-metrics-retention.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/homepage/theme/static/images/gfx-object-white.svg b/homepage/theme/static/images/gfx-object-white.svg deleted file mode 100644 index a0cf6b6..0000000 --- a/homepage/theme/static/images/gfx-object-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/homepage/theme/static/images/gfx-pattern-mint-bright.svg b/homepage/theme/static/images/gfx-pattern-mint-bright.svg deleted file mode 100644 index 3e456ba..0000000 --- a/homepage/theme/static/images/gfx-pattern-mint-bright.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/homepage/theme/static/images/gfx-pattern-mint-mid.svg b/homepage/theme/static/images/gfx-pattern-mint-mid.svg deleted file mode 100644 index 3e456ba..0000000 --- a/homepage/theme/static/images/gfx-pattern-mint-mid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/homepage/theme/static/images/gfx-pattern-yellow-bright.svg b/homepage/theme/static/images/gfx-pattern-yellow-bright.svg deleted file mode 100644 index 7358ef9..0000000 --- a/homepage/theme/static/images/gfx-pattern-yellow-bright.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/homepage/theme/templates/archives.html b/homepage/theme/templates/archives.html index a44c4bc..9433912 100644 --- a/homepage/theme/templates/archives.html +++ b/homepage/theme/templates/archives.html @@ -5,7 +5,7 @@ {% set href = 'blog/' %} {% set no_stats = False %} {% set template = 'archives' %} -{% set is_article = 'true' %} +{% set cta_1 = 'true' %} {% block content %} {% for article in articles %} diff --git a/homepage/theme/templates/article.html b/homepage/theme/templates/article.html index bf8041d..edb349a 100644 --- a/homepage/theme/templates/article.html +++ b/homepage/theme/templates/article.html @@ -7,4 +7,4 @@ {% set no_stats = article.no_stats %} {% set template = article.template %} {% set content = article.content %} -{% set is_article = 'true' %} +{% set cta_1 = 'true' %} diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html index 142c577..b740bb2 100644 --- a/homepage/theme/templates/base.html +++ b/homepage/theme/templates/base.html @@ -32,36 +32,36 @@ {% endif %} {% endblock %} - -
-
+ +
+

Offen
- {% if is_getstarted != 'true' %} + {% if funnel != 'true' %}
{% endblock %} - {% if is_getstarted != 'true' %} + {% if funnel != 'true' %} {% block outro %} -
-
+
+
-
-
+
+ + {% if cta_2 != 'true' %} +

Participate

- Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect. + Audit our open source code and feel free to make a contribution.

- Get involved + Get involved
- {% if is_article != 'true' %} -
+ {% endif %} + + {% if cta_1 != 'true' %} +

In the making

- Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months. + Discover what is already up and running and where we want to go.

- Project status + Open Blog
{% endif %} -
+ +

Ethical internet

- We're working hard to ensure that Offen is independent and can be sustained for years to come. + Help to ensure that Offen is independent and can be sustained.

- Support us + Support us
+
{% endblock %} {% endif %} - {% if is_getstarted != 'true' %} -
+ {% if funnel != 'true' %} +
-
+

- Offen + Offen

Transparent web analytics

for everyone

@@ -139,6 +145,9 @@ GPG Key

+ Blog +

+

Docs

@@ -165,22 +174,26 @@

{% else %} -
-
-
-

- Offen -

-

Transparent web analytics

-

for everyone

-
-
-
-
-
-
- {{ BUILD_DATE }} +
+
+ +
+
+

+ Offen +

+

Transparent web analytics

+

for everyone

+
+
+
+
+
+
+ {{ BUILD_DATE }} +
+
{% endif %} diff --git a/homepage/theme/templates/getstarted.html b/homepage/theme/templates/getstarted.html index 64d2355..50eacfb 100644 --- a/homepage/theme/templates/getstarted.html +++ b/homepage/theme/templates/getstarted.html @@ -1,43 +1,55 @@ {% extends "page.html" %} - -{% set is_getstarted = 'true' %} +{% set funnel = 'true' %} {% block content %} -
-
-
-

- Test Offen today +
+
+ +
+ +

+ Get started

-

- Our alpha release is ready for testing. Offen is free and always will be. -

-

- Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases. -

+

+ Choose your preferred way to self host Offen +

+
-

+

Single binary file
for Linux, Windows or MacOS

- Download -

- Your own Offen instance + Download + +

+ Offen as a lightweight
Docker image

- Deploy to Heroku + Deploy with Docker + +

+ Your own instance on Heroku +

+ Deploy to Heroku
-
-

- Kick things off -

-

- Running a website and want to collect usage statistics? Like to contribute as a developer? Our Docs will help you kick off. + +

+ Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.

+ +
+ +

+ Read the docs +

-

- Details on how to
run, use and develop Offen +

+ Details on how to
install and run Offen

- Open Docs + Open Docs
+
+
+
+ {% endblock %} diff --git a/homepage/theme/templates/index.html b/homepage/theme/templates/index.html index cf03877..01efa0d 100644 --- a/homepage/theme/templates/index.html +++ b/homepage/theme/templates/index.html @@ -1,8 +1,8 @@ {% extends "page.html" %} {% block content %} -
-
+
+
Offen logo @@ -20,134 +20,504 @@ Transparent web analytics

- Offen is a fair alternative to common web analytics tools. Pay respect to your users while gaining insight into their behavior. Self hosted, open source and free. + Offen is a fair alternative to common web analytics tools. Respect your users and gain insight at the same time. Self hosted, open source and free.

- Start now + Learn more
-
-
-
-
-
-

- - Free & Open - -

-

- Our open source code can be fully audited by the community. It will always be available for free. Seriously. + +

+
+ +
+ +
+
+ +
+
+ feature-2 +
+
+ +

+ + Free & Open + +

+

+ Our open source code can be fully audited by the community. It will always be available for free. Seriously. +

+ +
+
+ +
+
+ +

+ + Self hosted + +

+

+ Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data. +

+
+ +
+ +
+
+ +
+
+ feature-3 +
+
+ +
+

+ + Fair & Secure + +

+

+ Pay respect to your website visitors. Get valuable insights at the same time. All data is encrypted end-to-end. +

+
+ +
+
+ +
+ +
+
+ + +
+
+

+ Gain insights in an ethical way +

+
+

+ Web analytics is still an unfair and impenetrable business. A proper alternative to common tools is missing. Therefore we develop one. Deep dive +

+
+
+
+ + +
+
+ + +
+ +
+
+ +
+
+ arrow +
+
+ +

+ Your job +

+
+
+ +
+
+ +
+
+ numbers +
+
+

+ Self host Offen in compliance with GDPR guidelines. +

+

+ Integrate the code snippet into pages you want to track. +

+

+ Make your users aware of the ability to access their data. +

+

+ Improve your service with fair and transparent insights.

-
-
-

- - Self hosted - -

+ +
+
+ +
+ + +
+ +
+
+ +
+
+

+ Benefits for your users +

+
+
+ +
+
+ +
+
+ smile +
+
+ +
+ +
+ ok +
+
+

+ Opt in to data collection or decide to not participate at all. +

+

+ Review own data with detailed explanations of metrics and terms. +

+

+ Opt out completely at any time or only delete existing usage data. +

+ +
+
+ +
+
+ +
+ + +
+ +
+
+ + +
+

+ + What you see + +

+

+ Data of all pages where your Offen installation is active. +

+

+ For example +

+ + +
+ +
+
+ arrow +
+
+ +

+ 859 +

+

+ Unique users +

+

+ 3.372 +

+

+ Unique sessions +

+

+ Top pages +

+ + + + + + + + + + + + + + + + + + +
https://www.yourpage.org/
https://www.yourpage.org/blog/
https://www.yourpage.org/landing/
https://www.yourpage.org/otherpage/
https://sub.yourpage.org/
+
+ +
+ +
+
+ +
+ + +
+ +
+
+ +
+

+ + What your users see + +

+

+ Data of all pages a user has visited where your Offen installation is active. +

+

+ For example +

+ + +
+

+ 1 +

+

+ Unique website +

+

+ 5 +

+

+ Unique sessions +

+

+ Top pages +

+ + + + + + + + + + + + +
https://www.yourpage.org/
https://www.yourpage.org/blog/
https://www.yourpage.org/otherpage/
+
+ +
+ +
+
+ +
+ + +
+ +
+
+ +

+ More features +

+ +
+
+ plus +
+

- Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data. + All your accounts can be shared within your team. +

+

+ User data is only stored for 6 months and then deleted. +

+

+ Use the in-browser screen for a more intuitive setup. +

+

+ A detailed documentation on how to run Offen is available.

-
-
-

- - Fair & Secure - -

-

- Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end. + +

+
+ +
+ + +
+ +
+
+

+ Try as user +

+

+ Offen is installed on this website. Access your actual usage data now. +

+
+ Open Auditorium + smile +
+
+
+
+
+ +
+ + +
+
+ +
+ +
+
+ smile +
+
+ +

+ + Essential metrics + +

+

+ All important statistics that help you to improve your service. Collected without violating the privacy of your users. +

+
+ + +
+
+
+

+ Real time

+ temp +
+
+
+ + +
+
+
+

+ Page views and users +

+ temp +
+
+
+ + +
+
+
+

+ Key metrics +

+ temp +
+
+
+ + +
+
+
+

+ Top pages +

+ temp +
+
+
+ + +
+
+
+

+ Weekly retention +

+ temp
-
-
-
-
-
-
-

- In the making -

-

- Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months. -

- Project status
+
-
-
-
-

Summary

-
- {{ page.content }} - Deep dive + +
+ +
+ +
+
+ arrow +
+ +

+ Switch to fair web analytics +

+
+
+

+ Test drive Offen on your system today +

+ Try demo +
+
+

+ All you need to use Offen in production +

+ Get started +
+
-
+ {% endblock %} {% block outro %} -
-
-
-
-

- Test Offen today -

-

- Our alpha release is ready for testing. Offen is free and always will be. -

-

- Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases. -

-
-
-

- Single binary file
for Linux, Windows or MacOS -

- Download -

- Your own Offen instance -

- Deploy to Heroku -
-
-
-
-
-
-
-
-

- Kick things off -

-

- Running a website and want to collect usage statistics? Like to contribute as a developer? Our Docs will help you kick off. -

-
-
-

- Details on how to
run, use and develop Offen -

- Open Docs -
-
-
-
{% endblock %} diff --git a/homepage/theme/templates/page.html b/homepage/theme/templates/page.html index 2dab6bb..ddf8930 100644 --- a/homepage/theme/templates/page.html +++ b/homepage/theme/templates/page.html @@ -7,3 +7,4 @@ {% set no_stats = page.no_stats %} {% set template = page.template %} {% set content = page.content %} +{% set cta_2 = 'true' %} diff --git a/homepage/theme/templates/trydemo.html b/homepage/theme/templates/trydemo.html new file mode 100644 index 0000000..8dce667 --- /dev/null +++ b/homepage/theme/templates/trydemo.html @@ -0,0 +1,56 @@ +{% extends "page.html" %} +{% set funnel = 'true' %} + +{% block content %} +
+
+ +
+ +

+ Try demo +

+

+ Test drive Offen on your system +

+ +

+ Open your terminal and type +

+
+
+ + curl https://demo.offen.dev | bash + +
+
+ +

+ With Docker use +

+
+
+ + docker run --rm -it -p 9876:9876 offen/offen:latest demo -port 9876 + +
+
+ +
+ +

+ Read the docs +

+
+

+ Details on how to
install and run Offen +

+ Open Docs +
+ +
+ +
+
+ +{% endblock %}