diff --git a/public/script.js b/public/script.js index 1dbe45e4..702fc497 100644 --- a/public/script.js +++ b/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 \ No newline at end of file +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(); +} diff --git a/public/style-playlist.css b/public/style-playlist.css new file mode 100644 index 00000000..fbd662cc --- /dev/null +++ b/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 */ +} + + + + + diff --git a/views/lessons.ejs b/views/lessons.ejs index 5c3816af..71f0453b 100644 --- a/views/lessons.ejs +++ b/views/lessons.ejs @@ -11,18 +11,39 @@ -
+

Own playlist

+
+ X +
+

Choose a name for your playlist

+
+ + + +
+
+ + + +
+
+
+ <%- include('./partials/playlist') %>
-
diff --git a/views/new-playlist.ejs b/views/new-playlist.ejs new file mode 100644 index 00000000..df57f999 --- /dev/null +++ b/views/new-playlist.ejs @@ -0,0 +1,2 @@ +<%- include('./partials/head') %> +<%- include('./partials/navigation', {current: '/'}); %> diff --git a/views/partials/head.ejs b/views/partials/head.ejs index 16eb98c1..b7fd4aab 100644 --- a/views/partials/head.ejs +++ b/views/partials/head.ejs @@ -5,6 +5,7 @@ +