Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
,,,,<header>
<div class="decoration-i">✦</div>
<div class="decoration-ii">✦</div>
<div class="decoration-iii">✦</div>
<div class="decoration-v">✦</div>
<div id="header-top">
<!-- SOCIAL MEDIA ICONS (POPULATED IN THE social media PASSAGE) -->
<nav class="social-media" data-passage="social media">
</nav>
<div class="middle">
<!-- STORY TITLE ETC. WHEN MENU IS CLOSED -->
<div class="title" data-passage="story title">
</div>
<!-- OPEN MENU ICON -->
<span id="menu-toggle">
<i class="fas fa-chevron-down"></i>
</span>
</div>
<!-- SETTINGS, RESTART, SAVE & FULLSCREEN BUTTONS -->
<nav class="tools">
<span id="header-settings-button"><i class="fas fa-cog"></i></span>
<span id="header-restart-button"><i class="fas fa-undo"></i></span>
<span id="header-fullscreen-button"><i class="fas fa-expand-arrows-alt"></i></span>
</nav>
</div>
<div id="header-body">
<div class="content">
<!-- STORY LINKS (POPULATED IN THE story links PASSAGE) -->
<ul id="story-menu" data-passage="story links">
</ul>
<!-- STORY LOGO (POPULATED IN THE story logo PASSAGE) -->
<div class="logo-image" data-passage="story logo">
</div>
</div>
</div>
</div> <!-- header body end tag -->
</header>
<div id="main">
<div class="decoration-separator">
<span>✦</span>
<span>✦</span>
<span>✦</span>
<span>✦</span>
</div>
<div id="passages">
</div>
<div class="decoration-separator">
<span>✦</span>
<span>✦</span>
<span>✦</span>
<span>✦</span>
</div>
</div> <!-- #main -->
<footer>
<!-- BACKWARDS AND FORWARDS BUTTONS, YOU CAN REMOVE THIS IF YOU DON'T WANT THEM IN YOUR STORY -->
<span id="backwards-button"><i class="fas fa-chevron-left"></i></span>
<span>✦</span>
<span id="forwards-button"><i class="fas fa-chevron-right"></i></span>
</footer>// FOR SETTING STATS THAT NEED TO BE IN PLAY AT THE START OF THE STORY
<<set $firstname = "Eleanor">>
<<set $lastname = "Dashwood">>
<<set $nickname = "Ellie">><div class="box header">
<h1>$firstname $lastname</h1>
<h2>"$nickname"</h2>
<span class="star">✦</span>
<ul class="facts">
<li>Female</li>
<li>26</li>
<li>Human</li>
</ul>
</div>
<div class="box">
<h3>Appearance</h3>
<i>Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </i>
</div>
<!-- BOX WITH GROUP OF STATS -->
<div class="box">
<!-- STAT GROUP TITLE -->
<h3>Personality</h3>
<div class="stat-group">
<div class="stat">
<div class="stat-labels">
<span>Kind 70%</span>
<span>✦</span>
<span>Cruel 30%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
<div class="stat">
<div class="stat-labels">
<span>Shy 70%</span>
<span>✦</span>
<span>Bold 30%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
</div>
</div>
<div class="box">
<h3>Skills</h3>
<div class="stat-group">
<div class="stat">
<div class="stat-labels">
<span>Embroidery</span>
<span>✦</span>
<span>70%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
<div class="stat">
<div class="stat-labels">
<span>Dancing</span>
<span>✦</span>
<span>70%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
</div>
</div>
<!-- IMPORTAN! INCLUDE THE CODE BELOW ON ALL STAT PAGES TO MAKE SURE THE LINK RETURNS THE USER TO THE LAST PASSAGE. IF YOU USE A NORMAL RETURN LINK IT WILL SIMPLY LOOP -->
<span style="display: block; text-align: center;">
<<link "« Return to game" $return>><</link>>
</span><!-- POPULATES STORY LINKS IN THE HEADER MENU -->
<li>[[About]]</li>
<li> [[Documentation]] </li>
<li> [[Game Rules]] </li><div class="box header">
<h1>$firstname $lastname</h1>
<h2>"$nickname"</h2>
<span class="star">✦</span>
<ul class="facts">
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
<!-- TEXT BOX BUT WITHOUT BACKGROUND -->
<div class="box blank">
<h3>Appearance</h3>
<i>$firstname is tall and of average size with golden blond hair and pale skin.</i>
</div>
<!-- STAT BOX BUT WITHOUT BACKGROUND -->
<div class="box blank">
<!-- STAT GROUP TITLE -->
<h3>Personality</h3>
<div class="stat-group">
<div class="stat">
<div class="stat-labels">
<span>Kind 70%</span>
<span>✦</span>
<span>Cruel 30%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
<div class="stat">
<div class="stat-labels">
<span>Shy 70%</span>
<span>✦</span>
<span>Bold 30%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
</div>
</div>
<div class="box blank">
<h3>Skills</h3>
<div class="stat-group">
<div class="stat">
<div class="stat-labels">
<span>Embroidery</span>
<span>✦</span>
<span>70%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
<div class="stat">
<div class="stat-labels">
<span>Dancing</span>
<span>✦</span>
<span>70%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
</div>
</div>
<!-- IMPORTAN! INCLUDE THE CODE BELOW ON ALL STAT PAGES TO MAKE SURE THE LINK RETURNS THE USER TO THE LAST PASSAGE. IF YOU USE A NORMAL RETURN LINK IT WILL SIMPLY LOOP -->
<span style="display: block; text-align: center;"><<link "« Return to game" $return>><</link>></span><nav>
[[About]]
[[How to Play the Game]]
[[Documentation]]
<<link "Settings">><<run UI.settings();>><</link>>
</nav>
<div class=“logo-image”><img src="images/gamelogo.png" alt="logo" border="0" width="500" height="500"></div>
!Heading 1
!!Heading 2
!!!Heading 3
Normal text. Normal text. Normal text. Normal text. Normal text. //emphasised text//. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. ''strong text''. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. __underlined text__ Normal text. Normal text. Normal text. Normal text. Normal text.
----
!!!Unordered List:
* List item 1
* List item 2
!!!Links
[[More Styles]]
[[More Styles]]
<<button "Button" "More Styles">><</button>><!-- POPULATE THE SOCIAL MEDIA LINKS -->
<a href="https://www.instagram.com/ourfuturenormal" target="_blank"><i class="fab fa-instagram-square"></i></a>
<a href="https://thefutureisvegan.tumblr.com" target="_blank"><i class="fab fa-tumblr"></i></a>
<a href="https://www.pinterest.co.uk/deliciouslyella/_created/" target="_blank"><i class="fab fa-pinterest"></i></a>
<!-- TITLE ON THE TOP OF THE PAGE IS POPULATED HERE -->
<img src="images/title.png" alt="logo" border="0" width="250" height="50"><!-- STORY BANNER/LOGO POPULATED HERE -->
<div class=“logo-image”><img src="images/gamelogo.png" alt="logo" border="0"></div>!!! Checkbox:
<<checkbox "$checkboxVar1" false true autocheck>> Checkbox option 1
<<checkbox "$checkboxVar2" false true autocheck>> Checkbox option 2
<<checkbox "$checkboxVar3" false true autocheck>> Checkbox option 3
!!! Cycle:
<<cycle "$cycleVar" autoselect>>
<<option "Option 1">>
<<option "Option 2">>
<<option "Option 3">>
<<option "Option 4">>
<<option "Option 5">>
<</cycle>>
!!! Listbox:
<<listbox "$listboxVar" autoselect>>
<<option "Option 1">>
<<option "Option 2">>
<<option "Option 3">>
<<option "Option 4">>
<<option "Option 5">>
<</listbox>>
!!! Radiobutton:
<<radiobutton "$radiobuttonVar" "option 1" autocheck>> Option 1
<<radiobutton "$radiobuttonVar" "option 2" autocheck>> Option 2
<<radiobutton "$radiobuttonVar" "option 3" autocheck>> Option 3
!!! Textarea:
<<textarea "$textareaVar" "Type text here..">>
!!! Textbox:
<<textbox "$textboxVar" "Type answer here">>
<<button "Autosave" "Autosave">><</button>><<notify>>Autosave complete!<</notify>>
This passage autosaves, and the next time the game opens the player will be able to resume from here. <!-- THIS PASSAGE IS NOT TAGGED WITH STYLE PASSAGE BUT RATHER HAS A FEW ELEMENTS WRAPPED IN THAT CLASS TO ONLY STYLE CERTAIN ELEMENTS -->
<!-- REMOVING CLASS BOX HEADER FROM TITLE TO GET DIFFERENT HEADER -->
<h1>Title</h1>
<h2>Subtitle</h2>
<!-- ADDING STAT PASSAGE CLASS TO UL LIST TO KEEP STYLING FOR THIS ELEMENT -->
<div class="stat-passage">
<ul class="facts">
<li>Female</li>
<li>26</li>
<li>Human</li>
</ul>
</div>
<br><br>
<div class="box blank">
<h2>Appearance</h2>
<i>$firstname is tall and of average size with golden blond hair and pale skin.</i>
</div>
<!-- ADDING STAT PASSAGE CLASS TO KEEP STYLING S-->
<div class="stat-passage">
<div class="box blank">
<!-- STAT GROUP TITLE -->
<h3>Personality</h3>
<div class="stat-group">
<div class="stat">
<div class="stat-labels">
<span>Kind 70%</span>
<span>✦</span>
<span>Cruel 30%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
<div class="stat">
<div class="stat-labels">
<span>Shy 70%</span>
<span>✦</span>
<span>Bold 30%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
</div>
</div>
<div class="box blank">
<h3>Skills</h3>
<div class="stat-group">
<div class="stat">
<div class="stat-labels">
<span>Embroidery</span>
<span>✦</span>
<span>70%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
<div class="stat">
<div class="stat-labels">
<span>Dancing</span>
<span>✦</span>
<span>70%</span>
</div>
<div class="stat-bar-container">
<div class="stat-bar"></div>
</div>
</div>
</div>
</div>
</div>
<!-- IMPORTAN! INCLUDE THE CODE BELOW ON ALL STAT PAGES TO MAKE SURE THE LINK RETURNS THE USER TO THE LAST PASSAGE. IF YOU USE A NORMAL RETURN LINK IT WILL SIMPLY LOOP -->
<span style="display: block; text-align: center;"><<link "« Return to game" $return>><</link>></span>Double-click this passage to edit it.Double-click this passage to edit it.