<|start_filename|>GUI/templates/page.html<|end_filename|>
{% extends 'index.html' %}

{% block body %}
    <h2><p class="item-text-2">Grandson {{ name }}</p></h2>

    {% if name == 'LOXx' %}
        Hui
    {% else %}
        Not Hui
    {% endif %}

    {% for i in items %}
        <h1>{{ i.text }}</h1>
    {% endfor %}

{% endblock %}

<|start_filename|>GUI/templates/song.html<|end_filename|>

{% extends 'base.html' %}

{% block body %}

<div style='width:100%; height:400px; margin-top:-50px!important; position: relative;'>
   <div class='albums-slider' style='width:83%; margin-left: 17%;' >
        <div class="border-last-artist" style='width:100% !important;'>
          <div class="image-shadow-last-artist" style="background-image:url({{info.alb_image}});filter: blur(10px);
          -webkit-filter: blur(10px);">
          </div>
      </div>
  </div>

  <div class='p-name pagination-centered text-center'>
    {% if info.trc_explicit %}
        <button type="button" class="btn btn-outline-light">EXPLICIT</button><br>
    {% endif %}

   <span class="item-text-12">{{info.trc_name}}</span>><br>
  </div>
</div>
<div class='genres pagination-centered text-center'>
        <a class='no-link'href="{{ url_for('artist', uri=info.art_id)}}"><p class='song-time'>{{info.art_name}}</p></a>

        <a class='no-link download-link' href="{{ url_for('listenOnSpotifySong', uri=info.trc_id)}}">
        <span class="badge badge-success download-button-song">
              <i class="fab fa-spotify"></i> Listen on Spotify
        </span>
       </a>
        <a class='no-link download-link' href="{{ url_for('downloadAlbum', uri=info.alb_id)}}">
        <span class="badge badge-primary download-button-song">
          <i class="fas fa-arrow-alt-circle-down"></i> Download
        </span>
        </a>

      </div>
<div class='stat pagination-centered text-center'>
    <span class="badge b-number">
    {{info.trc_popularity}}<br>
    <h4>POPULARITY</h4>
    </span>
    <span class="badge b-number">
            {{info.trc_number}}/{{artists_albums_full[0].tracks| length}}<br>
            <h4>TRACK</h4>
          </span>
    <span class="badge b-number">
    {{info.trc_duration_display}}<br>
    <h4>DURATION</h4>
    </span>
  </div>

  <p class='bio'>
      <div class="span4 bio collapse-group text-center">


            <p>
                    {% for line in lyrics[:5] %}
                    {{ line }}<br>
                    {% endfor %}
                
              <span class="collapse text-center" id="viewdetails3"> 
                    
                    {% for line in lyrics[5:] %}
                    {{ line }}<br>
                    {% endfor %}

          
              </span><a style="color:crimson;" data-toggle="collapse" data-target="#viewdetails3">...</a></p>
      </div>
</p>
  </div>
  {% for album in artists_albums_full %}
  <p class='title' style="margin-top: -50px;">
    More songs from this album
  </p>
  <div class="container maxWidth alb-cont-border lazy">
    <div class='row'>
      <div class="border-alb-v">
          <div class="image-shadow-alb-v" style="background-image:url({{album.alb_image}});" ></div>
          <div class=alb-info>
            <p class="item-text-8"> {{album.alb_name}}</p>
            <p class="item-text-3">{{album.total_tracks}} songs</p>
            <a class='no-link download-link' href="{{ url_for('listenOnSpotifyAlbum', uri=album.alb_id)}}">
                    <span class="badge badge-success download-button">
                        <i class="fab fa-spotify"></i> Listen on Spotify
                    </span>
            </a></br>
            <a class='no-link download-link' href="{{ url_for('downloadAlbum', uri=album.alb_id)}}">
              <span class="badge badge-primary download-button">
                  <i class="fas fa-arrow-alt-circle-down"></i> Download Full Album
              </span>
            </a>
            <p></p>
        </div>
      </div>
      <div class='alb-songs justify-content'>
          <table class="table table-dark justify-content space-between">
              <tbody>

                    {% for i in range(album.tracks| length) %}

                    {% if i == 0 %}
                      <tr style="height:40px; border: 0px solid #fff !important;" >
                    {% else %}
                      <tr style="height:40px;" > 
                    {% endif %}
                        {% if i == 0 %}
                          <td scope="row" style='padding: auto;padding-left:0px;width:20px;border: 0px solid #fff !important;'> 
                        {% else %}
                          <td scope="row" style='padding: auto;padding-left:0px;width:20px;'> 
                        {% endif %}
                          <div class="player">
                              <audio class="button-player">
                                <source src="{{album.tracks[i].trc_preview}}">
                              </audio>
                              <button onClick="play(this)" class='pl-button' style='background-color: rgba(73, 73, 73, 0)!important;'>{{i+1}}</button>
                              <p class='pl-button-name'>{{i+1}}</p>  
                            </div>
                          </td>
    
                          {% if i == 0 %}
                            <td style="border: 0px solid #fff !important;">
                          {% else %}
                            <td>
                          {% endif %}
                              <a class='no-link' style='color: #fff;' href="{{ url_for('song', uri=album.tracks[i].trc_id) }}">
                                  {% if album.tracks[i].trc_name|length >= 60 %}
                                    {{album.tracks[i].trc_name[:57]}}...
                                  {% else %}
                                    {{album.tracks[i].trc_name}}
                                  {% endif %}
                              </a>
                           </td>
    
                            {% if i == 0 %}
                              <th class="text-justify text-right" style="border: 0px solid #fff !important;">
                            {% else %}
                            <th class="text-justify text-right">
                            {% endif %}
                            
                           
                            <a class='no-link download-link' href="{{ url_for('downloadSingleSong', uri=album.tracks[i].trc_id)}}">
                              <span class="badge badge-primary download-button">
                                <i class="fas fa-arrow-alt-circle-down"></i> Download
                              </span>
                            </a>
                        </th>
    
                    </tr>
    
                  {% endfor %}
                  
              </tbody>
            </table>
      </div>
      <p class='item-text-10 text-center'>
        {{album.copyrights}}
      </p>
    </div>
      
  </div>
  {% endfor %}
  <br>


{% if artists_albums| length %}
<p class='title'>
    More albums from {{info.art_name}}
</p>
{% endif %}

<div class='albums-slider lazy' style='width:80%; margin-left: 18%;' >
    
        {% for albums in artists_albums %}
            <div class="border cursor-pointer-all-obj">
                <a class='no-link' href='{{ url_for('album', uri=albums.alb_id)}}'>
                  <div class="image-shadow" style="background-image:url({{albums.alb_image}})" ></div>
                  <p class="item-text-3">{{albums.alb_name}}</p>
                </a>
            </div>
          {% endfor %}
    
      </div>

{% if artists_related| length %}
<p class='title'>
    Fans also like
</p>
{% endif %}
<div class='artists-slider lazy' style='width:80%; margin-left: 18%;' >

        {% for artist in artists_related %}
    
          <div class="border cursor-pointer-all-obj">
              <a class='no-link' href='{{ url_for('artist', uri=artist.id)}}'>
                <div class="image-shadow-circ" style="background-image:url({{artist.image}})" ></div>
                <p class="item-text-3">{{ artist.name }}</p>
              </a>
          </div>
    
        {% endfor %}
    
      </div>
  <br>
  
{% endblock %}

<|start_filename|>GUI/templates/for_you.html<|end_filename|>
{% extends 'base.html' %}

{% block body %}
 <p class='title'>
    For You
