[html]
<div class="warframe-profile">
    <!-- Заголовок анкеты -->
    <div class="profile-header">
        <i class="gi gi-user"></i>
        <h2>Анкета оператора</h2>
        <div class="profile-status" data-status="active">Статус: Активен</div>
    </div>

    <!-- Основная информация -->
    <div class="profile-section">
        <div class="profile-field">
            <label>Имя оператора:</label>
            <span class="profile-value">Тэнно-228</span>
        </div>
        <div class="profile-field">
            <label>Фракция:</label>
            <span class="profile-value">Орокин</span>
        </div>
        <div class="profile-field">
            <label>Ранг:</label>
            <span class="profile-value">Мастер 15</span>
        </div>
    </div>

    <!-- Внешний вид -->
    <div class="profile-section">
        <h3>Внешний вид</h3>
        <div class="profile-field">
            <label>Варфрейм:</label>
            <span class="profile-value">Excalibur Prime</span>
        </div>
        <div class="profile-field">
            <label>Цветовая схема:</label>
            <div class="color-scheme">
                <span class="color-box" style="background: #ff5500;"></span>
                <span class="color-box" style="background: #00ffff;"></span>
                <span class="color-box" style="background: #1a1a2a;"></span>
            </div>
        </div>
    </div>

    <!-- Снаряжение -->
    <div class="profile-section">
        <h3>Снаряжение</h3>
        <div class="profile-field">
            <label>Основное оружие:</label>
            <span class="profile-value">Братон Прайм</span>
        </div>
        <div class="profile-field">
            <label>Второстепенное оружие:</label>
            <span class="profile-value">Лекс Прайм</span>
        </div>
        <div class="profile-field">
            <label>Ближний бой:</label>
            <span class="profile-value">Скана Прайм</span>
        </div>
    </div>

    <!-- История -->
    <div class="profile-section">
        <h3>История</h3>
        <div class="profile-bio">
            <p>Пробуждённый из криосна после тысячелетий забвения. Сражаюсь за восстановление баланса в системе. Моя цель — уничтожить Сентиентов и вернуть власть Орокин.</p>
        </div>
    </div>

    <!-- Статус -->
    <div class="profile-status-bar">
        <div class="status-item">
            <i class="gi gi-health"></i>
            <span>Здоровье: 740/740</span>
        </div>
        <div class="status-item">
            <i class="gi gi-energy"></i>
            <span>Энергия: 300/300</span>
        </div>
        <div class="status-item">
            <i class="gi gi-shield"></i>
            <span>Щиты: 450/450</span>
        </div>
    </div>
</div>

<style>
/* Основные стили */
.warframe-profile {
    background: rgba(10, 10, 18, 0.9);
    border: 2px solid #3a3a5a;
    border-radius: 10px;
    padding: 20px;
    color: #e0e0ff;
    font-family: 'Courier New', monospace;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.1);
}

/* Заголовок */
.profile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444466;
}

.profile-header h2 {
    margin: 0;
    color: #ff8844;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.profile-header .gi {
    font-size: 2em;
    color: #ff5500;
}

.profile-status {
    margin-left: auto;
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff80;
    font-weight: bold;
}

/* Секции */
.profile-section {
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.profile-section h3 {
    color: #ff8844;
    margin-top: 0;
    border-bottom: 1px dashed #444466;
    padding-bottom: 5px;
}

/* Поля */
.profile-field {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.profile-field label {
    width: 150px;
    color: #a0a0c0;
}

.profile-field .profile-value {
    color: #e0e0ff;
    font-weight: bold;
}

/* Цветовая схема */
.color-scheme {
    display: flex;
    gap: 5px;
}

.color-box {
    width: 20px;
    height: 20px;
    border: 1px solid #444466;
    border-radius: 3px;
}

/* История */
.profile-bio {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-left: 3px solid #ff5500;
    font-style: italic;
    color: #e0e0ff;
}

/* Статус бар */
.profile-status-bar {
    display: flex;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-item .gi {
    color: #ff5500;
}

/* Анимации */
@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

.profile-header .gi {
    animation: pulse 2s infinite;
}

/* Эффект сканирования */
.warframe-profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 85, 0, 0.05), transparent);
    animation: scan 10s linear infinite;
}

@keyframes scan {
    0% { left: -100%; }
    100% { left: 100%; }
}
</style>
[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]<div class="warframe-map">
    <!-- Карта -->
    <div class="map-grid">
        <!-- Пример планеты -->
        <div class="planet unlocked" data-planet="earth">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Земля</h3>
                <p>Статус: Контролируется Гринир</p>
            </div>
        </div>

        <!-- Заблокированная планета -->
        <div class="planet locked" data-planet="mars">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Марс</h3>
                <p>Требуется: Убить босса на Земле</p>
            </div>
        </div>

        <!-- Добавьте больше планет по аналогии -->
    </div>
</div>

<style>
/* Основные стили */
.warframe-map {
    background:
        linear-gradient(45deg, rgba(50, 50, 50, 0.1) 25%, transparent 25%, transparent 75%, rgba(50, 50, 50, 0.1) 75%),
        linear-gradient(45deg, rgba(50, 50, 50, 0.1) 25%, transparent 25%, transparent 75%, rgba(50, 50, 50, 0.1) 75%);
    background-size: 20px 20px;
    background-color: #1a1a2a;
    border: 2px solid #3a3a5a;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.1);
}

/* Сетка карты */
.map-grid {
    position: relative;
    width: 100%;
    height: 600px; /* Настройте под свои нужды */
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444466;
}

/* Планета */
.planet {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 85, 0, 0.1);
    border: 2px solid #ff5500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.planet.unlocked {
    background: rgba(0, 255, 0, 0.1);
    border-color: #00ff00;
}

.planet.locked {
    background: rgba(255, 0, 0, 0.1);
    border-color: #ff0000;
    filter: grayscale(0.8);
}

.planet:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 85, 0, 0.5);
}

/* Иконка планеты */
.planet-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ff5500;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* Информация о планете */
.planet-info {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #444466;
    padding: 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    width: 200px;
    text-align: center;
}

.planet:hover .planet-info {
    opacity: 1;
    visibility: visible;
}

.planet-info h3 {
    margin: 0;
    color: #ff8844;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.planet-info p {
    margin: 5px 0 0;
    color: #e0e0ff;
    font-size: 0.9em;
}

/* Эффект сканирования */
.warframe-map::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 85, 0, 0.05), transparent);
    animation: scan 10s linear infinite;
}

@keyframes scan {
    0% { left: -100%; }
    100% { left: 100%; }
}
</style>

<script>
// Пример позиционирования планет
const planets = [
    { name: "earth", x: 20, y: 50, unlocked: true },
    { name: "mars", x: 40, y: 30, unlocked: false },
    // Добавьте больше планет по аналогии
];

const mapGrid = document.querySelector('.map-grid');

