Шапки на весну

[hideprofile]
[html]<style>
:root {
    --text: #232d24;
    --link: #39423c; 
    --link-hover: #4d5a55;
    --link-light: #d5d4d1;
    --zelen: #b8bbb9;
    --scroll: #2f3229;
    --back: #848a87;
    --noblack: #39423c; 
    --zelenlight: #cfcfca;
    --addition-area: #aeafa8;
    --addition-area-hover: #676a52;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
ul, li { list-style: none; }

body {
    background: #e8e7e3;
    font-family: 'Arial', 'Book Antiqua', sans-serif;
    font-size: 12px;
    color: var(--text);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-thumb { background-color: var(--scroll); border-radius: 10px; }

.forum-window {
    width: 900px;
    max-width: 100%;
    padding: 25px;
}

.inner-panel {
    background: var(--link-light);
    border-radius: 5px;
    padding: 25px 20px 20px;
}

.role-tabs {
    display: flex;
    gap: 25px;
    color: var(--link);
    font-size: 18px;
    border-bottom: 1px solid var(--link);
    padding: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

.role-tabs span {
    padding: 0 15px;
    position: relative;
    font-family: 'Book Antiqua', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--link-hover);
}

.role-tabs span::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: -10px;
    display: block;
    width: 100%;
    height: 5px;
    background: var(--link);
}

.trainers-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
}

.trainer-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: #e3e2de;
    border: 1px solid var(--addition-area);
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Book Antiqua', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--noblack);
    text-align: center;
    transition: all 0.3s ease;
}

.trainer-btn:hover {
    background: var(--zelenlight);
    border-color: var(--addition-area-hover);
}

.trainer-btn::after {
    content: ' ▾';
    font-size: 12px;
    transition: transform 0.3s ease;
    display: inline-block;
    margin-left: 6px;
    color: var(--back);
}

.trainer-btn.active::after {
    transform: rotate(180deg);
}

.pokemon-spoiler {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.4s ease,
                opacity 0.3s ease;
    opacity: 0;
}

.pokemon-spoiler.open {
    max-height: 3000px;
    opacity: 1;
    margin-top: 8px;
}

.pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    padding: 15px;
    background: #dcdbd6;
    border-radius: 5px;
    border: 1px solid var(--addition-area);
}

.pet-card {
    background: #e3e2de;
    border: 1px solid var(--addition-area);
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    transition: transform 0.3s ease;
}

.pet-card:hover {
    transform: translateY(-2px);
}

.pet-image {
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--zelenlight);
    border-radius: 5px;
    padding: 4px;
    border: 2px solid var(--addition-area);
    transition: transform 0.3s ease;
}

.pet-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 3px;
}

.pet-image:hover {
    transform: scale(1.05);
}

.pet-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--noblack);
    font-family: 'Book Antiqua', serif;
    margin: 6px 0 2px;
}

.pet-type {
    font-size: 10px;
    color: var(--link);
    margin-bottom: 6px;
    font-style: italic;
}

.life-bar-container {
    background-color: var(--back);
    border-radius: 20px;
    height: 8px;
    width: 100%;
    margin: 4px 0;
    overflow: hidden;
    border: 1px solid var(--addition-area-hover);
}

.life-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--zelen), var(--link));
    border-radius: 20px;
    transition: width 0.3s ease;
}

.pet-stats {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--noblack);
    margin: 4px 0;
    gap: 4px;
}

.stat-item {
    background: var(--zelenlight);
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid var(--addition-area);
    white-space: nowrap;
}

.stage-indicator {
    font-size: 10px;
    color: var(--noblack);
    background: var(--zelenlight);
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: 600;
    margin-top: 6px;
    border: 1px solid var(--addition-area);
    font-family: 'Book Antiqua', serif;
}

