ä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 { .building {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
padding: 40px; padding: 40px;
border-radius: 10px;
border-radius: 12px;
text-align: center; text-align: center;
width: 400px;
width: 420px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
} }
a { .building h1 {
color: #6ec6ff; margin-top: 0;
text-decoration: none; }
.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 { .worldmap {
position: relative; position: relative;
width: 1358px; width: 2037px;
height: 679px; height: 1018px;
background: url("/images/dok_bg.png") no-repeat center; background: url("/images/dok_bg.png") no-repeat;
} }
.map-overlay { .map-overlay {
@ -18,13 +18,18 @@
.area { .area {
fill: rgba(255, 255, 255, 0); fill: rgba(255, 255, 255, 0);
cursor: pointer; cursor: pointer;
transition: 0.3s;
transition: 0.25s;
} }
.area:hover { .area:hover {
fill: rgba(120, 200, 255, 0.15); fill: rgba(120, 200, 255, 0.18);
stroke: #6ec6ff; stroke: #6ec6ff;
stroke-width: 3; 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"> <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Schloss</title>
<link rel="stylesheet" href="/css/building.css" />
</head>
<body>
<div class="building">
<h1>Schloss</h1> <h1>Schloss</h1>
<p>Hier kannst du deine Charaktere verwalten.</p> <p>Hier kannst du deine Charaktere verwalten.</p>
<a href="/launcher">Zurück zur Karte</a> <a class="back" href="/launcher"> Zurück zur Karte </a>
</div> </div>
</body>
</html>

View File

@ -32,40 +32,122 @@
<body> <body>
<div class="worldmap"> <div class="worldmap">
<svg viewBox="0 0 1358 679" class="map-overlay"> <svg viewBox="0 0 2037 1018" class="map-overlay">
<a href="/castle"> <!-- 1 -->
<a href="/building/1" class="building">
<title>Gebäude 1</title>
<polygon <polygon
class="area" class="area"
points="580,120 750,120 780,250 550,250" points="150,150 210,150 230,210 180,260 140,220"
></polygon> />
</a> </a>
<a href="/market"> <!-- 2 -->
<a href="/building/2" class="building">
<title>Gebäude 2</title>
<polygon <polygon
class="area" class="area"
points="420,360 940,360 1030,480 330,480" points="260,330 310,330 330,380 300,430 240,400"
></polygon> />
</a> </a>
<a href="/church"> <!-- 3 -->
<a href="/building/3" class="building">
<title>Gebäude 3</title>
<polygon <polygon
class="area" class="area"
points="250,330 320,330 320,420 250,420" points="450,260 540,260 560,320 520,370 430,350"
></polygon> />
</a> </a>
<a href="/portal"> <!-- 4 -->
<a href="/building/4" class="building">
<title>Gebäude 4</title>
<polygon <polygon
class="area" class="area"
points="60,120 140,120 140,260 60,260" points="880,130 1010,130 1050,200 1000,280 850,250"
></polygon> />
</a> </a>
<a href="/tower"> <!-- 5 -->
<a href="/building/5" class="building">
<title>Gebäude 5</title>
<polygon <polygon
class="area" class="area"
points="1080,150 1150,150 1150,300 1080,300" points="1180,160 1240,160 1260,260 1200,300 1160,230"
></polygon> />
</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> </a>
</svg> </svg>
</div> </div>