planets.forEach(planet => {
    const planetElement = document.createElement('div');
    planetElement.classList.add('planet');
    planetElement.classList.add(planet.unlocked ? 'unlocked' : 'locked');
    planetElement.style.left = `${planet.x}%`;
    planetElement.style.top = `${planet.y}%`;
    planetElement.setAttribute('data-planet', planet.name);

    const icon = document.createElement('div');
    icon.classList.add('planet-icon');
    planetElement.appendChild(icon);

    const info = document.createElement('div');
    info.classList.add('planet-info');
    info.innerHTML = `
        <h3>${planet.name.toUpperCase()}</h3>
        <p>${planet.unlocked ? 'Открыта' : 'Заблокирована'}</p>
    `;
    planetElement.appendChild(info);

    mapGrid.appendChild(planetElement);
});
</script>[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]<div class="warframe-map">
    <!-- Карта -->
    <div class="map-grid">
        <!-- Планеты и спутники -->
        <div class="planet unlocked" data-planet="mercury" style="left: 15%; top: 40%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Меркурий</h3>
                <p>Статус: Контролируется Гринир</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="venus" style="left: 25%; top: 30%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Венера</h3>
                <p>Статус: Контролируется Корпус</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="earth" style="left: 40%; top: 50%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Земля</h3>
                <p>Статус: Контролируется Гринир</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="lua" style="left: 45%; top: 55%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Луа</h3>
                <p>Статус: Контролируется Орокин</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="mars" style="left: 55%; top: 35%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Марс</h3>
                <p>Статус: Контролируется Гринир</p>
            </div>
        </div>

        <div class="planet locked" data-planet="phobos" style="left: 60%; top: 30%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Фобос</h3>
                <p>Требуется: Убить босса на Марсе</p>
            </div>
        </div>

        <div class="planet locked" data-planet="deimos" style="left: 65%; top: 40%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Деймос</h3>
                <p>Требуется: Убить босса на Марсе</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="ceres" style="left: 70%; top: 50%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Церера</h3>
                <p>Статус: Контролируется Гринир</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="jupiter" style="left: 80%; top: 60%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Юпитер</h3>
                <p>Статус: Контролируется Корпус</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="europa" style="left: 85%; top: 65%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Европа</h3>
                <p>Статус: Контролируется Корпус</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="saturn" style="left: 60%; top: 70%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Сатурн</h3>
                <p>Статус: Контролируется Гринир</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="uranus" style="left: 40%; top: 80%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Уран</h3>
                <p>Статус: Контролируется Гринир</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="neptune" style="left: 20%; top: 70%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Нептун</h3>
                <p>Статус: Контролируется Корпус</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="pluto" style="left: 10%; top: 60%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Плутон</h3>
                <p>Статус: Контролируется Гринир</p>
            </div>
        </div>

        <div class="planet locked" data-planet="sedna" style="left: 5%; top: 50%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Седна</h3>
                <p>Требуется: Убить босса на Плутоне</p>
            </div>
        </div>

        <div class="planet locked" data-planet="eris" style="left: 15%; top: 20%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Эрида</h3>
                <p>Требуется: Убить босса на Уране</p>
            </div>
        </div>

        <div class="planet locked" data-planet="void" style="left: 50%; top: 20%;">
            <div class="planet-icon"></div>
            <div class="planet-info">
                <h3>Бездна</h3>
                <p>Требуется: Ключи Орокин</p>
            </div>
        </div>
    </div>

    <!-- Контейнер для линий -->
    <svg class="map-lines" width="100%" height="100%"></svg>

    <!-- Центральный элемент с лучами -->
    <div class="central-radial"></div>
</div>

<style>
/* Основные стили */
.warframe-map {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 600px;
}

/* Сетка карты */
.map-grid {
    position: relative;
    width: 100%;
    height: 600px; /* Настройте под свои нужды */
}

/* Планета */
.planet {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 85, 0, 0.1);
    border: 2px solid #ff5500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%); /* Центрирование */
}

.planet.unlocked {
    background: rgba(0, 255, 0, 0.1);
    border-color: #00ff00;
}

.planet.locked {
    background: rgba(255, 0, 0, 0.1);
    border-color: #ff0000;
    filter: grayscale(0.8);
}

.planet:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 15px rgba(255, 85, 0, 0.5);
}

/* Иконка планеты */
.planet-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ff5500;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* Информация о планете */
.planet-info {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #444466;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
    width: 200px;
    text-align: center;
}

.planet:hover .planet-info {
    opacity: 1;
    visibility: visible;
}

.planet-info h3 {
    position: absolute;
    z-index: 22222222;
    display: block;
    background: #000;
    margin: 0;
    color: #ff8844;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 1 !important;!i;!;
}

.planet-info p {
    margin: 5px 0 0;
    color: #e0e0ff;
    font-size: 0.9em;
}

/* Линии соединения */
.map-lines {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* Чтобы не мешали взаимодействию */
}

.map-lines line {
    stroke: #ff5500;
    stroke-width: 2;
    stroke-dasharray: 5;
    animation: lineFlow 1s linear infinite;
}

@keyframes lineFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 10; }
}

/* Центральный элемент с лучами */
.central-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: #ff5500;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.5);
    animation: pulse 2s infinite;
}

.central-radial::before,
.central-radial::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 1px solid #ff5500;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: radialPulse 3s infinite;
}

.central-radial::before {
    width: 200%;
    height: 200%;
    animation-delay: 0.5s;
}

.central-radial::after {
    width: 300%;
    height: 300%;
    animation-delay: 1s;
}

@keyframes radialPulse {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
</style>

<script>
// Пример данных о планетах и их связях
const planets = [
    { name: "mercury", x: 15, y: 40, unlocked: true, connections: ["venus"] },
    { name: "venus", x: 25, y: 30, unlocked: true, connections: ["mercury", "earth"] },
    { name: "earth", x: 40, y: 50, unlocked: true, connections: ["venus", "lua", "mars"] },
    { name: "lua", x: 45, y: 55, unlocked: true, connections: ["earth"] },
    { name: "mars", x: 55, y: 35, unlocked: true, connections: ["earth", "phobos", "deimos"] },
    { name: "phobos", x: 60, y: 30, unlocked: false, connections: ["mars"] },
    { name: "deimos", x: 65, y: 40, unlocked: false, connections: ["mars"] },
    { name: "ceres", x: 70, y: 50, unlocked: true, connections: ["mars", "jupiter"] },
    { name: "jupiter", x: 80, y: 60, unlocked: true, connections: ["ceres", "europa"] },
    { name: "europa", x: 85, y: 65, unlocked: true, connections: ["jupiter"] },
    { name: "saturn", x: 60, y: 70, unlocked: true, connections: ["uranus"] },
    { name: "uranus", x: 40, y: 80, unlocked: true, connections: ["saturn", "neptune"] },
    { name: "neptune", x: 20, y: 70, unlocked: true, connections: ["uranus", "pluto"] },
    { name: "pluto", x: 10, y: 60, unlocked: true, connections: ["neptune", "sedna"] },
    { name: "sedna", x: 5, y: 50, unlocked: false, connections: ["pluto"] },
    { name: "eris", x: 15, y: 20, unlocked: false, connections: ["uranus"] },
    { name: "void", x: 50, y: 20, unlocked: false, connections: [] },
];

const mapGrid = document.querySelector('.map-grid');
const mapLines = document.querySelector('.map-lines');

// Функция для получения координат планеты
function getPlanetCoordinates(planetName) {
    const planet = document.querySelector(`.planet[data-planet="${planetName}"]`);
    if (!planet) return null;
    const rect = planet.getBoundingClientRect();
    const mapRect = mapGrid.getBoundingClientRect();
    return {
        x: rect.left + rect.width / 2 - mapRect.left,
        y: rect.top + rect.height / 2 - mapRect.top
    };
}

// Функция для отрисовки линий
function drawLines(planetName) {
    const planet = planets.find(p => p.name === planetName);
    if (!planet || !planet.connections) return;

    planet.connections.forEach(connection => {
        const start = getPlanetCoordinates(planetName);
        const end = getPlanetCoordinates(connection);
        if (!start || !end) return;

        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', start.x);
        line.setAttribute('y1', start.y);
        line.setAttribute('x2', end.x);
        line.setAttribute('y2', end.y);
        mapLines.appendChild(line);
    });
}

// Функция для очистки линий
function clearLines() {
    while (mapLines.firstChild) {
        mapLines.removeChild(mapLines.firstChild);
    }
}

// Добавление планет на карту
planets.forEach(planet => {
    const planetElement = document.createElement('div');
    planetElement.classList.add('planet');
    planetElement.classList.add(planet.unlocked ? 'unlocked' : 'locked');
    planetElement.style.left = `${planet.x}%`;
    planetElement.style.top = `${planet.y}%`;
    planetElement.setAttribute('data-planet', planet.name);

    const icon = document.createElement('div');
    icon.classList.add('planet-icon');
    planetElement.appendChild(icon);

    const info = document.createElement('div');
    info.classList.add('planet-info');
    info.innerHTML = `
        <h3>${planet.name.toUpperCase()}</h3>
        <p>${planet.unlocked ? 'Открыта' : 'Заблокирована'}</p>
    `;
    planetElement.appendChild(info);

    // Обработчики событий для линий
    planetElement.addEventListener('mouseenter', () => drawLines(planet.name));
    planetElement.addEventListener('mouseleave', clearLines);

    mapGrid.appendChild(planetElement);
});
</script>[/html][darkpost]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]
<div class="warframe-map">
    <!-- Карта -->
    <div class="map-grid">
        <!-- Планеты и спутники -->
        <div class="planet unlocked" data-planet="mercury" style="left: 15%; top: 40%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Меркурий</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Меркурий</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Начальная планета</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="venus" style="left: 25%; top: 30%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Венера</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Венера</h3>
                <p>Управляется: Корпус</p>
                <p>Требуется: Завершить миссию на Меркурии</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="earth" style="left: 40%; top: 50%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Земля</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Земля</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Венере</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="lua" style="left: 45%; top: 55%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Луа</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Луа</h3>
                <p>Управляется: Орокин</p>
                <p>Требуется: Доступ через Землю</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="mars" style="left: 55%; top: 35%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Марс</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Марс</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Убить босса на Земле</p>
            </div>
        </div>

        <div class="planet locked" data-planet="phobos" style="left: 60%; top: 30%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Фобос</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Фобос</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Убить босса на Марсе</p>
            </div>
        </div>

        <div class="planet locked" data-planet="deimos" style="left: 65%; top: 40%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Деймос</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Деймос</h3>
                <p>Управляется: Инфестировано</p>
                <p>Требуется: Убить босса на Марсе</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="ceres" style="left: 70%; top: 50%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Церера</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Церера</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Марсе</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="jupiter" style="left: 80%; top: 60%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Юпитер</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Юпитер</h3>
                <p>Управляется: Корпус</p>
                <p>Требуется: Завершить миссию на Церере</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="europa" style="left: 85%; top: 65%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Европа</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Европа</h3>
                <p>Управляется: Корпус</p>
                <p>Требуется: Завершить миссию на Юпитере</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="saturn" style="left: 60%; top: 70%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Сатурн</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Сатурн</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Европе</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="uranus" style="left: 40%; top: 80%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Уран</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Уран</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Сатурне</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="neptune" style="left: 20%; top: 70%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Нептун</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Нептун</h3>
                <p>Управляется: Корпус</p>
                <p>Требуется: Завершить миссию на Уране</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="pluto" style="left: 10%; top: 60%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Плутон</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Плутон</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Нептуне</p>
            </div>
        </div>

        <div class="planet locked" data-planet="sedna" style="left: 5%; top: 50%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Седна</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Седна</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Убить босса на Плутоне</p>
            </div>
        </div>

        <div class="planet locked" data-planet="eris" style="left: 15%; top: 20%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Эрида</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Эрида</h3>
                <p>Управляется: Инфестировано</p>
                <p>Требуется: Убить босса на Уране</p>
            </div>
        </div>

        <div class="planet locked" data-planet="void" style="left: 50%; top: 20%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Бездна</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Бездна</h3>
                <p>Управляется: Орокин</p>
                <p>Требуется: Ключи Орокин</p>
            </div>
        </div>
    </div>

    <!-- Контейнер для линий -->
    <svg class="map-lines" width="100%" height="100%"></svg>

    <!-- Центральный элемент с лучами -->
    <div class="central-radial"></div>
