[hideprofile][html]
<div class="rp-wrapper">
  <div class="rp-content">
    <div class="top-block">
      <div class="top-title" style='padding-top:10px;'>ЗАНЯТЫЕ ВНЕШНОСТИ</div>

    </div>

    <div class="char-controls">
      <input type="text" id="charSearch" placeholder="Поиск...">
      <div class="char-checks">
        <label><input type="checkbox" id="searchFemale"> Женские</label>
        <label><input type="checkbox" id="searchMale"> Мужские</label>
      </div>
    </div>

    <div id="searchResults" class="search-results"></div>

    <div class="char-columns">

      <!-- ЖЕНСКИЕ -->
      <div class="char-column" id="femaleColumn">
        <div class="char-box"><span>Женские</span></div>

        <div class="char-group">
          <div class="char-inner">

            <div class="name-item"><strong><em>adelaide kane</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=78">jessie reed</a>^ww</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>alina kovalenko</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=57">talia cavendish</a>^nf</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>brianne howey</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=134">amelia floyd</a>^ww</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>cindy kimberly</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=211">michelle newman</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>charlize theron</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=193">sophia bronte</a>^h</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>danielle rose russell</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=210">aria montgomery</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>danielle panabaker</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=18">caitlin fox</a>^sh</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>eiza gonzalez</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=192ь">karen wood</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>emily didonato</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=173">tamlyn ginger bright</a>^r</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>holland roden</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=72">elizabeth hill</a>^m</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>katherine mcnamara</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=56">ella richards</a>ⁱ</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>maddie hasson</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=54">lori meyers</a>^k</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>sadie sink</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=181">hannah crane</a>^m</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>so ye ji</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=65">sora hwan</a>^k</div><div class="gradient-line"></div>

          </div>
        </div>
      </div>

      <!-- МУЖСКИЕ -->
      <div class="char-column" id="maleColumn">
        <div class="char-box"><span>Мужские</span></div>

        <div class="char-group">
          <div class="char-inner">

            <div class="name-item"><strong><em>armie hammer</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=161">dean hanson</a>^m</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>boyd holbrook</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=154">kurt frey</a>^c</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>brendon urie</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=108">troy bentley</a>^m</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>charles davis</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=178">darren fravel</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>chris evans</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=212">nade crouch</a>^h</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>chris wood</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=168">jake ross</a>^m</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>codie christian</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=63">kyle grimes</a>^ww</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>cole sprouse</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=36">jagger lightwood</a>^r</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>daniel sharman</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=138">francesco romano</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>dylan o'brien</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=5">nick price</a>ⁱ</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>dylan sprayberry</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=164">quentin devereux</a>ⁿ</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>elyas m'barek</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=213">zeki thornhill</a>^h/m</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>eugene schwartz</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=139">christian degas</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>finn wittrock</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=122">dave moore</a>^w</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>freddie thorp</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=101">ethan stewart</a>^k</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>gabriel guevara</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=151">marek nolan</a>^ww</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>herman tommeraas</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=52">harry fouster</a>^h</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>jamie campbell bower</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=141">adrian tepes</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>joel kinnaman</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=204">hemming blixt</a>^h</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>jonathan rhys meyers</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=142">felix knight</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>karl urban</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=209">alaric bronte</a>^h</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>lorenzo zurzolo</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=100">edward howell</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>matthew daddario</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=38">leks parker</a>^ww</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>maxence danet-fauvel</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=158">devlin crane</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>nathaniel buzolic</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=167">kol bronte</a>^h</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>noah centineo</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=148">dante ranieri</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>ryan kelley</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=170">edmund stripes</a>^c</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>spencer macpherson</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=149">stephen macpherson</a>^v</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>stephen ammel</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=16">ash bronte</a>^h</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>timothe chalamet</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=163">zion vale</a>^hm</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>tom holland</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=226">jerry mead</a>^h</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>thomas sangster</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=67">sam graymark</a>^m</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>tyler lawrence gray</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=130">markus parker</a>^ww</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>zane holtz</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=191">lawrence henderson</a>^m</div><div class="gradient-line"></div>
    <div class="name-item"><strong><em>will tudor</em></strong><br><a href="https://theraven.rusff.me/profile.php?id=66">reid graymark</a>ⁱ</div><div class="gradient-line"></div>

          </div>
        </div>
      </div>

    </div>
<details class='puk' style='font-style:strong; text-align: center; margin-top: 10px; border: 1px #000 solid;'>
  <summary style='margin:5px;'>обозначение рас</summary>
  <div class="spoiler-content">
    <div>церберы — c</div>
    <div>оборотни — ww</div>
    <div>вампиры — v</div>
    <div>кицунэ — k</div>
    <div>ногицунэ — n</div>
    <div>охотники — h</div>
    <div>маги — m</div>
    <div>иммуны — i</div>
    <div>люди — hm</div>
    <div>вендиго — w</div>
    <div>тень — sh</div>
    <div>райдзю — r</div>
    <div>гончая — ho</div>
    <div>мавка — mv</div>
    <div>гидра — hd</div>
    <div>нимфа — nf</div>
  </div>
</details>
  </div>
</div>

<style>
@font-face {
  font-family:'Dwarven';
  src:url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/DwarvenStonecraftCyrExtended.otf');
}
@font-face {
  font-family:'Leotaro';
  src:url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf');
}

.rp-wrapper{
  width:850px;
  margin:0 auto;
  padding:10px;
  border-radius:20px;
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  filter:saturate(70%);
}
.rp-content{
  background:#d6d6d6;
  border-radius:15px;
  padding:15px;
}

.rp-content a {
  text-decoration: none; 
  color: #26a226;
  cursor: pointer;     
}

