Хранилище

Страница: 1

Сообщений 1 страница 10 из 10

Поделиться12026-07-29 09:12:01

Автор: Черника
Проверка максимально длинного статуса, который тол
Предводитель
13 лун
Какая-то красивая цитата персонажа тут ссылка и еще немного текста
Сообщений: 197
Уважение: +9

Стартовый пост

Поделиться22026-07-29 09:43:03

Автор: Черника
Проверка максимально длинного статуса, который тол
Предводитель
13 лун
Какая-то красивая цитата персонажа тут ссылка и еще немного текста
Сообщений: 197
Уважение: +9

[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;
}

/* ===== КАРТОЧКА ТРЕНЕРА ===== */
.trainer-card {
background: #e3e2de;
border: 1px solid var(--addition-area);
border-radius: 8px;
padding: 25px 20px 20px;
margin-bottom: 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}

.trainer-top-row {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
width: 100%;
flex-wrap: wrap;
}

.trainer-avatar {
width: 90px;
height: 90px;
background: var(--zelenlight);
border: 2px solid var(--addition-area);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
flex-shrink: 0;
overflow: hidden;
}

.trainer-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

.trainer-divider {
width: 1px;
height: 70px;
border-left: 2px dashed var(--addition-area-hover);
flex-shrink: 0;
}

.trainer-info {
text-align: center;
min-width: 160px;
}

.trainer-name {
font-family: 'Book Antiqua', serif;
font-size: 20px;
font-weight: 700;
color: var(--noblack);
margin-bottom: 4px;
}

.trainer-title {
display: inline-block;
padding: 5px 16px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 10px;
color: #fff;
}

.title-newbie { background: #A8A878; }
.title-rookie { background: #78C850; }
.title-catcher { background: #6890F0; }
.title-expert { background: #A890F0; }
.title-elite { background: #B8A038; }
.title-master { background: #F08030; }
.title-champion { background: #A040A0; }
.title-legend { background: linear-gradient(135deg, #F8D030, #F08030); }

.trainer-stats-row {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 8px;
}

.trainer-stat {
font-size: 11px;
color: var(--noblack);
}

.trainer-stat strong {
color: var(--link-hover);
font-size: 14px;
font-family: 'Book Antiqua', serif;
}

.trainer-exp-bar {
width: 100%;
max-width: 350px;
margin: 0 auto;
}

.exp-bar-label {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--back);
margin-bottom: 3px;
}

.exp-bar-bg {
width: 100%;
height: 10px;
background: var(--back);
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--addition-area-hover);
}

.exp-bar-fill {
height: 100%;
background: linear-gradient(90deg, #48bb78, #38a169, #F8D030);
border-radius: 10px;
transition: width 0.5s ease;
}

.pokemon-count-breakdown {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
font-size: 10px;
color: var(--back);
width: 100%;
}

.pokemon-count-breakdown span {
background: var(--zelenlight);
padding: 3px 10px;
border-radius: 10px;
border: 1px solid var(--addition-area);
color: var(--noblack);
font-size: 10px;
}

.pokemon-count-breakdown span strong {
color: var(--link-hover);
}

.pokemon-count-breakdown span small {
font-size: 9px;
}

/* ===== ХРАНИЛИЩЕ ===== */
.storage-section {
margin-top: 0;
}

.storage-header {
background: #e3e2de;
border: 1px solid var(--addition-area);
border-radius: 5px 5px 0 0;
padding: 14px 20px;
font-family: 'Book Antiqua', serif;
font-size: 16px;
font-weight: 700;
color: var(--noblack);
text-align: center;
}

.storage-scroll {
height: 320px;
overflow-y: auto;
background: #dcdbd6;
border: 1px solid var(--addition-area);
border-top: none;
border-radius: 0 0 5px 5px;
padding: 15px;
}

.pokemon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 10px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
}

.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: auto;
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, #fc8181, #e53e3e);
border-radius: 20px;
transition: width 0.3s ease;
}

.xp-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);
}

.xp-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #48bb78, #38a169);
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;
}

.stat-label {
font-size: 9px;
color: var(--noblack);
text-align: left;
margin-top: 2px;
font-weight: 600;
}

.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; }
</style>

<div class="forum-window">
<div class="inner-panel">


<div class="trainer-card">

<div class="trainer-top-row">
<div class="trainer-avatar">
<img src="https://via.placeholder.com/90" alt="Аватар тренера">
</div>

<div class="trainer-divider"></div>

<div class="trainer-info">
<div class="trainer-name">Имя тренера</div>
<div class="trainer-title title-rookie" id="trainerTitle">Начинающий</div>

<div class="trainer-stats-row">
<div class="trainer-stat">Покемонов: <strong id="totalPokemon">1</strong></div>
<div class="trainer-stat">Опыт: <strong id="totalExp">20</strong> / 500</div>
</div>

<div class="trainer-exp-bar">
<div class="exp-bar-label">
<span>Опыт тренера</span>
<span id="expLabel">20 / 500</span>
</div>
<div class="exp-bar-bg">
<div class="exp-bar-fill" id="expFill" style="width: 4%;"></div>
</div>
</div>
</div>
</div>

<div class="pokemon-count-breakdown" id="countBreakdown"
data-common="0"
data-uncommon="1"
data-rare="0"
data-elite="0"
data-legendary="0">
<span>🟢 Обычных: <strong class="cnt-common">0</strong> <small style="color:#848a87;">(+10 XP)</small></span>
<span>🔵 Необычных: <strong class="cnt-uncommon">1</strong> <small style="color:#848a87;">(+20 XP)</small></span>
<span>🟣 Редких: <strong class="cnt-rare">0</strong> <small style="color:#848a87;">(+35 XP)</small></span>
<span>🟡 Элитных: <strong class="cnt-elite">0</strong> <small style="color:#848a87;">(+50 XP)</small></span>
<span>🔴 Легендарных: <strong class="cnt-legendary">0</strong> <small style="color:#848a87;">(+75 XP)</small></span>
</div>

</div>


<div class="storage-section">
<div class="storage-header">🎒 Хранилище покемонов</div>
<div class="storage-scroll">
<div class="pokemon-grid">

<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="stat-label">HP</div>
<div class="life-bar-container">
<div class="life-bar-fill" style="width: 100%;"></div>
</div>
<div class="pet-stats">
<span class="stat-item">45 / 45</span>
</div>
<div class="stat-label">XP</div>
<div class="xp-bar-container">
<div class="xp-bar-fill" style="width: 35%;"></div>
</div>
<div class="pet-stats">
<span class="stat-item">35 / 100</span>
</div>
<div class="pet-stats">
<span class="stat-item">Ур. 12</span>
<span class="stat-item">Сила 49</span>
</div>
<div class="stage-indicator">Необычный</div>
</div>

</div>
</div>
</div>

</div>
</div>

Поделиться32026-07-29 11:49:30

Автор: Черника
Проверка максимально длинного статуса, который тол
Предводитель
13 лун
Какая-то красивая цитата персонажа тут ссылка и еще немного текста
Сообщений: 197
Уважение: +9