Skip to content
This repository
Browse code

Adding template file for performances

  • Loading branch information...
commit cc28870cfba850f11da8f21c23437e52d23a9709 1 parent 553da98
Barry van Oudtshoorn authored

Showing 1 changed file with 141 additions and 0 deletions. Show diff stats Hide diff stats

  1. +141 0 Examples/template.html
141 Examples/template.html
... ... @@ -0,0 +1,141 @@
  1 +<!doctype html>
  2 +<html>
  3 + <head>
  4 + <title>TrackPerformer</title>
  5 + <style>
  6 + body {
  7 + margin: 0;
  8 + padding: 0;
  9 + background: #ddd;
  10 + font-family: 'Trebuchet MS';
  11 + font-size: 10pt;
  12 + color: #666;
  13 + }
  14 +
  15 + a > img {
  16 + position: absolute;
  17 + top: 0;
  18 + right: 0;
  19 + border: 0;
  20 + z-index: 100;
  21 + opacity: 0.1;
  22 + -moz-transition: opacity 0.5s;
  23 + -webkit-transition: opacity 0.5s;
  24 + transition: opacity 0.5s;
  25 + }
  26 +
  27 + a > img:hover {
  28 + opacity: 1.0;
  29 + }
  30 +
  31 + #container {
  32 + position: relative;
  33 + width: 400px;
  34 + height: 400px;
  35 + margin: 24px auto;
  36 + }
  37 +
  38 + #container > canvas {
  39 + background: #000;
  40 + }
  41 +
  42 + #container > .overlay {
  43 + position: absolute;
  44 + top: 0;
  45 + right: 0;
  46 + bottom: 0;
  47 + left: 0;
  48 + z-index: 2;
  49 + box-shadow: 0 2px 8px -2px #000;
  50 + border: solid 4px #ccc;
  51 + }
  52 +
  53 + #meta {
  54 + position: absolute;
  55 + bottom: 8px;
  56 + left: 8px;
  57 + padding: 8px;
  58 + background: #fff;
  59 + -moz-box-shadow: inset 0 0 4px #000;
  60 + -webkit-box-shadow: inset 0 0 4px #000;
  61 + box-shadow: inset 0 0 4px #000;
  62 + -moz-border-radius: 4px;
  63 + -webkit-border-radius: 4px;
  64 + border-radius: 4px;
  65 + }
  66 +
  67 + #meta > .title {
  68 + font-size: 125%;
  69 + }
  70 +
  71 + #meta > .composer {
  72 +
  73 + }
  74 +
  75 + #meta > .url {
  76 +
  77 + }
  78 +
  79 + #meta > .url > a {
  80 + color: #444;
  81 + text-decoration: none;
  82 + }
  83 +
  84 + #meta > .url > a:hover {
  85 + color: #666;
  86 + text-decoration: none;
  87 + }
  88 +
  89 + #fps {
  90 + position: absolute;
  91 + bottom: 0;
  92 + right: 0;
  93 + width: 40px;
  94 + text-align: right;
  95 + padding: 4px;
  96 + color: #aaa;
  97 + width: 100px;
  98 + font-size: 8pt;
  99 + }
  100 + </style>
  101 + <script type="text/javascript" src="../Source/mootools-core.js"></script>
  102 + <script type="text/javascript" src="../Source/mootools-more.js"></script>
  103 + <script type="text/javascript" src="../Source/trackPerformer.js"></script>
  104 +
  105 + <script type="text/javascript" src="../Source/performer.Base.js"></script>
  106 + <script type="text/javascript" src="../Source/performer.Morse.js"></script>
  107 + <script type="text/javascript" src="../Source/performer.Oscillator.js"></script>
  108 + <script type="text/javascript" src="../Source/performer.ShimmerGrid.js"></script>
  109 + <script type="text/javascript" src="../Source/performer.SignalTracker.js"></script>
  110 + <script type="text/javascript" src="../Source/performer.Swarm.js"></script>
  111 + <script type="text/javascript" src="../Source/performer.Thumper.js"></script>
  112 + <script type="text/javascript" src="../Source/performer.Tracer.js"></script>
  113 + <script type="text/javascript" src="../Source/performer.Transformer.js"></script>
  114 +
  115 + <script type="text/javascript" src="/../Source/filter.Base.js"></script>
  116 + <script type="text/javascript" src="../Source/filter.FPS.js"></script>
  117 + <script type="text/javascript" src="../Source/filter.Grid.js"></script>
  118 + <script type="text/javascript" src="../Source/filter.Pick.js"></script>
  119 +
  120 + <!-- Add a link to your source here; for example:
  121 + <script type="text/javascript" src="my-performance-file.js"></script>
  122 + -->
  123 + </head>
  124 +
  125 + <body>
  126 + <div id="container"><div class="overlay"></div></div>
  127 + <div id="meta">
  128 + <div class="title">Track Title</div>
  129 + <div class="composer">Composer</div>
  130 + <div class="url"><a href="http://www.barryvan.com.au/">URL</a></div>
  131 + </div>
  132 + <div id="fps"></div>
  133 + <script type="text/javascript">
  134 + (function() {
  135 + $$('#container > .overlay').addEvent('click', function() {
  136 + if (window.controller && window.controller._toggle) window.controller._toggle();
  137 + });
  138 + })();
  139 + </script>
  140 + </body>
  141 +</html>

0 comments on commit cc28870

Please sign in to comment.
Something went wrong with that request. Please try again.