mirror of
https://github.com/danog/system-bus-radio.git
synced 2024-12-02 14:37:49 +01:00
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
This commit is contained in:
Elliot Gerchak
William Entriken
parent
1874e2a2ab
commit
b47a9eccd3
@ -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
|
||||
|
||||
@ -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 */ }
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
a.button, input.button {
|
||||
cursor: pointer;
|
||||
font-family:Futura,Century Gothic;
|
||||
.content {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
width: 80%;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user