not alone - 01:27
select your friend
folder: kim_doyoung
twenty-four singer
kim_doyoung.txt
about lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. plot ideas lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet.
touch.mp4
johnny_suh.txt
about lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. neutral lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus aptent maximus pulvinar justo lobortis phasellus nulla, nam tortor turpis eget pharetra tempus tempor laoreet. positive lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus aptent maximus pulvinar justo lobortis phasellus nulla, nam tortor turpis eget pharetra tempus tempor laoreet. negative lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus aptent maximus pulvinar justo lobortis phasellus nulla, nam tortor turpis eget pharetra tempus tempor laoreet.
folder: johnny_suh
twenty-five singer radio dj
receiver

this is a test message

just to be sure

oh hey look

this is just a very long message that i'm going to type out to see how it looks

nice

did u know

this can expand and scroll

just see

touch.mp3
touch - nct 127
folder: jung_jaehyun
jung_yoonoh twenty-three singer model
jung_jaehyun.txt
about lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. professional lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. platonic lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus aptent maximus pulvinar justo lobortis phasellus nulla, nam tortor turpis eget pharetra tempus tempor laoreet. romantic lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus aptent maximus pulvinar justo lobortis phasellus nulla, nam tortor turpis eget pharetra tempus tempor laoreet. antagonistic lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus quisque aptent maximus pulvinar justo lobortis phasellus nulla, suspendisse nam tortor turpis eget pharetra tempus tempor laoreet. lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie praesent, sociosqu ultrices cursus aptent maximus pulvinar justo lobortis phasellus nulla, nam tortor turpis eget pharetra tempus tempor laoreet.
receiver

another example

now just very short

peace out

folder: mystery.
404 error
folder: mystery.
404 error
folder: mystery.
404 error
folder: mystery.
404 error
folder: mystery.
404 error

WRAPPER.

CODE
[dohtml]<style>
@import url('https://moonien.github.io/yuenshipper01.css');

#CHARACTER {
--character-amount:3; /* adjust if you add more! */
--bg-img: url(IMAGE LINK, larger than 600x580);
}
</style>


<div id="CHARACTER" class="yuenshipper01">
<div class="yuenshipper01-title y-one">TITLE - 01:27</div>
<div class="yuenshipper01-box">



<div class="yuenshipper01-labels">
<div class="yuenshipper01-title y-first">select your friend</div>
<div class="yuenshipper01-labels-scrolls">

<input type="radio" id="yna-01" name="y-notalone" checked>
<label for="yna-01"><img title="CHARACTER NAME" src="IMAGE, larger than 80x80"></label>

<input type="radio" id="yna-02" name="y-notalone">
<label for="yna-02"><img title="CHARACTER NAME" src="IMAGE, larger than 80x80"></label>

<input type="radio" id="yna-03" name="y-notalone">
<label for="yna-03"><img title="CHARACTER NAME" src="IMAGE, larger than 80x80"></label>

</ ADD NEW CHARACTER LABELS HERE />








</ START OF CHARACTER CONTENT />


<div class="yuenshipper01-character-01">

FIRST CHARACTER - INPUT YOUR ELEMTS HERE

</div>





<div class="yuenshipper01-character-02">

SECOND CHARACTER - INPUT YOUR ELEMTS HERE

</div>





<div class="yuenshipper01-character-03">

THIRD CHARACTER - INPUT YOUR ELEMTS HERE

</div>






</ ADD NEW CHARACTER CONTENT HERE />








</ END OF CHARACTER CONTENT & CODE />


</div></div></div>
<a href="https://cttw.jcink.net/index.php?showuser=18258" title="delivered by yuen."></a>
</div>[/dohtml]

ELEMENT: TEXT FIELD.

CODE
<div class="yuenshipper01-character-text" style="z-index: NUMBER; top: NUMBERinPIXEL; left: NUMBERinPIXEL">

<div class="yuenshipper01-title">CHARACTER NAME.txt</div>
<div class="yuenshipper01-character-texting">

PLOTTER HERE
use <y1>HEADER</y1> for headlines, adjust as you need !

</div>
</div>

ELEMENT: FOLDER (SHORT FACTS).

CODE
<div class="yuenshipper01-character-list" style="z-index: NUMBER; top: NUMBERinPIXEL; left: NUMBERinPIXEL">

<div class="yuenshipper01-title">folder: CHARACTER NAME</div>
<div class="yuenshipper01-character-listing">
<span>ADD</span>
<span>AS MANY</span>
<span>AS YOU NEED</span>
<span>.txt IS ADDED AUTOMATICALLY</span>

</div>
</div>

ELEMENT: VIDEO DISPLAY.

CODE
<div class="yuenshipper01-character-video" style="z-index: NUMBER; top: NUMBERinPIXEL; left: NUMBERinPIXEL; --bg-img: url(IMAGE LINK, larger than 280x190);">

<div class="yuenshipper01-title">VIDEO FILE.mp4</div>

</div>

ELEMENT: MUSIC PLAYER.

CODE
<div class="yuenshipper01-character-music" style="z-index: NUMBER; top: NUMBERinPIXEL; left: NUMBERinPIXEL; --bg-img: url(IMAGE LINK, larger than 170x170)">

<div class="yuenshipper01-title">SONG FILE.mp3</div>
<center>SONG - ARTIST</center>

</div>

ELEMENT: CHAT OPTION.

CODE
<div class="yuenshipper01-character-chat" style="z-index: NUMBER; top: NUMBERinPIXEL; left: NUMBERinPIXEL">

<center>CONTACT NAME</center>
<div class="yuenshipper01-character-chatting">

<p class="y-left">A MESSAGE ON THE LEFT
<p class="y-left">A MESSAGE ON THE RIGHT

</div>
</div>

ELEMENT: CALL OPTION.

CODE
<div class="yuenshipper01-character-call" style="z-index: NUMBER; top: NUMBERinPIXEL; left: NUMBERinPIXEL; --bg-img: url(IMAGE LINK, larger than 180x270)">
<span></span></div>

ADD NEW CHARACTER: LABEL.
( adjust NUMBER to whatever character number it currently is; for 1-9, you need to add a 0 (i.e. 05)! )
( it needs to match with character content! )

CODE
<input type="radio" id="yna-NUMBER" name="y-notalone">
<label for="yna-NUMBER"><img title="CHARACTER NAME" src="IMAGE, larger than 80x80"></label>

ADD NEW CHARACTER: CONTENT.
( adjust NUMBER to whatever character number it currently is; for 1-9, you need to add a 0 (i.e. 05)! )
( it needs to match with character label ! )

CODE
<div class="yuenshipper01-character-NUMBER">

NTH CHARACTER - ADD YOUR ELEMENTS HERE!

</div>
http://cttw.jcink.net/index.php?showtopic=33381