improve click progress through our app

author: erdgeist <erdgeist@bauklotz.fritz.box> 2016-08-07 02:51:25 +0200
committer: erdgeist <erdgeist@bauklotz.fritz.box> 2016-08-07 02:51:25 +0200
commit: 3818beb91db0ae64a3492f68ca96451193678808 (patch)
tree: 707fb6bb4eb979eb2edd7993eb18c57e2705459d
parent: 2653f6a943a6ed74e2b72246ba8211c5fb699a7f (diff)
3 files changed, 67 insertions, 13 deletions
diff --git a/index.html b/index.html
index e098100..3a48a29 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,9 @@
  <body>
    <div id="wrapper" class="wrapper step1">
      <div class="collapsable block-step1">
-        <h1>Abmahnbeantworter</h1>
+        <div onclick="step0_done()" class="block-header">
+          <h1>Abmahnbeantworter</h1>
+        </div>
        <div class="juice">
          <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>
          <p>Erzeugen Sie mit diesem Schriftsatz-Generator in fünf Schritten ein Antwortschreiben, das die abmahnende Kanzlei über die Unrechtmäßigkeit der Abmahnung in Kenntnis setzt.</p>
@@ -26,10 +28,18 @@
        <div class="juice block-stepcancel">
          <p>Bitte benutzen Sie diesen Vordruck nur, wenn Sie tatsächlich nicht für die abgemahnte Verletzung verantwortlich sind. Sollte dies doch der Fall sein, oder wenn Sie sich <b>nicht</b> sicher sind, dann suchen Sie bitte einen Anwalt auf.</p>
          <p>Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Dadurch können erhebliche Kosten entstehen.</p>
+          <div class="one-button">
+            <a href="https://duckduckgo.com/?q=anwalt+urheberrecht">
+              <div class="button button-green">Anwalt suchen</div>
+            </a>
+          </div>
        </div>
      </div>
      <div class="collapsable block-step2">
-        <h2>Entlastendes aus dem Sachverhalt</h2>
+        <div onclick="step1_done()" class="block-header">
+          <div class="done">&#x2713;</div>
+          <h2>Entlastendes aus dem Sachverhalt</h2>
+        </div>
        <div class="juice">
          <p>Bevor wir loslegen, sammeln wir alle Informationen ein, die der abmahnenden Kanzlei verdeutlichen, warum die Abmahnung unberechtigt ist.</p>
@@ -62,7 +72,10 @@
        </div>
      </div>
      <div class="collapsable block-step3">
-        <h2>Abgemahnter</h2>
+        <div onclick="step2_done()" class="block-header">
+          <div class="done">&#x2713;</div>
+          <h2>Abgemahnter</h2>
+        </div>
        <div class="juice">
           <div><a href="javascript:ausfuellen()" class="button">Debug: pre-fill</a></div>
          <p>Hier benötigen wir Ihre Informationen, um das Anschreiben mit einem Absender zu versehen. Bitte fügen Sie Namen und Adresse wie auf der Abmahnung ein.</p>
@@ -85,7 +98,10 @@
        </div>
      </div>
      <div class="collapsable block-step4">
-        <h2>Abmahnender</h2>
+        <div onclick="step3_done()" class="block-header">
+          <div class="done">&#x2713;</div>
+          <h2>Abmahnender</h2>
+        </div>
        <div class="juice">
          <p>Ist der Abmahner eine der folgenden Kanzleien? Dann können wir die Adresse gleich per Click übernehmen.</p>
          <button class="w3-btn" onclick="sebastian()">Daniel Sebastian Rechtsanwalt</button>
@@ -112,7 +128,10 @@
        </div>
      </div>
      <div class="collapsable block-step5">
-        <h2>Vorgang</h2>
+        <div onclick="step4_done()" class="block-header">
+          <div class="done">&#x2713;</div>
+          <h2>Vorgang</h2>
+        </div>
        <div class="juice">
          <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, um die Antwort der Abmahnung zuordnen zu können.</p>
          <p>Das Datum der Abmahnung hilft Ihnen später, die Einhaltung der Fristen nachvollziehen zu können. Wir geben es in der Antwort mit an.</p>
@@ -129,17 +148,22 @@
        </div>
      </div>
      <div class="collapsable block-step6">
-        <h2 class="block_titel">Erzeugen</h2>
+        <div onclick="step5_done()" class="block-header">
+          <div class="done">&#x2713;</div>
+          <h2>Erzeugen</h2>
+        </div>
        <div class="juice">
          <p>Wir haben nun alle Informationen, um das Antwortschreiben erzeugen zu können:</p>
          <div class="one-button">
