visual novel work skin

chapter1.txt

<div class="page" align="justify"><a name="p0" rel="nofollow" id="p0"></a><br />
<div class="settingsbox">
<a href="https://archiveofourown.org/works/48168847/chapters/121469281#p1" rel="nofollow"><span class="settingsbutton1"><span class="settingstext">Desktop</span></span></a>
<a href="https://archiveofourown.org/works/48168847/chapters/121469305#p1" rel="nofollow"><span class="settingsbutton2"><span class="settingstext">Mobile</span></span></a>
</div>
</div>

chapter2.txt

<div class="audiobox1"> <audio loop>
<source src="https://raw.githubusercontent.com/wanningzinho/tai/main/HenCuo-beishang.mp3">
</audio></div>

<div class="storycontainer">


<div class="page" align="justify"><a name="p1" rel="nofollow" id="p1"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt="Background image is a setting on the outside, at the bottom of stone stairs. In the back, there is a tower, resembling ancient Chinese architecture. The sky is blue with a few purple and blue-ish, magical looking lights. At the bottom left of the page, there is the main character picture. He is a serious looking man, with dark long hair tied in a pony tail with a guan. He's wearing white robes with silver and very light blue details." /><span class="name">Main Character</span><span class="dialoguetext">Ok so first things first about this skin: in the actual fic I’m working on, I’m using that game’s assets, which I think is pushing really hard the limits of fair use/transformative work. </span><a href="#p2" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p2" rel="nofollow" id="p2"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">So, I didn’t feel comfortable using those here, in this non-fandom work. Which is why I’m using all these very simple and quickly assembled assets made by yours truly.</span><a href="#p3" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p3" rel="nofollow" id="p3"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">“Why is everything so pink?” I like pink, next question. </p>
“Comic Sans, really????” Yes, I am awful.
</span><a href="#p4" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p4" rel="nofollow" id="p4"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">For real though, feel free to edit on top of these or to use your own images, whatever, just make sure to use all my images as a template, so every image of yours has the exact same size as mine. That’s what will make this work, whatever the design you choose.
</span><a href="#p5" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p5" rel="nofollow" id="p5"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">The background picture is a screenshot from erha’s game, and the character’s sprites and background music are from there too.
</span><a href="#p6" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p6" rel="nofollow" id="p6"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">We're using <a href="https://archiveofourown.org/works/11514573"><strong>La_Temperanza’s CYOA work skin</strong></a>! And basically changing pages to change dialogue, characters, background etc. You only need to change chapters in two instances:
</span><a href="#p7" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p7" rel="nofollow" id="p7"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">1) when you want to change the background music; and 2) for the desktop and mobile versions. </p>
Also, needless to say this work skin only works on AO3 with creator’s style on, right ^^’’
</span><a href="#p8" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p8" rel="nofollow" id="p8"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">1) Background music works like this: the reader will click on the icon to play it and as long as they are in the same chapter, even while changing pages, it will keep playing. So if you want to set another music, you need to change chapters  (or you can not use bgm at all! this is very optional hehe)
</span><a href="#p9" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p9" rel="nofollow" id="p9"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">We have “audiobox1” at the top of the chapter, and “audiobox2”, at the very end. The first one is invisible, and is just the first element on the page so people using a screenreader can click play before the scene starts (also keep in mind to adjust the volume of your file, so it’s not too loud). 
</span><a href="#p10" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p10" rel="nofollow" id="p10"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">The second one is visible and clickable, on the top left corner of the image. If you don’t want to add music, just delete those two parts.
</span><a href="#p11" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p11" rel="nofollow" id="p11"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">Now, you have two ways you can break this fic: a chapter for each background music file, or a chapter each time you want to change the scene and bgm and ignore what i will say next. 
</span><a href="#p12" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p12" rel="nofollow" id="p12"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">The main difference is that in the first option, your fic will be more concise with, let’s say, around 3 or 5 chapters only. You will be linking back and forth between chapters when you want a scene with x or y music. The problem is that this may be troublesome for your reader, if they want to pause and resume reading on another occasion
</span><a href="#p13" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p13" rel="nofollow" id="p13"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">The other way is better for that, since if your reader paused on chapter 4, they can go back to chapter 4 and start again from there 
</span><a href="#p14" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p14" rel="nofollow" id="p14"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character<span class="screenreader">, thinking:</span></span><span class="dialoguetext">(well, they will be at the start of chapter 4, which means they will not be at the exact same page inside that chapter that they stopped, but it’s quicker that starting all over from chapter 1. This is not a problem for short stories
</span><a href="#p15" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p15" rel="nofollow" id="p15"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">The only thing is that this may easily cause your fic to have 10+ chapters, which is not really a problem.
</span><a href="#p16" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p16" rel="nofollow" id="p16"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">2) Regarding the desktop and mobile versions, this was a bit tricky to make mobile compatible, which is why my solution is this: on the very first chapter your reader will select desktop and mobile, like you did at the beginning of this tutorial. 
</span><a href="#p17" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p17" rel="nofollow" id="p17"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">Desktop links to chapter 2, the first scene of the fic. Mobile links to chapter 3, which is the same page with 3 changes: storycontainer -> storycontainermobile, page -> pagemobile, and before background you add "mobilescreen" and then close it before the next page <strong> at every page</strong>
</span><a href="#p18" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p18" rel="nofollow" id="p18"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">This way, even chapters will be for the desktop version, and odd chapters will be for the mobile version. So like, chapter 2 - first scene, will link to chapter 4 - second scene, and so on. </p>
 And chapter 3 - first scene mobile ver, will link to chapter 5 - second scene mobile ver, and so on. And with chapter 1 being just to select your device