</p>

  <div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
    
    {% for playlist in user_featured_playlists %}
        <div class="border cursor-pointer-all-obj">
            <a class='no-link' href='{{ url_for('playlist', uri=playlist.id, us=playlist.owner_id)}}'>
              <div class="image-shadow" style="background-image:url({{playlist.image}})" ></div>
              <p class="item-text-3">
                    {% if playlist.name| length >= 49 %}
                        {{playlist.name[:46]}}...
                    {% else %}
                        {{ playlist.name }}
                    {% endif %}
              </p>
            </a>
        </div>
      {% endfor %}

  </div>

<p class='title'>
    New Releases
</p>


<div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
  
      {% for albums in new %}
          <div class="border cursor-pointer-all-obj">
              <a class='no-link' href="{{ url_for('album', uri=albums.alb_id) }}">
                <div class="image-shadow" style="background-image:url({{albums.alb_image}})" ></div>
                <p class="item-text-3">
                        {% if albums.alb_name| length >= 49 %}
                            {{albums.alb_name[:46]}}...
                        {% else %}
                            {{ albums.alb_name }}
                        {% endif %}
                </p>
              </a>
          </div>
        {% endfor %}
  
</div>

<p class='title'>
    Based On Your Artists
</p>


<div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
  
      {% for track in rec %}
          <div class="border cursor-pointer-all-obj">
              <a class='no-link' href="{{ url_for('album', uri=track.alb_id) }}">
                <div class="image-shadow" style="background-image:url({{track.alb_image}})" ></div>
                <p class="item-text-3">
                    {% if track.alb_name| length >= 50 %}
                        {{track.alb_name[:47]}}...
                    {% else %}
                        {{ track.alb_name }}
                    {% endif %}
                </p>
              </a>
          </div>
        {% endfor %}
  
</div>

<p class='title'>
    Based On Your Top Artists
</p>


<div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
  
      {% for track in rec_t_a %}
          <div class="border cursor-pointer-all-obj">
              <a class='no-link' href="{{ url_for('album', uri=track.alb_id) }}">
                <div class="image-shadow" style="background-image:url({{track.alb_image}})" ></div>
                <p class="item-text-3">
                        {% if track.alb_name| length >= 49 %}
                            {{track.alb_name[:46]}}...
                        {% else %}
                            {{ track.alb_name }}
                        {% endif %}
                </p>
              </a>
          </div>
        {% endfor %}
  
</div>

<p class='title'>
   You Might Like
</p>

<div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
  
      {% for track in rec_t_t %}
          <div class="border cursor-pointer-all-obj">
              <a class='no-link' href="{{ url_for('album', uri=track.alb_id) }}">
                <div class="image-shadow" style="background-image:url({{track.alb_image}})" ></div>
                <p class="item-text-3">
                        {% if track.alb_name| length >= 49 %}
                            {{track.alb_name[:46]}}...
                        {% else %}
                            {{ track.alb_name }}
                        {% endif %}
                    </p>
              </a>
          </div>
        {% endfor %}
  
</div>

<p class='title'>
    Based On Your Last Saved
 </p>
 
 
 <div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
   
       {% for track in rec_t_l %}
           <div class="border cursor-pointer-all-obj">
               <a class='no-link' href="{{ url_for('album', uri=track.alb_id) }}">
                 <div class="image-shadow" style="background-image:url({{track.alb_image}})" ></div>
                 <p class="item-text-3">
                        {% if track.alb_name| length >= 49 %}
                            {{track.alb_name[:46]}}...
                        {% else %}
                            {{ track.alb_name }}
                        {% endif %}
                 </p>
               </a>
           </div>
         {% endfor %}
   
 </div>



{% endblock %}

<|start_filename|>GUI/templates/home.html<|end_filename|>
{% extends 'base.html' %}

{% block body %}
  <div class="container-fluid maxWidth">
        <div class="d-flex  page main-sl">
  
              <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

                  <ol class="carousel-indicators">
                      {% for i in range(user_top_artists| length) %}
                        {% if i == 0 %}
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        {% else %}
                          <li data-target="#carouselExampleIndicators" data-slide-to="{{i}}"></li>
                        {% endif %}
                      {% endfor %}
                    </ol>

                      <div class="carousel-inner">

                        {% for i in range(user_top_artists| length) %}
                          {% if i == 0 %}
                          <div class="carousel-item cursor-pointer-all-obj active">
                          {% else %}
                          <div class="carousel-item cursor-pointer-all-obj">
                          {% endif %}
                              <a class='no-link' href='{{ url_for('artist', uri=user_top_artists[i].id)}}'>
                                <div class="line">
                                        <div class="image-shadow-line"  loading="lazy"  style="background-image:  linear-gradient(
                                          rgba(0, 0, 0, 0.3),
                                          rgba(0, 0, 0, 0.3)
                                        ),url({{user_top_artists[i].image_big}});" alt="First slide"></div>
                                        <div class="carousel-caption d-none d-md-block">
                                            <h2><p class="item-text-2">{{ user_top_artists[i].name }}</p></h2>
                                        </div>
                                </div>
                                </a>
                          </div>   
                        {% endfor %}
                        
                      </div>


                      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                        </a>
              </div>
  
        </div>
  
    </div>
    <br>




  <p class='title'>
    For You
  </p>

  <div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
    
    {% for playlist in user_featured_playlists %}
        <div class="border cursor-pointer-all-obj">
            <a class='no-link' href='{{ url_for('playlist', uri=playlist.id, us=playlist.owner_id)}}'>
              <div class="image-shadow" style="background-image:url({{playlist.image}})" ></div>
              <p class="item-text-3">{{playlist.name}}</p>
            </a>
        </div>
      {% endfor %}

  </div>


<div class='conc-main-slider lazy' style='width:82%; margin-left: 18%;' >

    <div class="border-conc-r">

        <div class="image-shadow-conc-r" style="background-image:url({{user_top_tracks[0].alb_image}});"></div>

        <figcaption class="item-text-16">
            <h1 class="display-4"><span class="badge badge-danger">10</span></h1>
            <h2>Songs</h2>
        </figcaption>

       

        <figcaption class="item-text-6">Your favorite tracks</figcaption>
    </div>
</div>

<div class="container-fluid maxWidth lazy" style='background: rgb(28,28,30); margin-top: -5px;'>
        <table class="table table-dark justify-content space-between">
            <tbody>

              {% for i in range(user_top_tracks| length) %}

                {% if i == 0 %}
                  <tr style="height:40px; border: 0px solid #fff !important;" >
                {% else %}
                  <tr style="height:40px;" > 
                {% endif %}

                    {% if i == 0 %}
                      <th scope="row" style='padding: 0px;border: 0px solid #fff !important;'> 
                    {% else %}
                      <th scope="row" style='padding: 0px;'> 
                    {% endif %}

                      <a class='no-link' href='artist.html'>
                        <div class="image-shadow-prev cursor-pointer-all-obj" style="background-image:url({{user_top_tracks[i].alb_image}})" ></div>
                      </a>
                    </th>

                      {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('song', uri=user_top_tracks[i].trc_id)}}''>
                              {% if user_top_tracks[i].trc_name|length >= 25 %}
                                {{user_top_tracks[i].trc_name[:23]}}...
                              {% else %}
                                {{user_top_tracks[i].trc_name}}
                              {% endif %}
                          </a>
                       </td>

                       {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('artist', uri=user_top_tracks[i].art_id)}}''>
                              {% if user_top_tracks[i].art_name|length >= 25 %}
                                {{user_top_tracks[i].art_name[:23]}}...
                              {% else %}
                                {{user_top_tracks[i].art_name}}
                              {% endif %}
                          </a>
                        </td>

                      {% if i == 0 %}
                          <td style="border: 0px solid #fff !important;">
                        {% else %}
                          <td>
                        {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('album', uri=user_top_tracks[i].alb_id)}}''>
                              {% if user_top_tracks[i].alb_name|length >= 20 %}
                                {{user_top_tracks[i].alb_name[:17]}}...
                              {% else %}
                                {{user_top_tracks[i].alb_name}}
                              {% endif %}
                          </a>
                        </td>
                        {% if i == 0 %}
                          <th class="text-justify text-right" style="border: 0px solid #fff !important;">
                        {% else %}
                        <th class="text-justify text-right">
                        {% endif %}
                        <a class='no-link download-link' href="{{ url_for('listenOnSpotifySong', uri=user_top_tracks[i].trc_id)}}">
                          <span class="badge badge-success download-button">
                              <i class="fab fa-spotify"></i> Listen on Spotify
                          </span>
                        </a>

                        <a class='no-link download-link' href="{{ url_for('downloadSingleSong', uri=user_top_tracks[i].trc_id)}}">
                          <span class="badge badge-primary download-button">
                            <i class="fas fa-arrow-alt-circle-down"></i> Download
                          </span>
                        </a>
                    </th>

                </tr>

              {% endfor %}

            </tbody>
          </table>
