Szablon karty autora

Notka: wymiary szarych pól są tylko orientacyjne. Przesyłane obrazki mogą być większe.

Tu Twój nick

Tu Twój discord

Tu możesz wpisać trochę tekstu tak ogólnie o sobie. Możesz opowiedzieć o swoich zainteresowaniach, czy masz jakiegoś zwierzaka, jakie książki lubisz czytać, co tam ostatnio oglądasz i tym podobne. Wszystko dozwolone.

Preferencje pisarskie

Tu dla odmiany opisz, jakie masz oczekiwania wobec prowadzonych wątków i jakie są twoje przyzwyczajenia. Odpisujesz raczej często, czy na odpis od Ciebie trzeba dłużej poczekać? Wolisz krótsze czy dłuższe odpisy? Stawiasz na akcję, przeżycia wewnętrzne postaci, czy może wolisz opisywać ładne miejsca? Czy są tematy, których nie chcesz poruszać w wątkach, a może masz jakieś preferowane? Jak wygląda Twój staż blogowy? Piszesz od zawsze na PBP, może wcześniej zdarzyło Ci się pisać na forach, discordach albo PBC, a może wracasz do pisania po długiej przerwie?

Postaci

	Imię postaci - krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.
	Imię postaci - krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.
	Imię postaci - krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.

Kod do skopiowania

<img class="author" src="https://dummyimage.com/450x350/ddd/000000.png" />

<blockquote>
    <h4>Tu Twój nick</h4>
    <h6>Tu Twój discord</h6>
</blockquote>

<div>Tu możesz wpisać trochę tekstu tak ogólnie o sobie. Możesz opowiedzieć o swoich zainteresowaniach, czy masz jakiegoś zwierzaka, jakie książki lubisz czytać, co tam ostatnio oglądasz i tym podobne. Wszystko dozwolone.</div>

<h3>Preferencje pisarskie</h3>
<div>Tu dla odmiany opisz, jakie masz oczekiwania wobec prowadzonych wątków i jakie są twoje przyzwyczajenia. Odpisujesz raczej często, czy na odpis od Ciebie trzeba dłużej poczekać? Wolisz krótsze czy dłuższe odpisy? Stawiasz na akcję, przeżycia wewnętrzne postaci, czy może wolisz opisywać ładne miejsca? Czy są tematy, których nie chcesz poruszać w wątkach, a może masz jakieś preferowane? Jak wygląda Twój staż blogowy? Piszesz od zawsze na PBP, może wcześniej zdarzyło Ci się pisać na forach, discordach albo PBC, a może wracasz do pisania po długiej przerwie?</div>

<h3>Postaci</h3>
<table class="characters">
    <tbody>
    <tr>
        <td><img src="https://dummyimage.com/150x200/ddd/000000.png" /></td>
        <td><b>Imię postaci</b> - krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.</td>
    </tr>
    <tr>
        <td><img src="https://dummyimage.com/150x200/ddd/000000.png" /></td>
        <td><b>Imię postaci</b> - krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.</td>
    </tr>
    <tr>
        <td><img src="https://dummyimage.com/150x200/ddd/000000.png" /></td>
        <td><b>Imię postaci</b> - krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.</td>
    </tr>
</tbody>
</table>

Szablon karty postaci 2,5

Notka: wymiary szarych pól są tylko orientacyjne. Przesyłane obrazki mogą być większe.

Notka 2: na dobrą sprawę jest to Karta Postaci 2, tylko wzbogacona o pola Wątki, Indywidualne i Eventy.

Credits

Imię i nazwisko

Wiek: wiek postaci
Data urodzenia: data urodzenia
Płeć: płeć postaci
Rasa: rasa postaci
Pochodzenie: skąd postać pochodzi
Zawód: czym postać się zajmuje
Opis: krótki opis postaci, dosłownie w trzech zdaniach

Aparycja

Osobowość

Umiejętności

Historia

Relacje

Ciekawostki

Wątki

Indywidualne

Eventy

