CSS+Vanilla JS shooting stars (P5JS no longuer in use but still there); more styling; favicons; Trying to get in touch with Bandcamp

2 years ago · 6d916f1951
16 changed files with 426 additions and 271 deletions
--- a/css/main.css
+++ b/css/main.css
@ -5,13 +5,40 @@
  --accent-color-1: #ff91d8;
  --accent-color-1-light: #ffcdff;
  --accent-color-2: #ffff7d;
+
+  --crossfader-thumb-width: 30px;
+  --crossfader-thumb-height: 60px;
+  --crossfader-thumb-radius: 15px;
+
 }

+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(fonts/Roboto Regular.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url(fonts/Roboto Thin.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url(fonts/Roboto Black.woff2) format('woff2');
+}

 html {
  color: var(--text-color);
  font-size: 1em;
  line-height: 1.4;
+  font-family: Roboto, Arial, sans-serif;
 }

 ::-moz-selection {
@ -52,14 +79,6 @@ textarea {
  resize: vertical;
 }

-/* ==========================================================================
-   Author's custom styles
-   ========================================================================== */
-
-html {
- font-family: Arial, sans-serif;
-}
-
 #bg {
  z-index: -2;
  overflow: hidden;
@ -73,11 +92,8 @@ html {
 #bg img {
  z-index: -1;
  position: fixed;
-  /* max-width: 100%;
-  max-height: 100%; */
 }

-
 #desk {
  /* display: none; */
  display: flex;
@ -92,6 +108,10 @@ html {
  padding-bottom: 2em;
  gap: 15px;
 }
+
+.hidden {
+  display: none;
+}
 .player {
  max-width: 480px;
  display: flex;
@ -124,9 +144,11 @@ iframe {

 .load-button {
  /* flex-grow: 2; */
+  cursor: pointer;
  border: none;
  background-color: var(--accent-color-2);
  color: var(--bg-color);
+  font-weight: 900;
  border-radius: 5px;
  /* padding: 2em; */
  width: 50%;
@ -137,10 +159,12 @@ iframe {
  font-size: 0.8em;

  margin: auto;
+  font-weight: 100;
  color: var(--text-color-light);
 }

 .control-label span {
+  font-weight: 400;
  color: var(--accent-color-2);
 }

@ -179,10 +203,35 @@ span.volume-value {
  display: inline-block;
 }

-#crossfader {
+
+#crossfader-wrapper {
  width: 30em;
  padding: 3em 0;
 }
+#crossfader {
+  width: 100%;
+  z-index: 2;
+}
+
+.graduations {
+  z-index: 0;
+  width: 100;
+  margin: 0 13px 0 13px;
+  display: flex;
+  justify-content: space-between;
+}
+.graduation {
+  z-index: 0;
+  width: 3px;
+  height: 23px;
+  border-radius: 23px;
+  background-color: var(--accent-color-1-light);
+}
+
+.graduation-small {
+  width: 2px;
+  height: 8px;
+}

 /* Custom crossfader styling made using http://danielstern.ca/range.css */
 input[type=range] {
@ -216,10 +265,10 @@ input[type=range]::-moz-range-track {
 }
 input[type=range]::-moz-range-thumb {
  background: var(--accent-color-2);
-  border: solid var(--accent-color-1-light);
+  /* border: solid var(--accent-color-1-light); */
  cursor: pointer;
  border-width: 0px;
-  border-radius: 25px;
+  border-radius: var(--crossfader-thumb-radius);
 }
 input[type=range]::-ms-track {
  background: transparent;
@ -238,7 +287,7 @@ input[type=range]::-ms-fill-upper {
 }
 input[type=range]::-ms-thumb {
  background: var(--accent-color-2);
-  border: solid var(--accent-color-1-light);
+  /* border: solid var(--accent-color-1-light); */
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
@ -256,47 +305,50 @@ input[type=range]#crossfader::-webkit-slider-runnable-track {
 }
 input[type=range]#crossfader::-webkit-slider-thumb {
  margin-top: -20.65px;
-  width: 30px;
-  height: 50px;
-  border-width: 5px;
-  border-radius: 12px;
+  width: var(--crossfader-thumb-width);
+  height: var(--crossfader-thumb-height);
+  /* border-width: 5px;
+  border-radius: 12px; */
 }

 input[type=range]#crossfader::-moz-range-track {
-  border-radius: 25px;
+  /* border-radius: 25px; */
  width: 100%;
  height: 13.3px;
  cursor: pointer;
 }
 input[type=range]#crossfader::-moz-range-thumb {
-  width: 30px;
-  height: 50px;
-  border-width: 5px;
-  border-radius: 12px;
+  width: var(--crossfader-thumb-width);
+  height: var(--crossfader-thumb-height);
+  /* border-width: 5px; */
+  /* border-radius: 12px; */
  cursor: pointer;
 }
 input[type=range]#crossfader::-ms-track {
-  border-width: 18.75px 0;
+  /* border-width: 18.75px 0; */
  height: 13.3px;
 }
 input[type=range]#crossfader::-ms-fill-lower {
-  border-width: 2.3px;
-  border-radius: 50px;
+  /* border-width: 2.3px;
+  border-radius: 50px; */
 }
 input[type=range]#crossfader::-ms-fill-upper {
