gebäude markieren
This commit is contained in:
parent
78a714bdbd
commit
befe8613f1
32
public/css/launcher.css
Normal file
32
public/css/launcher.css
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
.map-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area {
|
||||||
|
fill: rgba(255, 255, 255, 0);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area:hover {
|
||||||
|
fill: rgba(255, 255, 255, 0.15);
|
||||||
|
stroke: #6ec6ff;
|
||||||
|
stroke-width: 3;
|
||||||
|
filter: drop-shadow(0 0 10px #6ec6ff);
|
||||||
|
}
|
||||||
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Dynasty of Knights</title>
|
<title>Dynasty of Knights</title>
|
||||||
|
<link rel="stylesheet" href="/css/launcher.css" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
@ -30,12 +31,45 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="panel">
|
<div class="map-container">
|
||||||
<h1>Dynasty of Knights</h1>
|
<img src="/images/dok_bg.png" class="map" />
|
||||||
|
|
||||||
<p>Launcher bereit</p>
|
<svg viewBox="0 0 2048 1024" class="map-overlay">
|
||||||
|
<a href="/castle">
|
||||||
|
<polygon
|
||||||
|
class="area"
|
||||||
|
points="920,230 1120,230 1180,350 860,350"
|
||||||
|
></polygon>
|
||||||
|
</a>
|
||||||
|
|
||||||
<button>Spiel starten</button>
|
<a href="/market">
|
||||||
|
<polygon
|
||||||
|
class="area"
|
||||||
|
points="870,500 1170,500 1230,630 810,630"
|
||||||
|
></polygon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/portal">
|
||||||
|
<polygon
|
||||||
|
class="area"
|
||||||
|
points="230,140 330,140 350,310 210,310"
|
||||||
|
></polygon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/tower">
|
||||||
|
<polygon
|
||||||
|
class="area"
|
||||||
|
points="1500,260 1600,260 1600,420 1500,420"
|
||||||
|
></polygon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/church">
|
||||||
|
<polygon
|
||||||
|
class="area"
|
||||||
|
points="960,420 1030,420 1030,520 960,520"
|
||||||
|
></polygon>
|
||||||
|
</a>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user