Knotenalarmseite verbessert

3 files changed, 33 insertions, 10 deletions

diff --git a/index.html b/index.html
index ccbf56c..ef5cdb7 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@ layout: base
   </script>
   <div class="eight columns" id="startpagecontent">
     <div style="float:right">
-      <input onclick="responsiveVoice.speak($('#startpagecontent').text(), 'Deutsch Female', {pitch: .7});" type="button" value="🔊 Play" />
+      <input onclick="responsiveVoice.speak($('#startpagecontent').text(), 'Deutsch Female', {pitch: .7});" type="button" value="🔊 Anhören" />
       <input onclick="toggleSpeech()" type="button" value="||" />
     </div>
     
diff --git a/nodealarm.html b/nodealarm.html
index 6c4ae6a..71d8af0 100644
--- a/nodealarm.html
+++ b/nodealarm.html
@@ -38,17 +38,17 @@ textarea {
       ><h3>Möchtest du automatisiert Status-E-Mails bekommen?</h3>
       <form method="post" action="{{ site.community.url_nodealarm }}">
         <p>
-          Du kannst Dich automatisiert benachrichtigen lassen, sobald dein Knoten längere Zeit offline ist. <!--Die erste E-Mail bekommst du nach 3 Stunden, nach einem Tag gibt es dann nochmal eine Erinnerung. Sollte dein Knoten nach einer Woche immernoch offline sein, bekommst du eine letzte Status-E-Mail.-->
+          Hier kannst du dich automatisiert benachrichtigen lassen, sobald dein Knoten längere Zeit offline sein sollte. <!--Die erste E-Mail bekommst du nach 3 Stunden, nach einem Tag gibt es dann nochmal eine Erinnerung. Sollte dein Knoten nach einer Woche immernoch offline sein, bekommst du eine letzte Status-E-Mail.
+          Den automatisierten Versand von Status-E-Mails kannst du jederzeit wieder deaktivieren.-->
         </p>
-        <p>Du kannst den automatisierten Versand von Status-E-Mails selbstverständlich jederzeit wieder deaktivieren.</p>
-        <p><input type="checkbox" name="confirm" checked> Informiert mich, wenn mein Knoten offline ist</p>
-        <div><label>Dein Name:</label> <input title="text" name="name"></div>
-        <div><label>Deine Email-Adresse:</label> <input title="email" name="from"></div>
-        <div>Name, MAC-Adresse oder ID deiner Knoten:<br>
-          <textarea name="body"></textarea>
-        </div>
+        <p><input type="checkbox" name="confirm" checked> <strong>Ja, bitte informiert mich wenn mein Knoten offline ist!</strong></p>
+        <p><label class="inputleft">Dein Name:</label> <input type="text" class="inputright" name="name"></p>
+        <p><label class="inputleft">Deine Email-Adresse:</label> <input type="email" class="inputright" name="from"></p>
         <p>
-          (Deinen Namen und deine E-Mail-Adresse werden selbstverständlich nicht öffentlich einsehbar sein und werden von uns nicht weitergegeben oder anderweitig verwendet. Versprochen!)
+          Trage hier den Hostnamen oder MAC-Adresse deiner Knoten ein oder die Kontakt&shy;information, die du in der Knotenkonfiguration hinterlegt hast (einen Eintrag pro Zeile)<br>
+          <strong>Deine Knoten:</strong>
+          <textarea name="body"></textarea>
+          (Dein Name und deine E-Mail-Adresse werden selbstverständlich nicht öffentlich einsehbar sein und werden von uns weder weitergegeben noch anderweitig verwendet. Versprochen!)
         </p>
         <div id="nodealarminfobox" class="nodealarm-info alert alert-info">
            <p>
diff --git a/stylesheets/app.css b/stylesheets/app.css
index 4dc1a64..4c2541f 100644
--- a/stylesheets/app.css
+++ b/stylesheets/app.css
@@ -47,6 +47,29 @@ h1 > .postdate {
   text-indent: -1em; 
 }
 
+label.inputleft{
+  float:left;
+  min-width: 160px;
+  font-weight: bold;
+}
+input.inputright{
+  width: 370px;
+  border-radius: 4px;
+}
+textarea, input[type='text'], input[type='email'], input[type='password'], select {
+  transition: all 0.30s ease-in-out;
+  border:1px solid
+  padding: 4px;
+}
+textarea:focus, input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, select:focus {
+  background-color: #fff;
+  border:1px solid
+  padding: 4px;
+  border-color: rgba(82, 168, 236, 0.8);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
+  outline: 0 none;
+}
+
 /* -----------------------------------------
    bootstrap alerts
 ----------------------------------------- */