Lyrics-API-Web-App/index.html at master · kevinusername/Lyrics-API-Web-App · 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
<!doctype html>
<html>

<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lyric Search Front End</title>

  <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">

  <script src="jquery.min.js"></script>
  <script src="bootstrap/bootstrap.min.js"></script>

</head>


<body style="background-color:#212121">

<nav class="navbar navbar-expand-md navbar-light bg-dark" style="background-color:#424242 !important">
  <a class="navbar-brand" href="index.html">
    <img src="./icons/banner.png" width="30" height="30" alt="">
    <!-- Free use icon from https://www.iconfinder.com./icons/531899/entertainment_mic_microphone_multimedia_music_sound_icon (CC BY-SA 3.0) -->
  </a>

  <button class="navbar-toggler ml-auto search-button" type="button" data-toggle="collapse"
          data-target="#search-inputs">
    <img src="./icons/three-bars.svg" style="margin-bottom:2px"/>
  </button>

  <div class="navbar-collapse collapse show" id="search-inputs">
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Artist" aria-label="Search" id="artist-name">
      <input class="form-control mr-sm-2" type="search" placeholder="Song" aria-label="Search" id="song-name">
      <button class="btn btn-outline-success" type="button" id="search-button" disabled>Search</button>
    </form>
  </div>
</nav>


<div class="container" style="color:#FAFAFA">


  <div class="row">

    <div id="main-col" class="col-lg-6 offset-lg-3 col-sm-auto col-md-10 offset-md-1">
      <h3 class="row tutorial justify-content-center" id="tutorial">
        Enter a song and artist above
      </h3>

      <div class="row justify-content-center d-none" id="button-container" style="margin-bottom:10px; margin-top:10px">
        <h5 class="col-auto" style="margin-top:7px">Play on:</h5>
        <button type="button" class="btn spotify-button col-auto" id="spotify-button" style="margin-right:5px">
          <img class="spotify-logo" src="./icons/Spotify_Logo_RGB_White.png" alt="">
        </button>
        <button type="button" class="btn yt-button col-auto" id="yt-button" onclick="">
          <img class="yt-logo" src="./icons/yt_logo_mono_dark.png">
        </button>
      </div>

      <hr class="d-none" style="background-color:#FAFAFA">

      <div class="row" id="artist-result-container" style="margin-bottom:10px">
        <div id="album-art" class="col-auto"></div>
        <div id="track-info" class="col-auto"></div>
      </div>

      <hr class="d-none" style="background-color:#FAFAFA">

      <div class="row" id="lyrics-result-container">
        <p id="lyrics-body" style="margin-left:10px; margin-right:10px"></p>
      </div>

    </div>

    <div class="col-md-6 offset-md-1 col-lg-3 offset-lg-0 col-auto" id="recommendations" style="margin-top:5px"></div>
  </div>

</div>


<!-- <script src="api.js"></script> -->
<script src="scripts.js"></script>
</body>

</html>