novatorem/api/templates/spotify.html.j2

<svg width="480" height="173" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <foreignObject width="480" height="173">
        <div xmlns="http://www.w3.org/1999/xhtml" class="container">
            <style>
                div {
                    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
                }

                .main {
                    margin-top: 40px;
                    display: flex;
                }

                .currentStatus {
                    position: static;
                    float: left;
                    font-size: 24px;
                    margin-top: -5px;
                    margin-left: 10px;
                }
                
                .container {
                    border-radius: 5px;
                    padding: 10px 10px 10px 0px;
                }

                .art {
                    float: left;
                    width: 27%;
                    margin-left: -5px;
                }

                .content {
                    width: 71%;
                }

                .song {
                    font-size: 24px;
                    color: #666;
                    text-align: center;
                    margin-top: 3px;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }

                .artist {
                    font-size: 20px;
                    color: #b3b3b3;
                    text-align: center;
                    margin-bottom: 5px;
                    margin-top: 4px;
                }

                .cover {
                    border-radius: 5px;
                    height: 100px;
                    width: 100px;
                }

                #bars {
                    height: 30px;
                    bottom: 23px;
                    margin: -20px 0 0 0px;
                    position: absolute;
                    width: 40px;
                }

                .bar {
                    background: #1DB954cc;
                    bottom: 1px;
                    height: 3px;
                    position: absolute;
                    width: 3px;
                    animation: sound 0ms -800ms linear infinite alternate;
                }
                
                @keyframes sound {
                    0% {
                        opacity: .35;
                        height: 3px;
                    }

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

                {{barCSS|safe}}
            </style>

            <div class="currentStatus">{{status}}</div>

            <div class="main">
                <a class="art" href="{}" target="_BLANK">
                    <center>
                        <img src="data:image/png;base64, {{image}}" class="cover" />
                    </center>
                </a>

                <div class="content">
                    <div class="song">{{songName}}</div>
                    <div class="artist">{{artistName}}</div>
                    <div id="bars">{{contentBar|safe}}</div>
                </div>
            </div>

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