forked from sketchfab/experiments
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (94 loc) · 3.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
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Annotations sync</title>
<link rel="stylesheet" type="text/css" href="../styles/sketchfab.css">
<link rel="stylesheet" type="text/css" href="style/app.css">
<style type="text/css">
body {
font-family: "Helvetica Neue";
font-weight: 200;
line-height: 1.5;
}
.slides {
position: absolute;
left: 61.8%;
top: 60px;
width: 38.2%;
height: calc(100% - 60px);
overflow: auto;
background: #ffffff;
}
.slide {
position: absolute;
box-sizing: border-box;
width: 100%;
padding: 30px;
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
text-align: center;
}
.slide.active {
opacity: 1;
}
</style>
</head>
<body>
<header class="header">
<h1 class="header--logo">
<a href="../">
<img src="../assets/sketchfab-logo.svg" alt="Sketchfab" width="120" class="header--image">
<span>Labs Experiments</span>
</a>
</h1>
</header>
<iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" width="640" height="480"></iframe>
<div class="slides">
<div id="annotation-0" class="slide active">
<img style="width: 100%; height: auto;" src="assets/00.jpg" alt="">
</div>
<div id="annotation-1" class="slide">
<img style="width: 100%; height: auto;" src="assets/01.jpg" alt="">
<p>
A touchscreen interface makes it easier to use features like X-Ray, Goodreads, built-in dictionary, highlighting, and more. And with a glare-free screen that looks like real paper, you can read as easily in bright sunlight as in your living room
</p>
</div>
<div id="annotation-2" class="slide">
<p>
Kindle does not require power to maintain a page of text, allowing you to read for weeks on a single charge.
</p>
<img style="width: 100%; height: auto;" src="assets/02.png" alt="">
</div>
<div id="annotation-3" class="slide">
<img src="assets/03.jpg" alt="" style="width: 100%; height: auto;">
</div>
<div id="annotation-4" class="slide">
<img src="assets/04.jpg" alt="" style="width: 100%; height: auto;">
<p>Kindle weighs only 6.7 ounces (191 grams)</p>
</div>
<div id="annotation-5" class="slide">
<img src="assets/05.jpg" alt="" style="width: 100%; height: auto;">
<p>Words looked up in the dictionary are automatically added to Vocabulary Builder to expand your knowledge and reinforce retention. Swipe through your vocabulary words, quiz yourself with flashcards, and instantly see those words in context.</p>
</div>
<div id="annotation-6" class="slide">
<img src="assets/06.png" alt="" style="width: 100%; height: auto;">
</div>
<div id="annotation-7" class="slide">
<img src="assets/06.png" alt="" style="width: 100%; height: auto;">
</div>
</div>
<script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.0.0.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-22680456-16', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>