-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (70 loc) · 2.67 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
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400i,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./styles/reset.css" />
<link rel="stylesheet" href="./styles/main.css" />
<body>
<div id="main-container" hidden>
<div id="image-container">
<img id="img-top" src="./assets/images/KPMG_Splash_Top.png" />
<div id="image-buffer"></div>
<img id="img-bot" src="./assets/images/KPMG_Splash_Bot.png" />
</div>
<div id="text-container">
<h1 class="text">AR Activated Bottle</h1>
<p class="text">experience best enjoyed with sound</p>
</div>
<button id="continue" type="button">Continue</button>
<a href="/ar.html">
<button id="ex-one" type="button">Experience 1</button>
</a>
<a href="/videoAR.html">
<button id="ex-two" type="button">Experience 2</button>
</a>
<!-- <h2 class="text">Lay hangtag flat on front of bottle</h2>
<h2 class="text">Find the marker with your phone</h2> -->
<!-- <div id="background-container">
<img
id="img-mid"
src="./assets/images/KPMG_Splash_Mid.png"
width="100%"
/>
</div> -->
</div>
<div id="desktop">
<h3 class="text">Please come back on your mobile device!</h3>
</div>
</body>
<script>
var continueButton = document.getElementById('continue')
var beginOneButton = document.getElementById('ex-one')
var beginTwoButton = document.getElementById('ex-two')
var textContainer = document.getElementById('text-container')
var imageBuffer = document.getElementById('image-buffer')
var backgroundContainer = document.getElementById('background-container')
var mainContainer = document.getElementById('main-container')
var desktop = document.getElementById('desktop')
var width = document.body.clientWidth
var isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)
// if (!isMobile) {
// desktop.style.display = 'block'
// mainContainer.style.display = 'none'
// }
continueButton.onclick = function() {
continueButton.style.display = 'none'
beginOneButton.style.display = 'initial'
beginTwoButton.style.display = 'initial'
textContainer.style.bottom = '-100%'
imageBuffer.style.backgroundPosition = '100% 100%'
imageBuffer.style.marginBottom = '0px'
imageBuffer.style.minHeight = '45%'
// width >= 700
// ? (backgroundContainer.style.top = '-19%')
// : (backgroundContainer.style.top = '-24%')
}
</script>
</html>