</div>

<style>
/* Основные стили */
.warframe-map {
    background:
        linear-gradient(45deg, rgba(50, 50, 50, 0.1) 25%, transparent 25%, transparent 75%, rgba(50, 50, 50, 0.1) 75%),
        linear-gradient(45deg, rgba(50, 50, 50, 0.1) 25%, transparent 25%, transparent 75%, rgba(50, 50, 50, 0.1) 75%);
    background-size: 20px 20px;
    background-color: #1a1a2a;
    border: 2px solid #3a3a5a;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.1);
}

/* Сетка карты */
.map-grid {
    position: relative;
    width: 100%;
    height: 600px; /* Настройте под свои нужды */
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444466;
}

/* Планета */
.planet {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translate(-50%, -50%); /* Центрирование */
}

/* Иконка планеты */
.planet-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ff5500;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* Название планеты */
.planet-name {
    margin-top: 5px;
    color: #e0e0ff;
    font-size: 0.9em;
    text-align: center;
}

/* Статус планеты */
.planet-status {
    margin-top: 5px;
    font-size: 1.2em;
}

.planet-status .fa-check {
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
}

.planet-status .fa-times {
    color: #ff0000;
    opacity: 0.5;
}

/* Информация о планете */
.planet-info {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #444466;
    padding: 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    width: 200px;
    text-align: center;
    z-index: 10;
}

.planet:hover .planet-info {
    opacity: 1;
    visibility: visible;
}

.planet-info h3 {
    margin: 0;
    color: #ff8844;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.planet-info p {
    margin: 5px 0 0;
    color: #e0e0ff;
    font-size: 0.9em;
}

/* Линии соединения */
.map-lines {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* Чтобы не мешали взаимодействию */
}

.map-lines path {
    stroke: #ff5500;
    stroke-width: 2;
    stroke-dasharray: 5;
    fill: none;
    animation: lineFlow 1s linear infinite;
}

@keyframes lineFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 10; }
}

/* Центральный элемент с лучами */
.central-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: #ff5500;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.5);
    animation: pulse 2s infinite;
}

.central-radial::before,
.central-radial::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 1px solid #ff5500;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: radialPulse 3s infinite;
}

.central-radial::before {
    width: 200%;
    height: 200%;
    animation-delay: 0.5s;
}

.central-radial::after {
    width: 300%;
    height: 300%;
    animation-delay: 1s;
}

