Dynamic realtime profile ReadMe linked with spotify
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

105 lines
2.3 KiB

5 years ago
  1. <div xmlns="http://www.w3.org/1999/xhtml" class="container">
  2. <style>
  3. div {
  4. font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  5. }
  6. .main {
  7. display: flex;
  8. }
  9. .art {
  10. float: left;
  11. width: 33.33%;
  12. }
  13. .container {
  14. background-color: #121212;
  15. border-radius: 10px;
  16. padding: 10px 10px
  17. }
  18. .playing {
  19. font-weight: bold;
  20. color: #53b14f;
  21. text-align: center;
  22. display: flex;
  23. justify-content: center;
  24. align-items: center;
  25. }
  26. .not-play {
  27. color: #ff1616;
  28. }
  29. .artist {
  30. font-weight: bold;
  31. font-size: 24px;
  32. color: #fff;
  33. text-align: left;
  34. margin-top: 5px;
  35. }
  36. .song {
  37. font-size: 20px;
  38. color: #b3b3b3;
  39. text-align: left;
  40. margin-top: 15px;
  41. margin-bottom: 15px;
  42. }
  43. .logo {
  44. margin-left: 5px;
  45. margin-top: 5px;
  46. }
  47. .cover {
  48. border-radius: 5px;
  49. margin-top: 9px;
  50. }
  51. #bars {
  52. height: 30px;
  53. margin: -20px 0 0 0px;
  54. position: absolute;
  55. width: 40px;
  56. }
  57. .bar {
  58. background: #53b14f;
  59. bottom: 1px;
  60. height: 3px;
  61. position: absolute;
  62. width: 3px;
  63. animation: sound 0ms -800ms linear infinite alternate;
  64. }
  65. @keyframes sound {
  66. 0% {
  67. opacity: .35;
  68. height: 3px;
  69. }
  70. 100% {
  71. opacity: 1;
  72. height: 28px;
  73. }
  74. }
  75. </style>
  76. <div class="main">
  77. <a class="art" href="{}" target="_BLANK">
  78. <center>
  79. <img src="data:image/png;base64, {{img}}" width="200" height="200" class="cover" />
  80. </center>
  81. </a>
  82. <div class="text">
  83. <div class="artist">Artist</div>
  84. <div class="song">Song</div>
  85. <div id="bars"></div>
  86. </div>
  87. </div>
  88. </div>