82 lines
No EOL
2.7 KiB
HTML
82 lines
No EOL
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Top Lists For Spotify</title>
|
|
|
|
<!-- Stylesheets -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="./css/track.css">
|
|
<link rel="stylesheet" href="./css/artist.css">
|
|
|
|
<!-- Javascript Imports -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script src="./components/artist.js" defer async></script>
|
|
<script src="./components/track.js" defer async></script>
|
|
<script src="https://unpkg.com/v-tooltip"></script>
|
|
<script src="./js/text_computation.js"></script>
|
|
<script src="./app.js" defer></script>
|
|
<script src="./js/auth.js"></script>
|
|
<script src="./js/data.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<div id="login" v-if="!is_authed">
|
|
<div class="card center">
|
|
<a :href="spotify_auth_url">
|
|
<button id="spotify-login">Login With Spotify</button>
|
|
</a>
|
|
<p class="error" v-if="error.auth">{{error.auth}}</p>
|
|
<p>{{auth.alert}}</p>
|
|
</div>
|
|
</div>
|
|
<div id="main" v-else v-cloak>
|
|
<div class="flex-row">
|
|
<div v-cloak class="account-info">
|
|
<img v-if="user.image" :src="user.image" :alt="`${user.name}'s profile picture`" class="profile-picture">
|
|
{{user.name}}
|
|
</div>
|
|
<div class="type">
|
|
<select v-model="type">
|
|
<option value="" disabled>Please Select A Type</option>
|
|
<option value="Tracks">Tracks</option>
|
|
<option value="Artists">Artists</option>
|
|
</select>
|
|
</div>
|
|
<div class="duration">
|
|
<select v-model="duration">
|
|
<option value="" disabled>Please Select A Duration</option>
|
|
<option value="long_term">Several Years</option>
|
|
<option value="medium_term">~6 Months</option>
|
|
<option value="short_term">~4 Weeks</option>
|
|
</select>
|
|
</div>
|
|
<div class="limit">
|
|
<input type="number" v-model="count" placeholder="How Many?">
|
|
</div>
|
|
<div id="submit-button" v-if="button_type && duration">
|
|
<button @click="get_data()">Get Top {{count > 1 ? count : ``}} {{button_type}}</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-row error" v-if="error.main">{{error.main}}</div>
|
|
<div class="body" v-if="data.tracks.length > 0">
|
|
<track-card
|
|
v-for="top_track in data.tracks"
|
|
:track="top_track"
|
|
:key="top_track.id"
|
|
></track-card>
|
|
</div>
|
|
<div class="body" v-if="data.artists.length > 0">
|
|
<artist
|
|
v-for="top_artist in data.artists"
|
|
:artist="top_artist"
|
|
:key="top_artist.id"
|
|
></artist>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |