This repository has been archived by the owner on Jul 22, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 87
/
index.html
219 lines (197 loc) · 16.4 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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-77033033-28"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-77033033-28');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="./res/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="./res/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./res/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./res/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="./res/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="./res/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="./res/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="./res/favicon-16x16.png" sizes="16x16" />
<meta name="application-name" content="Hello WebXR!"/>
<meta name="msapplication-TileColor" content="#C6C6C6" />
<meta name="msapplication-TileImage" content="./res/mstile-144x144.png" />
<!-- Search Engine -->
<meta name="description" content="WebXR multi-experience by the Mozilla Mixed Reality team to celebrate the official release of the WebXR specification.">
<meta name="image" content="https://raw.githubusercontent.com/MozillaReality/hello-webxr/master/res/big_thumbnail.jpg">
<!-- Schema.org for Google -->
<meta itemprop="name" content="Hello WebXR!">
<meta itemprop="description" content="WebXR multi-experience by the Mozilla Mixed Reality team to celebrate the official release of the WebXR specification.">
<meta itemprop="image" content="https://raw.githubusercontent.com/MozillaReality/hello-webxr/master/res/big_thumbnail.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hello WebXR!">
<meta name="twitter:description" content="WebXR multi-experience by the Mozilla Mixed Reality team to celebrate the official release of the WebXR specification. https://mixedreality.mozilla.org/hello-webxr">
<meta name="twitter:site" content="@mozillareality">
<meta name="twitter:creator" content="@mozillareality">
<meta name="twitter:image:src" content="https://raw.githubusercontent.com/MozillaReality/hello-webxr/master/res/big_thumbnail.jpg">
<meta name="twitter:player" content="https://www.youtube.com/user/mozhacks">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="Hello WebXR!">
<meta name="og:description" content="WebXR multi-experience by the Mozilla Mixed Reality team to celebrate the official release of the WebXR specification.">
<meta name="og:image" content="https://raw.githubusercontent.com/MozillaReality/hello-webxr/master/res/big_thumbnail.jpg">
<meta name="og:url" content="https://mixedreality.mozilla.org/hello-webxr">
<meta name="og:site_name" content="Hello WebXR!">
<meta name="og:locale" content="en_US">
<meta name="og:type" content="website">
<title>Hello WebXR! - Mozilla Mixed Reality</title>
<style>
@font-face{
font-family: 'Zilla Slab';
src: url('https://code.cdn.mozilla.net/fonts/woff/ZillaSlab-SemiBold.woff');
src: url('https://code.cdn.mozilla.net/fonts/woff2/ZillaSlab-SemiBold.woff2') format('woff2'),
url('https://code.cdn.mozilla.net/fonts/woff/ZillaSlab-SemiBold.woff') format('woff'),
url('https://code.cdn.mozilla.net/fonts/otf/ZillaSlab(-SemiBold).otf') format('opentype'),
url('https://code.cdn.mozilla.net/fonts/ttf/ZillaSlab-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
body{
margin: 0;
overflow: hidden;
font-family: 'Zilla Slab', sans-serif;
}
header {
position: absolute;
width: calc(100vw - 1rem);
margin-top: 1rem;
text-align: right;
}
footer {
position: absolute;
bottom: 0;
width: 100vw;
margin-bottom: 1rem;
text-align: right;
}
#mrlogo {
margin: 0.3rem 1.5rem;
width: 200px;
}
header a {
text-decoration: none;
color: #000;
margin-left: 0.8rem;
vertical-align: top;
}
header a path{
fill: #000;
}
header a:hover {
color: #059;
text-decoration: underline;
text-underline-offset: 6px;
}
header a:hover path, #mrlogo:hover path.mrlogobg{
fill: #059;
}
#handedness a{
margin-left: 0.3rem;
}
.activehand {
background: #000;
color: #fff;
padding: 3px 12px;
border-radius: 5px;
pointer-events: none;
}
@media (max-width: 580px) {
#mrlogo{
display: none;
}
}
#loading {
z-index: 9999;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
background: url(assets/loadingbg.jpg);
background-size: cover;
background-position: center;
}
#loading h1 {
color: white;
font-size: 6rem;
margin: 1rem;
text-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
}
#loading div {
text-align: center;
position: absolute;
width: 100vw;
top: calc(50vh - 120px);
font-size: 2rem;
}
.hidden {
display: none;
}
#no-webxr {
padding: 20px;
text-align: center;
}
#no-webxr a {
color: #000;
}
</style>
<script src="bundle.js"></script>
<script type="text/javascript">
function aclick(ev) {
ev.stopPropagation();
}
function setHandedness(link, hand) {
var currentURL = new URL(window.location);
currentURL.searchParams.set('handedness', hand);
link.href = currentURL.href;
}
</script>
</head>
<body>
<div id="loading">
<div>
<h1> Hello!</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1">
<path stroke="#000" stroke-width="8px" fill="none" d="M 50 5 a 45 45 0 1 0 0.0001 0"
stroke-dasharray="282 282" stroke-dashoffset="282" id="progressbar"/>
</svg>
</div>
</div>
<div id="no-webxr" class="hidden">
WEBXR NOT AVAILABLE. PLEASE USE A VR HEADSET (<a href="https://www.youtube.com/watch?v=uXBDogyGXTQ">watch preview video</a>)
</div>
<header>
<span id="handedness">
Handedness:
<a href="#" id="lefthand" onclick="setHandedness(this, 'left')">Left</a>
<a href="#" id="righthand" onclick="setHandedness(this, 'right')">Right</a>
</span>
<span> </span>
<a href="https://blog.mozvr.com/hello-webxr" onclick="aclick(event)">What is this about?</a>
<a href="http://twitter.com/share?text=Check%20out%20%22Hello%20WebX%22,%20a%20demo%20from%20@mozillareality%20celebrating%20the%20final%20WebXR%20API!%20https://blog.mozvr.com/hello-webxr&url=https://mixedreality.mozilla.org/hello-webxr/" onclick="aclick(event)"><svg width="20" height="20" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29 6.72442C28.1924 7.89722 27.2017 8.89697 26.0277 9.72368C26.0393 9.9454 26.0451 10.196 26.0451 10.4755C26.0451 12.0283 25.8132 13.5831 25.3495 15.1397C24.8857 16.6963 24.1773 18.1863 23.2243 19.6096C22.2712 21.0329 21.136 22.2938 19.8185 23.3923C18.5011 24.4909 16.9174 25.3668 15.0676 26.0201C13.2178 26.6734 11.2353 27 9.12006 27C5.81892 27 2.7789 26.1299 0 24.3897C0.493223 24.4433 0.966265 24.47 1.41913 24.47C4.17695 24.47 6.64014 23.6407 8.80868 21.982C7.52282 21.959 6.37124 21.5725 5.35394 20.8226C4.33663 20.0727 3.63655 19.1144 3.25368 17.9479C3.63212 18.0182 4.00562 18.0534 4.3742 18.0534C4.90474 18.0534 5.42678 17.9859 5.94032 17.8507C4.56807 17.5824 3.42968 16.9151 2.52513 15.8488C1.62062 14.7826 1.16836 13.5519 1.16836 12.1568V12.0849C2.01065 12.5402 2.90909 12.7824 3.86367 12.8115C3.05076 12.2824 2.40625 11.5924 1.93013 10.7415C1.45397 9.89069 1.2159 8.9699 1.2159 7.9792C1.2159 6.93434 1.48407 5.96138 2.0204 5.06032C3.51269 6.84829 5.32092 8.2773 7.44508 9.34733C9.56927 10.4174 11.8481 11.0117 14.2816 11.1302C14.1778 10.7078 14.1258 10.2671 14.1257 9.808C14.1257 8.20496 14.7067 6.8362 15.8687 5.70172C17.0308 4.56724 18.4328 4 20.0746 4C21.7936 4 23.2415 4.61112 24.4184 5.83335C25.763 5.57331 27.022 5.10297 28.1954 4.42233C27.7433 5.81137 26.8722 6.88292 25.5821 7.63699C26.7678 7.49942 27.9071 7.19523 29 6.72442H29Z" fill="black"/></svg>
</a>
<a href="http://www.facebook.com/sharer.php?u=https://mixedreality.mozilla.org/hello-webxr/" onclick="aclick(event)"><svg width="20" height="20" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0V29H29V0H0ZM20.8614 3.78431C21.0721 3.77984 21.2914 3.78668 21.5181 3.802C22.3513 3.80313 23.2215 3.87824 24.0846 3.95422L23.9908 7.38806H21.6721C20.5849 7.36399 20.1923 7.78616 20.157 9.01293V11.7104H24.0846L23.9289 15.3885H20.157V25.6281H16.3249V15.3886H13.6646V11.7104H16.3249V8.55273C16.3249 6.27601 17.2874 4.82686 19.1835 4.09229C19.6704 3.90069 20.2296 3.79772 20.8614 3.78431Z" fill="black"/></svg>
</a>
</header>
<footer>
<a href="https://mixedreality.mozilla.org" onclick="aclick(event)"><svg id="mrlogo" width="308" height="39" viewBox="0 0 308 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="mrlogobg" d="M0 0H119V38.443H0V0Z" fill="black"/>
<path class="mrlogobg" d="M123 0H308V38.443H123V0Z" fill="black"/>
<path d="M109.188 25.392L109.251 27.514C108.472 27.9344 107.602 28.1592 106.716 28.169C104.807 28.169 103.806 27.109 103.586 25.392C102.805 26.796 101.366 28.169 99.081 28.169C97.047 28.169 94.763 27.109 94.763 24.144C94.763 20.712 98.048 19.901 101.333 19.901C102.085 19.901 102.898 19.901 103.587 20.026V19.558C103.587 18.092 103.587 16.407 101.334 16.407C100.458 16.407 99.801 16.437 99.144 16.812L98.674 18.404L95.482 18.029L96.014 14.784C98.455 13.817 99.769 13.505 102.084 13.505C105.058 13.505 107.686 15.096 107.686 18.31V24.394C107.686 25.236 107.999 25.486 108.656 25.486C108.781 25.486 109 25.486 109.188 25.392V25.392ZM100.552 25.33C101.991 25.33 103.493 24.238 103.587 21.93C102.93 21.836 102.241 21.742 101.584 21.742C100.144 21.742 98.862 22.116 98.862 23.708C98.862 24.581 99.362 25.33 100.552 25.33V25.33ZM91.133 6.392H95.107L89.005 27.857H85.062L91.133 6.392V6.392ZM82.966 6.392H86.94L80.838 27.857H76.864L82.966 6.392V6.392ZM70.01 18.84H74.203V13.786H70.01V18.84ZM70.01 27.857H74.203V22.803H70.01V27.857ZM63.189 24.831H58.62L66.443 15.876L66.13 13.786H53.71L53.209 18.716L56.182 19.028L56.807 16.812H61.188L53.428 25.736L53.835 27.857H66.195L67.04 22.927L63.848 22.647L63.191 24.831H63.189ZM43.633 13.505C48.702 13.505 51.205 16.905 51.205 20.868C51.205 25.33 47.92 28.169 43.414 28.169C39.034 28.169 36.06 25.549 36.06 21.024C36.06 16.906 38.564 13.505 43.633 13.505V13.505ZM43.508 25.08C45.636 25.08 47.012 23.396 47.012 20.712C47.012 17.904 45.479 16.594 43.57 16.594C41.505 16.594 40.19 18.154 40.19 20.774C40.19 23.177 41.349 25.08 43.508 25.08V25.08ZM32.43 18.404C32.43 15.034 30.083 13.505 27.61 13.505C25.358 13.505 23.73 14.691 22.98 16.563C22.323 14.473 20.445 13.505 18.38 13.505C16.409 13.505 14.938 14.441 14.093 15.908V13.786H8.17999V16.844H10.057V24.831H8.17999V27.857H16.754V24.831H14.094V19.9C14.094 17.935 14.908 16.562 16.816 16.562C18.381 16.562 19.226 17.529 19.226 19.962V27.856H25.14V24.83H23.262V19.9C23.262 17.935 24.045 16.562 25.953 16.562C27.612 16.562 28.425 17.529 28.425 19.962V27.856H34.339V24.83H32.431V18.403L32.43 18.404Z" fill="white"/>
<path d="M154.578 10.006H152.113V25.144H154.462V27H147.763V25.144H149.967V13.138H149.851L143.529 26.043H142.398L135.931 13.051H135.815V25.144H138.077V27H131.407V25.144H133.785V10.006H131.32V8.15H135.641L142.978 22.911H143.094L150.228 8.15H154.578V10.006ZM158.551 10.76V8.121H160.755V10.76H158.551ZM163.046 27H156.492V25.347H158.754V15.748H156.434V14.095H160.784V25.347H163.046V27ZM177.691 27H172.007V25.347H173.689L170.673 21.635L167.628 25.347H169.165V27H163.8V25.347H165.569L169.629 20.562L165.54 15.748H163.8V14.095H169.687V15.748H167.947L170.847 19.402L173.834 15.748H172.297V14.095H177.459V15.748H175.951L171.92 20.446L176.067 25.347H177.691V27ZM190.828 23.288C190.654 24.448 190.088 25.405 189.131 26.159C188.174 26.913 186.932 27.29 185.405 27.29C183.549 27.29 182.07 26.71 180.968 25.55C179.866 24.39 179.315 22.785 179.315 20.736C179.315 18.706 179.851 17.048 180.925 15.762C181.998 14.477 183.433 13.834 185.231 13.834C186.932 13.834 188.266 14.375 189.233 15.458C190.2 16.541 190.693 17.884 190.712 19.489C190.712 19.992 190.654 20.504 190.538 21.026H181.461C181.519 22.476 181.896 23.592 182.592 24.376C183.288 25.159 184.274 25.55 185.55 25.55C187.483 25.55 188.672 24.67 189.117 22.911L190.828 23.288ZM188.566 19.518C188.682 18.474 188.44 17.546 187.841 16.734C187.241 15.922 186.352 15.516 185.173 15.516C184.052 15.516 183.191 15.883 182.592 16.618C181.992 17.353 181.625 18.319 181.49 19.518H188.566ZM207.358 27H203.095V24.39C202.032 26.323 200.495 27.29 198.484 27.29C196.802 27.29 195.458 26.72 194.453 25.579C193.448 24.439 192.945 22.872 192.945 20.881C192.945 18.948 193.428 17.29 194.395 15.908C195.362 14.525 196.821 13.834 198.774 13.834C200.784 13.834 202.225 14.617 203.095 16.183V8.701H199.963V7.048H205.125V25.347H207.358V27ZM203.095 21.287V19.228C203.056 18.165 202.665 17.29 201.921 16.603C201.176 15.917 200.282 15.574 199.238 15.574C197.885 15.574 196.855 16.067 196.15 17.053C195.444 18.039 195.091 19.267 195.091 20.736C195.091 22.263 195.453 23.447 196.179 24.288C196.904 25.13 197.846 25.55 199.006 25.55C200.108 25.55 201.056 25.1 201.848 24.201C202.641 23.302 203.056 22.331 203.095 21.287ZM232.066 27H228.296L224.236 19.112H220.205V25.144H222.728V27H215.681V25.144H218.059V10.006H215.681V8.15H223.83C226.053 8.15 227.697 8.633 228.76 9.6C229.823 10.567 230.355 11.862 230.355 13.486C230.355 14.743 230.007 15.84 229.311 16.777C228.615 17.715 227.619 18.358 226.324 18.706L229.688 25.144H232.066V27ZM228.122 13.573C228.122 12.336 227.764 11.432 227.049 10.861C226.334 10.291 225.174 10.006 223.569 10.006H220.205V17.343H223.627C226.624 17.343 228.122 16.086 228.122 13.573ZM244.507 23.288C244.333 24.448 243.767 25.405 242.81 26.159C241.853 26.913 240.611 27.29 239.084 27.29C237.228 27.29 235.749 26.71 234.647 25.55C233.545 24.39 232.994 22.785 232.994 20.736C232.994 18.706 233.53 17.048 234.604 15.762C235.677 14.477 237.112 13.834 238.91 13.834C240.611 13.834 241.945 14.375 242.912 15.458C243.879 16.541 244.372 17.884 244.391 19.489C244.391 19.992 244.333 20.504 244.217 21.026H235.14C235.198 22.476 235.575 23.592 236.271 24.376C236.967 25.159 237.953 25.55 239.229 25.55C241.162 25.55 242.351 24.67 242.796 22.911L244.507 23.288ZM242.245 19.518C242.361 18.474 242.119 17.546 241.52 16.734C240.92 15.922 240.031 15.516 238.852 15.516C237.731 15.516 236.87 15.883 236.271 16.618C235.671 17.353 235.304 18.319 235.169 19.518H242.245ZM247.929 15.081C249.166 14.25 250.684 13.834 252.482 13.834C255.556 13.834 257.093 15.274 257.093 18.155V24.303C257.093 25.231 257.46 25.695 258.195 25.695C258.524 25.695 258.814 25.637 259.065 25.521L259.094 26.855C258.58 27.1428 258.001 27.2927 257.412 27.29C256.677 27.29 256.107 27.058 255.701 26.594C255.295 26.13 255.082 25.492 255.063 24.68V24.622C254.622 25.3918 254.006 26.0474 253.265 26.536C252.511 27.039 251.641 27.29 250.655 27.29C249.63 27.29 248.722 27 247.929 26.42C247.136 25.84 246.74 24.922 246.74 23.665C246.74 21.016 248.75 19.692 252.772 19.692C253.372 19.692 254.135 19.731 255.063 19.808V18.648C255.063 17.643 254.846 16.869 254.41 16.328C253.975 15.787 253.217 15.516 252.134 15.516C251.187 15.516 250.355 15.69 249.64 16.038L249.147 18.271L247.465 18.068L247.929 15.081ZM255.063 22.157V21.171C253.864 21.074 253.062 21.026 252.656 21.026C250.123 21.026 248.857 21.828 248.857 23.433C248.857 24.187 249.094 24.738 249.567 25.086C250.041 25.434 250.607 25.608 251.264 25.608C252.211 25.608 253.062 25.289 253.816 24.651C254.57 24.013 254.986 23.181 255.063 22.157ZM266.112 27H259.558V25.347H261.82V8.701H259.529V7.048H263.85V25.347H266.112V27ZM270.114 10.76V8.121H272.318V10.76H270.114ZM274.609 27H268.055V25.347H270.317V15.748H267.997V14.095H272.347V25.347H274.609V27ZM285.31 23.52C284.962 26.033 283.599 27.29 281.221 27.29C279.945 27.29 278.959 26.928 278.263 26.203C277.567 25.477 277.219 24.477 277.219 23.201V15.719H275.131V14.095H277.219V9.948H279.249V14.095H284.295V15.719H279.249V22.94C279.249 24.66 279.974 25.521 281.424 25.521C282.024 25.521 282.521 25.347 282.917 24.999C283.314 24.651 283.599 23.994 283.773 23.027L285.31 23.52ZM299.81 15.748H298.273L293.72 27L291.98 31.524H294.184V33.177H287.63V31.524H290.037L291.719 26.971L287.021 15.748H285.484V14.095H291.458V15.748H289.196L292.821 24.419H292.995L296.214 15.748H294.126V14.095H299.81V15.748Z" fill="white"/>
</svg></a>
</footer>
</body>
</html>