тест
Автопланер
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться32025-12-23 16:03:30
[html]
<!-- =========================================================
HSR CHARLIST BLOCK
Суффикс lamia в id/name — чтобы несколько блоков не конфликтовали.
========================================================= -->
<link rel="stylesheet" href="https://forumstatic.ru/files/0014/98/d3/60489.css?v=99">
<div class="hsrcl" style="--portrait:url('https://upforme.ru/uploads/001c/60/8c/96/685004.webp');">
<div class="top">
<div class="card passport">
<div class="nameRow">
<div class="name">Ламия Мормолекия</div>
<div class="alias">последняя Ламия из Айдонии</div>
</div>
<div class="sigils">
<div class="sigil">
<span class="sigilIcon" style="--ico:url('https://upforme.ru/uploads/001c/60/8c/96/521963.webp');"></span>
<span class="sigilText">
<span class="sigilKey">Путь</span>
<span class="sigilVal">Равновесие</span>
</span>
</div>
<div class="sigil">
<span class="sigilIcon" style="--ico:url('https://upforme.ru/uploads/001c/60/8c/96/658415.webp');"></span>
<span class="sigilText">
<span class="sigilKey">Тип урона</span>
<span class="sigilVal">Физический</span>
</span>
</div>
</div>
<div class="facts">
<div class="kv"><div class="k">Фракция</div><div class="v">Златиусы</div></div>
<div class="kv"><div class="k">Возраст</div><div class="v">~25-30 на вид</div></div>
<div class="kv"><div class="k">Род занятий</div><div class="v">жрица, гаруспик</div></div>
<div class="kv"><div class="k">Планета</div><div class="v">Амфореус</div></div>
</div>
<div class="activityLine">
<div class="activityKey">Активность</div>
<div class="activityTags">
<span class="state state--ok">Играет</span>
<span class="state state--ok">Ищет новый эпизод</span>
<span class="state state--warn">Средний темп</span>
<span class="state" style="--state: 120,92,128;">Открыта к AU</span>
</div>
</div>
</div>
<div class="card portrait"></div>
</div>
<div class="tabs">
<input type="radio" name="tab_lamia" id="t_profile_lamia" checked>
<input type="radio" name="tab_lamia" id="t_story_lamia">
<input type="radio" name="tab_lamia" id="t_eido_lamia">
<input type="radio" name="tab_lamia" id="t_skills_lamia">
<input type="radio" name="tab_lamia" id="t_links_lamia">
<input type="radio" name="tab_lamia" id="t_quotes_lamia">
<input type="radio" name="tab_lamia" id="t_gallery_lamia">
<div class="tabbar">
<label for="t_profile_lamia">Досье</label>
<label for="t_story_lamia">История</label>
<label for="t_eido_lamia">Эйдолоны</label>
<label for="t_skills_lamia">Способности</label>
<label for="t_links_lamia">Связи</label>
<label for="t_quotes_lamia">Цитаты</label>
<label for="t_gallery_lamia">Галерея</label>
</div>
<div class="pane profile">
<div class="h"><div class="ttl">Досье</div><div class="sub"></div></div>
<div class="grid2">
<div class="box">
<div class="k">Факты</div>
<div class="scroll">
<ul class="factsList">
<li>Факт без выделений — просто строка.</li>
<li>Можно много пунктов — появится прокрутка.</li>
<li>Ещё один пункт.</li>
</ul>
</div>
</div>
<div class="box">
<div class="k">Инвентарь</div>
<div class="scroll">
<div class="invList">
<div class="invItem r5">
<img class="invIco" src="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" alt="">
<div class="invText">
<div class="invName">Название предмета</div>
<div class="invNote">краткое пояснение (опционально)</div>
</div>
</div>
<div class="invItem r4">
<img class="invIco" src="https://via.placeholder.com/96.png?text=ITEM" alt="">
<div class="invText">
<div class="invName">Ещё предмет</div>
<div class="invNote">опционально</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pane story">
<div class="h"><div class="ttl">История</div><div class="sub"></div></div>
<div class="storyWrap">
<input type="radio" name="story_lamia" id="s1_lamia" checked>
<input type="radio" name="story_lamia" id="s2_lamia" >
<input type="radio" name="story_lamia" id="s3_lamia" >
<input type="radio" name="story_lamia" id="s4_lamia" >
<input type="radio" name="story_lamia" id="s5_lamia" >
<input type="radio" name="story_lamia" id="s6_lamia" >
<div class="storyLayout">
<div class="storyNav">
<div class="cap"><b>Архив</b><span></span></div>
<label class="storyItem" for="s1_lamia">
<span class="left"><span class="roman">I</span><span class="stTitle">Пролог</span></span>
<span class="stHint">…</span>
</label>
<label class="storyItem" for="s2_lamia">
<span class="left"><span class="roman">II</span><span class="stTitle">Событие</span></span>
<span class="stHint">…</span>
</label>
<label class="storyItem" for="s3_lamia">
<span class="left"><span class="roman">III</span><span class="stTitle">Связь</span></span>
<span class="stHint">…</span>
</label>
<label class="storyItem" for="s4_lamia">
<span class="left"><span class="roman">IV</span><span class="stTitle">Конфликт</span></span>
<span class="stHint">…</span>
</label>
<label class="storyItem locked" for="s5_lamia">
<span class="left"><span class="roman">V</span><span class="stTitle">Цена</span></span>
<span class="lock" title="закрыто"></span>
</label>
<label class="storyItem locked" for="s6_lamia">
<span class="left"><span class="roman">VI</span><span class="stTitle">Истина</span></span>
<span class="lock" title="закрыто"></span>
</label>
</div>
<div class="storyPages">
<div class="storyPage p1">
<div class="storyHead">
<div class="t1">История I</div>
<div class="t2"></div>
</div>
<div class="storyText">Текст главы.<br>Можно с переносами строк.</div>
</div>
<div class="storyPage p2">
<div class="storyHead">
<div class="t1">История II</div>
<div class="t2"></div>
</div>
<div class="storyText">Текст главы.</div>
</div>
<div class="storyPage p3">
<div class="storyHead">
<div class="t1">История III</div>
<div class="t2"></div>
</div>
<div class="storyText">Текст главы.</div>
</div>
<div class="storyPage p4">
<div class="storyHead">
<div class="t1">История IV</div>
<div class="t2"></div>
</div>
<div class="storyText">Текст главы.</div>
</div>
<div class="storyPage p5">
<div class="storyHead">
<div class="t1">История V</div>
<div class="t2"></div>
</div>
<div class="storyText">Текст главы.</div>
</div>
<div class="storyPage p6">
<div class="storyHead">
<div class="t1">История VI</div>
<div class="t2"></div>
</div>
<div class="storyText">Текст главы.</div>
</div>
</div>
</div>
</div>
</div>
<div class="pane eido">
<div class="h"><div class="ttl">Эйдолоны</div><div class="sub"></div></div>
<div class="eidoWrap">
<input type="radio" name="e_lamia" id="e1_lamia" checked>
<input type="radio" name="e_lamia" id="e2_lamia" >
<input type="radio" name="e_lamia" id="e3_lamia" >
<input type="radio" name="e_lamia" id="e4_lamia" >
<input type="radio" name="e_lamia" id="e5_lamia" >
<input type="radio" name="e_lamia" id="e6_lamia" >
<div class="shards">
<label class="shardBtn" for="e1_lamia">
<div class="shardTop">
<div class="badge">1</div>
<div class="mini"></div>
</div>
<svg class="shardSvg" viewBox="0 0 200 200" aria-hidden="true">
<defs>
<clipPath id="hsrcl_lamia_clip1">
<polygon points="22,36 86,18 128,36 176,56 162,112 122,174 58,186 26,150 18,92" />
</clipPath>
</defs>
<image href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" xlink:href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" x="-10" y="-10" width="240" height="240"
preserveAspectRatio="xMidYMid slice" clip-path="url(#hsrcl_lamia_clip1)" />
<polygon points="22,36 86,18 128,36 176,56 162,112 122,174 58,186 26,150 18,92" fill="rgba(255,255,255,.06)" />
<path d="M30 60 L150 30" stroke="rgba(255,255,255,.18)" stroke-width="2" opacity=".35" />
<path d="M26 120 L160 80" stroke="rgba(255,255,255,.14)" stroke-width="2" opacity=".28" />
<polygon points="22,36 86,18 128,36 176,56 162,112 122,174 58,186 26,150 18,92" fill="none" stroke="rgba(24,32,56,.70)" stroke-width="2" />
</svg>
</label>
<label class="shardBtn" for="e2_lamia">
<div class="shardTop">
<div class="badge">2</div>
<div class="mini"></div>
</div>
<svg class="shardSvg" viewBox="0 0 200 200" aria-hidden="true">
<defs>
<clipPath id="hsrcl_lamia_clip2">
<polygon points="38,22 118,22 178,64 154,136 112,182 48,164 22,92" />
</clipPath>
</defs>
<image href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" xlink:href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" x="-30" y="-10" width="260" height="240"
preserveAspectRatio="xMidYMid slice" clip-path="url(#hsrcl_lamia_clip2)" />
<polygon points="38,22 118,22 178,64 154,136 112,182 48,164 22,92" fill="rgba(255,255,255,.06)" />
<path d="M34 70 L170 40" stroke="rgba(255,255,255,.18)" stroke-width="2" opacity=".35" />
<polygon points="38,22 118,22 178,64 154,136 112,182 48,164 22,92" fill="none" stroke="rgba(24,32,56,.70)" stroke-width="2" />
</svg>
</label>
<label class="shardBtn" for="e3_lamia">
<div class="shardTop">
<div class="badge">3</div>
<div class="mini"></div>
</div>
<svg class="shardSvg" viewBox="0 0 200 200" aria-hidden="true">
<defs>
<clipPath id="hsrcl_lamia_clip3">
<polygon points="26,54 70,22 150,34 186,98 148,174 78,186 24,132" />
</clipPath>
</defs>
<image href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" xlink:href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" x="-10" y="-40" width="240" height="280"
preserveAspectRatio="xMidYMid slice" clip-path="url(#hsrcl_lamia_clip3)" />
<polygon points="26,54 70,22 150,34 186,98 148,174 78,186 24,132" fill="rgba(255,255,255,.06)" />
<path d="M26 90 L170 60" stroke="rgba(255,255,255,.18)" stroke-width="2" opacity=".35" />
<polygon points="26,54 70,22 150,34 186,98 148,174 78,186 24,132" fill="none" stroke="rgba(24,32,56,.70)" stroke-width="2" />
</svg>
</label>
<label class="shardBtn" for="e4_lamia">
<div class="shardTop">
<div class="badge">4</div>
<div class="mini"></div>
</div>
<svg class="shardSvg" viewBox="0 0 200 200" aria-hidden="true">
<defs>
<clipPath id="hsrcl_lamia_clip4">
<polygon points="52,18 168,46 186,110 140,184 56,178 18,112 26,52" />
</clipPath>
</defs>
<image href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" xlink:href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" x="-40" y="-10" width="290" height="240"
preserveAspectRatio="xMidYMid slice" clip-path="url(#hsrcl_lamia_clip4)" />
<polygon points="52,18 168,46 186,110 140,184 56,178 18,112 26,52" fill="rgba(255,255,255,.06)" />
<path d="M40 70 L180 50" stroke="rgba(255,255,255,.18)" stroke-width="2" opacity=".35" />
<polygon points="52,18 168,46 186,110 140,184 56,178 18,112 26,52" fill="none" stroke="rgba(24,32,56,.70)" stroke-width="2" />
</svg>
</label>
<label class="shardBtn" for="e5_lamia">
<div class="shardTop">
<div class="badge">5</div>
<div class="mini"></div>
</div>
<svg class="shardSvg" viewBox="0 0 200 200" aria-hidden="true">
<defs>
<clipPath id="hsrcl_lamia_clip5">
<polygon points="18,64 60,20 132,18 182,64 174,152 112,186 42,158" />
</clipPath>
</defs>
<image href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" xlink:href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" x="-10" y="-20" width="240" height="260"
preserveAspectRatio="xMidYMid slice" clip-path="url(#hsrcl_lamia_clip5)" />
<polygon points="18,64 60,20 132,18 182,64 174,152 112,186 42,158" fill="rgba(255,255,255,.06)" />
<path d="M22 86 L176 56" stroke="rgba(255,255,255,.18)" stroke-width="2" opacity=".35" />
<polygon points="18,64 60,20 132,18 182,64 174,152 112,186 42,158" fill="none" stroke="rgba(24,32,56,.70)" stroke-width="2" />
</svg>
</label>
<label class="shardBtn" for="e6_lamia">
<div class="shardTop">
<div class="badge">6</div>
<div class="mini"></div>
</div>
<svg class="shardSvg" viewBox="0 0 200 200" aria-hidden="true">
<defs>
<clipPath id="hsrcl_lamia_clip6">
<polygon points="40,22 154,34 188,88 160,172 78,188 20,136 18,64" />
</clipPath>
</defs>
<image href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" xlink:href="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" x="-30" y="-40" width="280" height="280"
preserveAspectRatio="xMidYMid slice" clip-path="url(#hsrcl_lamia_clip6)" />
<polygon points="40,22 154,34 188,88 160,172 78,188 20,136 18,64" fill="rgba(255,255,255,.06)" />
<path d="M30 78 L186 56" stroke="rgba(255,255,255,.18)" stroke-width="2" opacity=".35" />
<polygon points="40,22 154,34 188,88 160,172 78,188 20,136 18,64" fill="none" stroke="rgba(24,32,56,.70)" stroke-width="2" />
</svg>
</label>
</div>
<div class="eidoPanels">
<div class="eidoPanel p1">
<div class="titleLine">
<div class="t1">E1</div>
<div class="t2"></div>
</div>
<div class="text">Текст.<br>Можно с переносами.</div>
</div>
<div class="eidoPanel p2">
<div class="titleLine">
<div class="t1">E2</div>
<div class="t2"></div>
</div>
<div class="text">Текст.</div>
</div>
<div class="eidoPanel p3">
<div class="titleLine">
<div class="t1">E3</div>
<div class="t2"></div>
</div>
<div class="text">Текст.</div>
</div>
<div class="eidoPanel p4">
<div class="titleLine">
<div class="t1">E4</div>
<div class="t2"></div>
</div>
<div class="text">Текст.</div>
</div>
<div class="eidoPanel p5">
<div class="titleLine">
<div class="t1">E5</div>
<div class="t2"></div>
</div>
<div class="text">Текст.</div>
</div>
<div class="eidoPanel p6">
<div class="titleLine">
<div class="t1">E6</div>
<div class="t2"></div>
</div>
<div class="text">Текст.</div>
</div>
</div>
</div>
</div>
<div class="pane skills">
<div class="h"><div class="ttl">Способности</div><div class="sub"></div></div>
<details class="skill" open>
<summary>
<div class="skName">Авторское название атаки</div>
<div class="skType">Обычная атака</div>
</summary>
<div class="skBody">Описание.<br>Можно с переносами.</div>
</details>
<details class="skill">
<summary>
<div class="skName">Авторское название навыка</div>
<div class="skType">Навык</div>
</summary>
<div class="skBody">Описание.</div>
</details>
<details class="skill">
<summary>
<div class="skName">Авторское название ульты</div>
<div class="skType">Сверхспособность</div>
</summary>
<div class="skBody">Описание.</div>
</details>
<details class="skill">
<summary>
<div class="skName">Авторское название таланта</div>
<div class="skType">Талант</div>
</summary>
<div class="skBody">Описание.</div>
</details>
<details class="skill">
<summary>
<div class="skName">Авторское название техники</div>
<div class="skType">Техника</div>
</summary>
<div class="skBody">Описание.</div>
</details>
</div>
<div class="pane links">
<div class="h"><div class="ttl">Связи</div><div class="sub"></div></div>
<div class="rel">
<div class="relCard">
<div class="who"><b>Имя</b><span>…</span></div>
<div class="note">…<br>Можно с переносами.</div>
</div>
<div class="relCard">
<div class="who"><b>Имя</b><span>…</span></div>
<div class="note">…</div>
</div>
<div class="relCard">
<div class="who"><b>Фракция</b><span>…</span></div>
<div class="note">…</div>
</div>
<div class="relCard">
<div class="who"><b>Кто-то</b><span>…</span></div>
<div class="note">…</div>
</div>
</div>
</div>
<div class="pane quotes">
<div class="h"><div class="ttl">Цитаты</div><div class="sub"></div></div>
<div class="quote">
<div class="q">«Первая цитата.»<br>(с переносами)</div>
<div class="by">— персонаж</div>
</div>
<div class="quote">
<div class="q">«Вторая цитата.»</div>
<div class="by">— источник</div>
</div>
</div>
<div class="pane gallery">
<div class="h"><div class="ttl">Галерея</div><div class="sub"></div></div>
<span id="close_lamia"></span>
<div class="gal">
<a class="shot" href="#lamia_img1">
<img class="thumb" src="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" alt="">
<div class="cap">Подпись</div>
</a>
<a class="shot" href="#lamia_img2">
<img class="thumb" src="https://via.placeholder.com/1400x900.png?text=IMG2" alt="">
<div class="cap">Подпись</div>
</a>
<a class="shot" href="#lamia_img3">
<img class="thumb" src="https://via.placeholder.com/900x1400.png?text=IMG3" alt="">
<div class="cap">Подпись</div>
</a>
<a class="shot" href="#lamia_img4">
<img class="thumb" src="https://via.placeholder.com/1600x1000.png?text=IMG4" alt="">
<div class="cap">Подпись</div>
</a>
</div>
<div id="lamia_img1" class="modal">
<a class="modal__overlay" href="#close_lamia" aria-label="Закрыть"></a>
<div class="modal__box">
<img class="modal__img" src="https://upforme.ru/uploads/001c/60/8c/96/909118.jpg" alt="">
<div class="modal__bar"><span>Подпись</span></div>
</div>
</div>
<div id="lamia_img2" class="modal">
<a class="modal__overlay" href="#close_lamia" aria-label="Закрыть"></a>
<div class="modal__box">
<img class="modal__img" src="https://via.placeholder.com/1400x900.png?text=IMG2" alt="">
<div class="modal__bar"><span>Подпись</span></div>
</div>
</div>
<div id="lamia_img3" class="modal">
<a class="modal__overlay" href="#close_lamia" aria-label="Закрыть"></a>
<div class="modal__box">
<img class="modal__img" src="https://via.placeholder.com/900x1400.png?text=IMG3" alt="">
<div class="modal__bar"><span>Подпись</span></div>
</div>
</div>
<div id="lamia_img4" class="modal">
<a class="modal__overlay" href="#close_lamia" aria-label="Закрыть"></a>
<div class="modal__box">
<img class="modal__img" src="https://via.placeholder.com/1600x1000.png?text=IMG4" alt="">
<div class="modal__bar"><span>Подпись</span></div>
</div>
</div>
</div>
</div>
</div>
[/html]
Страница: 1
