Modals now don't slide in

master
Skylar Ittner 8 years ago
parent 0e90d8d922
commit b4b3f320da

@ -15,50 +15,50 @@
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<div id="intro-modal" class="modal fade" tabindex="-1" role="dialog"> <div id="intro-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="intro-box-header">Welcome to TerranQuest!</h4> <h4 class="modal-title" id="intro-box-header">Welcome to TerranQuest!</h4>
</div> </div>
<div class="modal-body" id="intro-box-body-1"> <div class="modal-body" id="intro-box-body-1">
<!-- First page of text --> <!-- First page of text -->
<p>There are seven types of magic in this world. Six elements of nature: water, fire, earth, wind, light, and dark. There is also a seventh element: life. Life is the source of all magical power.</p> <p>There are seven types of magic in this world. Six elements of nature: water, fire, earth, wind, light, and dark. There is also a seventh element: life. Life is the source of all magical power.</p>
<p>Long ago, the wielders of the six elements were united as one. The magics were harnessed with responsibility and respect.</p> <p>Long ago, the wielders of the six elements were united as one. The magics were harnessed with responsibility and respect.</p>
<p>Then disagreement and discord arose. Some become jealous of others. A great war followed, destroying much life. As a result of this bloodshed, the magic wilted and died.</p> <p>Then disagreement and discord arose. Some become jealous of others. A great war followed, destroying much life. As a result of this bloodshed, the magic wilted and died.</p>
<p>Over time, the magic sunk deep into the Earth, living on only in dreams. Science forgot magic, and ancient knowledge was lost.</p> <p>Over time, the magic sunk deep into the Earth, living on only in dreams. Science forgot magic, and ancient knowledge was lost.</p>
<p>Now, however, the world has come full circle. Science has become magic in a different form. The new sorcerers, scientists, harness the powers of the elements with their modern tools. They know little, but the whispers of ancient power has influenced their actions.</p> <p>Now, however, the world has come full circle. Science has become magic in a different form. The new sorcerers, scientists, harness the powers of the elements with their modern tools. They know little, but the whispers of ancient power has influenced their actions.</p>
<p>The old is become new. Magic is real, it only seems different. Control the elements and bring peace to the Earth. Channel the powers of magic through your smartphone or tablet. It is up to you to give your technology a true purpose. There are those who do not want unity, who thrive in chaos. They are all the more reason to go out and fight.</p> <p>The old is become new. Magic is real, it only seems different. Control the elements and bring peace to the Earth. Channel the powers of magic through your smartphone or tablet. It is up to you to give your technology a true purpose. There are those who do not want unity, who thrive in chaos. They are all the more reason to go out and fight.</p>
<p><em>Will you join the quest?</em></p> <p><em>Will you join the quest?</em></p>
<!-- End of first page --> <!-- End of first page -->
</div> </div>
<div class="modal-body" id="intro-box-body-2" style='display: none;'> <div class="modal-body" id="intro-box-body-2" style='display: none;'>
<!-- Second page of text --> <!-- Second page of text -->
<p>You have chosen well.</p> <p>You have chosen well.</p>
<p>There is some knowledge you must have now. You must discover the rest of the secrets on your own.</p> <p>There is some knowledge you must have now. You must discover the rest of the secrets on your own.</p>
<ol class="list-group"> <ol class="list-group">
<li class="list-group-item">Some types of magic are stronger in certain types of terrain.</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.</li> <li class="list-group-item">Weather can also affect the flow of magic.</li>
<li class="list-group-item">There are strong points of magic near important landmarks.</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 controlled and enhanced by the different elements to achieve good and evil.</li> <li class="list-group-item">These points of magic can be controlled and enhanced by the different elements to achieve good and evil.</li>
</ol> </ol>
<!-- End of second page --> <!-- End of second page -->
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" onclick="navigator.app.exitApp();" class="btn btn-danger" id="lolnope-btn"><i class="fa fa-arrow-right"></i> I will not</button> <button type="button" onclick="navigator.app.exitApp();" class="btn btn-danger" id="lolnope-btn"><i class="fa fa-arrow-right"></i> I will not</button>
<button type="button" onclick="gotointropage2();" class="btn btn-success" id="gotopage2-btn"><i class="fa fa-arrow-right"></i> I will</button> <button type="button" onclick="gotointropage2();" class="btn btn-success" id="gotopage2-btn"><i class="fa fa-arrow-right"></i> I will</button>
<button type="button" onclick="localStorage.setItem('intro', 'yes');" data-dismiss="modal" class="btn btn-default" style="display: none;" id="close-intro"><i class="fa fa-check"></i> I am ready!</button> <button type="button" onclick="localStorage.setItem('intro', 'yes');" data-dismiss="modal" class="btn btn-default" style="display: none;" id="close-intro"><i class="fa fa-check"></i> I am ready!</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
function gotointropage2() { function gotointropage2() {
$('#intro-box-body-1').css('display', 'none'); $('#intro-box-body-1').css('display', 'none');
$('#intro-box-body-2').css('display', ''); $('#intro-box-body-2').css('display', '');
$('#gotopage2-btn').css('display', 'none'); $('#gotopage2-btn').css('display', 'none');
$('#lolnope-btn').css('display', 'none'); $('#lolnope-btn').css('display', 'none');
$('#close-intro').css('display', ''); $('#close-intro').css('display', '');
} }
</script> </script>

