More complete PetMe64 font, added "About"

css/style.css

@@ -15,6 +15,54 @@ html, body {
     background-color:#ffffff;
 }
 
+h1 {
+    font-size: 15pt;
+}
+
+h2 {
+    font-size: 10pt;
+
+}
+
+h3 {
+    font-size: 7pt;
+}
+
+h1, h2, h3 {
+    text-align: center;
+}
+
+#about {
+    border-bottom: 2px solid black;
+}
+
+#reference {
+    display:flex;
+    align-items:center;
+}
+
+.info-ref {
+    float: left;
+    font-size: 8pt;
+    text-align: left;
+    background: rgba(100,100,100,0.3);
+    border-radius: 15px;
+    margin: 10px;
+    padding: 0px 5px;
+}
+
+.info-ref h3 {
+    font-size: 10pt;
+    margin: 10px 0px 0px 10px;
+    text-align: left;
+}
+
+.info-ref ul {
+    list-style-type: none;
+    padding: 0px;
+    margin: 10px;
+}
+
 #waifu {
     display: block;
     height: 100%;
@@ -67,7 +115,7 @@ input[type=radio] {
     display:none;
 }
 
-input.tab-input[type="radio"] + label{
+.tab-label{
     cursor: pointer;
     display: table-cell;
     padding: 10px;
@@ -76,6 +124,10 @@ input.tab-input[type="radio"] + label{
     text-align: center;
 }
 
+label.tab-label:hover {
+    background: rgba(255,255,255,0.3);
+}
+
 input.tab-input[type="radio"]:checked + label {
     border-bottom: 0px;
 }
@@ -107,7 +159,6 @@ input.tab-input[type="radio"]:checked + label {
     border-width: 2px;
     border-style: solid;
     font-family: 'PetMe64Web';
-    
 }
 
 #huesSettings {
@@ -115,11 +166,11 @@ input.tab-input[type="radio"]:checked + label {
 }
 
 .settings-category {
-    font-size: 10pt;
+    font-size: 12pt;
 }
 
 .settings-individual{
-    font-size: 8px;
+    font-size: 8pt;
 }
 
 .settings-buttons{
@@ -130,12 +181,8 @@ input.tab-input[type="radio"]:checked + label {
     display: none;
 }
 
-#huesSettings input[type="radio"]:checked + label {
-    background: rgba(255,255,255, 0.5);
-}
-
 .settings-label {
-    font-size: 8px;
+    font-size: 7pt;
     margin: 10px 2px;
     padding: 3px;
     background: rgba(127,127,127, 0.5);
@@ -145,6 +192,14 @@ input.tab-input[type="radio"]:checked + label {
     cursor: pointer;
 }
 
+label.settings-label:hover {
+    background: rgba(200,200,200,0.5);
+}
+
+#huesSettings input[type="radio"]:checked + label {
+    background: rgba(255,255,255, 0.5);
+}
+
 @keyframes fadeout {
     from {opacity: 1;}
     to {opacity: 0;}

index.html

@@ -21,8 +21,8 @@
             window.onload = function() {
                 zip.workerScriptsPath = "js/lib/";
                 var defaults = {
-                    respacks : [//"./respacks/Defaults_v5.0.zip", 
-                                //"./respacks/CharPackagev0.03.zip", 
+                    respacks : ["./respacks/Defaults_v5.0.zip", 
+                                "./respacks/CharPackagev0.03.zip", 
                                 "./respacks/HuesMixA.zip"],
                     load     : false, //debug
                     autoplay : false // debug
@@ -42,19 +42,64 @@
             <div id="settingsWindow">
                 <div id="tabs">
                     <input class="tab-input" type="radio" name="tabs" id="tab1">
-                    <label for="tab1">RESPACKS</label>
+                    <label class="tab-label" for="tab1">RESOURCES</label>
                     <input class="tab-input" type="radio" name="tabs" id="tab2" >
-                    <label for="tab2">OPTIONS</label>
+                    <label class="tab-label" for="tab2">OPTIONS</label>
                     <input class="tab-input" type="radio" name="tabs" id="tab3" checked>
-                    <label for="tab3">ABOUT</label>
+                    <label class="tab-label" for="tab3">ABOUT</label>
                     <div id="tab1-content" class="tab-content">
-                        Bye
+                        Soon
                     </div>
                     <div id="tab2-content" class="tab-content">
                         <div id="huesSettings"></div>
                     </div>
                     <div id="tab3-content" class="tab-content">
-                        Hi
+                        <div id="about">
+                            <h1>0x40 Hues of JS, v0.1</h1>
+                            <h2>Adapted from the <a href="http://0x40hues.blogspot.com">0x40 Flash</a></h2>
+                            <h2>Web-ified by <a href="https://github.com/mon">mon</a></h2>
+                            <h3>With help from <a href="https://github.com/kepstin/0x40hues-html5">Kepstin</a></h3>
+                        </div>
+                        <div id="reference">
+                            <div class="info-ref">
+                                <h3>Beat glossary</h3>
+                                <ul>
+                                    <li>x Vertical blur (snare)</li>
+                                    <li>o Horizontal blur (bass)</li>
+                                    <li>- No blur</li>
+                                    <li>+ Blackout</li>
+                                    <li>| Short blackout</li>
+                                    <li>: Color only</li>
+                                    <li>* Image only</li>
+                                    <li>X Vertical blur only</li>
+                                    <li>O Horizontal blur only</li>
+                                    <li>~ Fade color</li>
+                                    <li>= Fade and change image</li>
+                                    <li>¤ Whiteout</li>
+                                    
+                                </ul>
+                            </div>
+                            <div class="info-ref">
+                                <h3>Keyboard shortcuts</h3>
+                                <ul>
+                                    <li>↑↓  Change song</li>
+                                    <li>←→  Change image</li>
+                                    <li>[SHIFT] Random song</li>
+                                    <li>-+  Change volume</li>
+                                    <li>[M] Toggle mute</li>
+                                    <li>[F] Toggle automode</li>
+                                    <li>[H] Toggle UI hide</li>
+                                    <li>[C] Character list</li>
+                                    <li>[S] Song list</li>
+                                    <li>[W] Toggle window</li>
+                                    <li>[R] Resource packs</li>
+                                    <li>[E] Editor</li>
+                                    <li>[O] Options</li>
+                                    <li>[I] Information</li>
+                                    <li>[1-4] Change UI</li>
+                                </ul>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>