Skip to content

Commit 4a00b5b

Browse files
author
Ke, Mingze
committed
Load index.html templates
1 parent 819632c commit 4a00b5b

9 files changed

Lines changed: 178 additions & 103 deletions

‎templates/demo-area-01.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template id="head">
2+
<meta charset="utf-8">
3+
<title>Webduino Blockly Demo 01</title>
4+
<!-- webduino -->
5+
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
6+
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
7+
</template>
8+
<template id="css">
9+
#demo-area-01-show { font-size: 60px }
10+
</template>
11+
<template id="body">
12+
<span id="demo-area-01-show">123</span>
13+
</template>

‎templates/demo-area-02.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template id="head">
2+
<meta charset="utf-8">
3+
<title>Webduino Blockly Demo 02</title>
4+
<!-- webduino -->
5+
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
6+
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
7+
</template>
8+
<template id="css">
9+
#demo-area-02-light img {
10+
height: 200px;
11+
display: none;
12+
}
13+
14+
#demo-area-02-light.on #demo-area-02-on {
15+
display: inline-block;
16+
}
17+
18+
#demo-area-02-light.off #demo-area-02-off {
19+
display: inline-block;
20+
}
21+
</template>
22+
<template id="body">
23+
<div id="demo-area-02-light" class="off">
24+
<img src="http://blockly.webduino.io/media/off.png" id="demo-area-02-off">
25+
<img src="http://blockly.webduino.io/media/on.png" id="demo-area-02-on">
26+
</div>
27+
</template>

‎templates/demo-area-03.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template id="head">
2+
<meta charset="utf-8">
3+
<title>Webduino Blockly Demo 03</title>
4+
<!-- webduino -->
5+
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
6+
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
7+
</template>
8+
<template id="css">
9+
#demo-area-03-container {
10+
position: relative;
11+
width: 150px;
12+
height: 150px;
13+
}
14+
15+
#demo-area-03-image {
16+
position: absolute;
17+
top: 0;
18+
left: 0;
19+
width: 150px;
20+
height: 150px;
21+
transition: .3s;
22+
-webkit-transition: .3s;
23+
-moz-transition: .3s;
24+
transform-origin: 75px 75px;
25+
-webkit-transform-origin: 75px 75px;
26+
-moz-transform-origin: 75px 75px;
27+
}
28+
</template>
29+
<template id="body">
30+
<div id="demo-area-03-container">
31+
<img src="http://blockly.webduino.io/media/webduino-logo.jpg" id="demo-area-03-image">
32+
</div>
33+
</template>

‎templates/demo-area-04.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template id="head">
2+
<meta charset="utf-8">
3+
<title>Webduino Blockly Demo 04</title>
4+
<!-- webduino -->
5+
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
6+
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
7+
</template>
8+
<template id="css">
9+
#demo-area-04-area {
10+
width: 90%;
11+
height: 150px;
12+
background: #ccc;
13+
}
14+
</template>
15+
<template id="body">
16+
選擇顏色：<input id="demo-area-04-color" type="color">
17+
<div id="demo-area-04-area"></div>
18+
</template>

‎templates/demo-area-05.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template id="head">
2+
<meta charset="utf-8">
3+
<title>Webduino Blockly Demo 05</title>
4+
<!-- webduino -->
5+
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
6+
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
7+
</template>
8+
<template id="css">
9+
.db5 {
10+
font-size: 24px;
11+
outline: none;
12+
margin: 0 10px 10px 0;
13+
}
14+
15+
button:hover {
16+
box-shadow: 2px 2px 5px #888;
17+
}
18+
</template>
19+
<template id="body">
20+
<button id="demo-area-05-btn1" class="db5">按鈕 1</button>
21+
<button id="demo-area-05-btn2" class="db5">按鈕 2</button>
22+
<button id="demo-area-05-btn3" class="db5">按鈕 3</button>
23+
<button id="demo-area-05-btn4" class="db5">按鈕 4</button>
24+
<button id="demo-area-05-btn5" class="db5">按鈕 5</button>
25+
</template>

‎templates/demo-area-06.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template id="head">
2+
<meta charset="utf-8">
3+
<title>Webduino Blockly Demo 06</title>
4+
<!-- webduino -->
5+
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
6+
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
7+
</template>
8+
<template id="body">
9+
數值：<span id="demo-area-06-input-value">90</span><br>
10+
拉霸：<input type="range" min="0" max="180" step="5" value="90" id="demo-area-06-input">
11+
</template>

‎templates/demo-area-07.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template id="head">
2+
<meta charset="utf-8">
3+
<title>Webduino Blockly Demo 07</title>
4+
<!-- webduino -->
5+
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
6+
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
7+
<script src="https://www.youtube.com/iframe_api"></script>
8+
</template>
9+
<template id="body">
10+
<div id="player"></div>
11+
</template>

