-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
195 lines (180 loc) · 10.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
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Snowy Escape</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Escape to your own personal log cabin in the woods. Enjoy the ambient sounds of a roaring fireplace during a snowstorm.">
<meta property="og:locale" content="en_US"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="Escape to your own personal log cabin."/>
<meta property="og:description" content="Enjoy the ambient sounds of a roaring fireplace during a snowstorm while nestled inside of a cabin deep in the woods."/>
<meta property="og:url" content="http://snowyescape.com"/>
<meta property="og:site_name" content="snowyescape.com"/>
<meta property="og:image" content="http://snowyescape.com/assets/images/cabin-share.jpg"/>
<meta property="fb:app_id" content="525550130915463"/>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Snowy Escape">
<meta name="twitter:site" content="@snowyescape">
<meta name="twitter:creator" content="@heyfusco">
<meta name="twitter:description" content="Escape to your own personal log cabin in the woods. Enjoy the ambient sounds of a roaring fireplace during a snowstorm.">
<meta name="twitter:image" content="http://snowyescape.com/assets/images/cabin-share.jpg">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet' href='dist/style.min.css?ver=1.0.5' type='text/css' media='all'>
<style>
.social-share.sharer-0 label {
background-color: #111 !important;
border-radius: 4px !important;
color: #FDE3A7 !important;
opacity: 0.9 !important;
}
.social-share.sharer-0 label:hover{
color: #1abc9c !important;
}
</style>
</head>
<body>
<script>
//Workaround for Chrome's Stupid autoplay rules
//https://stackoverflow.com/questions/51589420/how-to-make-audio-autoplay-works-in-google-chrome
document.addEventListener('click', function(){
var snowAudio = document.getElementById("snowAudio");
var windAudio = document.getElementById("windAudio");
snowAudio.play();
windAudio.play();
});
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '525550130915463',
xfbml : true
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
<div id="loading">
<div>
<h1 class="loader-title">Loading...</h1>
<svg id="snowflakeloader" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="50" height="50" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><path d="M44 24.6l-1.2-2c-0.1-0.2-0.4-0.4-0.6-0.4l-2.4 0c-0.3 0-0.5 0.1-0.6 0.4l-1 1.7H33.9l3.8-3.8c0.3-0.3 0.3-0.8 0-1.1s-0.8-0.3-1.1 0l-4.8 4.8h-0.1c-0.2-1.9-1.2-3.6-2.7-4.7l0-0.1 6.6-1.8c0.4-0.1 0.6-0.5 0.5-0.9 -0.1-0.4-0.5-0.6-0.9-0.5l-5.1 1.4 2.1-3.7h0.7l0.1 0c0 0 0 0 0 0l1.1 0c0.3 0 0.5-0.1 0.6-0.4l1.2-2c0.1-0.2 0.1-0.5 0-0.7L34.8 8.7c-0.1-0.2-0.4-0.4-0.6-0.4h-2.4c-0.3 0-0.5 0.1-0.6 0.4l-1.2 2c-0.1 0.2-0.1 0.5 0 0.8l1 1.7 -2.1 3.7 -1.4-5.1c-0.1-0.4-0.5-0.6-0.9-0.5 -0.4 0.1-0.6 0.5-0.5 0.9l1.8 6.6 0 0.1c-0.8-0.4-1.7-0.6-2.7-0.6s-1.9 0.2-2.7 0.6l0-0.1 1.8-6.6c0.1-0.4-0.1-0.8-0.5-0.9 -0.4-0.1-0.8 0.1-0.9 0.5l-1.4 5.1 -2.1-3.7 1-1.7c0.1-0.2 0.1-0.5 0-0.7L18.8 8.7c-0.1-0.2-0.4-0.4-0.6-0.4l-2.4 0c-0.3 0-0.5 0.1-0.6 0.4l-1.2 2c-0.1 0.2-0.1 0.5 0 0.7l1.2 2c0.1 0.2 0.4 0.4 0.6 0.4h1.1c0 0 0 0 0 0h0.8l2.1 3.7 -5.1-1.4c-0.4-0.1-0.8 0.1-0.9 0.5 -0.1 0.4 0.1 0.8 0.5 0.9l6.6 1.8 0 0.1c-1.5 1.1-2.5 2.8-2.7 4.7h-0.1l-4.8-4.8c-0.3-0.3-0.8-0.3-1.1 0s-0.3 0.8 0 1.1l3.8 3.8h-4.3l-1-1.7c-0.1-0.2-0.4-0.4-0.6-0.4H7.8c-0.3 0-0.5 0.1-0.6 0.4l-1.2 2c-0.1 0.2-0.1 0.5 0 0.8l1.2 2c0.1 0.2 0.4 0.4 0.6 0.4l1.2 0c0 0 0 0 0 0l1.1 0c0.3 0 0.5-0.1 0.6-0.4l1-1.7h4.3l-3.8 3.8c-0.3 0.3-0.3 0.8 0 1.1 0.1 0.1 0.3 0.2 0.5 0.2 0.2 0 0.4-0.1 0.5-0.2l4.8-4.8h0.1c0.2 1.9 1.2 3.6 2.7 4.7l0 0.1 -6.6 1.8c-0.4 0.1-0.6 0.5-0.5 0.9 0.1 0.4 0.5 0.6 0.9 0.5l5.1-1.4 -2.1 3.7h-0.8l-1.1 0c-0.3 0-0.5 0.1-0.6 0.4l-1.2 2c-0.1 0.2-0.1 0.5 0 0.8l1.2 2c0.1 0.2 0.4 0.4 0.6 0.4h1.2c0 0 0 0 0 0h1.1c0.3 0 0.5-0.1 0.6-0.4l1.2-2c0.1-0.2 0.1-0.5 0-0.7l-1-1.7 2.1-3.7 1.4 5.1c0.1 0.3 0.4 0.6 0.7 0.6 0.1 0 0.1 0 0.2 0 0.4-0.1 0.6-0.5 0.5-0.9l-1.8-6.6 0-0.1c0.8 0.4 1.7 0.6 2.7 0.6 1 0 1.9-0.2 2.7-0.6l0 0.1 -1.8 6.6c-0.1 0.4 0.1 0.8 0.5 0.9 0.1 0 0.1 0 0.2 0 0.3 0 0.6-0.2 0.7-0.6l1.4-5.1 2.1 3.7 -1 1.7c-0.1 0.2-0.1 0.5 0 0.8l1.2 2c0.1 0.2 0.4 0.4 0.6 0.4h1.1c0 0 0 0 0 0h1.2c0.3 0 0.5-0.1 0.6-0.4l1.2-2c0.1-0.2 0.1-0.5 0-0.7l-1.2-2c-0.1-0.2-0.4-0.4-0.6-0.4l-1.9 0 -2.1-3.7 5.1 1.4c0.4 0.1 0.8-0.1 0.9-0.5 0.1-0.4-0.1-0.8-0.5-0.9l-6.6-1.8 0-0.1c1.5-1.1 2.5-2.8 2.7-4.7h0.1l4.8 4.8c0.1 0.1 0.3 0.2 0.5 0.2 0.2 0 0.4-0.1 0.5-0.2 0.3-0.3 0.3-0.8 0-1.1l-3.8-3.8H38.2l1 1.7c0.1 0.2 0.4 0.4 0.6 0.4l2.4 0c0.3 0 0.5-0.1 0.6-0.4l1.2-2C44.1 25.1 44.1 24.9 44 24.6zM31.5 11.1l0.7-1.3h0.6l0.9 0 0.4 0.8 0.3 0.5 -0.7 1.3h-0.6 0l-0.2 0 -0.7 0 -0.4-0.7L31.5 11.1zM16.3 12.4l-0.7-1.3 0.3-0.5 0.4-0.7 0.8 0h0l0.6 0 0.7 1.3 -0.3 0.5 -0.4 0.8h-0.9L16.3 12.4zM10.5 25l-0.4 0.8 -0.3 0.5H8.3L7.9 25.8l-0.4-0.8 0.4-0.7 0.3-0.5h1.5l0.3 0.5L10.5 25zM18.5 38.9l-0.7 1.3h-0.6 -0.9l-0.4-0.7 -0.3-0.5 0.7-1.3h0.6 0.9l0.4 0.8L18.5 38.9zM33.7 37.6l0.7 1.3 -0.3 0.5 -0.4 0.8 -0.8 0H32.9l-0.6 0 -0.7-1.3 0.3-0.5 0.4-0.7h0.9L33.7 37.6zM30.3 25c0 0.3 0 0.5-0.1 0.8 -0.2 1.4-0.9 2.5-1.9 3.4 -0.4 0.3-0.8 0.6-1.3 0.8 -0.6 0.2-1.3 0.4-1.9 0.4 -0.7 0-1.3-0.1-1.9-0.4 -0.5-0.2-0.9-0.5-1.3-0.8 -1-0.8-1.7-2-1.9-3.4 0-0.2-0.1-0.5-0.1-0.7s0-0.5 0.1-0.7c0.2-1.4 0.9-2.5 1.9-3.4 0.4-0.3 0.8-0.6 1.3-0.8 0.6-0.2 1.3-0.4 1.9-0.4 0.7 0 1.3 0.1 1.9 0.4 0.5 0.2 0.9 0.5 1.3 0.8 1 0.8 1.7 2 1.9 3.4C30.2 24.5 30.3 24.7 30.3 25zM41.7 26.3l-1.5 0 -0.3-0.5L39.5 25l0.4-0.7 0.3-0.5 1.5 0 0.3 0.5L42.5 25l-0.4 0.8L41.7 26.3z"/></svg>
</div>
</div>
<input type="checkbox" id="trigger-menu">
<label id="btn-menu" for="trigger-menu" class="btn"><i class="fa fa-gear"></i></label>
<button class="btn" type="button" id="fullscreen"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
<div class="controls">
<!-- snow volume controls -->
<p class="controls__title">Snow Volume</p>
<a class="btn volume volume-down-wind"><i class="fa fa-minus"></i></a>
<div class="value-wind val">15</div>
<a class="btn volume volume-up-wind"><i class="fa fa-plus"></i></a>
<!-- fire volume controls -->
<p class="controls__title">Fire Volume</p>
<a class="btn volume volume-down-fire"><i class="fa fa-minus"></i></a>
<div class="value-fire val">75</div>
<a class="btn volume volume-up-fire"><i class="fa fa-plus"></i></a>
<div class="split"></div>
<!-- mute controls -->
<a class="btn mute"><i class="fa fa-volume-up"></i></a>
<div class="split"></div>
<!-- hide / show text controls -->
<a class="btn hide-text">Hide Text</a>
<div class="split"></div>
<!-- control keyboard shortcut -->
<div class="shortcuts">
<p class="shortcut"><span>M</span> menu</p>
<p class="shortcut"><span>H</span> hide text</p>
<p class="shortcut"><span>G</span> grayscale</p>
<p class="shortcut"><span>SPACEBAR</span> mute</p>
</div>
<div class="credit">
<p>Developed by<br><a href="http://jamespistell.com" target="_blank" class="safaritest">James Pistell</a> &<a href="http://josephfus.co/?ref=snowyescape.com" target="_blank" class="safaritest"> Joseph Fusco</a>.<br>Photo Credit to <a href="http://www.brushcreekranch.com/?ref=snowyescape.com" target="_blank">Brush Creek Ranch</a><p>
</div>
</div>
<div class="page">
<div class="title-wrap">
<h1 class="title">Snowy Escape</h1>
</div>
<video class="snow" id="snow" autoplay muted loop>
<source src="assets/video/snow.mp4" type="video/mp4">
<source src="assets/video/snow.ogv" type="video/ogg">
</video>
<video class="fire" autoplay muted loop>
<source src="assets/video/fire.mp4" type="video/mp4">
<source src="assets/video/fire.ogv" type="video/ogg">
</video>
<audio class="audio audio-wind" loop id="windAudio">
<source src="assets/audio/snow.ogg" type="audio/ogg">
<source src="assets/audio/snow.m4a" type="audio/mpeg">
</audio>
<audio class="audio audio-fire" loop id="snowAudio">
<source src="assets/audio/fire.ogg" type="audio/ogg">
<source src="assets/audio/fire.m4a" type="audio/mpeg">
</audio>
<a class="mobile-play"><i class="fa fa-play"></i></a>
<audio id="audio-mobile" class="audio audio-mobile" loop>
<source src="assets/audio/snowyescape.com-layered-audio.m4a" type="audio/mpeg">
</audio>
<img class="img-main" src="assets/images/cabin-bg.png" id='img-main-bg' alt="">
<div class="candle candle__1"></div>
<div class="candle candle__2"></div>
<div class="candle candle__3"></div>
<div class="candle candle__4"></div>
<div class="candle candle__5"></div>
<div class="candle candle__6"></div>
<div class="candle candle__7"></div>
<div class="social-share"></div>
</div><!-- page -->
<script type="text/javascript" src="dist/main.min.js?ver=1.0.5"></script>
<script type="text/javascript">
// new Share('.social-share', {
// title: "SnowyEscape.com",
// description: "Escape to your own personal winter wonderland with fireplace and snowstorm ambient music.",
// image: 'http://snowyescape.github.io/snowyescape/assets/images/cabin-share.jpg',
// url: 'http://SnowyEscape.com',
// ui: {
// flyout: "top center"
// },
// networks: {
// facebook: {
// load_sdk: true,
// app_id: "525550130915463",
// caption: "A monastic meditative experience.",
// },
// pinterest: {
// enabled: true,
// }
// }
// });
</script>
<script>
(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-57526024-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>