mirror of
https://github.com/google/blockly.git
synced 2026-01-14 20:37:10 +01:00
6a1f30bd12
* Move the finished version of the codelab This moves the finished version of the codelab to app-completed so it's at the same level as the starting app code. * Fix paths to be relative The paths for blockly files and media were absolute, which would break if you ran it from any directory that wasn't identical.
74 lines
2.4 KiB
HTML
74 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Blockly for the Web Codelab</title>
|
|
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
|
|
<link rel="stylesheet" href="styles/index.css">
|
|
</head>
|
|
|
|
<body mode="maker">
|
|
<header class="mdl-color--cyan-500">
|
|
<h1 class="mode-maker">Music Maker</h1>
|
|
<h1 class="mode-edit mode-blockly">Music Maker Configuration</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<button class="mode-maker mdl-button" id="edit">Edit</button>
|
|
<button class="mode-edit mdl-button mdl-js-button" id="done">Done</button>
|
|
<button class="mode-blockly mdl-button mdl-js-button" id="save">Save</button>
|
|
<p class="hint mode-edit">Tap any button to edit its code. <br/>When complete, press Done.</p>
|
|
|
|
<div class="maker">
|
|
<div>
|
|
<div class="button mdl-color--amber-500">1</div>
|
|
<div class="button mdl-color--yellow-500">2</div>
|
|
<div class="button mdl-color--lime-500">3</div>
|
|
</div>
|
|
<div>
|
|
<div class="button mdl-color--pink-500">4</div>
|
|
<div class="button mdl-color--red-500">5</div>
|
|
<div class="button mdl-color--light-green-500">6</div>
|
|
</div>
|
|
<div>
|
|
<div class="button mdl-color--cyan-500">7</div>
|
|
<div class="button mdl-color--teal-500">8</div>
|
|
<div class="button mdl-color--green-500">9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="blockly-editor">
|
|
<div id="blockly-div" style="height: 480px; width: 400px;"></div>
|
|
<xml id="toolbox" style="display: none">
|
|
<category name="Loops" colour="120">
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES">
|
|
<shadow type="math_number">
|
|
<field name="NUM">5</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<category name="Sounds" colour="355">
|
|
<block type="play_sound"></block>
|
|
</category>
|
|
</xml>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="../../../blockly_compressed.js"></script>
|
|
<script src="../../../blocks_compressed.js"></script>
|
|
<script src="../../../javascript_compressed.js"></script>
|
|
<script src="../../../msg/js/en.js"></script>
|
|
|
|
<script src="scripts/music_maker.js"></script>
|
|
<script src="scripts/sound_blocks.js"></script>
|
|
<script src="scripts/main.js"></script>
|
|
|
|
</body>
|
|
</html>
|