<div class="parent">
<div id="passages"></div>
<div class="menu" data-passage="menu"><!--Side menu, editable in the sidemenu passage--></div>
</div>
<script>function myFunction() {
document.getElementById("myMenu").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropup-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>/* Do not remove the div, Needed to make the title pretty */<div class="title"><img src="images/logo.png" width="20%"></div><<titlepage>><h1>One Page
Template</h1>\
<p><<if Save.autosave.ok() and Save.autosave.has()>><<link "Resume Game">><<script>>Save.autosave.load()<</script>><</link>><</if>>
<<link "New Game" "Next">><</link>>
<<link "Load Game">><<run UI.saves()>><</link>>
<<link "Settings">><<run UI.settings()>><</link>></p>
/*You can also add whatever you want*/<<include "StoryDisplayTitle">>
/*<<include "navigation">>*/
<<include "sidemenu">><div>coming june 23</div>/*This page is currently hidden. Edit the Menu passage to make it appear!*/
<div> <<link '⮘'>><<run Engine.backward()>><</link>> | <<if State.length === State.size>>⮚<<else>><<link '⮚'>><<run Engine.forward()>><</link>><</if>> </div>Here you can put some info about the playerHere you can add some achivementsTemplate created by manonamora ([[Tumblr|https://manonamora-if.tumblr.com/]]/[[Itch|https://manonamora.itch.io/]]) on Twine (v2.5.1)/Tweego with Sugarcube (v2.36.1)
Assets:
* [[GoogleFonts|https://fonts.google.com]]
* [[OpenDyslexic|https://opendyslexic.org]]
Other:
* [[Sugarcube 2 Documentation|https://www.motoslave.net/sugarcube/2/docs/]]
* [[Twinery.org|https://twinery.org/]]
* [[W3 School|https://www.w3schools.com/]]/*This is where you should put your widgets (lines of code/text you don't to clutter your main passages
You can have as many widget passages as you want (as long as you tag them with "widget"
This one only has CSS-related ones. To be fair, it is best to use the tags as CSS class instead of a widget.*/
<<widget "titlepage">><style>
.parent {
height: fit-content;
margin: auto;
top: 0;
bottom: 0;
position: absolute;
left: 0;
right: 0;
}
.menu {display: none}
#passages {
height: auto;
padding: 0;
margin: auto;
text-transform:uppercase;
}
.passage { text-align: center;}
h1 {font-size: 250%;}
</style><</widget>><center><img src="images/profile.jpg" width="95%"></center><h1>Heading 1</h1>\
<h2>Heading 2</h2>\
<h3>Heading 3</h3>\
<h4>Heading 4</h4>\
<h5>Heading 5</h5>\
<h6>Heading 6</h6>\
<hr>
<center>''Lists:''</center>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<hr>
<center>''Basic Table:''</center>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</table>
<hr>
<center>''Links''</center>
//Basic://
[[Basic Macros]]
//As a list://
* [[Basic Macros]]
//With Div://
<div class="choice">[[Basic Macros]]</div><h2>Textbox</h2>\
<<textbox "_test" 2>>
<h2>Text Area</h2>\
<<textarea "_pieEssay" "">>
<h2>Radio Buttons</h2>\
What's your favorite pie?
<<radiobutton "_pie" "blueberry" autocheck>> Choice 1
<label><<radiobutton "_pie" "cherry" autocheck>> Choice 2 with a label </label>
<<radiobutton "_pie" "coconut cream" autocheck>> Choice 3
<h2>Number Box</h2>\
<<numberbox "_wager" 100>>
<h2>List Box</h2>\
<<listbox "_answer" autoselect>>
<<option "Option 1">>
<<option "Option 2">>
<<option "Option 3">>
<</listbox>>
<h2>Cycle</h2>\
<<cycle "_answers" autoselect>>
<<option "Option 1">>
<<option "Option 2">>
<<option "Option 3">>
<</cycle>>
<h2>Check Box</h2>\
<<checkbox "_pieBlueberry" false true autocheck>> Option 1
<label><<checkbox "_pieCherry" false true autocheck>> Option 2 with a label</label>
<<checkbox "_pieCoconutCream" false true autocheck>> Option 3
<h2>Button</h2>\
<<button "I do not do anything">><</button>>
[[End]]<<titlepage>><h1>END</h1>
<center><<button "Restart?">><<script>>UI.restart();<</script>><</button>> | <<button "Back">><<run Engine.backward()>><</button>></center>
/*You can add/change whatever you want*/<div class="dropdown">
<a onclick="myFunction()" class="dropbtn">MENU</a>
<div id="myMenu" class="dropup-content">
<<link 'PLAYER PAGE'>><<script>>
Dialog.setup("Player Character");
Dialog.wiki(Story.get("PlayerPage").processText());
Dialog.open();
<</script>><</link>>
<<link 'ACHIEVEMENTS'>><<script>>
Dialog.setup("Achievements");
Dialog.wiki(Story.get("Achievements").processText());
Dialog.open();
<</script>><</link>>
<<link 'CREDITS'>><<script>>
Dialog.setup("Credits");
Dialog.wiki(Story.get("Credits").processText());
Dialog.open();
<</script>><</link>>
<<link 'SAVES'>><<script>>UI.saves();<</script>><</link>>