Skip to content

Instantly share code, notes, and snippets.

@charlesfracchia

charlesfracchia/glass.html

Forked from bwhite/glass.html
Created March 24, 2014 03:58
Show Gist options
  • Save charlesfracchia/9733903 to your computer and use it in GitHub Desktop.
Save charlesfracchia/9733903 to your computer and use it in GitHub Desktop.
Download ZIP
[wearscript]
Raw
glass.html
<html style="width:100%; height:100%; overflow:hidden">
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<script type="text/html" id="tpl_card0">
<article>
<section>
<h1 style="font-size:65;">3. Pipet 45&micro;L</h1>
</section>
<footer>
<p><strike>20&micro;L</strike></p><br>
<p><strike>20&micro;L</strike></p>
</footer>
</article>
</script>
<script type="text/html" id="tpl_card1">
<article>
<figure>
<img src="https://mirror-api-playground.appspot.com/links/lincoln.png">
</figure>
<section>
<table class="text-small align-justify">
<tbody>
<tr>
<td>Born</td>
<td>Feb 12, 1809</td>
</tr>
<tr>
<td>Died</td>
<td>Apr 15, 1865</td>
</tr>
<tr>
<td>Height</td>
<td>6' 4"</td>
</tr>
</tbody>
</table>
</section>
</article>
</script>
<script type="text/html" id="tpl_card2">
<article>
<figure>
<ul class="mosaic mosaic3">
<li style="background-image: url(https://mirror-api-playground.appspot.com/links/washington.jpg)"></li>
<li style="background-image: url(https://mirror-api-playground.appspot.com/links/lincoln.png)"></li>
<li style="background-image: url(https://mirror-api-playground.appspot.com/links/obama.jpg)"></li>
<li style="background-image: url(https://mirror-api-playground.appspot.com/links/washington.jpg)"></li>
<li style="background-image: url(https://mirror-api-playground.appspot.com/links/lincoln.png)"></li>
</ul>
</figure>
<section>
<p class="text-medium">
U.S. Presidents
</p>
<table class="text-small align-justify">
<tbody>
<tr>
<td>Washington</td>
<td>1<sup>st</sup></td>
</tr>
<tr>
<td>Lincoln</td>
<td>16<sup>th</sup></td>
</tr>
<tr>
<td>Obama</td>
<td>44<sup>th</sup></td>
</tr>
</tbody>
</table>
</section>
</article>
</script>
<script type="text/html" id="tpl_card3">
<article>
<section>
<table class="align-justify">
<tbody>
<tr>
<td>AAPL</td>
<td>503.73</td>
<td class="red">-16.57 (3.18%)</td>
</tr>
<tr>
<td>AMZN</td>
<td>274.03</td>
<td class="green">+6.09 (2.27%)</td>
</tr>
<tr>
<td>GOOG</td>
<td>727.58</td>
<td class="red">-12.41 (1.68%)</td>
</tr>
</tbody>
</table>
</section>
</article>
</script>
<script type="text/html" id="tpl_card4">
<article>
<section>
<div class="layout-two-column">
<div class="align-center">
<p>Celtics</p>
<p class="text-x-large">101</p>
</div>
<div class="align-center">
<p>Bulls</p>
<p class="text-x-large">95</p>
</div>
</div>
</section>
<footer>
<p>Final Score</p>
</footer>
</article>
</script>
<script type="text/html" id="tpl_card5">
<article>
<section>
<div class="layout-figure">
<div class="align-center">
<p class="text-x-large">BOS</p>
<img src="https://mirror-api-playground.appspot.com/links/plane.png" width="50" height="50">
<p class="text-x-large">SFO</p>
</div>
<div>
<div class="text-normal">
<p>Virgin America 351</p>
<p>Gate B38</p>
<p>8:35am</p>
<p class="green">On Time</p>
</div>
</div>
</div>
</section>
</article>
</script>
<script type="text/html" id="tpl_card6">
<article>
<figure>
<img src="https://mirror-api-playground.appspot.com/links/movie.jpg">
</figure>
<section>
<h1 class="text-large">Movie</h1>
<p class="text-x-small">
<img class="icon-small" src="https://mirror-api-playground.appspot.com/links/rated_r.png">
120 min / Drama
</p>
<hr>
<p class="text-normal">
1:15 2:10 4:15<br>
Movie Theatre
</p>
</section>
</article>
</script>
<script>
function main() {
if (WS.scriptVersion(1)) return;
var tree = new WS.Cards();
tree.addHTML('tpl_card0').addHTML('tpl_card1').addHTML('tpl_card2').addHTML('tpl_card3').addHTML('tpl_card4').addHTML('tpl_card5').addHTML('tpl_card6');
WS.cardTree(tree);
WS.displayCardTree();
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment