spotify.novatorem.html.j2

<svg width="320" height="{{height}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="cardTitle" role="img">
  <title id="cardTitle">Now playing on Spotify</title>
  <foreignObject width="320" height="{{height}}">
    <style>
      div {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
      }

      .container {
        display: flex;
        align-items: center;

        border-radius: 10px;

        padding: 10px 10px
      }

      .cover-link {
        height: 80px;
      }

      .cover {
        border-radius: 3px;

        margin-right: 10px;
      }

      .playing {
        display: flex;
        justify-content: center;
        align-items: center;

        color: #53b14f;
        font-weight: bold;
        text-align: center;

        margin-bottom: 8px;
      }

      .not-play {
        color: #ff1616;
        text-align: center;

        margin-bottom: 0;
      }

      .text-container {
        align-self: flex-end;

        width: 200px;
        height: 70px;
      }

      .artist {
        color: #434343;
        font-weight: 500;
        font-size: 16px;
        text-align: center;

        margin-bottom: 3px;
      }

      .song {
        color: #999;
        font-size: 15px;
        text-align: center;

        margin-bottom: 28px;
      }

      @media (prefers-color-scheme: light) {
        .artist{
          color: #434343;
        }

        .song{
          color: #999;
        }
      }

      @media (prefers-color-scheme: dark) {
        .artist{
          color: #b9b9b9;
        }

        .song{
          color: #999;
        }
      }

      .song-container {
        overflow: hidden;
        white-space: nowrap;
      }

      .song-container::before {
        content: '\00a0';
      }

      .scrolling {
        {# animation: marquee 8s linear infinite;
        display: block;
        min-width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap; #}

        animation: marquee 8s linear infinite;
        display: inline-block;
        padding-right: 20px;
      }

      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-100%);
        }
      }

      #bars {
        position: absolute;
        height: 14px;
        width: 200px;
        overflow: hidden;
        margin: -14px 0 0 0px;
      }

      .bar {
        background: #{{bar_color|safe}};
        bottom: 1px;
        height: 3px;
        position: absolute;
        width: 2px;
        animation: sound 0ms -800ms linear infinite alternate;
      }

      @keyframes sound {
        0% {
          opacity: .35;
          height: 3px;
        }

        100% {
          opacity: 1;
          height: 14px;
        }
      }

      {{css_bar|safe}}
    </style>
    <div xmlns="http://www.w3.org/1999/xhtml" class="container">
      {% if song_name %}
        {% if cover_image %}
          <a href="{}" target="_BLANK" class="cover-link">
            <img src="data:image/png;base64, {{img}}" width="80" height="80" class="cover" />
          </a>
        {% endif %}
        <div class="text-container">
          <div class="artist">{{artist_name}}</div>
          <div class="song-container">
            <div class="song scrolling">{{song_name}}</div>
            <div class="song scrolling" aria-hidden="true">{{song_name}}</div>
            <div class="song scrolling" aria-hidden="true">{{song_name}}</div>
          </div>
          <div id='bars'>{{content_bar|safe}}</div>
        </div>
      {% else %}
        <div class="playing not-play">Nothing playing on Spotify</div>
      {% endif %}

    </div>
  </foreignObject>
</svg>