119 lines
No EOL
4.2 KiB
HTML
119 lines
No EOL
4.2 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/card.css">
|
|
<link rel="stylesheet" href="./css/modal.css">
|
|
<link rel="stylesheet" href="./css/transitions.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="./components/icons.js" defer async></script>
|
|
<script src="https://unpkg.com/v-tooltip"></script>
|
|
<script src="./js/text_computation.js"></script>
|
|
<script src="./js/prototypes.js" async></script>
|
|
<script src="./js/dev/data.js" async></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="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 : `10`}} {{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"
|
|
@popularity_click="show.modal.popularity = true"
|
|
></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"
|
|
@popularity_click="show.modal.popularity = true"
|
|
></artist>
|
|
</div>
|
|
|
|
<!-- Modals Needed -->
|
|
<transition name="fade" @after-enter="show.modal_content = true">
|
|
<div
|
|
v-if="Object.values(this.show.modal).includes(true)"
|
|
class="modal-container"
|
|
@click.self="show.modal_content = false"
|
|
>
|
|
<transition name="burst" @after-leave="hide_modal">
|
|
<div v-if="show.modal_content && show.modal.popularity" class="modal">
|
|
<span @click="show.modal_content = false">
|
|
<close class="close-modal" colour="#ffffff80" @click="show.modal_content = false"></close>
|
|
</span>
|
|
<h2 class="center">How is Popularity Calculated?</h2>
|
|
<p class="center">
|
|
Popularity is a value between 0 and 100 that is calculated by Spotify based on how many plays the song/artist has recieved and how recent those plays are.
|
|
</p>
|
|
<p class="center">
|
|
This means that an artist/song that has had 100 plays today will have a higher popularity than a song/artist that has 100 from a month ago.
|
|
</p>
|
|
<p class="center">
|
|
This number is not updated in real time so refreshing the page will not reflect it's absolute accurate value.
|
|
</p>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
<script src="./app.js"></script>
|
|
<script src="./js/dev/app_modifications.js"></script>
|
|
<script>
|
|
let app = new Vue(vue_config)
|
|
</script>
|
|
</body>
|
|
</html> |