</span><a href="#p19" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p19" rel="nofollow" id="p19"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">Also, a tip for this, since your work need to be read “all at once” and you have to link in between chapters, make a draft of your fic and create all the chapters you need. 
</span><a href="#p20" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p20" rel="nofollow" id="p20"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">Their link remains the same after you post your draft, so you can link everything and then post one chapter after the other all at once and yay, it will be working as intended!
</span><a href="#p21" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>

<div class="page" align="justify"><a name="p21" rel="nofollow" id="p21"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">You can make this fic interactive and “choose your adventure style”, or you can have it be a linear, single story, fic.
</span><a href="#p22" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p22" rel="nofollow" id="p22"></a><br />
<div class="background1">
<div class="dialogue">
<a href="#p23" rel="nofollow"><span class="choice1"><span class="choicetext"><span class="choicetext2">See, here you have options…</span></span></span></a>
<a href="#p23" rel="nofollow"><span class="choice2"><span class="choicetext"><span class="choicetext2">That could take you to different pages…</span></span></span></a>
<a href="#p23" rel="nofollow"><span class="choice3"><span class="choicetext"><span class="choicetext2">(It can have a slightly longer text too, taking up to two lines and etc etc see text etc!!)</span></span></span></a>
<a href="#p23" rel="nofollow"><span class="choice4"><span class="choicetext"><span class="choicetext2">If you only want 2 choices, use only choice2 and choice3</span></span></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p23" rel="nofollow" id="p23"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="Character 1 appears on the screen. He is a young man, with tan skin, dark hair in a ponytail, wearing dark blue and black robes. He has a hand on his waist and smiles gently, with his lips closed." /><span class="namechar">Character 1</span><span class="dialoguetextchar">Not here, though. They’re all linking to the same page~
</span><a href="#p24" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p24" rel="nofollow" id="p24"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">Ok, that was the general explanation, mostly about how this skin works (general idea). Now, on a more practical level:
</span><a href="#p25" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p25" rel="nofollow" id="p25"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">CSS is <a href="https://gist.github.com/wanningzinho/e6ff457ead78eaf8c7de764a227f5d7b"><strong>here</strong></a>. Copy and paste that to your work skin.</p>
HTML is <a href="https://gist.github.com/wanningzinho/836697b3358251017b833c6c17dc088d"><strong>here</strong></a>, each file is a chapter. This is the fic itself, and what you will be editing.
</span><a href="#p26" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p26" rel="nofollow" id="p26"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">For accessibility, I use “screenreader”, which creates an invisible text only read by screenreaders (it’s already in the work skin). Or, when there’s an image in the page, I use its alt text.  
</span><a href="#p27" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p27" rel="nofollow" id="p27"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">Just as a general disclaimer, I sucked at writing the alt text in this work ok! Because I was lazy and that’s not the focus of this fic - this is a tutorial, after all. But I recommend putting more care in the actual fic.
</span><a href="#p28" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p28" rel="nofollow" id="p28"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">Images <a href="https://ibb.co/album/qk5qVJ"><strong>here</strong></a>. All images are in the CSS, so you have to make the appropriate changes there (the background image of the scenes is there too! So for every background you will use, you have to edit “background1”, add a “background2”, etc) 
</span><a href="#p29" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p29" rel="nofollow" id="p29"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">(Font family and text color changes must be made in the CSS too). The only images on the HTML is the characters' sprites. 
</span><a href="#p30" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p30" rel="nofollow" id="p30"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">Ok, remember how I said you should make all images the same size? This is still true here, which is why some images have an empty space. Like, I have two characters with different sizes?
</span><a href="#p31" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p31" rel="nofollow" id="p31"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt="Character 2 appears on the screen. He is a young man with long dark hair, fancy dark blue robes, is smiling and is a little shorter than Character 1." /><span class="namechar">Chatacter 2</span><span class="dialoguetextchar">So, the shorter one’s image is technically the same size as the other, but he’s positioned a bit lower on the pic, and on top of him there’s an invisible space! Oh, and for characters, only the height of the image is important. 
</span><a href="#p32" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p32" rel="nofollow" id="p32"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">You can have your characters’ sprites’ in different widths. But not your MC though! I would recommend having a pic exactly the same size as the one I used, so you don’t have any problem with the text and etc.
</span><a href="#p33" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p33" rel="nofollow" id="p33"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="namechar">Chatacter 1</span><span class="dialoguetextchar">Uh, ok, there’s another thing. Two things actually. 
</span><a href="#p34" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p34" rel="nofollow" id="p34"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="actionnarrative">1) In the desktop chapters, you have all the pages inside your chapter etc etc and you’re ready to close the “storycontainer” div, right? Wrong! 
</span><a href="#p35" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p35" rel="nofollow" id="p35"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="actionnarrative">You need to create one more page that won’t be linked to any other page. Why? Because. jdnasjndak The last page looks odd if you don’t do that! Don’t question it, just do it! That’s what I did, it was easier than trying to fix it lmao
</span><a href="#p36" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>



<div class="page" align="justify"><a name="p36" rel="nofollow" id="p36"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="actionnarrative">2) On the mobile version, if you go to a chapter by chapter navigation instead of the links between scenes, the first scene of that chapter will look bad. It will be too far in the left and cut almost by half 
</span><a href="#p37" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p37" rel="nofollow" id="p37"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="actionnarrative">(if you’re on mobile, go to chapter 3 through the AO3 buttons later and see what I mean). It’s just a thing that happens and I didn’t think it was worth it to spend any more time trying to fix that.
</span><a href="#p38" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>



<div class="page" align="justify"><a name="p38" rel="nofollow" id="p38"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" Character 2 leaves the scene." /><span class="actionnarrative">It’s not a problem for small fics that, again, can be read on one sitting. However, if your fic is too long an you think your reader might be taking some breaks, it can be awkward when they get back to the chapter they stopped at!
</span><a href="#p39" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p39" rel="nofollow" id="p39"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><span class="actionnarrative">The solution I offer is to create something similar to the first page, but instead of having two buttons you put only one saying something like, idk! Checkpoint! Resume reading! And that button will link you to that chapter’s “p1”
</span><a href="#p40" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p40" rel="nofollow" id="p40"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">So like, remember how I use “mobilescreen” in mobile chapters? Not for this button thing. 
</span><a href="#p41" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p41" rel="nofollow" id="p41"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">Put the button Then add lots of line breaks (&lt;br /&gt;) and THEN your mobile chapter.
</span><a href="#p42" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p42" rel="nofollow" id="p42"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><span class="namechar">Character 1</span><span class="dialoguetextchar">Ok so that’s it! This will make more sense as you work and play around with the skin. If you have any questions, feel free to stop by the comments.
</span><a href="#p43" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="p43" rel="nofollow" id="p43"></a><br />
<div class="background1">
<div class="dialogue">
<a href="https://archiveofourown.org/works/48168847/chapters/121469209#p0" rel="nofollow"><span class="choice2"><span class="choicetext"><span class="choicetext2">Start over.</span></span></span></a>
<a href="https://archiveofourown.org/works/48168847/chapters/121469209#p0" rel="nofollow"><span class="choice3"><span class="choicetext"><span class="choicetext2">I didn’t make a single button in the center of uh. Start over 2.</span></span></span></a>
</div>
</div>
</div>


<div class="page" align="justify"><a name="pfalse" rel="nofollow" id="pfalse"></a><br />
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><span class="namechar">Character 1</span><span class="dialoguetextchar">Ok so that’s it! This will make more sense as you work and play around with the skin. If you have any questions, feel free to stop by the comments.
</span><a href="#pfalse" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>




</div>

<div class="audiobox2"> <audio loop>
<source src="https://raw.githubusercontent.com/wanningzinho/tai/main/HenCuo-beishang.mp3">
</audio></div>

chapter3.txt

<div class="mobilescreen">
<div class="audiobox1"> <audio loop>
<source src="https://raw.githubusercontent.com/wanningzinho/tai/main/HenCuo-beishang.mp3">
</audio></div>
</div>


<div class="storycontainermobile">


<div class="pagemobile" align="justify"><a name="p1" rel="nofollow" id="p1"></a><br />

<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt="Background image is a setting on the outside, at the bottom of stone stairs. In the back, there is a tower, resembling ancient Chinese architecture. The sky is blue with a few purple and blue-ish, magical looking lights. At the bottom left of the page, there is the main character picture. He is a serious looking man, with dark long hair tied in a pony tail with a guan. He's wearing white robes with silver and very light blue details." /><span class="name">Main Character</span><span class="dialoguetext">Ok so first things first about this skin: in the actual fic I’m working on, I’m using that game’s assets, which I think is pushing really hard the limits of fair use/transformative work. </span><a href="#p2" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>

<div class="pagemobile" align="justify"><a name="p2" rel="nofollow" id="p2"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">So, I didn’t feel comfortable using those here, in this non-fandom work. Which is why I’m using all these very simple and quickly assembled assets made by yours truly.</span><a href="#p3" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>

