can-spin/index.html at master · rickyH/can-spin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-hQpvDQiCJaD2H465dQfA717v7lu5qHWtDbWNPvaTJ0ID5xnPUlVXnKzq7b8YUkbN" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css" rel='stylesheet' type='text/css'/>
</head>
<body onload="scene.init()">

  <div id="controls">
    <h3>Camera:</h3>
    <span class="control">
      <input type="range" name="points" min="0" max="100" value="0">
      <span class="amount">0</span>
    </span>
    <span class="control">
      <input type="range" name="points" min="0" max="100" value="50">
      <span class="amount">50</span>
    </span>
    <span class="control">
      <input type="range" name="points" min="0" max="2500" value="581">
      <span class="amount">581</span>
    </span>

    <h3>Light:</h3>
    <span class="control">
      <input type="range" name="points" min="0" max="100" value="48">
      <span class="amount">48</span>
    </span>
    <span class="control">
      <input type="range" name="points" min="0" max="100" value="38">
      <span class="amount">38</span>
    </span>
    <span class="control">
      <input type="range" name="points" min="0" max="2500" value="136">
      <span class="amount">136</span>
    </span>
  </div>

  <div id="container">
    <div id="header">
      <span id="dyn-title">Beavertown Gamma Ray</span>
      <span onClick="content.previous()" class="previous glyphicon glyphicon-menu-left"></span>
      <span onClick="content.next()" class="next glyphicon glyphicon-menu-right"></span>
    </div>

    <div class="main-content container">
      <div class="row">
        <div class="viewport col-sm-6 col-xs-12">

        </div>
        <div class="col-sm-6 col-xs-12 bottom-padder top-padder">
          <h3>About <span id="dyn-name">Gamma Ray</span></h3>
          <p class="bottom-padder" id="dyn-desc">
            The concept was to create a juicy tropical beer. A brew you can sit on and drink all day, rammed with juicy malts and huge tropical aromas of mango and grapefruit. Massive additions of whole leaf American hops are added in ever increasing numbers at the end of the boil giving huge hop flavour. The beer is then dry hopped for days, driving the punchy aromas so you can smell it from miles away!
          </p>
          <table class="table table-condensed">
            <tbody>
              <tr> <td class="bold">Style</td> <td id="dyn-style">American IPA</td> </tr>
              <tr> <td class="bold">ABV</td>   <td id="dyn-abv">5.4%</td> </tr>
              <tr> <td class="bold">IBU</td>   <td id="dyn-ibu">55</td> </tr>
              <tr> <td class="bold">Malt</td>  <td id="dyn-malt">Best Pale, Caragold, Caramalt</td> </tr>
              <tr> <td class="bold">Hops</td>  <td id="dyn-hops">Columbus, Bravo, Amarillo, Citra, Calypso</td> </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="container sub-content">
    <div class="row">
      <div class="col-sm-12 col-md-4">
        <h3 id="dyn-brewer-name">Beavertown</h3>
        <p id="dyn-brewery-desc">
          Beavertown Brewery is an artisan microbrewery based in De Beauvoir Town in Hackney.  We opened our doors in February 2012 as part of the Brewpub, Duke's Brew and Que, brewing both cask and bottle conditioned beers by hand.
        </p>
      </div>
      <div class="col-sm-6 col-md-4">
        <h3>Food Pairing</h3>
        <table class="table table-condensed">
          <tbody>
            <tr> <td id="dyn-food-1">Pulled Lamb madras with bombay potatoes.</td> </tr>
            <tr> <td id="dyn-food-2">Day smoked beef brisket.</td> </tr>
            <tr> <td id="dyn-food-3">Salted caramel and orange brownies.</td> </tr>
          </tbody>
        </table>
      </div>
      <div class="col-sm-6 col-md-4">
        <h3>Where to buy</h3>
        <button type="button" class="btn btn-info btn-lg btn-block">Buy Online</button>
      </div>
    </div>
  </div>

  <footer>
    <i class="fa fa-twitter"></i> @rickyharrison
  </footer>

<script>
  // TODO: these shouldnt be global variables
  var box;
  var spin = {
    x: 0,
    y: 0
  };
  var dragging = false;
</script>

<script src="js/threejs/lib/three.min.js"></script>
<script src="js/threejs/lib/stats.min.js"></script>
<script src="js/project/content.js"></script>
<script src="js/project/3d.js"></script>
<script src="js/project/rotationController.js"></script>

</body>
</html>