.rp-content {
  user-select: auto;     
}

.top-title{
  font-family:'Dwarven';
  font-size:40px;
  color:#d6d6d6;
  margin-bottom:15px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.top-sub{
  font-size:15px;
  margin-top:5px;
  background:#d6d6d6;
  border-radius:15px;
  padding:10px;
  font-family:'Leotaro';
}

.top-block{
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  border-radius:15px;
  text-align:center;
  padding:5px;
  margin-bottom:20px;
}

.char-controls{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-bottom:20px;
  flex-wrap:wrap;
  font-family:'Leotaro';
}

.char-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.char-box{
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  border-radius:15px;
  padding:6px;
  margin-bottom:15px;
  text-align:center;
}

.char-box span{
  font-family:'Dwarven';
  font-size:26px;
  color:#d6d6d6;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.char-group{
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  border-radius:15px;
  padding:6px;
  margin-bottom:15px;
}

.char-inner{
  background:#d6d6d6;
  border-radius:12px;
  padding:10px;
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  text-align:center;
  font-size:14px;
  font-family:'Leotaro'
}

.char-letter{
  font-family:'Dwarven';
  margin:5px 0 8px;
  text-align:center;
  color:#d6d6d6;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
  font-size:25px;
}

.name-item,
.surname-item{
  margin-bottom: 3px;
  transition:.3s;
}

.name-item.hidden,
.surname-item.hidden{
  opacity:0;
  transform:translateY(5px);
  height:0;
  overflow:hidden;
}

.highlight{
  background:#26a226;
  border-radius:3px;
}

.char-special{
  margin-top:30px;
}

.special-item{
  font-family:'Leotaro';
  font-size:14px;
  margin-bottom:4px;
}

.search-results{
  text-align:center;
  margin-bottom:20px;
  font-family:'Leotaro';
  font-size:16px;
  color:#333;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.search-results .result-item{
  display:block;
  padding:2px 6px;
}

.char-inner::-webkit-scrollbar{
  width:4px;
}

.char-inner::-webkit-scrollbar-track{
  background:transparent;
}

.char-inner::-webkit-scrollbar-thumb{
  background:#26a226;
  border-radius:10px;
}

.char-inner{
  scrollbar-width:thin;
  scrollbar-color:#26a226 transparent;
}

.gradient-line {
  height: 2px;
  margin: 15px 0;
  border-radius: 1px;
  background: linear-gradient(
    to right,
    rgba(38, 162, 38, 0) 0%,
    rgba(38, 162, 38, 1) 50%,
    rgba(38, 162, 38, 0) 100%
  );
}

.spoiler-details {
  border: 2px solid #26a226;
  border-radius: 10px;
  width: 300px;
  font-family: 'Leotaro';
  background: #f5f5f5;
  padding: 0;
}

.spoiler-details summary {
  padding: 8px 12px;
  cursor: pointer;
  font-weight: bold;
  background: #d6d6d6;
  border-bottom: 1px solid #26a226;
  border-radius: 10px 10px 0 0;
  list-style: none; /* убираем стрелку по умолчанию, можно убрать, если нужна */
}

.spoiler-details summary::-webkit-details-marker {
  display: none; /* скрыть стрелку в Chrome/Safari */
}

.spoiler-content {
  padding: 10px 12px;
}

.spoiler-content div {
  margin: 4px 0;
}
.puk{
font-family: 'Leotaro';
border-radius:10px;
font-size:14px;
}
</style>

<script>
const search = document.getElementById("charSearch");
const checkFemale = document.getElementById("searchFemale");
const checkMale = document.getElementById("searchMale");

const femaleNames = document.querySelectorAll("#femaleColumn .name-item");
const maleNames = document.querySelectorAll("#maleColumn .name-item");

const resultsBox = document.getElementById("searchResults");

// Подсветка начала имени
function highlightText(html, val){
  if(!val) return html;

  const reg = new RegExp(`^(<strong><em>)([^<]+)`, "i");

  return html.replace(reg, function(match, startTag, name){
    if(name.toLowerCase().startsWith(val)){
      const highlighted = name.replace(
        new RegExp(`^(${val})`, "i"),
        "<span class='highlight'>$1</span>"
      );
      return startTag + highlighted;
    }
    return match;
  });
}

// Замена <br> на длинное тире
function replaceBreakWithDash(html){
  return html.replace(/<br\s*\/?>/gi, " — ");
}

function filterAll(){
  const val = search.value.toLowerCase().trim();
  let results = [];

  if(val.length >= 1){

    if(checkFemale.checked){
      femaleNames.forEach(n=>{
        const visibleName = n.querySelector("strong em")?.textContent || "";
        if(visibleName.toLowerCase().startsWith(val)){
          results.push(n.innerHTML);
        }
      });
    }

    if(checkMale.checked){
      maleNames.forEach(n=>{
        const visibleName = n.querySelector("strong em")?.textContent || "";
        if(visibleName.toLowerCase().startsWith(val)){
          results.push(n.innerHTML);
        }
      });
    }
  }

  if(results.length > 0){
    resultsBox.innerHTML = results
      .map(r=>{
        let modified = replaceBreakWithDash(r);
        modified = highlightText(modified, val);
        return "<div class='result-item'>" + modified + "</div>";
      })
      .join("");
  }
  else if(val.length >= 1){
    resultsBox.innerHTML = "<span>Совпадений не обнаружено</span>";
  }
  else {
    resultsBox.innerHTML = "";
  }
}

search.addEventListener("input", filterAll);
checkFemale.addEventListener("change", filterAll);
checkMale.addEventListener("change", filterAll);
</script>
[/html]

Отредактировано Caitlin Fox (2024-03-06 11:15:53)