From 7f96fda082f505ea056d74ce5b4566be54f6167b Mon Sep 17 00:00:00 2001
From: "PolicyChanges1@gmail.com" <PolicyChanges1@gmail.com>
Date: Sun, 28 Feb 2021 13:54:03 -0500
Subject: [PATCH] more ui

---
 css/styles.css | 24 +++++++++---------------
 index.html     | 29 ++++++++++++++---------------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 3911f15..e40b405 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -22,8 +22,7 @@ body{
 	left:42%;
 	top:50%;
 	position: absolute;
-	background: #555;
-	background:rgba(1,1,1,.10);
+	background:rgba(0,0,0,0);
 	width:560px;
 	
 }
@@ -31,7 +30,6 @@ body{
 #scene{
 	height:100%;
 	position: absolute;
-	background: #2f2f2f;
 	left:210px;
 	background:rgba(1,1,1,.10);
 }
@@ -53,21 +51,19 @@ body{
 	height:200px;
 	width:200px;
 	margin:0 auto;
-	background: rgba(30,30,30,.70);
-    border: 1px solid black;
+	background: rgba(0,0,0,.40);
+    border: 1px solid DimGrey;
 }
 
 #leftInfo ul {padding:2%;}
 
 #hold{
-	left:50px;
-	text-align:right;
+	left:55px;
 	position:relative;
 	width:80px;
-	height:435px;
-	background: #2f2f2f;
-	margin:10px auto;
-	background:rgba(0,0,0,.80);
+	height:400px;
+	margin:5px auto;
+	background:rgba(10,10,10,.40);
 }
 
 #gameOver{
@@ -115,12 +111,10 @@ body{
 
 #preview{
 	width:80px;
-	height:468px;
+	height:400px;
 	top:0px;
-	
-	background: #ffffff;
 	margin:10px auto;
-	background:rgba(0,0,0,.80);
+	background:rgba(10,10,10,.40);
 }
 
 
diff --git a/index.html b/index.html
index 710fb6a..111b30b 100644
--- a/index.html
+++ b/index.html
@@ -46,14 +46,13 @@
 
 <!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/tdjyzz?gui=true&t=10&paused=false&muted=false" allowfullscreen></iframe> -->
 <!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3lVfDm?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
-<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WldfWX?gui=&paused=false&muted=false" ></iframe>
+<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WldfWX?gui=&paused=false&muted=false" ></iframe> -->
 <!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3sy3Wy?gui=true&t=10&paused=false&muted=false" ></iframe> -->
-<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/MlSSRt?gui=&paused=false&muted=false" allowfullscreen></iframe> -->
+<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/MlSSRt?gui=&paused=false&muted=false" allowfullscreen></iframe>
 <script>
 document.getElementById("bg").width = window.innerWidth;
 document.getElementById("bg").height = window.innerHeight;
-//document.getElementById("bg").setAttribute("tabIndex", "-1");
-//document.getElementById("divbg").setAttribute("tabIndex", "-1");
+
 document.getElementById("bg").removeAttribute("tabIndex");
 document.getElementById("divbg").removeAttribute("tabIndex");
 </script>
@@ -123,14 +122,14 @@ document.getElementById("divbg").removeAttribute("tabIndex");
 			</ul>
 		</div>
 	
-		<canvas style="border: 1px solid #000;" id="hold"></canvas>
+		<canvas style="border: 1px solid DarkGrey;" id="hold"></canvas>
 		<br>
+		<br>
+		<input style="padding:1px;text-decoration:underline;overflow:visible;font-size:12px;background:rgba(40,40,40,.80);color:dodgerblue;border:1px solid DarkGrey;text-align:left;" type="button" id="Timer" value="Timer Off"/>
+		<input disabled=true style="padding:1px;overflow:visible;width:80px;font-size:12px;background:rgba(40,40,40,.80);color:dodgerblue;border:1px solid DarkGrey;text-align:left;" type="text" id="Time" value=""/>
 		
-		<input style="padding:1px;text-decoration:underline;overflow:visible;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="button" id="Timer" value="Timer Off"/>
-		<input disabled=true style="padding:1px;overflow:visible;width:80px;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="Time" value=""/>
-		
-		<input disabled=true style="overflow:visible;width:40%;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttimetext" value="Best Time:"/>
-		<input disabled=true style="overflow:visible;width:80px;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttime" value=""/>
+		<input disabled=true style="overflow:visible;width:40%;font-size:12px;background:rgba(40,40,40,.80);color:dodgerblue;border:1px solid DarkGrey;text-align:left;" type="text" id="besttimetext" value="Best Time:"/>
+		<input disabled=true style="overflow:visible;width:80px;font-size:12px;background:rgba(40,40,40,.80);color:dodgerblue;border:1px solid DarkGrey;text-align:left;" type="text" id="besttime" value=""/>
 	</div>
 	
 	<div id="gameOver">
@@ -145,16 +144,16 @@ document.getElementById("divbg").removeAttribute("tabIndex");
 			<h2 id="scoreInfo">Score: <br><span id="score" >0</span></h2>
 			<!-- <h1 style="visibility:collapse;" id="linesInfo">Lines: <br><span id="lines" >0</span></h1> -->
 			<div style="visibility:collapse" id="rewardInfo" class="invisible">+<span id="reward">0</span></div>
-			<canvas style="border: 1px solid #000;" id="preview"></canvas>
+			<canvas style="border: 1px solid DarkGrey;" id="preview"></canvas>
 			
 			<br>
-			<select style="width:80px;font-size:13px;background:rgba(0,0,0,.80);color:dodgerblue;border: 1px solid Black;text-align:left;" id="settings" name="setting">
+			<select style="width:80px;font-size:13px;background:rgba(40,40,40,.80);color:dodgerblue;border: 1px solid DarkGrey;text-align:left;" id="settings" name="setting">
 			  <option selected="">Settings:</option>
 				
 			</select>
-			<input style="width:80px;font-size:13px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="setting_value">
-			<input style="width:80px;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;" id="submitsetting" type="submit" value="Set Setting"></input>
-			<input style="width:80px;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;" id="test" type="submit" value="Test Yourself"></input>
+			<input style="width:80px;font-size:13px;background:rgba(40,40,40,.80);color:dodgerblue;border:1px solid DarkGrey;text-align:left;" type="text" id="setting_value">
+			<input style="width:80px;font-size:12px;background:rgba(40,40,40,.80);color:dodgerblue;border:1px solid DarkGrey;" id="submitsetting" type="submit" value="Set Setting"></input>
+			<input style="width:80px;font-size:12px;background:rgba(40,40,40,.80);color:dodgerblue;border:1px solid DarkGrey;" id="test" type="submit" value="Test Yourself"></input>
 
 			
 		</div>