Loopify/popup.html at main · ayushap18/Loopify · 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
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Loopify</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app">
    <header>
      <img src="icons/logo.png" alt="Loopify Logo" id="logo" />
      <h1>Loopify</h1>
      <div id="accountStatus">Not connected</div>
    </header>

    <section id="controls">
      <button id="btnConnect">Connect Spotify</button>
      <button id="btnRefreshTrack">Refresh Current Track</button>
    </section>

    <section id="playerArea" class="card" hidden>
      <div id="trackInfo" class="muted">Track info</div>

      <div class="row">
        <button id="btnSuggest">Auto-suggest loop</button>
        <button id="btnSetStart">Set Start (current pos)</button>
        <button id="btnSetEnd">Set End (current pos)</button>
      </div>
      <div class="row small">
        <label>Start: <span id="startVal">-</span></label>
        <label>End: <span id="endVal">-</span></label>
        <label>Dur: <span id="durVal">-</span></label>
      </div>

      <div class="row">
        <button id="btnStartLoop">Start Loop</button>
        <button id="btnStopLoop" disabled>Stop Loop</button>
        <button id="btnSaveLoop">Save Loop</button>
      </div>

      <div class="row">
        <button id="btnCreatePlaylist">Create Spotify Playlist from Saved Loops</button>
        <button id="btnOpenLibrary">Open Loop Library</button>
      </div>

      <div id="log" class="log"></div>
    </section>

    <section id="libraryArea" class="card" hidden>
      <h3>Saved Loops</h3>
      <ul id="loopList"></ul>
  <button id="btnPlayMashup">Play Mashup</button>
  <button id="btnClearLibrary">Clear Library</button>
    </section>

  </div>
  <script src="popup.js"></script>
</body>
</html>