ml-meme/index.html at master · MFarejowicz/ml-meme · 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
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <script src="https://unpkg.com/ml5@0.4.2/dist/ml5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="appContainer">
      <h1>Fit Your Bits!</h1>
      <div id="canvasContainer"><div id="loading">Loading...</div></div>
      <div class="info">
        <div class="hide bodyText" id="info"></div>
        <div id="start" class="hide">
          <button class="startButton" onclick="start('EASY')">Easy</button>
          <button class="startButton" onclick="start('MEDIUM')">Medium</button>
          <button class="startButton" onclick="start('HARD')">Hard</button>
        </div>
        <div class="hide timeText" id="time"></div>
      </div>
      <div id="snap0" class="hide ">
        <div class="snapTitle">
          <div>Pose 0: <span id="snapName0"></span></div>
          <div>Score: <span id="snapScore0"></span></div>
        </div>
        <div id="snapCanvas0"></div>
      </div>
      <div id="snap1" class="hide snap">
        <div class="snapTitle">
          <div>Pose 1: <span id="snapName1"></span></div>
          <div>Score: <span id="snapScore1"></span></div>
        </div>
        <div id="snapCanvas1"></div>
      </div>
      <div id="snap2" class="hide snap">
        <div class="snapTitle">
          <div>Pose 2: <span id="snapName2"></span></div>
          <div>Score: <span id="snapScore2"></span></div>
        </div>
        <div id="snapCanvas2"></div>
      </div>
      <div id="snap3" class="hide snap">
        <div class="snapTitle">
          <div>Pose 3: <span id="snapName3"></span></div>
          <div>Score: <span id="snapScore3"></span></div>
        </div>
        <div id="snapCanvas3"></div>
      </div>
      <div id="snap4" class="hide snap">
        <div class="snapTitle">
          <div>Pose 4: <span id="snapName4"></span></div>
          <div>Score: <span id="snapScore4"></span></div>
        </div>
        <div id="snapCanvas4"></div>
      </div>
      <div id="snap5" class="hide snap">
        <div class="snapTitle">
          <div>Pose 5: <span id="snapName5"></span></div>
          <div>Score: <span id="snapScore5"></span></div>
        </div>
        <div id="snapCanvas5"></div>
      </div>
      <div id="snap6" class="hide snap">
        <div class="snapTitle">
          <div>Pose 6: <span id="snapName6"></span></div>
          <div>Score: <span id="snapScore6"></span></div>
        </div>
        <div id="snapCanvas6"></div>
      </div>
      <div id="snap7" class="hide snap">
        <div class="snapTitle">
          <div>Pose 7: <span id="snapName7"></span></div>
          <div>Score: <span id="snapScore7"></span></div>
        </div>
        <div id="snapCanvas7"></div>
      </div>
      <div id="snap8" class="hide snap">
        <div class="snapTitle">
          <div>Pose 8: <span id="snapName8"></span></div>
          <div>Score: <span id="snapScore8"></span></div>
        </div>
        <div id="snapCanvas8"></div>
      </div>
      <div id="snap9" class="hide snap">
        <div class="snapTitle">
          <div>Pose 9: <span id="snapName9"></span></div>
          <div>Score: <span id="snapScore9"></span></div>
        </div>
        <div id="snapCanvas9"></div>
      </div>
      <div id="snap10" class="hide snap">
        <div class="snapTitle">
          <div>Pose 10: <span id="snapName10"></span></div>
          <div>Score: <span id="snapScore10"></span></div>
        </div>
        <div id="snapCanvas10"></div>
      </div>
      <h2 id="refresh" class="hide">
        Refresh to play again!
      </h2>
    </div>
    <script src="targets.js"></script>
    <script src="snaps.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>