</div>
<br>

<p class='title'>
    Artists
  </p>

  <div class='artists-slider lazy' style='width:82%; margin-left: 18%;' >

    {% for artist in user_saved_artists %}

      <div class="border cursor-pointer-all-obj">
          <a class='no-link' href='{{ url_for('artist', uri=artist.id)}}'>
            <div class="image-shadow-circ lazy-bg" style="background-image:url({{artist.image}})" ></div>
            <p class="item-text-3">{{ artist.name }}</p>
          </a>
      </div>

    {% endfor %}

  </div>




<div class='conc-main-slider lazy' style='width:80%; margin-left: 18%;' >
  <a class='no-link' href='{{ url_for('new_releases')}}'>
    <div class="line cursor-pointer-all-obj">

      <div class="image-shadow-line" style="background: rgb(251,111,74);
          background: linear-gradient(152deg, rgba(251,111,74,1) 0%, rgba(210,83,177,1) 74%);">
      </div>
      <div class="carousel-caption d-none d-md-block">
        <h2>
          <p class="item-text-13">
            New Albums And Singles
          </p>
        </h2>
      </div>
    </div>
  </a>

</div>
<br>



  <p class='title'>
    Playlists
  </p>

  <div class='albums-slider lazy' style='width:80%; margin-left: 18%;' >
    {% for playlist in user_saved_playlists %}
      <div class="border-playlist cursor-pointer-all-obj">
          <a class='no-link' href='{{ url_for('playlist', uri=playlist.id, us=playlist.owner_id)}}'>
            <div class="image-shadow-playlist" style="background-image:url({{playlist.image}})" ></div>
            <p class="item-text-5">{{ playlist.name }}</p>
          </a>
      </div>
    {% endfor %}


      
  </div>




  <div class="container maxWidth lazy" style='margin-top: -10px;'>
        <div class="d-flex flex-wrap page">
    
              <div id="carouselExample" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">

                                <div class="carousel-item">
                          
                                        <div class="line">
                                              <div class="image-shadow-line" style="background: rgb(203,53,107);
                                              background: linear-gradient(152deg, rgba(203,53,107,1) 0%, rgba(189,63,50,1) 100%);"></div>
                                              <div class="carousel-caption d-none d-md-block">
                                                  <h2><p class="item-text-13">Your Time Capsule</p></h2>
                                              </div>
                                        </div>
                                    
                                </div>
                    </div>
              </div>
        </div>
    </div>
<br>


<div class='conc-main-slider lazy' style='width:85%; margin-left: 16.5%; padding-bottom: 0px !important;' >
    <div class="line" style='margin-top: 10px; border-radius: 0px !important;'>
           <div class="image-shadow-line" style="background-image:url({{ url_for('static',filename='images/telegram.webp') }});filter: blur(5px);
           -webkit-filter: blur(5px);  -webkit-mask-image:-webkit-gradient(linear, right bottom, right top, from(rgba(28,28,30,1)), to(rgba(28,28,30,0))) !important;
       mask-image: linear-gradient(to left, rgba(28,28,30,1) 30%, rgba(28,28,30,0)); border-radius: 0px !important;"></div>
           <div class="carousel-caption d-none d-md-block">
               <h2><p class="item-text-19">Get it on Telegram</p></h2>
               <h2><p class="item-text-20">@SpotifyMusicDownloaderBot</p></h2>
           </div>
   </div>
   </div>


{% endblock %}


<|start_filename|>GUI/templates/albums.html<|end_filename|>
{% extends 'base.html' %}

{% block body %}

<p class='title' style='margin-top: 0px; margin-bottom: -10px;'>
    Albums
</p>


<div class="container maxWidth" style='background: rgb(28,28,30);margin-top: -12px;'>
    <table class="table-album table-dark justify-content space-between">
        <tbody style='width:100%;'>


          {% for album in user_saved_albums %}

              <tr style="height:200px; width: 100%; border: 0px solid #fff !important; margin-top: -50px;" >
                <th scope="row" style='padding: 0px;border: 0px solid #fff !important; width:20%;'> 
                  <div class="image-shadow-prev-album cursor-pointer-all-obj" style="background-image:url({{album.alb_image}})" ></div>
                </th>
                <td>
                  <div class='alb-info-list'>
                    <a class='no-link' href="{{ url_for('artist', uri=album.art_id)}}"><p class='alb-artist cursor-pointer-all-obj'><i class="far fa-user"></i> {{album.art_name}}</p></a>
                    <a class='no-link' href="{{ url_for('album', uri=album.alb_id)}}"><p class='alb-name cursor-pointer-all-obj'>{{album.alb_name}}</p></a>

                  <p class='alb-butt'>
                     <a class='no-link download-link' href="{{ url_for('listenOnSpotifyAlbum', uri=album.alb_id)}}">
                      <span class="btn btn-outline-success download-button" style='padding: 2px 2px 2px 2px;border: 0px solid #fff;'>
                        <i class="fab fa-spotify"></i> Listen on Spotify
                      </span>
                    </a>
                    <a class='no-link download-link' href="{{ url_for('downloadAlbum', uri=album.alb_id)}}">
                      <span class="btn btn-outline-primary download-button" style='padding: 2px 2px 2px 2px;border: 0px solid #fff;'>
                        <i class="fas fa-arrow-alt-circle-down"></i> Download full album
                      </span>
                    </a>
                  </p>
                  
                </div>

                </td> 
                <td class='text-right'>
                    <p class='alb-count'>{{album.count}}</p>
                    {% if  album.count == 1 %}
                      <p class='alb-count-text'>SONG</p>
                    {% else %}
                      <p class='alb-count-text'>SONGS</p>
                    {% endif %}
                </td>              
              </tr>

            {% endfor %}

        </tbody>
      </table>
</div>

<br>
  

{% endblock %}

<|start_filename|>GUI/templates/artist.html<|end_filename|>
{% extends 'base.html' %}

{% block body %}

<div style='width:100%; height:400px; margin-top:-20px!important; position: relative;'>
    <div class='albums-slider' style='width:100%; margin-left: 17%;' >
        <div class="border-last-artist" style='width:100% !important;'>
            <div class="image-shadow-last-artist"  loading="lazy"  style="background-image:url({{artists_info.image}});">
              </div>
            
        </div>
    </div>
  
    <div class='p-name pagination-centered text-center'>
        <span class="item-text-12">{{artists_info.name}}</span><br>
    </div>
</div>
  
  <div class='genres pagination-centered text-center'>
    {% for genre in artists_info.genres %}
        <span class="badge badge-danger">{{genre}}</span>
    {% endfor %}
  </div>
  
  <div class='stat pagination-centered text-center'>
      <span class="badge b-number">
          {{artists_info_lf.playcount_display}}<br>
          <h4>PLAYINGS</h4>
      </span>
        <span class="badge b-number">
            {{artists_info.followers_display}}<br>
            <h4>FOLLOWERS</h4>
        </span>
      <span class="badge b-number">
            {{artists_info.popularity}}<br>
            <h4>POPULARITY</h4>
      </span>
      
    </div>

  
    <p class='bio lazy'>
        <div class="span4 bio collapse-group">
            
              
              <p>
                {% if artists_info_lf.bio| length >= 500 %}
                  {{ artists_info_lf.bio[:500] }}
                  <span class="collapse" id="viewdetails3"> 
                    {{ artists_info_lf.bio[500:] }}
                  </span><a style="color:crimson;" data-toggle="collapse" data-target="#viewdetails3">...</a>
                {% else %}
                   {{ artists_info_lf.bio }}
                {% endif %}
              </p>
        </div>
  </p>
  
  
  
    </div>
    <br>

    <div class='conc-main-slider lazy' style='width:82%; margin-left: 18%;' >
  
        <div class="border-conc-r">
            <div class="image-shadow-conc-r" style="background-image:url({{artists_top_tracks[0].alb_image}});">
            </div>
            <figcaption class="item-text-16">
                <h1 class="display-4"><span class="badge badge-danger">{{(artists_top_tracks| length)}}</span></h1>
                <h2>Songs</h2>
            </figcaption>
            
               
            </figcaption>
            <figcaption class="item-text-6">The most popular songs</figcaption>
        </div>
  
    </div>


    <div class="container-fluid maxWidth lazy" style='background: rgb(28,28,30); margin-top: -5px;'>
            <table class="table table-dark justify-content space-between">
                <tbody>
    
                  {% for i in range(artists_top_tracks| length) %}
    
                    {% if i == 0 %}
                      <tr style="height:40px; border: 0px solid #fff !important;" >
                    {% else %}
                      <tr style="height:40px;" > 
                    {% endif %}
    
                        {% if i == 0 %}
                          <th scope="row" style='padding: 0px;border: 0px solid #fff !important;'> 
                        {% else %}
                          <th scope="row" style='padding: 0px;'> 
                        {% endif %}
    
                          <a class='no-link' href='artist.html'>
                            <div class="image-shadow-prev cursor-pointer-all-obj" style="background-image:url({{artists_top_tracks[i].alb_image}})" ></div>
                          </a>
                        </th>
    
                          {% if i == 0 %}
                            <td style="border: 0px solid #fff !important;">
                          {% else %}
                            <td>
                          {% endif %}
                              <a class='no-link' style='color: #fff;' href="{{ url_for('song', uri=artists_top_tracks[i].trc_id) }}">
                                  {% if artists_top_tracks[i].trc_name|length >= 25 %}
                                    {{artists_top_tracks[i].trc_name[:23]}}...
                                  {% else %}
                                    {{artists_top_tracks[i].trc_name}}
                                  {% endif %}
                              </a>
                           </td>
    
                           {% if i == 0 %}
                            <td style="border: 0px solid #fff !important;">
                          {% else %}
                            <td>
                          {% endif %}
                              <a class='no-link' style='color: #fff;' href='{{ url_for('artist', uri=artists_top_tracks[i].art_id) }}'>
                                  {% if artists_top_tracks[i].art_name|length >= 25 %}
                                    {{artists_top_tracks[i].art_name[:23]}}...
                                  {% else %}
                                    {{artists_top_tracks[i].art_name}}
                                  {% endif %}
                              </a>
                            </td>
    
                          {% if i == 0 %}
                              <td style="border: 0px solid #fff !important;">
                            {% else %}
                              <td>
                            {% endif %}
                              <a class='no-link' style='color: #fff;' href='{{ url_for('album', uri=artists_top_tracks[i].alb_id) }}'>
                                  {% if artists_top_tracks[i].alb_name|length >= 20 %}
                                    {{artists_top_tracks[i].alb_name[:17]}}...
                                  {% else %}
                                    {{artists_top_tracks[i].alb_name}}
                                  {% endif %}
                              </a>
                            </td>
                            {% if i == 0 %}
                              <th class="text-justify text-right" style="border: 0px solid #fff !important;">
                            {% else %}
                            <th class="text-justify text-right">
                            {% endif %}
                            <a class='no-link download-link' href="{{ url_for('listenOnSpotifySong', uri=artists_top_tracks[i].trc_id)}}">
                              <span class="badge badge-success download-button">
                                  <i class="fab fa-spotify"></i> Listen on Spotify
                              </span>
                            </a>
    
                            <a class='no-link download-link' href="{{ url_for('downloadSingleSong', uri=artists_top_tracks[i].trc_id)}}">
                              <span class="badge badge-primary download-button">
                                <i class="fas fa-arrow-alt-circle-down"></i> Download
                              </span>
                            </a>
                        </th>
    
                    </tr>
    
                  {% endfor %}
    
                </tbody>
              </table>
    </div>
  <br>

  {% if artists_albums_full| length %}
  <a class='no-link download-link' href="{{ url_for('album', uri=artists_albums_full[0].alb_id)}}"></a>
  <div class='albums-slider' style='width:82%; margin-left: 18%;' >
        <div class="border-last-r">
            <div class="image-shadow-last-r" style="background-image:url({{artists_albums_full[0].alb_image}});">
            </div>
            <figcaption class="item-text-7">Latest Realease</figcaption>
            <figcaption class="item-text-6">{{artists_albums_full[0].alb_name}}</figcaption>
        </div>
    </div>
  </a>
  <br>
{% endif %}

{% if artists_albums| length %}

  <p class='title'>
      Albums
  </p>
{% endif %}
  
  <div class='albums-slider lazy' style='width:80%; margin-left: 18%;' >
    
        {% for albums in artists_albums %}
            <div class="border cursor-pointer-all-obj">
                <a class='no-link' href="{{ url_for('album', uri=albums.alb_id) }}">
                  <div class="image-shadow" style="background-image:url({{albums.alb_image}})" ></div>
                  <p class="item-text-3">{{albums.alb_name}}</p>
                </a>
            </div>
          {% endfor %}
    
      </div>


