3 Eerste opzet create playlist feature Patrick

public/script.js

@@ -1,4 +1,6 @@
 // elements selecteren
+let image_preview = document.getElementById('file')
+let button_preview = document.querySelector('.file-input label')
 let hamburger = document.querySelector('.hamburger')
 let navMenu = document.querySelector('.desktop')
 let body = document.querySelector('body')
@@ -15,6 +17,8 @@ hamburger.addEventListener('click', () => {
   hamburger.classList.toggle('active-bar')
 })
 
+
+
 // PE suggested + liked playlist section
 // JS code added & removing styling without JS
 body.classList.remove('liked-no-js', 'sug-no-js')
@@ -64,4 +68,67 @@ forms.forEach(function (form) {
   })
 })
 
-// Allstories carousel
+button_preview.classList.add("preview-enhanced");
+
+// Allstories carousel
+image_preview.addEventListener('change', function(event) {
+  if (event.target.files.length > 0) {
+    let src = URL.createObjectURL(event.target.files[0]);
+    let preview = document.getElementById("image-preview");
+    preview.src = src;
+    preview.style.display = "block";
+    preview.style.height = "130px";
+
+    startConfetti();
+  }
+});
+
+
+function startConfetti() {
+  const canvas = document.getElementById('confetti-canvas');
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  const confettiCount = 150;
+  const confetti = [];
+
+  for (let i = 0; i < confettiCount; i++) {
+    confetti.push({
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height - canvas.height,
+      r: Math.random() * 4 + 1,  // radius
+      d: Math.random() * confettiCount,  // density
+      color: `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`,
+      tilt: Math.random() * 10 - 10,
+      tiltAngleIncremental: Math.random() * 0.07 + 0.05,
+      tiltAngle: 0
+    });
+  }
+
+  function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    confetti.forEach((confetto, index) => {
+      confetto.tiltAngle += confetto.tiltAngleIncremental;
+      confetto.y += (Math.cos(confetto.d) + 3 + confetto.r / 2) / 2;
+      confetto.tilt = Math.sin(confetto.tiltAngle - index / 3) * 15;
+
+      if (confetto.y > canvas.height) {
+        confetto.x = Math.random() * canvas.width;
+        confetto.y = -20;
+      }
+
+      ctx.beginPath();
+      ctx.lineWidth = confetto.r;
+      ctx.strokeStyle = confetto.color;
+      ctx.moveTo(confetto.x + confetto.tilt + confetto.r, confetto.y);
+      ctx.lineTo(confetto.x + confetto.tilt, confetto.y + confetto.tilt + confetto.r);
+      ctx.stroke();
+    });
+
+    requestAnimationFrame(draw);
+  }
+
+  draw();
+}

public/style-playlist.css

@@ -0,0 +1,138 @@
+.add-playlist {
+  cursor: pointer;
+}
+
+#playlist {
+  opacity: 0;
+  position: absolute;
+  top: -1000px; /* Keep it at the top when open */
+  right: 0;
+  left: 0;
+  height: 100vh;
+  background-color: rgba(41, 41, 41, 0.95);
+  text-align: center;
+  transition: all 0.5s ease-in-out;
+  -webkit-transition: all 0.5s ease-in-out;
+  z-index: 999;
+}
+
+#playlist:target {
+  position: fixed;
+  opacity: 1;
+  top: 0; /* Keep it at the top when open */
+  right: 0;
+  left: 0;
+  text-align: center;
+  background-color: rgba(41, 41, 41, 0.95);
+  height: 100vh;
+  transform: translateY(0);
+  transition: all 0.5s ease-in-out;
+  -webkit-transition: all 0.5s ease-in-out;
+  z-index: 999;
+}
+
+.playlist > a {
+  font-size: 2em;
+  right: 2em;
+  top: 0.75em;
+  position: absolute;
+  transition: all 0.5s ease-in-out;
+  -webkit-transition: all 0.5s ease-in-out;
+}
+
+.playlist form {
+  height: 100%;
+  align-content: center;
+}
+
+.playlist form > h1 {
+  margin-bottom: 1em;
+}
+
+.playlist form > img {
+  align-self: center;
+}
+
+.playlist form > div:first-of-type {
+  display: grid;
+}
+
+.playlist form > div:first-of-type > img {
+  justify-self: center;
+  margin-bottom: 2em;
+}
+
+.playlist form > div:first-of-type > input {
+  width: 50%;
+  margin: auto;
+  padding-block: 0.5em;
+  border: none;
+  border-bottom: 2px solid white;
+  color: white;
+  font-size: 1.5em;
+  text-align: center;
+  background: none;
+  font-weight: bold;
+}
+
+.playlist form > div:last-of-type {
+  display: flex;
+  justify-content: center;
+  margin-block: 1em;
+  gap: 2em;
+}
+
+.file {
+  opacity: 0;
+  width: 0.1px;
+  height: 0.1px;
+  position: absolute;
+}
+
+.file-input label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75em;
+  padding-inline: 2em;
+  margin-top: 2em;
+  border-radius: 0.5em;
+  cursor: pointer;
+  box-shadow: 0px 4px 7px rgb(255 255 255 / 63%);
+  border-top: 1px solid rgb(255 255 255 / 50%);
+  margin-bottom: 1em;
+  display: none;
+}
+
+.file-input label.preview-enhanced {
+  display: flex;
+}
+
+.playlist form > div:last-of-type > button {
+  border-radius: 0.5em;
+  padding: 0.75em;
+  padding-inline: 2em;
+  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
+  margin-top: 2em;
+  box-shadow: 0px 4px 7px rgb(255 255 255 / 63%);
+  border-top: 1px solid rgb(255 255 255 / 50%);
+  margin-bottom: 1em;
+}
+
+#playlist-form:valid .submitButton {
+  box-shadow: 0px 4px 7px rgb(30 255 89 / 63%);
+  border-top: 1px solid rgba(83, 236, 44, 0.5);
+}
+
+#confetti-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none; /* Ensure the canvas doesn't block other interactions */
+}
+
+
+
+
+

views/lessons.ejs

@@ -11,18 +11,39 @@
         </ol>
     </header>
 
-    <section class="own-playlist">
+    <section>
         <h2>Own playlist</h2>
         <div>
             <article>
-                <%- include('./partials/svg-plus') %>
-                <h5>Make a playlist!</h5>
-                <p>Add your favourite stories in one playlist</p>
+                <div class="add-playlist">
+                    <a href="#playlist">
+                        <%- include('./partials/svg-plus') %>
+                        <h5>Create a playlist!</h5>
+                        <p>Add your favourite stories in one playlist</p>
+                    </a>
+                </div>
             </article>
 
+            <div id="playlist" class="playlist">
+                <a href="#" class="close-playlist">X</a>
+                <form id="playlist-form" method="post">
+                    <h1>Choose a name for your playlist</h1>
+                    <div>
+                        <img hidden src="#" alt="Your image"  id="image-preview"> 
+                        <input id="playlistName" type="text" required placeholder="Name playlist" name="NewPlaylists">
+                        <canvas id="confetti-canvas"></canvas>
+                    </div>
+                    <div class="file-input">
+                        <label for="file">Select image</p>
+                        </label>
+                        <input class="file" id="file" type="file" accept="image/*" />
+                        <button class="submitButton">Create playlist</button>
+                    </div>
+                </form>
+            </div>
+
             <%- include('./partials/playlist') %>
         </div>
-
     </section>
 
     <section class="all-stories">

views/new-playlist.ejs

@@ -0,0 +1,2 @@
+<%- include('./partials/head') %>
+<%- include('./partials/navigation', {current: '/'}); %>

views/partials/head.ejs

@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/styles.css">
+  <link rel="stylesheet" href="/style-playlist.css">
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js" defer></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Draggable.min.js" defer></script>
   <script src="/script.js" defer></script>