interactive-map/index.html at main · loorlab/interactive-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" href="preloader.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#d6d2ca" />
    <title>Plateforme 10 - Interactive Map</title>
  </head>
  <body>
    <!-- <div id="debug"></div> -->

    <!-- Preloader -->
    <div class="preloader">
      <div class="preloader-wrapper">
        <div class="loading">
          <img class="loader" src="/images/loader.svg" alt="Loader">
          <p class="loading-progress">0</p>
        </div>
      </div>
    </div>

    <!-- Experience -->
    <div class="experience">
      <canvas class="experience-canvas"></canvas>
    </div>

    <!-- Navbar -->
    <header>
      <img class="logo" src="/images/logo-plateforme10.svg" alt="Logo Plateforme 10">
    </header>

    <!-- Main -->
    <main>
      <!-- Points of Interests -->
      <div class="point mudac museum">
        <img class="label" src="/images/logo-mudac.svg" alt="Logo Mudac">
        <div class="text">Musée Cantonal de Design et d'Arts Appliqués Contemporains</div>
      </div>
      <div class="point elysee museum">
        <img class="label" src="/images/logo-elysee.svg" alt="Logo Photo Elysée">
        <div class="text">Photo Elysée</div>
      </div>
      <div class="point arcadia restaurant">
        <img class="label icn" src="/images/icn-restaurant.svg" alt="Restaurant Icon">
        <div class="text">Arcadia Restaurant</div>
      </div>
      <div class="point nabi restaurant">
        <img class="label icn" src="/images/icn-restaurant.svg" alt="Restaurant Icon">
        <div class="text">Le Nabi Café-Restaurant</div>
      </div>
      <div class="point lumen restaurant">
        <img class="label icn" src="/images/icn-restaurant.svg" alt="Restaurant Icon">
        <div class="text">Lumen Café </div>
      </div>
      <div class="point mcba museum">
        <img class="label" src="/images/logo-mcba.svg" alt="Logo MCBA">
        <div class="text">Musée Cantonal des Beaux-Arts Lausanne</div>
      </div>

      <!-- Info Panels  -->
      <div class="info-panel">
        <div class="info-panel-header">
          <img class="close" src="/images/icn-close.svg" alt="">
        </div>
        <div class="info-panel-content">
          <div class="info-panel-content-wrapper">
            <img class="info-panel-image" src="" alt="">
            <img class="info-panel-logo" src="" alt="">
            <h2 class="info-panel-title"></h2>
            <p class="info-panel-lead"></p>
            <p class="info-panel-description"></p>
            <table>
              <caption>Schedule</caption>
                <tr>
                  <th scope="col">Days</th>
                  <th scope="col">Time</th>
                </tr>
                <tr>
                  <td class="col-min">Monday</td>
                  <td class="info-panel-monday"></td>
                </tr>
                <tr>
                  <td class="col-min">Tuesday</td>
                  <td class="info-panel-tuesday"></td>
                </tr>
                <tr>
                  <td class="col-min">Wednesday</td>
                  <td class="info-panel-wednesday"></td>
                </tr>
                <tr>
                  <td class="col-min">Thursday</td>
                  <td class="info-panel-thursday"></td>
                </tr>
                <tr>
                  <td class="col-min">Friday</td>
                  <td class="info-panel-friday"></td>
                </tr>
                <tr>
                  <td class="col-min">Saturday</td>
                  <td class="info-panel-saturday"></td>
                </tr>
                <tr>
                  <td class="col-min">Sunday</td>
                  <td class="info-panel-sunday"></td>
                </tr>
            </table>
            <table>
              <caption>Contact</caption>
              <tbody>
                <tr>
                  <th class="col-min" scope="row">Phone</th>
                  <td class="info-panel-phone"></td>
                </tr>
                <tr>
                  <th class="col-min"  scope="row">Email</th>
                  <td class="info-panel-email"></td>
                </tr>
              </tbody>
            </table>

            <a class="info-panel-website" href="" target="_blank">
              <button>Visit website</button>
            </a>
          </div>
        </div>
      </div>
    </main>

    <!-- Footer -->
    <footer>
      <div class="controls">
        <p class="controls-mouse">
          Mouse Controls<br><br>
          Left - Rotate<br>
          Right - Move<br>
          Middle - Zoom
        </p>
        <p class="controls-touch">
          Controls<br><br>
          One Finger Drag - Rotate<br>
          Two Finger Drag - Move<br>
          Pinch/Spread - Zoom<br>
        </p>
      </div>
      <div class="footer">
        <div class="designed-by">
          Created by <a href="http://kiril.ch" target="_blank">kiril.ch</a>
        </div>
        <div class="links">
          <a href="https://github.com/Kirilbt/interactive-map" target="_blank">View Code</a>
        </div>
      </div>
    </footer>

    <script type="module" src="/main.js"></script>
  </body>
</html>