From 493231cd0d65ce93116e57027c1288244f76a200 Mon Sep 17 00:00:00 2001
From: Hendrik Fellerhoff <hf@rrbone.net>
Date: Wed, 21 Mar 2012 03:22:28 +0100
Subject: [PATCH] =?UTF-8?q?Styles=20f=C3=BCr=20Schwarzen=20kreis=20und=20L?=
 =?UTF-8?q?ampel,=20wenn=20man=20bei=20Lampel=20auf=20die=20Kreise=20klick?=
 =?UTF-8?q?t,=20werden=20togglen=20sie=20schwarz<->farbe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/webapp/WEB-INF/jsp/index.jsp    | 18 +++++++++++++++++-
 src/main/webapp/resources/css/styles.css | 19 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index aa9ebda..aa6400d 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -74,7 +74,13 @@
                 $(document).ready(function() {
                     $("#tabs").tabs();
                     $("#v-tabs").tabs().addClass('ui-tabs-vertical');
-
+                    $(".lampel .circle").click(function() {
+                        if($(this).hasClass('black')){
+                            $(this).removeClass('black');
+                        } else {
+                            $(this).addClass('black');
+                        }
+                    });
                 });
             }
         );
@@ -97,6 +103,7 @@
                 <ul>
                     <li><a href="#v-tabs-1">Licht</a></li>
                     <li><a href="#v-tabs-2">Musik</a></li>
+                    <li><a href="#v-tabs-3">Lampel</a></li>
                 </ul>
                 <div id="v-tabs-1">
                     Liiiiiichtsteuerung
@@ -106,6 +113,15 @@
                     Muuuusik
 
                 </div>
+                <div id="v-tabs-3">
+                    <div class="lampel">
+                        <span class="circle red"></span>
+                        <span class="circle yellow"></span>
+                        <span class="circle green"></span>
+
+                    </div>
+
+                </div>
             </div>
             <div class="buzzer">
                 <span class="circle red">Zu</span>
diff --git a/src/main/webapp/resources/css/styles.css b/src/main/webapp/resources/css/styles.css
index eaa0cd4..87816a4 100644
--- a/src/main/webapp/resources/css/styles.css
+++ b/src/main/webapp/resources/css/styles.css
@@ -28,6 +28,14 @@ body {
     background-color: green;
     color: #ffffff;
 }
+.circle.yellow {
+    background-color: #ffed4c;
+    color: #000000;
+}
+.circle.black {
+    background-color: #000000;
+    color: #ffffff;
+}
 
 .buzzer {
     width: 95px;
@@ -42,6 +50,17 @@ body {
     margin-top: -400px;
 }
 
+.lampel {
+    border: 2px solid white;
+    padding: 15px;
+    height: 64px;
+    width: 204px;
+    margin: 0 auto;
+}
+.lampel .circle {
+    display: inline-block;
+    margin: 0px;
+}
 /* Vertical Tabs
 ----------------------------------*/
 .ui-tabs-vertical .ui-tabs-nav {