alvin/novatorem
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/novatorem.git synced 2026-03-06 13:24:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dynamic readme

Browse Source
This commit is contained in:
novatorem
2020-08-15 22:22:39 -04:00
commit cf59dbeaf7
7 changed files with 405 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
api/templates/preview.html Normal file
View File

@@ -0,0 +1,106 @@
<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 {
display: flex;
}
.art {
float: left;
width: 33.33%;
}
.container {
background-color: #121212;
border-radius: 10px;
padding: 10px 10px
}
.playing {
font-weight: bold;
color: #53b14f;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.not-play {
color: #ff1616;
}
.artist {
font-weight: bold;
font-size: 24px;
color: #fff;
text-align: left;
margin-top: 5px;
}
.song {
font-size: 20px;
color: #b3b3b3;
text-align: left;
margin-top: 15px;
margin-bottom: 15px;
}
.logo {
margin-left: 5px;
margin-top: 5px;
}
.cover {
border-radius: 5px;
margin-top: 9px;
}
#bars {
height: 30px;
margin: -20px 0 0 0px;
position: absolute;
width: 40px;
}
.bar {
background: #53b14f;
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: 28px;
}
}
</style>
<div class="main">
<a class="art" href="{}" target="_BLANK">
<center>
<img src="data:image/png;base64, {{img}}" width="200" height="200" class="cover" />
</center>
</a>
<div class="text">
<div class="artist">Artist</div>
<div class="song">Song</div>
<div id="bars"></div>
</div>
</div>
</div>

122
api/templates/spotify.html.j2 Normal file
View File

@@ -0,0 +1,122 @@
<svg width="480" height="133" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject width="480" height="133">
<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 {
display: flex;
}
.container {
border-radius: 5px;
padding: 10px 10px 10px 0px;
}
.playing {
font-weight: bold;
color: #53b14f;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.not-play {
color: #ff1616;
}
.art {
float: left;
width: 27%;
margin-left: -5px;
}
.text {
width: 71%;
}
.song {
font-size: 24px;
color: #666;
text-align: center;
margin-top: 3px;
}
.artist {
font-size: 20px;
color: #b3b3b3;
text-align: center;
margin-bottom: 5px;
}
.logo {
margin-left: 5px;
margin-top: 5px;
}
.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;
}
}
{{css_bar|safe}}
</style>
{% if song_name %}
<div class="main">
<a class="art" href="{}" target="_BLANK">
<center>
<img src="data:image/png;base64, {{img}}" class="cover" />
</center>
</a>
<div class="text">
<div class="song">{{song_name}}</div>
<div class="artist">{{artist_name}}</div>
<div id="bars">
{{content_bar|safe}}
</div>
</div>
{% else %}
<div class="playing not-play">Nothing playing on Spotify</div>
{% endif %}
</div>
</div>
</foreignObject>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB