[hideprofile]
[html]
<div class="tem">
<tem1>пак новичка</tem1>
<div class="tem5" style="background: url(https://upforme.ru/uploads/001b/ef/4a/29/477850.png)">
<div class="tem_name">Пак новичка</div>
<div class="tem_descr">профиль под ключ</div>
<div class="tem_award1">фон\иконка\плашка</div>
<div class="tem_award2">бесплатно</div>
</div>
<br>
Мы рады приветствовать тебя на нашем форуме и мы подготовили для тебя подарок!
Можешь выбрать любой из трех наборов совершенно бесплатно и самостоятельно выбрать
текст для плашки. Все, что надо - выбери один из трех паков, введи текст плашки,
если есть идея, и твой подарок будет у тебя на страничке! Чтобы потом переодеться,
нажми на иконочку изменения профиля, что рядом с профилем, и тебя перенесет
на страницу переодевания! И вдохновения тебе!
</div>
<script>
window.NEWBIE_PACK_CONFIG = {
PACKS: [
{
id: "pack-1",
title: "пакет №1",
icon: "https://upforme.ru/uploads/001b/ef/4a/29/333190.png",
background: "https://upforme.ru/uploads/001b/ef/4a/29/33044.png",
plateBg: "#bebcb9"
},
{
id: "pack-2",
title: "пакет №2",
icon: "https://upforme.ru/uploads/001b/ef/4a/29/498120.png",
background: "https://upforme.ru/uploads/001b/ef/4a/29/325426.png",
plateBg: "#1e1e1e"
},
{
id: "pack-3",
title: "пакет №3",
icon: "https://upforme.ru/uploads/001b/ef/4a/29/329657.png",
background: "https://upforme.ru/uploads/001b/ef/4a/29/213355.png",
plateBg: "#801923"
}
],
DEFAULT_TOP: "пишу свою историю",
DEFAULT_BOTTOM: "на улицах чикаго",
AVATAR_URL: "https://forumstatic.ru/files/001b/ef/4a/16693.png"
};
</script>
<style>
/* =========================================================
ПАК НОВИЧКА
========================================================= */
.newbie-pack-scroll {
display: block;
width: 100%;
max-width: 100%;
margin: 20px 0 0;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
.newbie-pack-profiles {
display: grid;
grid-template-columns: 244px 244px 244px;
align-items: start;
justify-content: center;
gap: 20px;
width: max-content;
min-width: 772px;
margin: 0 auto;
padding: 0 10px;
box-sizing: border-box;
}
.newbie-pack {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 244px;
min-width: 244px;
max-width: 244px;
text-align: center;
box-sizing: border-box;
}
.newbie-pack input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* =========================================================
ПОДПИСЬ
========================================================= */
.newbie-pack-label {
display: block;
width: max-content;
max-width: 100%;
margin: 0 auto 10px;
color: var(--controls-colorful);
cursor: pointer;
font: 11px/1.3 var(--regular-font);
text-align: center;
text-transform: uppercase;
}
.newbie-pack-radio {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 5px;
box-sizing: border-box;
vertical-align: -3px;
border: 1px solid var(--container-text);
border-radius: 50%;
}
.newbie-pack.selected .newbie-pack-radio::after {
content: "";
display: block;
width: 8px;
height: 8px;
margin: 2px;
background: var(--controls-colorful);
border-radius: 50%;
}
.newbie-pack.selected .post-author {
outline: 2px solid var(--container-text);
outline-offset: 6px;
border-radius: 8px;
}
/* =========================================================
HIDEPROFILE — единственный !important
========================================================= */
.post.hideprofile #newbie-pack-profiles .post-author,
.hideprofile #newbie-pack-profiles .post-author {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.post.hideprofile #newbie-pack-profiles .post-author ul,
.hideprofile #newbie-pack-profiles .post-author ul {
visibility: visible !important;
opacity: 1 !important;
}
/* =========================================================
ПРОФИЛЬ — ДЕСКТОП
========================================================= */
#newbie-pack-profiles .post-author {
position: relative;
display: block;
width: 244px;
min-width: 244px;
max-width: 244px;
margin: 30px auto 40px;
padding: 0 6px;
box-sizing: border-box;
overflow: visible;
}
#newbie-pack-profiles .post-author ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
gap: 0;
width: 100%;
margin: 40px 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
/* =========================================================
ФОН / ИКОНКА
========================================================= */
#newbie-pack-profiles .pa-fld5 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
margin: 0;
padding: 0;
z-index: -1;
box-sizing: border-box;
}
#newbie-pack-profiles .fon_icon {
position: relative;
display: block;
width: 100%;
height: 70px;
margin: 0;
padding: 0;
}
#newbie-pack-profiles .fon_icon img {
display: block;
width: 100%;
height: 70px;
margin: 0;
object-fit: cover;
border-radius: 4px 4px 0 0;
}
#newbie-pack-profiles .pa-fld5 a,
#newbie-pack-profiles .pa-fld5:has(.fon_icon) a {
position: absolute;
width: 34px;
height: 34px;
margin: -24px 0 0 -15px;
padding: 2px;
box-sizing: border-box;
z-index: 1;
}
#newbie-pack-profiles .pa-fld5 a img {
display: block;
width: 100%;
height: 34px;
border-radius: 20px;
object-fit: cover;
}
/* =========================================================
ПЛАШКА
========================================================= */
#newbie-pack-profiles .pa-fld4 {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
#newbie-pack-profiles .pa-fld4 .plashka,
#newbie-pack-profiles .plashka {
display: block;
position: relative;
left: 0;
width: 242px;
max-width: 242px;
margin: 7px 0 0;
box-sizing: border-box;
}
/* =========================================================
НИК / ТИТУЛ / АВАТАР / СТАТЫ
========================================================= */
#newbie-pack-profiles .pa-author,
#newbie-pack-profiles .pa-title,
#newbie-pack-profiles .pa-avatar {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#newbie-pack-profiles .pa-author,
#newbie-pack-profiles .pa-title {
margin-left: 0;
text-align: center;
}
#newbie-pack-profiles .pa-avatar {
display: flex;
justify-content: center;
margin: 0 0 10px;
padding: 0;
}
#newbie-pack-profiles .pa-avatar img {
display: block;
width: auto;
max-width: 180px;
max-height: 180px;
margin: 0 auto;
}
#newbie-pack-profiles .pa-posts,
#newbie-pack-profiles .pa-respect {
flex: 0 0 auto;
width: auto;
margin-top: 0;
vertical-align: top;
}
#newbie-pack-profiles .pa-posts {
margin: 0 -3px -10px -18px;
}
#newbie-pack-profiles .pa-respect {
margin: 0 -3px 0 -2px;
}
#newbie-pack-profiles #tuser {
display: none;
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ
Только max-width (по режиму viewport).
Без max-device-width.
Без !important — #id сильнее .post .class из темы.
========================================================= */
@media screen and (max-width: 540px) {
.newbie-pack-scroll {
overflow: visible;
margin: 16px 0 0;
}
.newbie-pack-profiles {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 28px;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
}
.newbie-pack {
width: 100%;
min-width: 0;
max-width: 100%;
}
.newbie-pack-label {
margin-bottom: 8px;
}
/* карточка на всю ширину */
#newbie-pack-profiles .post-author {
width: 100%;
min-width: 0;
max-width: 100%;
margin: 20px auto 16px;
padding: 0 6px;
}
/* штатный mobile-grid темы */
#newbie-pack-profiles .post-author ul {
display: grid;
grid-template-columns: 1fr 2fr 2fr 2fr 2fr 1fr;
gap: 5px;
width: 100%;
margin: 40px 0;
padding: 15px 10px;
flex-wrap: unset;
justify-content: unset;
align-items: unset;
align-content: unset;
}
/* сброс десктопных flex-строк */
#newbie-pack-profiles .pa-author,
#newbie-pack-profiles .pa-title,
#newbie-pack-profiles .pa-avatar,
#newbie-pack-profiles .pa-posts,
#newbie-pack-profiles .pa-respect {
flex: unset;
width: auto;
max-width: none;
}
#newbie-pack-profiles .pa-author {
grid-column: 1 / 7;
grid-row: 1;
margin: 0;
padding-bottom: 0;
text-align: center;
}
#newbie-pack-profiles .pa-title {
grid-column: 1 / 7;
grid-row: 2;
width: 90%;
margin: 0 auto;
padding: 0;
background: unset;
border: none;
text-align: center;
}
#newbie-pack-profiles .pa-avatar {
display: block;
grid-column: 2 / 4;
grid-row: 3 / 5;
width: auto;
max-width: 90px;
margin: 0 auto;
padding: 3px;
border-radius: 5px;
}
#newbie-pack-profiles .pa-avatar img {
width: 100%;
height: 100%;
max-width: 90px;
max-height: none;
object-fit: cover;
}
#newbie-pack-profiles .pa-posts {
grid-column: 4;
grid-row: 3 / 5;
margin: 10px 0 0;
}
#newbie-pack-profiles .pa-respect {
grid-column: 5;
grid-row: 3 / 5;
margin: 10px 0 0;
}
/* фон / иконка — mobile темы */
#newbie-pack-profiles .pa-fld5 {
margin: 0;
width: 100%;
left: 0;
top: 0;
z-index: -1;
background-size: cover;
}
#newbie-pack-profiles .fon_icon img {
margin: 0;
object-fit: cover;
}
#newbie-pack-profiles .pa-fld5 a,
#newbie-pack-profiles .pa-fld5:has(.fon_icon) a {
margin: -18px 0 0 -15px;
}
/* плашка на всю ширину */
#newbie-pack-profiles .pa-fld4 {
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
#newbie-pack-profiles .pa-fld4 .plashka,
#newbie-pack-profiles .plashka {
width: 100%;
max-width: 100%;
margin: 7px 0 0;
}
.newbie-pack-fields {
width: min(260px, calc(100% - 20px));
}
}
/* =========================================================
ПОЛЯ / КНОПКА
========================================================= */
.newbie-pack-fields {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 260px;
max-width: calc(100% - 20px);
margin: 28px auto 0;
box-sizing: border-box;
}
.newbie-pack-fields input {
display: block;
width: 100%;
min-height: 30px;
padding: 6px 9px;
box-sizing: border-box;
color: var(--text-color);
background: var(--input-bg);
border: var(--input-border);
border-radius: 6px;
font: 11px/1.3 var(--regular-font);
text-align: center;
}
.newbie-pack-fields input::placeholder {
color: var(--text-color);
opacity: .65;
}
.newbie-pack-default {
margin-top: 8px;
color: var(--text-color);
font: 10px/1.4 var(--regular-font);
text-align: center;
}
#newbie-pack-submit {
display: block;
margin: 12px auto 0;
padding: 7px 16px;
color: var(--button-text);
background: var(--button-bg);
border: var(--button-border);
border-radius: 7px;
cursor: pointer;
font: 11px/1.3 var(--regular-font);
}
#newbie-pack-submit:hover {
filter: brightness(1.08);
}
#newbie-pack-status {
min-height: 16px;
margin-top: 8px;
color: var(--controls-colorful);
font: 10px/1.4 var(--regular-font);
text-align: center;
}
/* =========================================================
АДМИН
========================================================= */
.newbie-admin-data:not(.gid1 .newbie-admin-data):not(.gid2 .newbie-admin-data) {
display: none;
}
.newbie-admin-data {
max-width: 600px;
margin: 15px auto 0;
padding: 12px;
box-sizing: border-box;
color: var(--text-color);
background: var(--container-element-bg);
border: 1px solid var(--punbb-tr-border);
border-radius: 10px;
}
.newbie-admin-title {
margin-bottom: 10px;
color: var(--controls-colorful);
font: 16px/1.2 var(--categ-titles-font);
text-align: center;
text-transform: uppercase;
}
.newbie-admin-info {
margin-bottom: 10px;
font: 10px/1.5 var(--regular-font);
text-align: center;
}
.newbie-admin-code { margin-top: 9px; }
.newbie-admin-code-title {
margin-bottom: 3px;
color: var(--controls-colorful);
font: 11px/1.3 var(--regular-font);
}
.newbie-code-label {
display: block;
margin-bottom: 3px;
font: 10px/1.3 var(--regular-font);
}
.newbie-code-label a {
color: inherit;
cursor: pointer;
text-decoration: underline;
}
.newbie-code {
display: block;
width: 100%;
min-height: 80px;
padding: 7px;
box-sizing: border-box;
resize: vertical;
color: #222;
background: #f5f5f5;
border: 1px solid #aaa;
border-radius: 5px;
font: 11px/1.4 monospace;
white-space: pre;
overflow: auto;
}
</style>
<div class="newbie-pack-scroll">
<div id="newbie-pack-profiles" class="newbie-pack-profiles"></div>
</div>
<div class="newbie-pack-fields">
<input
id="newbie-plate-top"
type="text"
maxlength="100"
placeholder="верхняя строка плашки"
>
<input
id="newbie-plate-bottom"
type="text"
maxlength="100"
placeholder="нижняя строка плашки"
>
</div>
<div class="newbie-pack-default">
Если оставить поля пустыми, будут использованы:
«пишу свою историю» / «на улицах чикаго»
</div>
<button type="button" id="newbie-pack-submit">
отправить
</button>
<div id="newbie-pack-status"></div>
<script type="text/javascript" src="https://forumstatic.ru/files/0019/9e/ef/75890.js?v=2"></script>
[/html]
