[hideprofile]
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Интерактивная карта города | Ролевой форум</title>
<link href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap" rel="stylesheet">
<style>
/* ===== ОБЩИЕ СТИЛИ ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Philosopher', sans-serif;
background-color: #0a1f2d;
color: #333;
line-height: 1.6;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.container {
width: 820px;
background-color: transparent;
padding: 0;
margin-left: 80px;
}
/* ===== СТИЛИ КАРТЫ ===== */
.map-title {
text-align: center;
color: #e8f4f8;
margin-bottom: 15px;
font-size: 2.2em;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
letter-spacing: 1px;
}
.map-subtitle {
text-align: center;
color: #b0d0e3;
margin-bottom: 25px;
font-style: italic;
}
.map-wrapper {
position: relative;
width: 800px;
height: 1067px;
margin: 0 auto 40px;
border: 5px solid #3a6a7e;
border-radius: 4px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
overflow: visible;
background-color: #1e3b4a;
}
.base-map {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* ===== СТИЛИ ИНТЕРАКТИВНЫХ ЛОКАЦИЙ ===== */
.hotspot {
position: absolute;
display: block;
cursor: pointer;
z-index: 10;
border: 2px solid transparent;
border-radius: 3px;
transition: all 0.35s ease-in-out;
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 0px rgba(255, 215, 0, 0);
}
/* Эффект при наведении на окошко */
.hotspot:hover {
border-color: #ffd700;
background-color: rgba(255, 215, 0, 0.15);
transform: scale(1.05);
box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.4);
}
/* ===== ВСПЛЫВАЮЩАЯ ПОДСКАЗКА ===== */
.tooltip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) scale(0.9);
opacity: 0;
background-color: rgba(20, 30, 40, 0.95);
color: #ffd700;
padding: 8px 15px;
border-radius: 5px;
font-size: 0.95em;
font-weight: bold;
white-space: nowrap;
pointer-events: none;
border: 1px solid #3a6a7e;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
z-index: 1000;
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Стрелочка у подсказки */
.tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: rgba(20, 30, 40, 0.95) transparent transparent transparent;
}
.hotspot:hover .tooltip {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* ===== БЛОК ОПИСАНИЯ ГОРОДА ===== */
.city-description {
width: 800px;
margin: 30px auto 50px;
padding: 30px 40px;
background-color: #d8e6de;
border-left: 8px solid #2a5c4b;
border-radius: 0 8px 8px 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
color: #1a3028;
}
.city-description h2 {
color: #1a3028;
margin-bottom: 20px;
font-size: 2em;
border-bottom: 2px solid #7aa898;
padding-bottom: 8px;
}
.city-description p {
margin-bottom: 18px;
text-align: justify;
font-size: 1.1em;
}
.city-description .lore-highlight {
background-color: rgba(122, 168, 152, 0.3);
padding: 20px;
border-radius: 5px;
margin: 25px 0;
font-style: italic;
border-left: 4px solid #2a5c4b;
}
.city-description h3 {
color: #1a3028;
margin-top: 30px;
margin-bottom: 15px;
font-size: 1.5em;
padding-bottom: 5px;
border-bottom: 1px dashed #7aa898;
}
.city-description h3:first-of-type {
margin-top: 10px;
}
/* ===== ПОДСКАЗКА ДЛЯ АДМИНА ===== */
.admin-note {
width: 800px;
margin: 20px auto;
padding: 15px;
background-color: rgba(255, 255, 200, 0.2);
border: 1px dashed #ffd700;
border-radius: 5px;
color: #e8f4f8;
font-size: 0.9em;
text-align: center;
}
.admin-note code {
background-color: rgba(0,0,0,0.3);
padding: 2px 5px;
border-radius: 3px;
font-family: monospace;
}
.city-description a {
color: #2a5c4b;
text-decoration: none;
font-weight: bold;
font-size: 0.95em;
display: inline-block;
margin-top: 10px;
}
.city-description a:hover {
text-decoration: underline;
color: #1a3028;
}
</style>
</head>
<body>
<div class="container">
<h1 class="map-title">КАРТА БРАЙТВИННА</h1>
<div class="map-wrapper" id="main-map">
<img src="https://i.ibb.co/C3t7GZD5/map.jpg" alt="Детальная карта города Порт-Веллес" class="base-map">
<!-- 1. МЭРИЯ -->
<a href="https://dragonscales.rusff.me/" class="hotspot"
style="bottom: 231px; left: 280px; width: 215px; height: 87px;">
<span class="tooltip">Мэрия города</span>
</a>
<!-- 2. БАР-->
<a href="https://dragonscales.rusff.me/" class="hotspot"
style="bottom: 98px; left: 493px; width: 107px; height: 79px;">
<span class="tooltip">Бар</span>
</a>
<!-- 3. суд -->
<a href="#desc-sud" class="hotspot"
style="top: 34px; left: 71px; width: 74px; height: 48px;">
<span class="tooltip">Суд</span>
</a>
<!-- 4. полицейский участок-->
<a href="#desc-university" class="hotspot"
style="top: 86px; left: 90.5px; width: 74px; height: 54px;">
<span class="tooltip">Полицейский участок</span>
</a>
<!-- 5. тюрьма-->
<a href="#desc-beach" class="hotspot"
style="top: 33px; left: 226px; width: 96px; height: 50px;">
<span class="tooltip">Тюрьма</span>
</a>
<!-- МЧС-->
<a href="#desc-id" class="hotspot"
style="top: 67px; right: 164px; width: 79px; height: 61px;">
<span class="tooltip">МЧС</span>
</a>
<!-- ПОЖАРКА-->
<a href="#desc-id" class="hotspot"
style="top: 44px; right: 46px; width: 114px; height: 82px;">
<span class="tooltip">Пожарная часть</span>
</a>
<!-- ЗАПРАВКА-->
<a href="#desc-id" class="hotspot"
style="top: 134px; left: 288px; width: 55px; height: 55px;">
<span class="tooltip">Заправка</span>
</a>
<!-- ШКОЛА-->
<a href="#desc-id" class="hotspot"
style="top: 178px; left: 4px; width: 98px; height: 50px;">
<span class="tooltip">Школа</span>
</a>
<!-- ДЕТСАД-->
<a href="#desc-id" class="hotspot"
style="top: 225px; left: 16px; width: 86px; height: 45px;">
<span class="tooltip">Детский сад</span>
</a>
<!-- ШКОЛА2-->
<a href="#desc-id" class="hotspot"
style="top: 248px; right: 187px; width: 100px; height: 57px;">
<span class="tooltip">Школа</span>
</a>
<!-- БОЛЬНИЦА-->
<a href="#desc-id" class="hotspot"
style="top: 207px; right: 13px; width: 72px; height: 135px;">
<span class="tooltip">Городская больница</span>
</a>
<!-- МАГАЗИН-->
<a href="#desc-id" class="hotspot"
style="top: 328px; left: 32px; width: 44px; height: 44px;">
<span class="tooltip">Супермаркет</span>
</a>
<!-- МАГАЗИН-->
<a href="#desc-id" class="hotspot"
style="top: 399px; left: 283px; width: 44px; height: 44px;">
<span class="tooltip">Супермаркет</span>
</a>
<!-- МАГАЗИН-->
<a href="#desc-id" class="hotspot"
style="top: 513px; left: 19px; width: 44px; height: 44px;">
<span class="tooltip">Супермаркет</span>
</a>
<!-- УНИВЕР-->
<a href="#desc-id" class="hotspot"
style="top: 505px; left: 208.5px; width: 100px; height: 77px;">
<span class="tooltip">Университет</span>
</a>
<!-- МАГАЗИН-->
<a href="#desc-id" class="hotspot"
style="bottom: 441px; left: 467px; width: 44px; height: 44px;">
<span class="tooltip">Супермаркет</span>
</a>
<!-- БИБЛИОТЕКА-->
<a href="#desc-id" class="hotspot"
style="top: 459px; right: 160px; width: 49px; height: 188px;">
<span class="tooltip">Библиотека</span>
</a>
<!-- ТЕЛЕВИДЕНИЕ-->
<a href="#desc-id" class="hotspot" id="hotspot-id"
style="top: 481px; right: 13px; width: 66px; height: 66px;">
<span class="tooltip">Городской канал</span>
</a>
<!-- РАДИО-->
<a href="#desc-id" class="hotspot"
style="bottom: 440px; right: 5.5px; width: 68px; height: 54px;">
<span class="tooltip">Радиостанция</span>
</a>
<!-- РЕДАКЦИЯ-->
<a href="#desc-id" class="hotspot" id="hotspot-id"
style="bottom: 369px; right: 15.5px; width: 75px; height: 69px;">
<span class="tooltip">Редакция газеты</span>
</a>
<!-- КОЛЛЕДЖ-->
<a href="#desc-id" class="hotspot"
style="bottom: 318px; left: 42px; width: 63px; height: 105px;">
<span class="tooltip">Колледж</span>
</a>
<!-- МАГАЗИН-->
<a href="#desc-id" class="hotspot"
style="bottom: 300px; right: 18px; width: 44px; height: 44px;">
<span class="tooltip">Супермаркет</span>
</a>
<!-- ВЕТКЛИНИКА-->
<a href="#desc-id" class="hotspot"
style="bottom: 209px; right: 5px; width: 119px; height: 58px;">
<span class="tooltip">Ветклиника</span>
</a>
<!-- БЕР.ОХРАНА-->
<a href="#desc-id" class="hotspot"
style="bottom: 100px; left: 230px; width: 128px; height: 82px;">
<span class="tooltip">Береговая охрана</span>
</a>
<!-- ШКОЛА 3-->
<a href="#desc-id" class="hotspot"
style="bottom: 110px; right: 12px; width: 105px; height: 57px;">
<span class="tooltip">Школа</span>
</a>
<!-- ПЛЯЖ-->
<a href="#desc-id" class="hotspot"
style="bottom: 4px; left: 355px; width: 112px; height: 58px;">
<span class="tooltip">Городской Пляж</span>
</a>
<!-- КАРАНТИН-->
<a href="#desc-id" class="hotspot"
style="top: 32px; left: 163px; width: 82px; height: 82px;">
<span class="tooltip">Карантинный пункт</span>
</a>
<!-- КАРАНТИН-->
<a href="#desc-id" class="hotspot"
style="top: 273px; left: 229px; width: 90px; height: 90px;">
<span class="tooltip">Карантинный пункт</span>
</a>
<!-- КАРАНТИН-->
<a href="#desc-id" class="hotspot"
style="top: 403px; left: 470px; width: 90px; height: 90px;">
<span class="tooltip">Карантинный пункт</span>
</a>
<!-- КАРАНТИН-->
<a href="#desc-id" class="hotspot"
style="top: 164px; left: 729px; width: 48px; height: 48px;">
<span class="tooltip">Карантинный пункт</span>
</a>
<!-- КАРАНТИН-->
<a href="#desc-id" class="hotspot"
style="top: 350px; left: 697px; width: 80px; height: 63px;">
<span class="tooltip">Карантинный пункт</span>
</a>
</div>
</div>
</body>
</html>[/html]