{% for album in artists_albums_full %}
  <p class='title'>
    {{album.year}}
  </p>
  <div class="container maxWidth alb-cont-border lazy">
    <div class='row'>
      <div class="border-alb-v">
          <div class="image-shadow-alb-v" style="background-image:url({{album.alb_image}});" ></div>
          <div class=alb-info>
            <p class="item-text-8"> {{album.alb_name}}</p>
            <p class="item-text-3">{{album.total_tracks}} songs</p>
            <a class='no-link download-link' href="{{ url_for('listenOnSpotifyAlbum', uri=album.alb_id)}}">
              <span class="badge badge-success download-button">
                  <i class="fab fa-spotify"></i> Listen on Spotify
              </span>
            </a>
          </br>
            <a class='no-link download-link' href="{{ url_for('downloadAlbum', uri=album.alb_id)}}">
            <span class="badge badge-primary download-button">
                <i class="fas fa-arrow-alt-circle-down"></i> Download Full Album
            </span>
            </a>
            <p></p>
        </div>
      </div>
      <div class='alb-songs justify-content'>
          <table class="table table-dark justify-content space-between">
              <tbody>

                    {% for i in range(album.tracks| length) %}

                    {% if i == 0 %}
                      <tr style="height:40px; border: 0px solid #fff !important;" >
                    {% else %}
                      <tr style="height:40px;" > 
                    {% endif %}
                        {% if i == 0 %}
                          <td scope="row" style='padding: auto;padding-left:0px;width:20px;border: 0px solid #fff !important;'> 
                        {% else %}
                          <td scope="row" style='padding: auto;padding-left:0px;width:20px;'> 
                        {% endif %}
                        <div class="player">
                            <audio class="button-player">
                              <source src="{{album.tracks[i].trc_preview}}">
                            </audio>
                            <button onClick="play(this)" class='pl-button' style='background-color: rgba(73, 73, 73, 0)!important;'>{{i+1}}</button>
                            <p class='pl-button-name'>{{i+1}}</p>  
                          </div>
                        </td>
                          </td>
    
                          {% if i == 0 %}
                            <td style="border: 0px solid #fff !important;">
                          {% else %}
                            <td>
                          {% endif %}
                              <a class='no-link' style='color: #fff;' href="{{ url_for('song', uri=album.tracks[i].trc_id) }}">
                                  {% if album.tracks[i].trc_name|length >= 60 %}
                                    {{album.tracks[i].trc_name[:57]}}...
                                  {% else %}
                                    {{album.tracks[i].trc_name}}
                                  {% endif %}
                              </a>
                           </td>
    
                          {% if i == 0 %}
                              <td style="border: 0px solid #fff !important;">
                            {% else %}
                              <td>
                            {% endif %}
                              <a class='no-link' style='color: #fff;' href='artist.html'>
                                  {% if album.tracks[i].alb_name|length >= 20 %}
                                    {{album.tracks[i].alb_name[:17]}}...
                                  {% else %}
                                    {{album.tracks[i].alb_name}}
                                  {% endif %}
                              </a>
                            </td>
                            {% if i == 0 %}
                              <th class="text-justify text-right" style="border: 0px solid #fff !important;">
                            {% else %}
                            <th class="text-justify text-right">
                            {% endif %}
                            
    
                            <a class='no-link download-link' href="{{ url_for('downloadSingleSong', uri=album.tracks[i].trc_id)}}">
                              <span class="badge badge-primary download-button">
                                <i class="fas fa-arrow-alt-circle-down"></i> Download
                              </span>
                            </a>
                        </th>
    
                    </tr>
    
                  {% endfor %}
                  
              </tbody>
            </table>
      </div>
      <p class='item-text-10 text-center'>
        {{album.copyrights}}
      </p>
    </div>
      
  </div>
  {% endfor %}
  
{% if artists_appears_on| length %}
  <p class='title'>
      Discovered on
  </p>
{% endif %}
  
  <div class='albums-slider lazy' style='width:80%; margin-left: 18%;' >
        {% for album in artists_appears_on %}
          <div class="border-playlist cursor-pointer-all-obj">
              <a class='no-link' href='{{ url_for('album', uri=album.alb_id)}}'>
                <div class="image-shadow-playlist" style="background-image:url({{album.alb_image}})" ></div>
                <p class="item-text-5">{{ album.alb_name }}</p>
              </a>
          </div>
        {% endfor %} 
      </div>
  

{% if artists_related| length %}
<p class='title'>
    Fans also like
</p>
{% endif %}

  <div class='artists-slider lazy' style='width:80%; margin-left: 18%;' >

        {% for artist in artists_related %}
    
          <div class="border cursor-pointer-all-obj">
              <a class='no-link' href='{{ url_for('artist', uri=artist.id)}}'>
                <div class="image-shadow-circ" style="background-image:url({{artist.image}})" ></div>
                <p class="item-text-3">{{ artist.name }}</p>
              </a>
          </div>
    
        {% endfor %}
    
      </div>
  <br>
    

{% endblock %}

<|start_filename|>GUI/templates/search.html<|end_filename|>

{% extends 'base.html' %}

{% block body %}

<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Results for <span style='color: rgb(30, 202, 78);'>{{q}}</span>
</p>

{% if tracks| length %}
<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Songs
</p>
{% endif %}

  <div class="container-fluid maxWidth lazy" style='background: rgb(28,28,30); margin-top: -5px;'>
        <table class="table table-dark justify-content space-between">
            <tbody>

              {% for i in range(tracks| length) %}

              
                {% if i == 0 %}
                  <tr style="height:40px; border: 0px solid #fff !important;" >
                {% else %}
                  <tr style="height:40px;" > 
                {% endif %}

                    {% if i == 0 %}
                      <th scope="row" style='padding: 0px;border: 0px solid #fff !important;'> 
                    {% else %}
                      <th scope="row" style='padding: 0px;'> 
                    {% endif %}

                      <a class='no-link' href='artist.html'>
                        <div class="image-shadow-prev cursor-pointer-all-obj" style="background-image:url({{tracks[i].alb_image}})" ></div>
                      </a>
                    </th>

                      {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href="{{ url_for('song', uri=tracks[i].trc_id) }}">
                              {% if tracks[i].trc_name|length >= 25 %}
                                {{tracks[i].trc_name[:23]}}...
                              {% else %}
                                {{tracks[i].trc_name}}
                              {% endif %}
                          </a>
                       </td>

                       {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('artist', uri=tracks[i].art_id) }}'>
                              {% if tracks[i].art_name|length >= 25 %}
                                {{tracks[i].art_name[:23]}}...
                              {% else %}
                                {{tracks[i].art_name}}
                              {% endif %}
                          </a>
                        </td>

                      {% if i == 0 %}
                          <td style="border: 0px solid #fff !important;">
                        {% else %}
                          <td>
                        {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('album', uri=tracks[i].alb_id) }}'>
                              {% if tracks[i].alb_name|length >= 20 %}
                                {{tracks[i].alb_name[:17]}}...
                              {% else %}
                                {{tracks[i].alb_name}}
                              {% endif %}
                          </a>
                        </td>
                        {% if i == 0 %}
                          <th class="text-justify text-right" style="border: 0px solid #fff !important;">
                        {% else %}
                        <th class="text-justify text-right">
                        {% endif %}
                        <a class='no-link' href='#'>
                          <span class="badge badge-success download-button">
                              <i class="fab fa-spotify"></i> Listen on Spotify
                          </span>
                        </a>

                        <a class='no-link download-link' href="{{ url_for('downloadSingleSong', uri=tracks[i].trc_id)}}">
                          <span class="badge badge-primary download-button">
                            <i class="fas fa-arrow-alt-circle-down"></i> Download
                          </span>
                        </a>
                    </th>

                </tr>

              {% endfor %}

            </tbody>
          </table>
</div>

{% if albums| length %}
<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Albums
</p>
{% endif %}

<div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
    
    {% for album in albums %}
        <div class="border cursor-pointer-all-obj">
            <a class='no-link' href='{{ url_for('album', uri=album.alb_id)}}'>
              <div class="image-shadow" style="background-image:url({{album.alb_image}})" ></div>
              <p class="item-text-3">{{album.alb_name}}</p>
            </a>
        </div>
      {% endfor %}
  </div>


{% if artists| length %}
<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Artists
</p>
{% endif %}

