Exiler0 patch 2

index.html

@@ -13,9 +13,13 @@
     <meta name="description" content="An addicting numbers puzzle game.">
 
     <!-- End Facebook Metadata -->
+    <script src="scripts/theme.js"></script>
     <script src="scripts/production.min.js"></script>
     <link href='http://fonts.googleapis.com/css?family=Poiret+One|Open+Sans' rel='stylesheet' type='text/css'>
-    <link href="styles/style.css" rel="stylesheet" type="text/css" />
+    <!--Two alternative stylesheets-->
+    <link rel="stylesheet" type="text/css" title="blue" href="styles/style-light.css">
+    <link rel="alternate stylesheet" type="text/css" title="black" href="styles/style-dark.css">  
+
     <link href="styles/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-device-width:800px)" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
@@ -69,6 +73,11 @@
 
     <div id="container">
       <p id="title" class="light poiret center">parity</p>
+      <form id="button_form" style="margin-left:20vh;">
+        <input type="submit" onclick="switch_style('black');return false;" name="theme" value="Dark Theme" id="black_btn" class="dropbtn">
+        <input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Light Theme" id="blut_btn" class="dropbtn">
+      </form>
+
       <div id="box">
         <div id="overlay">
           <h1></h1>
@@ -125,4 +134,4 @@ <h1></h1>
     <div class="fb-like" data-href="http://abefehr.com/parity/" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>
     <!-- End Facebook Like Button -->
   </body>
-</html>
+</html>

scripts/theme.js

@@ -0,0 +1,61 @@
+// *** Theme cookie ***
+
+var style_cookie_name = "style" ;
+var style_cookie_duration = 30 ;
+var style_domain = "www.karuwaapps.com/parity" ;
+
+// *** END OF CUSTOMISABLE SECTION ***
+// You do not need to customise anything below this line
+
+function switch_style ( css_title )
+{
+// You may use this script on your site free of charge provided
+// you do not remove this notice or the URL below. Script from
+// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
+  var i, link_tag ;
+  for (i = 0, link_tag = document.getElementsByTagName("link") ;
+    i < link_tag.length ; i++ ) {
+    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
+      link_tag[i].title) {
+      link_tag[i].disabled = true ;
+      if (link_tag[i].title == css_title) {
+        link_tag[i].disabled = false ;
+      }
+    }
+    set_cookie( style_cookie_name, css_title,
+      style_cookie_duration, style_domain );
+  }
+}
+function set_style_from_cookie()
+{
+  var css_title = get_cookie( style_cookie_name );
+  if (css_title.length) {
+    switch_style( css_title );
+  }
+}
+function set_cookie ( cookie_name, cookie_value,
+    lifespan_in_days, valid_domain )
+{
+    // http://www.thesitewizard.com/javascripts/cookies.shtml
+    var domain_string = valid_domain ?
+                       ("; domain=" + valid_domain) : '' ;
+    document.cookie = cookie_name +
+                       "=" + encodeURIComponent( cookie_value ) +
+                       "; max-age=" + 60 * 60 *
+                       24 * lifespan_in_days +
+                       "; path=/" + domain_string ;
+}
+function get_cookie ( cookie_name )
+{
+    // http://www.thesitewizard.com/javascripts/cookies.shtml
+    var cookie_string = document.cookie ;
+    if (cookie_string.length != 0) {
+        var cookie_value = cookie_string.match (
+                        '(^|;)[\s]*' +
+                        cookie_name +
+                        '=([^;]*)' );
+        return decodeURIComponent ( cookie_value[2] ) ;
+    }
+    return '' ;
+}
+

styles/style.css → styles/style-dark.css

@@ -1,4 +1,19 @@
-/* style.css */
+/* style.css*/
+
+.dropbtn {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px;
+    font-size: 13px;
+    border: none;
+    cursor: pointer;
+    border-radius: 3px;
+    }
+
+    .dropbtn:hover {
+    	background-color: #4267b2
+    }
+
 
 /* Begin HTML element styling */
 * {
@@ -55,9 +70,10 @@ a:hover {
 }
 
 #box {
-  background-color:#333;
+  background-color:#292929;
   overflow:hidden;
   height:69vh;
+  margin-top:3vh;
 }
 
 #level {
@@ -267,14 +283,33 @@ a:hover {
   -webkit-box-shadow: inset 0 0 10px #227687;
   box-shadow: inset 0 0 10px #227687;
   display:none;
+}.fb-like {
+  position:absolute !important;
+  bottom:20px;
+  left:20px;
+  display:none;
 }
 
-.fb-like {
+.fb-share-button {
   position:absolute !important;
   bottom:20px;
-  left:20px;
+  left:205px;
 }
 
+.fb-send {
+  position:absolute !important;
+  bottom:20px;
+  left:310px;
+}
+
+.twitter-share-button {
+  position:absolute !important;
+  bottom:20px;
+  left:120px;
+}
+
+
+
 /* Hides the "flyout" comment box when Facebook like button is clicked */
 .fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
   display: none !important;