-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·82 lines (79 loc) · 4.1 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
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="mobile-web-app-capable">
<meta content="/" name="msapplication-starturl">
<meta content="#93278f" name="msapplication-TileColor">
<meta content="#93278f" name="theme-color">
<meta content="/img/icon144.png" name="msapplication-TileImage">
<meta content="https://oddmouse.github.io/phantomzone" property="og:url">
<meta content="https://oddmouse.github.io/phantomzone/img/screenshot.jpg" name="twitter:image">
<meta content="https://oddmouse.github.io/phantomzone/img/screenshot.jpg" property="og:image">
<meta content="Join Zod and the gang in the a mobile friendly web demo built with HTML5, CSS and vanilla JavaScript featuring webcam capabilities if your browser supports WebRTC." name="description">
<meta content="Join Zod and the gang in the a mobile friendly web demo built with HTML5, CSS and vanilla JavaScript featuring webcam capabilities if your browser supports WebRTC." name="twitter:description">
<meta content="Join Zod and the gang in the a mobile friendly web demo built with HTML5, CSS and vanilla JavaScript featuring webcam capabilities if your browser supports WebRTC." property="og:description">
<meta content="Phantom Zone" name="apple-mobile-web-app-title">
<meta content="Phantom Zone" name="application-name">
<meta content="Phantom Zone" name="twitter:title">
<meta content="Phantom Zone" property="og:title">
<meta content="summary_large_image" name="twitter:card">
<meta content="website" property="og:type">
<link href="img/icon16.png" rel="icon" sizes="16x16" type="image/png">
<link href="img/icon32.png" rel="icon" sizes="32x32" type="image/png">
<link href="img/icon48.png" rel="icon" sizes="48x48" type="image/png">
<link href="img/icon62.png" rel="icon" sizes="62x62" type="image/png">
<link href="img/icon192.png" rel="icon" sizes="192x192" type="image/png">
<link href="img/icon180.png"rel="apple-touch-icon" sizes="180x180" type="image/png">
<link href="humans.txt" rel="author">
<link href="manifest.json" rel="manifest">
<link href="phantomzone.css" rel="stylesheet">
<title>Phantom Zone</title>
</head>
<body>
<main class="space">
<div class="bg"></div>
<div class="phantom">
<div class="zone">
<div class="zone__front">
<video class="zone__loop" src="media/zod.mp4" autoplay loop muted playsinline></video>
</div>
<div class="zone__back">
<video class="zone__loop" src="media/zod.mp4" autoplay loop muted playsinline></video>
</div>
<div class="zone__top"></div>
<div class="zone__right"></div>
<div class="zone__bottom"></div>
<div class="zone__left"></div>
</div>
</div>
</main>
<footer class="footer">
<p>
<button class="button button__bg">
<svg class="icon" viewBox="0 0 24 24">
<path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z" />
</svg>
<span class="button__label">Background</span>
</button>
<button class="button button__zone button--hidden">
<svg class="icon" viewBox="0 0 24 24">
<path class="icon__off" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
<path class="icon__on" d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z" />
</svg>
<span class="button__label">Phantom Cam</span>
</button>
</p>
<p>
<a href="https://lindy.co">By Lindy Roquemore</a></span>
<span class="credit"></span>
</p>
</footer>
<script src="phantomzone.js"></script>
</body>
</html>
<html>