scratchx/index.html
2015-05-05 13:06:47 -04:00

153 lines
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="en"> <!-- Set this to the main language of your site -->
<head>
<meta charset="utf-8">
<title>ScratchX</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/scratchx.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="libs/swfobject.js"></script>
<script type="text/javascript" src="libs/jquery-1.11.2.min.js"></script>
</head>
<body>
<main>
<header>
<div>
<h1 class="scratchx-logo"><span>ScratchX</span></h1>
<nav class="main-nav">
Related Sites:
<ul>
<li><a href="https://scratch.mit.edu/">Scratch</a></li>
<li><a href="https://scratch.mit.edu/">ScratchEd</a></li>
<li><a href="https://scratch.mit.edu/">ScratchJr</a></li>
</ul>
</nav>
</div>
</header>
<article id="home">
<header>
<div>
<aside class="warning"><strong>Warning:</strong> These extensions are experimental. Please read the FAQ before trying them.</aside>
<h1>About ScratchX</h1>
<p>
ScratchX allows you to try out experimental extensions to the Scratch programming environment. With extensions, you can connect Scratch to the physical world (such as electronic devices and kits) and online resources (including web data and web services).
</p>
<section id="dialogs">
<dialog open class="extension-file">
<section>
<h2>Open an Extension File</h2>
<p>Choose a .sbx file from your local drive</p>
<p><a href="">What is a .sbx file?</a></p>
</section>
<section>
<button>Browse for local file</button>
</section>
</dialog>
<dialog open class="extension-url">
<section>
<h2>Open an Extension URL</h2>
<p>Paste the web address below</p>
<p><a href="">What is a ScratchX URL?</a></p>
</section>
<section>
<div class="input-plus-button">
<input type="text" placeholder="paste url..." />
<button>Open</button>
</div>
</section>
</dialog>
<dialog open class="extension-feature">
<section>
<h2>Featured Extensions</h2>
<p><a href="">Download hardware plugin</a></p>
</section>
<section>
<ul>
<li><a href="">
<h3>Extension 1</h3>
<p>Extension 1 description</p>
</a></li>
<li><a href="">
<h3>Extension 2</h3>
<p>Extension 2 description</p>
</a></li>
<li><a href="">
<h3>Extension 3</h3>
<p>Extension 3 description</p>
</a></li>
</ul>
</section>
</dialog>
</section>
<aside class="info">
<strong>Note:</strong> To use any physical extensions, you need to download the <a href="">Hardware Plugin</a>.
</aside>
<aside class="info">
Official Scratch Extensions (such as LEGO WeDo) are available on the main <a href="https://scratch.mit.edu">Scratch site</a>.
</aside>
</div>
</header>
<section>
<div>
<h2>Developer Documentation</h2>
<p>Developers can create new Experimental Extensions using Javascript. To learn more, read the <a href="">Developer Documentation</a>.</p>
</div>
</section>
</article>
<footer>
<div>
<section>
<p>Extensions on ScratchX are experimental and are not reviewed by the Scratch Team or the MIT Media Lab.</p>
<p><a href="https://scratch.mit.edu/">Scratch</a> is a project of the Lifelong Kindergarten Group at the MIT Media Lab.</p>
<p>
<a class="twitter" title="Follow us on Twitter" href="https://twitter.com/scratch/" target="_blank">@scratch on Twitter</a>
<a class="github" title="Fork us on GitHub" href="https://twitter.com/scratch/" target="_blank">LLK on GitHub</a>
</p>
</section>
<nav>
<h2>ScratchX</h2>
<ul>
<li><a href="">Terms of Service</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Forums</a></li>
</ul>
</nav>
<nav>
<h2>Scratch Family</h2>
<ul>
<li><a href="">Scratch</a></li>
<li><a href="">ScratchEd</a></li>
<li><a href="">ScratchJr</a></li>
<li><a href="">Scratch Conference</a></li>
<li><a href="">Scratch Day</a></li>
<li><a href="">Code-to-Learn Foundation</a></li>
</ul>
</nav>
</div>
</footer>
</main>
<section id="editor">
<div class="scratch_unsupported">
<p>
Oh Noes! Scratch project cannot display.<br/>
Flash player is disabled, missing, or less than version 10.2.
</p>
<a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img
src="//www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player"/></a>
</div>
<div class="scratch_loading"></div>
</section>
<script type="text/javascript" src="scratch_extensions/scratch_ext.js"></script>
<script type="text/javascript" src="js/scratchx.js"></script>
</body>
</html>