-  border-radius: 50px;
+  /* border-radius: 50px; */
 }
 input[type=range]#crossfader::-ms-thumb {
-  width: 30px;
-  height: 50px;
-  border-width: 5px;
-  border-radius: 12px;
+  width: var(--crossfader-thumb-width);
+  height: var(--crossfader-thumb-height);
+  /* border-width: 5px;
+  border-radius: 12px; */
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
 }


+.footer {
+  font-weight: 100;
+}
 .footer a, .footer a:visited {
  color: var(--text-color);
  text-decoration: none;
@ -305,176 +357,3 @@ input[type=range]#crossfader::-ms-thumb {
 .footer span {
  cursor: pointer;
 }
-/* ==========================================================================
-   Helper classes
-   ========================================================================== */
-
-/*
- * Hide visually and from screen readers
- */
-
-.hidden,
-[hidden] {
-  display: none !important;
-}
-
-/*
- * Hide only visually, but have it available for screen readers:
- * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- *
- * 1. For long content, line feeds are not interpreted as spaces and small width
- *    causes content to wrap 1 word per line:
- *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
- */
-
-.sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-  /* 1 */
-}
-
-/*
- * Extends the .sr-only class to allow the element
- * to be focusable when navigated to via the keyboard:
- * https://www.drupal.org/node/897638
- */
-
-.sr-only.focusable:active,
-.sr-only.focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  white-space: inherit;
-  width: auto;
-}
-
-/*
- * Hide visually and from screen readers, but maintain layout
- */
-
-.invisible {
-  visibility: hidden;
-}
-
-/*
- * Clearfix: contain floats
- *
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *    `contenteditable` attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that receive the `clearfix` class.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-
-.clearfix::before,
-.clearfix::after {
-  content: " ";
-  display: table;
-}
-
-.clearfix::after {
-  clear: both;
-}
-
-/* ==========================================================================
-   EXAMPLE Media Queries for Responsive Design.
-   These examples override the primary ('mobile first') styles.
-   Modify as content requires.
-   ========================================================================== */
-
-@media only screen and (min-width: 35em) {
-  /* Style adjustments for viewports that meet the condition */
-}
-
-@media print,
-  (-webkit-min-device-pixel-ratio: 1.25),
-  (min-resolution: 1.25dppx),
-  (min-resolution: 120dpi) {
-  /* Style adjustments for high resolution devices */
-}
-
-/* ==========================================================================
-   Print styles.
-   Inlined to avoid the additional HTTP request:
-   https://www.phpied.com/delay-loading-your-print-css/
-   ========================================================================== */
-
-@media print {
-  *,
-  *::before,
-  *::after {
-    background: #fff !important;
-    color: #000 !important;
-    /* Black prints faster */
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-
-  a[href]::after {
-    content: " (" attr(href) ")";
-  }
-
-  abbr[title]::after {
-    content: " (" attr(title) ")";
-  }
-
-  /*
-   * Don't show links that are fragment identifiers,
-   * or use the `javascript:` pseudo protocol
-   */
-  a[href^="#"]::after,
-  a[href^="javascript:"]::after {
-    content: "";
-  }
-
-  pre {
-    white-space: pre-wrap !important;
-  }
-
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-
-  /*
-   * Printing Tables:
-   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
-   */
-  thead {
-    display: table-header-group;
-  }
-
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
-}
--- a/css/shooting-star.css
+++ b/css/shooting-star.css
@ -0,0 +1,160 @@
+:root {
+  --shooting-star-duration: 3000ms;
+  --shooting-star-angle: 10deg;
+  --shooting-star-translate: 300px;
+  --shooting-star-direction: 1; /* 1 or -1 */
+}
+
+
+/* From https://www.geeksforgeeks.org/how-to-create-shooting-star-animation-effect-using-css/ */
+.shooting-stars-wrapper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  -webkit-transform: scaleX(var(--shooting-star-direction)) rotateZ(var(--shooting-star-angle));
+
+  transform: scaleX(var(--shooting-star-direction)) rotateZ(var(--shooting-star-angle));
+
+}
+
+.shooting-star {
+  position: absolute;
+  /* left: 50%; */
+  top: 50%;
+  height: 2px;
+  border-radius: 885px;
+  background: linear-gradient(-45deg, #eef0f5, rgba(0, 0, 255, 0));
+
+  -webkit-filter: drop-shadow(0 0 6px #eef1f8);
+  filter: drop-shadow(0 0 6px #d7dff0);
+
+  -webkit-animation: tail var(--shooting-star-duration) ease-in-out 1,
+    shooting var(--shooting-star-duration) ease-in-out 1;
+  animation: tail var(--shooting-star-duration) ease-in-out 1,
+    shooting var(--shooting-star-duration) ease-in-out 1;
+}
+
+/* .shooting-star.is-shooting {
+  -webkit-animation: tail var(--shooting-star-duration) ease-in-out 1,
+    shooting var(--shooting-star-duration) ease-in-out 1;
+  animation: tail var(--shooting-star-duration) ease-in-out 1,
+    shooting var(--shooting-star-duration) ease-in-out 1;
+} */
+
+/* Here we add before and after effect to star */
+.shooting-star::before,
+.shooting-star::after {
+  content: "";
+  position: absolute;
+  top: calc(50% - 1px);
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    -45deg,
+    rgba(0, 0, 255, 0),
+    #eaeef8,
+    rgba(0, 0, 255, 0)
+  );
+  -webkit-transform: translateX(50%) rotateZ(45deg);
+  transform: translateX(50%) rotateZ(45deg);
+  border-radius: 100%;
+  -webkit-animation: shining var(--shooting-star-duration) ease-in-out 1;
+  animation: shining var(--shooting-star-duration) ease-in-out 1;
+}
+/* .shooting-star.is-shooting::before,
+.shooting-star.is-shooting::after {
+  -webkit-animation: shining var(--shooting-star-duration) ease-in-out 1;
+  animation: shining var(--shooting-star-duration) ease-in-out 1;
+} */
+.shooting-star::after {
+  -webkit-transform: translateX(50%) rotateZ(-45deg);
+  transform: translateX(50%) rotateZ(-45deg);
+}
+
+/* Here we are adding location of each
+nth-child, animations, delays, and
+before and after effects to each
+and every balls(stars) */
+/* .shooting-star:nth-child(1) {
+  top: calc(50% - -119px);
+  left: calc(50% - 43px);
+  -webkit-animation-delay: 4000ms;
+  animation-delay: 4000ms;
+}
+.shooting-star:nth-child(1)::before,
+.shooting-star:nth-child(1)::after {
+  -webkit-animation-delay: 4000ms;
+  animation-delay: 4000ms;
+} */
+
+/* This code will help to generate
+effect in tail of star */
+@keyframes tail {
+  0% {
+    width: 0;
+  }
+  30% {
+    width: 100px;
+  }
+  100% {
+    width: 0;
+  }
+}
+@-webkit-keyframes tail {
+  0% {
+    width: 0;
+  }
+  30% {
+    width: 100px;
+  }
+  100% {
+    width: 0;
+  }
+}
+
+/* This code will generate shining
+effect in head of star */
+@keyframes shining {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 30px;
+  }
+  100% {
+    width: 0;
+  }
+}
+@-webkit-keyframes shining {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 30px;
+  }
+  100% {
+    width: 0;
+  }
+}
+
+/* Here we make shooting effect */
+@keyframes shooting {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+  100% {
+    -webkit-transform: translateX(var(--shooting-star-translate));
+    transform: translateX(var(--shooting-star-translate));
+  }
+}
+@-webkit-keyframes shooting {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+  100% {
+    -webkit-transform: translateX(var(--shooting-star-translate));
+    transform: translateX(var(--shooting-star-translate));
+  }
+}
--- a/favicon.ico
+++ b/favicon.ico
--- a/fonts/Roboto
+++ b/fonts/Roboto
--- a/Regular.woff2
+++ b/Regular.woff2
--- a/fonts/Roboto
+++ b/fonts/Roboto
--- a/img/icon/android-chrome-192x192.png
+++ b/img/icon/android-chrome-192x192.png
--- a/img/icon/android-chrome-512x512.png
+++ b/img/icon/android-chrome-512x512.png
--- a/img/icon/apple-touch-icon.png
+++ b/img/icon/apple-touch-icon.png
--- a/img/icon/favicon-16x16.png
+++ b/img/icon/favicon-16x16.png
--- a/img/icon/favicon-32x32.png
+++ b/img/icon/favicon-32x32.png
--- a/index.html
+++ b/index.html
@ -12,12 +12,14 @@
  <meta property="og:url" content="">
  <meta property="og:image" content="">