@keyframes radialPulse {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
</style>

<script>
// Пример данных о планетах и их связях
const planets = [
    { name: "mercury", x: 15, y: 40, unlocked: true, connections: ["venus"] },
    { name: "venus", x: 25, y: 30, unlocked: true, connections: ["mercury", "earth"] },
    { name: "earth", x: 40, y: 50, unlocked: true, connections: ["venus", "lua", "mars"] },
    { name: "lua", x: 45, y: 55, unlocked: true, connections: ["earth"] },
    { name: "mars", x: 55, y: 35, unlocked: true, connections: ["earth", "phobos", "deimos"] },
    { name: "phobos", x: 60, y: 30, unlocked: false, connections: ["mars"] },
    { name: "deimos", x: 65, y: 40, unlocked: false, connections: ["mars"] },
    { name: "ceres", x: 70, y: 50, unlocked: true, connections: ["mars", "jupiter"] },
    { name: "jupiter", x: 80, y: 60, unlocked: true, connections: ["ceres", "europa"] },
    { name: "europa", x: 85, y: 65, unlocked: true, connections: ["jupiter"] },
    { name: "saturn", x: 60, y: 70, unlocked: true, connections: ["uranus"] },
    { name: "uranus", x: 40, y: 80, unlocked: true, connections: ["saturn", "neptune"] },
    { name: "neptune", x: 20, y: 70, unlocked: true, connections: ["uranus", "pluto"] },
    { name: "pluto", x: 10, y: 60, unlocked: true, connections: ["neptune", "sedna"] },
    { name: "sedna", x: 5, y: 50, unlocked: false, connections: ["pluto"] },
    { name: "eris", x: 15, y: 20, unlocked: false, connections: ["uranus"] },
    { name: "void", x: 50, y: 20, unlocked: false, connections: [] },
];

const mapGrid = document.querySelector('.map-grid');
const mapLines = document.querySelector('.map-lines');

// Функция для получения координат планеты
function getPlanetCoordinates(planetName) {
    const planet = document.querySelector(`.planet[data-planet="${planetName}"]`);
    if (!planet) return null;
    const rect = planet.getBoundingClientRect();
    const mapRect = mapGrid.getBoundingClientRect();
    return {
        x: rect.left + rect.width / 2 - mapRect.left,
        y: rect.top + rect.height / 2 - mapRect.top
    };
}

// Функция для отрисовки линий
function drawLines(planetName) {
    const planet = planets.find(p => p.name === planetName);
    if (!planet || !planet.connections) return;

    planet.connections.forEach(connection => {
        const start = getPlanetCoordinates(planetName);
        const end = getPlanetCoordinates(connection);
        if (!start || !end) return;

        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', start.x);
        line.setAttribute('y1', start.y);
        line.setAttribute('x2', end.x);
        line.setAttribute('y2', end.y);
        mapLines.appendChild(line);
    });
}

// Функция для очистки линий
function clearLines() {
    while (mapLines.firstChild) {
        mapLines.removeChild(mapLines.firstChild);
    }
}

// Добавление планет на карту
planets.forEach(planet => {
    const planetElement = document.createElement('div');
    planetElement.classList.add('planet');
    planetElement.classList.add(planet.unlocked ? 'unlocked' : 'locked');
    planetElement.style.left = `${planet.x}%`;
    planetElement.style.top = `${planet.y}%`;
    planetElement.setAttribute('data-planet', planet.name);

    const icon = document.createElement('div');
    icon.classList.add('planet-icon');
    planetElement.appendChild(icon);

    const info = document.createElement('div');
    info.classList.add('planet-info');
    info.innerHTML = `
        <h3>${planet.name.toUpperCase()}</h3>
        <p>${planet.unlocked ? 'Открыта' : 'Заблокирована'}</p>
    `;
    planetElement.appendChild(info);

    // Обработчики событий для линий
    planetElement.addEventListener('mouseenter', () => drawLines(planet.name));
    planetElement.addEventListener('mouseleave', clearLines);

    mapGrid.appendChild(planetElement);
});</script>
[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]
<!-- HTML -->
<div class="warframe-map">
<!-- Карта -->
    <div class="map-grid">
<svg class="map-lines" xmlns="http://www.w3.org/2000/svg"></svg>
        <!-- Планеты и спутники -->
        <div class="planet unlocked" data-planet="mercury" style="left: 15%; top: 40%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Меркурий</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Меркурий</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Начальная планета</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="venus" style="left: 25%; top: 30%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Венера</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Венера</h3>
                <p>Управляется: Корпус</p>
                <p>Требуется: Завершить миссию на Меркурии</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="earth" style="left: 40%; top: 50%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Земля</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Земля</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Венере</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="lua" style="left: 45%; top: 55%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Луа</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Луа</h3>
                <p>Управляется: Орокин</p>
                <p>Требуется: Доступ через Землю</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="mars" style="left: 55%; top: 35%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Марс</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Марс</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Убить босса на Земле</p>
            </div>
        </div>

        <div class="planet locked" data-planet="phobos" style="left: 60%; top: 30%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Фобос</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Фобос</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Убить босса на Марсе</p>
            </div>
        </div>

        <div class="planet locked" data-planet="deimos" style="left: 65%; top: 40%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Деймос</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Деймос</h3>
                <p>Управляется: Инфестировано</p>
                <p>Требуется: Убить босса на Марсе</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="ceres" style="left: 70%; top: 50%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Церера</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Церера</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Марсе</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="jupiter" style="left: 80%; top: 60%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Юпитер</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Юпитер</h3>
                <p>Управляется: Корпус</p>
                <p>Требуется: Завершить миссию на Церере</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="europa" style="left: 85%; top: 65%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Европа</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Европа</h3>
                <p>Управляется: Корпус</p>
                <p>Требуется: Завершить миссию на Юпитере</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="saturn" style="left: 60%; top: 70%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Сатурн</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Сатурн</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Европе</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="uranus" style="left: 40%; top: 80%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Уран</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Уран</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Сатурне</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="neptune" style="left: 20%; top: 70%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Нептун</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Нептун</h3>
                <p>Управляется: Корпус</p>
                <p>Требуется: Завершить миссию на Уране</p>
            </div>
        </div>

        <div class="planet unlocked" data-planet="pluto" style="left: 10%; top: 60%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Плутон</div>
            <div class="planet-status">
                <i class="fas fa-check"></i>
            </div>
            <div class="planet-info">
                <h3>Плутон</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Завершить миссию на Нептуне</p>
            </div>
        </div>

        <div class="planet locked" data-planet="sedna" style="left: 5%; top: 50%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Седна</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Седна</h3>
                <p>Управляется: Гринир</p>
                <p>Требуется: Убить босса на Плутоне</p>
            </div>
        </div>

        <div class="planet locked" data-planet="eris" style="left: 15%; top: 20%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Эрида</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Эрида</h3>
                <p>Управляется: Инфестировано</p>
                <p>Требуется: Убить босса на Уране</p>
            </div>
        </div>

        <div class="planet locked" data-planet="void" style="left: 50%; top: 20%;">
            <div class="planet-icon"></div>
            <div class="planet-name">Бездна</div>
            <div class="planet-status">
                <i class="fas fa-times"></i>
            </div>
            <div class="planet-info">
                <h3>Бездна</h3>
                <p>Управляется: Орокин</p>
                <p>Требуется: Ключи Орокин</p>
            </div>
        </div>
    </div>
</div>

<style>

/* CSS */
.warframe-map {
    background:
        linear-gradient(45deg, rgba(50, 50, 50, 0.1) 25%, transparent 25%, transparent 75%, rgba(50, 50, 50, 0.1) 75%),
        linear-gradient(45deg, rgba(50, 50, 50, 0.1) 25%, transparent 25%, transparent 75%, rgba(50, 50, 50, 0.1) 75%);
    background-size: 20px 20px;
    background-color: #1a1a2a;
    border: 2px solid #3a3a5a;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.1);
}

/* Сетка карты */
.map-grid {
    position: relative;
    width: 100%;
    height: 600px; /* Настройте под свои нужды */
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444466;
}

/* Планета */
.planet {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translate(-50%, -50%); /* Центрирование */
}

/* Иконка планеты */
.planet-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ff5500;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* Название планеты */
.planet-name {
    margin-top: 5px;
    color: #e0e0ff;
    font-size: 0.9em;
    text-align: center;
}

/* Статус планеты */
.planet-status {
    margin-top: 5px;
    font-size: 1.2em;
}

.planet-status .fa-check {
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
}

.planet-status .fa-times {
    color: #ff0000;
    opacity: 0.5;
}

/* Информация о планете */
.planet-info {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #444466;
    padding: 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    width: 200px;
    text-align: center;
    z-index: 10;
}

.planet:hover .planet-info {
    opacity: 1;
    visibility: visible;
}

.planet-info h3 {
    margin: 0;
    color: #ff8844;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.planet-info p {
    margin: 5px 0 0;
    color: #e0e0ff;
    font-size: 0.9em;
}

.locked .planet-icon {
    filter: grayscale(100%);
    border-color: #666 !important;
}

.locked .planet-name {
    color: #666 !important;
}

.locked-notice {
    color: #ff4444;
    font-size: 0.8em;
    margin-top: 5px;
    text-shadow: 0 0 5px #ff0000;
}

iframe {
    height: 700px !important;
}
/* Добавлены стили для соединительных линий */
.map-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.connection-line {
    stroke: #ff5500;
    stroke-width: 2;
    fill: none;
    transition: all 0.3s ease;
}
</style>

<script>
// JavaScript
const planets = [
    { name: "mercury", x: 15, y: 40, unlocked: true, faction: "Гринир", requirement: "Начальная планета", connections: ["venus"] },
    { name: "venus", x: 25, y: 30, unlocked: true, faction: "Корпус", requirement: "Завершить миссию на Меркурии", connections: ["mercury", "earth"] },
    { name: "earth", x: 40, y: 50, unlocked: true, faction: "Гринир", requirement: "Завершить миссию на Венере", connections: ["venus", "lua", "mars"] },
    { name: "lua", x: 45, y: 55, unlocked: true, faction: "Орокин", requirement: "Доступ через Землю", connections: ["earth"] },
    { name: "mars", x: 55, y: 35, unlocked: true, faction: "Гринир", requirement: "Убить босса на Земле", connections: ["earth", "phobos", "deimos"] },
    { name: "phobos", x: 60, y: 30, unlocked: false, faction: "Гринир", requirement: "Убить босса на Марсе", connections: ["mars"] },
    { name: "deimos", x: 65, y: 40, unlocked: false, faction: "Инфестировано", requirement: "Убить босса на Марсе", connections: ["mars"] },
    { name: "ceres", x: 70, y: 50, unlocked: true, faction: "Гринир", requirement: "Завершить миссию на Марсе", connections: ["mars", "jupiter"] },
    { name: "jupiter", x: 80, y: 60, unlocked: true, faction: "Корпус", requirement: "Завершить миссию на Церере", connections: ["ceres", "europa"] },
    { name: "europa", x: 85, y: 65, unlocked: true, faction: "Корпус", requirement: "Завершить миссию на Юпитере", connections: ["jupiter", "saturn"] },
    { name: "saturn", x: 60, y: 70, unlocked: true, faction: "Гринир", requirement: "Завершить миссию на Европе", connections: ["europa", "uranus"] },
    { name: "uranus", x: 40, y: 80, unlocked: true, faction: "Гринир", requirement: "Завершить миссию на Сатурне", connections: ["saturn", "neptune", "eris"] },
    { name: "neptune", x: 20, y: 70, unlocked: true, faction: "Корпус", requirement: "Завершить миссию на Уране", connections: ["uranus", "pluto"] },
    { name: "pluto", x: 10, y: 60, unlocked: true, faction: "Гринир", requirement: "Завершить миссию на Нептуне", connections: ["neptune", "sedna"] },
    { name: "sedna", x: 5, y: 50, unlocked: false, faction: "Гринир", requirement: "Убить босса на Плутоне", connections: ["pluto"] },
    { name: "eris", x: 15, y: 20, unlocked: false, faction: "Инфестировано", requirement: "Убить босса на Уране", connections: ["uranus"] },
    { name: "void", x: 50, y: 20, unlocked: false, faction: "Орокин", requirement: "Ключи Орокин", connections: [] }
];

// Инициализация карты
document.addEventListener('DOMContentLoaded', () => {
    const svg = document.querySelector('.map-lines');
   
    // Создание соединительных линий
    planets.forEach(planet => {
        planet.connections.forEach(connection => {
            const target = planets.find(p => p.name === connection);
            if(target) {
                const line = document.createElementNS("http://www.w3.org/2000/svg", "path");
                line.setAttribute('d', `M ${planet.x}% ${planet.y}% L ${target.x}% ${target.y}%`);
                line.classList.add('connection-line');
                line.dataset.connection = `${planet.name}-${target.name}`;
                svg.appendChild(line);
            }
        });
    });

    // Обработчики событий для планет
    document.querySelectorAll('.planet').forEach(planetElement => {
        const planetName = planetElement.dataset.planet;
        const planetData = planets.find(p => p.name === planetName);
       
        // Анимация при наведении
        planetElement.addEventListener('mouseover', () => {
            // Подсветка связанных линий
            document.querySelectorAll(`path[data-connection*="${planetName}"]`).forEach(line => {
                line.style.stroke = '#ffaa00';
                line.style.strokeWidth = '3';
            });
        });

        planetElement.addEventListener('mouseout', () => {
            document.querySelectorAll(`path[data-connection*="${planetName}"]`).forEach(line => {
                line.style.stroke = '#ff5500';
                line.style.strokeWidth = '2';
            });
        });

        // Динамическое обновление информации
        if(planetData) {
            const infoElement = planetElement.querySelector('.planet-info');
            infoElement.innerHTML = `
                <h3>${planetElement.querySelector('.planet-name').textContent}</h3>
                <p>Управляется: ${planetData.faction}</p>
                <p>Требуется: ${planetData.requirement}</p>
                ${!planetData.unlocked ? '<div class="locked-notice">ДОСТУП ЗАКРЫТ</div>' : ''}
            `;
        }
    });
});

// Исправленный JavaScript
document.addEventListener('DOMContentLoaded', () => {
    const svg = document.querySelector('.map-lines');
    const mapGrid = document.querySelector('.map-grid');
   
    // Получаем реальные размеры контейнера
    const gridWidth = mapGrid.offsetWidth;
    const gridHeight = mapGrid.offsetHeight;

    // Функция для преобразования процентных координат в пиксели
    const convertCoords = (xPercent, yPercent) => ({
        x: (xPercent / 100) * gridWidth,
        y: (yPercent / 100) * gridHeight
    });

    // Создание соединительных линий
    planets.forEach(planet => {
        planet.connections.forEach(connection => {
            const target = planets.find(p => p.name === connection);
            if(target) {
                const start = convertCoords(planet.x, planet.y);
                const end = convertCoords(target.x, target.y);
               
                const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                line.setAttribute('x1', start.x);
                line.setAttribute('y1', start.y);
                line.setAttribute('x2', end.x);
                line.setAttribute('y2', end.y);
                line.classList.add('connection-line');
                line.dataset.connection = `${planet.name}-${target.name}`;
                svg.appendChild(line);
            }
        });
    });
</script>[/html][darkpost]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]
<style>
.wf-tier-list {
    background: #0a0a0a;
    border: 2px solid #c99e4d;
    padding: 20px;
    font-family: 'Arial', sans-serif;
    color: #e0e0e0;
}

.weapon-card {
    display: flex;
    align-items: center;
    margin: 10px;
    padding: 15px;
    background: #1a1a1a;
    border-left: 4px solid;
    transition: 0.3s;
    cursor: pointer;
}

.weapon-card:hover {
    transform: translateX(10px);
    background: #2a2a2a;
}

.tier-marker {
    width: 80px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 0 5px;
}

.tier-S { border-color: #ff5555; color: #ff5555; }
.tier-A { border-color: #ffaa00; color: #ffaa00; }
.tier-B { border-color: #55ff55; color: #55ff55; }

.weapon-info {
    margin-left: 20px;
}

.weapon-image {
    width: 100px;
    height: 50px;
    background-size: cover;
    border: 1px solid #3a3a3a;
}

#searchInput {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background: #1a1a1a;
    border: 1px solid #c99e4d;
    color: white;
}
</style>

<div class="wf-tier-list">
    <input type="text" id="searchInput" placeholder="Поиск по оружию...">
   
    <div class="weapon-card tier-S">
        <div class="tier-marker">S-TIER</div>
        <div class="weapon-image" style="background-image: url('https://static.wikia.nocookie.net/warframe/images/9/9b/KuvaBramma.png')"></div>
        <div class="weapon-info">
            <h3>Kuva Bramma</h3>
            <p>Лук, превращающий любое пространство в адский огненный шторм</p>
        </div>
    </div>

    <!-- Добавьте остальные 9 оружий по аналогии -->
</div>

<script>
document.querySelectorAll('.weapon-card').forEach(card => {
    card.addEventListener('click', function() {
        const weaponName = this.querySelector('h3').innerText;
        alert(`Выбрано: ${weaponName}\nГотово к миссии!`);
    });
});

document.getElementById('searchInput').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    document.querySelectorAll('.weapon-card').forEach(card => {
        const name = card.querySelector('h3').innerText.toLowerCase();
        card.style.display = name.includes(searchTerm) ? 'flex' : 'none';
    });
});
</script>
[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]

<style>
.pets-container {
    background: #1a1a1a;
    border: 2px solid #4CAF50;
    padding: 20px;
    font-family: 'Arial', sans-serif;
    color: #fff;
}

.pet-category {
    margin: 20px 0;
    padding: 10px;
    background: #2a2a2a;
    border-left: 4px solid #4CAF50;
}

.pet-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    margin: 15px 0;
    padding: 10px;
    background: #333;
    transition: 0.3s;
    cursor: pointer;
}

.pet-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 10px #4CAF5055;
}

