Таблица-визитка игрока

[hideprofile]Таблица-визитка игрока

[indent] Заполните эту таблицу, чтобы ваши потенциальные партнеры могли понимать, что вы любите, а что вам не нравится в игре. Тема поможет вам не только лучше разобраться в себе, но и понять ваши предпочтения другими игрокам. Вопросы можно корректировать, а также пропускать.

[hideprofile]

[html]
<div class="player-editor">

<div class="player-editor__top">
<button class="player-editor__toggle" id="themeToggle"> Тёмная тема</button>
</div>

<div class="player-editor__form">
<h2 class="player-editor__title">Заполнение</h2>

<div class="player-editor__field">
<label>Никнейм</label>
<input type="text" id="f_name" value="AvaLone">
</div>

<div class="player-editor__field">
<label>Ссылка на профиль</label>
<input type="text" id="f_link" value="https://example.com">
</div>

<div class="player-editor__field">
<label>Ссылка на аватар</label>
<input type="text" id="f_avatar" value="https://placehold.co/220x180">
</div>

<div class="player-editor__field">
<label>Цитата / статус</label>
<textarea id="f_status">«Пишу ради красивых историй, а не ради скорости.»</textarea>
</div>

<div class="player-editor__section">Мини-статистика</div>

<div class="player-editor__field">
<label>Блок 1 — заголовок</label>
<input type="text" id="f_m1_label" value="Посты">
</div>
<div class="player-editor__field">
<label>Блок 1 — значение</label>
<input type="text" id="f_m1_value" value="3–8 тыс. символов">
</div>

<div class="player-editor__field">
<label>Блок 2 — заголовок</label>
<input type="text" id="f_m2_label" value="Темп">
</div>
<div class="player-editor__field">
<label>Блок 2 — значение</label>
<input type="text" id="f_m2_value" value="1–3 дня">
</div>

<div class="player-editor__field">
<label>Блок 3 — заголовок</label>
<input type="text" id="f_m3_label" value="Связь">
</div>
<div class="player-editor__field">
<label>Блок 3 — значение</label>
<input type="text" id="f_m3_value" value="ЛС / ВК">
</div>

<div class="player-editor__section">Заголовки таблицы</div>

<div class="player-editor__field">
<label>Главный заголовок</label>
<input type="text" id="f_title" value="Визитная карточка игрока">
</div>

<div class="player-editor__field">
<label>Подзаголовок</label>
<textarea id="f_subtitle">«Несколько слов о том, как со мной комфортнее играть»</textarea>
</div>

<div class="player-editor__section">Таблица — строки</div>
<div id="rowsContainer"></div>

<div class="player-editor__btn-row">
<button class="player-editor__btn player-editor__btn--primary" id="copyBtn">Скопировать код</button>
</div>
</div>

<div class="player-editor__preview">
<div class="player-editor__label">Предпросмотр</div>
<div id="preview"></div>
</div>

</div>

.player-editor {
--pc-bg: #faf6ef;
--pc-bg-glow-1: rgba(170, 140, 105, 0.06);
--pc-bg-glow-2: rgba(170, 140, 105, 0.05);

--pc-text: #4b4037;
--pc-text-name: #382a21;
--pc-text-name-hover: #98785b;
--pc-text-status: #66564a;
--pc-text-mini: #594a3e;
--pc-text-mini-label: #967b61;
--pc-text-title: #49372c;
--pc-text-subtitle: #806d5d;

--pc-border: #cdbda9;
--pc-border-inner: #ded1c1;
--pc-border-header: #d8cabb;
--pc-border-avatar: #bba58e;
--pc-border-mini: #d3c3b2;
--pc-border-table: #cdbba7;
--pc-border-cell: #d8cabb;
--pc-border-mini-mobile: #ded1c2;

--pc-avatar-bg: #f7f1e8;
--pc-table-bg: rgba(255, 252, 247, 0.65);
--pc-thead-bg: #eee4d7;
--pc-thead-text: #594536;
--pc-cell1-bg: rgba(239, 229, 216, 0.55);
--pc-cell1-text: #574438;
--pc-cell2-bg: rgba(255, 252, 247, 0.75);
--pc-cell2-alt-bg: rgba(250, 245, 237, 0.85);
--pc-row-hover: #f4ece1;

--pc-diamond: #ad9174;
--pc-star: #a98a6b;

--pc-toggle-bg: #eee4d7;
--pc-toggle-border: #cdbda9;
--pc-toggle-text: #594536;
--pc-toggle-hover: #e3d6c4;

font-family: Georgia, "Times New Roman", serif;
color: var(--pc-text);

width: 100%;
max-width: 1000px;
margin: 0 auto;
box-sizing: border-box;
}

.player-editor *,
.player-editor *::before,
.player-editor *::after {
box-sizing: border-box;
}

