├── LICENSE
├── README.md
├── app
    ├── css
    │   ├── normalize.css
    │   └── styles.css
    ├── images
    │   ├── beach.png
    │   ├── bird.png
    │   ├── brownnoise.png
    │   ├── catpurr.png
    │   ├── drop.png
    │   ├── favicon.png
    │   ├── fire.png
    │   ├── forest.png
    │   ├── leaves.png
    │   ├── pinknoise.png
    │   ├── rain.png
    │   ├── river.png
    │   ├── sheep.png
    │   ├── socialpreview.png
    │   ├── thunder.png
    │   └── windchimes.png
    ├── index.html
    ├── js
    │   └── main.js
    ├── scss
    │   ├── _loader.scss
    │   ├── _mixins.scss
    │   ├── _slider.scss
    │   ├── _variables.scss
    │   └── styles.scss
    └── sounds
    │   ├── beach.mp3
    │   ├── beach.ogg
    │   ├── birds.mp3
    │   ├── birds.ogg
    │   ├── brownnoise.mp3
    │   ├── brownnoise.ogg
    │   ├── cat_purr.mp3
    │   ├── cat_purr.ogg
    │   ├── drops.mp3
    │   ├── drops.ogg
    │   ├── fire.mp3
    │   ├── fire.ogg
    │   ├── forest.mp3
    │   ├── forest.ogg
    │   ├── leaves.mp3
    │   ├── leaves.ogg
    │   ├── pinknoise.mp3
    │   ├── pinknoise.ogg
    │   ├── rain.mp3
    │   ├── rain.ogg
    │   ├── river.mp3
    │   ├── river.ogg
    │   ├── sheep.mp3
    │   ├── sheep.ogg
    │   ├── thunder.mp3
    │   ├── thunder.ogg
    │   ├── windchimes.mp3
    │   └── windchimes.ogg
├── gulpfile.js
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Stefan Petrovic
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Chill n' Sound
 2 | <a href="http://chillnsound.petrovicstefan.rs/">Check Out Chill N' Sound</a>
 3 | 
 4 | Relax with the sounds of nature!  Play and Mix Ambient sounds to boost concentration and productivity.
 5 | 
 6 | Chill n' Sound is written entirely in Vanilla JS, it is a clone of websites like Noisli or A soft murmur. 
 7 | You are free to fork or clone the project and create something with it. If you do make something let me know! I would like to check it out.
 8 | 
 9 | ## Chrome Extension
10 | 
11 | You can checkout Chrome Extension for Chill N Sound <a href="https://github.com/petrovicstefanrs/chillnsound_chrome_extension" target="_blank">here</a>.
12 |   - Chrome Extension is still in beta and will probably stay that way some time as I can't find the time to work on it anymore, but you are more than welcome to contribute to the project!
13 |   
14 | ## Install
15 | 
16 | 1. Clone or download the repository
17 | 2. Run npm install
18 | 3. Run gulp default (To enter development mode)
19 | 4. Run gulp build (To build distribution version of the project) 
20 | 5. Enjoy!
21 | 


--------------------------------------------------------------------------------
/app/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | html {
 13 |   line-height: 1.15; /* 1 */
 14 |   -ms-text-size-adjust: 100%; /* 2 */
 15 |   -webkit-text-size-adjust: 100%; /* 2 */
 16 | }
 17 | 
 18 | /* Sections
 19 |    ========================================================================== */
 20 | 
 21 | /**
 22 |  * Remove the margin in all browsers (opinionated).
 23 |  */
 24 | 
 25 | body {
 26 |   margin: 0;
 27 | }
 28 | 
 29 | /**
 30 |  * Add the correct display in IE 9-.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | footer,
 36 | header,
 37 | nav,
 38 | section {
 39 |   display: block;
 40 | }
 41 | 
 42 | /**
 43 |  * Correct the font size and margin on `h1` elements within `section` and
 44 |  * `article` contexts in Chrome, Firefox, and Safari.
 45 |  */
 46 | 
 47 | h1 {
 48 |   font-size: 2em;
 49 |   margin: 0.67em 0;
 50 | }
 51 | 
 52 | /* Grouping content
 53 |    ========================================================================== */
 54 | 
 55 | /**
 56 |  * Add the correct display in IE 9-.
 57 |  * 1. Add the correct display in IE.
 58 |  */
 59 | 
 60 | figcaption,
 61 | figure,
 62 | main { /* 1 */
 63 |   display: block;
 64 | }
 65 | 
 66 | /**
 67 |  * Add the correct margin in IE 8.
 68 |  */
 69 | 
 70 | figure {
 71 |   margin: 1em 40px;
 72 | }
 73 | 
 74 | /**
 75 |  * 1. Add the correct box sizing in Firefox.
 76 |  * 2. Show the overflow in Edge and IE.
 77 |  */
 78 | 
 79 | hr {
 80 |   box-sizing: content-box; /* 1 */
 81 |   height: 0; /* 1 */
 82 |   overflow: visible; /* 2 */
 83 | }
 84 | 
 85 | /**
 86 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 87 |  * 2. Correct the odd `em` font sizing in all browsers.
 88 |  */
 89 | 
 90 | pre {
 91 |   font-family: monospace, monospace; /* 1 */
 92 |   font-size: 1em; /* 2 */
 93 | }
 94 | 
 95 | /* Text-level semantics
 96 |    ========================================================================== */
 97 | 
 98 | /**
 99 |  * 1. Remove the gray background on active links in IE 10.
100 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
101 |  */
102 | 
103 | a {
104 |   background-color: transparent; /* 1 */
105 |   -webkit-text-decoration-skip: objects; /* 2 */
106 | }
107 | 
108 | /**
109 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
110 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
111 |  */
112 | 
113 | abbr[title] {
114 |   border-bottom: none; /* 1 */
115 |   text-decoration: underline; /* 2 */
116 |   text-decoration: underline dotted; /* 2 */
117 | }
118 | 
119 | /**
120 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
121 |  */
122 | 
123 | b,
124 | strong {
125 |   font-weight: inherit;
126 | }
127 | 
128 | /**
129 |  * Add the correct font weight in Chrome, Edge, and Safari.
130 |  */
131 | 
132 | b,
133 | strong {
134 |   font-weight: bolder;
135 | }
136 | 
137 | /**
138 |  * 1. Correct the inheritance and scaling of font size in all browsers.
139 |  * 2. Correct the odd `em` font sizing in all browsers.
140 |  */
141 | 
142 | code,
143 | kbd,
144 | samp {
145 |   font-family: monospace, monospace; /* 1 */
146 |   font-size: 1em; /* 2 */
147 | }
148 | 
149 | /**
150 |  * Add the correct font style in Android 4.3-.
151 |  */
152 | 
153 | dfn {
154 |   font-style: italic;
155 | }
156 | 
157 | /**
158 |  * Add the correct background and color in IE 9-.
159 |  */
160 | 
161 | mark {
162 |   background-color: #ff0;
163 |   color: #000;
164 | }
165 | 
166 | /**
167 |  * Add the correct font size in all browsers.
168 |  */
169 | 
170 | small {
171 |   font-size: 80%;
172 | }
173 | 
174 | /**
175 |  * Prevent `sub` and `sup` elements from affecting the line height in
176 |  * all browsers.
177 |  */
178 | 
179 | sub,
180 | sup {
181 |   font-size: 75%;
182 |   line-height: 0;
183 |   position: relative;
184 |   vertical-align: baseline;
185 | }
186 | 
187 | sub {
188 |   bottom: -0.25em;
189 | }
190 | 
191 | sup {
192 |   top: -0.5em;
193 | }
194 | 
195 | /* Embedded content
196 |    ========================================================================== */
197 | 
198 | /**
199 |  * Add the correct display in IE 9-.
200 |  */
201 | 
202 | audio,
203 | video {
204 |   display: inline-block;
205 | }
206 | 
207 | /**
208 |  * Add the correct display in iOS 4-7.
209 |  */
210 | 
211 | audio:not([controls]) {
212 |   display: none;
213 |   height: 0;
214 | }
215 | 
216 | /**
217 |  * Remove the border on images inside links in IE 10-.
218 |  */
219 | 
220 | img {
221 |   border-style: none;
222 | }
223 | 
224 | /**
225 |  * Hide the overflow in IE.
226 |  */
227 | 
228 | svg:not(:root) {
229 |   overflow: hidden;
230 | }
231 | 
232 | /* Forms
233 |    ========================================================================== */
234 | 
235 | /**
236 |  * 1. Change the font styles in all browsers (opinionated).
237 |  * 2. Remove the margin in Firefox and Safari.
238 |  */
239 | 
240 | button,
241 | input,
242 | optgroup,
243 | select,
244 | textarea {
245 |   font-family: sans-serif; /* 1 */
246 |   font-size: 100%; /* 1 */
247 |   line-height: 1.15; /* 1 */
248 |   margin: 0; /* 2 */
249 | }
250 | 
251 | /**
252 |  * Show the overflow in IE.
253 |  * 1. Show the overflow in Edge.
254 |  */
255 | 
256 | button,
257 | input { /* 1 */
258 |   overflow: visible;
259 | }
260 | 
261 | /**
262 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
263 |  * 1. Remove the inheritance of text transform in Firefox.
264 |  */
265 | 
266 | button,
267 | select { /* 1 */
268 |   text-transform: none;
269 | }
270 | 
271 | /**
272 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
273 |  *    controls in Android 4.
274 |  * 2. Correct the inability to style clickable types in iOS and Safari.
275 |  */
276 | 
277 | button,
278 | html [type="button"], /* 1 */
279 | [type="reset"],
280 | [type="submit"] {
281 |   -webkit-appearance: button; /* 2 */
282 | }
283 | 
284 | /**
285 |  * Remove the inner border and padding in Firefox.
286 |  */
287 | 
288 | button::-moz-focus-inner,
289 | [type="button"]::-moz-focus-inner,
290 | [type="reset"]::-moz-focus-inner,
291 | [type="submit"]::-moz-focus-inner {
292 |   border-style: none;
293 |   padding: 0;
294 | }
295 | 
296 | /**
297 |  * Restore the focus styles unset by the previous rule.
298 |  */
299 | 
300 | button:-moz-focusring,
301 | [type="button"]:-moz-focusring,
302 | [type="reset"]:-moz-focusring,
303 | [type="submit"]:-moz-focusring {
304 |   outline: 1px dotted ButtonText;
305 | }
306 | 
307 | /**
308 |  * Correct the padding in Firefox.
309 |  */
310 | 
311 | fieldset {
312 |   padding: 0.35em 0.75em 0.625em;
313 | }
314 | 
315 | /**
316 |  * 1. Correct the text wrapping in Edge and IE.
317 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
318 |  * 3. Remove the padding so developers are not caught out when they zero out
319 |  *    `fieldset` elements in all browsers.
320 |  */
321 | 
322 | legend {
323 |   box-sizing: border-box; /* 1 */
324 |   color: inherit; /* 2 */
325 |   display: table; /* 1 */
326 |   max-width: 100%; /* 1 */
327 |   padding: 0; /* 3 */
328 |   white-space: normal; /* 1 */
329 | }
330 | 
331 | /**
332 |  * 1. Add the correct display in IE 9-.
333 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
334 |  */
335 | 
336 | progress {
337 |   display: inline-block; /* 1 */
338 |   vertical-align: baseline; /* 2 */
339 | }
340 | 
341 | /**
342 |  * Remove the default vertical scrollbar in IE.
343 |  */
344 | 
345 | textarea {
346 |   overflow: auto;
347 | }
348 | 
349 | /**
350 |  * 1. Add the correct box sizing in IE 10-.
351 |  * 2. Remove the padding in IE 10-.
352 |  */
353 | 
354 | [type="checkbox"],
355 | [type="radio"] {
356 |   box-sizing: border-box; /* 1 */
357 |   padding: 0; /* 2 */
358 | }
359 | 
360 | /**
361 |  * Correct the cursor style of increment and decrement buttons in Chrome.
362 |  */
363 | 
364 | [type="number"]::-webkit-inner-spin-button,
365 | [type="number"]::-webkit-outer-spin-button {
366 |   height: auto;
367 | }
368 | 
369 | /**
370 |  * 1. Correct the odd appearance in Chrome and Safari.
371 |  * 2. Correct the outline style in Safari.
372 |  */
373 | 
374 | [type="search"] {
375 |   -webkit-appearance: textfield; /* 1 */
376 |   outline-offset: -2px; /* 2 */
377 | }
378 | 
379 | /**
380 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
381 |  */
382 | 
383 | [type="search"]::-webkit-search-cancel-button,
384 | [type="search"]::-webkit-search-decoration {
385 |   -webkit-appearance: none;
386 | }
387 | 
388 | /**
389 |  * 1. Correct the inability to style clickable types in iOS and Safari.
390 |  * 2. Change font properties to `inherit` in Safari.
391 |  */
392 | 
393 | ::-webkit-file-upload-button {
394 |   -webkit-appearance: button; /* 1 */
395 |   font: inherit; /* 2 */
396 | }
397 | 
398 | /* Interactive
399 |    ========================================================================== */
400 | 
401 | /*
402 |  * Add the correct display in IE 9-.
403 |  * 1. Add the correct display in Edge, IE, and Firefox.
404 |  */
405 | 
406 | details, /* 1 */
407 | menu {
408 |   display: block;
409 | }
410 | 
411 | /*
412 |  * Add the correct display in all browsers.
413 |  */
414 | 
415 | summary {
416 |   display: list-item;
417 | }
418 | 
419 | /* Scripting
420 |    ========================================================================== */
421 | 
422 | /**
423 |  * Add the correct display in IE 9-.
424 |  */
425 | 
426 | canvas {
427 |   display: inline-block;
428 | }
429 | 
430 | /**
431 |  * Add the correct display in IE.
432 |  */
433 | 
434 | template {
435 |   display: none;
436 | }
437 | 
438 | /* Hidden
439 |    ========================================================================== */
440 | 
441 | /**
442 |  * Add the correct display in IE 10-.
443 |  */
444 | 
445 | [hidden] {
446 |   display: none;
447 | }


