scratchfoundation/scratch-html5
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial css changes

Browse source
This commit is contained in:
Hardmath123 2013-11-02 16:00:36 -07:00
parent 9a368d679f
commit bcbfd4f718
2 changed files with 128 additions and 26 deletions

43
index.html
View file

@ -7,13 +7,6 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, width=540" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
body {
background: #222;
color: #fff;
margin: 0;
}
</style>
<link href="player.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/util/Timer.js"></script>
@ -38,6 +31,10 @@
<script src="js/Interpreter.js"></script>
<script src="js/Runtime.js"></script>
<script src="js/Scratch.js"></script>
<script src="js/JSZip/jszip.js"></script>
<script src="js/JSZip/jszip-load.js"></script>
<script src="js/JSZip/jszip-inflate.js"></script>
<script src="js/IOzip.js"></script>
<script type="text/javascript">
if (window.location.hash) {
var project_id = parseInt(window.location.hash.substr(1));
@ -47,20 +44,22 @@
</script>
</head>
<body>
<div id="up">&nbsp;</div>
<div id="left">&nbsp;</div>
<div id="overContainer">
<div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
<div id="container"></div>
<div id="wrapper">
<h1>Scratch HTML5 player</h1>
<div id="up">
<div id="info">Loading...</div>
<button id="trigger_stop">&#9632;</button>
<button id="trigger_green_flag">&#9873;</button>
<div class="clearer"></div>
</div>
<div id="left">&nbsp;</div>
<div id="overContainer">
<div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
<div id="container"></div>
</div>
<div id="right">&nbsp;</div>
<div id="down"><input type="text" name="project_id" id="project_id" /><button id='go_project'>Go!</button></div>
<p>The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) <a href="https://github.com/LLK/scratch-html5">on Github</a>.
</div>
<div id="right">&nbsp;</div>
<div id="down">&nbsp;</div>
<div id="info">Loading...</div>
<button id="trigger_green_flag">Green flag</button>
<button id="trigger_stop">Stop</button>
<input type="text" name="project_id" id="project_id" /><button id='go_project'>Go!</button>
</body>
</html>
</html>

111
player.css
View file

@ -1,3 +1,22 @@
body {
background: #fff;
color: #333;
margin: 0;
padding: 30px;
font-family: sans-serif;
}
/* Wrapper wraps the entire player, and the text below and above. Ideally,
all CSS selectors would be descendants of #wrapper so that the player
is embeddable.
*/
#wrapper {
width: 540px;
height: 420px;
margin:auto;
}
/* Container is the Stage */
#container {
border: none;
cursor: default;
@ -18,6 +37,7 @@
user-select: none;
}
/* The pane over a project with the green flag on startup. */
#greenSlide {
position: absolute;
float: left;
@ -25,6 +45,7 @@
margin-left: 30px;
}
/* The green flag icon. */
#greenSlideFg {
background-color: #000;
opacity: 0.4;
@ -35,10 +56,37 @@
}
/* iPad arrow key frame */
#up { width: 540px; height: 30px; clear: both; background-color: #333; }
#left { float: left; width: 30px; height: 360px; background-color: #333; }
#right { float: left; width: 30px; height: 360px; background-color: #333; }
#down { width: 540px; height: 30px; clear: both; background-color: #333; }
/* This is the frame around the stage with various buttons. */
/* up and down are 30 + 480 + 30 pixels wide */
/* left and right are 360 pixels high */
#up {
width: 540px;
height: 30px;
clear: both;
background-color: #eee;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#left {
float: left;
width: 30px;
height: 360px;
background-color: #eee;
}
#right {
float: left;
width: 30px;
height: 360px;
background-color: #eee;
}
#down {
width: 540px;
height: 30px;
clear: both;
background-color: #eee;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* Reporter styles */
.reporter-normal {
@ -137,3 +185,58 @@
background: url(img/think-bottom.png) transparent no-repeat;
}
/* Button styling */
button {
background-color: #ddd;
border-radius: 3px;
border-style: none;
cursor: pointer;
font-family: sans-serif;
width:30px;
padding: 3px;
margin:3px;
height: 24px;
}
button:hover {
background-color: #ccc;
}
#trigger_green_flag, #trigger_stop {
font-size: 20px;
width:24px;
margin:3px;
float:right;
}
#trigger_green_flag {
color:#050;
}
#trigger_stop {
color:#F33;
margin-right: 30px;
}
#clearer {
clear:both;
}
input[type=text] {
border-style: none;
border-radius: 4px;
font-family: sans-serif;
background-color: #ddd;
font-size: 14px;
padding:3px;
height:18px;
margin:3px;
margin-left: 30px;
}
input[type=text]:focus {
outline:none;
background-color: #ccc;
}
#info {
float:left;
margin-left: 30px;
height:24px;
padding:3px;
color:#aaa;
font-size:12px;
}