index.html 3.43 KB
Newer Older
1 2
<!doctype html>
<html lang="de">
Jonas Heinrich's avatar
Jonas Heinrich committed
3

4 5 6 7
  <head>
    <meta data-react-helmet="true" charset="utf-8"/>
    <title>Ausstellung-Virtuell | Folge und Varianz</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
Jonas Heinrich's avatar
Jonas Heinrich committed
8
    <link rel="stylesheet" type="text/css" href="css/player.css">
Jonas Heinrich's avatar
Jonas Heinrich committed
9
    <link rel="stylesheet" type="text/css" href="css/overview.css">
10
    <link rel="stylesheet" type="text/css" href="css/mapbox-gl-0.43.0.css">
11
  </head>
Jonas Heinrich's avatar
Jonas Heinrich committed
12

13
  <body>
Jonas Heinrich's avatar
Jonas Heinrich committed
14

15
    <div class="container">
Jonas Heinrich's avatar
Jonas Heinrich committed
16
      <logo>
17
        <img class="logo" src=images/logo.png>
18
        <img class="burger_menu" id="burger_menu" src=images/menu.png>
Jonas Heinrich's avatar
Jonas Heinrich committed
19 20
      </logo>
      <navigation>
21
        <ul>
22 23
          <li><a href=# id="overview">Werkübersicht</a></li>
          <li><a href=# id="about">Über das Projekt</a></li>
24
        </ul>
Jonas Heinrich's avatar
Jonas Heinrich committed
25 26
      </navigation>
      <map>
27
        <div id='map' style='width: 100%; height: 100%;'></div>
Jonas Heinrich's avatar
Jonas Heinrich committed
28 29
      </map>
      <content>
Jonas Heinrich's avatar
Jonas Heinrich committed
30 31

        <div id="video-container">
32
          <div class="overlay"></div>
33
          <video id="video" width="100%" height="100%" poster="images/video1_poster.png">
Jonas Heinrich's avatar
Jonas Heinrich committed
34 35 36 37 38 39 40 41

            <source src="https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4" type="video/mp4">
              <p>Error: your browser doesn't support HTML5 video.</p>
            </video>

            <div id="video-controls">
              <div class="controls">
                <button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button>
42
                <p id="timeDisplay" class="time"><span id="timeCurrent" class="current">00:00:00</span> / <span id="timeDuration" class="duration">00:00:00</span></p>
Jonas Heinrich's avatar
Jonas Heinrich committed
43 44 45 46 47
                <div class="seek-bar-wrapper" id="seek-bar-wrapper">
                  <input id="seek-bar" type="range" value="0" step="0.001">
                </div>
                <button type="button" id="mute" class="text mute">100</button>
                <input type="range" id="volume-bar" value="100">
48 49 50 51
                <button type="button" class="icon full-screen" id="fullscreen">
                  <img class="icon-screen" src=images/icon_fullscreen.png>
                  <!-- <span class="icon-screen" aria-hidden="true"></span> -->
                </button>
Jonas Heinrich's avatar
Jonas Heinrich committed
52 53 54 55 56
                <div class="clearfix"></div>
              </div>
            </div>
        </div>

57 58 59 60 61 62 63 64 65 66 67 68
        <div class="description">
          <h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
          <p class="prose-big">Bla bla</p>
          Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
        </div>
Jonas Heinrich's avatar
Jonas Heinrich committed
69
      </content>
70
    </div>
Jonas Heinrich's avatar
Jonas Heinrich committed
71

72
    <script src='js/mapbox-gl-0.43.0.js'></script>
73
    <script src="js/jquery-3.2.1.min.js"></script>
Jonas Heinrich's avatar
Jonas Heinrich committed
74
    <script src="js/player.js"></script>
75
    <script src="js/map.js"></script>
76
    <script src="js/main.js"></script>
77 78

  </body>
Jonas Heinrich's avatar
Jonas Heinrich committed
79 80

</html>