--------------------------------------------------------------------------------
/app/css/styles.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | /* Colors */
  3 | /* Misc */
  4 | /** 
  5 | * Make flexbox grids super easy!
  6 | * ---
  7 | * @param $cols  —  Number of columns
  8 | * @param $margin  —  Margin with unit
  9 | */
 10 | /* Fast way to center hor and vert */
 11 | /* Fast way to center hor and vert */
 12 | /* Media Queries */
 13 | @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,700");
 14 | input[type=range] {
 15 |   transition: opacity 2s;
 16 |   box-sizing: border-box;
 17 |   font-size: 1em;
 18 |   line-height: 0.5em;
 19 |   height: 0.5em;
 20 |   background-color: transparent;
 21 |   cursor: pointer;
 22 |   -webkit-appearance: none;
 23 |   width: 50%;
 24 |   max-width: 150px; }
 25 |   input[type=range]::-webkit-slider-thumb {
 26 |     -webkit-appearance: none; }
 27 |   input[type=range]:focus {
 28 |     outline: none; }
 29 |   input[type=range]::-ms-track {
 30 |     width: 50%;
 31 |     max-width: 200px;
 32 |     cursor: pointer;
 33 |     background: transparent;
 34 |     border-color: transparent;
 35 |     color: transparent; }
 36 |   input[type=range]::-webkit-slider-thumb {
 37 |     -webkit-appearance: none;
 38 |     width: 1em;
 39 |     height: 1em;
 40 |     margin-top: -4px;
 41 |     background-color: white;
 42 |     border-radius: 50%;
 43 |     border: 0 solid rgba(255, 255, 255, 0.5);
 44 |     cursor: pointer; }
 45 |   input[type=range]::-moz-range-thumb {
 46 |     width: 1em;
 47 |     height: 1em;
 48 |     margin-top: -4px;
 49 |     background-color: white;
 50 |     border-radius: 50%;
 51 |     border: 0 solid rgba(255, 255, 255, 0.5);
 52 |     cursor: pointer; }
 53 |   input[type=range]::-ms-thumb {
 54 |     width: 1em;
 55 |     height: 1em;
 56 |     margin-top: -4px;
 57 |     background-color: white;
 58 |     border-radius: 50%;
 59 |     border: 0 solid rgba(255, 255, 255, 0.5);
 60 |     cursor: pointer; }
 61 |   input[type=range]:hover::-webkit-slider-thumb {
 62 |     border-color: rgba(255, 255, 255, 0.7); }
 63 |   input[type=range]:hover::-moz-range-thumb {
 64 |     border-color: rgba(255, 255, 255, 0.7); }
 65 |   input[type=range]:hover::-ms-thumb {
 66 |     border-color: rgba(255, 255, 255, 0.7); }
 67 |   input[type=range]:active::-webkit-slider-thumb {
 68 |     border-color: white; }
 69 |   input[type=range]:active::-moz-range-thumb {
 70 |     border-color: white; }
 71 |   input[type=range]:active::-ms-thumb {
 72 |     border-color: white; }
 73 |   input[type=range]::-webkit-slider-runnable-track {
 74 |     width: 50%;
 75 |     max-width: 150px;
 76 |     cursor: pointer;
 77 |     height: 2px;
 78 |     border-bottom: 4px solid rgba(255, 255, 255, 0.5);
 79 |     background-color: transparent; }
 80 |   input[type=range]::-moz-range-track {
 81 |     width: 50%;
 82 |     max-width: 150px;
 83 |     cursor: pointer;
 84 |     height: 2px;
 85 |     border-bottom: 4px solid rgba(255, 255, 255, 0.5);
 86 |     background-color: transparent; }
 87 |   input[type=range]::-ms-track {
 88 |     background: transparent;
 89 |     border-color: transparent;
 90 |     color: transparent; }
 91 | 
 92 | .loader {
 93 |   position: relative;
 94 |   width: 65px;
 95 |   height: 100px; }
 96 |   .loader__bar {
 97 |     position: absolute;
 98 |     bottom: 0;
 99 |     width: 0.5em;
100 |     height: 50%;
101 |     background: #fff;
102 |     transform-origin: center bottom; }
103 |     .loader__bar:nth-child(1) {
104 |       left: 0px;
105 |       transform: scale(1, 0.2);
106 |       animation: barUp1 4s infinite; }
107 |     .loader__bar:nth-child(2) {
108 |       left: 15px;
109 |       transform: scale(1, 0.4);
110 |       animation: barUp2 4s infinite; }
111 |     .loader__bar:nth-child(3) {
112 |       left: 30px;
113 |       transform: scale(1, 0.6);
114 |       animation: barUp3 4s infinite; }
115 |     .loader__bar:nth-child(4) {
116 |       left: 45px;
117 |       transform: scale(1, 0.8);
118 |       animation: barUp4 4s infinite; }
119 |     .loader__bar:nth-child(5) {
120 |       left: 60px;
121 |       transform: scale(1, 1);
122 |       animation: barUp5 4s infinite; }
123 |   .loader__ball {
124 |     position: absolute;
125 |     bottom: 10px;
126 |     left: 0;
127 |     width: 0.5em;
128 |     height: 0.5em;
129 |     background: #fff;
130 |     border-radius: 50%;
131 |     animation: ball 4s infinite; }
132 | 
133 | @keyframes ball {
134 |   0% {
135 |     transform: translate(0, 0); }
136 |   5% {
137 |     transform: translate(8px, -14px); }
138 |   10% {
139 |     transform: translate(15px, -10px); }
140 |   17% {
141 |     transform: translate(23px, -24px); }
142 |   20% {
143 |     transform: translate(30px, -20px); }
144 |   27% {
145 |     transform: translate(38px, -34px); }
146 |   30% {
147 |     transform: translate(45px, -30px); }
148 |   37% {
149 |     transform: translate(53px, -44px); }
150 |   40% {
151 |     transform: translate(60px, -40px); }
152 |   50% {
153 |     transform: translate(60px, 0); }
154 |   57% {
155 |     transform: translate(53px, -14px); }
156 |   60% {
157 |     transform: translate(45px, -10px); }
158 |   67% {
159 |     transform: translate(37px, -24px); }
160 |   70% {
161 |     transform: translate(30px, -20px); }
162 |   77% {
163 |     transform: translate(22px, -34px); }
164 |   80% {
165 |     transform: translate(15px, -30px); }
166 |   87% {
167 |     transform: translate(7px, -44px); }
168 |   90% {
169 |     transform: translate(0, -40px); }
170 |   100% {
171 |     transform: translate(0, 0); } }
172 | 
173 | @keyframes barUp1 {
174 |   0% {
175 |     transform: scale(1, 0.2); }
176 |   40% {
177 |     transform: scale(1, 0.2); }
178 |   50% {
179 |     transform: scale(1, 1); }
180 |   90% {
181 |     transform: scale(1, 1); }
182 |   100% {
183 |     transform: scale(1, 0.2); } }
184 | 
185 | @keyframes barUp2 {
186 |   0% {
187 |     transform: scale(1, 0.4); }
188 |   40% {
189 |     transform: scale(1, 0.4); }
190 |   50% {
191 |     transform: scale(1, 0.8); }
192 |   90% {
193 |     transform: scale(1, 0.8); }
194 |   100% {
195 |     transform: scale(1, 0.4); } }
196 | 
197 | @keyframes barUp3 {
198 |   0% {
199 |     transform: scale(1, 0.6); }
200 |   100% {
201 |     transform: scale(1, 0.6); } }
202 | 
203 | @keyframes barUp4 {
204 |   0% {
205 |     transform: scale(1, 0.8); }
206 |   40% {
207 |     transform: scale(1, 0.8); }
208 |   50% {
209 |     transform: scale(1, 0.4); }
210 |   90% {
211 |     transform: scale(1, 0.4); }
212 |   100% {
213 |     transform: scale(1, 0.8); } }
214 | 
215 | @keyframes barUp5 {
216 |   0% {
217 |     transform: scale(1, 1); }
218 |   40% {
219 |     transform: scale(1, 1); }
220 |   50% {
221 |     transform: scale(1, 0.2); }
222 |   90% {
223 |     transform: scale(1, 0.2); }
224 |   100% {
225 |     transform: scale(1, 1); } }
226 | 
227 | body {
228 |   font-size: 12px;
229 |   overflow: auto;
230 |   font-family: 'Roboto', sans-serif;
231 |   min-height: 100vh;
232 |   background: #f2994a;
233 |   /* fallback for old browsers */
234 |   background: -webkit-linear-gradient(to top, #f2c94c, #f2994a);
235 |   /* Chrome 10-25, Safari 5.1-6 */
236 |   background: linear-gradient(to top, #f2c94c, #f2994a);
237 |   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
238 | 
239 | #load_screen {
240 |   transition: opacity 1s;
241 |   position: fixed;
242 |   z-index: 999;
243 |   color: #ffffff;
244 |   font-weight: 700;
245 |   font-size: 1em;
246 |   top: 0;
247 |   left: 0;
248 |   width: 100%;
249 |   height: 100vh;
250 |   background: #f2994a;
251 |   /* fallback for old browsers */
252 |   background: -webkit-linear-gradient(to top, #f2c94c, #f2994a);
253 |   /* Chrome 10-25, Safari 5.1-6 */
254 |   background: linear-gradient(to top, #f2c94c, #f2994a);
255 |   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
256 |   #load_screen .loader_wrap {
257 |     text-align: center;
258 |     position: absolute;
259 |     top: 50%;
260 |     left: 50%;
261 |     transform: translateX(-50%) translatey(-50%); }
262 |     #load_screen .loader_wrap .loader {
263 |       margin: 0 auto;
264 |       margin-bottom: 2em; }
265 |     #load_screen .loader_wrap .load_bar {
266 |       overflow: hidden;
267 |       background: rgba(255, 255, 255, 0.3);
268 |       height: 0.5em;
269 |       border-radius: 1em;
270 |       margin-bottom: 1em;
271 |       width: 200px; }
272 |       #load_screen .loader_wrap .load_bar .load_fill {
273 |         background: #ffffff;
274 |         height: 100%;
275 |         width: 0%;
276 |         transition: all 0.2s; }
277 | 
278 | .header {
279 |   width: 100%;
280 |   height: 100px;
281 |   color: white;
282 |   display: flex;
283 |   justify-content: center;
284 |   align-items: center;
285 |   text-align: center; }
286 | 
287 | .sounds_container {
288 |   margin: 0 auto;
289 |   padding: 250px 1em 0 1em;
290 |   max-width: 1024px; }
291 |   @media screen and (min-width: 600px) and (max-width: 799px) {
292 |     .sounds_container {
293 |       display: flex;
294 |       flex-wrap: wrap;
295 |       justify-content: space-between; }
296 |       .sounds_container:after {
297 |         flex: auto;
298 |         margin: 0 auto;
299 |         content: ""; }
300 |       .sounds_container > * {
301 |         width: calc( 50% - 0.5em);
302 |         margin-left: 0.5em;
303 |         margin-right: 0.5em; }
304 |         .sounds_container > *:nth-child(1) {
305 |           margin-left: 0; }
306 |         .sounds_container > *:nth-child(2n) {
307 |           margin-right: 0; }
308 |         .sounds_container > *:nth-child(2n + 1) {
309 |           margin-left: 0; } }
310 |   @media screen and (min-width: 800px) and (max-width: 999px) {
311 |     .sounds_container {
312 |       display: flex;
313 |       flex-wrap: wrap;
314 |       justify-content: space-between; }
315 |       .sounds_container:after {
316 |         flex: auto;
317 |         margin: 0 auto;
318 |         content: ""; }
319 |       .sounds_container > * {
320 |         width: calc( 50% - 0.5em);
321 |         margin-left: 0.5em;
322 |         margin-right: 0.5em; }
323 |         .sounds_container > *:nth-child(1) {
324 |           margin-left: 0; }
325 |         .sounds_container > *:nth-child(2n) {
326 |           margin-right: 0; }
327 |         .sounds_container > *:nth-child(2n + 1) {
328 |           margin-left: 0; } }
329 |   @media screen and (min-width: 1000px) {
330 |     .sounds_container {
331 |       display: flex;
332 |       flex-wrap: wrap;
333 |       justify-content: space-between; }
334 |       .sounds_container:after {
335 |         flex: auto;
336 |         margin: 0 auto;
337 |         content: ""; }
338 |       .sounds_container > * {
339 |         width: calc( 50% - 0.5em);
340 |         margin-left: 0.5em;
341 |         margin-right: 0.5em; }
342 |         .sounds_container > *:nth-child(1) {
343 |           margin-left: 0; }
344 |         .sounds_container > *:nth-child(2n) {
345 |           margin-right: 0; }
346 |         .sounds_container > *:nth-child(2n + 1) {
347 |           margin-left: 0; } }
348 | 
349 | .sounds_container .sound_block {
350 |   background-color: transparent;
351 |   display: flex;
352 |   flex-direction: column;
353 |   justify-content: center;
354 |   align-items: center;
355 |   min-height: 250px;
356 |   height: auto;
357 |   margin-bottom: 1em; }
358 | 
359 | .sounds_container .sound_block > .start_btn {
360 |   position: relative;
361 |   width: 100px;
362 |   height: 100px;
363 |   margin-bottom: 50px;
364 |   display: flex;
365 |   justify-content: center;
366 |   align-items: center; }
367 | 
368 | .sounds_container .sound_block > .start_btn img {
369 |   z-index: 1;
370 |   position: absolute;
371 |   top: 50%;
372 |   left: 50%;
373 |   transform: translateX(-50%) translateY(-50%);
374 |   width: auto;
375 |   height: 100%;
376 |   opacity: 0.5;
377 |   transition: all 1s ease-in; }
378 | 
379 | .sounds_container .sound_block > .start_btn img.playing {
380 |   opacity: 1; }
381 | 
382 | .sounds_container .sound_block > .start_btn a {
383 |   z-index: 2;
384 |   width: 100%;
385 |   height: 100%;
386 |   display: block; }
387 | 
388 | #top_control {
389 |   position: absolute;
390 |   top: 200px;
391 |   left: 0;
392 |   width: 100%; }
393 | 
394 | .control_container {
395 |   display: flex;
396 |   flex-wrap: wrap;
397 |   justify-content: space-between;
398 |   margin: 0 4em 2em 4em;
399 |   min-height: 200px;
400 |   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
401 |   border-top: 1px solid rgba(255, 255, 255, 0.5);
402 |   /*border-bottom-left-radius: 50px;
403 | 	border-bottom-right-radius: 50px;*/ }
404 |   .control_container:after {
405 |     flex: auto;
406 |     margin: 0 auto;
407 |     content: ""; }
408 |   .control_container > * {
409 |     width: calc( 100% - 0em);
410 |     margin-left: 0.5em;
411 |     margin-right: 0.5em; }
412 |     .control_container > *:nth-child(1) {
413 |       margin-left: 0; }
414 |     .control_container > *:nth-child(1n) {
415 |       margin-right: 0; }
416 |     .control_container > *:nth-child(1n + 1) {
417 |       margin-left: 0; }
418 | 
419 | .clock {
420 |   display: flex;
421 |   justify-content: center;
422 |   align-items: center;
423 |   color: white;
424 |   min-height: 150px;
425 |   font-size: 6em;
426 |   font-weight: 100; }
427 |   .clock .time_block {
428 |     display: flex; }
429 |     .clock .time_block .separator {
430 |       margin: 0 0; }
431 |     .clock .time_block span {
432 |       margin: 0 5px; }
433 |     .clock .time_block .date {
434 |       padding-top: 12px;
435 |       display: flex;
436 |       flex-direction: column;
437 |       text-align: right;
438 |       font-size: 0.35em;
439 |       font-weight: 400; }
440 |       .clock .time_block .date span {
441 |         display: block; }
442 |       .clock .time_block .date .day {
443 |         margin-top: 2px; }
444 |   @media only screen and (max-width: 601px) {
445 |     .clock {
446 |       font-size: 4em; }
447 |       .clock .time_block span {
448 |         margin: 0 2px; }
449 |       .clock .time_block .date {
450 |         margin-right: 5px;
451 |         padding-top: 6px;
452 |         display: flex;
453 |         flex-direction: column;
454 |         text-align: right;
455 |         font-size: 0.35em;
456 |         font-weight: 400; }
457 |         .clock .time_block .date span {
458 |           display: block; }
459 |         .clock .time_block .date .day {
460 |           margin-top: 3px; } }
461 |   @media only screen and (max-width: 301px) {
462 |     .clock {
463 |       font-size: 2.5em; }
464 |       .clock .time_block span {
465 |         margin: 0 1px; }
466 |       .clock .time_block .date {
467 |         margin-right: 5px;
468 |         padding-top: 3px;
469 |         display: flex;
470 |         flex-direction: column;
471 |         text-align: right;
472 |         font-size: 0.35em;
473 |         font-weight: 400; }
474 |         .clock .time_block .date span {
475 |           display: block; }
476 |         .clock .time_block .date .day {
477 |           margin-top: 2px; } }
478 | 
479 | .mute_btn {
480 |   transform: scaleX(-1);
481 |   position: fixed;
482 |   top: 1em;
483 |   right: 0.5em;
484 |   font-size: 2em; }
485 |   .mute_btn a {
486 |     color: white;
487 |     text-decoration: none; }
488 |   .mute_btn .muted {
489 |     display: none; }
490 |   @media screen and (min-width: 600px) and (max-width: 799px) {
491 |     .mute_btn {
492 |       position: fixed;
493 |       top: 1em;
494 |       right: 1.2em;
495 |       font-size: 3em;
496 |       transform: scaleX(-1); } }
497 |   @media screen and (min-width: 800px) and (max-width: 999px) {
498 |     .mute_btn {
499 |       position: fixed;
500 |       top: 1em;
501 |       right: 1.2em;
502 |       font-size: 3em;
503 |       transform: scaleX(-1); } }
504 |   @media screen and (min-width: 1000px) {
505 |     .mute_btn {
506 |       position: fixed;
507 |       top: 1em;
508 |       right: 1.2em;
509 |       font-size: 3em;
510 |       transform: scaleX(-1); } }
511 | 
512 | .reset_btn {
513 |   position: fixed;
514 |   top: 2.5em;
515 |   right: 0.5em;
516 |   font-size: 2em; }
517 |   .reset_btn a {
518 |     color: white;
519 |     text-decoration: none; }
520 |   .reset_btn .muted {
521 |     display: none; }
522 |   @media screen and (min-width: 600px) and (max-width: 799px) {
523 |     .reset_btn {
524 |       position: fixed;
525 |       top: 2.5em;
526 |       right: 1.2em;
527 |       font-size: 3em; } }
528 |   @media screen and (min-width: 800px) and (max-width: 999px) {
529 |     .reset_btn {
530 |       position: fixed;
531 |       top: 2.5em;
532 |       right: 1.2em;
533 |       font-size: 3em; } }
534 |   @media screen and (min-width: 1000px) {
535 |     .reset_btn {
536 |       position: fixed;
537 |       top: 3em;
538 |       right: 1.5em;
539 |       font-size: 2.5em; } }
540 | 
541 | footer {
542 |   display: flex;
543 |   flex-direction: column;
544 |   justify-content: flex-end;
545 |   min-height: 250px;
546 |   background: #151513;
547 |   margin-top: 5em;
548 |   padding: 2em 0 1em 0; }
549 |   footer .social_icons {
550 |     height: 50px;
551 |     display: flex;
552 |     flex-wrap: wrap;
553 |     justify-content: center;
554 |     align-items: center; }
555 |     footer .social_icons .share_icn {
556 |       width: auto; }
557 |     footer .social_icons .fb_btn {
558 |       padding-right: 20px;
559 |       height: 22px; }
560 |     footer .social_icons .paypal-button {
561 |       position: relative;
562 |       text-align: center;
563 |       font-size: 0.9em;
564 |       padding: 4px 0;
565 |       box-sizing: border-box;
566 |       display: inline-block;
567 |       border-radius: 3px;
568 |       min-width: 75px;
569 |       margin-left: 20px;
570 |       background: #f44336;
571 |       text-decoration: none;
572 |       transform: translateY(-1px); }
573 |   footer a {
574 |     color: #ffffff;
575 |     padding-left: 5px;
576 |     padding-right: 5px; }
577 |   footer .footer_container {
578 |     line-height: 2em;
579 |     color: white;
580 |     display: flex;
581 |     flex-wrap: wrap;
582 |     justify-content: space-between;
583 |     margin: 0 4em 0em 4em;
584 |     min-height: 100px;
585 |     display: flex;
586 |     justify-content: center;
587 |     align-items: center;
588 |     text-align: center; }
589 |     footer .footer_container:after {
590 |       flex: auto;
591 |       margin: 0 auto;
592 |       content: ""; }
593 |     footer .footer_container > * {
594 |       width: calc( 100% - 0em);
595 |       margin-left: 0.5em;
596 |       margin-right: 0.5em; }
597 |       footer .footer_container > *:nth-child(1) {
598 |         margin-left: 0; }
599 |       footer .footer_container > *:nth-child(1n) {
600 |         margin-right: 0; }
601 |       footer .footer_container > *:nth-child(1n + 1) {
602 |         margin-left: 0; }
603 |     footer .footer_container a {
604 |       text-decoration: none;
605 |       border-bottom: 1px dotted; }
606 |     footer .footer_container span {
607 |       padding: 1em 0; }
608 |     footer .footer_container .made_with {
609 |       font-size: 1.5em; }
610 |       footer .footer_container .made_with .fa-heart {
611 |         color: #d91e18; }
612 |     footer .footer_container .copyright {
613 |       border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
614 | 
615 | header {
616 |   color: white;
617 |   text-align: center;
618 |   display: flex;
619 |   flex-direction: column;
620 |   justify-content: center;
621 |   align-items: center;
622 |   min-height: 200px; }
623 |   header h1 {
624 |     font-weight: 100;
625 |     font-size: 2.5em;
626 |     text-transform: uppercase; }
627 |   header p {
628 |     line-height: 1.5em;
629 |     padding-bottom: 2em; }
630 | 
631 | .volume_bar {
632 |   opacity: 0; }
633 | 
634 | .footer_buttons {
635 |   display: flex;
636 |   justify-content: center; }
637 | 
638 | .footer_btn {
639 |   position: relative;
640 |   font-size: 1.2em;
641 |   text-align: center;
642 |   text-transform: uppercase;
643 |   font-weight: 700;
644 |   display: flex;
645 |   justify-content: center;
646 |   margin: 20px; }
647 |   .footer_btn > a {
648 |     display: flex;
649 |     justify-content: center;
650 |     align-items: center;
651 |     text-decoration: none;
652 |     width: 250px;
653 |     height: 60px;
654 |     border-radius: 5px;
655 |     border: 1px solid white !important; }
656 |   .footer_btn .fa {
657 |     font-size: 2.5em;
658 |     padding-right: 10px; }
659 |   .footer_btn sub {
660 |     position: absolute; }
661 | 


--------------------------------------------------------------------------------
/app/images/beach.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/beach.png


--------------------------------------------------------------------------------
/app/images/bird.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/bird.png


--------------------------------------------------------------------------------
/app/images/brownnoise.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/brownnoise.png


--------------------------------------------------------------------------------
/app/images/catpurr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/catpurr.png


--------------------------------------------------------------------------------
/app/images/drop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/drop.png


--------------------------------------------------------------------------------
/app/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/favicon.png


--------------------------------------------------------------------------------
/app/images/fire.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/fire.png


--------------------------------------------------------------------------------
/app/images/forest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/forest.png


--------------------------------------------------------------------------------
/app/images/leaves.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/leaves.png


--------------------------------------------------------------------------------
/app/images/pinknoise.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/pinknoise.png


--------------------------------------------------------------------------------
/app/images/rain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/rain.png


--------------------------------------------------------------------------------
/app/images/river.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/river.png


--------------------------------------------------------------------------------
/app/images/sheep.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/sheep.png


--------------------------------------------------------------------------------
/app/images/socialpreview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/socialpreview.png


--------------------------------------------------------------------------------
/app/images/thunder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/thunder.png


--------------------------------------------------------------------------------
/app/images/windchimes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/images/windchimes.png


--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Chill n' Sound - Relax with the sounds of Nature</title>
  6 | 	<meta charset="UTF-8">
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 
  9 | 	<meta name="description" content="Relax with sounds of nature! Play and Mix Ambient sounds to boost concentration and productivity. Create your perfect enviroment.">
 10 | 
 11 | 	<meta name="keywords" content="Stefan, Petrović, Petrovic, sounds, nature sounds, chill, play, mix, boost, productivity, improve, concentration, ambient, enviroment, soundbord, zen, calming, calm">
 12 | 
 13 | 	<meta name="author" content="Stefan Petrović">
 14 | 
 15 | 	<!-- Favicon -->
 16 | 	<link rel="shortcut icon" href="images/favicon.png">
 17 | 
 18 | 	<!-- FB meta tags -->
 19 | 	<meta property="og:type" content="website" />
 20 | 	<meta property="og:url" content="https://chillnsound.petrovicstefan.rs" />
 21 | 	<meta property="og:title" content="Chill n' Sound - Relax with the sounds of Nature" />
 22 | 	<meta property="og:description" content="Relax with sounds of nature! Play and Mix Ambient sounds to boost concentration and productivity. Create your perfect enviroment."
 23 | 	/>
 24 | 	<meta property="og:image" content="http://chillnsound.petrovicstefan.rs/images/socialpreview.png" />
 25 | 	<meta property="og:image:width" content="747" />
 26 | 	<meta property="og:image:height" content="200" />
 27 | 
 28 | 	<!-- Twiter meta tags -->
 29 | 	<meta name="twitter:card" content="summary" />
 30 | 	<meta name="twitter:site" content="@stefanpetr_dpi" />
 31 | 	<meta name="twitter:title" content="Chill n' Sound - Relax with the sounds of Nature" />
 32 | 	<meta name="twitter:description" content="Relax with sounds of nature! Play and Mix Ambient sounds to boost concentration and productivity. Create your perfect enviroment."
 33 | 	/>
 34 | 	<meta name="twitter:image" content="http://chillnsound.petrovicstefan.rs/images/socialpreview.png" />
 35 | 
 36 | 	<!--build:css css/styles.min.css-->
 37 | 	<link rel="stylesheet" href="css/normalize.css">
 38 | 	<link rel="stylesheet" href="css/styles.css">
 39 | 	<!--endbuild-->
 40 | 
 41 | </head>
 42 | 
 43 | <body>
 44 | 	<div id="fb-root"></div>
 45 | 	<script>(function (d, s, id) {
 46 | 			var js, fjs = d.getElementsByTagName(s)[0];
 47 | 			if (d.getElementById(id)) return;
 48 | 			js = d.createElement(s); js.id = id;
 49 | 			js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9";
 50 | 			fjs.parentNode.insertBefore(js, fjs);
 51 | 		}(document, 'script', 'facebook-jssdk'));</script>
 52 | 
 53 | 	<script>window.twttr = (function (d, s, id) {
 54 | 			var js, fjs = d.getElementsByTagName(s)[0],
 55 | 				t = window.twttr || {};
 56 | 			if (d.getElementById(id)) return t;
 57 | 			js = d.createElement(s);
 58 | 			js.id = id;
 59 | 			js.src = "https://platform.twitter.com/widgets.js";
 60 | 			fjs.parentNode.insertBefore(js, fjs);
 61 | 
 62 | 			t._e = [];
 63 | 			t.ready = function (f) {
 64 | 				t._e.push(f);
 65 | 			};
 66 | 
 67 | 			return t;
 68 | 		}(document, "script", "twitter-wjs"));</script>
 69 | 
 70 | 	<section id="load_screen">
 71 | 		<div class="loader_wrap">
 72 | 			<!-- Loader by https://codepen.io/ispal/pen/mVaaJe -->
 73 | 			<div class="loader">
 74 | 				<div class="loader__bar"></div>
 75 | 				<div class="loader__bar"></div>
 76 | 				<div class="loader__bar"></div>
 77 | 				<div class="loader__bar"></div>
 78 | 				<div class="loader__bar"></div>
 79 | 				<div class="loader__ball"></div>
 80 | 			</div>
 81 | 			<!-- Loader end -->
 82 | 			<div class="load_bar">
 83 | 				<div class="load_fill"></div>
 84 | 			</div>
 85 | 			<span class="load_status">0%</span>
 86 | 		</div>
 87 | 	</section>
 88 | 
 89 | 	<header>
 90 | 		<h1>Chill n' Sound</h1>
 91 | 		<p class="desc">
 92 | 			Relax with the sounds of nature! </br>Play and Mix Ambient sounds to boost concentration and productivity.
 93 | 		</p>
 94 | 	</header>
 95 | 	<section id="top_control">
 96 | 		<div class="mute_btn">
 97 | 			<a href="#!">
 98 | 				<i class="fa fa-volume-up unmuted" aria-hidden="true"></i>
 99 | 				<i class="fa fa-volume-off muted" aria-hidden="true"></i>
100 | 			</a>
101 | 		</div>
102 | 
103 | 		<div class="reset_btn">
104 | 			<a href="#!">
105 | 				<i class="fa fa-refresh" aria-hidden="true"></i>
106 | 			</a>
107 | 		</div>
108 | 
109 | 		<div class="control_container">
110 | 			<div class="clock">
111 | 				<div class="time_block">
112 | 					<div class="date">
113 | 						<span class="month">JAN</span>
114 | 						<span class="day">MON</span>
115 | 					</div>
116 | 					<div class="time">
117 | 						<span class="hours">00</span>
118 | 						<span class="separator">:</span>
119 | 						<span class="minutes">00</span>
120 | 						<!-- <sup>
121 | 							<span class="separator">:</span>
122 | 							<span class="seconds">00</span>
123 | 						</sup> -->
124 | 					</div>
125 | 				</div>
126 | 
127 | 			</div>
128 | 
129 | 		</div>
130 | 	</section>
131 | 	<section id="main">
132 | 
133 | 		<div class="sounds_container">
134 | 
135 | 			<!-- RAIN -->
136 | 			<div class="sound_block">
137 | 
138 | 				<audio>
139 | 					<source src="sounds/rain.mp3" type="audio/mpeg">
140 | 					<source src="sounds/rain.ogg" type="audio/ogg">
141 | 				</audio>
142 | 				<div class="start_btn">
143 | 					<img src="images/rain.png" alt="Rain Sounds">
144 | 					<a class="play" href="#!"></a>
145 | 				</div>
146 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
147 | 			</div>
148 | 
149 | 			<!-- THUNDER -->
150 | 			<div class="sound_block">
151 | 
152 | 				<audio>
153 | 					<source src="sounds/thunder.mp3" type="audio/mpeg">
154 | 					<source src="sounds/thunder.ogg" type="audio/ogg">
155 | 				</audio>
156 | 				<div class="start_btn">
157 | 					<img src="images/thunder.png" alt="Thunder Sound">
158 | 					<a class="play" href="#!"></a>
159 | 				</div>
160 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
161 | 			</div>
162 | 
163 | 			<!-- FOREST -->
164 | 			<div class="sound_block">
165 | 
166 | 				<audio>
167 | 					<source src="sounds/forest.mp3" type="audio/mpeg">
168 | 					<source src="sounds/forest.ogg" type="audio/ogg">
169 | 				</audio>
170 | 				<div class="start_btn">
171 | 					<img src="images/forest.png" alt="Forest Sounds">
172 | 					<a class="play" href="#!"></a>
173 | 				</div>
174 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
175 | 			</div>
176 | 
177 | 			<!-- LEAVES -->
178 | 			<div class="sound_block">
179 | 
180 | 				<audio>
181 | 					<source src="sounds/leaves.mp3" type="audio/mpeg">
182 | 					<source src="sounds/leaves.ogg" type="audio/ogg">
183 | 				</audio>
184 | 				<div class="start_btn">
185 | 					<img src="images/leaves.png" alt="Leaves in Wind Sound">
186 | 					<a class="play" href="#!"></a>
187 | 				</div>
188 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
189 | 			</div>
190 | 
191 | 			<!-- DROPS -->
192 | 			<div class="sound_block">
193 | 
194 | 				<audio>
195 | 					<source src="sounds/drops.mp3" type="audio/mpeg">
196 | 					<source src="sounds/drops.ogg" type="audio/ogg">
197 | 				</audio>
198 | 				<div class="start_btn">
199 | 					<img src="images/drop.png" alt="Drops Sound">
200 | 					<a class="play" href="#!"></a>
201 | 				</div>
202 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
203 | 			</div>
204 | 
205 | 			<!-- FIRE -->
206 | 			<div class="sound_block">
207 | 
208 | 				<audio>
209 | 					<source src="sounds/fire.mp3" type="audio/mpeg">
210 | 					<source src="sounds/fire.ogg" type="audio/ogg">
211 | 				</audio>
212 | 				<div class="start_btn">
213 | 					<img src="images/fire.png" alt="Fire Sound">
214 | 					<a class="play" href="#!"></a>
215 | 				</div>
216 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
217 | 			</div>
218 | 
219 | 			<!-- CAT -->
220 | 			<div class="sound_block">
221 | 
222 | 				<audio>
223 | 					<source src="sounds/cat_purr.mp3" type="audio/mpeg">
224 | 					<source src="sounds/cat_purr.ogg" type="audio/ogg">
225 | 				</audio>
226 | 				<div class="start_btn">
227 | 					<img src="images/catpurr.png" alt="Cat Purr Sound">
228 | 					<a class="play" href="#!"></a>
229 | 				</div>
230 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
231 | 			</div>
232 | 
233 | 			<!-- SHEEP -->
234 | 			<div class="sound_block">
235 | 
236 | 				<audio>
237 | 					<source src="sounds/sheep.mp3" type="audio/mpeg">
238 | 					<source src="sounds/sheep.ogg" type="audio/ogg">
239 | 				</audio>
240 | 				<div class="start_btn">
241 | 					<img src="images/sheep.png" alt="Sheep Sound">
242 | 					<a class="play" href="#!"></a>
243 | 				</div>
244 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
245 | 			</div>
246 | 
247 | 			<!-- BIRDS -->
248 | 			<div class="sound_block">
249 | 
250 | 				<audio>
251 | 					<source src="sounds/birds.mp3" type="audio/mpeg">
252 | 					<source src="sounds/birds.ogg" type="audio/ogg">
253 | 				</audio>
254 | 				<div class="start_btn">
255 | 					<img src="images/bird.png" alt="Bird Sounds">
256 | 					<a class="play" href="#!"></a>
257 | 				</div>
258 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
259 | 			</div>
260 | 
261 | 			<!-- BEACH -->
262 | 			<div class="sound_block">
263 | 
264 | 				<audio>
265 | 					<source src="sounds/beach.mp3" type="audio/mpeg">
266 | 					<source src="sounds/beach.ogg" type="audio/ogg">
267 | 				</audio>
268 | 				<div class="start_btn">
269 | 					<img src="images/beach.png" alt="Beach Sounds">
270 | 					<a class="play" href="#!"></a>
271 | 				</div>
272 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
273 | 			</div>
274 | 
275 | 			<!-- RIVER -->
276 | 			<div class="sound_block">
277 | 
278 | 				<audio>
279 | 					<source src="sounds/river.mp3" type="audio/mpeg">
280 | 					<source src="sounds/river.ogg" type="audio/ogg">
281 | 				</audio>
282 | 				<div class="start_btn">
283 | 					<img src="images/river.png" alt="River Sounds">
284 | 					<a class="play" href="#!"></a>
285 | 				</div>
286 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
287 | 			</div>
288 | 
289 | 			<!-- WINDCHIMES -->
290 | 			<div class="sound_block">
291 | 
292 | 				<audio>
293 | 					<source src="sounds/windchimes.mp3" type="audio/mpeg">
294 | 					<source src="sounds/windchimes.ogg" type="audio/ogg">
295 | 				</audio>
296 | 				<div class="start_btn">
297 | 					<img src="images/windchimes.png" alt="Windchimes Sound">
298 | 					<a class="play" href="#!"></a>
299 | 				</div>
300 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
301 | 			</div>
302 | 
303 | 			<!-- PINK NOISE -->
304 | 			<div class="sound_block">
305 | 
306 | 				<audio>
307 | 					<source src="sounds/pinknoise.mp3" type="audio/mpeg">
308 | 					<source src="sounds/pinknoise.ogg" type="audio/ogg">
309 | 				</audio>
310 | 				<div class="start_btn">
311 | 					<img src="images/pinknoise.png" alt="Pink Noise Sound">
312 | 					<a class="play" href="#!"></a>
313 | 				</div>
314 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
315 | 			</div>
316 | 
317 | 			<!-- BROWN NOISE -->
318 | 			<div class="sound_block">
319 | 
320 | 				<audio>
321 | 					<source src="sounds/brownnoise.mp3" type="audio/mpeg">
322 | 					<source src="sounds/brownnoise.ogg" type="audio/ogg">
323 | 				</audio>
324 | 				<div class="start_btn">
325 | 					<img src="images/brownnoise.png" alt="Brown Noise Sound">
326 | 					<a class="play" href="#!"></a>
327 | 				</div>
328 | 				<input class="volume_bar" type="range" value="0" max="1" step="0.001">
329 | 			</div>
330 | 		</div>
331 | 	</section>
332 | 	<div class="git_ribbon">
333 | 		<a href="https://github.com/petrovicstefanrs/chillnsound" class="github-corner" aria-label="View source on Github">
334 | 			<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#F2994A; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);"
335 | 			 aria-hidden="true">
336 | 				<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
337 | 				<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
338 | 				 fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
339 | 				<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
340 | 				 fill="currentColor" class="octo-body"></path>
341 | 			</svg>
342 | 			<style>
343 | 				.github-corner:hover .octo-arm {
344 | 					animation: octocat-wave 560ms ease-in-out
345 | 				}
346 | 
347 | 				@keyframes octocat-wave {
348 | 					0%,
349 | 					100% {
350 | 						transform: rotate(0)
351 | 					}
352 | 					20%,
353 | 					60% {
354 | 						transform: rotate(-25deg)
355 | 					}
356 | 					40%,
357 | 					80% {
358 | 						transform: rotate(10deg)
359 | 					}
360 | 				}
361 | 
362 | 				@media (max-width:500px) {
363 | 					.github-corner:hover .octo-arm {
364 | 						animation: none
365 | 					}
366 | 					.github-corner .octo-arm {
367 | 						animation: octocat-wave 560ms ease-in-out
368 | 					}
369 | 				}
370 | 			</style>
371 | 		</a>
372 | 	</div>
373 | 
374 | 	<footer>
375 | 		<div class="footer_container">
376 | 			<span class="licence">
377 | 				The source code for this app is released under
378 | 				<a href="https://opensource.org/licenses/MIT">MIT Licence</a> and can be found on
379 | 				<a href="https://github.com/petrovicstefanrs/chillnsound">Github</a>.</br> Feel free to fork this project and let me know if you make something awesome!
380 | 			</span>
381 | 			<div class="footer_buttons">
382 | 				<span class="footer_btn">
383 | 					<a href="https://github.com/petrovicstefanrs/chillnsound_chrome_extension/releases" target="_blank">
384 | 						<i class="fa fa-chrome" aria-hidden="true"></i> Get Chrome Extension</a>
385 | 				</span>
386 | 				<span class="footer_btn">
387 | 					<a href="https://goo.gl/Mrm2AK" target="_blank">
388 | 						<i class="fa fa-android" aria-hidden="true"></i> Get Peace Maker</a>
389 | 					<sub> Unofficial android app by <a href="https://goo.gl/HGanCe" target="_blank"> Muneef M </a></sub>
390 | 				</span>
391 | 			</div>
392 | 			<span class="made_with">
393 | 				Made with
394 | 				<i class="fa fa-heart" aria-hidden="true"></i> and
395 | 				<i class="fa fa-coffee" aria-hidden="true"></i>
396 | 			</span>
397 | 			<span class="copyright">
398 | 				Copyright © 2017 by
399 | 				<a target="_blank" href="https://petrovicstefan.rs">Petrovic Stefan</a> | All rights reserved.
400 | 			</span>
401 | 
402 | 			<span class="helpfooter">
403 | 				Help keep Chill N' Sound Alive:
404 | 			</span>
405 | 		</div>
406 | 
407 | 		<div class="social_icons">
408 | 			<span class="share_icn fb_btn">
409 | 				<div class="fb-share-button" data-href="https://chillnsound.petrovicstefan.rs" data-layout="button_count" data-size="small"
410 | 				 data-mobile-iframe="true">
411 | 					<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fchillnsound.petrovicstefan.rs%2F&amp;src=sdkpreparse">Share</a>
412 | 				</div>
413 | 			</span>
414 | 			<span class="share_icn">
415 | 				<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Chill%20n'%20Sound%20-%20Relax%20With%20the%20Sounds%20of%20Nature!">
416 | 					Tweet</a>
417 | 			</span>
418 | 			<span class="share_icn">
419 | 				<a href="https://www.paypal.me/petrovicstefan/1" target="_blank" rel="noopener noreferrer" class="paypal-button">Buy Me
420 | 					<i class="fa fa-coffee" aria-hidden="true"></i>
421 | 				</a>
422 | 			</span>
423 | 		</div>
424 | 
425 | 		<!--FontAwesome-->
426 | 		<script src="https://use.fontawesome.com/11fc9055ad.js"></script>
427 | 
428 | 		<!--build:js js/main.min.js -->
429 | 		<script src="js/main.js"></script>
430 | 		<!-- endbuild -->
431 | 	</footer>
432 | </body>
433 | 
434 | </html>
435 | 


--------------------------------------------------------------------------------
/app/js/main.js:
--------------------------------------------------------------------------------
  1 | //DOM Elements with sound
  2 | var all_sounds = document.querySelectorAll('audio');
  3 | 
  4 | for (var i = 0; i < all_sounds.length; i++) {
  5 | 	all_sounds[i].addEventListener("canplaythrough", loadedSounds, false);
  6 | 	all_sounds[i].load();	// Force reload in case some audio files already loaded to avoid stuck loading screen
  7 | }
  8 | 
  9 | var loaded=0;
 10 | var percent=0;
 11 | function loadedSounds(e) {
 12 | 	loaded++; // Increment loaded counter to check if all sounds can be played
 13 | 	percent = Math.floor(100 * loaded / all_sounds.length); // Calculate percentage
 14 | 	document.querySelector('.load_status').innerText = percent+"%"; // Set textual percentage to load status
 15 | 	document.querySelector('.load_fill').style.width= percent+"%";
 16 | 
 17 | 	//console.log(percent);
 18 | 	if (loaded == all_sounds.length) {
 19 | 		//alert('Loaded!');
 20 | 		for (var i = 0; i < all_sounds.length; i++) {
 21 | 			all_sounds[i].removeEventListener("canplaythrough", loadedSounds);
 22 | 		}
 23 | 		setTimeout(fadeOutLoader, 1000);
 24 | 	}
 25 | }
 26 | 
 27 | function fadeOutLoader() {
 28 | 	var fadeTarget = document.getElementById("load_screen");
 29 | 	fadeTarget.style.opacity = 0;
 30 | 	setTimeout(function(){	// Remove node
 31 | 		document.querySelector('body').removeChild(fadeTarget);
 32 | 	},2000);
 33 | }
 34 | 
 35 | // DOM Elements for clock control
 36 | var hours = document.querySelector('.hours');
 37 | var minutes = document.querySelector('.minutes');
 38 | var seconds = document.querySelector('.seconds');
 39 | var separator = document.querySelector('.separator');
 40 | 
 41 | // DOM Elements that control play/stop sounds
 42 | var play_btn = document.querySelectorAll('.play');							
 43 | 
 44 | // Adding listeners to every play/stop button
 45 | for (var i = 0; i < play_btn.length; i++) {									
 46 | 	play_btn[i].addEventListener("click", playSound, false);
 47 | }
 48 | 
 49 | // DOM elements that controll sound volume
 50 | var volume_control=document.querySelectorAll('.volume_bar');		
 51 | 
 52 | // Adding listeners to every volume control slider		
 53 | for (var i = 0; i < volume_control.length; i++) {
 54 | 	volume_control[i].addEventListener("input", volumeSound, false);		
 55 | 	volume_control[i].style.opacity=0;
 56 | }
 57 | 
 58 | // DOM element that mutes and unmutes the page
 59 | var mute_btn = document.querySelector(".mute_btn a");
 60 | var is_muted = false;
 61 | mute_btn.addEventListener('click', muteDocument, false);
 62 | 
 63 | // DOM element that resets the sounds
 64 | var reset_btn = document.querySelector(".reset_btn a");
 65 | reset_btn.addEventListener('click', resetSounds, false);
 66 | 
 67 | 
 68 | // Controlling stoping and playing the sound
 69 | function playSound(e){
 70 | 	if (is_muted) {
 71 | 		muteDocument();
 72 | 	}
 73 | 	var targetElement = e.target || e.srcElement;
 74 | 	var selectedSound = targetElement.parentElement.parentElement.querySelector('audio');
 75 | 	var volumeControler = targetElement.parentElement.parentElement.querySelector('.volume_bar');
 76 | 	var soundImage = targetElement.parentElement.parentElement.querySelector('img');
 77 | 
 78 | 	if(selectedSound.paused){
 79 | 		volumeControler.style.opacity=1;
 80 | 		selectedSound.loop=true;
 81 | 		if (volumeControler.value==0) {
 82 | 			volumeControler.value=0.1;
 83 | 		}
 84 | 		selectedSound.volume = volumeControler.value;
 85 | 		selectedSound.play();
 86 | 		soundImage.classList.add("playing");	
 87 | 	}
 88 | 	else{
 89 | 		volumeControler.style.opacity=0;
 90 | 		selectedSound.pause();
 91 | 		selectedSound.currentTime = 0;
 92 | 		volumeControler.value=0;
 93 | 		soundImage.classList.remove("playing");
 94 | 	}
 95 | 	console.log(event.target.type);
 96 | 	console.log(selectedSound);
 97 | }
 98 | 
 99 | // Controlling volume of the sounds 
100 | function volumeSound(e){
101 | 	if (is_muted) {
102 | 		muteDocument();
103 | 	}
104 | 	var targetElement = e.target || e.srcElement;
105 | 	var vol = targetElement.value;
106 | 	var selectedSound = targetElement.parentElement.querySelector('audio');
107 | 	selectedSound.volume = vol;
108 | }
109 | 
110 | function clock() {
111 | 	var days = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
112 | 	var months = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
113 | 	const now = new Date();
114 | 	// if (now.getSeconds()==0 || now.getMinutes==0) {
115 | 	// 	separator.classList.add("blink");
116 | 	// }
117 | 	hours.innerText = now.getHours()<10?"0"+now.getHours():now.getHours();
118 | 	minutes.innerText = now.getMinutes()<10?"0"+now.getMinutes():now.getMinutes();
119 | 	// seconds.innerText = now.getSeconds()<10?"0"+now.getSeconds():now.getSeconds();
120 | }
121 | clock();
122 | var interval = setInterval(clock,1000);
123 | 
124 | var playing_sounds = [];
125 | function muteDocument() {
126 | 	if (!is_muted) {
127 | 		playing_sounds.length=0;
128 | 		is_muted = true;
129 | 		document.querySelector('.unmuted').style.display="none";
130 | 		document.querySelector('.muted').style.display="inline";
131 | 		var all_audio = document.querySelectorAll('audio');
132 | 		for (var i = 0; i < all_audio.length; i++) {
133 | 			if(!all_audio[i].paused){
134 | 				playing_sounds.push([all_audio[i],all_audio[i].volume]);
135 | 			}	
136 | 		}
137 | 		playing_sounds.forEach(function (sound) {
138 | 			sound[0].volume=0;
139 | 		});
140 | 	}
141 | 	else{
142 | 		is_muted = false;
143 | 		document.querySelector('.unmuted').style.display="inline";
144 | 		document.querySelector('.muted').style.display="none";
145 | 		playing_sounds.forEach(function (sound) {
146 | 			sound[0].volume=sound[1];
147 | 		});
148 | 	}
149 | }
150 | 
151 | function resetSounds() {
152 | 	var all_audio = document.querySelectorAll('audio');
153 | 	for (var i = 0; i < all_audio.length; i++) {
154 | 		all_audio[i].pause();
155 | 		all_audio[i].currentTime = 0;
156 | 		all_audio[i].value=0;	
157 | 	}
158 | 	var all_play_btns = document.querySelectorAll('.start_btn img');
159 | 	for (var i = 0; i < all_play_btns.length; i++) {
160 | 		all_play_btns[i].classList.remove("playing");
161 | 	}
162 | 	var all_volume_control = document.querySelectorAll('.volume_bar');	
163 | 	for (var i = 0; i < all_volume_control.length; i++) {
164 | 		all_volume_control[i].value=0;
165 | 		all_volume_control[i].style.opacity=0;
166 | 	}
167 | }
168 | 


--------------------------------------------------------------------------------
/app/scss/_loader.scss:
--------------------------------------------------------------------------------
  1 | // Variables
  2 | $bar-color: #fff;
  3 | $ball-color: #fff;
  4 | $bg-color: #EA4961;
  5 | 
  6 | .loader {
  7 |   
  8 |   position: relative;
  9 |   width: 65px;
 10 |   height: 100px;
 11 |   
 12 |   &__bar {
 13 |     position: absolute;
 14 |     bottom: 0;
 15 |     width: 0.5em;
 16 |     height: 50%;
 17 |     background: $bar-color;
 18 |     transform-origin: center bottom;
 19 |     
 20 |     
 21 |     @for $i from 1 through 5 { 
 22 |        &:nth-child(#{$i}) {
 23 |          left: ($i - 1) * 15px;
 24 |          transform: scale(1,$i*.2);
 25 |          animation: barUp#{$i} 4s infinite;
 26 |         }
 27 |     }
 28 |     
 29 |   }
 30 |   
 31 |   &__ball {
 32 |     position: absolute;
 33 |     bottom: 10px;
 34 |     left: 0;
 35 |     width: 0.5em;
 36 |     height: 0.5em;
 37 |     background: $ball-color;
 38 |     border-radius: 50%;
 39 |     animation: ball 4s infinite;
 40 |   }
 41 | }
 42 | 
 43 | @keyframes ball {
 44 |   0% {
 45 |     transform: translate(0, 0);
 46 |   }
 47 |   5% {
 48 |     transform: translate(8px, -14px);
 49 |   }
 50 |   10% {
 51 |     transform: translate(15px, -10px)
 52 |   }
 53 |   17% {
 54 |     transform: translate(23px, -24px)
 55 |   }
 56 |   20% {
 57 |     transform: translate(30px, -20px)
 58 |   }
 59 |   27% {
 60 |     transform: translate(38px, -34px)
 61 |   }
 62 |   30% {
 63 |     transform: translate(45px, -30px)
 64 |   }
 65 |   37% {
 66 |     transform: translate(53px, -44px)
 67 |   }
 68 |   40% {
 69 |     transform: translate(60px, -40px)
 70 |   }
 71 |   50% {
 72 |     transform: translate(60px, 0)
 73 |   }
 74 |   57% {
 75 |     transform: translate(53px, -14px)
 76 |   }
 77 |   60% {
 78 |     transform: translate(45px, -10px)
 79 |   }
 80 |   67% {
 81 |     transform: translate(37px, -24px)
 82 |   }
 83 |   70% {
 84 |     transform: translate(30px, -20px)
 85 |   }
 86 |   77% {
 87 |     transform: translate(22px, -34px)
 88 |   }
 89 |   80% {
 90 |     transform: translate(15px, -30px)
 91 |   }
 92 |   87% {
 93 |     transform: translate(7px, -44px)
 94 |   }
 95 |   90% {
 96 |     transform: translate(0, -40px)
 97 |   }
 98 |   100% {
 99 |     transform: translate(0, 0);
100 |   }
101 | }
102 | 
103 | @keyframes barUp1 { 
104 |   0% {
105 |     transform: scale(1, .2);
106 |   }
107 |   40%{
108 |     transform: scale(1, .2);
109 |   }
110 |   50% {
111 |     transform: scale(1, 1);
112 |   }
113 |   90% {
114 |     transform: scale(1,1);
115 |   }
116 |   100% {
117 |     transform: scale(1,.2);
118 |   }
119 | }
120 | @keyframes barUp2 { 
121 |   0% {
122 |     transform: scale(1, .4);
123 |   }
124 |   40% {
125 |     transform: scale(1, .4);
126 |   }
127 |   50% {
128 |     transform: scale(1, .8);
129 |   }
130 |   90% {
131 |     transform: scale(1, .8);
132 |   }
133 |   100% {
134 |     transform: scale(1, .4);
135 |   }
136 | }
137 | @keyframes barUp3 { 
138 |   0% {
139 |     transform: scale(1, .6);
140 |   }
141 |   100% {
142 |     transform: scale(1, .6);
143 |   }
144 | }
145 | @keyframes barUp4 { 
146 |   0% {
147 |     transform: scale(1, .8);
148 |   }
149 |   40% {
150 |     transform: scale(1, .8);
151 |   }
152 |   50% {
153 |     transform: scale(1, .4);
154 |   }
155 |   90% {
156 |     transform: scale(1, .4);
157 |   }
158 |   100% {
159 |     transform: scale(1, .8);
160 |   }
161 | }
162 | @keyframes barUp5 { 
163 |   0% {
164 |     transform: scale(1, 1);
165 |   }
166 |   40% {
167 |     transform: scale(1, 1);
168 |   }
169 |   50% {
170 |     transform: scale(1, .2);
171 |   }
172 |   90% {
173 |     transform: scale(1, .2);
174 |   }
175 |   100% {
176 |     transform: scale(1, 1);
177 |   }
178 | }


--------------------------------------------------------------------------------
/app/scss/_mixins.scss:
--------------------------------------------------------------------------------
 1 | /** 
 2 | * Make flexbox grids super easy!
 3 | * ---
 4 | * @param $cols  —  Number of columns
 5 | * @param $margin  —  Margin with unit
 6 | */
 7 | 
 8 | @mixin flexgrid($cols, $margin) {
 9 |   $width: (100% / $cols);
10 |   $calc-margin: (($margin * $cols) - $margin) / $cols;
11 |   display: flex;
12 |   flex-wrap: wrap;
13 |   justify-content: space-between;
14 |   &:after {
15 |     flex: auto;
16 |     margin: 0 auto;
17 |     content: "";
18 |   }
19 |   >* {
20 |     width: calc( #{$width} - #{$calc-margin} );
21 |     margin-left: $margin / 2;
22 |     margin-right: $margin/ 2;
23 |     &:nth-child(1) {
24 |       margin-left: 0;
25 |     }
26 |     &:nth-child(#{$cols}n) {
27 |       margin-right: 0;
28 |     }
29 |     &:nth-child(#{$cols}n + 1) {
30 |       margin-left: 0;
31 |     }
32 |   }
33 | }
34 | 
35 | /* Fast way to center hor and vert */
36 | 
37 | @mixin center_cont {
38 |   position: absolute;
39 |   top: 50%;
40 |   left: 50%;
41 |   transform: translateX(-50%) translatey(-50%);
42 | }
43 | 
44 | /* Fast way to center hor and vert */
45 | 
46 | @mixin center_vert {
47 |   position: absolute;
48 |   top: 50%;
49 |   transform: translatey(-50%);
50 | }
51 | 
52 | /* Media Queries */
53 | 
54 | @mixin large_screen {
55 |   @media screen and (min-width: 1000px) {
56 |     @content;
57 |   }
58 | }
59 | 
60 | @mixin medium_screen {
61 |   @media screen and (min-width: 800px) and (max-width: 999px) {
62 |     @content;
63 |   }
64 | }
65 | 
66 | @mixin small_screen {
67 |   @media screen and (min-width: 600px) and (max-width: 799px) {
68 |     @content;
69 |   }
70 | }


--------------------------------------------------------------------------------
/app/scss/_slider.scss:
--------------------------------------------------------------------------------
  1 | // from https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
  2 | 
  3 | // * * * COLORS * * *
  4 | 
  5 | $color_fill:    white; // green
  6 | $font-size:      1em;    // <--- change the font size to change the size
  7 | 
  8 | // dark version
  9 | //@color_default: rgba(0,0,0,.2);
 10 | //@color_hover:   rgba(0,0,0,.3);
 11 | //@color_active:  rgba(0,0,0,.5);
 12 | 
 13 | // light version
 14 | $color_default: rgba(255,255,255,.5);
 15 | $color_hover:   rgba(255,255,255,.7);
 16 | $color_active:  rgba(255,255,255,1);
 17 | 
 18 | 
 19 | input[type=range] {
 20 |   transition: opacity 2s;
 21 |   box-sizing: border-box;
 22 |   font-size: $font-size;
 23 |   line-height: 0.5em;
 24 |   height: 0.5em;
 25 |   background-color: transparent;
 26 |   cursor: pointer;
 27 | 
 28 |   // * * * RESET * * *
 29 | 
 30 |   -webkit-appearance: none;
 31 |   width: 50%;
 32 |   max-width: 150px;
 33 |   &::-webkit-slider-thumb {
 34 |     -webkit-appearance: none;
 35 |   }
 36 |   &:focus {
 37 |     outline: none;
 38 |   }
 39 |   &::-ms-track {
 40 |     width: 50%;
 41 |     max-width: 200px;
 42 |     cursor: pointer;
 43 |     background: transparent; 
 44 |     border-color: transparent;
 45 |     color: transparent;
 46 |   }
 47 | 
 48 |   // * * * TRUMP * * *
 49 |   @mixin mx-trange-trump(){
 50 |     width: 1em;
 51 |     height: 1em;
 52 |     margin-top: -4px;
 53 |     background-color: $color_fill;
 54 |     border-radius: 50%;
 55 |     border: 0 solid $color_default;
 56 |     cursor: pointer;
 57 |   }
 58 | 
 59 |   &::-webkit-slider-thumb {
 60 |     -webkit-appearance: none;
 61 |     @include mx-trange-trump();
 62 |   }
 63 | 
 64 |   &::-moz-range-thumb {
 65 |     @include mx-trange-trump();
 66 |   }
 67 | 
 68 |   &::-ms-thumb {
 69 |     @include mx-trange-trump();
 70 |   }
 71 | 
 72 |   &:hover{
 73 |     &::-webkit-slider-thumb { border-color: $color_hover; }
 74 |     &::-moz-range-thumb     { border-color: $color_hover; }
 75 |     &::-ms-thumb            { border-color: $color_hover; }
 76 |   }
 77 | 
 78 |   //&:focus,
 79 |   &:active{
 80 |     &::-webkit-slider-thumb { border-color: $color_active; }
 81 |     &::-moz-range-thumb     { border-color: $color_active; }
 82 |     &::-ms-thumb            { border-color: $color_active; }
 83 |   }
 84 | 
 85 |   // * * * TRACK * * *
 86 | 
 87 |   @mixin mx-range-track(){
 88 |     width: 50%;
 89 |     max-width: 150px;
 90 |     cursor: pointer;
 91 |     height: 2px;
 92 |     border-bottom: 4px solid $color_default;
 93 |     background-color: transparent;
 94 |   }
 95 | 
 96 | 
 97 |   &::-webkit-slider-runnable-track {
 98 |     @include mx-range-track();
 99 |   }
100 | 
101 |   &:focus::-webkit-slider-runnable-track {
102 | 
103 |   }
104 | 
105 |   &::-moz-range-track {
106 |     @include mx-range-track()
107 |   }
108 | 
109 |   &::-ms-track {
110 |     background: transparent;
111 |     border-color: transparent;
112 |     color: transparent;
113 |   }
114 |   &::-ms-fill-lower {
115 | 
116 |   }
117 |   &:focus::-ms-fill-lower {
118 | 
119 |   }
120 |   &::-ms-fill-upper {
121 | 
122 |   }
123 |   &:focus::-ms-fill-upper {
124 | 
125 |   }
126 | }
127 | 


--------------------------------------------------------------------------------
/app/scss/_variables.scss:
--------------------------------------------------------------------------------
 1 | /* Colors */
 2 | $color-dark: #000000;
 3 | $color-blue: #22c1f4;
 4 | $color-green: #00ffda;
 5 | $color-purple: #110033;
 6 | $color-red: #d9004d;
 7 | $color-orange: #d3b724;
 8 | $color-bright: #ffffff;
 9 | $color-glitch-one: #f0f;
10 | $color-glitch-two: #0ff;
11 | 
12 | /* Misc */
13 | $base-font: 12px;


--------------------------------------------------------------------------------
/app/scss/styles.scss:
--------------------------------------------------------------------------------
  1 | @import '_variables';
  2 | @import '_mixins';
  3 | @import '_slider';
  4 | @import '_loader';
  5 | @import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700');
  6 | 
  7 | body {
  8 | 	font-size: $base-font;
  9 | 	overflow: auto;
 10 | 	font-family: 'Roboto', sans-serif;
 11 | 	min-height: 100vh;
 12 | 	background: #f2994a; /* fallback for old browsers */
 13 | 	background: -webkit-linear-gradient(
 14 | 		to top,
 15 | 		#f2c94c,
 16 | 		#f2994a
 17 | 	); /* Chrome 10-25, Safari 5.1-6 */
 18 | 	background: linear-gradient(
 19 | 		to top,
 20 | 		#f2c94c,
 21 | 		#f2994a
 22 | 	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 23 | }
 24 | 
 25 | #load_screen {
 26 | 	transition: opacity 1s;
 27 | 	position: fixed;
 28 | 	z-index: 999;
 29 | 	color: $color-bright;
 30 | 	font-weight: 700;
 31 | 	font-size: 1em;
 32 | 	top: 0;
 33 | 	left: 0;
 34 | 	width: 100%;
 35 | 	height: 100vh;
 36 | 	background: #f2994a; /* fallback for old browsers */
 37 | 	background: -webkit-linear-gradient(
 38 | 		to top,
 39 | 		#f2c94c,
 40 | 		#f2994a
 41 | 	); /* Chrome 10-25, Safari 5.1-6 */
 42 | 	background: linear-gradient(
 43 | 		to top,
 44 | 		#f2c94c,
 45 | 		#f2994a
 46 | 	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 47 | 	.loader_wrap {
 48 | 		text-align: center;
 49 | 		.loader {
 50 | 			margin: 0 auto;
 51 | 			margin-bottom: 2em;
 52 | 		}
 53 | 		.load_bar {
 54 | 			overflow: hidden;
 55 | 			background: rgba(255, 255, 255, 0.3);
 56 | 			height: 0.5em;
 57 | 			border-radius: 1em;
 58 | 			margin-bottom: 1em;
 59 | 			width: 200px;
 60 | 			.load_fill {
 61 | 				background: $color-bright;
 62 | 				height: 100%;
 63 | 				width: 0%;
 64 | 				transition: all 0.2s;
 65 | 			}
 66 | 		}
 67 | 		@include center_cont;
 68 | 	}
 69 | }
 70 | 
 71 | .header {
 72 | 	width: 100%;
 73 | 	height: 100px;
 74 | 	color: white;
 75 | 	display: flex;
 76 | 	justify-content: center;
 77 | 	align-items: center;
 78 | 	text-align: center;
 79 | }
 80 | 
 81 | .sounds_container {
 82 | 	margin: 0 auto;
 83 | 	padding: 250px 1em 0 1em;
 84 | 	max-width: 1024px;
 85 | 	@include small_screen {
 86 | 		@include flexgrid(2, 1em);
 87 | 	}
 88 | 	@include medium_screen {
 89 | 		@include flexgrid(2, 1em);
 90 | 	}
 91 | 	@include large_screen {
 92 | 		@include flexgrid(2, 1em);
 93 | 	}
 94 | }
 95 | 
 96 | .sounds_container .sound_block {
 97 | 	background-color: transparent;
 98 | 	display: flex;
 99 | 	flex-direction: column;
100 | 	justify-content: center;
101 | 	align-items: center;
102 | 	min-height: 250px;
103 | 	height: auto;
104 | 	margin-bottom: 1em;
105 | }
106 | 
107 | .sounds_container .sound_block > .start_btn {
108 | 	position: relative;
109 | 	width: 100px;
110 | 	height: 100px;
111 | 	margin-bottom: 50px;
112 | 	display: flex;
113 | 	justify-content: center;
114 | 	align-items: center;
115 | }
116 | 
117 | .sounds_container .sound_block > .start_btn img {
118 | 	z-index: 1;
119 | 	position: absolute;
120 | 	top: 50%;
121 | 	left: 50%;
122 | 	transform: translateX(-50%) translateY(-50%);
123 | 	width: auto;
124 | 	height: 100%;
125 | 	opacity: 0.5;
126 | 	transition: all 1s ease-in;
127 | }
128 | .sounds_container .sound_block > .start_btn img.playing {
129 | 	opacity: 1;
130 | }
131 | 
132 | .sounds_container .sound_block > .start_btn a {
133 | 	z-index: 2;
134 | 	width: 100%;
135 | 	height: 100%;
136 | 	display: block;
137 | }
138 | 
139 | #top_control {
140 | 	position: absolute;
141 | 	top: 200px;
142 | 	left: 0;
143 | 	width: 100%;
144 | }
145 | 
146 | .control_container {
147 | 	@include flexgrid(1, 1em);
148 | 	margin: 0 4em 2em 4em;
149 | 	min-height: 200px;
150 | 	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
151 | 	border-top: 1px solid rgba(255, 255, 255, 0.5);
152 | 	/*border-bottom-left-radius: 50px;
153 | 	border-bottom-right-radius: 50px;*/
154 | }
155 | 
156 | .clock {
157 | 	display: flex;
158 | 	justify-content: center;
159 | 	align-items: center;
160 | 	color: white;
161 | 	min-height: 150px;
162 | 	font-size: 6em;
163 | 	font-weight: 100;
164 | 	.time_block {
165 | 		display: flex;
166 | 		.separator {
167 | 			margin: 0 0;
168 | 		}
169 | 		span {
170 | 			margin: 0 5px;
171 | 		}
172 | 		.date {
173 | 			padding-top: 12px;
174 | 			display: flex;
175 | 			flex-direction: column;
176 | 			text-align: right;
177 | 			font-size: 0.35em;
178 | 			font-weight: 400;
179 | 			span {
180 | 				display: block;
181 | 			}
182 | 			.day {
183 | 				margin-top: 2px;
184 | 			}
185 | 		}
186 | 	}
187 | 	@media only screen and (max-width: 601px) {
188 | 		font-size: 4em;
189 | 		.time_block {
190 | 			span {
191 | 				margin: 0 2px;
192 | 			}
193 | 			.date {
194 | 				margin-right: 5px;
195 | 				padding-top: 6px;
196 | 				display: flex;
197 | 				flex-direction: column;
198 | 				text-align: right;
199 | 				font-size: 0.35em;
200 | 				font-weight: 400;
201 | 				span {
202 | 					display: block;
203 | 				}
204 | 				.day {
205 | 					margin-top: 3px;
206 | 				}
207 | 			}
208 | 		}
209 | 	}
210 | 	@media only screen and (max-width: 301px) {
211 | 		font-size: 2.5em;
212 | 		.time_block {
213 | 			span {
214 | 				margin: 0 1px;
215 | 			}
216 | 			.date {
217 | 				margin-right: 5px;
218 | 				padding-top: 3px;
219 | 				display: flex;
220 | 				flex-direction: column;
221 | 				text-align: right;
222 | 				font-size: 0.35em;
223 | 				font-weight: 400;
224 | 				span {
225 | 					display: block;
226 | 				}
227 | 				.day {
228 | 					margin-top: 2px;
229 | 				}
230 | 			}
231 | 		}
232 | 	}
233 | }
234 | 
235 | .mute_btn {
236 | 	transform: scaleX(-1);
237 | 	position: fixed;
238 | 	top: 1em;
239 | 	right: 0.5em;
240 | 	font-size: 2em;
241 | 	a {
242 | 		color: white;
243 | 		text-decoration: none;
244 | 	}
245 | 	.muted {
246 | 		display: none;
247 | 	}
248 | 	@include small_screen {
249 | 		position: fixed;
250 | 		top: 1em;
251 | 		right: 1.2em;
252 | 		font-size: 3em;
253 | 		transform: scaleX(-1);
254 | 	}
255 | 	@include medium_screen {
256 | 		position: fixed;
257 | 		top: 1em;
258 | 		right: 1.2em;
259 | 		font-size: 3em;
260 | 		transform: scaleX(-1);
261 | 	}
262 | 	@include large_screen {
263 | 		position: fixed;
264 | 		top: 1em;
265 | 		right: 1.2em;
266 | 		font-size: 3em;
267 | 		transform: scaleX(-1);
268 | 	}
269 | }
270 | 
271 | .reset_btn {
272 | 	position: fixed;
273 | 	top: 2.5em;
274 | 	right: 0.5em;
275 | 	font-size: 2em;
276 | 	a {
277 | 		color: white;
278 | 		text-decoration: none;
279 | 	}
280 | 	.muted {
281 | 		display: none;
282 | 	}
283 | 	@include small_screen {
284 | 		position: fixed;
285 | 		top: 2.5em;
286 | 		right: 1.2em;
287 | 		font-size: 3em;
288 | 	}
289 | 	@include medium_screen {
290 | 		position: fixed;
291 | 		top: 2.5em;
292 | 		right: 1.2em;
293 | 		font-size: 3em;
294 | 	}
295 | 	@include large_screen {
296 | 		position: fixed;
297 | 		top: 3em;
298 | 		right: 1.5em;
299 | 		font-size: 2.5em;
300 | 	}
301 | }
302 | 
303 | footer {
304 | 	display: flex;
305 | 	flex-direction: column;
306 | 	justify-content: flex-end;
307 | 	min-height: 250px;
308 | 	background: #151513;
309 | 	margin-top: 5em;
310 | 	padding: 2em 0 1em 0;
311 | 	.social_icons {
312 | 		height: 50px;
313 | 		display: flex;
314 | 		flex-wrap: wrap;
315 | 		justify-content: center;
316 | 		align-items: center;
317 | 		.share_icn {
318 | 			width: auto;
319 | 		}
320 | 		.fb_btn {
321 | 			padding-right: 20px;
322 | 			height: 22px;
323 | 		}
324 | 		.paypal-button {
325 | 			position: relative;
326 | 			text-align: center;
327 | 			font-size: 0.9em;
328 | 			padding: 4px 0;
329 | 			box-sizing: border-box;
330 | 			display: inline-block;
331 | 			border-radius: 3px;
332 | 			min-width: 75px;
333 | 			margin-left: 20px;
334 | 			background: #f44336;
335 | 			text-decoration: none;
336 | 			transform: translateY(-1px);
337 | 		}
338 | 	}
339 | 	a {
340 | 		color: $color-bright;
341 | 		padding-left: 5px;
342 | 		padding-right: 5px;
343 | 	}
344 | 
345 | 	.footer_container {
346 | 		line-height: 2em;
347 | 		color: white;
348 | 		@include flexgrid(1, 1em);
349 | 		margin: 0 4em 0em 4em;
350 | 		min-height: 100px;
351 | 		display: flex;
352 | 		justify-content: center;
353 | 		align-items: center;
354 | 		text-align: center;
355 | 		a {
356 | 			text-decoration: none;
357 | 			border-bottom: 1px dotted;
358 | 		}
359 | 		span {
360 | 			padding: 1em 0;
361 | 		}
362 | 		.made_with {
363 | 			font-size: 1.5em;
364 | 			.fa-heart {
365 | 				color: rgb(217, 30, 24);
366 | 			}
367 | 		}
368 | 		.copyright {
369 | 			border-bottom: 1px solid rgba(255, 255, 255, 0.5);
370 | 		}
371 | 	}
372 | }
373 | 
374 | header {
375 | 	color: white;
376 | 	text-align: center;
377 | 	display: flex;
378 | 	flex-direction: column;
379 | 	justify-content: center;
380 | 	align-items: center;
381 | 	min-height: 200px;
382 | 	h1 {
383 | 		font-weight: 100;
384 | 		font-size: 2.5em;
385 | 		text-transform: uppercase;
386 | 	}
387 | 	p {
388 | 		line-height: 1.5em;
389 | 		padding-bottom: 2em;
390 | 	}
391 | }
392 | 
393 | .volume_bar {
394 | 	opacity: 0;
395 | }
396 | 
397 | .footer_buttons {
398 | 	display: flex;
399 | 	justify-content: center;
400 | }
401 | 
402 | .footer_btn {
403 | 	position: relative;
404 | 	font-size: 1.2em;
405 | 	text-align: center;
406 | 	text-transform: uppercase;
407 | 	font-weight: 700;
408 | 	display: flex;
409 | 	justify-content: center;
410 | 	margin: 20px;
411 | 	> a {
412 | 		display: flex;
413 | 		justify-content: center;
414 | 		align-items: center;
415 | 		text-decoration: none;
416 | 		width: 250px;
417 | 		height: 60px;
418 | 		border-radius: 5px;
419 | 		border: 1px solid white !important;
420 | 	}
421 | 	.fa {
422 | 		font-size: 2.5em;
423 | 		padding-right: 10px;
424 | 	}
425 | 	sub {
426 | 		position: absolute;
427 | 	}
428 | }
429 | 


--------------------------------------------------------------------------------
/app/sounds/beach.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/beach.mp3


--------------------------------------------------------------------------------
/app/sounds/beach.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/beach.ogg


--------------------------------------------------------------------------------
/app/sounds/birds.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/birds.mp3


--------------------------------------------------------------------------------
/app/sounds/birds.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/birds.ogg


--------------------------------------------------------------------------------
/app/sounds/brownnoise.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/brownnoise.mp3


--------------------------------------------------------------------------------
/app/sounds/brownnoise.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/brownnoise.ogg


--------------------------------------------------------------------------------
/app/sounds/cat_purr.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/cat_purr.mp3


--------------------------------------------------------------------------------
/app/sounds/cat_purr.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/cat_purr.ogg


--------------------------------------------------------------------------------
/app/sounds/drops.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/drops.mp3


--------------------------------------------------------------------------------
/app/sounds/drops.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/drops.ogg


--------------------------------------------------------------------------------
/app/sounds/fire.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/fire.mp3


--------------------------------------------------------------------------------
/app/sounds/fire.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/fire.ogg


--------------------------------------------------------------------------------
/app/sounds/forest.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/forest.mp3


--------------------------------------------------------------------------------
/app/sounds/forest.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/forest.ogg


--------------------------------------------------------------------------------
/app/sounds/leaves.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/leaves.mp3


--------------------------------------------------------------------------------
/app/sounds/leaves.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/leaves.ogg


--------------------------------------------------------------------------------
/app/sounds/pinknoise.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/pinknoise.mp3


--------------------------------------------------------------------------------
/app/sounds/pinknoise.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/pinknoise.ogg


--------------------------------------------------------------------------------
/app/sounds/rain.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/rain.mp3


--------------------------------------------------------------------------------
/app/sounds/rain.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/rain.ogg


--------------------------------------------------------------------------------
/app/sounds/river.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/river.mp3


--------------------------------------------------------------------------------
/app/sounds/river.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/river.ogg


--------------------------------------------------------------------------------
/app/sounds/sheep.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/sheep.mp3


--------------------------------------------------------------------------------
/app/sounds/sheep.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/sheep.ogg


--------------------------------------------------------------------------------
/app/sounds/thunder.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/thunder.mp3


--------------------------------------------------------------------------------
/app/sounds/thunder.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/thunder.ogg


--------------------------------------------------------------------------------
/app/sounds/windchimes.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/windchimes.mp3


--------------------------------------------------------------------------------
/app/sounds/windchimes.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petrovicstefanrs/chillnsound/ff558df6f62bbfe3b2bff32ab2cf477933b8103d/app/sounds/windchimes.ogg


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | var gulp = require('gulp');
  2 | var sass = require('gulp-sass');
  3 | var browserSync = require('browser-sync');
  4 | var useref = require('gulp-useref');
  5 | var uglify = require('gulp-uglify');
  6 | var gulpIf = require('gulp-if');
  7 | var cssnano = require('gulp-cssnano');
  8 | var imagemin = require('gulp-imagemin');
  9 | var cache = require('gulp-cache');
 10 | var del = require('del');
 11 | var runSequence = require('run-sequence');
 12 | // Development Tasks 
 13 | // -----------------
 14 | 
 15 | // Start browserSync server
 16 | gulp.task('browserSync', function() {
 17 |   browserSync({
 18 |     server: {
 19 |       baseDir: 'app'
 20 |     }
 21 |   })
 22 | })
 23 | 
 24 | gulp.task('sass', function() {
 25 |   return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
 26 |     .pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
 27 |     .pipe(gulp.dest('app/css')) // Outputs it in the css folder
 28 |     .pipe(browserSync.reload({ // Reloading with Browser Sync
 29 |       stream: true
 30 |     }));
 31 | })
 32 | 
 33 | // Watchers
 34 | gulp.task('watch', function() {
 35 |   gulp.watch('app/scss/**/*.scss', ['sass']);
 36 |   gulp.watch('app/*.html', browserSync.reload);
 37 |   gulp.watch('app/js/**/*.js', browserSync.reload);
 38 | })
 39 | 
 40 | // Optimization Tasks 
 41 | // ------------------
 42 | 
 43 | // Optimizing CSS and JavaScript 
 44 | gulp.task('useref', function() {
 45 | 
 46 |   return gulp.src('app/*.html')
 47 |     .pipe(useref())
 48 |     .pipe(gulpIf('*.js', uglify()))
 49 |     .pipe(gulpIf('*.css', cssnano()))
 50 |     .pipe(gulp.dest('dist'));
 51 | });
 52 | 
 53 | // Optimizing Images 
 54 | gulp.task('images', function() {
 55 |   return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
 56 |     // Caching images that ran through imagemin
 57 |     .pipe(cache(imagemin({
 58 |       interlaced: true,
 59 |     })))
 60 |     .pipe(gulp.dest('dist/images'))
 61 | });
 62 | 
 63 | // Copying fonts 
 64 | gulp.task('fonts', function() {
 65 |   return gulp.src('app/fonts/**/*')
 66 |     .pipe(gulp.dest('dist/fonts'))
 67 | })
 68 | 
 69 | // Copying sounds
 70 | gulp.task('sounds', function() {
 71 |   return gulp.src('app/sounds/**/*')
 72 |     .pipe(gulp.dest('dist/sounds'))
 73 | })
 74 | 
 75 | // Cleaning 
 76 | gulp.task('clean', function() {
 77 |   return del.sync('dist').then(function(cb) {
 78 |     return cache.clearAll(cb);
 79 |   });
 80 | })
 81 | 
 82 | gulp.task('clean:dist', function() {
 83 |   return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*', '!dist/sounds', '!dist/sounds/**/*']);
 84 | });
 85 | 
 86 | // Build Sequences
 87 | // ---------------
 88 | 
 89 | gulp.task('default', function(callback) {
 90 |   runSequence(['sass', 'browserSync'], 'watch',
 91 |     callback
 92 |   )
 93 | })
 94 | 
 95 | gulp.task('build', function(callback) {
 96 |   runSequence(
 97 |     'clean:dist',
 98 |     'sass',
 99 |     ['useref', 'images', 'fonts','sounds'],
100 |     callback
101 |   )
102 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portfolio",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "Stefan Petrovic",
10 |   "license": "MIT",
11 |   "devDependencies": {
12 |     "browser-sync": "^2.18.11",
13 |     "del": "^2.2.2",
14 |     "gulp": "^3.9.1",
15 |     "gulp-cache": "^0.4.6",
16 |     "gulp-cssnano": "^2.1.2",
17 |     "gulp-if": "^2.0.2",
18 |     "gulp-imagemin": "^3.2.0",
19 |     "gulp-sass": "^3.1.0",
20 |     "gulp-uglify": "^2.1.2",
21 |     "gulp-useref": "^3.1.2",
22 |     "run-sequence": "^1.2.2"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------