<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--<script src="https://unpkg.com/wavesurfer.js"></script>-->
  <script src="public/js/wavesurfer/wavesurfer.js"></script>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <link href="public/css/ribbons.css" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <link rel="shortcut icon" href="public/img/icon.ico">
  <title>Spotifool - April's Fools</title>
  <base href="/">
</head>

<style>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css);
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");

:root {
  --color: #faa700;
  --color-light: #f5ede1;
  --dark: #a7a7a7;
  --dark: #8a8a8a;
  --darker: #303030;
  --sans-serif: 'Roboto', sans-serif;
}

body {
  font-family: var(--sans-serif);
  background: #eeeeee;
}

body {
  /*background: #383427;*/
  background: #000;
}

.hidden
{
  display: none !important;
}

.anim-spinning
{
  animation: rotate 2s infinite;
  animation-timing-function: cubic-bezier(1,0,.5,1);
}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg) } 
    to { -webkit-transform: rotate(360deg) } 
}

a
{
  color: #d2b48c;
  text-decoration: underline;
}

a:hover
{
  color: dimgray;
}

a i.fa
{
  color: #fff;
  font-size: 40px;
  margin-right: 10px;
}
.modal.code
{
  position: fixed;
    top: 40%;
    text-align: center;
    z-index: 1050;
    height: 200px;
    overflow: visible;
    padding:30px;
    display: unset;
}

.modal.code p
{
    margin-top: -83px;
    margin-bottom: 10px;
}

.modal.code input[type="submit"]
{
  margin-top:7px;
}

.ribbon span
{
  background-color: #97101a;
  font: 700 10px/1 'Lato', sans-serif;
  mix-blend-mode: hard-light;
  cursor: pointer;
}

.background {
  width: 100%;
  height: 51.25vw;
  background: url("public/album/ateos/img/volti720.jpg") center/cover;
  box-shadow: inset 0px -8vw 7vw 1vw #000;
  top: 0;
  z-index: -1;
  background-repeat: no-repeat;
  left: 0px;
}

.background img {
  max-width: 100%;
  max-height: 100vh;
  box-shadow: inset 0px -17vw 30vw 1vw #131313;
}
.background + section {
  background: transparent;
  --dark: rgba(white, .5);
  --dark: rgba(white, .6);
  --darker: rgba(white, .8);
}
.background + section .album-tracks {
  background: rgba(0, 0, 0, 0.6);
  border: none;
}

section {
  background: #fafafa;
  margin: -200px 56px;
  padding: 20px 56px;
  color: var(--darker);
  color: rgba(255, 255, 255, 0.8);
}
section.album-info
{
  background-color: rgba(0,0,0,0.6);
}

section .album-info:after {
  content: " ";
  display: block;
  height: 0;
}
section .album-art {
    width: 310px;
    margin-bottom: 20px;
}
section .album-art * {
  border-radius: 3px;
}
section .album-art img {
    width: 100%;
    margin-bottom: 20px;
    /* margin-top: -80px; */
    margin-top: -80px;
    border: 10px solid rgba(0,0,0,0.7);
    box-shadow: 0 5px 60px -3px rgba(0, 0, 0, 0.18);
}
section .play {
  display: -webkit-box;
  display: flex;
  flex-wrap: initial;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  align-content: initial;
  /*color: white;*/
  color: black;
  /*background: var(--color);*/
  background: #d2b48c;
  font-weight: 400;
  padding: 10px;
  text-transform: uppercase;
  -webkit-box-flex: 1;
          flex: 1 0 50%;
}

section .album-details {
  background-color: rgba(0,0,0, 0.6);
  padding: 30px 30px;
}

section h2 {
  display: -webkit-box;
  display: flex;
  flex-wrap: initial;
  -webkit-box-pack: initial;
          justify-content: initial;
  -webkit-box-align: center;
          align-items: center;
  align-content: initial;
  color: var(--dark);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}
