index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="mobile-web-app-capable" content="yes">
  <title>domoshare</title>

  <!-- TYPO -->
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

  <link rel="stylesheet" href="main.min.css">
</head>
<body>

    <!-- premier écran -->
  <div id="splash">
    <span class="demarrer">x</span>
    <span class="hello">Bienvenue<br>
      dans <b>DomoShare</b>
    </span>
    <span class="logo"><img src="img/logo.png" /></span>
    <span class="sous-titre">l'application de partage local<br> de média sur tous vos appareils <br>connectés!</span>
  </div>

  <!-- on boarding -->
  <div id="onboarding">
    <span class="suivant">°</span>
    <span class="texte1">Bienvenue!</span>
    <span class= "description">Choisissez un serveur pour<br> naviguer dans ses média.</span>
    <span class="panel"><img src="img/panel.png" /></span>
  </div>


  <!-- Serveurs -->
  <section id="servers">

  <h3>serveurs disponibles</h3>

    <div id="listeservers">
    <ul>
      <li><h5><img src= img/ordi.png />Plex Media Server: RPI 3</h3></li>
      <li><h5><img src= img/ordi.png />Kodi (MONSUPERORDI)</h5></li>
      <li><h5><img src= img/ordi.png />Plex Media Server: MacBook Pro de Fanny</h3></li>
    </ul>
    </div>

    <!-- niveau 1 des dossiers plex1 -->
    <div id="plex1niv1" class="hidden">
      <ul>
        <li>Genres</li>
        <li>Artistes</li>
        <li>Albums</li>
        <li id="plex1songs">Titres</li>
        <li>Années</li>
        <li>Top 100</li>
        <li>Récemment ajoutés</li>
        <li>Derniers lus</li>
        <li>Playlists</li>
      </ul>
    </div>
<!-- fin niveau 1 des dossiers plex1 -->

<!-- niveau 2 des dossiers plex1 -->
    <div id="plex1niv2" class="hidden">
    <table cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td>
              A Punchup at A Wedding — Radiohead
            </t
          </tr>
                    <tr>
            <td>
              All Neon Like — Bjork
            </td>

        </tr>
        <tr>
            <td>
              The Book of Right-On — Joanna Newsom
            </td>

        </tr>
        <tr id="songikeda">
            <td>
              Data: Microhelix — Ryoji Ikeda
            </td>

        </tr>
        <tr>
            <td>
              Hard Sun — Eddie Vedder
            </td>
        </tr>
        <tr>
            <td>
              Insert — Opiate
            </td>
        </tr>
        <tr>
            <td>
              Move On Me — Fink
            </td>
        </tr>
        <tr>
            <td>
              Not A Number — Apparat
            </td>
        </tr>
        <tr>
            <td>
              The Rip — Portishead
            </td>
        </tr>
        <tr>
            <td>
              SURRIPERE — Autechre
            </td>
        </tr>
        <tr>
            <td>
              Vaihtovirta — Pan Sonic
            </td>
        </tr>
        <tr>
            <td>
              Zoetrope — Boards of Canada
            </td>
        </tr>
    </table>
  </div>
<!-- fin niveau 2 des dossiers plex1 -->
  </section>

<!-- players dispos -->
  <section ="renderers">
    <h4>players disponibles</h4>
    <!-- carousel -->
      <div class="carousel">
        <!-- diapo 1 -->
        <div id="kodi">
          <h3>MacBook Pro de Fanny</h3>
          <button>play</button>
          <input type="range"></input>
        </div>
        <!-- diapo 2 -->
        <div>
          <button>p</button>
          <h6>iPhone de Célia</h6>
        </div>
      </div>
  </section>
  <script
  src="http://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <script src="main.js" charset="utf-8"></script>


</body>
</html>