<div class='artists-slider lazy' style='width:82%; margin-left: 18%;' >

    {% for artist in artists %}

      <div class="border cursor-pointer-all-obj">
          <a class='no-link' href='{{ url_for('artist', uri=artist.id)}}'>
            <div class="image-shadow-circ lazy-bg" style="background-image:url({{artist.image}})" ></div>
            <p class="item-text-3">{{ artist.name }}</p>
          </a>
      </div>

    {% endfor %}
</div>


{% if playlists| length %}
<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Playlists
</p>
{% endif %}

<div class='albums-slider lazy' style='width:80%; margin-left: 18%;' >
    {% for playlist in playlists %}
      <div class="border-playlist cursor-pointer-all-obj">
          <a class='no-link' href='{{ url_for('playlist', uri=playlist.id, us=playlist.owner_id)}}'>
            <div class="image-shadow-playlist" style="background-image:url({{playlist.image}})" ></div>
            <p class="item-text-5">{{ playlist.name }}</p>
          </a>
      </div>
    {% endfor %}
</div>


{% endblock %}

<|start_filename|>GUI/static/styles/style.css<|end_filename|>
.navbar-fixed-left {
    background:rgb(19, 20, 22);
    color: rgb(48,209,88);
    height: 100%;
    width:17%;
    padding-bottom: 0px;
}

.col{
    width:100%;
}

.list-group{
    padding: 0px;
}

.list-group-item{
    border-radius: 0px !important;
    background:rgb(19, 20, 22);
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    padding-top:5px;
    padding-bottom: 5px;
    border:0px solid #fff;
}
.list-group-item:hover{
    background:rgb(53, 55, 58);
    color: rgb(255, 255, 255);
    text-decoration: none;
}
.list-group-item a{
    background:rgb(53, 55, 58);
    color: rgb(255, 255, 255);
    text-decoration: none;
}
.list-group-item a:hover{
    background:rgb(53, 55, 58);
    color: rgb(255, 255, 255);
    text-decoration: none;
}
.list-group-item i{
    color: rgb(255, 255, 255);
    border-radius: 2px;
    width:20px;
    height:20px;
    text-decoration: none;
    padding: 3px;
    margin-right: 7px;
}
.list-group-item i:hover{
    background:rgba(58, 58, 58,.5);
}
.input-group{
    margin-top:10px;
    width:84%;
    height:30px;
    margin-left: 8%;
}

.form-control{
    width:100%;
    height:24px;
    border-radius: 3px;
    background:rgb(53, 55, 58);
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    border: 0px solid rgb(53, 55, 58);
}
.form-control:focus{
    width:100%;
    height:24px;
    border-radius: 3px;
    background:rgb(41, 42, 44);
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    border: 1px solid rgb(53, 55, 58);
}


.nav-item{
    color: rgb(146, 146, 146);
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    margin-left: 16px;
}


body {
    background-color: rgb(28,28,30);
    padding: 0px;
}
html {
    overflow: scroll;
    overflow-x: hidden;
    -webkit-appearance: none
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

.image-shadow {
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
    border-radius: 7px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
   

   
  }

  .image-shadow-top {
    margin-top:-150px;
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
    border-radius: 7px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    opacity: 1;
    z-index: 500;
    
  }

.border {
    width: 150px;
    height:auto;
    max-height:500px;
    background: rgb(28,28,30);
    text-align:center;
    margin: 5px;
    border: 0px solid rgb(28,28,30);
    border: 0px solid #dee2e6!important;
    border-radius: px;
}

.image-shadow-playlist {
    width: 180px;
    height: 300px;
    min-width: 180px;
    min-height: 300px;
    border-radius: 7px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    background-position: center;
  }

.border-playlist {
    width: 180px;
    height:auto;
    max-height: 400px;
    background: rgb(28,28,30);
    text-align:center;
    margin: 5px;
    border: 0px solid rgb(28,28,30);
    border: 0px solid #dee2e6!important;
}


.border-last-artist {
    width: 100%;
    height: 400px;
    background: rgb(28,28,30);
    text-align:center;
    margin: 5px;
    margin-top: -5px;
    border-radius: 10px;
    border: 0px solid rgb(28,28,30);
    border: 0px solid #dee2e6!important;
}


.image-shadow-last-artist {
    width: 100vw;
    height: 400px;
    min-width: 300px;
    min-height: 400px;
    border-radius: 10px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
    filter: blur(0px);
    -webkit-filter: blur(0px);
   
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(28,28,30,1)), to(rgba(28,28,30,0)));
    mask-image: linear-gradient(to right, rgba(28,28,30,1), rgba(28,28,30,0));
    
}

.image-shadow-last-r {
    width: 80vw;
    height: 300px;
    min-width: 300px;
    min-height: 300px;
    border-radius: 10px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;

    filter: blur(20px);
    -webkit-filter: blur(20px);
    
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(28,28,30,1)), to(rgba(28,28,30,0)));
    mask-image: linear-gradient(to right, rgba(28,28,30,1), rgba(28,28,30,0));
    
}

.border-last-r {
    width: 100%;
    height: auto;
    background: rgb(28,28,30);
    text-align:center;
    margin: 5px;
    margin-top: 50px;
    border-radius: 10px;
    border: 0px solid rgb(28,28,30);
    border: 0px solid #dee2e6!important;
}

.image-shadow-conc-r {
    width: 80vw;
    height: 300px;
    min-width: 300px;
    min-height: 300px;
    border-radius: 10px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;

    filter: blur(20px) !important;
    -webkit-filter: blur(20px) !important;
    
    -webkit-mask-image:-webkit-gradient(linear, right top, right bottom, from(rgba(28,28,30,1)), to(rgba(28,28,30,0))) !important;
    mask-image: linear-gradient(to left, rgba(28,28,30,1), rgba(28,28,30,0));
    
}

.image-shadow-conc-rn {
    width: 80vw;
    height: 300px;
    min-width: 300px;
    min-height: 300px;
    border-radius: 10px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;

    
    
   
    
}

.border-conc-r {
    width: 100%;
    height: auto;
    background: rgb(28,28,30);
    text-align:center;
    margin: 5px;
    margin-top: 10px;
    border-radius: 10px;
    border: 0px solid rgb(28,28,30);
    border: 0px solid #dee2e6!important;
}

.image-shadow-alb-v {
    width: 320px;
    height: 320px;
    min-width: 300px;
    min-height: 300px;
    border-radius: 7px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
  }

.border-alb-v {
    width: 36%;
    height: auto;
    background: rgb(28,28,30);
    text-align:center;
    margin: 0px;
    border: 0px solid rgb(28,28,30);
    border: 0px solid #dee2e6!important;
}
.alb-info{
    width: 320px;
    height: auto;
}
.alb-songs{
    width: 60%;
    margin-left: 18px;
}
.maxWidth .row{
    margin-left: 0px;
    background: rgb(28,28,30);
}
.alb-cont-border{
    margin-top:10px;
    margin-left:19% !important;
    border-bottom: 1px solid rgb(56, 56, 56);
}

.border-video {
    width: 400px;
    height: 224px;
    background: rgb(28,28,30);
    text-align:center;
    margin: 5px;
    margin-top: 10px;
    border-radius: 10px;
    border: 0px solid rgb(28,28,30);
    border: 0px solid #dee2e6!important;
}
.border-video .embed-responsive{
    border-radius: 10px;
}

.item-text-1 {
    color: rgb(255, 255, 255);
    font-family: 'Anton', sans-serif;
    font-size: 50px;

}
.item-text-2 {
    color: rgb(255, 255, 255);
    margin-top: -20px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 70px;
}
.item-text-3 {
    color: rgb(202, 202, 202);
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    margin-top: 10px;

}

