Покедекс

[hideprofile]
[html]
<style>
.unova-dex {
--dex-mint: #71f4d5;
--dex-mint-soft: rgba(113,244,213,.34);
--dex-mint-faint: rgba(113,244,213,.11);
--dex-screen: #061411;
--dex-black: #020504;
--dex-red: #a91d2d;
position: relative;
width: min(100%,760px);
color: #d9fff5;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.35;
}

.unova-dex,
.unova-dex * { box-sizing: border-box; }

.unova-dex__lid,
.unova-dex__base {
position: relative;
padding: 24px;
overflow: hidden;
background: linear-gradient(145deg,#f5f6f6 0%,#aeb4b7 22%,#f8f8f7 51%,#8b9296 78%,#eceeed 100%);
border: 2px solid #62686b;
box-shadow: inset 0 0 0 5px rgba(255,255,255,.58), 0 14px 30px rgba(0,0,0,.28);
}

.unova-dex__lid { border-radius: 34px 34px 15px 15px; }
.unova-dex__base { border-radius: 15px 15px 38px 38px; }

.unova-dex__screen {
position: relative;
z-index: 2;
padding: 18px;
overflow: hidden;
background: var(--dex-screen);
border: 10px solid #111716;
border-radius: 20px;
box-shadow: inset 0 0 28px rgba(0,0,0,.92), 0 0 0 2px #303735, 0 0 22px rgba(113,244,213,.18);
}

.unova-dex__screen::after {
content: "";
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
opacity: .18;
background: repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(157,255,232,.06) 4px);
}

.unova-dex__status {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
min-height: 28px;
padding: 0 2px 11px;
color: #bdfff0;
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
border-bottom: 1px solid var(--dex-mint-soft);
}

.unova-dex__status-right { color: #8cebd4; white-space: nowrap; }

.unova-dex__top-screen {
position: relative;
height: 300px;
margin-top: 14px;
overflow: hidden;
background-color: var(--dex-black);
border: 1px solid rgba(113,244,213,.15);
border-radius: 10px;
box-shadow: inset 0 0 34px #000;
}

.unova-dex__top-screen::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
background-image:
linear-gradient(var(--dex-mint-faint) 1px,transparent 1px),
linear-gradient(90deg,var(--dex-mint-faint) 1px,transparent 1px);
background-size: 28px 28px;
transition: opacity .35s ease;
}

.unova-dex.has-selection .unova-dex__top-screen::before { opacity: .48; }

.unova-dex__empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
transition: opacity .18s ease;
}

.unova-dex.has-selection .unova-dex__empty {
visibility: hidden;
opacity: 0;
}

.unova-dex__entry {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(190px,40%) minmax(0,1fr);
gap: 18px;
height: 100%;
padding: 15px;
visibility: hidden;
opacity: 0;
transform: translateY(5px);
transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.unova-dex.has-selection .unova-dex__entry {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

.unova-dex__portrait {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
overflow: hidden;
background: radial-gradient(circle,rgba(113,244,213,.2),transparent 63%);
border: 1px solid var(--dex-mint-soft);
border-radius: 9px;
}

.unova-dex__portrait::before {
content: "";
position: absolute;
width: 105px;
height: 105px;
opacity: .22;
border: 5px solid var(--dex-mint);
border-radius: 50%;
box-shadow: inset 0 0 0 22px var(--dex-screen), inset 0 0 0 27px var(--dex-mint);
}

.unova-dex__portrait-image {
position: relative;
z-index: 2;
display: block;
width: 94%;
height: 94%;
object-fit: contain;
filter: drop-shadow(0 12px 12px rgba(0,0,0,.7));
}

.unova-dex__info {
min-width: 0;
height: 100%;
padding: 4px 10px 15px 2px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--dex-mint) rgba(113,244,213,.08);
}

.unova-dex__info::-webkit-scrollbar { width: 6px; }
.unova-dex__info::-webkit-scrollbar-track { background: rgba(113,244,213,.08); }
.unova-dex__info::-webkit-scrollbar-thumb { background: var(--dex-mint); border-radius: 10px; }

.unova-dex__name-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 9px;
border-bottom: 1px solid var(--dex-mint-soft);
}

.unova-dex__name {
margin: 0;
color: #e7fff9;
font-size: 28px;
font-weight: 700;
letter-spacing: .04em;
}

.unova-dex__number { color: var(--dex-mint); font-size: 16px; font-weight: 700; }

.unova-dex__types { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 15px; }
.unova-dex__type {
display: inline-block;
padding: 4px 10px;
color: #03110e;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
background: var(--dex-mint);
border-radius: 4px;
}

.unova-dex__section-title {
margin: 17px 0 6px;
color: var(--dex-mint);
font-size: 12px;
letter-spacing: .11em;
text-transform: uppercase;
}