<div class="pagemobile" align="justify"><a name="p3" rel="nofollow" id="p3"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">“Why is everything so pink?” I like pink, next question. </p>
“Comic Sans, really????” Yes, I am awful.
</span><a href="#p4" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p4" rel="nofollow" id="p4"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">For real though, feel free to edit on top of these or to use your own images, whatever, just make sure to use all my images as a template, so every image of yours has the exact same size as mine. That’s what will make this work, whatever the design you choose.
</span><a href="#p5" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p5" rel="nofollow" id="p5"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">The background picture is a screenshot from erha’s game, and the character’s sprites and background music are from there too.
</span><a href="#p6" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p6" rel="nofollow" id="p6"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">We're using <a href="https://archiveofourown.org/works/11514573"><strong>La_Temperanza’s CYOA work skin</strong></a>! And basically changing pages to change dialogue, characters, background etc. You only need to change chapters in two instances:
</span><a href="#p7" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p7" rel="nofollow" id="p7"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">1) when you want to change the background music; and 2) for the desktop and mobile versions. </p>
Also, needless to say this work skin only works on AO3 with creator’s style on, right ^^’’
</span><a href="#p8" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p8" rel="nofollow" id="p8"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">1) Background music works like this: the reader will click on the icon to play it and as long as they are in the same chapter, even while changing pages, it will keep playing. So if you want to set another music, you need to change chapters  (or you can not use bgm at all! this is very optional hehe)
</span><a href="#p9" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p9" rel="nofollow" id="p9"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">We have “audiobox1” at the top of the chapter, and “audiobox2”, at the very end. The first one is invisible, and is just the first element on the page so people using a screenreader can click play before the scene starts (also keep in mind to adjust the volume of your file, so it’s not too loud). 
</span><a href="#p10" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p10" rel="nofollow" id="p10"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">The second one is visible and clickable, on the top left corner of the image. If you don’t want to add music, just delete those two parts.
</span><a href="#p11" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p11" rel="nofollow" id="p11"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">Now, you have two ways you can break this fic: a chapter for each background music file, or a chapter each time you want to change the scene and bgm and ignore what i will say next. 
</span><a href="#p12" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p12" rel="nofollow" id="p12"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">The main difference is that in the first option, your fic will be more concise with, let’s say, around 3 or 5 chapters only. You will be linking back and forth between chapters when you want a scene with x or y music. The problem is that this may be troublesome for your reader, if they want to pause and resume reading on another occasion
</span><a href="#p13" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p13" rel="nofollow" id="p13"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">The other way is better for that, since if your reader paused on chapter 4, they can go back to chapter 4 and start again from there 
</span><a href="#p14" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p14" rel="nofollow" id="p14"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character<span class="screenreader">, thinking:</span></span><span class="dialoguetext">(well, they will be at the start of chapter 4, which means they will not be at the exact same page inside that chapter that they stopped, but it’s quicker that starting all over from chapter 1. This is not a problem for short stories
</span><a href="#p15" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p15" rel="nofollow" id="p15"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">The only thing is that this may easily cause your fic to have 10+ chapters, which is not really a problem.
</span><a href="#p16" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p16" rel="nofollow" id="p16"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">2) Regarding the desktop and mobile versions, this was a bit tricky to make mobile compatible, which is why my solution is this: on the very first chapter your reader will select desktop and mobile, like you did at the beginning of this tutorial. 
</span><a href="#p17" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p17" rel="nofollow" id="p17"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">Desktop links to chapter 2, the first scene of the fic. Mobile links to chapter 3, which is the same page with 3 changes: storycontainer -> storycontainermobile, page -> pagemobile, and before background you add "mobilescreen" and then close it before the next page <strong> at every page</strong>
</span><a href="#p18" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p18" rel="nofollow" id="p18"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">This way, even chapters will be for the desktop version, and odd chapters will be for the mobile version. So like, chapter 2 - first scene, will link to chapter 4 - second scene, and so on. </p>
 And chapter 3 - first scene mobile ver, will link to chapter 5 - second scene mobile ver, and so on. And with chapter 1 being just to select your device
