Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Your Playlist</title> | |
| <style> | |
| html { | |
| scrollbar-width: thin; | |
| scrollbar-color: #00ff00 #000; /* For Firefox */ | |
| } | |
| body { | |
| background-color: black; | |
| color: #00FF00; | |
| font-family: monospace; | |
| margin: 0; | |
| padding: 0; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| header { | |
| padding: 1em; | |
| border-bottom: 1px solid #00FF00; | |
| } | |
| main { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding: 1em; | |
| } | |
| ul { | |
| list-style-type: none; | |
| padding-left: 0; | |
| } | |
| li { | |
| margin-bottom: 0.5em; | |
| } | |
| footer { | |
| padding: 1em; | |
| border-top: 1px solid #00FF00; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| a.button { | |
| color: #00FF00; | |
| text-decoration: none; | |
| border: 1px solid #00FF00; | |
| padding: 0.5em 1em; | |
| } | |
| a.button:hover { | |
| background-color: #00FF00; | |
| color: black; | |
| } | |
| /*blinker*/ | |
| .blinker::after { | |
| content: '_'; /* This is the fake terminal cursor */ | |
| animation: blink 1s steps(2, start) infinite; | |
| } | |
| @keyframes blink { | |
| to { | |
| visibility: hidden; | |
| } | |
| } | |
| /* Scrollbar track */ | |
| ::-webkit-scrollbar { | |
| width: 8px; /* thin and sleek */ | |
| } | |
| /* Scrollbar background */ | |
| ::-webkit-scrollbar-track { | |
| background: #000; /* terminal background */ | |
| } | |
| /* Scrollbar handle (thumb) */ | |
| ::-webkit-scrollbar-thumb { | |
| background-color: #00ff00; /* terminal green */ | |
| border-radius: 4px; | |
| border: 1px solid #003300; | |
| box-shadow: 0 0 4px #00ff00; | |
| } | |
| /* On hover */ | |
| ::-webkit-scrollbar-thumb:hover { | |
| background-color: #33ff33; | |
| box-shadow: 0 0 6px #33ff33; | |
| } | |
| </style> | |
| <script> | |
| function showLoader() { | |
| document.getElementById('loader').style.display = 'block'; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Your Playlist</h1> | |
| </header> | |
| <main> | |
| {% if recommendations %} | |
| <ul> | |
| {% for song in recommendations %} | |
| <li>{{ song }}</li> | |
| {% endfor %} | |
| </ul> | |
| {% else %} | |
| <p>No playlist generated yet.</p> | |
| {% endif %} | |
| <p><a href="{{ url_for('load_more') }}" onclick="showLoader()" class="button">Load More</a></p> | |
| <p><span class="blinker"></span></p> | |
| </main> | |
| <div> | |
| <br> | |
| <br> | |
| <br> | |
| <div style="text-align: right;"> | |
| <a href="{{ url_for('download') }}" class="button">Download</a> | |
| {% if not guest %} | |
| <a href="{{ url_for('create_playlist') }}" onclick="showLoader()" class="button">Save to Spotify</a> | |
| {% else %} | |
| <a href="{{ url_for('create_playlist') }}" class="button">Spotify Features Disabled</a> | |
| {% endif %} | |
| <a href="{{ url_for('dashboard') }}" class="button">Return to Generator</a> | |
| </div> | |
| <br> | |
| <div id="loader" style="display:none;">Working... please wait</div> | |
| <br> | |
| <br> | |
| </div> | |
| <footer> | |
| <p>Made by Shape Tasia and Marty with ❤️</p> | |
| </footer> | |
| </body> | |
| </html> |