-  <link rel="manifest" href="site.webmanifest">
-  <!-- <link rel="apple-touch-icon" href="icon.png"> -->
-  <!-- Place favicon.ico in the root directory -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/img/icon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/img/icon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/img/icon/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">

-  <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="/css/normalize.css">
+  <link rel="stylesheet" href="/css/main.css">
+  <link rel="stylesheet" href="/css/shooting-star.css">

  <meta name="theme-color" content="#fafafa">
 </head>
@ -26,6 +28,9 @@

  <div id="bg">
    <img src="img/stars_1920x1080.svg" alt="A night sky with plenty of stars">
+    <div class="shooting-stars-wrapper">
+      <!-- <div class="shooting-star"></div> -->
+    </div>
  </div>

  <div id="desk">
@ -54,36 +59,43 @@
        </div>
        <input class='load-button' type="button" value="Load new track or playlist">
      </div>
+      <div class="hidden">
+        <!-- <iframe style="border: 0; width: 480px; height: 270px;" src="https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless><a href="https://clett.bandcamp.com/album/tancarville">Tancarville by Clett</a></iframe> -->
+        <!-- For a single track:
+        <iframe style="border: 0; width: 480px; height: 270px;" src="https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless><a href="https://clett.bandcamp.com/album/tancarville">Tancarville by Clett</a></iframe>-->
+      </div>
    </div>

+    <div id="crossfader-wrapper">
      <input type="range" id='crossfader' name="crossfader" min='0' max='1000' value='500'>
-    <!-- <div id="search-area">
-      <div class="search">
-        <input type="button" value="Load new track or playlist">
-
-        <label for="url-player-A">Enter link of a YT video or playlist</label>
-        <input type="url" name="url-player-A" id="url_A" placeholder="https://www.youtube.com/watch?v=...." pattern="https://.*" size="40">
+      <div class="graduations">
+        <div class="graduation"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation graduation-small"></div>
+        <div class="graduation"></div>
      </div>
-      <div class="search">
-        <input type="button" value="Load new track or playlist">
-        <label for="url-player-B">Enter link of a YT video or playlist</label>
-        <input type="url" name="url-player-B" id="url_B" placeholder="https://www.youtube.com/watch?v=...." pattern="https://.*" size="40">
    </div>
-    </div> -->
-    <h1>Mix like a pro youtube DJ!</h1>
+
+    <h1>🔊 Mix like a pro youtube DJ! 🎧</h1>
    <div class="footer">
-      <p><span id='shooting-stars-enable'></span>by <a href="https://tflcl.xyz">tflcl.xyz</a> </p>
+      <p><span id='shooting-stars-enable'></span> ⚒ <a href="https://tflcl.xyz">Made by tflcl.xyz</a> 🧩</p>
    </div>
  </div>



  <script async defer data-website-id="8db8311f-63a6-47d5-a77f-7d9b80db22b1" src="https://stats.tflcl.xyz/sucre.js"></script>
-  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
-  <!-- <script src="./js/vendor/p5.js"></script>
-  <script src="./js/vendor/p5.svg.js"></script>
-  <script src="js/sketch.js"></script> -->
-  <script src="js/main.js"></script>
+  <!-- <script src="/js/vendor/p5.js"></script>
+  <script src="/js/vendor/p5.svg.js"></script>
+  <script src="/js/sketch.js"></script> -->
+  <script src="/js/main.js"></script>


 </body>
