Created
July 2, 2018 16:58
-
-
Save shameen/f1f30eb7496ad9866be4fd92f2fa9a00 to your computer and use it in GitHub Desktop.
pokemon quest reference for mobile (wrapper for serebii.net pages with links at the top.) http://shameen.info/quest
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>pkmn quest</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script> | |
| <style> | |
| html, body {overflow:none} | |
| * { | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| #pkmn-navbar { | |
| position:fixed; | |
| top:1px; | |
| left:1%; | |
| right:1%; | |
| z-index:10; | |
| background:white; | |
| } | |
| .container-fluid { | |
| padding:0; | |
| } | |
| .nav-pills { | |
| padding:1px; | |
| } | |
| iframe { | |
| width:100%; | |
| border:none; | |
| z-index:1; | |
| } | |
| @media screen and (max-width:600px) { | |
| #pkmn-navbar li * {font-size: 12px} | |
| } | |
| </style> | |
| <script> | |
| /** https://stackoverflow.com/a/4819886/4810109 */ | |
| function is_touch_device() { | |
| return 'ontouchstart' in window // works on most browsers | |
| || navigator.maxTouchPoints; // works on IE10/11 and Surface | |
| }; | |
| $(() => { | |
| /* Hook Up Events */ | |
| //click an already-active link to refresh to original page | |
| $("#pkmn-navbar > .nav-item > .nav-link").on("click", (e) => { | |
| var currentTarget = $(e.currentTarget); | |
| if (currentTarget.hasClass("dropdown-toggle")) | |
| return; | |
| if (currentTarget.hasClass("active")) { | |
| var iframe = $(".tab-pane.show iframe"); | |
| var url = iframe.attr("src"); | |
| iframe.attr("src","about:blank"); | |
| iframe.attr("src",url); | |
| } | |
| }); | |
| //clicking a link in the 'more' dropdown will recreate an iframe | |
| $(".pkmn-nav-more a.dropdown-item").on("click", (e) => { | |
| e.preventDefault(); | |
| var moreContainer = $("#pkmn-more"); | |
| moreContainer.html(""); | |
| var iframe = $("<iframe></iframe>"); | |
| iframe.attr("src",$(e.currentTarget).data("url")); | |
| iframe.appendTo(moreContainer); | |
| resizeIframes(); | |
| }); | |
| /* On-load code */ | |
| var resizeIframes = () => { | |
| var navbar = $("#pkmn-navbar"); | |
| var navbarHeight = navbar.height() + navbar.offset().top; | |
| var windowHeight = $(window).height(); | |
| $('.tab-content').css("margin-top", navbarHeight + 2); | |
| $('.tab-content iframe').css("height", windowHeight - navbarHeight - 8); | |
| }; | |
| resizeIframes(); | |
| //resize iframes upon window resize, unless its a touch-enabled device | |
| if (is_touch_device() === false) { | |
| $(window).resize(resizeIframes); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <ul class="nav nav-pills nav-justified" id="pkmn-navbar"> | |
| <li class="nav-item"> | |
| <a class="nav-link active" href="#pkmn-list" data-toggle="tab">Pokémon</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#pkmn-recipe" data-toggle="tab">Recipes</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#pkmn-map" data-toggle="tab">Map</a> | |
| </li> | |
| <li class="nav-item dropdown pkmn-nav-more"> | |
| <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">More</a> | |
| <div class="dropdown-menu"> | |
| <a class="dropdown-item" data-toggle="tab" href="#pkmn-more" data-url="https://serebii.net/quest/attacks.shtml">Moves / Attacks</a> | |
| <a class="dropdown-item" data-toggle="tab" href="#pkmn-more" data-url="https://serebii.net/quest/decorations.shtml">Decorations</a> | |
| <a class="dropdown-item" data-toggle="tab" href="#pkmn-more" data-url="https://serebii.net/quest/powerstones.shtml">Power Stones</a> | |
| <a class="dropdown-item" data-toggle="tab" href="#pkmn-more" data-url="https://serebii.net/quest/evolution.shtml">Evolutions</a> | |
| <a class="dropdown-item" data-toggle="tab" href="#pkmn-more" data-url="https://serebii.net/quest/quests.shtml">Quests</a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item" data-toggle="tab" href="#pkmn-more" data-url="https://serebii.net/quest/training.shtml">Training + Move Changes</a> | |
| <a class="dropdown-item" data-toggle="tab" href="#pkmn-more" data-url="https://serebii.net/quest/gift.shtml">Gift Pokemon</a> | |
| <a class="dropdown-item" data-toggle="tab" href="#pkmn-more" data-url="https://serebii.net/quest/pokemart.shtml">Poké Mart + Micro-transactions</a> | |
| <small class="dropdown-header small" style="opacity:0.5;">links by serebii.net</small> | |
| </div> | |
| </li> | |
| </ul> | |
| <div class="tab-content"> | |
| <div class="tab-pane fade show active" id="pkmn-list"> | |
| <iframe id="iframe1" src="https://serebii.net/quest/pokemon.shtml"></iframe> | |
| </div> | |
| <div class="tab-pane fade" id="pkmn-recipe"> | |
| <iframe src="https://serebii.net/quest/cooking.shtml"></iframe> | |
| </div> | |
| <div class="tab-pane fade" id="pkmn-map"> | |
| <iframe src="https://serebii.net/quest/location"></iframe> | |
| </div> | |
| <div class="tab-pane fade" id="pkmn-more"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment