scratchfoundation/scratch-html5
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-html5.git synced 2025-02-26 22:23:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Unicode arrow glyphs

Browse source
This commit is contained in:
Hardmath123 2013-11-02 16:32:58 -07:00
parent bcbfd4f718
commit 7866a108af
2 changed files with 49 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
index.html
View file

@ -46,19 +46,23 @@
<body> <body>
<div id="wrapper"> <div id="wrapper">
<h1>Scratch HTML5 player</h1> <h1>Scratch HTML5 player</h1>
<div id="up"> <div id="up">&#x25B2;</div>
<div id="ui-top">
<div id="info">Loading...</div> <div id="info">Loading...</div>
<button id="trigger_stop">&#9632;</button> <button id="trigger_stop">&#9632;</button>
<button id="trigger_green_flag">&#9873;</button> <button id="trigger_green_flag">&#9873;</button>
<div class="clearer"></div> <div class="clearer"></div>
</div> </div>
<div id="left">&nbsp;</div> <div id="left">&#x25c0;</div>
<div id="overContainer"> <div id="overContainer">
<div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div> <div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
<div id="container"></div> <div id="container"></div>
</div> </div>
<div id="right">&nbsp;</div> <div id="right">&#x25b6;</div>
<div id="down"><input type="text" name="project_id" id="project_id" /><button id='go_project'>Go!</button></div> <div id="ui-bottom">
http://scratch.mit.edu/projects/ <input type="text" name="project_id" id="project_id" />
<button id='go_project'>&rarr;</button></div>
<div id="down">&#x25BC;</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>. <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>
</body> </body>

44
player.css
View file

@ -41,14 +41,14 @@ body {
#greenSlide { #greenSlide {
position: absolute; position: absolute;
float: left; float: left;
z-index: 500; z-index: 500; /* Hmm, will this break after the 501st sprite? */
margin-left: 30px; margin-left: 30px;
} }
/* The green flag icon. */ /* The green flag icon. */
#greenSlideFg { #greenSlideFg {
background-color: #000; background-color: #000;
opacity: 0.4; opacity: 0.2;
width: 278px; width: 278px;
height: 218px; height: 218px;
padding-top: 142px; padding-top: 142px;
@ -57,35 +57,60 @@ body {
/* iPad arrow key frame */ /* iPad arrow key frame */
/* This is the frame around the stage with various buttons. */ /* This is the frame around the stage with various buttons. */
/* up and down are 30 + 480 + 30 pixels wide */ #ui-top {
/* left and right are 360 pixels high */ width: 540px;
height: 30px;
clear: both;
background-color: #eee;
}
#up { #up {
padding-top:10px;
width: 540px; width: 540px;
height: 30px; height: 30px;
clear: both; clear: both;
background-color: #eee; background-color: #eee;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
text-align: center;
color:#ccc;
} }
#left { #left {
float: left; float: left;
width: 30px; width: 30px;
height: 360px; height: 360px;
background-color: #eee; background-color: #eee;
line-height: 360px;
color:#ccc;
text-align: center;
} }
#right { #right {
float: left; float: left;
width: 30px; width: 30px;
height: 360px; height: 360px;
background-color: #eee; background-color: #eee;
line-height: 360px;
color:#ccc;
text-align: center;
} }
#down { #down {
padding-top:10px;
width: 540px; width: 540px;
height: 30px; height: 30px;
clear: both;
background-color: #eee; background-color: #eee;
text-align: center;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
color:#ccc;
}
#ui-bottom {
width:480px;
height: 30px;
background-color: #eee;
padding-left: 30px;
padding-right: 30px;
clear: both;
} }
/* Reporter styles */ /* Reporter styles */
@ -190,18 +215,21 @@ body {
button { button {
background-color: #ddd; background-color: #ddd;
border-radius: 3px; border-radius: 3px;
border-style: none;
cursor: pointer; cursor: pointer;
border:none;
font-family: sans-serif; font-family: sans-serif;
width:30px; width:24px;
padding: 3px; padding: 3px;
margin:3px; margin:3px;
height: 24px; height: 24px;
background: -webkit-linear-gradient(#ddd, #ccc);
} }
button:hover { button:hover {
background-color: #ccc; background-color: #ccc;
background: -webkit-linear-gradient(#ccc, #bbb);
} }
#trigger_green_flag, #trigger_stop { #trigger_green_flag, #trigger_stop {
padding-top:0px;
font-size: 20px; font-size: 20px;
width:24px; width:24px;
margin:3px; margin:3px;
@ -213,6 +241,7 @@ button:hover {
#trigger_stop { #trigger_stop {
color:#F33; color:#F33;
margin-right: 30px; margin-right: 30px;
margin-left:0px;
} }
#clearer { #clearer {
clear:both; clear:both;
@ -227,6 +256,7 @@ input[type=text] {
height:18px; height:18px;
margin:3px; margin:3px;
margin-left: 30px; margin-left: 30px;
width:100px;
} }
input[type=text]:focus { input[type=text]:focus {
outline:none; outline:none;