section h2 img {
  width: 24px;
  border-radius: 50%;
  margin-right: 10px;
}
section h1 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 50px;
  font-weight: 300;
  word-wrap: break-word;
}
section h1 + span {
  color: var(--dark);
}
section h1 + span span {
  padding-right: 20px;
}
section p {
  margin-top: 15px;
}
section .album-tracks {
  background: #f8f8f8;
  border: 1px solid #efefef;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  section {
    margin: 0px 36px 36px 36px;
    padding: 0;
  }

  section .album-art img
  {
    margin-top: 0;

  }
}
@media (max-width: 700px) {
  section .album-art {
    width: 100%;
  }
  section .album-art img {
    width: auto;
    max-width: 100%;
    margin: -100px auto 10px auto;
    display: block;
  }
  section .album-details {
    float: left;
    max-width: 100%;
  }
}


ol {
  list-style-type: none;
  padding: 20px 36px;
  font-weight: 500;
}
ol li {
  counter-increment: number;
  display: -webkit-box;
  display: flex;
  flex-wrap: initial;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  align-content: initial;
  height: 45px;
  color: var(--dark);
  border-bottom: 1px dashed #888;
  padding: 0 20px;
  cursor: pointer;
}
ol li span:not(:last-child) {
  margin-right: 2em;
}
@media (max-width: 700px) {
  ol li span:not(:last-child) {
    margin-right: 1em;
  }
}
ol li span:first-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--darker);
}
ol li span:first-child:before {
  content: counter(number);
  margin-right: 2em;
  color: var(--dark);
  display: inline-block;
  text-align: end;
  width: 20px;
}

li:hover
{
  background-color: dimgray;
}

li.active, li.active:hover
{
  background-color: tan;
  color: black;
}


.actions {
  display: -webkit-box;
  display: flex;
  flex-wrap: initial;
  -webkit-box-pack: initial;
          justify-content: initial;
  -webkit-box-align: initial;
          align-items: initial;
  align-content: initial;
  -webkit-box-flex: 1;
          flex: 1 1 100%;
  flex-direction: column;
}
.actions div
{
  cursor: pointer;
}

.mini-logo
{
  width: 48px;
}
#waveform
{
  width: 80%;
  margin: 0px auto;
    padding-top: calc(50% - 280px);
}

.song-title, .song-controls
{
  display: block;
  margin: 0 auto;
  width: max-content;
  font-size: 30px;
  color: white;
  background-color: rgba(0,0,0,0.7);
  padding: 0 30px;
}

.song-controls i
{
  margin: 0px 30px;
  cursor: pointer;
}

#waveform wave wave
{
  transform: scaleY(1.4);
}

.song-title h1
{
  font-family:Roboto, sans-serif;
  font-size: 50px;
  font-weight:300;
  margin-bottom: 10px;
}

.song-time
{
  text-align: center;
}

#time-current
{
  color: burlywood;
}

.members
{
  display: inline-block;
  padding-left: 30px;
}

section.album-section
{
  max-width: 1560px;
  margin: 0 auto;
  margin-top: 100px;
}

.donate .button
{
  width: fit-content;
  margin: 0 auto;
}

@media (max-width: 768px) {

  .modal.code p
  { margin-top: -103px; }

  .ribbon-top-right
  {
    display: none;
  }
  section.album-section {
    margin: 100px 20px 20px 20px;
    padding: 20px 0px;
  }
  section.album-section ol {
    padding: 16px;
  }

  .actions .play
  {
    width: 50%;
    margin: 0 auto;
  }

  .actions .code
  {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 20px;
  }
  #waveform
  {
    margin: 0px auto 0px auto;
    padding-top: 80px;
  }

  .song-title
  {
    width: unset;
    font-size: 26px;
  }

  .song-title h1 
  {
    font-size: 30px;
  }

  .background + section 
  {
    margin-top: 0;
  }

  .background
  {
    height: unset;
    background: url(public/album/ateos/img/volti720.jpg) top/contain;
    background-repeat: no-repeat !important;
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 3;
  }

  section .album-art img {
    margin-top: 0;
  }

  section .album-art
  {
    padding: 16px;
  }
  .social
  {
    padding: 10px 0 20px 0;
    text-align: center;
  }
}

.actions .code
{
    background: #97101a;
    margin-top: 10px;
    color: white;
    flex-direction: column;

    display: -webkit-box;
    display: flex;
    flex-wrap: initial;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    align-content: initial;
    font-weight: 400;
    padding: 10px;
    text-transform: uppercase;
    -webkit-box-flex: 1;
    flex: 1 0 50%;
}

