ОЧЕРЕДЬ

    Haters

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

    Привет, Гость! Войдите или зарегистрируйтесь.

    Вы здесь » Haters » НПС » Киске Урахара

    Киске Урахара

    Страница: 1

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

    1

    [html]<div class="rpg-box">

      <!-- SLIDER STATE -->
      <input type="radio" name="rpg_rostro1" id="rostro1_p1" checked>
      <input type="radio" name="rpg_rostro1" id="rostro1_p2">
      <input type="radio" name="rpg_rostro1" id="rostro1_p3">
      <input type="radio" name="rpg_rostro1" id="rostro1_p4">

      <div class="track">

        <!-- PAGE 1 -->
        <div style="width:750px;height:200px;position:relative;flex-shrink:0;">
          <img src="https://upforme.ru/uploads/001c/bb/3f/2/258549.png"
               style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.75);">

          <div style="position:absolute;bottom:15px;left:15px;">
            <div style="font-size:22px;font-weight:bold;">КИСКЕ УРАХАРА</div>
            <div style="opacity:0.7;">Независимые | Владелец магазина </div>
          </div>

          <label for="rostro1_p2"
                 style="position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#1C99C3;">
            ◉
          </label>
        </div>

        <!-- PAGE 2 -->
        <div style="width:750px;height:200px;position:relative;flex-shrink:0;background:#171717;padding:15px;box-sizing:border-box;">
          <div style="font-size:14px;font-weight:bold;margin-bottom:8px;padding-left:25px;padding-top:20px">ОПИСАНИЕ</div>

          <div style="font-size:10px;margin-bottom:8px;padding-left:25px;">
            183 cm | 69 kg | ?
          </div>

          <div style="font-size:12px;opacity:0.85;line-height:1.5;padding-left:25px;padding-right:25px;">
    Высокий мужчина средних лет с расслабленной улыбкой и неизменной полосатой панамой, скрывающей внимательный взгляд серо-зелёных глаз. За внешней беспечностью и привычкой отшучиваться скрывается один из величайших умов Общества Душ, чьи изобретения и открытия навсегда изменили ход истории. Хитрый, предусмотрительный и крайне опасный противник, Урахара предпочитает действовать из тени, позволяя окружающим недооценивать себя до самого последнего момента.

          </div>

          <label for="rostro1_p1"
                 style="position:absolute;left:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#1C99C3;">◉</label>

          <label for="rostro1_p3"
                 style="position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#1C99C3;">◉</label>
        </div>

        <!-- PAGE 3 -->
        <div style="width:750px;height:200px;position:relative;flex-shrink:0;background:#171717;padding:12px;box-sizing:border-box;">

          <div style="font-size:14px;font-weight:bold;margin-bottom:10px;">ХАРАКТЕРИСТИКИ</div>

          <div style="width:100%;height:100%;display:flex;gap:12px;box-sizing:border-box;">

            <div style="width:45%;font-size:10px;line-height:1.6;padding-left:25px;padding-top:20px;">

              <div style="margin-bottom:10px;">
                <div style="position:relative;height:18px;background:#222;border-radius:8px;overflow:hidden;">
                  <div style="width:33%;height:100%;background:#526FB1;"></div>
                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;">
                    Уровень | 20
                  </div>
                </div>
              </div>

              <div style="margin-bottom:10px;">
                <div style="position:relative;height:18px;background:#222;border-radius:8px;overflow:hidden;">
                  <div style="width:100%;height:100%;background:#790D0F;"></div>
                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;">
                    Здоровье | 60.0 — 60.0
                  </div>
                </div>
              </div>

              <div style="margin-bottom:10px;">
                <div style="position:relative;height:18px;background:#222;border-radius:8px;overflow:hidden;">
                  <div style="width:100%;height:100%;background:#0D5279;"></div>
                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;">
                    Рейацу | 104.0 — 104.0
                  </div>
                </div>
              </div>

              <div style="margin-bottom:10px;">
                <div style="position:relative;height:18px;background:#222;border-radius:8px;overflow:hidden;">
                  <div style="width:52.5%;height:100%;background:#5820FF;"></div>
                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;">
                    Контроль рейацу | 52.5%
                  </div>
                </div>
              </div>

      <div style="margin-bottom:10px;">
                <div style="position:relative;height:18px;background:#222;border-radius:8px;overflow:hidden;">
                  <div style="width:32.5%;height:100%;background:#B31F41;"></div>
                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;">
                    Резонанс с занпакто | 32.5%
                  </div>
                </div>
              </div>

            </div>

            <div style="width:50%;font-size:11px;line-height:1.6;padding:20px 10px 0 20px;box-sizing:border-box;display:flex;justify-content:space-between;gap:10px;">

              <div style="width:40%;">
                Сила <span style="float:right;">10</span><br>
                Ловкость <span style="float:right;">10</span><br>
                Выносливость <span style="float:right;">15</span><br>
                Интеллект <span style="float:right;">15</span><br>
                Мудрость <span style="float:right;">15</span><br>
                Харизма <span style="float:right;">5</span><br>
              </div>

              <div style="width:40%;">
                Зандзюцу <span style="float:right;">5</span><br>
                Шунпо <span style="float:right;">15</span><br>
                Хакуда <span style="float:right;">5</span><br>
                Кидо <span style="float:right;">15</span><br>
                Тактика <span style="float:right;">15</span><br>
              </div>

            </div>
          </div>

          <label for="rostro1_p2"
                 style="position:absolute;left:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#1C99C3;">◉</label>

          <label for="rostro1_p4"
                 style="position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#1C99C3;">◉</label>

        </div>

        <!-- PAGE 4 -->
        <div class="page pad" style="padding-left:25px;padding-right:25px;padding-top:25px">

          <div style="font-size:14px;font-weight:bold;margin-bottom:10px;">НАВЫКИ</div>

          <input type="radio" name="skill_rostro1" id="rostro1_s1" checked>
          <input type="radio" name="skill_rostro1" id="rostro1_s2">
          <input type="radio" name="skill_rostro1" id="rostro1_s3">

          <div class="skills-wrap">

            <div class="grid">
              <label for="rostro1_s1"><img src="https://upforme.ru/uploads/001c/bb/3f/2/626993.png"></label>
              <label for="rostro1_s2"><img src="https://upforme.ru/uploads/001c/bb/3f/2/626993.png"></label>
              <label for="rostro1_s3"><img src="https://upforme.ru/uploads/001c/bb/3f/2/626993.png"></label>
              <label for="rostro1_s4"><img src="https://upforme.ru/uploads/001c/bb/3f/2/626993.png"></label>
              <label for="rostro1_s5"><img src="https://upforme.ru/uploads/001c/bb/3f/2/626993.png"></label>
              <label for="rostro1_s6"><img src="https://upforme.ru/uploads/001c/bb/3f/2/626993.png"></label>
              <label for="rostro1_s7"><img src="https://upforme.ru/uploads/001c/bb/3f/2/626993.png"></label>
              <label for="rostro1_s8"><img src="https://upforme.ru/uploads/001c/bb/3f/2/626993.png"></label>
            </div>

            <div class="desc">
              <div class="d1"><b></b><br></div>
              <div class="d2">?</div>
              <div class="d3">?</div>
              <div class="d4"><b></b><br></div>
              <div class="d5">?</div>
              <div class="d6">?</div>
              <div class="d7">?</div>
              <div class="d8">?</div>
            </div>

          </div>

          <label for="rostro1_p3"
                 style="position:absolute;left:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#1C99C3;">◉</label>

          <label for="rostro1_p1"
                 style="position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#1C99C3;">◉</label>

        </div>

      </div>

      <!-- DOTS -->
      <div class="dots">
        <label for="rostro1_p1"><span></span></label>
        <label for="rostro1_p2"><span></span></label>
        <label for="rostro1_p3"><span></span></label>
        <label for="rostro1_p4"><span></span></label>
      </div>

    </div>

    <style>
    .rpg-box{
      width:750px;height:200px;position:relative;overflow:hidden;
      border-radius:22px;font-family:Arial;background:#171717;color:#CACACA;
    }
    .rpg-box input{display:none;}
    .rpg-box .track{width:400%;height:100%;display:flex;transition:0.5s ease;}
    .rpg-box .page{width:750px;height:200px;flex-shrink:0;position:relative;}
    .rpg-box .pad{padding:15px;box-sizing:border-box;}

    .rpg-box .skills-wrap{display:flex;gap:10px;}
    .rpg-box .grid{
      width:45%;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:8px;
    }
    .rpg-box .grid label{
      width:44px;
      height:44px;
      background:#222;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:8px;
      cursor:pointer;
    }
    .rpg-box .grid label img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .rpg-box .desc{
      width:55%;
      padding-left:10px;
      padding-right:6px;
      font-size:11px;
      line-height:1.6;
      height:120px;
      overflow-y:auto;
      overflow-x:hidden;
      scrollbar-width:thin;
      scrollbar-color:#1C99C3 #222;
    }

    .rpg-box .desc::-webkit-scrollbar{width:4px;}
    .rpg-box .desc::-webkit-scrollbar-track{background:#222;}
    .rpg-box .desc::-webkit-scrollbar-thumb{background:#1C99C3;border-radius:10px;}

    #rostro1_p1:checked ~ .track{transform:translateX(0%);}
    #rostro1_p2:checked ~ .track{transform:translateX(-25%);}
    #rostro1_p3:checked ~ .track{transform:translateX(-50%);}
    #rostro1_p4:checked ~ .track{transform:translateX(-75%);}

    .rpg-box .dots{
      position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
      display:flex;gap:8px;
    }
    .rpg-box .dots span{
      width:8px;height:8px;border-radius:50%;background:#555;display:block;
    }

    #rostro1_p1:checked ~ .dots label:nth-child(1) span{background:#1C99C3;}
    #rostro1_p2:checked ~ .dots label:nth-child(2) span{background:#1C99C3;}
    #rostro1_p3:checked ~ .dots label:nth-child(3) span{background:#1C99C3;}
    #rostro1_p4:checked ~ .dots label:nth-child(4) span{background:#1C99C3;}

    .rpg-box .d1,.rpg-box .d2,.rpg-box .d3,.rpg-box .d4,
    .rpg-box .d5,.rpg-box .d6,.rpg-box .d7,.rpg-box .d8{display:none;}

    #rostro1_s1:checked ~ .skills-wrap .desc .d1,
    #rostro1_s2:checked ~ .skills-wrap .desc .d2,
    #rostro1_s3:checked ~ .skills-wrap .desc .d3,
    #rostro1_s4:checked ~ .skills-wrap .desc .d4,
    #rostro1_s5:checked ~ .skills-wrap .desc .d5,
    #rostro1_s6:checked ~ .skills-wrap .desc .d6,
    #rostro1_s7:checked ~ .skills-wrap .desc .d7,
    #rostro1_s8:checked ~ .skills-wrap .desc .d8{
      display:block;
    }
    </style>[/html]

    0

    2

    [html]
    <div class="npc-card-wrapper">

    <style>

    .npc-card-wrapper{
        all:initial;
        font-family:Arial, sans-serif;
        display:block;
    }

    .npc-card-wrapper *{
        box-sizing:border-box;
    }

    /* ОСНОВА */
    .npc-card-wrapper .npc-card{
        width:780px;
        background:#212121;
        border-radius:22px;
        overflow:hidden;
        box-shadow:0 20px 50px rgba(0,0,0,.6);
        color:#CACACA;
        padding:18px;
    }

    /* ВЕРХНЯЯ ЧАСТЬ */
    .npc-card-wrapper .npc-main{
        display:flex;
        gap:18px;
    }

    /* АВАТАР */
    .npc-card-wrapper .npc-avatar-block{
        width:180px;
        flex-shrink:0;
        text-align:center;
    }

    .npc-card-wrapper .npc-avatar{
        width:180px;
        height:180px;
        border-radius:16px;
        overflow:hidden;
        background:#181818;
    }

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

    /* СТАТУС */
    .npc-card-wrapper .npc-status{
        margin-top:10px;
        padding:7px;
        border-radius:10px;
        background:#181818;
        font-size:11px;
        letter-spacing:2px;
        text-transform:uppercase;
    }

    .npc-card-wrapper .alive{
        color:#1C99C3;
        border:1px solid rgba(28,153,195,.35);
    }

    .npc-card-wrapper .dead{
        color:#ff4d6d;
        border:1px solid rgba(255,77,109,.25);
    }

    /* ИНФОРМАЦИЯ */
    .npc-card-wrapper .npc-info{
        flex:1;
    }

    .npc-card-wrapper .npc-name{
        font-size:18px;
        letter-spacing:2px;
        color:#1C99C3;
        margin-bottom:10px;
        text-shadow:0 2px 10px rgba(0,0,0,.7);
    }

    .npc-card-wrapper .npc-subtitle{
        font-size:11px;
        color:#1C99C3;
        letter-spacing:1px;
        margin-bottom:12px;
    }

    /* ОПИСАНИЕ */
    .npc-card-wrapper .npc-description{

        background:#181818;
        border-radius:14px;
        padding:12px;
        height:140px;
        overflow-y:auto;

        font-size:12px;
        line-height:1.5;
        color:#CACACA;

    }

    .npc-card-wrapper .npc-description::-webkit-scrollbar{
        width:6px;
    }

    .npc-card-wrapper .npc-description::-webkit-scrollbar-track{
        background:#111;
    }

    .npc-card-wrapper .npc-description::-webkit-scrollbar-thumb{
        background:#1C99C3;
        border-radius:10px;
    }

    /* ЭПИЗОДЫ */
    .npc-card-wrapper .episodes{

        margin-top:16px;
        background:#181818;
        border-radius:14px;
        overflow:hidden;
        border:1px solid rgba(255,255,255,.05);

    }

    .npc-card-wrapper summary{

        cursor:pointer;
        padding:12px;

        color:#1C99C3;

        font-size:11px;
        letter-spacing:2px;
        text-transform:uppercase;

        list-style:none;

    }

    .npc-card-wrapper summary::-webkit-details-marker{
        display:none;
    }

    .npc-card-wrapper .episode-list{

        padding:0 12px 12px;

    }

    .npc-card-wrapper .episode{

        margin-top:8px;

        padding:10px;

        background:#222;

        border-radius:10px;

        border-left:3px solid #1C99C3;

    }

    .npc-card-wrapper .episode a{

        color:#CACACA;

        text-decoration:none;

        font-size:12px;

    }

    .npc-card-wrapper .episode a:hover{

        color:#1C99C3;

    }

    /* ФУТЕР */
    .npc-card-wrapper .npc-footer{

        margin-top:15px;

        padding-top:12px;

        border-top:1px solid #2a2a2a;

        font-size:11px;

        color:#777;

    }

    </style>

    <div class="npc-card">

    <div class="npc-main">

    <!-- АВАТАР -->
    <div class="npc-avatar-block">

        <div class="npc-avatar">
            <img src="https://upforme.ru/uploads/001c/bb/3f/2/468807.png">
        </div>

        <div class="npc-status alive">
            ● ЖИВ
        </div>

    </div>

    <!-- ИНФОРМАЦИЯ -->
    <div class="npc-info">

        <div class="npc-name">
           セージ // КИСКЕ УРАХАРА
        </div>

        <div class="npc-subtitle">
            Независимые | Владелец магазина
        </div>

        <div class="npc-description">

    Высокий мужчина средних лет с расслабленной улыбкой и неизменной полосатой панамой, скрывающей внимательный взгляд серо-зелёных глаз. За внешней беспечностью и привычкой отшучиваться скрывается один из величайших умов Общества Душ, чьи изобретения и открытия навсегда изменили ход истории. Хитрый, предусмотрительный и крайне опасный противник, Урахара предпочитает действовать из тени, позволяя окружающим недооценивать себя до самого последнего момента.

        </div>

    </div>

    </div>

    <!-- ЭПИЗОДЫ -->

    <details class="episodes">

    <summary>
    ☰ ЭПИЗОДЫ
    </summary>

    <div class="episode-list">

    <div class="episode">
    <a href="https://haters.mybb.ru/viewtopic.php?id=35">
    Эпизод I — Эта камера пыток наш будущий дом
    </a>
    </div>

    <div class="episode">
    <a href="https://haters.mybb.ru/viewtopic.php?id=43">
    Эпизод II — Змеиный мед, малиновый яд
    </a>
    </div>

    </div>

    </details>

    </div>

    </div>
    [/html]

    0

    Страница: 1

    Вы здесь » Haters » НПС » Киске Урахара