änderung der anzeige

This commit is contained in:
Cay 2026-03-11 18:27:20 +00:00
parent 11549c3670
commit bf6d181358
5 changed files with 160 additions and 32 deletions

View File

@ -14,13 +14,42 @@ body {
.building {
background: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 10px;
border-radius: 12px;
text-align: center;
width: 400px;
width: 420px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}
a {
color: #6ec6ff;
text-decoration: none;
.building h1 {
margin-top: 0;
}
.back {
display: inline-block;
margin-top: 20px;
padding: 12px 20px;
background: #2c6cff;
color: white;
text-decoration: none;
border-radius: 6px;
transition: 0.2s;
}
.back:hover {
background: #4a85ff;
box-shadow: 0 0 12px #4a85ff;
}

View File

@ -1,10 +1,10 @@
.worldmap {
position: relative;
width: 1358px;
height: 679px;
width: 2037px;
height: 1018px;
background: url("/images/dok_bg.png") no-repeat center;
background: url("/images/dok_bg.png") no-repeat;
}
.map-overlay {
@ -18,13 +18,18 @@
.area {
fill: rgba(255, 255, 255, 0);
cursor: pointer;
transition: 0.3s;
transition: 0.25s;
}
.area:hover {
fill: rgba(120, 200, 255, 0.15);
fill: rgba(120, 200, 255, 0.18);
stroke: #6ec6ff;
stroke-width: 3;
filter: drop-shadow(0 0 10px #6ec6ff);
filter: drop-shadow(0 0 14px #6ec6ff);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 MiB

After

Width:  |  Height:  |  Size: 3.2 MiB

View File

@ -1,7 +1,19 @@
<div class="building">
<h1>Schloss</h1>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Schloss</title>
<p>Hier kannst du deine Charaktere verwalten.</p>
<link rel="stylesheet" href="/css/building.css" />
</head>
<a href="/launcher">Zurück zur Karte</a>
</div>
<body>
<div class="building">
<h1>Schloss</h1>
<p>Hier kannst du deine Charaktere verwalten.</p>
<a class="back" href="/launcher"> Zurück zur Karte </a>
</div>
</body>
</html>

View File

@ -32,40 +32,122 @@
<body>
<div class="worldmap">
<svg viewBox="0 0 1358 679" class="map-overlay">
<a href="/castle">
<svg viewBox="0 0 2037 1018" class="map-overlay">
<!-- 1 -->
<a href="/building/1" class="building">
<title>Gebäude 1</title>
<polygon
class="area"
points="580,120 750,120 780,250 550,250"
></polygon>
points="150,150 210,150 230,210 180,260 140,220"
/>
</a>
<a href="/market">
<!-- 2 -->
<a href="/building/2" class="building">
<title>Gebäude 2</title>
<polygon
class="area"
points="420,360 940,360 1030,480 330,480"
></polygon>
points="260,330 310,330 330,380 300,430 240,400"
/>
</a>
<a href="/church">
<!-- 3 -->
<a href="/building/3" class="building">
<title>Gebäude 3</title>
<polygon
class="area"
points="250,330 320,330 320,420 250,420"
></polygon>
points="450,260 540,260 560,320 520,370 430,350"
/>
</a>
<a href="/portal">
<!-- 4 -->
<a href="/building/4" class="building">
<title>Gebäude 4</title>
<polygon
class="area"
points="60,120 140,120 140,260 60,260"
></polygon>
points="880,130 1010,130 1050,200 1000,280 850,250"
/>
</a>
<a href="/tower">
<!-- 5 -->
<a href="/building/5" class="building">
<title>Gebäude 5</title>
<polygon
class="area"
points="1080,150 1150,150 1150,300 1080,300"
></polygon>
points="1180,160 1240,160 1260,260 1200,300 1160,230"
/>
</a>
<!-- 6 -->
<a href="/building/6" class="building">
<title>Gebäude 6</title>
<polygon
class="area"
points="1700,160 1780,160 1800,260 1740,300 1680,240"
/>
</a>
<!-- 7 -->
<a href="/building/7" class="building">
<title>Gebäude 7</title>
<polygon
class="area"
points="680,420 720,420 740,500 690,540 640,480"
/>
</a>
<!-- 8 -->
<a href="/building/8" class="building">
<title>Gebäude 8</title>
<polygon
class="area"
points="960,430 1040,430 1080,520 1000,560 930,520"
/>
</a>
<!-- 9 -->
<a href="/building/9" class="building">
<title>Gebäude 9</title>
<polygon
class="area"
points="1440,360 1500,360 1520,460 1460,520 1400,460"
/>
</a>
<!-- 10 -->
<a href="/building/10" class="building">
<title>Gebäude 10</title>
<polygon
class="area"
points="1680,420 1740,420 1760,520 1700,560 1640,520"
/>
</a>
<!-- 11 -->
<a href="/building/11" class="building">
<title>Gebäude 11</title>
<polygon
class="area"
points="840,540 1000,540 1040,640 920,700 780,640"
/>
</a>
<!-- 12 -->
<a href="/building/12" class="building">
<title>Gebäude 12</title>
<polygon
class="area"
points="380,660 430,660 460,720 420,760 360,720"
/>
</a>
<!-- 13 -->
<a href="/building/13" class="building">
<title>Gebäude 13</title>
<polygon
class="area"
points="1420,650 1500,650 1530,720 1470,780 1380,720"
/>
</a>
</svg>
</div>