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> |