-            <div class="button button-green" onclick="abmahnbeantworter()">Abmahnung beantworten</div>
+            <div class="button button-green" onclick="abmahnbeantworter()">Antworten</div>
          </div>
          <p class="hint">Drucken Sie das Schreiben aus und schicken Sie es per Post an die abmahnende Kanzlei. Optional können Sie zur Wahrung der Frist das Schreiben auch vorab <span id="faxempfaenger"></span>faxen.</p>
        </div>
      </div>
      <div class="hidden collapsable block-step7">
-        <h2 class="block_titel">Und jetzt?</h2>
+        <div class="block-header">
+          <h2>Und jetzt?</h2>
+        </div>
        <div class="juice">
          <p>Nimmt die abmahnende Kanzlei ihre Forderung nicht innerhalb unserer Frist (14 Tage) zurück, steht Ihnen eine gerichtliche Klärung zu.</p>
          <p>Die Auslagen hierfür können Sie – im Gegensatz zur ersten Antwort auf die Abmahnung – vom Abmahner zurückfordern. Dazu gehören auch die Anwaltskosten.</p>
diff --git a/js/abmahn.js b/js/abmahn.js
index 6864d4f..353111b 100644
--- a/js/abmahn.js
+++ b/js/abmahn.js
@@ -12,6 +12,7 @@ function setText(input, text) {
  document.getElementById(input).value = text;
 }
+function step0_done()   { document.getElementById('wrapper').className = 'wrapper step1'; }
 function step1_cancel() { document.getElementById('wrapper').className = 'wrapper stepcancel'; }
 function step1_done()   { document.getElementById('wrapper').className = 'wrapper step2'; }
 function step2_done()   { document.getElementById('wrapper').className = 'wrapper step3'; }
diff --git a/style.css b/style.css
index 3bd370c..e737cf7 100644
--- a/style.css
+++ b/style.css
@@ -32,6 +32,7 @@
 body {
  font-family: 'SourceSansPro', sans-serif;
+  background-color: #F1F2E3;
 }
 .wrapper {
@@ -45,6 +46,7 @@ h1 {
  font-size: 30pt;
  font-weight: 300;
  text-transform: uppercase;
+  cursor: pointer;
 }
 h2 {
@@ -53,7 +55,7 @@ h2 {
  cursor: pointer;
 }
-h1, h2, h3, .juice {
+.block-header, .juice {
  min-width: 480px;
  width: 50%;
  margin: 0.5em auto 0 auto;
@@ -151,11 +153,12 @@ h1, h2, h3, .juice {
 .two-buttons,
 .one-button {
-  height: 3em;
+  height: 4em;
+  margin: 1em 0 0.5em 0;
 }
 .button {
-  width: 33%;
+  width: 45%;
  height: 2em;
  padding-top: 0.7em;
  padding-bottom: 0;
@@ -210,7 +213,6 @@ ul {
  margin-left: 0;
  margin-right: 0;
  padding: 0.4em 0 0.4em 0;
-  border-top: 8px solid white;
  text-align: center;
  position: fixed;
  bottom: 0px;
@@ -232,6 +234,14 @@ ul {
  width: 100%;
 }
+.done {
+  float: right;
+  font-size: 24pt;
+  margin-top: -0.2em;
+  display: none;
+  visibility: hidden;
+}
 input[type="text"] {
  width: 90%;
 }
@@ -244,8 +254,27 @@ input[type="text"] {
 .wrapper.step6 .block-step6 .juice,
 .wrapper.step7 .block-step7 .juice,
 .wrapper.step7 .block-step7,
 .wrapper.stepcancel .block-stepcancel.juice,
-.wrapper.stepcancel #unsicher {
+.wrapper.stepcancel #unsicher,
+.wrapper.step3 .block-step2 .done,
+.wrapper.step4 .block-step2 .done,
+.wrapper.step5 .block-step2 .done,
+.wrapper.step6 .block-step2 .done,
+.wrapper.step7 .block-step2 .done,
+.wrapper.step4 .block-step3 .done,
+.wrapper.step5 .block-step3 .done,
+.wrapper.step6 .block-step3 .done,
+.wrapper.step7 .block-step3 .done,
+.wrapper.step5 .block-step4 .done,
+.wrapper.step6 .block-step4 .done,
+.wrapper.step7 .block-step4 .done,
+.wrapper.step6 .block-step5 .done,
+.wrapper.step7 .block-step5 .done,
+.wrapper.step7 .block-step6 .done
+{
  display: block !important;
  visibility: visible !important;
 }
author	erdgeist <erdgeist@bauklotz.fritz.box>	2016-08-07 02:51:25 +0200
committer	erdgeist <erdgeist@bauklotz.fritz.box>	2016-08-07 02:51:25 +0200
commit	3818beb91db0ae64a3492f68ca96451193678808 (patch)
tree	707fb6bb4eb979eb2edd7993eb18c57e2705459d
parent	2653f6a943a6ed74e2b72246ba8211c5fb699a7f (diff)