/* Тёмная тема */

html[data-theme="dark"] .player-editor {
--pc-bg: #2a231d;
--pc-bg-glow-1: rgba(200, 170, 130, 0.05);
--pc-bg-glow-2: rgba(200, 170, 130, 0.04);

--pc-text: #d8cdbf;
--pc-text-name: #f0e6d8;
--pc-text-name-hover: #c9a87c;
--pc-text-status: #b8a894;
--pc-text-mini: #c5b6a4;
--pc-text-mini-label: #a08b70;
--pc-text-title: #e8dccb;
--pc-text-subtitle: #b0a08c;

--pc-border: #4a3d30;
--pc-border-inner: #3e3328;
--pc-border-header: #4a3d30;
--pc-border-avatar: #5a4a38;
--pc-border-mini: #4a3d30;
--pc-border-table: #4a3d30;
--pc-border-cell: #3e3328;
--pc-border-mini-mobile: #3e3328;

--pc-avatar-bg: #332b23;
--pc-table-bg: rgba(45, 38, 30, 0.65);
--pc-thead-bg: #3a3128;
--pc-thead-text: #d8cdbf;
--pc-cell1-bg: rgba(58, 49, 40, 0.55);
--pc-cell1-text: #d8cdbf;
--pc-cell2-bg: rgba(45, 38, 30, 0.75);
--pc-cell2-alt-bg: rgba(50, 42, 34, 0.85);
--pc-row-hover: #3e342a;

--pc-diamond: #a08b70;
--pc-star: #a08b70;

--pc-toggle-bg: #3a3128;
--pc-toggle-border: #5a4a38;
--pc-toggle-text: #d8cdbf;
--pc-toggle-hover: #4a3d30;
}

/* =========================================================
ТУМБЛЕР
========================================================= */

.player-editor__top {
text-align: right;
margin-bottom: 12px;
}

.player-editor__toggle {
padding: 9px 16px;
background: var(--pc-toggle-bg);
color: var(--pc-toggle-text);
border: 1px solid var(--pc-toggle-border);
border-radius: 4px;
font-family: Georgia, serif;
font-size: 13px;
cursor: pointer;
transition: background .2s ease;
}

.player-editor__toggle:hover {
background: var(--pc-toggle-hover);
}

/* =========================================================
ФОРМА
========================================================= */

.player-editor__form {
background: var(--pc-bg);
border: 1px solid var(--pc-border);
padding: 20px 22px 24px;
margin-bottom: 24px;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}

.player-editor__title {
margin: 0 0 18px;
font-size: 20px;
color: var(--pc-text-title);
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid var(--pc-border-header);
padding-bottom: 12px;
}

.player-editor__field {
margin-bottom: 14px;
}

.player-editor__field label {
display: block;
margin-bottom: 5px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--pc-text-mini-label);
}

.player-editor__field input,
.player-editor__field textarea {
display: block;
width: 100%;
max-width: 100%;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--pc-border-cell);
color: var(--pc-text);
font-family: Georgia, serif;
font-size: 14px;
line-height: 1.4;
resize: vertical;
transition: border-color .2s ease, background .2s ease;
}

html[data-theme="dark"] .player-editor__field input,
html[data-theme="dark"] .player-editor__field textarea {
background: rgba(0, 0, 0, 0.2);
}

.player-editor__field input:focus,
.player-editor__field textarea:focus {
outline: none;
border-color: var(--pc-star);
}

.player-editor__field textarea {
min-height: 60px;
}

.player-editor__section {
margin: 22px 0 12px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--pc-border-cell);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--pc-text-mini-label);
}

.player-editor__btn-row {
display: flex;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
}

.player-editor__btn {
flex: 1;
min-width: 140px;
padding: 11px 18px;
border: 1px solid var(--pc-border);
background: var(--pc-thead-bg);
color: var(--pc-thead-text);
font-family: Georgia, serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
transition: background .2s ease, color .2s ease;
}

.player-editor__btn:hover {
background: var(--pc-row-hover);
}

.player-editor__btn--primary {
background: var(--pc-text-name);
color: var(--pc-bg);
border-color: var(--pc-text-name);
}

.player-editor__btn--primary:hover {
background: var(--pc-text-name-hover);
border-color: var(--pc-text-name-hover);
}

.player-editor__btn.copied {
background: #6b8e5a;
border-color: #6b8e5a;
color: #fff;
}

/* =========================================================
ПРЕВЬЮ
========================================================= */

.player-editor__preview {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}

.player-editor__label {
margin-bottom: 10px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--pc-text-mini-label);
}

/* =========================================================
ВИЗИТНАЯ КАРТОЧКА
========================================================= */