.item-text-4 {
    color: rgb(180, 180, 180);
    font-family: 'Advent Pro', 'bold';
    font-size: 20px;
    margin-top: -20px;
}
.item-text-5 {
    color: rgb(224, 224, 224);
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    margin-top: 20px;
}

.item-text-6 {
    color: rgb(255, 255, 255);
    position: absolute;
    bottom: 20px;
    left: 30px;
    display: block;
    font-family: 'Lato', bold;
    font-size: 50px;
}
.item-text-7 {
    color: rgb(197, 197, 197);
    font-family: 'Lato', bold;
    font-size: 40px;
    position: absolute;
    bottom: 75px;
    left: 30px;
	display: block;
}

.item-text-8 {
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 35px;
    padding-bottom: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
}
.item-text-9 {
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    padding-bottom: 0px;
    margin-top: 5px;
}
.item-text-10 {
    color: rgb(124, 124, 124);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    padding-bottom: 0px;
    margin-top: 5px;
}
.item-text-11 {
    color: rgb(124, 124, 124);
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    padding-bottom: 0px;
    margin-top: 5px;
}
.item-text-12 {
    color: rgb(255, 255, 255);
    font-family: 'Archivo Black', sans-serif;
    font-size: 70px;
    
}

.item-text-13 {
    color: rgb(255, 255, 255);
    font-size: 35px;
    margin-top: 10%;
    font-family: 'Archivo Black', sans-serif;
    font-size: 65px;
}
.item-text-14 {
    color: rgb(255, 255, 255);
    font-family: 'Anton', sans-serif;
    font-size: 25px;
}
.item-text-15 {
    color: rgb(197, 197, 197);
    font-family: 'Lato', bold;
    font-size: 15px;
    position: absolute;
    bottom: 85px;
    left: 28px;
	display: block;
}
.item-text-16 {
    color: rgb(197, 197, 197);
    font-family: 'Lato', bold;
    font-size: 40px;
    position: absolute;
    top: 30px;
    left: 30px;
	display: block;
}
.item-text-17 {
    color: rgb(197, 197, 197);
    font-family: 'Lato', bold;
    font-size: 15px;
    position: absolute;
    bottom: 112px;
    left: 30px;
	display: block;
}
.item-text-18 {
    color: rgb(255, 255, 255);
    margin-top: 25%;
    font-family: 'Archivo Black', sans-serif;
    font-size: 500%;
    opacity: .7;
}

.item-text-19 {
    color: rgb(255, 255, 255);
    margin-top: 40%;
    font-family: 'Archivo Black', sans-serif;
    font-size: 250%;
    opacity: .7;
}

.item-text-20 {
    color: rgb(255, 255, 255);
    font-family: 'Archivo Black', sans-serif;
    font-size: 100%;
    opacity: .9;
    padding: 0px;
}


.maxWidth {
    margin-top: 20px;
    width: 80%;
    margin-left: 18%;
    margin-right: 0px;
    padding: 0px;
    background: rgb(0, 0, 0);
}

.main-sl{
    margin-top: -57px !important;
}

.page {
    flex-wrap: wrap;
    display: flex;
    margin: auto;
    flex-shrink: 0;
    background: rgb(28,28,30);
   
}
.line {
    width: 100%;
    height: 350px;
    background: rgb(28,28,30);
    text-align:center;
    margin: 5px;
    padding: 0px;
    border: 0px solid #dee2e6!important;
}

.line-two {
    width:500px;
    height: auto;
    background: rgb(28,28,30);
    text-align:center;
    margin: 5px;
    padding: 0px;
}
.image-shadow-line-two {
    width: 100%;
    height: 200px;
    min-width: 150px;
    min-height: 150px;
    border-radius: 7px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-position: center;
    background-size: cover;
  }

.line1 {
    width: 100%;
    height: 350px;
    background: rgb(28,28,30);
    text-align:left;
    margin: 5px;
    padding: 0px;
    border: 0px solid #dee2e6!important;
}

.line-block{
    width: 100%;
    height:100%;
    text-align:center;
    border: 3px solid #dee2e6!important;
}

.image-shadow-line {
    width: 100%;
    height: 350px;
    min-width: 150px;
    min-height: 150px;
    border-radius: 7px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-position: center;
    background-size: cover;
  }
  .carousel{
    width: 100%;
  }
  .image-shadow-circ {
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
    border-radius: 150px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
  }
  .title {
    margin-top: 10px;
    margin-bottom: 5px;
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    margin-left: 19%;
  }
  .title-v {
    margin-top: 10px;
    margin-bottom: -10px;
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    margin-left: 18%;
  }
  .bio {
    margin-top: 10px;
    margin-bottom: 5px;
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    margin-left: 18%;
  }
  .genres {
    width: 80%;
    margin-top: 10px;
    margin-bottom: 5px;
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    margin-left: 18%;
  }
  .p-name {
    width: 80%;
    margin-left: 18%;
    position: absolute;
    bottom:5%; 
  }
  .genres span{
    margin: 1px;
  }

  .stat{
    width: 80%;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 18%;
  }

  .b-number {
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 50px; 
}
.b-number h4{
    color: rgb(161, 161, 161);
}


.d-hidden{
    display: none;
}

.row-striped:nth-of-type(odd){
    background-color: #efefef;
    border-left: 4px #1899f5 solid;
  }
  
.row-striped:nth-of-type(even){
    background-color: #999999;
    border-left: 4px #999999 solid;
  }
  


  .concert {
      width: 500px;
      height: 150px;
      border-radius: 10px;
      background-color: #999999;
  }
  .concert h2{
      margin-left: 10px;
  }
  .concert-info{
      margin-left: 30px;
  }
  .album-slider .container{
    width: 500px ;
    height: 150px;
  }
  .container-fluid{
      width:78%;
      margin-left: 19%;
  }


  .image-shadow-prev {
    width: 44px;
    height: 44px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 7px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    margin-top: 1px;
  }
  .image-shadow-prev-album {
    width: 200px;
    height: 200px;
    min-width: 200px;
    min-height: 200px;
    border-radius: 7px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    margin:10px;
    margin-left: 10px;
  }
  .table {
    padding: 0px;
    padding-bottom: 2px;
    padding-top: 2px;
    margin: 0px;
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    border: 0px solid #fff !important;
  }
  .table-album {
    padding: 0px;
    padding-bottom: 2px;
    padding-top: 2px;
    margin: 0px;
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    border: 0px solid #fff !important;
  }
.alb-info{
    border: 0px solid #fff !important;
    width:310px;
    height:auto;
    padding-left: 10px;
}
.alb-info-list{
    border: 0px solid #fff !important;
    width:80%;
    height:200px;
    padding-left: 10px;
    padding-top: 90px;
}
.cat-info-list{
    border: 0px solid #fff !important;

}
.pl-info-list-f{
    border: 0px solid #fff !important;
    width:100%;
    height:300px;
    padding-left: 10px;
    padding-top: auto;
}
.alb-butt{
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    margin-top:-45px;
}
.alb-artist{
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
} 
.alb-name{
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    margin-top:-20px;
}

.download-button{
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 13px;
}
.download-button-song{
    color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
}
.alb-count{
    color: rgba(73, 73, 73, 0.374);
    font-family: 'Archivo Black', sans-serif;
    font-size: 450%;
    opacity: .3;
    margin-top:30px;
}
.song-time{
    color: rgba(255, 255, 255, 0.761);
    font-family: 'Archivo Black', sans-serif;
    font-size: 300%;
    opacity: .4;
    margin-top:-40px;
}
.alb-count-text{
    color: rgba(170, 164, 164, 0.374);
    font-family: 'Archivo Black', sans-serif;
    font-size: 150%;
    opacity: .3;
    margin-top:-80px;
}


