barcoder/index.html at main · wrongwave/barcoder · GitHub

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
<!DOCTYPE html>
<html lang=en>
<head>
	<meta charset=UTF-8>
	<meta name=viewport content='width=device-width, initial-scale=1.0'>
	<title>Barcoder (UPC/ISRC) | Wrong Wave</title>
	<meta name=description content='Lookup ISRC and UPC barcodes for Deezer and Spotify albums and tracks — paste a link, get release codes and a copyable tracklist'>
	<meta name=keywords content='ISRC, UPC, barcode, Spotify, Deezer, album, track, music metadata'>
	<meta name=author content='Wrong Wave / Artyom'>
	<meta name=theme-color content=#121212 media='(prefers-color-scheme: dark)'>
	<meta name=theme-color content=#f6f6f6 media='(prefers-color-scheme: light)'>
	<meta property=og:title content='Barcoder (UPC/ISRC) | Wrong Wave'>
	<meta property=og:description content='Lookup ISRC and UPC barcodes for Deezer and Spotify albums and tracks'>
	<meta property=og:type content=website>
	<meta name=twitter:card content=summary>
	<meta name=twitter:title content='Barcoder (UPC/ISRC) | Wrong Wave'>
	<meta name=twitter:description content='Lookup ISRC and UPC barcodes for Deezer and Spotify albums and tracks'>
	<link rel=icon href=favicon.svg type=image/svg+xml>
	<link rel=stylesheet href=style.css>
</head>
<body>
	<main>
		<h1>Barcoder</h1>
		<p>
			Lookup ISRC and UPC barcodes for albums and tracks.
			Paste a album/track link to get release codes and a copyable tracklist.
			Supported platforms: Deezer (works out of the box), Spotify — needs access keys: <a href=# id=spotify-keys-link>click to <span id=spotify-keys-action>add</span></a>.
		</p>
		<form id=lookup-form>
			<input
				id=url-input
				type=text
				inputmode=url
				placeholder='Deezer or Spotify album/track URL'
				autocomplete=off
				required
			>
			<button type=submit>Lookup</button>
		</form>
		<p id=status hidden></p>
		<section id=results hidden>
			<div class=results-header>
				<div class=meta id=meta></div>
				<div class=toolbar>
					<a id=album-btn hidden>View album</a>
					<button type=button id=share-btn>Share</button>
					<button type=button id=copy-btn>Copy info as text</button>
				</div>
			</div>
			<div class=table-wrap>
				<table>
					<thead>
						<tr>
							<th>#</th>
							<th>Title</th>
							<th>Length</th>
							<th>ISRC</th>
							<th></th>
						</tr>
					</thead>
					<tbody id=tracks-body></tbody>
				</table>
			</div>
		</section>
	</main>
	<dialog id=copy-dialog>
		<p id=copy-dialog-hint>Select and copy:</p>
		<textarea id=copy-dialog-text readonly rows=12></textarea>
		<form method=dialog>
			<button type=submit>Close</button>
		</form>
	</dialog>
	<dialog id=spotify-keys-dialog>
		<h2>Spotify API keys</h2>
		<p class=dialog-lead>
			Create an app in the
			<a href=https://developer.spotify.com target=_blank rel=noopener>Spotify Developer Dashboard</a> — log in with your normal listener account,
			then paste the <strong>Client ID</strong> and <strong>Client Secret</strong> below.
			Keys stay in your browser only, never sent to any servers.
		</p>
		<form id=spotify-keys-form>
			<label>
				Client ID
				<input id=spotify-client-id type=text autocomplete=off spellcheck=false required>
			</label>
			<label>
				Client Secret
				<input id=spotify-client-secret type=password autocomplete=off spellcheck=false required>
			</label>
			<button type=submit>Add</button>
		</form>
		<section id=spotify-keys-history class=keys-history hidden>
			<h3>Stored keys</h3>
			<ul id=spotify-keys-list></ul>
		</section>
		<button type=button id=spotify-keys-close>Close</button>
	</dialog>
	<footer>
		<a href=https://wrongwave.net target=_blank>← Wrong Wave</a>
		<span class=muted>&nbsp; ~ &nbsp;</span>
		<a href=https://github.com/wrongwave/barcoder target=_blank rel=noopener>Code on GitHub →</a>
	</footer>
	<script src=config.js></script>
	<script src=app.js></script>
</body>
</html>