v0.1.1

20essentials · Jan 3, 2025 · a2fa71c · a2fa71c
1 parent 7c11d00
commit a2fa71c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 76 deletions.
diff --git a/playlist/index.js b/playlist/index.js
@@ -10,7 +10,6 @@ if (localStorage.getItem('lastNameCardClicked')) {
   lastNameCard = localStorage.getItem('lastNameCardClicked');
   let listNameCards = JSON.parse(localStorage.getItem('listname-cards'));
   let currentArray = listNameCards[lastNameCard];
-  console.log(currentArray);
   if (currentArray.length > 0) {
     nameSongs = currentArray.map(el => {
       let name = el[0].replace(/\&amp\;/g, '&');
@@ -58,13 +57,6 @@ function toCapitalize(text = '') {
 }
 
 function updateMetadata(currentIndex = 0) {
-  let currentUrl =
-    window
-      .getComputedStyle(
-        document.querySelectorAll('.card')[currentIndex].querySelector('.img')
-      )
-      .getPropertyValue('background-image') ?? '1';
-
   navigator.mediaSession.metadata = new MediaMetadata({
     title: `${toCapitalize(playlist[currentIndex].title)}`,
     artist: `${toCapitalize(playlist[currentIndex].artist)}`,
@@ -106,7 +98,7 @@ function previousTrack(currentIndex) {
     $audio.loop = false;
     actualButtonPlayActive(currentIndex);
     nextTrack(currentIndex);
-    showTitle(currentIndex)
+    showTitle(currentIndex);
   });
 }
 
@@ -120,7 +112,7 @@ function nextTrack(currentIndex) {
     $audio.loop = false;
     actualButtonPlayActive(currentIndex);
     previousTrack(currentIndex);
-    showTitle(currentIndex)
+    showTitle(currentIndex);
   });
 }
 
@@ -165,30 +157,7 @@ const headerColors = {
 };
 
 /******************** FUNCTIONS ********************/
-
-(function generate4Fotos() {
-  //
-  let fourValues = [],
-    nRandom = null;
-
-  for (let i = 0; i < 4; i++) {
-    do {
-      nRandom = Math.floor(Math.random() * 101);
-    } while (fourValues.includes(nRandom) || nRandom === 0);
-
-    fourValues.push(nRandom);
-  }
-
-  const [n1, n2, n3, n4] = fourValues;
-
-  function addVariable(n$, num) {
-    document.documentElement.style.setProperty(
-      `--image-${num}`,
-      `url('${n$}'), linear-gradient(90deg, #ffffff33, #ffffff80, #ffffff33)
-      `
-    );
-  }
-
+(function generaCardImages() {
   $$('.card').forEach((card, index) => {
     card.style.setProperty(
       `--image-bg`,
@@ -317,7 +286,7 @@ const playAllSongs = (songs, selector) => {
         $audio.src = arraySongs[currentIndex];
         $audio.loop = false;
         actualButtonPlayActive(currentIndex);
-        showTitle(currentIndex)
+        showTitle(currentIndex);
       }
 
       function previousTrack(currentIndex) {
@@ -365,11 +334,9 @@ const playRandomSongs = (songs, selector) => {
     listNumbersSongs = [];
   }
 
-  let unArray = [],
-    i,
-    valor;
+  let unArray = [], valor;
 
-  for (i = 0; i < songs.length; i++) {
+  for (let i = 0; i < songs.length; i++) {
     do {
       valor = Math.floor(Math.random() * songs.length);
     } while (unArray.includes(valor));
@@ -403,7 +370,7 @@ const playRandomSongs = (songs, selector) => {
         $audio.loop = false;
         updateMetadata(unArray[currentIndex]);
         actualButtonPlayActive(unArray[currentIndex]);
-        showTitle(unArray[currentIndex])
+        showTitle(unArray[currentIndex]);
       }
 
       function previousTrackOfRandomSongs(currentIndex) {
@@ -639,12 +606,6 @@ d.addEventListener('click', e => {
 
   if (e.target.matches(cardPlayListButton)) {
     let index = [...$$('.card')].indexOf(e.target.closest('.card'));
-    let lastLetterUrl = localStorage.getItem('iframeUrl').at(-1);
-    let urlPuro =
-      lastLetterUrl === '/'
-        ? localStorage.getItem('iframeUrl')
-        : `${localStorage.getItem('iframeUrl')}/`;
-
     let currentNameSong = [...$$('.card')][index].querySelector(
       '.card-right-top'
     ).innerHTML;
@@ -655,18 +616,19 @@ d.addEventListener('click', e => {
   }
 
   if (e.target.matches('.cerrar')) {
-    let $containerModal = $('.container-modal');
     e.target.parentElement.close();
     $('.am-modal')
       .querySelector('.container-add-playlist')
       .classList.remove('mode-active');
     d.getElementById('agregarPlaylistInput').value = '';
   }
+
   if (e.target.matches('.container-add-playlist')) {
     e.target.classList.add('mode-active');
     d.getElementById('agregarPlaylistInput').focus();
     return;
   }
+
   if (e.target.matches('.container-inputs input[type=submit]')) {
     let input = e.target.previousElementSibling.previousElementSibling;
     let inputValor =
@@ -1022,7 +984,6 @@ function pickCards(allCards, listNumbersSongs) {
 }
 
 /******************** REMOVE ANIMATION VIEW() OF CARDS ********************/
-
 const cards = document.querySelectorAll('.card');
 
 const observer = new IntersectionObserver(

diff --git a/script.js b/script.js
@@ -25,7 +25,7 @@ const bands = [
   ['Beauz', `${path}/beauz/`],
   ['Blueberry', `${path}/blueberry/`],
   ['Blackbear', `${path}/blackbear/`],
-  ['Bastille', `${path}/bastille/`],  
+  ['Bastille', `${path}/bastille/`],
   ['Blur', `${path}/blur-ost/`],
   ['Ben 10', `${path}/ben-10/`],
   ['Bruce Springsteen', `${path}/bruce-springsteen/`],

diff --git a/styles.css b/styles.css
@@ -11,7 +11,7 @@ body {
   width: 100%;
   height: 100%;
   max-width: 2400px;
-  height: 100dvh;
+  max-height: 100vh;
   margin-inline: auto;
   position: relative;
   background-color: transparent;
@@ -1071,6 +1071,11 @@ body {
     zoom: 0.3;
     pointer-events: none;
 
+    @media (width <= 1000px) {
+      width: 200px;
+      height: 300px;
+    }
+
     .lado {
       position: absolute;
       left: 0;
@@ -1094,10 +1099,14 @@ body {
   .container-pretriang {
     position: relative;
     top: -190px;
-    height: 100dvh;
+    height: 100vh;
     width: 100%;
     left: 0;
-    zoom: 0.45;
+    zoom: .4;
+
+    @media (width <= 1111px) {
+      zoom: .5;
+    }
 
     .container-cube {
       --size: 200px;
@@ -1168,7 +1177,7 @@ body {
     background-color: #000;
     display: flex;
     flex-wrap: wrap;
-    height: 100dvh;
+    height: 100vh;
     place-content: center;
     zoom: 0.45;
 
@@ -1277,7 +1286,8 @@ body {
     zoom: 0.4;
 
     @media (width <= 1111px) {
-      zoom: 0.3;
+      top: -285px;
+      zoom: 0.35;
     }
 
     .block {
@@ -1756,7 +1766,7 @@ body {
     zoom: 0.35;
 
     @media (width <= 1111px) {
-      zoom: 0.3;
+      zoom: 0.33;
     }
 
     .base {
@@ -1834,7 +1844,7 @@ body {
     animation: rotarTetr 30s linear infinite alternate both;
 
     @media (width <= 1111px) {
-      zoom: 0.3;
+      zoom: 0.33;
       top: -240px;
     }
 
@@ -1920,7 +1930,7 @@ body {
     zoom: 0.4;
 
     @media (width <= 1111px) {
-      zoom: 0.3;
+      zoom: 0.38;
       top: -240px;
     }
 
@@ -2021,7 +2031,6 @@ body {
     zoom: 0.4;
 
     @media (width <= 1111px) {
-      zoom: 0.35;
       top: -220px;
     }
 
@@ -2347,7 +2356,7 @@ body {
     pointer-events: none;
 
     @media (width <= 1111px) {
-      zoom: 0.3;
+      zoom: 0.38;
       top: -210px;
     }
 
@@ -2425,8 +2434,8 @@ body {
     pointer-events: none;
 
     @media (width <= 1111px) {
-      zoom: 0.25;
-      top: -250px;
+      zoom: 0.3;
+      top: -290px;
     }
 
     &.pause {
@@ -2575,8 +2584,7 @@ body {
     zoom: 0.5;
 
     @media (width <= 1111px) {
-      zoom: 0.45;
-      top: -190px;
+      top: -205px;
     }
 
     .side {
@@ -2658,7 +2666,7 @@ body {
     top: -100px;
 
     @media (width <= 1111px) {
-      top: -170px;
+      top: -120px;
     }
 
     &.pyramid-top {
@@ -3186,7 +3194,7 @@ body {
   flex-wrap: wrap;
   place-content: center;
   width: 100%;
-  max-height: 100dvh;
+  min-height: 100vh;
   z-index: 800;
   background-color: transparent;
   transform-style: preserve-3d;
@@ -3195,6 +3203,14 @@ body {
   .container-loader {
     transform-style: preserve-3d;
     perspective: 10000px;
+
+    @media (width <= 1111px) {
+      transform: translateY(-70px);
+    }
+  }
+
+  @media (width <= 800px) and (orientation: portrait) {
+    transform: translateY(-50px);
   }
 }
 
@@ -3218,6 +3234,12 @@ body {
   background-size: 1000% 100%;
   animation: cambiar 5s ease infinite alternate;
 
+  @media (width <= 800px) and (orientation: portrait) {
+    width: 72%;
+    margin-inline: auto;
+    transform:  translate(-50%, -50%) translateY(-60px);
+  }
+
   .autocomplete {
     position: relative;
     width: 100%;
@@ -3355,16 +3377,6 @@ body {
   }
 }
 
-@media (orientation: portrait) and (width <=800px) {
-  .theForm {
-    width: 72%;
-    margin-inline: auto;
-  }
-  .centrar {
-    transform: translateY(-50px);
-  }
-}
-
 /* ============================KEYFRAMES============================*/
 
 /* Gotas de lluvia */
@@ -3374,7 +3386,7 @@ body {
   }
 
   100% {
-    transform: translateY(calc(100dvh + 200px));
+    transform: translateY(calc(100vh + 200px));
   }
 }