.unova-dex__description { margin: 0; color: #cce8e1; font-size: 14px; line-height: 1.52; }
.unova-dex__moves { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.unova-dex__move {
padding: 5px 8px;
color: #cffff3;
font-size: 12px;
background: rgba(113,244,213,.09);
border: 1px solid rgba(113,244,213,.25);
border-radius: 4px;
}

.unova-dex__hinge {
position: relative;
z-index: 4;
width: calc(100% - 60px);
height: 32px;
margin: -5px auto;
background: linear-gradient(#171b1b,#434848 46%,#090b0b 54%,#272c2c);
border: 2px solid #111;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,.75);
}

.unova-dex__hinge::after {
content: "";
position: absolute;
top: 12px;
left: 50%;
width: 58px;
height: 4px;
transform: translateX(-50%);
background: var(--dex-mint);
border-radius: 8px;
box-shadow: 0 0 8px var(--dex-mint);
}

.unova-dex__list-head {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: #cafff2;
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
border-bottom: 1px solid var(--dex-mint-soft);
}

.unova-dex__counter { color: #79cdb9; font-size: 12px; }

.unova-dex__list {
position: relative;
z-index: 2;
height: 328px;
margin-top: 10px;
padding: 0 5px 0 8px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--dex-mint) rgba(113,244,213,.08);
}

.unova-dex__list::-webkit-scrollbar { width: 6px; }
.unova-dex__list::-webkit-scrollbar-track { background: rgba(113,244,213,.07); }
.unova-dex__list::-webkit-scrollbar-thumb { background: var(--dex-mint); border-radius: 10px; }

.unova-dex__row {
position: relative;
display: grid;
grid-template-columns: 34px 56px 55px minmax(0,1fr) 24px;
align-items: center;
gap: 8px;
width: 100%;
min-height: 58px;
margin: 0 0 7px;
padding: 5px 13px 5px 9px;
color: #d8eee9;
font: inherit;
text-align: left;
background: linear-gradient(90deg,rgba(113,244,213,.04),rgba(113,244,213,.14));
border: 1px solid rgba(113,244,213,.38);
border-radius: 8px 20px 20px 8px;
cursor: pointer;
transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.unova-dex__row:hover,
.unova-dex__row.is-selected {
color: #fff;
background: linear-gradient(90deg,rgba(113,244,213,.16),rgba(113,244,213,.33));
border-color: var(--dex-mint);
transform: translateX(-3px);
}

.unova-dex__selector {
width: 16px;
height: 16px;
justify-self: center;
border: 2px solid var(--dex-mint);
border-radius: 50%;
box-shadow: inset 0 0 0 4px var(--dex-screen);
}

.unova-dex__row.is-selected .unova-dex__selector { background: var(--dex-mint); box-shadow: inset 0 0 0 4px #0b2922,0 0 9px var(--dex-mint); }
.unova-dex__thumb { display: block; width: 52px; height: 48px; object-fit: contain; }
.unova-dex__row-number { color: #7fcbbb; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.unova-dex__row-name { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.unova-dex__arrow { color: var(--dex-mint); font-size: 20px; text-align: right; }

.unova-dex__base::before {
content: "";
position: absolute;
right: -7%;
bottom: -90px;
left: -7%;
height: 145px;
background: linear-gradient(155deg,#d93443,#8d101f 50%,#d52639);
border-top: 7px solid #151919;
}

.unova-dex__orb {
position: relative;
z-index: 4;
width: 82px;
height: 82px;
margin: 13px auto -8px;
background: radial-gradient(circle at 38% 33%,#fff,#e2e5e3 45%,#777 67%,#111 69%);
border: 13px solid #111;
border-radius: 50%;
box-shadow: 0 0 0 2px #4a4a4a,0 0 15px rgba(113,244,213,.5),inset 0 0 8px var(--dex-mint);
}

@media (max-width:620px) {
.unova-dex__lid,
.unova-dex__base { padding: 13px; border-radius: 20px; }
.unova-dex__screen { padding: 12px; border-width: 7px; border-radius: 14px; }
.unova-dex__top-screen { height: 285px; }
.unova-dex__entry { grid-template-columns: 38% minmax(0,1fr); gap: 10px; padding: 9px; }
.unova-dex__name { font-size: 21px; }
.unova-dex__number { font-size: 13px; }
.unova-dex__description { font-size: 12px; }
.unova-dex__section-title { margin-top: 12px; }
.unova-dex__row { grid-template-columns: 25px 48px 48px minmax(0,1fr) 17px; gap: 5px; padding-right: 8px; }
.unova-dex__thumb { width: 46px; height: 43px; }
.unova-dex__row-name { font-size: 14px; }
}

@media (max-width:420px) {
.unova-dex__status { font-size: 10px; }
.unova-dex__status-right { display: none; }
.unova-dex__top-screen { height: 315px; }
.unova-dex__entry { grid-template-columns: 35% minmax(0,1fr); }
.unova-dex__portrait-image { width: 110%; height: 80%; }
.unova-dex__row { grid-template-columns: 22px 43px 42px minmax(0,1fr) 14px; }
}
</style>

<div class="unova-dex" data-pokedex-app>
<div class="unova-dex__lid">
<div class="unova-dex__screen">
<div class="unova-dex__status">
<span>▣ Unova Pokédex</span>
<span class="unova-dex__status-right">⌁ ONLINE 100% ▰</span>
</div>

<h4 class="unova-dex__section-title">Описание</h4>
<p class="unova-dex__description"></p>

<h4 class="unova-dex__section-title">Атаки</h4>
<ul class="unova-dex__moves"></ul>
</div>
</div>
</div>
</div>
</div>

<div class="unova-dex__base">
<div class="unova-dex__screen">
<div class="unova-dex__list-head">
<span>▤ Список покемонов</span>
<span class="unova-dex__counter">UNOVA DATABASE · 007</span>
</div>

<div class="unova-dex__list">

<button class="unova-dex__row" type="button"
data-name="Snivy" data-number="№ 495" data-types="Травяной"
data-image="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/495.png"
data-description="Спокойный и умный покемон, который сохраняет хладнокровие даже в опасной ситуации. Его хвост использует солнечный свет для фотосинтеза."
data-moves="Tackle|Leer|Vine Whip|Leaf Tornado">
<span class="unova-dex__selector"></span><img class="unova-dex__thumb" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/495.png" alt=""><span class="unova-dex__row-number">495</span><span class="unova-dex__row-name">Snivy</span><span class="unova-dex__arrow">›</span>
</button>

<button class="unova-dex__row" type="button"
data-name="Tepig" data-number="№ 498" data-types="Огненный"
data-image="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/498.png"
data-description="Проворный покемон, способный выпускать огненные шары из ноздрей. Перед атакой он разогревает пламя внутри своего тела."
data-moves="Tackle|Tail Whip|Ember|Flame Charge">
<span class="unova-dex__selector"></span><img class="unova-dex__thumb" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/498.png" alt=""><span class="unova-dex__row-number">498</span><span class="unova-dex__row-name">Tepig</span><span class="unova-dex__arrow">›</span>
</button>

<button class="unova-dex__row" type="button"
data-name="Oshawott" data-number="№ 501" data-types="Водный"
data-image="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/501.png"
data-description="Сражается при помощи раковины на животе. Он может мгновенно выхватить её и использовать как клинок или щит."
data-moves="Tackle|Tail Whip|Water Gun|Razor Shell">
<span class="unova-dex__selector"></span><img class="unova-dex__thumb" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/501.png" alt=""><span class="unova-dex__row-number">501</span><span class="unova-dex__row-name">Oshawott</span><span class="unova-dex__arrow">›</span>
</button>

<button class="unova-dex__row" type="button"
data-name="Zorua" data-number="№ 570" data-types="Тёмный"
data-image="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/570.png"
data-description="Застенчивый покемон-иллюзионист. Чтобы скрыть свою настоящую внешность и защититься от опасности, он принимает облик людей и других покемонов."
data-moves="Scratch|Leer|Pursuit|Fury Swipes">
<span class="unova-dex__selector"></span><img class="unova-dex__thumb" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/570.png" alt=""><span class="unova-dex__row-number">570</span><span class="unova-dex__row-name">Zorua</span><span class="unova-dex__arrow">›</span>
</button>

<button class="unova-dex__row" type="button"
data-name="Emolga" data-number="№ 587" data-types="Электрический|Летающий"
data-image="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/587.png"
data-description="Накапливает электричество в защёчных мешках и планирует между деревьями на перепонках. Во время полёта разбрасывает электрические разряды."
data-moves="Thunder Shock|Quick Attack|Spark|Electro Ball">
<span class="unova-dex__selector"></span><img class="unova-dex__thumb" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/587.png" alt=""><span class="unova-dex__row-number">587</span><span class="unova-dex__row-name">Emolga</span><span class="unova-dex__arrow">›</span>
</button>

<button class="unova-dex__row" type="button"
data-name="Volcarona" data-number="№ 637" data-types="Насекомый|Огненный"
data-image="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/637.png"
data-description="Рассыпает обжигающие чешуйки из шести крыльев, превращая воздух вокруг в море огня. В древних легендах её называли воплощением солнца."
data-moves="Gust|Fire Spin|Bug Buzz|Fiery Dance">
<span class="unova-dex__selector"></span><img class="unova-dex__thumb" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/637.png" alt=""><span class="unova-dex__row-number">637</span><span class="unova-dex__row-name">Volcarona</span><span class="unova-dex__arrow">›</span>
</button>
</div>
</div>

<div class="unova-dex__orb" aria-hidden="true"></div>
</div>
</div>
[/html]

pokemon en·core

Меню навигации

Пользовательские ссылки

Информация о пользователе

Покедекс

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

Поделиться12026-08-28 17:34:32