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.
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
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>
