ListenAlongJS/index.html at main · salazarbarrera/ListenAlongJS · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ListenAlongJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://www.youtube.com/iframe_api" async></script>
    <style type="text/css">
    	h1{
    		display: inline-block;
    	}

    	.trigger{
    		color: blue;
    		text-decoration: underline;
    		width: fit-content;
    		cursor: pointer;
    	}

    	.button{
			background-color: #cd0000;
			color: #d7d7d7;
		    width: fit-content;
		    border: solid;
		    border-color: #990505;
		    padding: 15px;
		    border-radius: 100%;
		    cursor: pointer;
    	}

    	@media (prefers-color-scheme: dark) {
		  body {
		    color: #cccbcb;
		    background: #0f0e0e;
		  }
		  .trigger {
			color: #7a7aff;
		  }
		  a:link {
 			color: #7a7aff;
		  }
		  a:visited {
		    color: #a501f0;
		  }
		}
    </style>
  </head>
  <body>
    <h1>ListenAlongJS</h1><small> 1.1.1 <a href="https://github.com/salazarbarrera/ListenAlongJS" target="_blank">[Git]</a></small>
    <div id="lobby" style="display: block;">
    	<form onsubmit='return false;' id="fakeForm">
		  <p>Youtube API Key: <input type="text" id="googleKeyUI" placeholder="AIz$3y5D-Bb2..." autocomplete="on" value=""> <small><a href="https://developers.google.com/youtube/v3/getting-started" target="_blank">(How)</a><a href="https://youtu.be/yuM7KH-JLu8" target="_blank">(Video)</a></small></p>
    	  <p>Target User: <input type="text" id="targertUserGUI" placeholder="e.g. insipidhues" autocomplete="on" value=""></p>
		  <button style="display: none;" type="submit"></button>
		</form>
		<br>
    	<p><b>Please allow popups for this website and authorize it to scrobble in your name!</b></p>
    	<small><p><b>Tips:</b> allow audio autoplay if you can. If input boxes are left empty, the hardcoded variables 'GOOGLE_KEY' and 'USER' are used instead.</p></small>
    	<div id="auth" class="button">Authorize</div>
    </div>
    <div id="launch" style="display: none;" class="trigger">
    	Launch after allowing access in the pop-up.
    </div>
    <div id="player" style="display: none;">
    	<p>
	    	<div id="skipper" class="trigger">Keep seeking»»</div>
	    </p>
	    <p id="song"></p>
	    <p id="targetuser" class="trigger"></p>
	    <div id="yt-iframe"></div>
	</div>
    <script src="bundle.js"></script>
  </body>
</html>