Tabbed info window

css/style.css

@@ -57,6 +57,39 @@ html, body {
     font-size: 12pt;
 }
 
+#tabs {
+    margin: -1px;
+    min-height: 400px;
+    min-width: 500px;
+}
+
+input[type=radio] {
+    display:none;
+}
+
+input.tab-input[type="radio"] + label{
+    cursor: pointer;
+    display: table-cell;
+    padding: 10px;
+    border: 2px solid black;
+    width: 1%;
+    text-align: center;
+}
+
+input.tab-input[type="radio"]:checked + label {
+    border-bottom: 0px;
+}
+
+.tab-content {
+    display: none;
+}
+
+#tab1:checked ~ #tab1-content,
+#tab2:checked ~ #tab2-content,
+#tab3:checked ~ #tab3-content {
+    display: block;
+}
+
 #settingsHelper {
     display:flex;
     justify-content:center;
@@ -74,6 +107,10 @@ html, body {
     border-width: 2px;
     border-style: solid;
     font-family: 'PetMe64Web';
+    
+}
+
+#huesSettings {
     padding: 5px;
 }
 
@@ -93,7 +130,7 @@ html, body {
     display: none;
 }
 
-input[type="radio"]:checked + label {
+#huesSettings input[type="radio"]:checked + label {
     background: rgba(255,255,255, 0.5);
 }
 

index.html

@@ -21,11 +21,11 @@
             window.onload = function() {
                 zip.workerScriptsPath = "js/lib/";
                 var defaults = {
-                    respacks : ["./respacks/Defaults_v5.0.zip", 
+                    respacks : [//"./respacks/Defaults_v5.0.zip", 
-                                "./respacks/CharPackagev0.03.zip", 
+                                //"./respacks/CharPackagev0.03.zip", 
                                 "./respacks/HuesMixA.zip"],
-                    load : true, //debug
+                    load     : false, //debug
-                    autoplay : true // debug
+                    autoplay : false // debug
                 };
                 core = new HuesCore(defaults);
             };
@@ -40,7 +40,23 @@
         </div>
         <div id="settingsHelper">
             <div id="settingsWindow">
-                <div class="content" id="huesSettings"></div>
+                <div id="tabs">
+                    <input class="tab-input" type="radio" name="tabs" id="tab1" >
+                    <label for="tab1">RESPACKS</label>
+                    <input class="tab-input" type="radio" name="tabs" id="tab2" >
+                    <label for="tab2">OPTIONS</label>
+                    <input class="tab-input" type="radio" name="tabs" id="tab3" checked >
+                    <label for="tab3">ABOUT</label>
+                    <div id="tab1-content" class="tab-content">
+                        Bye
+                    </div>
+                    <div id="tab2-content" class="tab-content">
+                        <div id="huesSettings"></div>
+                    </div>
+                    <div id="tab3-content" class="tab-content">
+                        Hi
+                    </div>
+                </div>
             </div>
         </div>
         <div id="huesUI"></div>