Untitled

avatar
unknown
html
2 years ago
2.6 kB
1
Indexable
<!DOCTYPE html>
<html lang="en">
  <head>
    <!--
      This is the page head - it contains info the browser uses to display the page
      You won't see what's in the head in the page
      Scroll down to the body element for the page content
    -->

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <!-- 
      This is an HTML comment
      You can write text in a comment and the content won't be visible in the page
    -->

    <title>Music player!</title>

    <!-- Meta tags for SEO and social sharing -->
    <link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
    <meta name="robots" content="index,follow" />
    <meta property="og:title" content="Music player" />

    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- Import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>
  <body>
    <div class="player">
      <!-- Define the section for displaying details -->
      <div class="details">
        <div class="now-playing">PLAYING x OF y</div>
        <div class="track-art"></div>
        <div class="track-name">Track Name</div>
        <div class="track-artist">Track Artist</div>
      </div>

      <!-- Define the section for displaying track buttons -->
      <div class="buttons">
        <div class="prev-track" onclick="prevTrack()">
          <i class="fa fa-step-backward fa-2x"></i>
        </div>
        <div class="playpause-track" onclick="playpauseTrack()">
          <i class="fa fa-play-circle fa-5x"></i>
        </div>
        <div class="next-track" onclick="nextTrack()">
          <i class="fa fa-step-forward fa-2x"></i>
        </div>
      </div>

      <!-- Define the section for displaying the seek slider-->
      <div class="slider_container">
        <div class="current-time">00:00</div>
        <input
          type="range"
          min="1"
          max="100"
          value="0"
          class="seek_slider"
          onchange="seekTo()"
        />
        <div class="total-duration">00:00</div>
      </div>

      <!-- Define the section for displaying the volume slider-->
      <div class="slider_container">
        <i class="fa fa-volume-down"></i>
        <input
          type="range"
          min="1"
          max="100"
          value="99"
          class="volume_slider"
          onchange="setVolume()"
        />
        <i class="fa fa-volume-up"></i>
      </div>
    </div>
    <footer class="footer"></footer>
  </body>
</html>
Editor is loading...