.pet-image {
    width: 100px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
}

.pet-info h3 {
    color: #4CAF50;
    margin: 0 0 10px 0;
}

.ability-list {
    list-style: none;
    padding: 0;
}

.ability-list li {
    margin: 5px 0;
    padding: 3px;
    background: #404040;
}
</style>

<div class="pets-container">
    <div class="pet-category">
        <h2>🐾 Сентеналы (Роботы-компаньоны)</h2>
       
        <div class="pet-card">
            <div class="pet-image" style="background-image: url('https://static.wikia.nocookie.net/warframe/images/3/3a/SentinelWyrm.png')"></div>
            <div class="pet-info">
                <h3>Wyrm Prime</h3>
                <ul class="ability-list">
                    <li>Negate: Автоматически отражает вражеские снаряды</li>
                    <li>Crowd Dispersion: Оглушает ближайших врагов</li>
                </ul>
                <p>▶ Особенность: Лучший защитник для ближнего боя</p>
            </div>
        </div>

        <!-- Другие сентеналы -->
    </div>

    <div class="pet-category">
        <h2>😼 Кубаты (Био-симбиоты)</h2>
       
        <div class="pet-card">
            <div class="pet-image" style="background-image: url('https://static.wikia.nocookie.net/warframe/images/7/7d/SmeetaKavat.png')"></div>
            <div class="pet-info">
                <h3>Smeeta Kavat</h3>
                <ul class="ability-list">
                    <li>Charm: Случайные баффы (2x ресурсы, криты и т.д.)</li>
                    <li>Mischief: Создает клон-приманку</li>
                </ul>
                <p>▶ Особенность: Must-have для фарма ресурсов</p>
            </div>
        </div>

        <!-- Другие кубаты -->
    </div>

    <!-- Другие категории -->
