diff options
-rw-r--r-- | index.html | 30 | ||||
-rw-r--r-- | style.css | 58 |
2 files changed, 69 insertions, 19 deletions
@@ -12,7 +12,7 @@ | |||
12 | <div id="wrapper" class="step1"> | 12 | <div id="wrapper" class="step1"> |
13 | <div class="collapsable block-step1"> | 13 | <div class="collapsable block-step1"> |
14 | <div onclick="step0_done()" class="block-header"> | 14 | <div onclick="step0_done()" class="block-header"> |
15 | <h1 id="head1"><div class="circle_num">☂</div> Abmahnbeantworter</h1> | 15 | <h1 id="head1"><div class="circle_num">☂</div> Abmahnbeantworter</h1> |
16 | </div> | 16 | </div> |
17 | <div class="juice"> | 17 | <div class="juice"> |
18 | <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p> | 18 | <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p> |
@@ -56,12 +56,12 @@ | |||
56 | 56 | ||
57 | <p>Andernfalls tragen Sie bitte die Anschrift der Kanzlei ein, von der Sie die Abmahnung erhielten.</p> | 57 | <p>Andernfalls tragen Sie bitte die Anschrift der Kanzlei ein, von der Sie die Abmahnung erhielten.</p> |
58 | <ul> | 58 | <ul> |
59 | <li><input id="abmahnender_kanzlei" type="text" name="kanzlei" placeholder="Kanzlei"/></li> | 59 | <li><input id="abmahnender_kanzlei" type="text" name="kanzlei" placeholder="kanzlei"/></li> |
60 | <li><input id="abmahnender_bearbeiter" type="text" name="bearbeiter" placeholder="Bearbeiter (optional)"/></li> | 60 | <li><input id="abmahnender_bearbeiter" type="text" name="bearbeiter" placeholder="bearbeiter (optional)"/></li> |
61 | <li><input id="abmahnender_strasse" type="text" name="strasse" placeholder="Straße und Hausnummer"/></li> | 61 | <li><input id="abmahnender_strasse" type="text" name="strasse" placeholder="strasse und Hausnummer"/></li> |
62 | <li><input id="abmahnender_plz" type="text" name="plz" placeholder="Postleitzahl"/></li> | 62 | <li><input id="abmahnender_plz" type="text" name="plz" placeholder="postleitzahl"/></li> |
63 | <li><input id="abmahnender_ort" type="text" name="ort" placeholder="Ort"/></li> | 63 | <li><input id="abmahnender_ort" type="text" name="ort" placeholder="ort"/></li> |
64 | <li><input id="abmahnender_fax" type="text" name="fax" placeholder="Fax"/></li> | 64 | <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li> |
65 | </ul> | 65 | </ul> |
66 | <div class="one-button"> | 66 | <div class="one-button"> |
67 | <div class="button button-green" onclick="step2_done()">Weiter</div> | 67 | <div class="button button-green" onclick="step2_done()">Weiter</div> |
@@ -76,7 +76,7 @@ | |||
76 | <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p> | 76 | <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p> |
77 | <ul> | 77 | <ul> |
78 | <li><input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(Akten)-Zeichen"/></li> | 78 | <li><input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(Akten)-Zeichen"/></li> |
79 | <li><input id="vorgang_detail" type="text" name="detail" placeholder="Beschreibung (optional)"/></li> | 79 | <li><input id="vorgang_detail" type="text" name="detail" placeholder="beschreibung (optional)"/></li> |
80 | </ul> | 80 | </ul> |
81 | 81 | ||
82 | <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> | 82 | <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> |
@@ -199,13 +199,13 @@ | |||
199 | <div class="juice"> | 199 | <div class="juice"> |
200 | <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> | 200 | <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> |
201 | <ul> | 201 | <ul> |
202 | <li><input id="abgemahnter_vorname" type="text" name="vorname" placeholder="Vorname"/></li> | 202 | <li><input id="abgemahnter_vorname" type="text" name="vorname" placeholder="vorname"/></li> |
203 | <li><input id="abgemahnter_nachname" type="text" name="nachname" placeholder="Nachname"/></li> | 203 | <li><input id="abgemahnter_nachname" type="text" name="nachname" placeholder="nachname"/></li> |
204 | <li><input id="abgemahnter_zusatz" type="text" name="zusatz" placeholder="Zusatz (optional)"/></li> | 204 | <li><input id="abgemahnter_zusatz" type="text" name="zusatz" placeholder="zusatz (optional)"/></li> |
205 | <li><input id="abgemahnter_strasse" type="text" name="strasse" placeholder="Straße und Hausnummer"/></li> | 205 | <li><input id="abgemahnter_strasse" type="text" name="strasse" placeholder="strasse und Hausnummer"/></li> |
206 | <li><input id="abgemahnter_plz" type="text" name="plz" placeholder="Postleitzahl"/></li> | 206 | <li><input id="abgemahnter_plz" type="text" name="plz" placeholder="postleitzahl"/></li> |
207 | <li><input id="abgemahnter_ort" type="text" name="ort" placeholder="Wohnort"/></li> | 207 | <li><input id="abgemahnter_ort" type="text" name="ort" placeholder="wohnort"/></li> |
208 | <li><input id="abgemahnter_land" type="text" name="land" placeholder="Land (optional)"/></li> | 208 | <li><input id="abgemahnter_land" type="text" name="land" placeholder="land (optional)"/></li> |
209 | </ul> | 209 | </ul> |
210 | <div class="hint"> | 210 | <div class="hint"> |
211 | <p>Datenschutzhinweis: Wir übertragen Ihre Daten nicht ins Internet. Das Antwortschreiben wird auf Ihrem Computer erstellt.</p> | 211 | <p>Datenschutzhinweis: Wir übertragen Ihre Daten nicht ins Internet. Das Antwortschreiben wird auf Ihrem Computer erstellt.</p> |
@@ -116,7 +116,7 @@ h2 { | |||
116 | } | 116 | } |
117 | 117 | ||
118 | .block-step1 .circle_num { | 118 | .block-step1 .circle_num { |
119 | background-color: #403040; | 119 | background-color: black; |
120 | color: #F1F2E3; | 120 | color: #F1F2E3; |
121 | margin: 4px 28px 0 0; | 121 | margin: 4px 28px 0 0; |
122 | line-height: 1.3em; | 122 | line-height: 1.3em; |
@@ -326,15 +326,65 @@ p a:visited { | |||
326 | 326 | ||
327 | input[type="text"] { | 327 | input[type="text"] { |
328 | width: 95%; | 328 | width: 95%; |
329 | border: solid 1px silver; | 329 | background-color : rgba(255, 255, 255, 0.30); |
330 | border-radius: 4px; | 330 | border: 0px solid rgba(255, 255, 255, 0.30); |
331 | border-radius: 6px; | ||
331 | font-family: 'SourceSansPro', sans-serif; | 332 | font-family: 'SourceSansPro', sans-serif; |
332 | font-size: 13pt; | 333 | font-size: 13pt; |
333 | font-weight: normal; | 334 | font-weight: normal; |
335 | color: white; | ||
334 | padding: 0.4em 0.6em 0.4em 0.6em; | 336 | padding: 0.4em 0.6em 0.4em 0.6em; |
335 | margin-bottom: 0.7em; | 337 | margin-bottom: 0.7em; |
336 | } | 338 | } |
337 | 339 | ||
340 | input:focus { | ||
341 | outline: none !important; | ||
342 | } | ||
343 | |||
344 | input:focus::placeholder { | ||
345 | opacity: 0; | ||
346 | } | ||
347 | |||
348 | ::placeholder { | ||
349 | color: white; | ||
350 | opacity: 0.5; | ||
351 | font-variant: small-caps; | ||
352 | font-weight: normal; | ||
353 | letter-spacing: 0.15em; | ||
354 | } | ||
355 | |||
356 | |||
357 | :focus::-moz-placeholder { | ||
358 | opacity: 0 | ||
359 | } | ||
360 | |||
361 | ::-moz-placeholder { | ||
362 | color: white; | ||
363 | opacity: 0.5; | ||
364 | font-variant: small-caps; | ||
365 | font-weight: normal; | ||
366 | letter-spacing: 0.15em; | ||
367 | } | ||
368 | |||
369 | ::-ms-placeholder { | ||
370 | color: white; | ||
371 | opacity: 0.5; | ||
372 | font-variant: small-caps; | ||
373 | font-weight: normal; | ||
374 | letter-spacing: 0.15em; | ||
375 | } | ||
376 | |||
377 | :focus::-webkit-input-placeholder { | ||
378 | opacity: 0; | ||
379 | } | ||
380 | ::-webkit-input-placeholder { | ||
381 | color: white; | ||
382 | opacity: 0.5; | ||
383 | font-variant: small-caps; | ||
384 | font-weight: normal; | ||
385 | letter-spacing: 0.15em; | ||
386 | } | ||
387 | |||
338 | select.tag { | 388 | select.tag { |
339 | width: 15%; | 389 | width: 15%; |
340 | margin-right: 3%; | 390 | margin-right: 3%; |
@@ -384,7 +434,7 @@ input[type=checkbox]:not(old) + label > span { | |||
384 | background-color : rgba(255, 255, 255, 0.30); | 434 | background-color : rgba(255, 255, 255, 0.30); |
385 | margin : 2px 36px 8px 2px; | 435 | margin : 2px 36px 8px 2px; |
386 | border : 0px solid rgba(255, 255, 255, 0.30); | 436 | border : 0px solid rgba(255, 255, 255, 0.30); |
387 | border-radius : 25%; | 437 | border-radius : 6px; |
388 | vertical-align : top; | 438 | vertical-align : top; |
389 | transition : font-size 0.4s; | 439 | transition : font-size 0.4s; |
390 | font-size : 1pt; | 440 | font-size : 1pt; |