summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html11
-rw-r--r--js/abmahn.js35
-rw-r--r--style.css79
3 files changed, 89 insertions, 36 deletions
diff --git a/index.html b/index.html
index cc93f0b..f56fdb7 100644
--- a/index.html
+++ b/index.html
@@ -123,6 +123,9 @@
123 <li><input id="abmahnender_ort" type="text" name="ort" placeholder="ort"/></li> 123 <li><input id="abmahnender_ort" type="text" name="ort" placeholder="ort"/></li>
124 <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li> 124 <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li>
125 </ul> 125 </ul>
126 <div id="step2-missing" class="hidden">
127 Wir benötigen mindestens die Adresse der abmahnenden Kanzlei.
128 </div>
126 <div class="one-button"> 129 <div class="one-button">
127 <div class="button button-green" onclick="step_2_done()">Weiter</div> 130 <div class="button button-green" onclick="step_2_done()">Weiter</div>
128 </div> 131 </div>
@@ -134,10 +137,7 @@
134 </div> 137 </div>
135 <div class="juice"> 138 <div class="juice">
136 <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p> 139 <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p>
137 <ul> 140 <input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(akten)-zeichen"/>
138 <li><input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(akten)-zeichen"/></li>
139 <li><input id="vorgang_detail" type="text" name="detail" placeholder="beschreibung (optional)"/></li>
140 </ul>
141 141
142 <p>Datum und Uhrzeit des angeblichen Verstoßes anzugeben zeigt dem Abmahner, dass Sie sich Gedanken gemacht haben, warum Sie ausschließen können, der Täter zu sein. Bitte entnehmen Sie Datum und Uhrzeit dem Abmahnschreiben.</p> 142 <p>Datum und Uhrzeit des angeblichen Verstoßes anzugeben zeigt dem Abmahner, dass Sie sich Gedanken gemacht haben, warum Sie ausschließen können, der Täter zu sein. Bitte entnehmen Sie Datum und Uhrzeit dem Abmahnschreiben.</p>
143 <select class="tag" required id="tat_datum_tag" name="tat_datum_tag"> 143 <select class="tag" required id="tat_datum_tag" name="tat_datum_tag">
@@ -206,6 +206,9 @@
206 </select> 206 </select>
207 207
208 <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 <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>
209 <div id="step3-missing" class="hidden">
210 Das Aktenzeichen ist bei der Beantwortung unerlässlich.
211 </div>
209 <div class="one-button"> 212 <div class="one-button">
210 <div class="button button-green" onclick="step_3_done()">Weiter</div> 213 <div class="button button-green" onclick="step_3_done()">Weiter</div>
211 </div> 214 </div>
diff --git a/js/abmahn.js b/js/abmahn.js
index 44f06e8..7377cea 100644
--- a/js/abmahn.js
+++ b/js/abmahn.js
@@ -38,6 +38,23 @@ function getCheck(id) {
38 return document.getElementById(id).checked; 38 return document.getElementById(id).checked;
39} 39}
40 40
41function ensureContent() {
42 var missing = 0;
43 for(var i = 0;i<arguments.length; i++){
44 var elem = document.getElementById(arguments[i]);
45 if(elem.value=='') {
46 elem.className='missing';
47 elem.onkeypress=function(){
48 this.className='';
49 delete elem.onkeypress;
50 }
51 ++missing;
52 } else
53 elem.className='';
54 }
55 return missing;
56}
57
41// Code is heavily inspired by 58// Code is heavily inspired by
42// https://github.com/alicelieutier/smoothScroll/blob/master/smoothscroll.js 59// https://github.com/alicelieutier/smoothScroll/blob/master/smoothscroll.js
43function scrollTo(end) { 60function scrollTo(end) {
@@ -102,13 +119,23 @@ function step_1_done() {
102} 119}
103 120
104function step_2_done() { 121function step_2_done() {
105 addClass('wrapper', 'stepdone-2'); 122 if (ensureContent('abmahnender_kanzlei', 'abmahnender_strasse', 'abmahnender_plz', 'abmahnender_ort'))
106 head_3_click(); 123 setClass('step2-missing', 'warnmiss');
124 else {
125 setClass('step2-missing', 'hidden');
126 addClass('wrapper', 'stepdone-2');
127 head_3_click();
128 }
107} 129}
108 130
109function step_3_done() { 131function step_3_done() {
110 addClass('wrapper', 'stepdone-3'); 132 if (ensureContent('vorgang_aktenzeichen'))
111 head_4_click(); 133 setClass('step3-missing', 'warnmiss');
134 else {
135 setClass('step3-missing', 'hidden');
136 addClass('wrapper', 'stepdone-3');
137 head_4_click();
138 }
112} 139}
113 140
114function step_4_done() { 141function step_4_done() {
diff --git a/style.css b/style.css
index 12be3e3..fd83938 100644
--- a/style.css
+++ b/style.css
@@ -119,16 +119,21 @@ input[type="text"] {
119 font-size: 13pt; 119 font-size: 13pt;
120 font-weight: normal; 120 font-weight: normal;
121 121
122 background-color : rgba(255, 255, 255, 0.30); 122 transition: background-color 1s;
123 background-color: rgba(255, 255, 255, 0.30);
123 color: white; 124 color: white;
124} 125}
125 126
127input[type="text"].missing {
128 background-color: rgba(255, 127, 127, 0.60);
129}
130
126/* Remove blue focus hint */ 131/* Remove blue focus hint */
127input:focus { 132input:focus {
128 outline: none !important; 133 outline: none !important;
129} 134}
130 135
131/* Style place holder text (and repeat for each browser namespace :( */ 136/* Style place holder text (and repeat for each browser namespace:( */
132::placeholder { 137::placeholder {
133 color: white; 138 color: white;
134 opacity: 0.5; 139 opacity: 0.5;
@@ -179,43 +184,43 @@ select {
179} 184}
180 185
181input[type=checkbox]:not(old) { 186input[type=checkbox]:not(old) {
182 display : none; 187 display: none;
183 opacity : 0; 188 opacity: 0;
184} 189}
185 190
186input[type=checkbox]:not(old) + label { 191input[type=checkbox]:not(old) + label {
187 display : inline-block; 192 display: inline-block;
188 margin-left : 0; 193 margin-left: 0;
189 line-height : 1.7em; 194 line-height: 1.7em;
190 text-indent : -68px; /* Make 2nd line of label align, takes border width of tickbox into account */ 195 text-indent: -68px; /* Make 2nd line of label align, takes border width of tickbox into account */
191 padding-left : 68px; 196 padding-left: 68px;
192} 197}
193 198
194input[type=checkbox]:not(old) + label > span { 199input[type=checkbox]:not(old) + label > span {
195 display : inline-block; 200 display: inline-block;
196 width : 30px; 201 width: 30px;
197 height : 30px; 202 height: 30px;
198 background-color : rgba(255, 255, 255, 0.30); 203 background-color: rgba(255, 255, 255, 0.30);
199 margin : 2px 36px 8px 2px; 204 margin: 2px 36px 8px 2px;
200 border : 0px solid rgba(255, 255, 255, 0.30); 205 border: 0px solid rgba(255, 255, 255, 0.30);
201 border-radius : 6px; 206 border-radius: 6px;
202 vertical-align : top; 207 vertical-align: top;
203 font-size : 1pt; 208 font-size: 1pt;
204} 209}
205 210
206input[type=checkbox]:not(old):checked + label > span { 211input[type=checkbox]:not(old):checked + label > span {
207 transition : font-size 0.4s; 212 transition: font-size 0.4s;
208 font-size : 17pt; 213 font-size: 17pt;
209} 214}
210 215
211input[type=checkbox]:not(old):checked + label > span:before { 216input[type=checkbox]:not(old):checked + label > span:before {
212 content : '✓'; 217 content: '✓';
213 display : inline-block; 218 display: inline-block;
214 width : 28px; 219 width: 28px;
215 color : white; 220 color: white;
216 text-align : left; 221 text-align: left;
217 font-weight : bold; 222 font-weight: bold;
218 margin-left : 144px; 223 margin-left: 144px;
219} 224}
220 225
221label { 226label {
@@ -350,6 +355,24 @@ dd {
350#wrapper.moreinfo-shown .hide-moreinfo { display: inline-block; } 355#wrapper.moreinfo-shown .hide-moreinfo { display: inline-block; }
351#wrapper.moreinfo-shown .show-moreinfo { display: none; } 356#wrapper.moreinfo-shown .show-moreinfo { display: none; }
352 357
358.hidden {
359 overflow: hidden;
360 max-height: 0px;
361 transition: max-height, height;
362 transition-timing-function: ease;
363 transition-duration: 0.5s;
364}
365
366.warnmiss {
367 width: 95%;
368 max-height: 5em;
369 background-color: #E65946;
370 border-radius: 6px;
371 text-align: center;
372 color: white;
373 padding: 0.4em 0.6em 0.4em 0.6em;
374}
375
353/* These are the heights of the expanded sections, only shown if the 376/* These are the heights of the expanded sections, only shown if the
354 wrapper has the appropriate class */ 377 wrapper has the appropriate class */
355 378
@@ -449,7 +472,7 @@ dd {
449} 472}
450 473
451.button-small:hover { 474.button-small:hover {
452 background-color : rgba(255, 255, 255, 0.30); 475 background-color: rgba(255, 255, 255, 0.30);
453 color: white; 476 color: white;
454} 477}
455 478