-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
74 lines (68 loc) · 3.62 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="Social.webp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
<title>Theatre.js Tutorial 1</title>
<meta name="description" content="Theatre.js Beginner Tutorial: Learning the basics of theatre.js to animate a cool bouncy box.">
<meta itemprop="name" content="Theatre.js Tutorial 1">
<meta itemprop="description" content="Theatre.js Beginner Tutorial: Learning the basics of theatre.js to animate a cool bouncy box.">
<!-- <meta itemprop="image" content="Social.webp"> -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Theatre.js Tutorial 1">
<meta name="twitter:description" content="Theatre.js Beginner Tutorial: Learning the basics of theatre.js to animate a cool bouncy box.">
<!-- <meta name="twitter:image" content="Social.webp"> -->
<meta property="og:site_name" content="Theatre.js Tutorial 1">
<meta property="og:type" content="website">
<meta property="og:title" content="Theatre.js Tutorial 1">
<meta property="og:description" content="Theatre.js Beginner Tutorial: Learning the basics of theatre.js to animate a cool bouncy box.">
<!-- <meta property="og:image" content="Social.webp"> -->
<meta name="apple-mobile-web-app-title" content="Theatre.js Tutorial 1">
<meta name="application-name" content="Theatre.js Tutorial 1">
</head>
<body>
<h1 class="logo">Bouncy</h1>
<div class="name">Theatre.js Tutorial by thebenezer</div>
<a href="https://youtu.be/wT7P6qjAg30" class="cta" target="_blank" rel="noopener noreferrer">Watch Tutorial</a>
<ul class="socials">
<li>
<a href="https://github.com/thebenezer/TheatreTutorial_Part1" target="_blank" rel="noopener noreferrer">
<img alt="Github Icon" src="https://img.icons8.com/external-tal-revivo-color-tal-revivo/128/null/external-github-a-web-based-hosting-service-for-version-control-logo-color-tal-revivo.png"/>
</a>
</li>
<li>
<a href="https://twitter.com/th_ebenezer" target="_blank" rel="noopener noreferrer">
<img alt="Twitter Icon" src="https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/128/null/external-twitter-social-media-tanah-basah-glyph-tanah-basah-2.png"/>
</a>
</li>
</ul>
<div class="vignette"></div>
<div class="enterSceneContainer" id="tapStart">
<p>Tap to start</p>
</div>
<div class="playbackControls">
<div id="toggleAnimation">
<button id="play">
<img alt="play" src="https://img.icons8.com/fluency-systems-filled/128/null/play.png"/>
</button>
<button id="pause">
<img alt="pause" src="https://img.icons8.com/fluency-systems-filled/128/null/pause.png"/>
</button>
</div>
<div id="toggleSound">
<button id="soundOn">
<img alt="soundOn" src="https://img.icons8.com/fluency-systems-filled/128/null/high-volume.png"/>
</button>
<button id="soundOff">
<img alt="soundOff" src="https://img.icons8.com/fluency-systems-filled/128/null/no-audio.png"/>
</button>
</div>
</div>
<div id="boink">Boink!!</div>
<!-- Sound Effect from <a href="https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=44164">Pixabay</a> -->
<script type="module" src="/src/main.ts"></script>
</body>
</html>