‎templates/demo-area-08.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template id="head">
2+
<meta charset="utf-8">
3+
<title>Webduino Blockly Demo 08</title>
4+
<!-- webduino -->
5+
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
6+
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
7+
<script src="http://blockly.webduino.io/lib/tracking-min.js"></script>
8+
<script src="http://blockly.webduino.io/lib/face-min.js"></script>
9+
</template>
10+
<template id="css">
11+
#demo-area-08-content {
12+
position: relative;
13+
width: 100%;
14+
max-width: 300px;
15+
height: 200px;
16+
}
17+
18+
#demo-area-08-video {
19+
top: 0;
20+
left: 0;
21+
position: absolute;
22+
width: 100%;
23+
height: 100%;
24+
}
25+
26+
#demo-area-08-canvas {
27+
top: 0;
28+
left: 0;
29+
position: absolute;
30+
width: 100%;
31+
height: 100%;
32+
}
33+
</template>
34+
<template id="body">
35+
<div id="demo-area-08-content">
36+
<video id="demo-area-08-video" preload autoplay loop muted controls></video>
37+
<canvas id="demo-area-08-canvas"></canvas>
38+
</div>
39+
</template>

‎views/index.handlebars‎

Lines changed: 1 addition & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<td id="copyCode" style="display:none;" data-clipboard-target="#content_javascript" data-tooltip="Copy to clipboard"><div><img src="media/copy.png"></div></td>
1717
<td class="tabmin">&nbsp;</td>
1818
<td class="tabmax">
19-
<a href="http://bin.webduino.io/yupu/edit?html,js,output" id="indexLinkToBin" target="_blank" title="{{openJsbin}}"><img src="media/dave.min.svg">{{linkToBin}}</a>
19+
<a href="launcher.html" target="_blank" id="linkToBin" title="{{openJsbin}}"><img src="media/dave.min.svg">{{linkToBin}}</a>
2020
<div id="check-device-online">
2121
<input id="input-device" class="">
2222
<span id="check-btn" class="check-btn" title="{{checkDeviceOnline}}">
@@ -67,147 +67,45 @@
6767
<div id="demo-area-01" class="da show">
6868
<br/>
6969
<span id="demo-area-01-show">123</span>
70-
<br/><br/>
71-
<h5>HTML:</h5>
72-
<pre class="demo-pre">
73-
&lt;span id=&quot;demo-area-01-show&quot;&gt;要顯示的文字&lt;/span&gt;</pre>
7470
</div>
7571
<div id="demo-area-02" class="da">
7672
<div id="demo-area-02-light" class="off">
7773
<img src="../media/off.png" id="demo-area-02-off">
7874
<img src="../media/on.png" id="demo-area-02-on">
7975
</div>
80-
<br/>
81-
<h5>HTML:</h5>
82-
<pre class="demo-pre">
83-
&lt;div id=&quot;demo-area-02-light&quot; class=&quot;off&quot;&gt;
84-
&lt;img src=&quot;http://blockly.webduino.io/media/off.png&quot; id=&quot;demo-area-02-off&quot;&gt;
85-
&lt;img src=&quot;http://blockly.webduino.io/media/on.png&quot; id=&quot;demo-area-02-on&quot;&gt;
86-
&lt;/div&gt;</pre>
87-
<h5>CSS:</h5>
88-
<pre class="demo-pre">
89-
#demo-area-02-light img{
90-
height:200px;
91-
display:none;
92-
}
93-
#demo-area-02-light.on #demo-area-02-on{
94-
display:inline-block;
95-
}
96-
#demo-area-02-light.off #demo-area-02-off{
97-
display:inline-block;
98-
}</pre>
9976
</div>
10077
<div id="demo-area-03" class="da">
10178
<div id="demo-area-03-container">
10279
<img src="../media/webduino-logo.jpg" id="demo-area-03-image">
10380
</div>
104-
<br/>
105-
<h5>HTML:</h5>
106-
<pre class="demo-pre">
107-
&lt;div id=&quot;demo-area-03-container&quot;&gt;
108-
&lt;img src=&quot;../media/webduino-logo.jpg&quot; id=&quot;demo-area-03-image&quot;&gt;
109-
&lt;/div&gt;</pre>
110-
<h5>CSS:</h5>
111-
<pre class="demo-pre">
112-
#demo-area-03-container{
113-
position:relative;
114-
width:150px;
115-
height:150px;
116-
}
117-
#demo-area-03-image{
118-
position:absolute;
119-
top:0;
120-
left:0;
121-
width:150px;
122-
height:150px;
123-
transition:.3s;
124-
-webkit-transition:.3s;
125-
-moz-transition:.3s;
126-
transform-origin:75px 75px;
127-
-webkit-transform-origin:75px 75px;
128-
-moz-transform-origin:75px 75px;
129-
}</pre>
13081
</div>
13182
<div id="demo-area-04" class="da">
13283
選擇顏色：<input id="demo-area-04-color" type="color">
13384
<br/>
13485
<br/>
13586
<div id="demo-area-04-area"></div>
136-
<br/><br/>
137-
<h5>HTML:</h5>
138-
<pre class="demo-pre">
139-
選擇顏色：&lt;input id=&quot;demo-area-04-color&quot; type=&quot;color&quot;&gt;
140-
&lt;div id=&quot;demo-area-04-area&quot;&gt;&lt;/div&gt;</pre>
14187
</div>
14288
<div id="demo-area-05" class="da">
14389
<button id="demo-area-05-btn1" class="db5">{{demoAreaBtn1}}</button>
14490
<button id="demo-area-05-btn2" class="db5">{{demoAreaBtn2}}</button>
14591
<button id="demo-area-05-btn3" class="db5">{{demoAreaBtn3}}</button>
14692
<button id="demo-area-05-btn4" class="db5">{{demoAreaBtn4}}</button>
14793
<button id="demo-area-05-btn5" class="db5">{{demoAreaBtn5}}</button>
148-
<br/><br/>
149-
<h5>HTML:</h5>
150-
<pre class="demo-pre">
151-
&lt;button id=&quot;demo-area-05-btn1&quot; class=&quot;db5&quot;&gt;&#25353;&#37397; 1&lt;/button&gt;
152-
&lt;button id=&quot;demo-area-05-btn2&quot; class=&quot;db5&quot;&gt;&#25353;&#37397; 2&lt;/button&gt;
153-
&lt;button id=&quot;demo-area-05-btn3&quot; class=&quot;db5&quot;&gt;&#25353;&#37397; 3&lt;/button&gt;
154-
&lt;button id=&quot;demo-area-05-btn4&quot; class=&quot;db5&quot;&gt;&#25353;&#37397; 4&lt;/button&gt;
155-
&lt;button id=&quot;demo-area-05-btn5&quot; class=&quot;db5&quot;&gt;&#25353;&#37397; 5&lt;/button&gt;</pre>
15694
</div>
15795
<div id="demo-area-06" class="da">
15896
數值：<span id="demo-area-06-input-value">90</span>
15997
<br/>
16098
拉霸：<input type="range" min="0" max="180" step="5" value="90" id="demo-area-06-input">
161-
<br/><br/>
162-
<h5>HTML:</h5>
163-
<pre class="demo-pre">
164-
&#25976;&#20540;&#65306;&lt;span id=&quot;demo-area-06-input-value&quot;&gt;90&lt;/span&gt;
165-
&#25289;&#38712;&#65306;&lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;180&quot; step=&quot;5&quot; value=&quot;90&quot; id=&quot;demo-area-06-input&quot;&gt;</pre>
16699
</div>
167100
<div id="demo-area-07" class="da">
168101
<div id="player"></div>
169102
<span style="font-size:12px;">{{demoAreaYoutube1}}<br/>{{demoAreaYoutube2}}<strong>https://www.youtube.com/iframe_api</strong></span>
170-
<br/><br/>
171-
<h5>HTML:</h5>
172-
<pre class="demo-pre">
173-
&lt;div id=&quot;player&quot;&gt;&lt;/div&gt;</pre>
174103
</div>
175104
<div id="demo-area-08" class="da">
176105
<div id="demo-area-08-content">
177106
<video id="demo-area-08-video" preload autoplay loop muted controls></video>
178107
<canvas id="demo-area-08-canvas" ></canvas>
179108
</div>
180-
<span style="font-size:12px;"><a href="http://blockly.webduino.io/lib/tracking-min.js" target="_blank">tracking-min.js</a></span>
181-
<br/>
182-
<span style="font-size:12px;"><a href="http://blockly.webduino.io/lib/face-min.js" target="_blank">face-min.js</a></span>
183-
<br/><br/>
184-
<h5>HTML:</h5>
185-
<pre class="demo-pre">&lt;div id=&quot;demo-area-08-content&quot;&gt;
186-
&lt;video id=&quot;demo-area-08-video&quot; preload autoplay loop muted controls&gt;&lt;/video&gt;
187-
&lt;canvas id=&quot;demo-area-08-canvas&quot; &gt;&lt;/canvas&gt;
188-
&lt;/div&gt;</pre>
189-
<h5>CSS:</h5>
190-
<pre class="demo-pre">#demo-area-08-content{
191-
position: relative;
192-
width:100%;
193-
max-width:300px;
194-
height:200px;
195-
}
196-
#demo-area-08-video{
197-
top:0;
198-
left:0;
199-
position: absolute;
200-
width:100%;
201-
height:100%;
202-
}
203-
204-
#demo-area-08-canvas{
205-
top:0;
206-
left:0;
207-
position: absolute;
208-
width:100%;
209-
height:100%;
210-
}</pre>
211109
</div>
212110
</div>
213111
</div>

0 commit comments

Comments
 (0)