.type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    margin: 1px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.type-normal { background: #A8A878; }
.type-fire { background: #F08030; }
.type-water { background: #6890F0; }
.type-electric { background: #F8D030; color: #333; }
.type-grass { background: #78C850; }
.type-ice { background: #98D8D8; color: #333; }
.type-fighting { background: #C03028; }
.type-poison { background: #A040A0; }
.type-ground { background: #E0C068; color: #333; }
.type-flying { background: #A890F0; }
.type-psychic { background: #F85888; }
.type-bug { background: #A8B820; }
.type-rock { background: #B8A038; }
.type-ghost { background: #705898; }
.type-dragon { background: #7038F8; }
.type-steel { background: #B8B8D0; color: #333; }
.type-fairy { background: #EE99AC; }

.footer {
    font-size: 11px;
    text-align: center;
    color: var(--link);
    margin-top: 20px;
    opacity: 0.8;
    font-style: italic;
}
</style>

<div class="forum-window">
    <div class="inner-panel">
       
        <div class="role-tabs">
            <span>Тренеры и покемоны</span>
        </div>
       
        <div class="trainers-table">
           
            <!-- Тренер: Эш -->
            <div class="trainer-block">
                <button class="trainer-btn" onclick="toggleTrainer(this, 'spoiler-ash')">
                    ⚡ Эш Кетчум
                </button>
                <div id="spoiler-ash" class="pokemon-spoiler">
                    <div class="pokemon-grid">
                       
                        <!-- Пикачу -->
                        <div class="pet-card">
                            <div class="pet-image">
                                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png" alt="Пикачу">
                            </div>
                            <div class="pet-name">Пикачу</div>
                            <div class="pet-type">
                                <span class="type-badge type-electric">Электро</span>
                            </div>
                            <div class="life-bar-container">
                                <div class="life-bar-fill" style="width: 78%;"></div>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">Ур. 95</span>
                                <span class="stat-item">Сила 88</span>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">HP 274/350</span>
                            </div>
                            <div class="stage-indicator">★ Элитный</div>
                        </div>
                       
                        <!-- Чаризард -->
                        <div class="pet-card">
                            <div class="pet-image">
                                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png" alt="Чаризард">
                            </div>
                            <div class="pet-name">Чаризард</div>
                            <div class="pet-type">
                                <span class="type-badge type-fire">Огонь</span>
                                <span class="type-badge type-flying">Летающий</span>
                            </div>
                            <div class="life-bar-container">
                                <div class="life-bar-fill" style="width: 64%;"></div>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">Ур. 82</span>
                                <span class="stat-item">Сила 91</span>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">HP 245/380</span>
                            </div>
                            <div class="stage-indicator">★ Элитный</div>
                        </div>
                       
                        <!-- Бульбазавр -->
                        <div class="pet-card">
                            <div class="pet-image">
                                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png" alt="Бульбазавр">
                            </div>
                            <div class="pet-name">Бульбазавр</div>
                            <div class="pet-type">
                                <span class="type-badge type-grass">Трава</span>
                                <span class="type-badge type-poison">Яд</span>
                            </div>
                            <div class="life-bar-container">
                                <div class="life-bar-fill" style="width: 82%;"></div>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">Ур. 70</span>
                                <span class="stat-item">Сила 75</span>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">HP 290/355</span>
                            </div>
                            <div class="stage-indicator">◆ Продвинутый</div>
                        </div>
                       
                        <!-- Сквиртл -->
                        <div class="pet-card">
                            <div class="pet-image">
                                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png" alt="Сквиртл">
                            </div>
                            <div class="pet-name">Сквиртл</div>
                            <div class="pet-type">
                                <span class="type-badge type-water">Вода</span>
                            </div>
                            <div class="life-bar-container">
                                <div class="life-bar-fill" style="width: 89%;"></div>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">Ур. 65</span>
                                <span class="stat-item">Сила 68</span>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">HP 310/345</span>
                            </div>
                            <div class="stage-indicator">◆ Продвинутый</div>
                        </div>
                       
                    </div>
                </div>
            </div>
           
            <!-- Тренер: Мисти -->
            <div class="trainer-block">
                <button class="trainer-btn" onclick="toggleTrainer(this, 'spoiler-misty')">
                    💧 Мисти
                </button>
                <div id="spoiler-misty" class="pokemon-spoiler">
                    <div class="pokemon-grid">
                       
                        <!-- Старми -->
                        <div class="pet-card">
                            <div class="pet-image">
                                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/121.png" alt="Старми">
                            </div>
                            <div class="pet-name">Старми</div>
                            <div class="pet-type">
                                <span class="type-badge type-water">Вода</span>
                                <span class="type-badge type-psychic">Психо</span>
                            </div>
                            <div class="life-bar-container">
                                <div class="life-bar-fill" style="width: 60%;"></div>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">Ур. 78</span>
                                <span class="stat-item">Сила 85</span>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">HP 210/350</span>
                            </div>
                            <div class="stage-indicator">★ Элитный</div>
                        </div>
                       
                        <!-- Вапореон -->
                        <div class="pet-card">
                            <div class="pet-image">
                                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/134.png" alt="Вапореон">
                            </div>
                            <div class="pet-name">Вапореон</div>
                            <div class="pet-type">
                                <span class="type-badge type-water">Вода</span>
                            </div>
                            <div class="life-bar-container">
                                <div class="life-bar-fill" style="width: 87%;"></div>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">Ур. 72</span>
                                <span class="stat-item">Сила 79</span>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">HP 340/390</span>
                            </div>
                            <div class="stage-indicator">★ Элитный</div>
                        </div>
                       
                    </div>
                </div>
            </div>
           
            <!-- Тренер: Брок -->
            <div class="trainer-block">
                <button class="trainer-btn" onclick="toggleTrainer(this, 'spoiler-brock')">
                    🪨 Брок
                </button>
                <div id="spoiler-brock" class="pokemon-spoiler">
                    <div class="pokemon-grid">
                       
                        <!-- Оникс -->
                        <div class="pet-card">
                            <div class="pet-image">
                                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/95.png" alt="Оникс">
                            </div>
                            <div class="pet-name">Оникс</div>
                            <div class="pet-type">
                                <span class="type-badge type-rock">Камень</span>
                                <span class="type-badge type-ground">Земля</span>
                            </div>
                            <div class="life-bar-container">
                                <div class="life-bar-fill" style="width: 71%;"></div>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">Ур. 76</span>
                                <span class="stat-item">Сила 80</span>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">HP 260/365</span>
                            </div>
                            <div class="stage-indicator">★ Элитный</div>
                        </div>
                       
                        <!-- Геодуд -->
                        <div class="pet-card">
                            <div class="pet-image">
                                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/74.png" alt="Геодуд">
                            </div>
                            <div class="pet-name">Геодуд</div>
                            <div class="pet-type">
                                <span class="type-badge type-rock">Камень</span>
                                <span class="type-badge type-ground">Земля</span>
                            </div>
                            <div class="life-bar-container">
                                <div class="life-bar-fill" style="width: 85%;"></div>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">Ур. 55</span>
                                <span class="stat-item">Сила 60</span>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">HP 170/200</span>
                            </div>
                            <div class="stage-indicator">● Начинающий</div>
                        </div>
                       
                        <!-- Райхорн -->
                        <div class="pet-card">
                            <div class="pet-image">
                                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/111.png" alt="Райхорн">
                            </div>
                            <div class="pet-name">Райхорн</div>
                            <div class="pet-type">
                                <span class="type-badge type-ground">Земля</span>
                                <span class="type-badge type-rock">Камень</span>
                            </div>
                            <div class="life-bar-container">
                                <div class="life-bar-fill" style="width: 77%;"></div>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">Ур. 60</span>
                                <span class="stat-item">Сила 72</span>
                            </div>
                            <div class="pet-stats">
                                <span class="stat-item">HP 240/310</span>
                            </div>
                            <div class="stage-indicator">◆ Продвинутый</div>
                        </div>
                       
                    </div>
                </div>
            </div>
           
        </div>
       
    </div>
</div>

<script>
function toggleTrainer(button, spoilerId) {
    var spoiler = document.getElementById(spoilerId);
    var isOpen = spoiler.classList.contains('open');
   
    if(isOpen) {
        spoiler.classList.remove('open');
        button.classList.remove('active');
    } else {
        spoiler.classList.add('open');
        button.classList.add('active');
    }
}
</script>

[/html]