[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>
<style>/* =========================================================
ПЕРЕМЕННЫЕ
========================================================= */
.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]





