index.html 3.48 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">
9
10
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
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" id="overview" 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>
Jonas Heinrich's avatar
Jonas Heinrich committed
33
34
35
36
37
38
39
40
41
42
43
          <video id="video" width="100%" height="100%">

            <!-- Video here -->
            <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>

            <!-- Markup to replace default interface -->
            <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>
44
                <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
45
46
47
48
49
                <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">
50
51
52
53
                <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
54
55
56
57
58
                <div class="clearfix"></div>
              </div>
            </div>
        </div>

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

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>