</div>

<script>
document.querySelectorAll('.pet-card').forEach(card => {
    card.addEventListener('click', () => {
        card.style.border = "2px solid #4CAF50";
        setTimeout(() => card.style.border = "none", 500);
    });
});
</script>
[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]
<!DOCTYPE html>
<html>
<head>
<style>
.wf-tier-list {
    background: #0a0a0a;
    border: 2px solid #3d3d3d;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    font-family: 'Orbitron', sans-serif;
}

.wf-card {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.4s;
    border: 2px solid;
}

.wf-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.tier-marker {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    text-shadow: 0 0 10px;
}

.wf-image {
    width: 200px;
    height: 150px;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
}

.stats-bar {
    height: 8px;
    background: #333;
    margin: 10px 0;
    border-radius: 4px;
    overflow: hidden;
}

.stats-progress {
    height: 100%;
    transition: 0.3s;
}

/* Тир-стили */
.S-tier { border-color: #ffd700; background: linear-gradient(45deg, #2a2a2a, #4a3a00); }
.A-tier { border-color: #ff6b6b; background: linear-gradient(45deg, #2a2a2a, #4a0000); }
.B-tier { border-color: #4CAF50; background: linear-gradient(45deg, #2a2a2a, #004a00); }
.C-tier { border-color: #2196F3; background: linear-gradient(45deg, #2a2a2a, #00004a); }

/* Анимации */
@keyframes glow-S {
    0% { box-shadow: 0 0 5px #ffd700; }
    50% { box-shadow: 0 0 20px #ffd700; }
    100% { box-shadow: 0 0 5px #ffd700; }
}

.S-tier { animation: glow-S 3s infinite; }
</style>
</head>
<body>

<div class="wf-tier-list">
    <!-- Excalibur -->
    <div class="wf-card S-tier">
        <div class="tier-marker" style="color: #ffd700">S</div>
        <div class="wf-image" style="background-image: url('https://static.wikia.nocookie.net/warframe/images/7/7d/ExcaliburPrimeNewLook.png')"></div>
        <h3>EXCALIBUR</h3>
        <div class="stats-bar">
            <div class="stats-progress" style="width: 85%; background: #ffd700"></div>
        </div>
        <ul>
            <li>Роль: Атакующий</li>
            <li>Сложность: ★☆☆☆☆</li>
            <li>Способности: Радикал Джавелин, Ослепляющий свет</li>
        </ul>
    </div>

    <!-- Yareli -->
    <div class="wf-card A-tier">
        <div class="tier-marker" style="color: #ff6b6b">A</div>
        <div class="wf-image" style="background-image: url('https://static.wikia.nocookie.net/warframe/images/5/5a/Yarell.png')"></div>
        <h3>YARELI</h3>
        <div class="stats-bar">
            <div class="stats-progress" style="width: 70%; background: #ff6b6b"></div>
        </div>
        <ul>
            <li>Роль: Мобильность</li>
            <li>Сложность: ★★☆☆☆</li>
            <li>Способности: Мерский Анимари, Акваблейдс</li>
        </ul>
    </div>

    <!-- Nyx -->
    <div class="wf-card B-tier">
        <div class="tier-marker" style="color: #4CAF50">B</div>
        <div class="wf-image" style="background-image: url('https://static.wikia.nocookie.net/warframe/images/9/9c/NyxPrimeNewLook.png')"></div>
        <h3>NYX</h3>
        <div class="stats-bar">
            <div class="stats-progress" style="width: 60%; background: #4CAF50"></div>
        </div>
        <ul>
            <li>Роль: Контроль</li>
            <li>Сложность: ★★★☆☆</li>
            <li>Способности: Хаос, Психические болты</li>
        </ul>
    </div>

    <!-- Sarina -->
    <div class="wf-card S-tier">
        <div class="tier-marker" style="color: #ffd700">S</div>
        <div class="wf-image" style="background-image: url('https://static.wikia.nocookie.net/warframe/images/9/9d/SarynPrimeNewLook.png')"></div>
        <h3>SARINA</h3>
        <div class="stats-bar">
            <div class="stats-progress" style="width: 90%; background: #ffd700"></div>
        </div>
        <ul>
            <li>Роль: Массовый урон</li>
            <li>Сложность: ★★☆☆☆</li>
            <li>Способности: Споры, Токсичный кнут</li>
        </ul>
    </div>

    <!-- Добавить остальные 16 варфреймов по шаблону -->
</div>

<script>
// Система фильтрации
const filters = {
    tier: {
        'S': '#ffd700',
        'A': '#ff6b6b',
        'B': '#4CAF50',
        'C': '#2196F3'
    },
    role: ['Атакующий', 'Танк', 'Поддержка', 'Контроль']
};

function filterWarframes(type, value) {
    document.querySelectorAll('.wf-card').forEach(card => {
        if(type === 'tier') {
            card.style.display = card.querySelector('.tier-marker').innerText === value ? 'block' : 'none';
        }
    });
}

// Параллакс-эффект
document.querySelectorAll('.wf-card').forEach(card => {
    card.addEventListener('mousemove', (e) => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        card.style.transform = `perspective(1000px) rotateX(${(y - 75)/15}deg) rotateY(${(x - 150)/15}deg)`;
    });
   
    card.addEventListener('mouseleave', () => {
        card.style.transform = '';
    });
});
</script>

</body>
</html>
[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>⚔️ TennoWiki - Ролевая Игра</title>
    <style>
        :root {
            --primary-color: #00b4d8;
            --dark-bg: #0a0a0a;
            --orokin-gold: #c99e4d;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background: var(--dark-bg);
            color: #fff;
            font-family: 'Orbitron', sans-serif;
            min-height: 100vh;
        }

        /* Навигация */
        .nav-container {
            background: #000;
            padding: 1rem;
            border-bottom: 2px solid var(--orokin-gold);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nav-menu {
            display: flex;
            gap: 2rem;
            justify-content: center;
        }

        .nav-item {
            color: var(--primary-color);
            cursor: pointer;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: 0.3s;
            text-transform: uppercase;
        }

        .nav-item:hover {
            background: var(--primary-color);
            color: #000;
        }

        /* Основной контент */
        .wiki-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .section-title {
            color: var(--orokin-gold);
            border-left: 4px solid var(--primary-color);
            padding-left: 1rem;
            margin: 2rem 0;
        }

        /* Карточки */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .wiki-card {
            background: #1a1a1a;
            border: 1px solid #333;
            border-radius: 8px;
            padding: 1.5rem;
            transition: 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .wiki-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary-color);
            box-shadow: 0 0 15px rgba(0, 180, 216, 0.3);
        }

        .card-image {
            width: 100%;
            height: 200px;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            margin-bottom: 1rem;
        }

        /* Анимация Бездны */
        @keyframes void-pulse {
            0% { opacity: 0.3; }
            50% { opacity: 0.6; }
            100% { opacity: 0.3; }
        }

        .void-animation::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(156,39,176,0.3) 0%, transparent 70%);
            animation: void-pulse 3s infinite;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <nav class="nav-container">
        <div class="nav-menu">
            <div class="nav-item" data-section="warframes">Варфреймы</div>
            <div class="nav-item" data-section="weapons">Оружие</div>
            <div class="nav-item" data-section="lore">Лор</div>
            <div class="nav-item" data-section="factions">Фракции</div>
            <div class="nav-item" data-section="events">События</div>
        </div>
    </nav>

    <div class="wiki-container">
        <!-- Динамический контент будет загружаться сюда -->
        <div id="content"></div>
    </div>

<script>
// База данных Wiki
const wikiData = {
    warframes: [
        {
            name: "Экскалибур",
            type: "S-Тир",
            image: "https://example.com/excalibur.png",
            description: "Меч Света - базовый варфрейм ближнего боя",
            abilities: ["Радикал Джавелин", "Ослепляющий Свет", "Супер Прыжок"]
        },
        {
            name: "Ярели",
            type: "A-Тир",
            image: "https://example.com/yareli.png",
            description: "Королева Мерского Синдиката",
            abilities: ["Мерский Вихрь", "Аква Блейдс", "Рифовый Сёрф"]
        }
    ],
   
    factions: [
        {
            name: "Стилд Меридиан",
            leader: "Крессa",
            status: "Союзники",
            quest: "Глас"
        }
    ]
};

// Система рендеринга
function renderSection(section) {
    const content = document.getElementById('content');
    content.innerHTML = '';

    switch(section) {
        case 'warframes':
            content.innerHTML = `
                <h2 class="section-title">⚡ Варфреймы</h2>
                <div class="card-grid">
                    ${wikiData.warframes.map(wf => `
                        <div class="wiki-card void-animation">
                            <div class="card-image" style="background-image: url('${wf.image}')"></div>
                            <h3>${wf.name}</h3>
                            <p>${wf.description}</p>
                            <div class="abilities">
                                <h4>Способности:</h4>
                                <ul>
                                    ${wf.abilities.map(a => `<li>${a}</li>`).join('')}
                                </ul>
                            </div>
                        </div>
                    `).join('')}
                </div>
            `;
            break;
           
        case 'factions':
            content.innerHTML = `
                <h2 class="section-title">🛡️ Фракции</h2>
                <div class="faction-list">
                    ${wikiData.factions.map(f => `
                        <div class="wiki-card">
                            <h3>${f.name}</h3>
                            <p>Лидер: ${f.leader}</p>
                            <p>Статус: ${f.status}</p>
                            <p>Связанный квест: ${f.quest}</p>
                        </div>
                    `).join('')}
                </div>
            `;
            break;
    }
}

// Обработчики событий
document.querySelectorAll('.nav-item').forEach(item => {
    item.addEventListener('click', () => {
        document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
        item.classList.add('active');
        renderSection(item.dataset.section);
    });
});

// Инициализация
renderSection('warframes');
</script>
</body>
</html>

[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]
<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --orokin-gold: #c99e4d;
  --void-purple: #6d4dbb;
  --corpus-blue: #00b4d8;
}

.calendar-container {
  background: #0a0a0a;
  border: 2px solid var(--orokin-gold);
  padding: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  font-family: 'Orbitron', sans-serif;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.event-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.filter-btn {
  background: #1a1a1a;
  border: 1px solid var(--void-purple);
  color: white;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: 0.3s;
}

.filter-btn.active {
  background: var(--void-purple);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.event-card {
  background: #1a1a1a;
  border: 1px solid;
  padding: 1rem;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(109,77,187,0.5);
}

.event-type {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}

.quest { border-color: var(--orokin-gold); }
.pvp { border-color: #ff0000; }
.guild { border-color: var(--corpus-blue); }
.special { border-color: #4CAF50; }

.event-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.participant-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--orokin-gold);
}

@keyframes void-pulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

.void-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(109,77,187,0.3) 0%, transparent 70%);
  animation: void-pulse 3s infinite;
  pointer-events: none;
}
</style>
</head>
<body>

<div class="calendar-container void-effect">
  <div class="calendar-header">
    <h2 style="color: var(--orokin-gold)">OROKIN EVENT MATRIX</h2>
    <button class="filter-btn" onclick="openEventForm()">+ Создать событие</button>
  </div>

  <div class="event-filters">
    <button class="filter-btn active" data-type="all">Все</button>
    <button class="filter-btn" data-type="quest">Квесты</button>
    <button class="filter-btn" data-type="pvp">PvP</button>
    <button class="filter-btn" data-type="guild">Гильдии</button>
    <button class="filter-btn" data-type="special">Спецмиссии</button>
  </div>

  <div class="calendar-grid">
    <div class="event-card quest">
      <div class="event-type" style="background: var(--orokin-gold)">⚔️</div>
      <h3>Охота на Эйдолонов</h3>
      <p>📅 15 октября 20:00</p>
      <p>🎚️ Уровень: Легендарный</p>
      <p>👥 Участники:</p>
      <div class="event-participants">
        <div class="participant-avatar" style="background: #f00"></div>
        <div class="participant-avatar" style="background: #0f0"></div>
      </div>
    </div>

    <!-- Добавить другие события -->
  </div>
</div>

<script>
// Фильтрация событий
document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
   
    const type = this.dataset.type;
    document.querySelectorAll('.event-card').forEach(card => {
      card.style.display = type === 'all' || card.classList.contains(type) ? 'block' : 'none';
    });
  });
});

// Форма создания события
function openEventForm() {
  const formHtml = `
    <div class="event-form">
      <h3>Создание нового события</h3>
      <input type="text" placeholder="Название события">
      <select>
        <option value="quest">Квест</option>
        <option value="pvp">PvP</option>
        <option value="guild">Гильдия</option>
        <option value="special">Спецмиссия</option>
      </select>
      <button onclick="addNewEvent(this)">Создать</button>
    </div>
  `;
  const newCard = document.createElement('div');
  newCard.className = 'event-card';
  newCard.innerHTML = formHtml;
  document.querySelector('.calendar-grid').prepend(newCard);
}

function addNewEvent(btn) {
  // Логика сохранения события
  alert('Событие создано!');
}
</script>

</body>
</html>
[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]
<style>
.wf-mission-table {
    background: #0a0a0a;
    border: 2px solid #c99e4d;
    padding: 20px;
    font-family: 'Arial', sans-serif;
    color: #e0e0e0;
    margin: 20px 0;
}
.mission-tag {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px;
    border-radius: 12px;
    font-size: 0.8em;
}

.stealth { background: #55ff5555; }
.teamwork { background: #5555ff55; }
.mission-card {
    display: grid;
    grid-template-columns: 100px 1fr 150px;
    margin: 15px 0;
    padding: 15px;
    background: #1a1a1a;
    border-left: 4px solid;
    cursor: pointer;
    transition: 0.3s;
}

.mission-card:hover {
    transform: translateX(10px);
    background: #2a2a2a;
}

.mission-type {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px;
    border-radius: 3px;
}

.mission-info {
    padding: 0 20px;
}

.mission-rewards {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Цвета типов миссий */
.exterminate { border-color: #ff5555; }
.survival { border-color: #ffaa00; }
.spy { border-color: #55ff55; }
.defense { border-color: #5555ff; }

/* Всплывающие детали */
.mission-details {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s;
    grid-column: 1 / -1;
}

.mission-card.active .mission-details {
    max-height: 500px;
    padding: 15px 0;
}

.rp-tip {
    color: #c99e4d;
    font-size: 0.9em;
    margin-top: 10px;
}
</style>

<div class="wf-mission-table">
    <!-- Миссия 1 -->
    <div class="mission-card exterminate">
        <div class="mission-type">EXTERMINATE</div>
        <div class="mission-info">
            <h3>Зачистка Гринирской базы</h3>
            <p>Цель: Уничтожить 150 врагов</p>
            <div class="rp-tip">РП-совет: Используйте окружение для засад</div>
        </div>
        <div class="mission-rewards">
            <span>🔧 5000 Кредитов</span>
            <span>🔷 Нейроны ×3</span>
        </div>
        <div class="mission-details">
            <h4>Детали миссии:</h4>
            <ul>
                <li>Локация: Крепость Седны</li>
                <li>Особенности: Огнеопасные бочки, охраняемые проходы</li>
                <li>РП-элементы: Возможность саботажа систем жизнеобеспечения</li>
            </ul>
        </div>
    </div>

    <!-- Миссия 2 -->
    <div class="mission-card spy">
        <div class="mission-type">SPY</div>
        <div class="mission-info">
            <h3>Кража данных Корпуса</h3>
            <p>Цель: Взломать 3 терминала</p>
            <div class="rp-tip">РП-совет: Маскируйтесь под врагов</div>
        </div>
        <div class="mission-rewards">
            <span>🗝️ Мод "Скрытность"</span>
            <span>🔷 Криолит ×10</span>
        </div>
        <div class="mission-details">
            <h4>Детали миссии:</h4>
            <ul>
                <li>Локация: Лунный спутник Юпитера</li>
                <li>Особенности: Лазерные ловушки, патрули дронов</li>
                <li>РП-элементы: Возможность перехвата коммуникаций</li>
            </ul>
        </div>
    </div>

<!-- Survival -->
<div class="mission-card survival">
    <div class="mission-type">SURVIVAL</div>
    <div class="mission-info">
        <h3>Осада Инфеcтед</h3>
        <p>Цель: Продержаться 10 минут</p>
        <div class="rp-tip">РП-совет: Защищайте точки ресурсного сбора</div>
    </div>
    <div class="mission-rewards">
        <span>⚡ Форма ×2</span>
        <span>🔷 Нитэйн ×5</span>
    </div>
    <div class="mission-details">
        <h4>Детали миссии:</h4>
        <ul>
            <li>Локация: Зараженный корабль</li>
            <li>Особенности: Постепенная деградация систем</li>
            <li>РП-элементы: Возможность очистки зоны</li>
        </ul>
    </div>
</div>

<!-- Defense -->
<div class="mission-card defense">
    <div class="mission-type">DEFENSE</div>
    <div class="mission-info">
        <h3>Защита Орокинского артефакта</h3>
        <p>Цель: Защитить объект 10 волн</p>
        <div class="rp-tip">РП-совет: Координируйте позиции</div>
    </div>
    <div class="mission-rewards">
        <span>🔮 Реликварий</span>
        <span>🔷 Аргоны ×2</span>
    </div>
    <div class="mission-details">
        <h4>Детали миссии:</h4>
        <ul>
            <li>Локация: Древний храм</li>
            <li>Особенности: Узкие коридоры, укрытия</li>
            <li>РП-элементы: Ритуал активации защиты</li>
        </ul>
    </div>
</div>
    <!-- Добавить остальные миссии -->
</div>

<script>
document.querySelectorAll('.mission-card').forEach(card => {
    card.addEventListener('click', function() {
        this.classList.toggle('active');
    });
});

let completedMissions = [];
document.querySelectorAll('.mission-card').forEach((card, index) => {
    card.addEventListener('dblclick', () => {
        card.classList.toggle('completed');
        completedMissions.push(index);
        localStorage.setItem('rpProgress', JSON.stringify(completedMissions));
    });
});
</script>

[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]
<div class="solar-rail-map">
  <div class="planet-node" style="top: 20%; left: 30%" data-planet="Земля">
    <div class="node-pulse"></div>
    <div class="node-info">
      <h4>ЗЕМЛЯ</h4>
      <p>Статус: Под контролем Гринир</p>
      <button class="rail-jump">Переход</button>
    </div>
  </div>
</div>

<style>
.solar-rail-map {
  position: relative;
  height: 600px;
  background: #556673;
}

.planet-node {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #c99e4d;
  cursor: pointer;
}

.node-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: rail-pulse 2s infinite;
}

@keyframes rail-pulse {
  0% { box-shadow: 0 0 0 0 #c99e4d66; }
  100% { box-shadow: 0 0 0 20px #c99e4d00; }
}

.node-info {
  display: none;
  position: absolute;
  bottom: 120%;
  width: 300px;
  background: #000;
  border: 2px solid #6d4dbb;
}

.planet-node:hover .node-info {
  display: block;
}
</style>
[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]

<div class="syndicate-terminal">
  <div class="syndicate-faction" data-faction="Steel Meridian">
    <div class="faction-logo"></div>
    <div class="reputation-bar">
      <div class="reputation-progress" style="width: 65%"></div>
    </div>
    <div class="rank-badges">
      <div class="rank achieved"></div>
      <div class="rank achieved"></div>
      <div class="rank"></div>
    </div>
  </div>
</div>

<style>
.syndicate-terminal {
  background: #1a1a1a;
  padding: 2rem;
  border-left: 10px solid #c99e4d;
}

.reputation-bar {
  height: 10px;
  background: #333;
  margin: 1rem 0;
}

.reputation-progress {
  height: 100%;
  background: linear-gradient(90deg, #c99e4d, #9c27b0);
  transition: 0.5s;
}

.rank-badges {
  display: flex;
  gap: 0.5rem;
}

.rank {
  width: 20px;
  height: 20px;
  border: 2px solid #c99e4d;
}

.rank.achieved {
  background: #c99e4d;
}
</style>
[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау

[html]
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>The Walking Dead: Fractured Horizons - Вики</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Основные стили */
        :root {
            --dusty-blue: #6B8C9E;
            --steel-gray: #4A5560;
            --rust-red: #9E5A4D;
            --parchment: #D4C6B5;
            --apocalypse-black: #1A1A1A;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            background: linear-gradient(to bottom right, var(--dusty-blue), var(--apocalypse-black));
            color: var(--parchment);
            line-height: 1.6;
        }

        /* Навигация */
        .wiki-nav {
            background: rgba(26, 26, 26, 0.9);
            backdrop-filter: blur(5px);
            padding: 1rem;
            position: sticky;
            top: 0;
            border-bottom: 2px solid var(--rust-red);
        }

        .nav-title {
            font-family: 'Bebas Neue', cursive;
            font-size: 2.5rem;
            color: var(--rust-red);
            text-shadow: 2px 2px 0 var(--apocalypse-black);
        }

        /* Карточки фракций */
        .faction-card {
            background: url('noisy-texture.png'), rgba(74, 85, 96, 0.8);
            border: 1px solid var(--rust-red);
            margin: 1rem;
            padding: 1.5rem;
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .faction-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(158, 90, 77, 0.4);
        }

        .faction-title {
            font-family: 'Bebas Neue', cursive;
            color: var(--dusty-blue);
            border-left: 4px solid var(--rust-red);
            padding-left: 1rem;
        }

        /* Модальное окно */
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(26, 26, 26, 0.95);
            padding: 2rem;
            border: 2px solid var(--rust-red);
            max-width: 600px;
            z-index: 1000;
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            .faction-card {
                margin: 0.5rem;
                padding: 1rem;
            }
           
            .nav-title {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <!-- Навигация -->
    <nav class="wiki-nav">
        <div class="nav-title">FRACTURED HORIZONS WIKI</div>
        <div class="search-box">
            <input type="text" placeholder="Поиск по вики..." id="wikiSearch">
        </div>
    </nav>

    <!-- Основной контент -->
    <main class="wiki-container">
        <!-- Секция фракций -->
        <section class="factions-section">
            <h2>Фракции</h2>
           
            <div class="faction-card" data-faction="scouts">
                <h3 class="faction-title">Следопыты</h3>
                <p>Бывшие выжившие, ищущие мифический безопасный город...</p>
                <button class="btn-more" onclick="showFactionModal('scouts')">Подробнее</button>
            </div>

            <!-- Другие фракции... -->
        </section>
    </main>

    <!-- Модальное окно -->
    <div id="factionModal" class="modal">
        <div class="modal-content"></div>
        <button onclick="closeModal()" class="btn-close">×</button>
    </div>

    <script>
        // Модальные окна
        function showFactionModal(factionId) {
            const modal = document.getElementById('factionModal');
            const content = {
                'scouts': `<h3>Следопыты</h3><p>Полное описание фракции...</p>`
            };
            modal.querySelector('.modal-content').innerHTML = content[factionId];
            modal.style.display = 'block';
        }

        function closeModal() {
            document.getElementById('factionModal').style.display = 'none';
        }

        // Поиск
        document.getElementById('wikiSearch').addEventListener('input', function(e) {
            const term = e.target.value.toLowerCase();
            document.querySelectorAll('.faction-card').forEach(card => {
                const text = card.textContent.toLowerCase();
                card.style.display = text.includes(term) ? 'block' : 'none';
            });
        });

        // Анимация при загрузке
        window.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.faction-card').forEach((card, index) => {
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 150);
            });
        });
    </script>
</body>
</html>

[/html]

Подпись автора

Оружие: акцельтра Питомец: кават

Оружие: споромёт Питомец: кубрау