jsos
college code for operating system fundamentals in js
git clone https://9o.is/git/jsos.git
commit a9ec172df27857517593c789e0a7c30b0433adeb parent be660063d0b6f2b120f755023d371f5158bfd8b8 Author: Jul <jul@9o.is> Date: Mon, 1 Oct 2012 21:52:56 -0400 Restyled the interface. Diffstat:
| M | index.html | | | 69 | +++++++++++++++++++++++++++++++++------------------------------------ |
| A | styles/1140.css | | | 131 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | styles/ie.css | | | 44 | ++++++++++++++++++++++++++++++++++++++++++++ |
| M | styles/julios.css | | | 13 | ++++++++++++- |
4 files changed, 220 insertions(+), 37 deletions(-)
diff --git a/index.html b/index.html @@ -3,8 +3,12 @@ <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="author" content="Alan G. Labouseur and Julio Cabrera" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + + <link rel="stylesheet" href="styles/1140.css" type="text/css" media="screen" /> <link rel="stylesheet" href="styles/julios.css" type="text/css" media="screen" /> <link rel="stylesheet" href="styles/julios-buttons.css" type="text/css" media="screen" /> + <title> JuliOS 0.1 - a Browser-based virtual Operating System </title> @@ -34,10 +38,9 @@ </head> <body> - -<table id="tableDisplay" style="border:1px solid white;"> - <tr> - <td> +<div class="container"> + <div class="row"> + <div class="threecol" id="buttons"> <button type="button" id = "btnStartOS" class="btnicon28" @@ -54,46 +57,40 @@ class="btnicon28" disabled="disabled" onclick="simBtnReset_click(this)"> - <i class="icon28-reset"></i></button> - </td> - <td class="label"> - Control Log - </td> - </tr> - <tr valign="top"> - <td id="tdDisplay"> + <i class="icon28-reset"></i></button> + </div> + <div class="fivecol"></div> + <div class="fourcol last"> + <textarea id="taProgramInput" + placeholder="Input Program hex here"></textarea> + </div> + </div> + + <div class="row"> + <div class="twelvecol last"> <canvas id="display" tabindex="0" - width="800" + width="1138" height="500"></canvas> - </td> - <td id="tdLog"> - <textarea id = "taLog" - rows="32" - cols="70"></textarea> - </td> - </tr> - <tr> - <td></td> - <td> - <textarea id = "taProgramInput" - rows="5" - cols="70" - placeholder="Input Program hex here"></textarea> - </td> - </tr> -</table> + </div> + </div> -<table width="100%" border="0" cellspacing="0" cellpadding="0"> - <tr valign="top"> - <td align="center" class="footer"> + <div class="row"> + <div class="twelvecol last"> + <textarea id="taLog" + placeholder="No Log Output"></textarea> + </div> + </div> + + <div class="row"> + <div class="twelvecol last footer"> Copyright © 2008 - 2012 No Rights Reserved. - Reproduction is prohibited without the express written consent of Ted Codd, Stevie Ray Vaughan, Ian Fleming, and Julio Cabrera. - </td> - </tr> -</table> + </div> + </div> +</div> </body> </html> diff --git a/styles/1140.css b/styles/1140.css @@ -0,0 +1,130 @@ +/* CSS Resets */ + +html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%} + + +/* ==================================================================================================================== */ +/* ! The 1140px Grid V2 by Andy Taylor \ http://cssgrid.net \ http://www.twitter.com/andytlr \ http://www.andytlr.com */ +/* ==================================================================================================================== */ + +.container { +padding-left: 20px; +padding-right: 20px; +} + +.row { +width: 100%; +max-width: 1140px; +min-width: 755px; +margin: 0 auto; +overflow: hidden; +} + +.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol { +margin-right: 3.8%; +float: left; +min-height: 1px; +} + +.row .onecol { +width: 4.85%; +} + +.row .twocol { +width: 13.45%; +} + +.row .threecol { +width: 22.05%; +} + +.row .fourcol { +width: 30.75%; +} + +.row .fivecol { +width: 39.45%; +} + +.row .sixcol { +width: 48%; +} + +.row .sevencol { +width: 56.75%; +} + +.row .eightcol { +width: 65.4%; +} + +.row .ninecol { +width: 74.05%; +} + +.row .tencol { +width: 82.7%; +} + +.row .elevencol { +width: 91.35%; +} + +.row .twelvecol { +width: 100%; +float: left; +} + +.last { +margin-right: 0px; +} + +img, object, embed { +max-width: 100%; +} + +img { + height: auto; +} + + +/* Smaller screens */ + +@media only screen and (max-width: 1023px) { + + body { + font-size: 0.8em; + line-height: 1.5em; + } + + } + + +/* Mobile */ + +@media handheld, only screen and (max-width: 767px) { + + body { + font-size: 16px; + -webkit-text-size-adjust: none; + } + + .row, body, .container { + width: 100%; + min-width: 0; + margin-left: 0px; + margin-right: 0px; + padding-left: 0px; + padding-right: 0px; + } + + .row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol { + width: auto; + float: none; + margin-left: 0px; + margin-right: 0px; + padding-left: 20px; + padding-right: 20px; + } + +} +\ No newline at end of file diff --git a/styles/ie.css b/styles/ie.css @@ -0,0 +1,43 @@ +.onecol { +width: 4.7%; +} + +.twocol { +width: 13.2%; +} + +.threecol { +width: 22.05%; +} + +.fourcol { +width: 30.6%; +} + +.fivecol { +width: 39%; +} + +.sixcol { +width: 48%; +} + +.sevencol { +width: 56.75%; +} + +.eightcol { +width: 61.6%; +} + +.ninecol { +width: 74.05%; +} + +.tencol { +width: 82%; +} + +.elevencol { +width: 91.35%; +} +\ No newline at end of file diff --git a/styles/julios.css b/styles/julios.css @@ -15,7 +15,18 @@ body { font-size: 10pt; } +#taLog, #taProgramInput { + height: 100px; + width: 99%; +} + +#buttons { + text-align: center; + margin-top: 20px; +} + .footer { - padding-top: 30px; + padding: 30px 0; font-size: 8pt; + text-align: center; }