mirror of
https://github.com/janishutz/MusicPlayerV2.git
synced 2025-11-25 13:04:23 +00:00
52 lines
2.8 KiB
HTML
52 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=7">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Showcase - MusicPlayerV2</title>
|
|
<link rel="stylesheet" href="/showcase.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
|
</head>
|
|
<body>
|
|
<div class="info">Designed and developed by Janis Hutz <a href="https://janishutz.com" target="_blank" style="text-decoration: none; color: white;">https://janishutz.com</a></div>
|
|
<div class="content loading" id="loading">
|
|
<h1>Loading...</h1>
|
|
<p>Please wait</p>
|
|
</div>
|
|
<div class="content" id="app">
|
|
<div v-if="hasLoaded" style="width: 100%">
|
|
<div class="current-song-wrapper">
|
|
<span class="material-symbols-outlined fancy-view-song-art" v-if="!playingSong.hasCoverArt || playingSong.coverArtOrigin !== 'api'">music_note</span>
|
|
<img v-else-if="playingSong.hasCoverArt && playingSong.coverArtOrigin === 'api'" :src="playingSong.coverArtURL" class="fancy-view-song-art" id="current-image" crossorigin="anonymous">
|
|
<div class="current-song">
|
|
<progress max="1000" id="progress" :value="progressBar"></progress>
|
|
<h1>{{ playingSong.title }}</h1>
|
|
<p class="dancing-style" v-if="playingSong.dancingStyle">{{ playingSong.dancingStyle }}</p>
|
|
<p>{{ playingSong.artist }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="song-list-wrapper">
|
|
<div v-for="song in songQueue" class="song-list">
|
|
<div class="song-details-wrapper">
|
|
<h3>{{ song.title }}</h3>
|
|
<p>{{ song.artist }}</p>
|
|
</div>
|
|
<div class="time-until">
|
|
{{ getTimeUntil( song ) }}
|
|
</div>
|
|
</div>
|
|
<!-- <img :src="" alt=""> -->
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<h1>Loading...</h1>
|
|
</div>
|
|
</div>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
|
|
<script src="/showcase.js"></script>
|
|
</body>
|
|
</html> |