Hugging Face's logo

Spaces:
mistpe
/
marp
Running

App Files Community
mistpe commited on
Commit
ef7662b
·
verified ·
1 Parent(s): c97f166

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +29 -22
index.html CHANGED
@@ -18,11 +18,14 @@
18
  .map-container {
19
  width: 1440px;
20
  height: 900px;
21
- position: relative;
22
  background-image: url('./map-bg.png');
23
- background-size: cover;
24
- background-position: center;
25
- z-index: 1;
 
 
 
 
26
  }
27
 
28
  #leaflet-map {
@@ -32,23 +35,12 @@
32
  top: 0;
33
  left: 0;
34
  background: transparent;
35
- z-index: 2;
36
  }
37
 
38
  .leaflet-tile-container img {
39
- opacity: 0.4 !important;
40
- filter: grayscale(100%) !important;
41
- }
42
-
43
- .track {
44
- position: absolute;
45
- top: 0;
46
- width: 1440px;
47
- height: 900px;
48
- mix-blend-mode: multiply;
49
- opacity: .7;
50
- pointer-events: none;
51
- z-index: 3;
52
  }
53
 
54
  .mask {
@@ -60,7 +52,18 @@
60
  position: absolute;
61
  top: 0;
62
  left: 0;
63
- z-index: 4;
 
 
 
 
 
 
 
 
 
 
 
64
  }
65
 
66
  .footprint {
@@ -235,9 +238,13 @@
235
  </head>
236
  <body>
237
  <div class="map-container">
238
- <div id="leaflet-map"></div>
239
- <div id="track" class="track"></div>
240
- <div id="mapMask" class="mask"></div>
 
 
 
 
241
  <div class="user-controls">
242
  <input type="text" id="username" placeholder="输入你的名字" maxlength="20">
243
  <button onclick="updateUsername()">更新名字</button>
 
18
  .map-container {
19
  width: 1440px;
20
  height: 900px;
 
21
  background-image: url('./map-bg.png');
22
+ position: relative;
23
+ }
24
+
25
+ .map {
26
+ width: 100%;
27
+ height: 100%;
28
+ position: relative;
29
  }
30
 
31
  #leaflet-map {
 
35
  top: 0;
36
  left: 0;
37
  background: transparent;
38
+ z-index: 1;
39
  }
40
 
41
  .leaflet-tile-container img {
42
+ opacity: 0.4;
43
+ filter: grayscale(100%);
 
 
 
 
 
 
 
 
 
 
 
44
  }
45
 
46
  .mask {
 
52
  position: absolute;
53
  top: 0;
54
  left: 0;
55
+ z-index: 2;
56
+ }
57
+
58
+ .track {
59
+ position: absolute;
60
+ top: 0;
61
+ width: 1440px;
62
+ height: 900px;
63
+ mix-blend-mode: multiply;
64
+ opacity: .7;
65
+ z-index: 3;
66
+ pointer-events: none;
67
  }
68
 
69
  .footprint {
 
238
  </head>
239
  <body>
240
  <div class="map-container">
241
+ <div class="map">
242
+ <div id="leaflet-map"></div>
243
+ <div id="mapMask" class="mask"></div>
244
+ </div>
245
+ <div id="track" class="track">
246
+ <div id="name" class="name-banner"></div>
247
+ </div>
248
  <div class="user-controls">
249
  <input type="text" id="username" placeholder="输入你的名字" maxlength="20">
250
  <button onclick="updateUsername()">更新名字</button>