lots of random things inculding a new color theme

Author: ellieeet123

css/main.css

@@ -319,7 +319,7 @@ body {
   display: inline;
 }
 
-#gameoptions {
+#gameoptions, .themeSelectors {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

games/index.html

@@ -28,7 +28,7 @@ <h3 id="title">Loading...</h3><br>
             <a id="advanced" class="squaresNew noColorChange">Show advanced options</a>
           </div>
           <div id="html5gameoptions">
-            <a id="fullscreen" class="squaresNew noColorChange">Open game in new tab</a>
+            <a id="fullscreen" class="squaresNew">Open game in new tab</a>
           </div>
         </div>
         <br><br><br><br>

images/bg/neon.jpg

@@ -268,6 +268,15 @@ var colorThemes = {
     'link': '#808080',
     'sidebarlink': '#808080',
     'button': '#404040'
+  },
+  'Neon': {
+    'backgroundtype': 'image',
+    'background': '/images/bg/neon.jpg',
+    'textbg': '#000000',
+    'text': '#ffffff',
+    'link': '#fffa00',
+    'sidebarlink': '#00ccf5',
+    'button': '#dc00f0'
   }
 };
 
@@ -385,11 +394,6 @@ function makeSettingsPage() {
     changeStyleForElement(currentButton,'color','#ffffff');
     buttonHover(currentButton,themeData.button);
     document.getElementById('button_div').appendChild(currentButton);
-    for (var j = 0;j < 3;j++) {
-      document.getElementById('button_div').appendChild(
-        document.createElement('br')
-      );
-    }
     currentButton = null;
   }
   var save        = document.getElementById('savecolortheme');
@@ -421,15 +425,19 @@ function makeSettingsPage() {
   document.getElementById('customtheme_bgtype').click();
   document.getElementById('savecolortheme').onclick = function() {
     var output = {};
-    '[IMAGE]' == document.getElementById('bgtype_display').innerHTML
-      ? output.backgroundtype = 'image'
-      : output.backgroundtype == 'color';
+    if (document.getElementById('bgtype_display').innerHTML === '[IMAGE]') {
+      output.backgroundtype = 'image'
+    }
+    else {
+      output.backgroundtype = 'color';
+    }
     output.background = document.getElementById('bgsrc_input').firstChild.value;
     output.textbg = document.getElementById('textbg_input').value;
     output.text = document.getElementById('text_input').value;
     output.link = document.getElementById('link_input').value;
     output.sidebarlink = document.getElementById('sidebarlink_input').value;
     output.button = document.getElementById('button_input').value;
+    console.log(JSON.stringify(output));
     setCookie('customColorTheme', JSON.stringify(output), 1000);
     setCookie('colorTheme', 'Custom', 1000);
     colorTheme();
@@ -464,7 +472,7 @@ function showMessage (content, closeMessage) {
   close.id = 'close';
   close.className = 'noColorChange';
   gray.style = `
-    background: rgba(60,60,60,0.6);
+    background: rgba(0,0,0,0.7);
     position: fixed;
     top: 0px;
     left: 0px;

javascript/main.js

@@ -15,18 +15,17 @@ <h3 id="title">Settings</h3><br>
         <p>To change your color theme, simply click the theme you want and it will change.</p>
         <div id="button_div">
         </div>
-        <br><p> </p><br><p id="lowertext">Make a custom theme: (WORK IN PROGRESS)</p><br>
+        <br><p> </p><br><p> </p><br><p> </p><br><p> </p><br><br>
+        <h3 id="lowertext">Make a custom theme!</h3><br>
         <div><p class="customColorLabel" id="customtheme_bgtype">Background Type: <span id="bgtype_display">[IMAGE]</span> (click to change)</p></div>
         <div><p class="customColorLabel" id="customtheme_bgsrc"><span id="bgsrc_label"></span><span id="bgsrc_input"></span></p></div>
         <div><p class="customColorLabel" id="customtheme_textbg">Text Background Color: <input id="textbg_input" type="color"></p></div>
         <div><p class="customColorLabel" id="customtheme_text">Text Color: <input id="text_input" type="color"></p></div>
         <div><p class="customColorLabel" id="customtheme_link">Link Color: <input id="link_input" type="color"></p></div>
         <div><p class="customColorLabel" id="customtheme_sidebarlink">Sidebar Link Color: <input id="sidebarlink_input" type="color"></p></div>
         <div><p class="customColorLabel" id="customtheme_button">Button Color: <input id="button_input" type="color"></p></div>
-        <a id="savecolortheme" class="noColorChange">Save!</a>
-        <br>
-        <br>
-        <br>
+        <a id="savecolortheme" class="squaresNew noColorChange">Save!</a>
+        <br><br><br><br><br><br>
       </div>
     </div>
     <script id="scriptBody" src="/javascript/bodyScript.js"></script>