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 @@
Liiiiiichtsteuerung @@ -106,6 +113,15 @@ Muuuusik
+
+
+ + + + +
+ +
Zu 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 {