You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
systers/footer/manual-home.frag.html

69 lines
2.2 KiB
HTML

<div class="ml-3 mt-4 footer">
<!-- Trigger/Open The Modal -->
<button id="manualBtn">Manual</button>
<!-- The Modal -->
<div id="manualModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close2">&times;</span>
<div>
<b>Zoom & Rotate</b><br>
&nbsp;Click on the cards and see what happens!<img src="images/rotate.gif" class="rotate" width=260px/>
<br>
<b>Card types</b><br><br>
&nbsp;The Quest card:<br>
When you receive a quest card, a description of a situation appears, and you are asked to choose what you would do.
According to your choice, a different path of the story will appear.<br>
&nbsp;The Papyrus card:<br> When you get a Papyrus card, the documentation of a real story appears. These stories are part of a wide range of practices, methods, and tools, developed by womxn in tech and feminist hackers.<br>
&nbsp;The Special card:<br>
A special card may include a spell, a hidden gallery or images, or other extra special material! <br>
&nbsp;The Game-Over card:<br>
This is a dead-end. You will have to restart the game. <br><br><br>
<b>Choose Paths</b><br><br>
&nbsp;The&nbsp;&nbsp;&nbsp;&nbsp;symbol, next to a path, indicates that you will be directed to the <a class="wikilink" target="_blank" rel="noopener noreferrer" href="https://hub.xpub.nl/systers/mediawiki/">Wiki</a>, to edit a page.<br>
&nbsp;The&nbsp;&nbsp;&nbsp;&nbsp;symbol, next to a path, indicates that you will be directed to an external website.<br><br>
</div>
</div>
</div>
</div>
<script>
// Get the modal
var modal2 = document.getElementById("manualModal");
// Get the button that opens the modal
var btn2 = document.getElementById("manualBtn");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
</script>