Improvements to html, css, and js (#30)

* Improved formatting * removed unused and unrelated CSS classes * removed more unused CSS * removed red outline around text box * improved link styling * Added a delay function and fixed time being *1000. There was a bug before, that caused the window to freeze up (seemingly forever). This was due to the fact that the times in milliseconds were being treated as time in seconds. This has been fixed with a *.0001 function. Also, a block of code for the "delay" function has been added. Delays between same notes in the included demo song have also been added. * fixed description meta * created var for window log
fulldecent · Nov 24, 2016 · b47a9ec · b47a9ec
1 parent 1874e2a
commit b47a9ec
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 72 deletions.
diff --git a/In Javascript/airgap.html b/In Javascript/airgap.html
@@ -5,7 +5,7 @@
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<title>System Bus Radio</title>
-	<meta name="description" content="Simulator for MIPS">
+	<meta name="description" content="System Bus Radio JS Port: Play AM radio waves from a computer without an AM radio using only your web browser.">
 	<link rel="stylesheet" href="main.css">
 	<script src="./airgap.js"></script>
 </head>
@@ -24,23 +24,31 @@
 400 2093
 400 2349
 400 2673
+400 0
 400 2673
+400 0
 790 2673
 400 2349
 400 2349
+400 0
 790 2349
 400 2673
 400 3136
+400 0
 790 3136
 400 2673
 400 2349
 400 2093
 400 2349
 400 2673
+400 0
 400 2673
+400 0
 400 2673
+400 0
 400 2673
 400 2349
+400 0
 400 2349
 400 2673
 400 2349

diff --git a/In Javascript/airgap.js b/In Javascript/airgap.js
@@ -8,9 +8,10 @@ function now() {
 
 var NSEC_PER_SEC = 1000000000;
 var register = 3.1415;
+var logs = document.getElementById('logs');
 
 function square_am_signal(time, freq) {
-	document.getElementById('logs').value += "Playing / " + time + " seconds / " + freq + "Hz\n";
+	window.logs.value += "\nPlaying / " + time + " seconds / " + freq + "Hz";
 	var period = NSEC_PER_SEC / freq;
 	var start = now();
 	var end = now() + time * NSEC_PER_SEC;
@@ -33,13 +34,19 @@ function start() {
 	var line, time, freq;
 	for (var i = 0; i < length; i++) {
 		line = song[i].split(" ");
-		if (line[1] == "0") {
-			// delay
+		if (+line[1] == 0) {
+			pause(line[0]);
 		}
 		else {
 			freq = +line[1];
-			time = +line[0];
+			time = (+line[0])*.001;
 			square_am_signal(time, freq);
 		}
 	}
 }
+
+function pause(time) {
+	window.logs.value += "\nPaused / " + time*.001 + " seconds";
+	var dt = new Date();
+	while ((new Date()) - dt <= time) { /* Do nothing */ }
+}
diff --git a/In Javascript/main.css b/In Javascript/main.css
@@ -1,50 +1,35 @@
 body {
     background-color: #3498db;
-    font-family: Futura,Helvetica, "Century Gothic";
+    font-family: Futura, Helvetica, "Century Gothic";
     text-shadow: 1px 1px 0px black;
-    margin:0px;
-    padding:0px;
+    margin: 0px;
+    padding: 0px;
 }
 
-.todo {
-    font-size:12px;
-}
 .header {
     color: white;
     font-size: 50px;
-    padding-top:20px;
+    padding-top: 20px;
     text-align: center;
 }
+
 .content {
     text-align: center;
-    margin:auto;
-    width:80%;
-    font-size:12px;
-    color:white;
-}
-#instructionBlock,.data {
-    font-size:12px !important;
-}
-.data td { 
-    border:1px solid black;
-    border-bottom:0px;
-    border-right:0px;
-}
-.data td:last-child {
-    border-right:1px solid black;
-}
-.data tr:last-child td{
-    border-bottom:1px solid black;
+    margin: auto;
+    width: 80%;
+    font-size: 12px;
+    color: white;
 }
 
-a.button, input.button {
-	cursor: pointer;
-    font-family:Futura,Century Gothic;
+a.button,
+input.button {
+    cursor: pointer;
+    font-family: Futura, Century Gothic;
     background: #44c650;
     border: 0px;
     padding: 5px 80px;
-    font-weight:bold;
-    text-transform:uppercase;
+    font-weight: bold;
+    text-transform: uppercase;
     color: white;
     font-size: 15px;
     text-shadow: 1px 1px 0px #222;
@@ -54,58 +39,65 @@ a.button, input.button {
     -o-transition: background-color 0.15s ease-in-out;
     transition: background-color 0.15s ease-in-out;
 }
+
 a.button {
-	display: inline-block;
-	text-decoration: none;
-	padding: 6px 12px 6px 12px;
+    display: inline-block;
+    text-decoration: none;
+    padding: 6px 12px 6px 12px;
 }
+
 input.button {
-//font-size:15px!important;
-padding: 5px 20px;
+    padding: 5px 20px;
 }
-a.button:active, input.button:active {
-    position:relative;
-    top:1px;		
+
+a.button:active,
+input.button:active {
+    position: relative;
+    top: 1px;
 }
-a.button:hover, input.button:hover {
-	background: #00b200;
-    color:white;
+
+a.button:hover,
+input.button:hover {
+    background: #00b200;
+    color: white;
     text-shadow: 1px 1px 0px #222;
-    position:relative;
-    cursor:pointer;
-    cursor:hand;
+    position: relative;
+    cursor: pointer;
+    cursor: hand;
 }
-input[type="text"],input[type="password"],textarea, select  {
-	margin-left:0px;
-    background-color: #F7f7f7; 
+
+input[type="text"],
+textarea {
+    margin-left: 0px;
+    background-color: #F7f7f7;
     border: 1px solid black;
     padding: 5px;
-	color:#444;
-	-webkit-transition: border-color 0.2s ease-in-out;
+    color: #444;
+    -webkit-transition: border-color 0.2s ease-in-out;
     -moz-transition: border-color 0.2s ease-in-out;
     -o-transition: border-color 0.2s ease-in-out;
-    transition: border-color 0.2s ease-in-out;	
+    transition: border-color 0.2s ease-in-out;
 }
-input[type="text"]:hover  ,input[type="password"]:hover,textarea:hover,select:hover {
-   // border :1px solid pink;
+
+input[type="text"]:hover,
+textarea:hover {
     box-shadow: 0px 0px 9px black;
 }
-input[type="text"]:focus ,input[type="password"]:focus,textarea:focus,select:focus {
-    border :1px solid #CB4242;
-    box-shadow: 0px 0px 9px #cb4242;
-}
-input, textarea, keygen, select, button, isindex {
-    outline:none;
+
+input,
+textarea,
+button {
+    outline: none;
     resize: none;
 }
-a
-{
+
+a {
     color: white;
-    font-weight:bold;
-    background-color: rgba(220, 220, 220, 0.35);
-    text-decoration:none;
+    font-weight: bold;
+    background-color: rgba(242, 242, 242, 0.2);
+    text-decoration: none;
+}
+
+a:hover {
+    background-color: rgba(255, 255, 255, 0.38);
 }
-a:hover
-{
-    background-color: rgba(240, 240, 240, 0.52);
-}