.overlay
{
    background: black;
    pointer-events: none;
    z-index: 500;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    position: fixed;
}
</style>

<div class="overlay hidden"></div>
<div class="background ">
      <div class="ribbon ribbon-top-right"><span>Inserisci il <br>codice di ascolto</span></div>
  
  <div id="waveform"></div>
  <div class="song-title"><h1>Caricamento...</h1></div>
  <div class="song-controls">
    <div class="song-time">
      <span id="time-current">00:00</span> / <span id="time-total">00:00</span>
    </div>
    <i class="fa fa-fast-backward"></i>
    <i class="fa fa-refresh anim-spinning"></i>
    <i class="fa fa-play"></i>
    <i class="fa fa-fast-forward"></i>
  </div>
</div>
<section class="album-section">
  <div class="row album-info">
    <div class="col-sm-12 col-lg-4 album-art"><img src="public/album/ateos/img/frontcover.png"/>
      <div class="actions">
        <div class="play">Play</div>
                <div class="code">Inserisci codice di ascolto</div>
              </div>
    </div>
    <div class="col-sm-12 col-lg-8 album-details">
      <h2> <img src="public/img/logo.png" class="mini-logo" />April's Fools</h2>
      <h1>At the Edge of Shadow</h1><span> <span>Genere: Acoustic Rock </span><span>Durata: 45:25</span></span>
      <p>At the Edge of Shadow è il primo album della band acoustic rock April's Fools. <br>
        Prodotto da Marino de Angeli (<a href="https://marinodeangeli.com/">marinodeangeli.com</a>), Davide Florian e Alex Milanese di <a href="https://boxrecord.it/">Box Record</a> al Teatro delle Voci (Treviso) nel Maggio 2016, è stato rilasciato il 1° di Aprile 2023. <br>Disegni fronte/retro copertina di Paolo Antiga (<a href="https://www.comicsbox.it/autore/antiga_paolo">bibliografia dettagliata</a>).<br><br>

        Formazione:
      </p>

      <div class="members">
        Alessio Biasi - Chitarra Acustica<br/>
        Andrea Filippin - Basso Elettrico<br/>
        Enea Zanardo - Batteria<br/>
        Enrico Lovadina - Chitarra Acustica<br/>
        Tommaso Pellegrini - Voce/Armonica<br/>
      </div>
    </div>
  </div>
  
  <!-- Non voglio annoiarti troppo dicendoti che i proventi di questo album non ci arricchiranno minimamente ma serivranno solo a finanziare a fondo perso (e solo in parte) la registrazione del nostro prossimo lavoro. 
    Però... se ti stessi cimentando nel cercare di fregare le tracce... ecco... diciamo che non brilleresti particolarmente per intelligentia, infatti ci metteresti di meno a scaricarti una versione crackata di spotify e avere tutta la musica del mondo, compreso quest'album. Mettiamola così, siccome siamo gli April's Fools, e non il solito gruppo qualunque, cercheremo di dissuaderti in altro modo, se sei arrivato fino a qui e leggi questo messaggio, vieni ad un nostro concerto e al termine dell'esibizione presentati da noi pronunciando "paradildo", ti offriremo da bere e sarà tua una copia fisica dell'album. -->

    <div class="album-tracks">
    <ol>
      <li data-dontdoit="cHVibGljL2FsYnVtL2RlbW8vRW5vdWdoIFNhaWQubXAz"> <span>Enough Said (DEMO)</span><span>4:39</span></li>
      <li data-dontdoit="cHVibGljL2FsYnVtL2RlbW8vQ2xheW1hbi5tcDM="> <span>Clayman (DEMO)</span><span>5:06</span></li>
      <li data-dontdoit="cHVibGljL2FsYnVtL2RlbW8vSGlkZGVuIFNwb3QubXAz"> <span>Hidden Spot (DEMO)</span><span>6:59</span></li>
      <li data-dontdoit="cHVibGljL2FsYnVtL2RlbW8vQmVhc3RzIE9mIEVuZ2xhbmQubXAz"> <span>Beasts Of England (DEMO)</span><span>5:08</span></li>
      <li data-dontdoit="cHVibGljL2FsYnVtL2RlbW8vTmluZSBNb250aHMubXAz"> <span>Nine Months (DEMO)</span><span>4:38</span></li>
      <li data-dontdoit="cHVibGljL2FsYnVtL2RlbW8vRWRnZSBvZiBTaGFkb3cubXAz"> <span>At the Edge of Shadow (DEMO)</span><span>8:32</span></li>
      <li data-dontdoit="cHVibGljL2FsYnVtL2RlbW8vSW52aW5jaWJsZSBJZ25vcmFuY2UubXAz"> <span>Invincible Ignorance (DEMO)</span><span>3:38</span></li>
      <li data-dontdoit="cHVibGljL2FsYnVtL2RlbW8vUmVhZCB0aGUgV2luZC5tcDM="> <span>Read The Wind (DEMO)</span><span>6:45</span></li>
    </ol>
  </div>
  
