-
Notifications
You must be signed in to change notification settings - Fork 0
/
chemistry-vr-photos.html
170 lines (158 loc) · 7.91 KB
/
chemistry-vr-photos.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
<!DOCTYPE html>
<html>
<head>
<title>Chemistry VR Photos - PicoPlanet Developing</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/images/icons/favicon.ico" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Uses a transparent header that draws on top of the layout's background -->
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="PicoPlanet Developing Chemistry VR Photos" />
<meta name="keywords"
content="PicoPlanet, PicoPlanetDev, App, Apps, VR Playground, Rabbit Dash, Chemistry VR Photos, Development, Dev, Android, Website, Play Store, Games, VR, Unity" />
<style type="text/css">
.mdl-layout__content .heading-div .heading {
background-image: url('/images/chemistry-vr-photos/PANO_1_WEB.jpg');
}
</style>
<script>
$(function () {
$('.mdl-collapse__content').each(function () {
var content = $(this);
content.css('margin-top', -content.height());
})
$(document.body).on('click', '.mdl-collapse__button', function () {
$(this).parent('.mdl-collapse').toggleClass('mdl-collapse--opened');
})
})
</script>
<script type="text/javascript">
var addthis_config = addthis_config || {};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>
</head>
<body>
<!-- Nav layout with menu -->
<div class="layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--fixed">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">PicoPlanet Developing</span>
</div>
</header>
<!-- navigation drawer -->
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"><a href="index.html"><img
src="/images/icons/planet-clip-art-planet-64-clear.png" alt="logo" height="42"
width="42"></a></span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="index.html">Home</a>
<div class="mdl-collapse">
<a class="mdl-navigation__link mdl-collapse__button">
<i class="material-icons mdl-collapse__icon mdl-animation--default">expand_more</i>
Apps
</a>
<div class="mdl-collapse__content-wrapper">
<div class="mdl-collapse__content mdl-animation--default">
<a class="mdl-navigation__link" href="apps.html">Apps</a>
<a class="mdl-navigation__link" href="files.html">Files</a>
<a class="mdl-navigation__link" href="vr-drum-kit.html">VR Drum Kit</a>
<a class="mdl-navigation__link" href="farm-game.html">Crop Craze</a>
<a class="mdl-navigation__link" href="vr-playground.html">VR Playground</a>
<a class="mdl-navigation__link" href="rabbit-dash.html">Rabbit Dash</a>
<a class="mdl-navigation__link" href="chemistry-vr-photos.html">Chemistry VR Photos</a>
<a class="mdl-navigation__link" href="trailblazer-vr.html">Trailblazer VR</a>
<a class="mdl-navigation__link" href="puzzle-vr.html">Puzzle VR</a>
</div>
</div>
</div>
<a class="mdl-navigation__link" href="about.html">About Me</a>
<a class="mdl-navigation__link" href="social.html">Social</a>
<a class="mdl-navigation__link" href="contact.html">Contact Me</a>
</nav>
</div>
<!-- page content -->
<main class="mdl-layout__content">
<!-- heading -->
<div class="heading-div">
<h1 class="heading">Chemistry VR Photos</h1>
</div>
<img src="/images/icons/chem-icon.png" alt="chem-icon" width="10%" style="float: right;">
<!-- paragraph -->
<p class="emphasis-2-paragraph">
Chemistry VR Photos is an app to celebrate Mr. Kernion's retirement. A huge thank-you is due to everyone
who signed the VR viewer and a friend who beta tested the web version below.
<br>
If you have an <b>Android device and VR Viewer</b>, please head to the <a href="files.html"
style="color: black;">Files</a> page, scroll down and click the Chemistry VR Photos tab, and install
it using Package Installer.
<br>
<strong>If you don't</strong> have an Android device or a VR viewer, please scroll down for the
<strong>web version</strong>. This is intended to run on any modern PC, laptop, or Mac with the latest
version of Google Chrome, Mozilla Firefox, or Safari. The instructions for the web version are listed
below the game.
<br>
If any questions arise, please contact me at <a href="mailto:picoplanetdev@gmail.com"
style="color: black;">picoplanetdev@gmail.com</a>.
</p>
<iframe
src="https://c.simmer.io/static/unityFrame/index.html?url=https%3A%2F%2Fsimmercdn.com%2Funity%2FJlJvMznBLSPQPtVRbENSdEnGsAF3%2Fcontent%2F58f9546f-cf78-5011-9557-3ea5af44c611&imagePath=screens/5.png"
style="width:100%;height:100%;border:0">
</iframe>
<p class="paragraph">
<strong>How to play:</strong>
<ul class="bulleted-list">
<li>Click and drag to look around. If you are using a laptop with no mouse, hold the primary button
(normally the left) and drag your finger.</li>
<li>Click on a glowing photo sphere to enter it.</li>
<ul class="bulleted-list">
<li>When inside a photo sphere, click on the blue Erlenmeyer flask to move to the other photo
sphere.</li>
<li>When inside a photo sphere, look down and click on the home button to leave the photo sphere.
</li>
</ul>
<li>To play this in full screen, click the play button and hover your mouse near the bottom-middle of
the page and click on the fullscreen icon that will appear.</li>
</ul>
</p>
<p class="paragraph">
<b>Note:</b> Make sure that you have <b>a strong internet connection</b> and aren't on a filtered
network, e.g. a school or work network (This is because the website game host's domain ends in .io and
many network filters will block it). A good network would be a library or home network.</p>
</p>
<p class="emphasis-2-paragraph" style="margin-bottom: 0">
To view some of the photos that I used in this app and a few others, please scroll down! If you want to
enlarge a photo below, click on it!
</p>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col"><a href="/images/chemistry-vr-photos/PANO_1_WEB.jpg"
target="_blank"><img src="/images/chemistry-vr-photos/PANO_1_WEB.jpg" alt="PANO_1" width="100%"
height="100%"></a></div>
<div class="mdl-cell mdl-cell--6-col"><a href="/images/chemistry-vr-photos/PANO_2_WEB.jpg"
target="_blank"><img src="/images/chemistry-vr-photos/PANO_2_WEB.jpg" alt="PANO_2" width="100%"
height="100%"></a></div>
<div class="mdl-cell mdl-cell--6-col"><a href="/images/chemistry-vr-photos/PANO_3_WEB.jpg"
target="_blank"><img src="/images/chemistry-vr-photos/PANO_3_WEB.jpg" alt="PANO_3" width="100%"
height="100%"></a></div>
<div class="mdl-cell mdl-cell--6-col"><a href="/images/chemistry-vr-photos/period82018.jpg"
target="_blank"><img src="/images/chemistry-vr-photos/period82018.jpg" alt="Period 8 2018"
width="100%" height="100%"></a></div>
</div>
<!-- share -->
<hr>
<p class="paragraph">
Share this page via
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_inline_share_toolbox" data-url="picoplanetdev.tk/chemistry-vr-photos"
data-title="Chemistry VR Photos - PicoPlanet Developing" style="padding-left: 1%"></div>
</p>
</main>
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5cd8613086e226db"></script>
</body>
</html>