.image-shadow-prev-artist {
    width: 300px;
    height: 200px;
    min-width: 300px;
    min-height: 200px;
    border-radius: 5px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    margin:10px;
    
  }

.art-info-list{
    border: 0px solid #fff !important;
    width:100%;
    height:200px;
    padding-left: 10px;
    padding-top: 20px;
}
.art-name{
    color: rgb(255, 255, 255);
    font-family: 'Archivo Black', sans-serif;
    font-size: 40px;
    margin-top:-38px;
}
.art-count{
    color: rgba(170, 164, 164, 0.374);
    font-family: 'Archivo Black', sans-serif;
    font-size: 180%;
    opacity: .3;
    margin-top:-48px;
}
.art-count-text{
    color: rgba(73, 73, 73, 0.374);
    font-family: 'Archivo Black', sans-serif;
    font-size: 130%;
    opacity: .3;
    margin-top:-40px;
}



.image-shadow-prev-pl {
    width: 300px;
    height: 300px;
    min-width: 300px;
    min-height: 300px;
    border-radius: 5px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-size: cover;
    margin:10px;
    
  }

.image-shadow-prev-cat {
width: 200px;
height: 200px;
min-width: 200px;
min-height: 200px;
border-radius: 5px;
border: 0px solid rgb(28,28,30);
display: block;
background-size: cover;
}

.pl-info-list{
    border: 0px solid #fff !important;
    width:100%;
    height:200px;
    padding-left: 10px;
    padding-top: 15px;
}
.pl-name{
    color: rgb(15, 9, 9);
    font-family: 'Archivo Black', sans-serif;
    font-size: 40px;
    margin-top:-38px;
}

.cat-name{
    color: rgb(255, 255, 255);
    font-family: 'Archivo Black', sans-serif;
    font-size: 20px;
    
}

.pl-count{
    color: rgba(170, 164, 164, 0.374);
    font-family: 'Archivo Black', sans-serif;
    font-size: 180%;
    opacity: .3;
    margin-top:-48px;
}
.pl-count-text{
    color: rgba(73, 73, 73, 0.374);
    font-family: 'Archivo Black', sans-serif;
    font-size: 130%;
    opacity: .3;
    margin-top:-40px;
}
.pl-butt{
    padding-bottom: 5px;
}
.pl-butt span :hover{
    cursor: pointer;
}
.btn-outline-primary:hover{
    cursor: pointer;
}
.btn-outline-success:hover{
    cursor: pointer;
}

.cursor-pointer-all-obj:hover{
    cursor: pointer;
}
.no-link{
    text-decoration: inherit;
}
.no-link:hover{
    text-decoration: inherit;
    cursor: pointer;
}

.maxWidth .container .table-dark {
    background: rgb(28,28,30) !important;
}
.table-dark {
    background: rgb(28,28,30);
}
.pl-button{
    border: 0px solid rgb(28,28,30);
    padding-bottom: 0px;
    padding-top: 0px;
    color: white;
    background-color: rgba(73, 73, 73, 0);
    -webkit-appearance: none;
    border: none;
    outline:none;
    margin-right: -20px;
}
.pl-button:focus{outline:none !important;}
.pl-button-name{
    background-color: rgba(73, 73, 73, 0);
    color: rgba(73, 73, 73, 0);
    font-family: 'Archivo Black', sans-serif;
    height: 0px;
    width: 0px;
    font-size: 0px;
    display: none;
}
*:focus {
    outline: 0 !important;
}
#loading{
    width:100%;
    height:100%;
}

.image-shadow-line-artist {
    width: 99%;
    height: 350px;
    min-width: 150px;
    min-height: 150px;
    border-radius: 7px;
    border: 0px solid rgb(28,28,30);
    display: block;
    background-position: center;
    background-size: cover;

    filter: blur(20px);
    -webkit-filter: blur(20px);
    -webkit-mask-image:-webkit-gradient(linear, left center, right center, from(rgba(28,28,30,1)), to(rgba(28,28,30,0)));
    mask-image: linear-gradient(to right, rgba(28,28,30,1), rgba(28,28,30,0));
  }

  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(28,28,30);
}
#loader {
    display: block;
    position: relative;
    background-color: rgb(28,28,30);
    left: 57%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370DB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #BA55D3;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #FF00FF;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.flex-wrap {
    display: flex;
    width:82%;
    margin-left:17%;
    margin-top: 20px;
    justify-content: space-between;
}
.col {
    flex: 4;
}




<|start_filename|>GUI/templates/saved.html<|end_filename|>

{% extends 'base.html' %}

{% block body %}

<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Saved Songs
</p>

  <div class="container-fluid maxWidth lazy" style='background: rgb(28,28,30); margin-top: -5px;'>
        <table class="table table-dark justify-content space-between">
            <tbody>

              {% for i in range(artists_top_tracks| length) %}

              
                {% if i == 0 %}
                  <tr style="height:40px; border: 0px solid #fff !important;" >
                {% else %}
                  <tr style="height:40px;" > 
                {% endif %}

                    {% if i == 0 %}
                      <th scope="row" style='padding: 0px;border: 0px solid #fff !important;'> 
                    {% else %}
                      <th scope="row" style='padding: 0px;'> 
                    {% endif %}

                      <a class='no-link' href='artist.html'>
                        <div class="image-shadow-prev cursor-pointer-all-obj" style="background-image:url({{artists_top_tracks[i].alb_image}})" ></div>
                      </a>
                    </th>

                      {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href="{{ url_for('song', uri=artists_top_tracks[i].trc_id) }}">
                              {% if artists_top_tracks[i].trc_name|length >= 25 %}
                                {{artists_top_tracks[i].trc_name[:23]}}...
                              {% else %}
                                {{artists_top_tracks[i].trc_name}}
                              {% endif %}
                          </a>
                       </td>

                       {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('artist', uri=artists_top_tracks[i].art_id) }}'>
                              {% if artists_top_tracks[i].art_name|length >= 25 %}
                                {{artists_top_tracks[i].art_name[:23]}}...
                              {% else %}
                                {{artists_top_tracks[i].art_name}}
                              {% endif %}
                          </a>
                        </td>

                      {% if i == 0 %}
                          <td style="border: 0px solid #fff !important;">
                        {% else %}
                          <td>
                        {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('album', uri=artists_top_tracks[i].alb_id) }}'>
                              {% if artists_top_tracks[i].alb_name|length >= 20 %}
                                {{artists_top_tracks[i].alb_name[:17]}}...
                              {% else %}
                                {{artists_top_tracks[i].alb_name}}
                              {% endif %}
                          </a>
                        </td>
                        {% if i == 0 %}
                          <th class="text-justify text-right" style="border: 0px solid #fff !important;">
                        {% else %}
                        <th class="text-justify text-right">
                        {% endif %}
                        <a class='no-link download-link' href="{{ url_for('listenOnSpotifySong', uri=artists_top_tracks[i].trc_id)}}">
                          <span class="badge badge-success download-button">
                              <i class="fab fa-spotify"></i> Listen on Spotify
                          </span>
                        </a>

                        <a class='no-link download-link' href="{{ url_for('downloadSingleSong', uri=artists_top_tracks[i].trc_id)}}">
                          <span class="badge badge-primary download-button">
                            <i class="fas fa-arrow-alt-circle-down"></i> Download
                          </span>
                        </a>
                    </th>

                </tr>

              {% endfor %}

            </tbody>
          </table>
</div>

{% endblock %}