</span><a href="#p19" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p19" rel="nofollow" id="p19"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">Also, a tip for this, since your work need to be read “all at once” and you have to link in between chapters, make a draft of your fic and create all the chapters you need. 
</span><a href="#p20" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p20" rel="nofollow" id="p20"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><span class="actionnarrative">Their link remains the same after you post your draft, so you can link everything and then post one chapter after the other all at once and yay, it will be working as intended!
</span><a href="#p21" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p21" rel="nofollow" id="p21"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">You can make this fic interactive and “choose your adventure style”, or you can have it be a linear, single story, fic.
</span><a href="#p22" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p22" rel="nofollow" id="p22"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<a href="#p23" rel="nofollow"><span class="choice1"><span class="choicetext"><span class="choicetext2">See, here you have options…</span></span></span></a>
<a href="#p23" rel="nofollow"><span class="choice2"><span class="choicetext"><span class="choicetext2">That could take you to different pages…</span></span></span></a>
<a href="#p23" rel="nofollow"><span class="choice3"><span class="choicetext"><span class="choicetext2">(It can have a slightly longer text too, taking up to two lines and etc etc see text etc!!)</span></span></span></a>
<a href="#p23" rel="nofollow"><span class="choice4"><span class="choicetext"><span class="choicetext2">If you only want 2 choices, use only choice2 and choice3</span></span></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p23" rel="nofollow" id="p23"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="Character 1 appears on the screen. He is a young man, with tan skin, dark hair in a ponytail, wearing dark blue and black robes. He has a hand on his waist and smiles gently, with his lips closed." /><span class="namechar">Character 1</span><span class="dialoguetextchar">Not here, though. They’re all linking to the same page~
</span><a href="#p24" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p24" rel="nofollow" id="p24"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">Ok, that was the general explanation, mostly about how this skin works (general idea). Now, on a more practical level:
</span><a href="#p25" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p25" rel="nofollow" id="p25"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">CSS is <a href="https://gist.github.com/wanningzinho/e6ff457ead78eaf8c7de764a227f5d7b"><strong>here</strong></a>. Copy and paste that to your work skin.</p>
HTML is <a href="https://gist.github.com/wanningzinho/836697b3358251017b833c6c17dc088d"><strong>here</strong></a>, each file is a chapter. This is the fic itself, and what you will be editing.
</span><a href="#p26" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p26" rel="nofollow" id="p26"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">For accessibility, I use “screenreader”, which creates an invisible text only read by screenreaders (it’s already in the work skin). Or, when there’s an image in the page, I use its alt text.  
</span><a href="#p27" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p27" rel="nofollow" id="p27"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">Just as a general disclaimer, I sucked at writing the alt text in this work ok! Because I was lazy and that’s not the focus of this fic - this is a tutorial, after all. But I recommend putting more care in the actual fic.
</span><a href="#p28" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p28" rel="nofollow" id="p28"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">Images <a href="https://ibb.co/album/qk5qVJ"><strong>here</strong></a>. All images are in the CSS, so you have to make the appropriate changes there (the background image of the scenes is there too! So for every background you will use, you have to edit “background1”, add a “background2”, etc) 
</span><a href="#p29" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p29" rel="nofollow" id="p29"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">(Font family and text color changes must be made in the CSS too). The only images on the HTML is the characters' sprites. 
</span><a href="#p30" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p30" rel="nofollow" id="p30"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><span class="actionnarrative">Ok, remember how I said you should make all images the same size? This is still true here, which is why some images have an empty space. Like, I have two characters with different sizes?
</span><a href="#p31" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p31" rel="nofollow" id="p31"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt="Character 2 appears on the screen. He is a young man with long dark hair, fancy dark blue robes, is smiling and is a little shorter than Character 1." /><span class="namechar">Chatacter 2</span><span class="dialoguetextchar">So, the shorter one’s image is technically the same size as the other, but he’s positioned a bit lower on the pic, and on top of him there’s an invisible space! Oh, and for characters, only the height of the image is important. 
</span><a href="#p32" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p32" rel="nofollow" id="p32"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">You can have your characters’ sprites’ in different widths. But not your MC though! I would recommend having a pic exactly the same size as the one I used, so you don’t have any problem with the text and etc.
</span><a href="#p33" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p33" rel="nofollow" id="p33"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="namechar">Chatacter 1</span><span class="dialoguetextchar">Uh, ok, there’s another thing. Two things actually. 
</span><a href="#p34" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p34" rel="nofollow" id="p34"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="actionnarrative">1) In the desktop chapters, you have all the pages inside your chapter etc etc and you’re ready to close the “storycontainer” div, right? Wrong! 
</span><a href="#p35" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p35" rel="nofollow" id="p35"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="actionnarrative">You need to create one more page that won’t be linked to any other page. Why? Because. jdnasjndak The last page looks odd if you don’t do that! Don’t question it, just do it! That’s what I did, it was easier than trying to fix it lmao
</span><a href="#p36" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>