Opis aparycji

Opis osobowości

Opis umiejętności

Historia postaci

Relacje postaci

Ciekawostki o postaci

Wątki postaci

Indywidualne opowiadania postaci

Opowiadania eventowe postaci

Postać stworzona przez: i tu Twój nick
Ostatnia aktualizacja: i tu data ostatniej aktualizacji

Kod do skopiowania

 <style type="text/css">
h6.chaos {
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--color8);
  text-align-last: center;
  margin-bottom: 0px;
  font-variant: small-caps;
}
</style>

<div class="kp2_grid1">
  <div class="kp2_Lflex">
    <div class="kp2_img"><img src="https://dummyimage.com/250x350/ddd/000000.png" /></div>
    <div class="kp2_credits"><a href="#" target="_blank">Credits</a></div>
  </div>
  <div class="kp2_Rflex">
  <div class="kp2_name">Imię i nazwisko</div>
  <div class="kp2_info">
    <b>Wiek:</b> wiek postaci<br />
    <b>Data urodzenia:</b> data urodzenia<br />
    <b>Płeć:</b> płeć postaci<br />
    <b>Rasa:</b> rasa postaci<br />
    <b>Pochodzenie:</b> skąd postać pochodzi<br />
    <b>Zawód:</b> czym postać się zajmuje<br />
    <b>Opis:</b> krótki opis postaci, dosłownie w trzech zdaniach<br />
  </div>
  </div>
  </div>
<!--more-->

  <div class="kp2_grid2">
  <div class="kp2_menu">
    <div class="kp2_button" onclick="javascript:CharacterInfo1()">Aparycja</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo2()">Osobowość</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo3()">Umiejętności</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo4()">Historia</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo5()">Relacje</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo6()">Ciekawostki</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo7()">Wątki</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo8()">Indywidualne</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo9()">Eventy</div>
  </div>
  <div class="kp2_text">
  <div id="CharacterInfo1" style="display: block;" class="kp2_character">
    Opis aparycji<br/>
  </div>
  <div id="CharacterInfo2" style="display: none;" class="kp2_character">
    Opis osobowości<br/>
  </div>
  <div id="CharacterInfo3" style="display: none;" class="kp2_character">
    Opis umiejętności<br/>
  </div>
  <div id="CharacterInfo4" style="display: none;" class="kp2_character">
    Historia postaci<br/>
  </div>
  <div id="CharacterInfo5" style="display: none;" class="kp2_character">
    Relacje postaci<br/>
  </div>
  <div id="CharacterInfo6" style="display: none;" class="kp2_character">
    Ciekawostki o postaci<br/>
  </div>
  <div id="CharacterInfo7" style="display: none;" class="kp2_character">
    Wątki postaci<br/>
  </div>
  <div id="CharacterInfo8" style="display: none;" class="kp2_character">
    Indywidualne opowiadania postaci<br/>
  </div>
  <div id="CharacterInfo9" style="display: none;" class="kp2_character">
    Eventowe opowiadania postaci<br/>
  </div>
  </div>
  </div>
  <div class="kp2_author">
    <img src="https://dummyimage.com/50x50/ddd/000000.png" />
    <b>Postać stworzona przez: i tu Twój nick</b> <br />
    <b>Ostatnia aktualizacja: i tu data ostatniej aktualizacji</b>
  </div>

<script type="text/javascript">
function CharacterInfo1() {
  document.getElementById('CharacterInfo1').style.display='block';
  document.querySelectorAll('#CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo2() {
  document.getElementById('CharacterInfo2').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo3() {
  document.getElementById('CharacterInfo3').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo4() {
  document.getElementById('CharacterInfo4').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo5() {
  document.getElementById('CharacterInfo5').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo6() {
  document.getElementById('CharacterInfo6').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo7() {
  document.getElementById('CharacterInfo7').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo8() {
  document.getElementById('CharacterInfo8').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo9() {
  document.getElementById('CharacterInfo9').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8').forEach(el => el.style.display='none');
}
</script>

Kod dla osób, które przychodzą z poradnika (odnośnik)

<script type="text/javascript">
function CharacterInfo1() {
  document.getElementById('CharacterInfo1').style.display='block';
  document.querySelectorAll('#CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo2() {
  document.getElementById('CharacterInfo2').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo3() {
  document.getElementById('CharacterInfo3').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo4() {
  document.getElementById('CharacterInfo4').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo5() {
  document.getElementById('CharacterInfo5').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo6() {
  document.getElementById('CharacterInfo6').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo7() {
  document.getElementById('CharacterInfo7').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo8() {
  document.getElementById('CharacterInfo8').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo9() {
  document.getElementById('CharacterInfo9').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8').forEach(el => el.style.display='none');
}
</script>

Szablon karty postaci 2

Notka: wymiary szarych pól są tylko orientacyjne. Przesyłane obrazki mogą być większe.

Credits

Imię i nazwisko

Wiek: wiek postaci
Data urodzenia: data urodzenia
Płeć: płeć postaci
Rasa: rasa postaci
Pochodzenie: skąd postać pochodzi
Zawód: czym postać się zajmuje
Opis: krótki opis postaci, dosłownie w trzech zdaniach

Aparycja

Osobowość

Umiejętności

Historia

Relacje

Ciekawostki

Opis aparycji

Opis osobowości

Opis umiejętności

Historia postaci

Relacje postaci

Ciekawostki o postaci

Postać stworzona przez: i tu Twój nick
Ostatnia aktualizacja: i tu data ostatniej aktualizacji

Kod do skopiowania

<div class="kp2_grid1">
  <div class="kp2_Lflex">
    <div class="kp2_img"><img src="https://dummyimage.com/250x350/ddd/000000.png" /></div>
    <div class="kp2_credits"><a href="#" target="_blank">Credits</a></div>
  </div>
  <div class="kp2_Rflex">
  <div class="kp2_name">Imię i nazwisko</div>
  <div class="kp2_info">
    <b>Wiek:</b> wiek postaci<br />
    <b>Data urodzenia:</b> data urodzenia<br/>
    <b>Płeć:</b> płeć postaci<br/>
    <b>Rasa:</b> rasa postaci<br/>
    <b>Pochodzenie:</b> skąd postać pochodzi<br/>
    <b>Zawód:</b> czym postać się zajmuje<br/>
    <b>Opis:</b> krótki opis postaci, dosłownie w trzech zdaniach<br/>
  </div>
  </div>
  </div>
<!--more-->

  <div class="kp2_grid2">
  <div class="kp2_menu">
    <div class="kp2_button" onclick="javascript:CharacterInfo1()">Aparycja</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo2()">Osobowość</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo3()">Umiejętności</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo4()">Historia</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo5()">Relacje</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo6()">Ciekawostki</div>
  </div>
  <div class="kp2_text">
  <div id="CharacterInfo1" style="display: block;" class="kp2_character">
    Opis aparycji<br/>
  </div>
  <div id="CharacterInfo2" style="display: none;" class="kp2_character">
    Opis osobowości<br/>
  </div>
  <div id="CharacterInfo3" style="display: none;" class="kp2_character">
    Opis umiejętności<br/>
  </div>
  <div id="CharacterInfo4" style="display: none;" class="kp2_character">
    Historia postaci<br/>
  </div>
  <div id="CharacterInfo5" style="display: none;" class="kp2_character">
    Relacje postaci<br/>
  </div>
  <div id="CharacterInfo6" style="display: none;" class="kp2_character">
    Ciekawostki o postaci<br/>
  </div>
  </div>
  </div>
  <div class="kp2_author">
    <img src="https://dummyimage.com/50x50/ddd/000000.png"/>
    <b>Postać stworzona przez: i tu Twój nick</b> <br/>
    <b>Ostatnia aktualizacja: i tu data ostatniej aktualizacji</b>
  </div>

<script type="text/javascript">
function CharacterInfo1() {
  document.getElementById('CharacterInfo1').style.display='block';
  document.querySelectorAll('#CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo2() {
  document.getElementById('CharacterInfo2').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo3() {
  document.getElementById('CharacterInfo3').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo4() {
  document.getElementById('CharacterInfo4').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo5() {
  document.getElementById('CharacterInfo5').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo6() {
  document.getElementById('CharacterInfo6').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5').forEach(el => el.style.display='none');
}
</script>

Szablon karty postaci 1

Notka: wymiary szarych pól są tylko orientacyjne. Przesyłane obrazki mogą być większe.

Credits

Imię i nazwisko

Wiek: wiek postaci
Data urodzenia: data urodzenia
Płeć: płeć postaci
Rasa: rasa postaci
Pochodzenie: skąd postać pochodzi
Zawód: czym postać się zajmuje
Opis: krótki opis postaci, dosłownie w trzech zdaniach

Aparycja

Osobowość

Umiejętności

Historia

Relacje

Ciekawostki

Opis aparycji

Opis osobowości

Opis umiejętności

Historia postaci

Relacje postaci

Ciekawostki o postaci

Postać stworzona przez: i tu Twój nick
Ostatnia aktualizacja: i tu data ostatniej aktualizacji

Kod do skopiowania

<div class="kp2_grid1">
  <div class="kp2_Lflex">
    <div class="kp2_img"><img src="https://dummyimage.com/250x350/ddd/000000.png" /></div>
    <div class="kp2_credits"><a href="#" target="_blank">Credits</a></div>
  </div>
  <div class="kp2_Rflex">
    <div class="kp2_name">Imię i nazwisko</div>
  <div class="kp2_info">
    <b>Wiek:</b> wiek postaci<br />
    <b>Data urodzenia:</b> data urodzenia<br />
    <b>Płeć:</b> płeć postaci<br />
    <b>Rasa:</b> rasa postaci<br />
    <b>Pochodzenie:</b> skąd postać pochodzi<br />
    <b>Zawód:</b> czym postać się zajmuje<br />
    <b>Opis:</b> krótki opis postaci, dosłownie w trzech zdaniach<br />
  </div>
  </div>
  </div>
  <br />
  <div class="kp1_frame2">
  <div class="kp1_menu">
    <div class="kp1_button" onclick="javascript:CharacterInfo1()">Aparycja</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo2()">Osobowość</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo3()">Umiejętności</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo4()">Historia</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo5()">Relacje</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo6()">Ciekawostki</div>
  </div>
  <div class="kp1_text">
  <div class="kp1_character" id="CharacterInfo1" style="display: block;">
    Opis aparycji<br />
  </div>
  <div class="kp1_character" id="CharacterInfo2" style="display: none;">
    Opis osobowości<br />
  </div>
  <div class="kp1_character" id="CharacterInfo3" style="display: none;">
    Opis umiejętności<br />
  </div>
  <div class="kp1_character" id="CharacterInfo4" style="display: none;">
    Historia postaci<br />
  </div>
  <div class="kp1_character" id="CharacterInfo5" style="display: none;">
    Relacje postaci<br />
  </div>
  <div class="kp1_character" id="CharacterInfo6" style="display: none;">
    Ciekawostki o postaci<br />
  </div>
  </div>
  </div>

<div class="kp2_author">
  <img src="https://dummyimage.com/50x50/ddd/000000.png" />
  <b>Postać stworzona przez:</b> i tu Twój nick <br />
  <b>Ostatnia aktualizacja:</b> i tu data ostatniej aktualizacji
</div>

<script type="text/javascript">
function CharacterInfo1() {
  document.getElementById('CharacterInfo1').style.display='block';
  document.querySelectorAll('#CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo2() {
  document.getElementById('CharacterInfo2').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo3() {
  document.getElementById('CharacterInfo3').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo4() {
  document.getElementById('CharacterInfo4').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo5() {
  document.getElementById('CharacterInfo5').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo6() {
  document.getElementById('CharacterInfo6').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5').forEach(el => el.style.display='none');
}
</script>