[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]