<div class="social">
  <a href="https://www.facebook.com/aprilsfoolsband/"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
  <a href="https://www.instagram.com/aprilsfoolsband/"><i class="fa fa-instagram" aria-hidden="true"></i></a>
  <a href="https://www.youtube.com/user/aprilsfoolsband"><i class="fa fa-youtube-square hidden" aria-hidden="true"></i></a>
  <a href="https://soundcloud.com/aprilsfools"><i class="fa fa-soundcloud hidden" aria-hidden="true"></i></a>
  <a href="https://open.spotify.com/intl-it/artist/2xsnEW0zllw6rmoE1Jno6Q?si=Sc0X0Y7URuuEv-oBHQA7qA"><i class="fa fa-spotify" aria-hidden="true"></i></a>
  <a href="https://music.apple.com/us/artist/aprils-fools/1706854637"><i class="fa fa-apple" aria-hidden="true"></i></a>
</div>

<div class="donate hidden">
    <div class="desc"></div>
    <div class="button">
      <form action="https://www.paypal.com/donate" method="post" target="_top">
      <input type="hidden" name="hosted_button_id" value="PGJ4B53Z9BEY6" />
      <input type="image" src="https://www.paypalobjects.com/it_IT/IT/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Fai una donazione con il pulsante PayPal" />
      <img alt="" border="0" src="https://www.paypal.com/it_IT/i/scr/pixel.gif" width="1" height="1" />
      </form>
    </div>
</div>
</section>
<div class="footer" style="
    height: 310px;
    overflow: hidden;
    width: 100%;
    position: absolute;
    margin-top: -110px;
    z-index: -1;
">
<img src="public/img/modalbg.png" style="
    position: absolute;
    right: -400px;
"></div>

    <div class="modal code hidden" style="left: 0;">

    <img src="public/img/modalbg2.png" style="
    position: absolute;
    left: 0;
    top: -141px;
    z-index: -1;
">
    <p>Inserisci il codice di sblocco stampato sul retro del biglietto:</p>
    
    <div class="card-facsimile">
      <img src="public/album/ateos/img/bigliettofacsimile.png" style="
        margin-bottom: 10px;
        width: 210px;
        border: 1px black;
        border-style: dashed;
      ">
    </div>

    <form method='POST' action='/spotifool'>
      <input type='text' name='token' placeholder="> Codice <" style="
    border: 0;
    text-align: center;
    display: block;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    margin: 0 auto;
    font-size: 24px;
    width: 240px;
    color: white;
    background-color: rgba(0,0,0,0.9);
    padding: 0 30px;

"/>
    <button class="close" type="button" onclick="closeCodeModal()" style="position: absolute;
    margin-top: 20px;
    font-size: 18px;
    text-transform: uppercase;">Chiudi</button>

    <input type="submit" value="Invia"  style="margin-top: 7px;
    margin-left: 100px;
    width: 100px;
    color: white;
    background: #97101a;
    font-weight: 400;
    padding: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    border: 0;" />

    </form>

  </div>
    
<script type="text/javascript">
  

  var codes = document.querySelectorAll(".ribbon, .actions .code");
  codes.forEach(function (val){ val.addEventListener("click", showCodeModal)});

  function showCodeModal()
  {
    document.querySelector(".modal.code").classList.remove("hidden");
    document.querySelector(".overlay").classList.remove("hidden");
    document.body.style.overflow = "hidden";
  }

    function closeCodeModal()
  {
    document.body.style.overflow = "auto";
    document.querySelector(".overlay").classList.add("hidden");
    document.querySelector(".modal.code").classList.add("hidden");

  }

  var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    barHeight: 0.5,
    hideScrollbar: true,
    waveColor: 'white',
    progressColor: 'black',
    responsive: true

});

  var currentTrack = 0;
