forked from pmcdonough8133/last.timer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (144 loc) · 6.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Last.fm Time Charts</title>
<meta name="description" content="Time based sorted charts for last.fm users">
<meta name="author" content="IAmTheBlackMetal">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!-- <link rel="stylesheet" href="sort-table.min.css">-->
<script type="text/javascript" src="js/main.js"></script>
<!-- <script src="sort-table.js"></script>-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="page-wrap">
<!-- Header -->
<h1>Last.fm Time Charts</h1>
<h2>Ever want to see your charts sorted by playtime instead of playcount?<br>Well now you can!</h2>
<!-- Form -->
<div id="form-holder">
<form class="timeChart" action="#" id="myForm" onsubmit="createCharts();" method="get">
<br>
<input type="text" name="user" id="usernameInput" placeholder="Last.fm username..." pattern="[A-Za-z0-9_-]{2,25}" autofocus="" required="">
<br>
<br>
<select name="metric" id="chartMetric">
<option value="artist">Artists</option>
<!-- <option value="album">Albums</option>-->
<option value="track">Tracks</option>
</select>
<select name="timeframe" id="chartTimeframe">
<option value="7day">7 days</option>
<option value="1month">1 month</option>
<option value="3month">3 months</option>
<option value="6month">6 months</option>
<option value="12month">12 months</option>
<option value="overall">Overall</option>
</select>
<!--
<select name="size" id="chartSize">
<option value=8>Top 8</option>
<option value=16>Top 16</option>
<option value=25>Top 25</option>
<option value=50>Top 50</option>
<option value=100>Top 100</option>
<option value=500>Top 500</option>
<option value=1000>Top 1000</option>
</select>
-->
<br>
<br>
<input type="button" name="submit" value="Generate Charts" id="Submit" onClick="createCharts();">
</form>
</div>
<!-- <button id="tablePages" class="button">Switch to table with pages</button>-->
<!-- Content -->
<!-- <h3></h3>-->
<!-- <p></p>-->
<p id="loadingMessages"></p>
<div id="chartOutput">
</div>
<!--
<div class="form-group">
<fieldset>
<form action="" class="form-group" method="post">
<div class="table-responsive">
<div id="chartOutput" class="table-responsive">
</div>
</div>
</form>
</fieldset>
</div>
-->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p id="popUpBox"></p>
</div>
</div>
<div id="badTrackButtonContainer">
<button id="badDataButton" class="button">Check for Tracks with no time data</button>
</div>
<!--
<div id="chartOutput">
<table id="dymanictable" border="1" cellpadding="2">
<tr>
<td><b>Artist</b></td>
<td><b>Total Playtime</b></td>
</tr>
</table>
</div>
-->
<div id="footer">
<ul>
<a href="http://www.Last.fm/user/IAmThBlackMetal">IAmTheBlackMetal (Creator)</a>
|
<a href="mailto:p.mcdonough8133@gmail.com">Contact</a>
</ul>
<!--
<div id="tooltipDiv" class="tooltip"><img id="iInCircle" src="infoThumbnail.png" alt="ⓘ">ⓘ
<span class="tooltiptext">
The Top x option dictates how many artist will be checked, not just returning the Top x across the timeframe.<br>
The average track length in the generated chart is based off of tracks that have time data, it ignores tracks with no data.
</span>
</div>
-->
<p id="detailsParagraph">This application is calculated using the last.fm time data. It can be a semi-common occurence where tracks do not have time data listed. This is either caused by poor meta data (ex: Remastered, Studio Version, Remix, etc. in the Track title) or simply from a lack of data. Last.fm gathers metadata for track length from musicbrainz and other sources so if you would like to help improve the accuracy of this tool, you can update the data on musicbrainz and wait for last.fm to grab the updated data. Fixing your own metadata will also improve your useage of this tool. NOTE: The button to display tracks with no time data will not work for the tracks option as those tracks without data will simply appear in the table.</p>
</div>
</div>
<script>
var popUp = document.getElementById("myModal");
var popUpButton = document.getElementById("badDataButton");
var span = document.getElementsByClassName("close")[0];
popUpButton.onclick = function() {
popUp.style.display = "block";
}
span.onclick = function() {
popUp.style.display = "none";
}
window.onclick = function(event) {
if (event.target == popUp) {
popUp.style.display = "none";
}
}
document.getElementById("myForm").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
createCharts();
e.preventDefault();
}
}
</script>
<script>
$(document).ready(function() {
$(tableOfOutput).ready(function() {
$('#tableOfOutput').DataTable();
} );
});
</script>
</body>
</html>