<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>CART | multidiff</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <iframe src="" name="NowPlaying" style="display:none;"></iframe>

    <p id="cart1ID" style="display:none"></p>


    <section class="header grid grid-cols-4 gap-4">
      <h1>VOIE A</h1>
      <h1>VOIE B</h1>
      <h1>VOIE C</h1>
      <h1>VOIE D</h1>
    </section>

    <section class="content grid grid-rows-4 grid-flow-col gap-4">

      <div class="cart" id="cart1" data-cart1-id="">
        <audio preload="auto" src="" id="cartaudio1" onended="endcartaudio1()"></audio>
        <div class="headerCart" id="playStopCart1" onclick="playCart1()">
          <p class="title" id="titleCart1" data-cd1-title-cart=""></p>
          <p class="artist" id="artistCart1" data-cd1-artist-cart=""></p>
          <div class="progress_bar" id="progress_bar1">
            <div class="progressed" id="progressed1"></div>
          </div>
        </div>
        <div class="footerCart">
          <div class="footerHS">
            <p class="dur" id="timecart1" data-cd1-time-cart=""></p>
            <p class="dur" id="cur1" style="display:none"></p>
            <p class="txtIntro">INTRO</p>
            <p class="intro">00.0</p>
            <p class="txtFullDur">DUREE TOTALE</p>
            <p class="fullDur" id="fullTimeCart1" data-cd1-fulltime-cart=""></p>
          </div>
          <p class="number">1</p>
        </div>
      </div>




      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>
      <div class="cart"></div>

    </section>

    <section class="footer grid grid-cols-4 gap-4">
      <h1>ON AIR</h1>
      <h1></h1>
      <h1 id="hour" onload="showTime()">12:10:04</h1>
      <h1></h1>
    </section>


    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript">
    function showTime(){
        var date = new Date();
        var h = date.getHours(); // 0 - 23
        var m = date.getMinutes(); // 0 - 59
        var s = date.getSeconds(); // 0 - 59
        var session = "";

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

        var time = h + ":" + m + ":" + s + " " + session;
        document.getElementById("hour").innerText = time;
        document.getElementById("hour").textContent = time;

        setTimeout(showTime, 1000);

    }

    showTime();
    </script>
  </body>
</html>