document.addEventListener('DOMContentLoaded', function() { 
    var playPauseYellow = document.querySelector('.play');
    playPauseYellow.addEventListener('click', function() {
      if(!isLoading)
        wavesurfer.playPause();
    });

    var playPause = document.querySelector(".song-controls i.fa-play, .song-controls i.fa-pause");
    playPause.addEventListener('click', function() {
      if(!isLoading)
        wavesurfer.playPause();
    });

    var nextSong = document.querySelector(".song-controls .fa-fast-forward");
    nextSong.addEventListener('click', function(){
      setCurrentSong(currentTrack+1);
    });

    var prevSong = document.querySelector(".song-controls .fa-fast-backward");
    prevSong.addEventListener('click', function(){
      setCurrentSong(currentTrack-1);
    });

    // Toggle play/pause text
    wavesurfer.on('play', function() {
      document.querySelector('.play').innerHTML = "PAUSE";
      $(".song-controls i.fa-play").addClass('fa-pause').removeClass('fa-play');
      $(".album-tracks")
        //document.querySelector('.play').style.display = 'none';
        //document.querySelector('.pause').style.display = '';
    });
    wavesurfer.on('pause', function() {
      document.querySelector('.play').innerHTML = "PLAY";
      $(".song-controls i.fa-pause").addClass('fa-play').removeClass('fa-pause');
        //document.querySelector('.play').style.display = '';
        //document.querySelector('.pause').style.display = 'none';
    });

    // The playlist links
    var links = $('.album-tracks ol li');
    var attr = "data-dontdoit";
    var init = false;
    var isLoading = false;

    var totalTimeDOM = document.getElementById('time-total');
    var currentTimeDOM = document.getElementById('time-current');
    var playIcon = document.querySelector('.fa-play');
    var loadIcon = document.querySelector('.fa-refresh');

    // Load a track by index and highlight the corresponding link
    var setCurrentSong = function(index) {
        isLoading = true;
        links[currentTrack].classList.remove('active');
        currentTrack = index;
        links[currentTrack].classList.add('active');
        playIcon.style.display = "none";
        loadIcon.style.display = "inline-block";
        wavesurfer.load(atob(links[currentTrack].getAttribute(attr)));
        document.querySelector('.song-title').childNodes[0].innerText = links[currentTrack].childNodes[1].innerText;
    };

    // Load the track on click
    Array.prototype.forEach.call(links, function(link, index) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            setCurrentSong(index);
        });
    });

    setCurrentSong(0);
    // Play on audio load
    wavesurfer.on('ready', function() {

      if(!init)
        init = true;
      else{
        wavesurfer.play();
      }

      loadIcon.style.display = "none";
      playIcon.style.display = "inline-block";
      isLoading = false;
    });

    wavesurfer.on('error', function(e) {
        console.warn(e);
    });

    // Go to the next track on finish
    wavesurfer.on('finish', function() {
        setCurrentSong((currentTrack + 1) % links.length);
    });


Number.prototype.padLeft = function (n,str) {
    return (this < 0 ? '-' : '') + 
            Array(n-String(Math.abs(this)).length+1)
             .join(str||'0') + 
           (Math.abs(this));
}

function toTime(time)
{
  var minutes = Math.floor(time / 60);
  var seconds = Math.ceil(time - minutes * 60);

  return minutes.padLeft(2)+':'+seconds.padLeft(2);
}

wavesurfer.on('audioprocess', function() {
    if(wavesurfer.isPlaying()) {
        var totalTime = wavesurfer.getDuration(),
            currentTime = wavesurfer.getCurrentTime(),
            remainingTime = totalTime - currentTime;
      
      totalTimeDOM.innerText = toTime(totalTime);
      currentTimeDOM.innerText = toTime(currentTime);
        //document.getElementById('time-remaining').innerText = remainingTime.toFixed(1);
    }
});

});
</script>