.player-card {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 28px 32px 34px;
background:
radial-gradient(circle at 90% 5%, var(--pc-bg-glow-1), transparent 180px),
radial-gradient(circle at 5% 95%, var(--pc-bg-glow-2), transparent 180px),
var(--pc-bg);
color: var(--pc-text);
font-family: Georgia, "Times New Roman", serif;
border: 1px solid var(--pc-border);
position: relative;
box-sizing: border-box;
overflow-x: hidden;
}

.player-card:before {
content: "";
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 1px solid var(--pc-border-inner);
pointer-events: none;
}

.player-header {
display: flex;
align-items: center;
gap: 42px;
padding: 5px 10px 25px;
border-bottom: 1px solid var(--pc-border-header);
}

.player-avatar {
width: 270px;
height: 220px;
max-width: 100%;
flex-shrink: 0;
overflow: hidden;
border: 1px solid var(--pc-border-avatar);
padding: 5px;
background: var(--pc-avatar-bg);
}

.player-avatar img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

.player-info {
flex: 1;
min-width: 0;
}

.player-name {
margin-bottom: 12px;
font-size: 48px;
line-height: 1;
color: var(--pc-text-name);
letter-spacing: -1px;
}

.player-name a {
color: var(--pc-text-name);
text-decoration: none;
transition: color .2s ease;
}

.player-name a:hover {
color: var(--pc-text-name-hover);
}

.player-status {
max-width: 520px;
margin-bottom: 25px;
font-size: 19px;
line-height: 1.5;
font-style: italic;
color: var(--pc-text-status);
}

.player-status:after {
content: "";
display: block;
width: 7px;
height: 7px;
margin: 18px auto 0;
background: var(--pc-diamond);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.player-mini {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 8px;
}

.player-mini > div {
min-height: 60px;
padding: 0 20px;
border-left: 1px solid var(--pc-border-mini);
font-size: 15px;
line-height: 1.5;
color: var(--pc-text-mini);
}

.player-mini > div:first-child {
border-left: none;
padding-left: 0;
}

.player-mini span {
display: block;
margin-bottom: 4px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--pc-text-mini-label);
}

.player-card-title {
margin-top: 32px;
text-align: center;
font-size: 31px;
line-height: 1.2;
color: var(--pc-text-title);
text-transform: uppercase;
letter-spacing: 2px;
}

.player-card-title:before,
.player-card-title:after {
content: "";
display: inline-block;
width: 11px;
height: 11px;
margin: 0 18px;
background: var(--pc-star);
clip-path: polygon(
50% 0%, 62% 38%, 100% 50%, 62% 62%,
50% 100%, 38% 62%, 0% 50%, 38% 38%
);
vertical-align: middle;
}

.player-card-subtitle {
margin: 12px auto 25px;
text-align: center;
font-size: 16px;
font-style: italic;
color: var(--pc-text-subtitle);
}

.player-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: var(--pc-table-bg);
border: 1px solid var(--pc-border-table);
word-break: break-word;
}

.player-table td {
padding: 15px 18px;
border: 1px solid var(--pc-border-cell);
vertical-align: middle;
font-size: 15px;
line-height: 1.55;
color: var(--pc-text);
}

.player-table tr:first-child td {
padding: 13px 18px;
background: var(--pc-thead-bg);
color: var(--pc-thead-text);
font-size: 13px;
text-align: center;
text-transform: uppercase;
letter-spacing: 4px;
}

.player-table td:first-child {
width: 31%;
background: var(--pc-cell1-bg);
color: var(--pc-cell1-text);
font-size: 15px;
font-weight: normal;
}

.player-table td:nth-child(2) {
width: 69%;
background: var(--pc-cell2-bg);
}

.player-table tr:nth-child(even):not(:first-child) td:nth-child(2) {
background: var(--pc-cell2-alt-bg);
}

.player-table tr:not(:first-child) {
transition: background .2s ease;
}

.player-table tr:not(:first-child):hover td {
background: var(--pc-row-hover);
}

/* =========================================================
АДАПТАЦИЯ
========================================================= */

@media (max-width: 760px) {
.player-card {
padding: 20px 15px 25px;
}

.player-header {
flex-direction: column;
gap: 22px;
text-align: center;
}

.player-avatar {
width: 100%;
max-width: 300px;
height: 230px;
}

.player-name {
font-size: 38px;
}

.player-status {
margin-left: auto;
margin-right: auto;
}

.player-mini {
grid-template-columns: 1fr;
gap: 12px;
text-align: left;
}

.player-mini > div,
.player-mini > div:first-child {
padding: 8px 0;
border-left: none;
border-bottom: 1px solid var(--pc-border-mini-mobile);
}

.player-mini > div:last-child {
border-bottom: none;
}

.player-card-title {
font-size: 24px;
}

.player-card-title:before,
.player-card-title:after {
margin: 0 8px;
}

.player-table {
table-layout: auto;
}

.player-table td {
padding: 12px 10px;
font-size: 13px;
}

.player-table td:first-child {
width: 35%;
}

.player-table td:nth-child(2) {
width: 65%;
}

.player-table tr:first-child td {
font-size: 11px;
letter-spacing: 2px;
}
}