<div class="pagemobile" align="justify"><a name="p36" rel="nofollow" id="p36"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="actionnarrative">2) On the mobile version, if you go to a chapter by chapter navigation instead of the links between scenes, the first scene of that chapter will look bad. It will be too far in the left and cut almost by half 
</span><a href="#p37" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p37" rel="nofollow" id="p37"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" " /><img class="character2" src="https://i.ibb.co/T0dVWqV/xm.png" alt=" " /><span class="actionnarrative">(if you’re on mobile, go to chapter 3 through the AO3 buttons later and see what I mean). It’s just a thing that happens and I didn’t think it was worth it to spend any more time trying to fix that.
</span><a href="#p38" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>



<div class="pagemobile" align="justify"><a name="p38" rel="nofollow" id="p38"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt=" Character 2 leaves the scene." /><span class="actionnarrative">It’s not a problem for small fics that, again, can be read on one sitting. However, if your fic is too long an you think your reader might be taking some breaks, it can be awkward when they get back to the chapter they stopped at!
</span><a href="#p39" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p39" rel="nofollow" id="p39"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><span class="actionnarrative">The solution I offer is to create something similar to the first page, but instead of having two buttons you put only one saying something like, idk! Checkpoint! Resume reading! And that button will link you to that chapter’s “p1”
</span><a href="#p40" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p40" rel="nofollow" id="p40"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">So like, remember how I use “mobilescreen” in mobile chapters? Not for this button thing. 
</span><a href="#p41" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p41" rel="nofollow" id="p41"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><img class="mc" src="https://i.ibb.co/6XhFBFP/cwn.png" alt=" " /><span class="name">Main Character</span><span class="dialoguetext">Put the button Then add lots of line breaks (&lt;br /&gt;) and THEN your mobile chapter.
</span><a href="#p42" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p42" rel="nofollow" id="p42"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><span class="namechar">Character 1</span><span class="dialoguetextchar">Ok so that’s it! This will make more sense as you work and play around with the skin. If you have any questions, feel free to stop by the comments.
</span><a href="#p43" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="p43" rel="nofollow" id="p43"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<a href="https://archiveofourown.org/works/48168847/chapters/121469209#p0" rel="nofollow"><span class="choice2"><span class="choicetext"><span class="choicetext2">Start over.</span></span></span></a>
<a href="https://archiveofourown.org/works/48168847/chapters/121469209#p0" rel="nofollow"><span class="choice3"><span class="choicetext"><span class="choicetext2">I didn’t make a single button in the center of uh. Start over 2.</span></span></span></a>
</div>
</div>
</div>
</div>


<div class="pagemobile" align="justify"><a name="pfalse" rel="nofollow" id="pfalse"></a><br />
<div class="mobilescreen">
<div class="background1">
<div class="dialogue">
<span class="dialoguebox"></span><img class="character1" src="https://i.ibb.co/Pj1C65h/mr.png" alt="  " /><span class="namechar">Character 1</span><span class="dialoguetextchar">Ok so that’s it! This will make more sense as you work and play around with the skin. If you have any questions, feel free to stop by the comments.
</span><a href="#pfalse" rel="nofollow"><span class="next"></span></a>
</div>
</div>
</div>
</div>




</div>

<div class="mobilescreen">
<div class="audiobox2"> <audio loop>
<source src="https://raw.githubusercontent.com/wanningzinho/tai/main/HenCuo-beishang.mp3">
</audio>
</div>
</div>
</div>