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

4 5
  <head>
    <meta data-react-helmet="true" charset="utf-8"/>
Jonas Heinrich's avatar
Jonas Heinrich committed
6
    <meta name="viewport" content="width=device-width, initial-scale=1">
7 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
9
    <link rel="stylesheet" type="text/css" href="css/player.css">
Jonas Heinrich's avatar
Jonas Heinrich committed
10
    <link rel="stylesheet" type="text/css" href="css/overview.css">
11
    <link rel="stylesheet" type="text/css" href="css/mapbox-gl-0.43.0.css">
12
  </head>
Jonas Heinrich's avatar
Jonas Heinrich committed
13

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

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

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

            <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>
43
                <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
44 45 46 47 48
                <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">
49 50 51
                <button type="button" class="icon full-screen" id="fullscreen">
                  <img class="icon-screen" src=images/icon_fullscreen.png>
                </button>
Jonas Heinrich's avatar
Jonas Heinrich committed
52
                <!-- <span class="icon-screen" aria-hidden="true"></span> -->
Jonas Heinrich's avatar
Jonas Heinrich committed
53 54 55 56 57
                <div class="clearfix"></div>
              </div>
            </div>
        </div>

58 59 60 61 62 63 64 65 66 67 68 69
        <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
70
      </content>
71
    </div>
Jonas Heinrich's avatar
Jonas Heinrich committed
72

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

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

</html>