From 6671e3b6ee6039376e1a0acf108510f370afbe2a Mon Sep 17 00:00:00 2001
From: Hendrik Niefeld <hello@niefeld.com>
Date: Mon, 27 Apr 2020 16:47:24 +0200
Subject: [PATCH] create try-demo

---
 homepage/content/pages/try-demo.md       |  5 +++
 homepage/theme/static/css/fix.css        | 22 ++++++++++
 homepage/theme/templates/base.html       |  4 +-
 homepage/theme/templates/getstarted.html | 11 +++--
 homepage/theme/templates/trydemo.html    | 56 ++++++++++++++++++++++++
 5 files changed, 92 insertions(+), 6 deletions(-)
 create mode 100644 homepage/content/pages/try-demo.md
 create mode 100644 homepage/theme/templates/trydemo.html

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/theme/static/css/fix.css b/homepage/theme/static/css/fix.css
index f8c93f5..22ac275 100644
--- a/homepage/theme/static/css/fix.css
+++ b/homepage/theme/static/css/fix.css
@@ -41,6 +41,11 @@ COLORS NEW
 	 border-color: #39352A;
 }
 
+
+
+
+
+
 /* White */
 .cclr-bg-white-dark {
 	background-color: #f9f7f2;
@@ -54,6 +59,17 @@ COLORS NEW
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 /* ---------------------------------------------------
 COLORS OLD
 ----------------------------------------------------*/
@@ -335,6 +351,12 @@ i {
 	font-style: normal;
 	color: #777777;
 }
+.inner-shaddow {
+	box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.75);
+}
+
+
+
 
 
 /* ?????? */
diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html
index 12fdbcc..d9572af 100644
--- a/homepage/theme/templates/base.html
+++ b/homepage/theme/templates/base.html
@@ -80,7 +80,7 @@
         </div>
       {% endblock %}
 
-      {% if is_getstarted != 'true' %}
+      {% if funnel != 'true' %}
       {% block outro %}
         <div class="w-100 cclr-mid-yellow">
           <div class="pt3 pb4 ph3" id="bg-cta-bottom">
@@ -121,7 +121,7 @@
         </div>
       {% endblock %}
       {% endif %}
-      {% if is_getstarted != 'true' %}
+      {% if funnel != 'true' %}
       <div class="w-100 cclr-mid-black gray ph4 pb4">
         <div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
           <div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
diff --git a/homepage/theme/templates/getstarted.html b/homepage/theme/templates/getstarted.html
index 3e15ec5..26b801b 100644
--- a/homepage/theme/templates/getstarted.html
+++ b/homepage/theme/templates/getstarted.html
@@ -1,11 +1,13 @@
 {% extends "page.html" %}
 
-{% set is_getstarted = 'true' %}
+{% set funnel = 'true' %}
 
 {% block content %}
 <div class="w-100 mt5-ns cclr-bg-white-dark">
   <div class="mw7 center pt5 pb5 ph4 bg-white">
+
     <div class="w-100 center tc">
+
       <h2 class="f1-ns f2 normal ma0 mb4">
         Get started
       </h2>
@@ -34,11 +36,9 @@
       <p class="tc ma0 mb4 mh5-ns gray">
         Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
       </p>
+
       <hr class="ma0 mb5 b--black-05">
 
-
-
-
       <h3 class="f25 normal ma0 mb5">
         Read the docs.
       </h3>
@@ -48,6 +48,9 @@
         </p>
         <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 cclr-fnt-black-mid" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open Docs</a>
       </div>
+
     </div>
+
   </div>
+</div>
 {% endblock %}
diff --git a/homepage/theme/templates/trydemo.html b/homepage/theme/templates/trydemo.html
new file mode 100644
index 0000000..6ee987a
--- /dev/null
+++ b/homepage/theme/templates/trydemo.html
@@ -0,0 +1,56 @@
+{% extends "page.html" %}
+
+{% set funnel = 'true' %}
+
+{% block content %}
+<div class="w-100 mt5-ns cclr-bg-white-dark">
+  <div class="mw7 center pt5 pb5 ph4 bg-white">
+
+    <div class="w-100 center">
+
+      <h2 class="f1-ns f2 normal tc ma0 mb4">
+        Try demo
+      </h2>
+      <h3 class="f25 f2-ns normal tc ma0 mb5">
+        Test drive Offen on your system.
+      </h3>
+
+      <p class="lh-title ma0 mb3 gray">
+        Open your terminal and type:
+      </p>
+      <div class="flex flex-column items-center">
+        <div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
+          <code class="ma0 lh-solid word-wrap white">
+            curl https://demo.offen.dev | sh
+          </code>
+        </div>
+      </div>
+
+      <p class="lh-title ma0 mb3 gray">
+        With Docker use:
+      </p>
+      <div class="flex flex-column items-center">
+        <div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
+          <code class="ma0 lh-solid word-wrap white">
+            docker run --rm -it -p 9876:9876 offen/offen:latest demo -port 9876
+          </code>
+        </div>
+      </div>
+
+      <hr class="ma0 mb5 b--black-05">
+
+      <h3 class="f25 normal tc ma0 mb5">
+        Read the docs.
+      </h3>
+      <div class="flex flex-column items-center">
+        <p class="lh-title tc ma0 mb2 gray">
+          Details on how to<br> install and run Offen
+        </p>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 cclr-fnt-black-mid" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open Docs</a>
+      </div>
+
+    </div>
+
+  </div>
+</div>
+{% endblock %}