summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html50
-rw-r--r--js/abmahn.js82
-rw-r--r--style.css138
3 files changed, 156 insertions, 114 deletions
diff --git a/index.html b/index.html
index ec71d3a..e44568a 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,9 @@
9 <script src="js/abmahn.js"></script> 9 <script src="js/abmahn.js"></script>
10 </head> 10 </head>
11 <body> 11 <body>
12 <div id="wrapper" class="not-confirmed step1"> 12 <div id="wrapper" class="not-confirmed step-1 stepdone-0">
13 <div class="collapsable block-step1"> 13 <div class="collapsable block-step1">
14 <div onclick="step0_done()" class="block-header"> 14 <div onclick="head_1_click()" class="block-header">
15 <h1 id="head1"><svg width="42px" height="42px"> 15 <h1 id="head1"><svg width="42px" height="42px">
16<path d="M21,1C9.954,1,1,9.954,1,21s8.954,20,20,20s20-8.954,20-20S32.046,1,21,1z M30.739,20.971c0-0.31-0.116-0.592-0.349-0.845 16<path d="M21,1C9.954,1,1,9.954,1,21s8.954,20,20,20s20-8.954,20-20S32.046,1,21,1z M30.739,20.971c0-0.31-0.116-0.592-0.349-0.845
17 c-0.233-0.251-0.524-0.378-0.874-0.378c-0.349,0-0.631,0.126-0.844,0.378c-0.214,0.253-0.339,0.535-0.378,0.845h-3.232 17 c-0.233-0.251-0.524-0.378-0.874-0.378c-0.349,0-0.631,0.126-0.844,0.378c-0.214,0.253-0.339,0.535-0.378,0.845h-3.232
@@ -29,13 +29,13 @@
29 <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p> 29 <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>
30 <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> 30 <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>
31 31
32 <div class="moreinfo"> 32 <div class="block-moreinfo">
33 <dl> 33 <dl>
34 <dt>Q: Welches Ziel verfolgt der Abmahnbeantworter?</dt> 34 <dt>Q: Welches Ziel verfolgt der Abmahnbeantworter?</dt>
35 <dd> 35 <dd>
36 <p>A: Wir wollen mehr Menschen ermutigen, ihr Internet mit Nachbarn, Passanten und Netz-Bedürftigen zu teilen.</p> 36 <p>A: Wir wollen mehr Menschen ermutigen, ihr Internet mit Nachbarn, Passanten und Netz-Bedürftigen zu teilen.</p>
37 <p>Momentan wird dies durch aggressiv auftretende Rechtewahrnehmer erschwert, die dem Inhaber des Anschlusses für vermeintlich über sein Netz begangene Urheberrechtsverstöße kostenpflichtig abmahnen. Dabei stehen so Abgemahnte einer für Unerfahrene komplexen Materie gegenüber, die laut Abmahnschreiben mit empfindlicher finanzieller Belastung (Androhung?) einhergeht.</p> 37 <p>Momentan wird dies durch aggressiv auftretende Rechtewahrnehmer erschwert, die dem Inhaber des Anschlusses für vermeintlich über sein Netz begangene Urheberrechtsverstöße kostenpflichtig abmahnen. Dabei stehen so Abgemahnte einer für Unerfahrene komplexen Materie gegenüber, die laut Abmahnschreiben mit empfindlichen finanziellen Folgen einhergeht.</p>
38 <p>Der Abmahnbeantworter soll unberechtigt Abgemahnte dabei unterstützen, sich schnell, präzise und zuerst kostenfrei vorerst ohne Kosten für einen eigenen Anwalt gegen die Abmahnung wehren zu können.</p> 38 <p>Der Abmahnbeantworter soll unberechtigt Abgemahnte dabei unterstützen, sich schnell, präzise und zuerst ohne Kosten für einen eigenen Anwalt gegen die Abmahnung wehren zu können.</p>
39 <p>Zudem versuchen wir, einer groben Ungerechtigkeit im Abmahnwesen entgegenzuwirken, indem wir das Kostenrisiko für unberechtigte Abmahnungen wieder dem Abmahner überlassen.</p> 39 <p>Zudem versuchen wir, einer groben Ungerechtigkeit im Abmahnwesen entgegenzuwirken, indem wir das Kostenrisiko für unberechtigte Abmahnungen wieder dem Abmahner überlassen.</p>
40 </dd> 40 </dd>
41 <dt>Q: Wann ist denn eine Abmahnung unberechtigt?</dt> 41 <dt>Q: Wann ist denn eine Abmahnung unberechtigt?</dt>
@@ -48,7 +48,7 @@
48 </dd> 48 </dd>
49 <dt>Q: Wieso? Muss nicht bei Rechtsstreitigkeiten die unterlegene Seite bezahlen?</dt> 49 <dt>Q: Wieso? Muss nicht bei Rechtsstreitigkeiten die unterlegene Seite bezahlen?</dt>
50 <dd> 50 <dd>
51 <p>A: In einem ordentlichen Gerichtsverfahren ist dies tatsächlich der Fall. Bei einer Abmahnung ist das anders, da diese im Urheberrecht als Werkzeug ursprünglich für eine vorgerichtliche Klärung von Streitigkeiten zwischen Firmen gedacht war. Eine Rechtsaat der Otto-Normal-Anschlussinhaber keine eigene Rechtsabteilung und muss sich einen Anwalt nehmen.</p> 51 <p>A: In einem ordentlichen Gerichtsverfahren ist dies tatsächlich der Fall. Bei einer Abmahnung ist das anders, da diese im Urheberrecht als Werkzeug ursprünglich für eine vorgerichtliche Klärung von Streitigkeiten zwischen Firmen gedacht war. Eine Rechtsabteilung schickt einer anderen den Hinweis, das Problem wird gelöst und man muss kein Gericht damit beschäftigen. Leider hat der Otto-Normal-Anschlussinhaber keine eigene Rechtsabteilung und muss sich einen Anwalt nehmen.</p>
52 </dd> 52 </dd>
53 <dt>Q: Heißt das, ich muss das ganze Verfahren ohne Anwalt durchfechten?</dt> 53 <dt>Q: Heißt das, ich muss das ganze Verfahren ohne Anwalt durchfechten?</dt>
54 <dd> 54 <dd>
@@ -69,7 +69,7 @@
69 <dt>Q: Was passiert mit meinen Daten, die ich in den Abmahnbeantworter eingebe?</dt> 69 <dt>Q: Was passiert mit meinen Daten, die ich in den Abmahnbeantworter eingebe?</dt>
70 <dd> 70 <dd>
71 <p>A: Wir senden keinerlei Informationen an unseren Web-Server und können daher auch mit den Daten keinen Unfug treiben. Die Daten verlassen die Abmahnbeantworter-Seite einzig als fertiges PDF. Dieses wird mittels Javascript von Ihrem Web-Browser selbst erzeugt.</p> 71 <p>A: Wir senden keinerlei Informationen an unseren Web-Server und können daher auch mit den Daten keinen Unfug treiben. Die Daten verlassen die Abmahnbeantworter-Seite einzig als fertiges PDF. Dieses wird mittels Javascript von Ihrem Web-Browser selbst erzeugt.</p>
72 <p>(In einer zukünftigen Version bieten wir an, auf Wunsch im Seiten-spezifischen sogenanten 'localStorage' des Browser die Details der Abmahnung für spätere Schreiben oder Klagen zu hinterlegen)</p> 72 <p>(In einer zukünftigen Version bieten wir an, auf Wunsch im Seiten-spezifischen sogenanten <a href="https://de.wikipedia.org/wiki/Web_Storage">localStorage</a> des Browser die Details der Abmahnung für spätere Schreiben oder Klagen zu hinterlegen)</p>
73 </dd> 73 </dd>
74 <dt>Q: Soll ich eine Unterlassungserklärung unterschreiben?</dt> 74 <dt>Q: Soll ich eine Unterlassungserklärung unterschreiben?</dt>
75 <dd> 75 <dd>
@@ -79,14 +79,14 @@
79 </div> 79 </div>
80 <p><strong>Sie sind sicher, diese angebliche Urheberrechtsverletzung nicht begangen zu haben?</strong></p> 80 <p><strong>Sie sind sicher, diese angebliche Urheberrechtsverletzung nicht begangen zu haben?</strong></p>
81 <div class="two-buttons"> 81 <div class="two-buttons">
82 <div class="button button-green" onclick="step1_done()">Ja, ich bin sicher.</div> 82 <div class="button button-green" onclick="step_1_done()">Ja, ich bin sicher.</div>
83 <div class="button button-red" onclick="step0_cancel()">Nein, bin unsicher.</div> 83 <div class="button button-red" onclick="step_0_cancel()">Nein, bin unsicher.</div>
84 </div> 84 </div>
85 <div class="hint show-moreinfo" onclick="show_moreinfo()">Sie möchten mehr darüber erfahren?</div> 85 <div class="hint show-moreinfo" onclick="show_moreinfo()">Sie möchten mehr darüber erfahren?</div>
86 <div class="hint show-lessinfo" onclick="show_lessinfo()">Sie haben genug darüber erfahren?</div> 86 <div class="hint hide-moreinfo" onclick="hide_moreinfo()">Sie haben genug darüber erfahren?</div>
87 </div> 87 </div>
88 </div> 88 </div>
89 <div class="collapsable block-stepcancel" id="unsicher"> 89 <div class="collapsable block-step0" id="unsicher">
90 <div class="juice"> 90 <div class="juice">
91 <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> 91 <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>
92 <p>Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Dadurch können erhebliche Kosten entstehen.</p> 92 <p>Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Dadurch können erhebliche Kosten entstehen.</p>
@@ -98,7 +98,7 @@
98 </div> 98 </div>
99 </div> 99 </div>
100 <div class="collapsable block-step2"> 100 <div class="collapsable block-step2">
101 <div onclick="step1_done()" class="block-header"> 101 <div onclick="head_2_click()" class="block-header">
102 <h2 id="head2"><div class="circle_num undone">1</div><div class="circle_num done">✓</div> Wer mahnt ab?</h2> 102 <h2 id="head2"><div class="circle_num undone">1</div><div class="circle_num done">✓</div> Wer mahnt ab?</h2>
103 </div> 103 </div>
104 <div class="juice"> 104 <div class="juice">
@@ -123,12 +123,12 @@
123 <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li> 123 <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li>
124 </ul> 124 </ul>
125 <div class="one-button"> 125 <div class="one-button">
126 <div class="button button-green" onclick="step2_done()">Weiter</div> 126 <div class="button button-green" onclick="step_2_done()">Weiter</div>
127 </div> 127 </div>
128 </div> 128 </div>
129 </div> 129 </div>
130 <div class="collapsable block-step3"> 130 <div class="collapsable block-step3">
131 <div onclick="step2_done()" class="block-header"> 131 <div onclick="head_3_click()" class="block-header">
132 <h2 id="head3"><div class="circle_num undone">2</div><div class="circle_num done">✓</div> Wie lautet das Aktenzeichen?</h2> 132 <h2 id="head3"><div class="circle_num undone">2</div><div class="circle_num done">✓</div> Wie lautet das Aktenzeichen?</h2>
133 </div> 133 </div>
134 <div class="juice"> 134 <div class="juice">
@@ -206,12 +206,12 @@
206 206
207 <p class="hint">Hinweis: Die vom Abmahner angegebenen Fristen sind meist zu knapp und können ruhig ignoriert werden. Jedoch sollte Ihre Antwort nicht grundlos mehr als 14 Tage nach Eingang der Abmahnung erfolgen.</p> 207 <p class="hint">Hinweis: Die vom Abmahner angegebenen Fristen sind meist zu knapp und können ruhig ignoriert werden. Jedoch sollte Ihre Antwort nicht grundlos mehr als 14 Tage nach Eingang der Abmahnung erfolgen.</p>
208 <div class="one-button"> 208 <div class="one-button">
209 <div class="button button-green" onclick="step3_done()">Weiter</div> 209 <div class="button button-green" onclick="step_3_done()">Weiter</div>
210 </div> 210 </div>
211 </div> 211 </div>
212 </div> 212 </div>
213 <div class="collapsable block-step4"> 213 <div class="collapsable block-step4">
214 <div onclick="step3_done()" class="block-header"> 214 <div onclick="head_4_click()" class="block-header">
215 <h2 id="head4"><div class="circle_num undone">3</div><div class="circle_num done">✓</div> Warum sind Sie nicht Täter?</h2> 215 <h2 id="head4"><div class="circle_num undone">3</div><div class="circle_num done">✓</div> Warum sind Sie nicht Täter?</h2>
216 </div> 216 </div>
217 <div class="juice"> 217 <div class="juice">
@@ -227,12 +227,12 @@
227 <div><input id="alibi_keinendgeraet" type="checkbox"/><label for="alibi_keinendgeraet"><span></span>Ich besitze keinen internetfähigen Computer.</label></div> 227 <div><input id="alibi_keinendgeraet" type="checkbox"/><label for="alibi_keinendgeraet"><span></span>Ich besitze keinen internetfähigen Computer.</label></div>
228 <div><input id="alibi_nichtwohnhaft" type="checkbox"/><label for="alibi_nichtwohnhaft"><span></span>Zum angegebenen Zeitpunkt habe ich an der ermittelten Adresse nicht (mehr) gewohnt.</label></div> 228 <div><input id="alibi_nichtwohnhaft" type="checkbox"/><label for="alibi_nichtwohnhaft"><span></span>Zum angegebenen Zeitpunkt habe ich an der ermittelten Adresse nicht (mehr) gewohnt.</label></div>
229 <div class="one-button"> 229 <div class="one-button">
230 <div class="button button-green" onclick="step4_done()">Weiter</div> 230 <div class="button button-green" onclick="step_4_done()">Weiter</div>
231 </div> 231 </div>
232 </div> 232 </div>
233 </div> 233 </div>
234 <div class="collapsable block-step5"> 234 <div class="collapsable block-step5">
235 <div onclick="step4_done()" class="block-header"> 235 <div onclick="head_5_click()" class="block-header">
236 <h2 id="head5"><div class="circle_num undone">4</div><div class="circle_num done">✓</div> Warum sind Sie kein Störer?</h2> 236 <h2 id="head5"><div class="circle_num undone">4</div><div class="circle_num done">✓</div> Warum sind Sie kein Störer?</h2>
237 </div> 237 </div>
238 <div class="juice"> 238 <div class="juice">
@@ -247,12 +247,12 @@
247 <p></p> 247 <p></p>
248 <div class="hint">Achtung: Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Wählen Sie daher auf jeden Fall nur die Häkchen aus, die den Tatsachen entsprechen.</div> 248 <div class="hint">Achtung: Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Wählen Sie daher auf jeden Fall nur die Häkchen aus, die den Tatsachen entsprechen.</div>
249 <div class="one-button"> 249 <div class="one-button">
250 <div class="button button-green" onclick="step5_done()">Weiter</div> 250 <div class="button button-green" onclick="step_5_done()">Weiter</div>
251 </div> 251 </div>
252 </div> 252 </div>
253 </div> 253 </div>
254 <div class="collapsable block-step6"> 254 <div class="collapsable block-step6">
255 <div onclick="step5_done()" class="block-header"> 255 <div onclick="head_6_click()" class="block-header">
256 <h2 id="head6"><div class="circle_num undone">5</div><div class="circle_num done">✓</div> Wer wird abgemahnt?</h2> 256 <h2 id="head6"><div class="circle_num undone">5</div><div class="circle_num done">✓</div> Wer wird abgemahnt?</h2>
257 </div> 257 </div>
258 <div class="juice"> 258 <div class="juice">
@@ -270,12 +270,12 @@
270 <p>Datenschutzhinweis: Wir übertragen Ihre Daten nicht ins Internet. Das Antwortschreiben wird auf Ihrem Computer erstellt.</p> 270 <p>Datenschutzhinweis: Wir übertragen Ihre Daten nicht ins Internet. Das Antwortschreiben wird auf Ihrem Computer erstellt.</p>
271 </div> 271 </div>
272 <div class="one-button"> 272 <div class="one-button">
273 <div class="button button-green" onclick="step6_done()">Weiter</div> 273 <div class="button button-green" onclick="step_6_done()">Weiter</div>
274 </div> 274 </div>
275 </div> 275 </div>
276 </div> 276 </div>
277 <div class="collapsable block-step7"> 277 <div class="collapsable block-step7">
278 <div onclick="step6_done()" class="block-header"> 278 <div onclick="head_7_click()" class="block-header">
279 <h2 id="head7"><div class="circle_num">&#x2713;</div>Fertig!</h2> 279 <h2 id="head7"><div class="circle_num">&#x2713;</div>Fertig!</h2>
280 </div> 280 </div>
281 <div class="juice"> 281 <div class="juice">
@@ -293,7 +293,7 @@
293 </div> 293 </div>
294 <div id="footer" class="footer"> 294 <div id="footer" class="footer">
295 <div class="scrollcontainer"> 295 <div class="scrollcontainer">
296 <div class="credits"> 296 <div class="block-credits">
297 <div class="partners"> 297 <div class="partners">
298 <a href="https://www.ccc.de/"><div id="ccc" class="partner"> 298 <a href="https://www.ccc.de/"><div id="ccc" class="partner">
299 <img src="img/ccc.svg" height="50px" alt="Logo des Chaos Computer Clubs"/> 299 <img src="img/ccc.svg" height="50px" alt="Logo des Chaos Computer Clubs"/>
@@ -308,12 +308,12 @@
308 <div>Gesellschaft für Freiheitsrechte</div> 308 <div>Gesellschaft für Freiheitsrechte</div>
309 </div></a> 309 </div></a>
310 </div> 310 </div>
311 <div class="credit imprint" onclick="show_impressum()"><span>Impressum + Datenschutz<span></div> 311 <div class="credit show-impressum" onclick="show_impressum()"><span>Impressum + Datenschutz<span></div>
312 <div class="credit implementor"><a href="https://erdgeist.org/">erdgeist</a> (Konzept + Umsetzung)</div> 312 <div class="credit implementor"><a href="https://erdgeist.org/">erdgeist</a> (Konzept + Umsetzung)</div>
313 <div class="credit implementor"><a href="https://kanzlei-hubrig.de/">Beata Hubrig</a> (Rechtliches)</div> 313 <div class="credit implementor"><a href="https://kanzlei-hubrig.de/">Beata Hubrig</a> (Rechtliches)</div>
314 <div class="credit implementor"><a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a> (Design) ∙ <a href="http://elektrowecker.de/">Pepo</a> (UX)</div> 314 <div class="credit implementor"><a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a> (Design) ∙ <a href="http://elektrowecker.de/">Pepo</a> (UX)</div>
315 </div> 315 </div>
316 <div class="impressum"> 316 <div class="block-impressum">
317 <div class="partners"> 317 <div class="partners">
318 <p>Der Abmahnbeantworter ist ein Projekt des Chaos Computer Club e. V., des Fördervereins Freie Netzwerke e. V. und der Gesellschaft für Freiheitsrechte e. V.</p> 318 <p>Der Abmahnbeantworter ist ein Projekt des Chaos Computer Club e. V., des Fördervereins Freie Netzwerke e. V. und der Gesellschaft für Freiheitsrechte e. V.</p>
319 <div class="back circle_num" onclick="hide_impressum()">⇦</div><!-- 319 <div class="back circle_num" onclick="hide_impressum()">⇦</div><!--
diff --git a/js/abmahn.js b/js/abmahn.js
index 6b6e39c..46f18e6 100644
--- a/js/abmahn.js
+++ b/js/abmahn.js
@@ -15,6 +15,21 @@ function setClass(id, classes) {
15 document.getElementById(id).className = classes; 15 document.getElementById(id).className = classes;
16} 16}
17 17
18function hasClass(id, classes) {
19 return (" " + document.getElementById(id).className + " ").replace(/[\n\t]/g, " ").indexOf(" " + classes + " ") > -1;
20}
21
22function addClass(id, classes) {
23 if (hasClass(id, classes)) { return; }
24 document.getElementById(id).className += ' ' + classes;
25}
26
27function setExclusiveClass(id,value,clearpattern) {
28 var reg = new RegExp('(\\s|^)' + clearpattern + '-[^\\s]+(\\s|$)');
29 var elem = document.getElementById(id);
30 elem.className = elem.className.replace(reg, ' ') + ' ' + clearpattern + '-' + value;
31}
32
18function setSelection(id, selection) { 33function setSelection(id, selection) {
19 document.getElementById(id).value = selection; 34 document.getElementById(id).value = selection;
20} 35}
@@ -56,21 +71,64 @@ function scrollTo(end) {
56 step(); 71 step();
57} 72}
58 73
59function step0_cancel() { scrollTo(0); setClass('wrapper', 'not-confirmed stepcancel'); } 74/* Handle all visual transitions first */
60function step0_done() { scrollTo(0); setClass('wrapper', 'step1'); } 75function hide_impressum() { setExclusiveClass('footer', 'hidden', 'impressum'); }
61function step1_done() { scrollTo(0); setClass('wrapper', 'step2'); } 76function show_impressum() { setExclusiveClass('footer', 'shown', 'impressum'); }
62function step2_done() { scrollTo(103); setClass('wrapper', 'step3'); } 77
63function step3_done() { scrollTo(196); setClass('wrapper', 'step4'); } 78function show_moreinfo() { setExclusiveClass('wrapper', 'shown', 'moreinfo'); }
64function step4_done() { scrollTo(289); setClass('wrapper', 'step5'); } 79function hide_moreinfo() { scrollTo(0); setExclusiveClass('wrapper', 'hidden', 'moreinfo'); }
65function step5_done() { scrollTo(382); setClass('wrapper', 'step6'); } 80
66function step6_done() { scrollTo(475); setClass('wrapper', 'step7'); } 81function head_n_click(step, scroll_val) {
82 if(!hasClass('wrapper', 'stepdone-' + (step - 1).toString() )) { return; }
83 scrollTo(scroll_val);
84 setExclusiveClass('wrapper', step.toString(), 'step');
85 setExclusiveClass('wrapper', 'hidden', 'moreinfo');
86}
87
88function head_1_click() { head_n_click(1, 0); }
89function head_2_click() { head_n_click(2, 0); }
90function head_3_click() { head_n_click(3, 103); }
91function head_4_click() { head_n_click(4, 196); }
92function head_5_click() { head_n_click(5, 289); }
93function head_6_click() { head_n_click(6, 382); }
94function head_7_click() { head_n_click(7, 475); }
95
96/* Handle functional step transitions now */
97function step_0_cancel() { scrollTo(0); setClass('wrapper', 'not-confirmed step-0'); }
98
99function step_1_done() {
100 addClass('wrapper', 'stepdone-1');
101 head_2_click();
102}
103
104function step_2_done() {
105 addClass('wrapper', 'stepdone-2');
106 head_3_click();
107}
108
109function step_3_done() {
110 addClass('wrapper', 'stepdone-3');
111 head_4_click();
112}
113
114function step_4_done() {
115 addClass('wrapper', 'stepdone-4');
116 head_5_click();
117}
118
119function step_5_done() {
120 addClass('wrapper', 'stepdone-5');
121 head_6_click();
122}
123
124function step_6_done() {
125 addClass('wrapper', 'stepdone-6');
126 head_7_click();
127}
67 128
68function hide_impressum() { setClass('footer', 'footer'); }
69function show_impressum() { setClass('footer', 'footer show-imprint'); }
70 129
71function show_moreinfo() { setClass('step1hook', 'juice moreinfoshown'); }
72function show_lessinfo() { scrollTo(0); setClass('step1hook', 'juice'); }
73 130
131/* Handle presets for known kanzleien */
74function waldorf() { 132function waldorf() {
75 setText('abmahnender_kanzlei', 'Waldorf & Frommer RAe'); 133 setText('abmahnender_kanzlei', 'Waldorf & Frommer RAe');
76 setText('abmahnender_bearbeiter', ''); 134 setText('abmahnender_bearbeiter', '');
diff --git a/style.css b/style.css
index 1aa7a87..fa11114 100644
--- a/style.css
+++ b/style.css
@@ -85,7 +85,7 @@ h1 svg {
85 transition: transform 0.5s; 85 transition: transform 0.5s;
86} 86}
87 87
88#wrapper.step1 h1 svg { 88#wrapper.step-1 h1 svg {
89 transform: scale(1.35) translate(0px, 4px) rotate(360deg); 89 transform: scale(1.35) translate(0px, 4px) rotate(360deg);
90} 90}
91 91
@@ -227,7 +227,7 @@ label:first-line {
227/* Global element definitions done. 227/* Global element definitions done.
228 Now for basic color scheme */ 228 Now for basic color scheme */
229#unsicher { background-color: #840020; } 229#unsicher { background-color: #840020; }
230.footer { background-color: #F1F2E3; } 230#footer { background-color: #F1F2E3; }
231.block-step1 { background-color: #F1F2E3; } 231.block-step1 { background-color: #F1F2E3; }
232.block-step2 { background-color: #047E7C; } 232.block-step2 { background-color: #047E7C; }
233.block-step3 { background-color: #0C6D74; } 233.block-step3 { background-color: #0C6D74; }
@@ -254,7 +254,7 @@ label:first-line {
254 background-color: black; 254 background-color: black;
255} 255}
256 256
257.footer { 257#footer {
258 color: #8E99A0; 258 color: #8E99A0;
259} 259}
260 260
@@ -266,7 +266,7 @@ label:first-line {
266} 266}
267 267
268/* Footer shadow is inverted an marks end of stacked cards */ 268/* Footer shadow is inverted an marks end of stacked cards */
269.footer { 269#footer {
270 box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5); 270 box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5);
271} 271}
272 272
@@ -325,9 +325,9 @@ dd {
325 global state (as set with a class on the wrapper element) 325 global state (as set with a class on the wrapper element)
326*/ 326*/
327.juice, 327.juice,
328.block-moreinfo,
328#unsicher, 329#unsicher,
329.moreinfo, 330#wrapper.step-0 h2 {
330#wrapper.stepcancel h2 {
331 overflow: hidden; 331 overflow: hidden;
332 max-height: 0px; 332 max-height: 0px;
333 transition: max-height, height; 333 transition: max-height, height;
@@ -336,46 +336,50 @@ dd {
336 transition-delay: 0s; 336 transition-delay: 0s;
337} 337}
338 338
339.show-lessinfo, 339.hide-moreinfo,
340.show-moreinfo { 340.show-moreinfo {
341 display: inline-block; 341 display: inline-block;
342 border-bottom: dotted 1px rgba(0,0,0,0.25); 342 border-bottom: dotted 1px rgba(0,0,0,0.25);
343 margin-bottom: 1em;; 343 margin-bottom: 1em;
344 cursor: pointer; 344 cursor: pointer;
345} 345}
346 346
347.show-lessinfo { display: none; } 347.hide-moreinfo { display: none; }
348#step1hook.moreinfoshown .show-lessinfo { display: inline-block; } 348#wrapper.moreinfo-shown .hide-moreinfo { display: inline-block; }
349#step1hook.moreinfoshown .show-moreinfo { display: none; } 349#wrapper.moreinfo-shown .show-moreinfo { display: none; }
350 350
351/* These are the heights of the expanded sections, only shown if the 351/* These are the heights of the expanded sections, only shown if the
352 wrapper has the appropriate class */ 352 wrapper has the appropriate class */
353 353
354#wrapper.step1 .block-step1 .juice { max-height: 450px; } 354#wrapper.step-1 .block-step1 .juice { max-height: 450px; }
355#wrapper.step2 .block-step2 .juice { max-height: 950px; } 355#wrapper.step-2 .block-step2 .juice { max-height: 950px; }
356#wrapper.step3 .block-step3 .juice { max-height: 950px; } 356#wrapper.step-3 .block-step3 .juice { max-height: 950px; }
357#wrapper.step4 .block-step4 .juice { max-height: 1050px; } 357#wrapper.step-4 .block-step4 .juice { max-height: 1050px; }
358#wrapper.step5 .block-step5 .juice { max-height: 1200px; } 358#wrapper.step-5 .block-step5 .juice { max-height: 1200px; }
359#wrapper.step6 .block-step6 .juice { max-height: 850px; } 359#wrapper.step-6 .block-step6 .juice { max-height: 850px; }
360#wrapper.step7 .block-step7 .juice { max-height: 650px; } 360#wrapper.step-7 .block-step7 .juice { max-height: 650px; }
361#step1hook.moreinfoshown .moreinfo { max-height: 3500px; } 361#wrapper.moreinfo-shown .block-moreinfo { max-height: 3500px; }
362#wrapper.step1 .block-step1 #step1hook.moreinfoshown.juice { max-height: 3800px;} 362#wrapper.step-1.moreinfo-shown .block-step1 .juice { max-height: 3800px;}
363 363
364/* The unsicher section does not have a headline initially visible, 364/* The unsicher section does not have a headline initially visible,
365 so the sections padding must be hidden and everything must be unhidden together */ 365 so the sections padding must be hidden and everything must be unhidden together */
366#unsicher { 366#unsicher {
367 padding: 0; 367 padding: 0;
368} 368}
369#wrapper.stepcancel .block-stepcancel .juice, 369#wrapper.step-0 .block-step0 .juice,
370#wrapper.stepcancel #unsicher { 370#wrapper.step-0 #unsicher {
371 max-height: 450px; 371 max-height: 450px;
372} 372}
373 373
374/* If the user did not yet confirm that he's sure, disallow expanding blocks */ 374/* If the user did not yet confirm that he's sure, disallow expanding blocks */
375#wrapper.not-confirmed .block-header { 375.block-header { pointer-events: none; }
376 pointer-events: none; 376#wrapper.stepdone-0 #head1 { pointer-events: auto; }
377} 377#wrapper.stepdone-1 #head2 { pointer-events: auto; }
378 378#wrapper.stepdone-2 #head3 { pointer-events: auto; }
379#wrapper.stepdone-3 #head4 { pointer-events: auto; }
380#wrapper.stepdone-4 #head5 { pointer-events: auto; }
381#wrapper.stepdone-5 #head6 { pointer-events: auto; }
382#wrapper.stepdone-6 #head7 { pointer-events: auto; }
379 383
380/* Our navigational buttons have a consistent height defined by its wrapper box */ 384/* Our navigational buttons have a consistent height defined by its wrapper box */
381.two-buttons, 385.two-buttons,
@@ -448,26 +452,6 @@ dd {
448 452
449/* Style things that depend on the progress. 453/* Style things that depend on the progress.
450 Example: circles turn squares when a step is finished */ 454 Example: circles turn squares when a step is finished */
451#wrapper.step3 .block-step2 .circle_num.undone,
452#wrapper.step4 .block-step2 .circle_num.undone,
453#wrapper.step5 .block-step2 .circle_num.undone,
454#wrapper.step6 .block-step2 .circle_num.undone,
455#wrapper.step7 .block-step2 .circle_num.undone,
456#wrapper.step4 .block-step3 .circle_num.undone,
457#wrapper.step5 .block-step3 .circle_num.undone,
458#wrapper.step6 .block-step3 .circle_num.undone,
459#wrapper.step7 .block-step3 .circle_num.undone,
460#wrapper.step5 .block-step4 .circle_num.undone,
461#wrapper.step6 .block-step4 .circle_num.undone,
462#wrapper.step7 .block-step4 .circle_num.undone,
463#wrapper.step6 .block-step5 .circle_num.undone,
464#wrapper.step7 .block-step5 .circle_num.undone,
465#wrapper.step7 .block-step6 .circle_num.undone {
466 transform: rotate3d(45, 45, 1, 90deg);
467 transition: transform 0.5s, visibility 0.5s;
468 visibility: hidden;
469}
470
471.circle_num.done { 455.circle_num.done {
472 position: relative; 456 position: relative;
473 margin-right: -68px; 457 margin-right: -68px;
@@ -479,21 +463,21 @@ dd {
479 color: white; 463 color: white;
480} 464}
481 465
482#wrapper.step3 .block-step2 .circle_num.done, 466#wrapper.stepdone-2 .block-step2 .circle_num.undone,
483#wrapper.step4 .block-step2 .circle_num.done, 467#wrapper.stepdone-3 .block-step3 .circle_num.undone,
484#wrapper.step5 .block-step2 .circle_num.done, 468#wrapper.stepdone-4 .block-step4 .circle_num.undone,
485#wrapper.step6 .block-step2 .circle_num.done, 469#wrapper.stepdone-5 .block-step5 .circle_num.undone,
486#wrapper.step7 .block-step2 .circle_num.done, 470#wrapper.stepdone-6 .block-step6 .circle_num.undone {
487#wrapper.step4 .block-step3 .circle_num.done, 471 transform: rotate3d(45, 45, 1, 90deg);
488#wrapper.step5 .block-step3 .circle_num.done, 472 transition: transform 0.5s, visibility 0.5s;
489#wrapper.step6 .block-step3 .circle_num.done, 473 visibility: hidden;
490#wrapper.step7 .block-step3 .circle_num.done, 474}
491#wrapper.step5 .block-step4 .circle_num.done, 475
492#wrapper.step6 .block-step4 .circle_num.done, 476#wrapper.stepdone-2 .block-step2 .circle_num.done,
493#wrapper.step7 .block-step4 .circle_num.done, 477#wrapper.stepdone-3 .block-step3 .circle_num.done,
494#wrapper.step6 .block-step5 .circle_num.done, 478#wrapper.stepdone-4 .block-step4 .circle_num.done,
495#wrapper.step7 .block-step5 .circle_num.done, 479#wrapper.stepdone-5 .block-step5 .circle_num.done,
496#wrapper.step7 .block-step6 .circle_num.done { 480#wrapper.stepdone-6 .block-step6 .circle_num.done {
497 visibility: visible; 481 visibility: visible;
498 transform: rotate3d(0,0,0,0deg); 482 transform: rotate3d(0,0,0,0deg);
499 transition: transform 0.5s 0.5s, visibility 0.5s 0.5s; 483 transition: transform 0.5s 0.5s, visibility 0.5s 0.5s;
@@ -528,11 +512,11 @@ select.zeit {
528 margin: 0 auto -300px; 512 margin: 0 auto -300px;
529} 513}
530 514
531.footer, .push { 515#footer, .push {
532 height: 300px; 516 height: 300px;
533} 517}
534 518
535.footer { 519#footer {
536 width: 100%; 520 width: 100%;
537 min-width: 540px; 521 min-width: 540px;
538 margin: 0; 522 margin: 0;
@@ -546,20 +530,20 @@ select.zeit {
546} 530}
547 531
548/* Footer links have a softer color than in block 1 */ 532/* Footer links have a softer color than in block 1 */
549.footer a:link, 533#footer a:link,
550.footer a:visited { 534#footer a:visited {
551 color: #8E99A0; 535 color: #8E99A0;
552} 536}
553 537
554.footer .partner a:link, 538#footer .partner a:link,
555.footer .implementor a:link, 539#footer .implementor a:link,
556.footer .partner a:visited, 540#footer .partner a:visited,
557.footer .implementor a:visited, 541#footer .implementor a:visited,
558.footer .imprint span { 542#footer .show-impressum span {
559 border-bottom: dotted 1px rgba(0,0,0,0.25); 543 border-bottom: dotted 1px rgba(0,0,0,0.25);
560} 544}
561 545
562.footer .imprint { 546#footer .show-impressum {
563 cursor: pointer; 547 cursor: pointer;
564 margin-bottom: 1em; 548 margin-bottom: 1em;
565} 549}
@@ -587,7 +571,7 @@ select.zeit {
587 transition: transform 1s; 571 transition: transform 1s;
588} 572}
589 573
590.footer.show-imprint .partner > img { 574#footer.impressum-shown .partner > img {
591 transform: rotate(720deg); 575 transform: rotate(720deg);
592} 576}
593 577
@@ -606,7 +590,7 @@ select.zeit {
606 width: 200%; 590 width: 200%;
607} 591}
608 592
609.impressum { 593.block-impressum {
610 float: right; 594 float: right;
611 width: 50%; 595 width: 50%;
612 height: 260px; 596 height: 260px;
@@ -616,16 +600,16 @@ select.zeit {
616 left: 0%; 600 left: 0%;
617} 601}
618 602
619.impressum p { 603.block-impressum p {
620 margin: 0 0 .1em 0; 604 margin: 0 0 .1em 0;
621} 605}
622 606
623.footer.show-imprint .impressum { 607#footer.impressum-shown .block-impressum {
624 left: -50%; 608 left: -50%;
625 top: 0; 609 top: 0;
626} 610}
627 611
628.credits { 612.block-credits {
629 width: 50%; 613 width: 50%;
630 float: left; 614 float: left;
631 position: relative; 615 position: relative;
@@ -633,7 +617,7 @@ select.zeit {
633 transition: left 1s; 617 transition: left 1s;
634} 618}
635 619
636.footer.show-imprint .credits { 620#footer.impressum-shown .block-credits {
637 left: -50%; 621 left: -50%;
638} 622}
639 623