--- a/js/main.js
+++ b/js/main.js
@ -51,6 +51,11 @@ class player {
      let url = prompt('Enter a YouTube URL (track or playlist):', 'https://www.youtube.com/watch?v=' + this.trackID);

      if (url) {
+        let resp = check_url(url);
+
+        if (resp < 0) {
+          console.log('Nothing to load!');
+        } else if (resp == 0) {
          let newTrackID = get_video_id(url);
          let newPlaylistID = get_playlist_id(url);

@ -63,6 +68,10 @@ class player {
          } else {
            console.log('Nothing to load!');
          }
+        } else if (resp == 1) {
+          fetch_bandcamp_url(url);
+        }
+

      }
    });
@ -124,7 +133,7 @@ calcCrossfaderCoefs(crossfader.value);

 crossfader.addEventListener('input', (e) => {
  //Makes the slider stick on the middle
-  if (Math.abs(crossfader.value - 500) < 15) {
+  if (Math.abs(crossfader.value - 500) < 20) {
    crossfader.value = 500;
  }

@ -155,6 +164,16 @@ function calcCrossfaderCoefs(input) {
  playerB.crossfaderCoef = coefB;
 }

+function check_url(url) {
+  let test = url.indexOf('youtu');
+  if (test > -1 && test < 13) {
+    return 0; //It's most likely a youtube link
+  } else if (url.indexOf('.bandcamp') > -1 || url.indexOf('/album/') > -1 || url.indexOf('/track/') > -1) {
+    return 1; //It's most likely a bandcamp link
+  } else {
+    return -1; //Wrong link
+  }
+}

 // From https://stackoverflow.com/a/55616161/14182148
 function get_playlist_id(url) {
@ -184,16 +203,15 @@ function get_video_id(url) { //originally 'video_id_from_playlist'
    }
 }

-// From https://thomaspark.co/projects/needledrop/ by Thomas Park
-// function getYouTubeID(url){
-//   url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-//   return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : false;
-// }
-
-// function get_video_id(url) {
-//     url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-//     return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
-// }
+function fetch_bandcamp_url(url) {
+  let iframe = document.createElement('iframe');
+  iframe.setAttribute('class','hidden');
+  iframe.setAttribute('src',url);
+  playerB.node.parentNode.appendChild(iframe);
+  console.log(iframe);
+  let scrap = iframe.contentWindow.document.querySelector('script[data-tralbum]');
+  console.log('scrap: ' + scrap);
+}

 function componentToHex(c) {
  var hex = c.toString(16);
@ -201,20 +219,101 @@ function componentToHex(c) {
 }

 // Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg
-if (typeof variable !== 'undefined') {
-  let separatorSpan = document.createElement('span');
-  separatorSpan.innerHTML = ' - ';
-  document.getElementById('shooting-stars-enable').after(separatorSpan);
-  document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+
+let bcURL = 'https://clett.bandcamp.com/track/placenta';
+// let html = async await fetch(bcURL).text(); // html as text
+// let doc = new DOMParser().parseFromString(html, 'text/html');
+// doc.title; doc.body;
+
+// let Http = new XMLHttpRequest();
+// Http.open("GET", bcURL);
+// Http.send();
+//
+// Http.onreadystatechange = (e) => {
+//   console.log(Http.responseText)
+// }
+
+let areStarsShooting = true;
+let shootingStarWrapper = document.getElementsByClassName('shooting-stars-wrapper')[0];
+let shootingStar;
+
+function newShootingStar() {
+  shootingStar = document.createElement('div');
+
+  let topStart = Math.floor(0.6 * window.innerHeight * Math.random());
+  let leftStart = Math.floor(window.innerWidth * (0.1 + 0.8 * Math.random()));
+  let duration = 1000 + Math.floor(Math.random() * 5000);
+  let distance = 200 + Math.floor(Math.random() * 500);
+  let angle = Math.floor(Math.random() * 30) - 15;
+  let direction = Math.random() < 0.5 ? -1 : 1;
+
+  shootingStar.style.top = topStart + 'px';
+  shootingStar.style.left = leftStart + 'px';
+  // root.style.setProperty('--shooting-star-duration', duration + "px");
+  // shootingStarCSS.insertRule(':root{--shooting-star-duration: '+ duration + 'ms}');
+
+  document.documentElement.style.setProperty('--shooting-star-duration', duration + "ms");
+  document.documentElement.style.setProperty('--shooting-star-translate', distance + "px");
+  document.documentElement.style.setProperty('--shooting-star-angle', angle + "deg");
+  document.documentElement.style.setProperty('--shooting-star-direction', direction);
+
+
+
+  shootingStarWrapper.appendChild(shootingStar);
+  shootingStar.classList.add('shooting-star');
+
+  setTimeout(() => {
+    shootingStar.remove();
+    // let nextIn = 10;
+    let nextIn =  7000 + Math.floor(Math.random() * 5000);
+    if (areStarsShooting) {
+      setTimeout('newShootingStar()', nextIn);
+    }
+  }, duration);
+  // setTimeout('newShootingStar()', duration + nextIn);
 }
+// function endShootingStar(el) {
+//   el.remove();
+//   console.log('removed!');
+//   let nextIn = 4000;
+//   setTimeout('newShootingStar()', nextIn);
+// }
+
+newShootingStar();
+
+// Enable/disable shooting stars
+let separatorSpan = document.createElement('span');
+separatorSpan.innerHTML = ' - ';
+document.getElementById('shooting-stars-enable').after(separatorSpan);
+document.getElementById('shooting-stars-enable').innerHTML = '⭐️Disable shooting stars⭐️';
+
 document.getElementById('shooting-stars-enable').addEventListener('click', () => {
-  if (processingIsOn) {
-    processingSketch.frameRate(0);
-    document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐️';
-    processingIsOn = false;
+  if (areStarsShooting) {
+    document.getElementById('shooting-stars-enable').innerHTML = '⭐️Enable shooting stars⭐️';
+    areStarsShooting = false;
  } else {
-    processingSketch.frameRate(24);
-    document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
-    processingIsOn = true;
+    document.getElementById('shooting-stars-enable').innerHTML = '⭐️Disable shooting stars⭐️';
+    areStarsShooting = true;
+    newShootingStar();
  }
 });
+
+
+// Enable/disable shooting stars (with P5JS background)
+// if (typeof processingSketch !== 'undefined') {
+//   let separatorSpan = document.createElement('span');
+//   separatorSpan.innerHTML = ' - ';
+//   document.getElementById('shooting-stars-enable').after(separatorSpan);
+//   document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+// }
+// document.getElementById('shooting-stars-enable').addEventListener('click', () => {
+//   if (processingIsOn) {
+//     processingSketch.frameRate(0);
+//     document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐️';
+//     processingIsOn = false;
+//   } else {
+//     processingSketch.frameRate(24);
+//     document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+//     processingIsOn = true;
+//   }
+// });
--- a/js/sketch.js
+++ b/js/sketch.js
@ -1,6 +1,7 @@
 // Another possible inspiration: https://www.khanacademy.org/computer-programming/twinkle-twinkle/6280832014565376
-
 let sketch = function(p) {
+  let svgExport = false; // To export the result to SVG
+
  let bgCol = hexToRgb('#222233');
  let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')]

@ -25,9 +26,13 @@ let sketch = function(p) {
    p.frameRate(24);
    currentWidth = p.windowWidth;
    currentHeight = p.windowHeight;
-    // p.createCanvas(currentWidth, currentHeight);
+
+    if (svgExport) {
      p.createCanvas(1920, 1080, p.SVG) // To export the result to SVG
      p.noLoop(); // To export the result to SVG
+    } else {
+      p.createCanvas(currentWidth, currentHeight);
+    }

    bgInit();

@ -57,8 +62,10 @@ let sketch = function(p) {


    time += 1;
-    p.save(); // To export the result to SVG

+    if (svgExport) {
+        p.save(); // To export the result to SVG
+    }
  } //End of draw()

  class Stars {
--- a/js/vendor/modernizr-3.11.2.min.js
+++ b/js/vendor/modernizr-3.11.2.min.js
--- a/site.webmanifest
+++ b/site.webmanifest
@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/img/icon/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/img/icon/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffff7d","background_color":"#222233","display":"standalone"}
				`@ -0,0 +1 @@`
				`{"name":"","short_name":"","icons":[{"src":"/img/icon/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/img/icon/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffff7d","background_color":"#222233","display":"standalone"}`