39 lines
2.4 KiB
HTML
39 lines
2.4 KiB
HTML
|
<div id="intro-modal" class="modal fade" tabindex="-1" role="dialog">
|
|||
|
|
<div class="modal-dialog">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|||
|
|
<h4 class="modal-title" id="intro-box-header">Welcome to TerranQuest!</h4>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body" id="intro-box-body-1">
|
|||
|
|
<p>TerranQuest is a video game that makes you go outside. Step outdoors and discover a fantasy world overlapping our own.</p>
|
|||
|
|
<p>It's dangerous to adventure alone, read this:</p>
|
|||
|
|
<ol class="list-group">
|
|||
|
|
<li class="list-group-item">There are different types of magic in the world.</li>
|
|||
|
|
<li class="list-group-item">Some types of magic are stronger in certain types of terrain.</li>
|
|||
|
|
<li class="list-group-item">Weather can also affect the flow of magic through the land.</li>
|
|||
|
|
<li class="list-group-item">There are strong points of magic near important landmarks.</li>
|
|||
|
|
<li class="list-group-item">These points of magic can be transmuted into different types of magic.</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body" id="intro-box-body-2" style='display: none;'>
|
|||
|
|
<p>Many years ago, there was a disagreement between the
|
|||
|
|
different magical clans. A secret war, hidden from
|
|||
|
|
non-magical peoples, has festered just under the surface.
|
|||
|
|
Whichever clan controls all the magical points, controls the world.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" onclick="gotointropage2();" class="btn btn-default" id="gotopage2-btn"><i class="fa fa-arrow-right"></i> Next</button>
|
|||
|
|
<button type="button" data-dismiss="modal" class="btn btn-default" style="display: none;" id="close-intro"><i class="fa fa-check"></i> OK</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
function gotointropage2() {
|
|||
|
|
$('#intro-box-body-1').css('display', 'none');
|
|||
|
|
$('#intro-box-body-2').css('display', '');
|
|||
|
|
$('#gotopage2-btn').css('display', 'none');
|
|||
|
|
$('#close-intro').css('display', '');
|
|||
|
|
}
|
|||
|
|
</script>
|