@ -15,7 +15,7 @@
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<div id="license-modal" class="modal fade" tabindex="-1" role="dialog"> <div id="license-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">

@ -15,35 +15,35 @@
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<div id="rules-modal" class="modal fade" tabindex="-1" role="dialog"> <div id="rules-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="rules-box-header">Rules</h4> <h4 class="modal-title" id="rules-box-header">Rules</h4>
</div> </div>
<div class="modal-body" id="rules-box-body"> <div class="modal-body" id="rules-box-body">
<p>Please read these rules. Because TerranQuest is a game involving other <p>Please read these rules. Because TerranQuest is a game involving other
people and the environment, it's important to show good etiquette.</p> people and the environment, it's important to show good etiquette.</p>
<ol class="list-group"> <ol class="list-group">
<li class="list-group-item">Do not endanger yourself or others</li> <li class="list-group-item">Do not endanger yourself or others</li>
<li class="list-group-item">Be considerate and polite in the in-game chat, and don't swear</li> <li class="list-group-item">Be considerate and polite in the in-game chat, and don't swear</li>
<li class="list-group-item">Observe all local laws and rules</li> <li class="list-group-item">Observe all local laws and rules</li>
<li class="list-group-item">Respect property rights and obtain permission for playing on private land</li> <li class="list-group-item">Respect property rights and obtain permission for playing on private land</li>
<li class="list-group-item">Be nice to other people and try not to look too creepy</li> <li class="list-group-item">Be nice to other people and try not to look too creepy</li>
<li class="list-group-item">Respect and minimize your impact on the environment</li> <li class="list-group-item">Respect and minimize your impact on the environment</li>
<li class="list-group-item">Don't tamper with or deface any objects, landmarks, barcodes, or other real-world items</li> <li class="list-group-item">Don't tamper with or deface any objects, landmarks, barcodes, or other real-world items</li>
<li class="list-group-item">Pick up any trash you find and dispose of it properly if you can</li> <li class="list-group-item">Pick up any trash you find and dispose of it properly if you can</li>
<li class="list-group-item">Socialize with any players of other games, such as Geocaching, Ingress, and Pokémon GO, you might meet</li> <li class="list-group-item">Socialize with any players of other games, such as Geocaching, Ingress, and Pokémon GO, you might meet</li>
<li class="list-group-item">Follow the Netsyms Technologies Terms of Service at netsyms.com/legal</li> <li class="list-group-item">Follow the Netsyms Technologies Terms of Service at netsyms.com/legal</li>
<!-- <!--
<li class="list-group-item"></li> <li class="list-group-item"></li>
--> -->
</ol> </ol>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default"><i class="fa fa-times"></i> Close</button> <button type="button" data-dismiss="modal" class="btn btn-default"><i class="fa fa-times"></i> Close</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>