@media (max-width: 480px) {
.player-card {
border-left: none;
border-right: none;
}

.player-card-title {
font-size: 21px;
letter-spacing: 1px;
}

.player-card-title:before,
.player-card-title:after {
display: none;
}

.player-table,
.player-table tbody,
.player-table tr,
.player-table td {
display: block;
width: 100% !important;
}

.player-table tr:first-child {
display: none;
}

.player-table td:first-child {
padding-bottom: 6px;
background: var(--pc-thead-bg);
border-bottom: none;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}

.player-table td:nth-child(2) {
padding-top: 8px;
border-top: none;
}
}</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0011/93/3d/67203.js?v=2"></script>[/html]

[hideprofile][html]<div class="player-card">

<div class="player-name">
<a href="https://lepidus.ru/profile.php?id=1357">Земислав Красный Волк</a>
</div>

<div class="player-status">
«Пишу просто потому, что я пишу»
</div>

<div>
<span>Посты</span>
2–5 тыс. символов
</div>

<div>
<span>Темп</span>
раз в неделю, могу в спидпост, если есть свободное время.
</div>

<div>
<span>Связь</span>
ЛС
</div>

</div>

<div class="player-card-title">
Визитная карточка игрока
</div>

<div class="player-card-subtitle">
«Несколько слов о том, как со мной комфортнее играть»
</div>

<tr>
<td>Вопрос</td>
<td>Ответ</td>
</tr>

<tr>
<td>Активный/смешанный мастеринг</td>
<td>Зависит от отыгрываемого сюжета. Если он личный, то предпочту без вмешательства ГМ, всё остальное - активный и смешанный мастеринг. </td>
</tr>
<tr>
<td>Предпочтения в сюжете</td>
<td>Боевые действия, расследования, личная драма со стеклом. Персонаж Земислав - авторская смесь из прототипов Дилюка Рагнвиндра и Баркаса Сиекана. Так что основные направления - противостояния, вопросы вечного "как сохранить честь, когда везде одна грязь", защита невинных и борьба за добрые идеалы, даже если ты один против всего мира. Столкновение веры и язычества. </td>
</tr>
<tr>
<td>Режим «Хатико»</td>
<td>Месяц. Свыше уже не жду, если это только не сюжетный квест под руководством мастера. Но могу устать от ожидания и выйти из игры. </td>
</tr>
<tr>
<td>Количество персонажей</td>
<td>1</td>
</tr>
<tr>
<td>Кросспол</td>
<td>безразличен</td>
</tr>
<tr>
<td>Флешбеки и альтернативы</td>
<td>Флешбеки аккуратно, альтернативы - точно нет. </td>
</tr>
<tr>
<td>Хороший игрок</td>
<td>для каждого свой. </td>
</tr>
<tr>
<td>Рейтинговые сцены</td>
<td>Секс играю, но больше сюжетно и в качестве развития персонажей. Никакого вирта или мацаней во флуде. Расчлененку тоже могу, но мне хватает на всё рейтинга R</td>
</tr>
<tr>
<td>Визуализация</td>
<td>Люблю играть рисованными артами, так как это позволяет держать дистанцию между собой и персонажем. К вашим внешностям не взыскателен, но на личную лирику попрошу поставить рисованное. Мне сложно проецировать чувства персонажа на реального как будто человека. Прошу понять. </td>
</tr>
<tr>
<td>Чего нельзя делать в игре</td>
<td>манчить, телепатить, играть через силу</td>
</tr>
<tr>
<td>Администрирование</td>
<td>нет, спасибо! </td>
</tr>

</table>

</div>[/html]

Отредактировано Земислав Ридвульф (21.10.2026 19:25)

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

я - огонь, что разгонит холод, и свет, что приносит рассвет.

[html]<style>a.rose-signature {width:70px;height:120px;bottom: 5px;right: -50px;position: absolute!important;background: url(https://upforme.ru/uploads/0011/93/3d/1357/633575.png) no-repeat center / 100%;z-index: 5;border-bottom: none!important;filter:brightness(1.3);will-change: filter;transition: filter .3s ease-in-out;}
a.rose-signature:hover {filter:brightness(1.5)}
a.rose-signature::before {content: none!important;} </style>
<a href='https://lepidus.ru/viewtopic.php?id=6262' title='хронология' class='rose-signature' target='_blank'></a>[/html]

Танец Вечности

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

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

Объявление

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

Таблица-визитка игрока

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

Поделиться128.02.2023 01:25

Поделиться2121.10.2026 19:20