keb/poketest
1
0
Fork 0
Code Issues Releases Activity

Add mobile version

Browse Source 
* Remove Backstretch plugin (not working well on mobile)
* Update all plugins
* Made Hisui a different region
This commit is contained in:
Théo Marchal 2022-02-26 13:11:35 +01:00
parent 10b56c86ee
commit 3a490aa173
14 changed files with 323 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -8,8 +8,6 @@ Now that there are now more than 900 of them, and it's as useful as ever! The we
### Planned updates ### Planned updates
- Smaller resolutions support
- Mobile stylesheet support
- Multiple forms visible in Flashdex - Multiple forms visible in Flashdex
- Custom input answers for harder difficulty - Custom input answers for harder difficulty
- Pokémon type support - Pokémon type support
@ -23,7 +21,7 @@ Now that there are now more than 900 of them, and it's as useful as ever! The we
### Licenses ### Licenses
This website has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library. It uses the <a href="https://srobbin.com/jquery-plugins/backstretch/">Backstretch plugin</a> to have a neat background image, and the <a href="https://github.com/alexanderdickson/waitForImages">waitForImages plugin</a>. All of those components are licensed under the MIT license, as is this website's source code. This website is <strong>HTML5</strong> and <strong>CSS3</strong> compliant. This website has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library. It uses the <a href="https://github.com/alexanderdickson/waitForImages">waitForImages plugin</a>. All of those components are licensed under the MIT license, as is this website's source code. This website is <strong>HTML5</strong> and <strong>CSS3</strong> compliant.
The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2022. The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2022.

32
about.html
View File

@ -3,20 +3,24 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!"> <meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet"> <link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
<link rel="shortcut icon" type="image/png" href="img/favicon.png" /> <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<script src="jquery-2.2.2.min.js"></script> <script src="jquery-3.6.0.min.js"></script>
<script src="backstretch-2.0.4.min.js"></script>
<script src="interface.js"></script> <script src="interface.js"></script>
<script src="poketest.js"></script> <script src="poketest.js"></script>
<title>Pokétest</title> <title>Pokétest</title>
</head> </head>
<body> <body>
<div class="bg"></div>
<div id="content-wrap"> <div id="content-wrap">
<header> <header>
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a> <a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
<nav> <nav>
<div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul> <ul>
<li><a href="flashdex.html">Flashdex</a></li> <li><a href="flashdex.html">Flashdex</a></li>
<li><a href="about.html">About</a></li> <li><a href="about.html">About</a></li>
@ -32,11 +36,10 @@
<li><a href="#2">What is this website made with?</a></li> <li><a href="#2">What is this website made with?</a></li>
<li><a href="#3">Can I use my keyboard to play?</a></li> <li><a href="#3">Can I use my keyboard to play?</a></li>
<li><a href="#4">What is the «Infinite» option in the number of questions exactly?</a></li> <li><a href="#4">What is the «Infinite» option in the number of questions exactly?</a></li>
<li><a href="#5">This website doesn't work well with mobile devices.</a></li> <li><a href="#5">This website doesn't work well on my browser.</a></li>
<li><a href="#6">This website doesn't work well on my browser.</a></li> <li><a href="#6">Can you add more languages?</a></li>
<li><a href="#7">Can you add more languages?</a></li> <li><a href="#7">Can you add this feature?</a></li>
<li><a href="#8">Can you add this feature?</a></li> <li><a href="#8">Copyrights</a></li>
<li><a href="#9">Copyrights</a></li>
</ul> </ul>
<h3 id="1">Who are you?</h3> <h3 id="1">Who are you?</h3>
@ -45,7 +48,7 @@
<h3 id="2">What is this website made with?</h3> <h3 id="2">What is this website made with?</h3>
<p> <p>
This website has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library.<br /> This website has been developed in <strong>JavaScript</strong> using the <strong>jQuery</strong> library.<br />
It uses the <a href="https://srobbin.com/jquery-plugins/backstretch/">Backstretch plugin</a> to have a neat background image, and the <a href="https://github.com/alexanderdickson/waitForImages">waitForImages plugin</a>.<br /> It uses the <a href="https://github.com/alexanderdickson/waitForImages">waitForImages plugin</a>.<br />
</p> </p>
<p> <p>
All of those components are licensed under the MIT license, as is the website source code, which is <a href="https://git.n700.ovh/keb/poketest">available here</a>.<br /> All of those components are licensed under the MIT license, as is the website source code, which is <a href="https://git.n700.ovh/keb/poketest">available here</a>.<br />
@ -59,27 +62,24 @@
<p>When playing with the Infinite option, the game ends when you have 5 bad answers on all the set.</p> <p>When playing with the Infinite option, the game ends when you have 5 bad answers on all the set.</p>
<img src="pokemon/60RB.png" class="middle-companion" alt="poliwag" /> <img src="pokemon/60RB.png" class="middle-companion" alt="poliwag" />
<h3 id="5">This website doesn't work well with mobile devices.</h3>
<p>This is something I'll be working on... someday... promise!</p>
<h3 id="6">This website doesn't work well on my browser.</h3> <h3 id="5">This website doesn't work well on my browser.</h3>
<p>Please contact me or make a pull request!</p> <p>Please contact me or make a pull request!</p>
<h3 id="7">Can you add more languages?</h3> <h3 id="6">Can you add more languages?</h3>
<p>The game currently supports all of the languages available in the main games. If your language is not on the list, it probably uses the English names! I will not support other languages by myself, but you can always contribute by making a pull request!</p> <p>The game currently supports all of the languages available in the main games. If your language is not on the list, it probably uses the English names! I will not support other languages by myself, but you can always contribute by making a pull request!</p>
<h3 id="8">Can you add this feature?</h3> <h3 id="7">Can you add this feature?</h3>
<p>Please contact me or make a pull request!</p> <p>Please contact me or make a pull request!</p>
<h3 id="9">Copyrights</h3> <h3 id="8">Copyrights</h3>
<p>The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2022.<br /> <p>The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2022.<br />
All the Pokémon artworks were taken from <a href="https://bulbapedia.bulbagarden.net/wiki/Main_Page">Bulbapedia</a>, that I'd like to thank for their huge work for the Pokémon community.</p> All the Pokémon artworks were taken from <a href="https://bulbapedia.bulbagarden.net/wiki/Main_Page">Bulbapedia</a>, that I'd like to thank for their huge work for the Pokémon community.</p>
</div> </div>
</article> </article>
</div> </div>
<footer> <footer>
<p>© 2012 - 2022 Pokétest 2.6</p> <p>© 2012 - 2022 Pokétest 2.7</p>
</footer> </footer>
</body> </body>
</html> </html>

BIN
artwork/artwork10.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 295 KiB

After

Width:  |  Height:  |  Size: 800 KiB

4
backstretch-2.0.4.min.js vendored
View File

@ -1,4 +0,0 @@
/*! Backstretch - v2.0.4 - 2013-06-19
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2013 Scott Robbin; Licensed MIT */
(function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g[c]){g[c](b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images[c]);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);

46
flashdex.html
View File

@ -3,21 +3,25 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!"> <meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet"> <link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
<link rel="shortcut icon" type="image/png" href="img/favicon.png" /> <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<script src="jquery-2.2.2.min.js"></script> <script src="jquery-3.6.0.min.js"></script>
<script src="backstretch-2.0.4.min.js"></script> <script src="waitforimages-2.4.0.min.js"></script>
<script src="waitforimages-2.2.0.min.js"></script>
<script src="interface.js"></script> <script src="interface.js"></script>
<script src="flashdex.js"></script> <script src="flashdex.js"></script>
<title>Pokétest</title> <title>Pokétest</title>
</head> </head>
<body> <body>
<div class="bg"></div>
<div id="content-wrap"> <div id="content-wrap">
<header> <header>
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a> <a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
<nav> <nav>
<div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul> <ul>
<li><a href="flashdex.html">Flashdex</a></li> <li><a href="flashdex.html">Flashdex</a></li>
<li><a href="about.html">About</a></li> <li><a href="about.html">About</a></li>
@ -27,29 +31,29 @@
<article> <article>
<div id="container"> <div id="container">
<div id="game"> <div id="game">
<img src="pokemon/R549.png" alt="lilligant" class="companion" /> <img src="pokemon/R79-99.png" alt="slowbro" class="flashdex-companion" />
<h1>Flashdex</h1> <h1>Flashdex</h1>
<p>Well, well, well! This is the simplest Pokédex you'll find in the web, which is useful to see your favorite creatures in good resolution. Furthermore, you can see all the new Pokémons that are announced because we are adding them really fast! This page is perfect to learn those new names, so let's get started!</p> <p>The Flashdex is a very simple Pokédex, useful to see your favorite creatures in good resolution. Perfect for learning new names, and to see the different generations and different Pokémon forms!</p>
<div id="flashdex_config"> <div id="flashdex_config">
<h2><a href="#" class="all unselected"><strong>Select all</strong></a></h2> <h2><a href="#" class="all unselected"><strong>Select all</strong></a></h2>
<p> <p>
<input type="checkbox" name="1g" id="1g"><label for="1g"><strong><span class="RB1">1</span><span class="RB2">G</span></strong></label> <span class="generation">
<input type="checkbox" name="2g" id="2g"><label for="2g"><strong><span class="GS1">2</span><span class="GS2">G</span></strong></label> <span class="gen"><input type="checkbox" name="1g" id="1g"><label for="1g"><strong><span class="RB1">1</span><span class="RB2">G</span></strong></label></span>
<input type="checkbox" name="3g" id="3g"><label for="3g"><strong><span class="RS1">3</span><span class="RS2">G</span></strong></label> <span class="gen"><input type="checkbox" name="2g" id="2g"><label for="2g"><strong><span class="GS1">2</span><span class="GS2">G</span></strong></label></span>
<input type="checkbox" name="4g" id="4g"><label for="4g"><strong><span class="DP1">4</span><span class="DP2">G</span></strong></label> <span class="gen"><input type="checkbox" name="3g" id="3g"><label for="3g"><strong><span class="RS1">3</span><span class="RS2">G</span></strong></label></span>
<br /> <span class="gen"><input type="checkbox" name="4g" id="4g"><label for="4g"><strong><span class="DP1">4</span><span class="DP2">G</span></strong></label></span>
<input type="checkbox" name="5g" id="5g"><label for="5g"><strong><span class="BW1">5</span><span class="BW2">G</span></strong></label> <span class="gen"><input type="checkbox" name="5g" id="5g"><label for="5g"><strong><span class="BW1">5</span><span class="BW2">G</span></strong></label></span>
<input type="checkbox" name="6g" id="6g"><label for="6g"><strong><span class="XY1">6</span><span class="XY2">G</span></strong></label> <span class="gen"><input type="checkbox" name="6g" id="6g"><label for="6g"><strong><span class="XY1">6</span><span class="XY2">G</span></strong></label></span>
<input type="checkbox" name="7g" id="7g"><label for="7g"><strong><span class="SM1">7</span><span class="SM2">G</span></strong></label> <span class="gen"><input type="checkbox" name="7g" id="7g"><label for="7g"><strong><span class="SM1">7</span><span class="SM2">G</span></strong></label></span>
<input type="checkbox" name="8g" id="8g"><label for="8g"><strong><span class="SWSH1">8</span><span class="SWSH2">G</span></strong></label> <span class="gen"><input type="checkbox" name="8g" id="8g"><label for="8g"><strong><span class="SWSH1">8</span><span class="SWSH2">G</span></strong></label></span>
<br /> </span>
<span class="alternate_forms">Alternate forms</span> <span class="alternate_forms">Alternate forms</span>
<input type="checkbox" name="regional" id="regional"><label for="regional"><strong>Regional</strong></label> <span class="gen"><input type="checkbox" name="regional" id="regional"><label for="regional"><strong>Regional</strong></label></span>
<input type="checkbox" name="mega" id="mega"><label for="mega"><strong>Mega-Evolution</strong></label> <span class="gen"><input type="checkbox" name="mega" id="mega"><label for="mega"><strong>Mega-Evolution</strong></label></span>
<input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"><strong>Gigantamax</strong></label> <span class="gen"><input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"><strong>Gigantamax</strong></label></span>
</p> </p>
<p> <p>
@ -77,9 +81,9 @@
</div> </div>
</div> </div>
</article> </article>
<footer>
<p>© 2012 - 2022 Pokétest 2.7</p>
</footer>
</div> </div>
<footer>
<p>© 2012 - 2022 Pokétest 2.6</p>
</footer>
</body> </body>
</html> </html>

4
flashdex.js
View File

@ -73,8 +73,10 @@ $(document).ready(function() {
return '<span class="form XY"></span>' return '<span class="form XY"></span>'
else if (pkmn["origin"] == "Alola") else if (pkmn["origin"] == "Alola")
return '<span class="form SM"></span>' return '<span class="form SM"></span>'
else if (pkmn["origin"] == "Galar" || pkmn["origin"] == "Hisui") else if (pkmn["origin"] == "Galar")
return '<span class="form SWSH"></span>' return '<span class="form SWSH"></span>'
else if (pkmn["origin"] == "Hisui")
return '<span class="form LA"></span>'
else if (pkmn["type"] == "mega") else if (pkmn["type"] == "mega")
return '<span class="form mega"></span>'; return '<span class="form mega"></span>';
else if (pkmn["type"] == "giga") else if (pkmn["type"] == "giga")

23
index.html
View File

@ -3,20 +3,24 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!"> <meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet"> <link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
<link rel="shortcut icon" type="image/png" href="img/favicon.png" /> <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<script src="jquery-2.2.2.min.js"></script> <script src="jquery-3.6.0.min.js"></script>
<script src="backstretch-2.0.4.min.js"></script>
<script src="interface.js"></script> <script src="interface.js"></script>
<script src="poketest.js"></script> <script src="poketest.js"></script>
<title>Pokétest</title> <title>Pokétest</title>
</head> </head>
<body> <body>
<div class="bg"></div>
<div id="content-wrap"> <div id="content-wrap">
<header> <header>
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a> <a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
<nav> <nav>
<div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul> <ul>
<li><a href="flashdex.html">Flashdex</a></li> <li><a href="flashdex.html">Flashdex</a></li>
<li><a href="about.html">About</a></li> <li><a href="about.html">About</a></li>
@ -26,7 +30,7 @@
<article> <article>
<div id="container"> <div id="container">
<div id="game"> <div id="game">
<img src="pokemon/R58.png" alt="Growlithe" class="companion" /> <img src="pokemon/R58.png" alt="Growlithe" class="poketest-companion" />
<h1>What is Pokétest?</h1> <h1>What is Pokétest?</h1>
<p>✨ <strong>Now updated for Pokémon Legends: Arceus!</strong></p> <p>✨ <strong>Now updated for Pokémon Legends: Arceus!</strong></p>
@ -124,8 +128,8 @@
<option name="time" id="5" value="5" selected>5</option> <option name="time" id="5" value="5" selected>5</option>
<option name="time" id="10" value="10">10</option> <option name="time" id="10" value="10">10</option>
<option name="time" id="30" value="30">30</option> <option name="time" id="30" value="30">30</option>
<option name="time" id="30" value="30">99</option> <option name="time" id="99" value="99">99</option>
<!--<option name="time" id="10000" value="10000">10000 (debug)</option>--> <option name="time" id="10000" value="10000">10000 (debug)</option>
</select> seconds </select> seconds
</div> </div>
</div> </div>
@ -136,13 +140,12 @@
</div> </div>
</div> </div>
</article> </article>
<footer>
<p>© 2012 - 2022 Pokétest 2.7</p>
</footer>
</div> </div>
<footer>
<p>© 2012 - 2022 Pokétest 2.6</p>
</div>
</footer>
<script> <script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script> </script>
</body> </body>
</html> </html>

21
interface.js
View File

@ -5,7 +5,7 @@ $(document).ready(function() {
} }
// have a nice little background // have a nice little background
$.backstretch("artwork/artwork"+random(1, 10)+".jpg"); //$.backstretch("artwork/artwork"+random(1, 10)+".jpg");
// splice url arguments // splice url arguments
function gup(name, url) { function gup(name, url) {
@ -89,4 +89,23 @@ $(document).ready(function() {
$('#configuration input#select').click(function() { $('#configuration input#select').click(function() {
$('#selected_options').slideDown(); $('#selected_options').slideDown();
}); });
// hamburger mobile
$("#hamburger .container").click(function()
{
if ($("nav").hasClass("active"))
{
$("ul").slideUp(200, function()
{
$("nav").removeClass("active");
});
}
else
{
$("nav").addClass("active");
$("ul").slideDown(200);
}
});
}); });

4
jquery-2.2.2.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
jquery-3.6.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
poketest.js
View File

@ -244,10 +244,10 @@ $(document).ready(function() {
$('article #container .chrono').empty().append(chrono); $('article #container .chrono').empty().append(chrono);
$('article #container .whois').empty().append("Who's that Pokémon? " + (!infinite? " ("+questions+"/"+max_questions+")" : "")); $('article #container .whois').empty().append("Who's that Pokémon? " + (!infinite? " ("+questions+"/"+max_questions+")" : ""));
$('article #container .pokemon').empty().append('<img src="pokemon/'+image_name+'.png" class="'+(silhouette)+'" />'); $('article #container .pokemon').empty().append('<img src="pokemon/'+image_name+'.png" class="'+(silhouette)+'" />');
$('article #container #answers').empty().append('<input type="submit" class="option a1" name="a1" value="'+options[0]+'">') $('article #container #answers').empty().append('<span><input type="submit" class="option a1" name="a1" value="'+options[0]+'"></span>')
$('article #container #answers').append('<input type="submit" class="option a2" name="a2" value="'+options[1]+'">') $('article #container #answers').append('<span><input type="submit" class="option a2" name="a2" value="'+options[1]+'"></span>')
$('article #container #answers').append('<input type="submit" class="option a3" name="a3" value="'+options[2]+'">') $('article #container #answers').append('<span><input type="submit" class="option a3" name="a3" value="'+options[2]+'"></span>')
$('article #container #answers').append('<input type="submit" class="option a4" name="a4" value="'+options[3]+'">') $('article #container #answers').append('<span><input type="submit" class="option a4" name="a4" value="'+options[3]+'"></span>')
// timer setting // timer setting
var clock = setInterval(function() { var clock = setInterval(function() {

260
style.css
View File

@ -3,6 +3,7 @@ html, body { margin: 0; padding: 0; }
body { body {
width: 100vw; min-height: 100vh; width: 100vw; min-height: 100vh;
min-height: -webkit-fill-available;
margin: auto; margin: auto;
font-family: Verdana; font-family: Verdana;
color: #e7e2e2; color: #e7e2e2;
@ -10,6 +11,26 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
.bg {
top: 0;
height: 100vh;
left: 0;
right: 0;
z-index: -1;
background: url("artwork/artwork10.jpg") center center;
position: fixed;
background-attachment: fixed;
background-size: cover;
}
@supports ( -webkit-touch-callout : none) {
.bg { background-attachment: scroll }
}
@supports not ( -webkit-touch-callout : none) {
.bg { background-attachment: fixed; }
}
a { color: #e7e2e2; font-weight: bold; } a { color: #e7e2e2; font-weight: bold; }
h1 { font-size: 1.7em; } h1 { font-size: 1.7em; }
h2 { text-align: center; } h2 { text-align: center; }
@ -18,7 +39,6 @@ h3 { font-variant: small-caps; }
/**** HEADER ****/ /**** HEADER ****/
header { header {
height:14vh;
background: #2f2e2e; background: #2f2e2e;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -27,13 +47,15 @@ header {
header img { header img {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
height: 12.5vh; margin-left: 8vw;
margin-left: 8vw; margin-top: 0.75vh; padding-top: 0.5vh;
padding-bottom: 0.5vh;
max-height: 80px;
} }
header nav { header nav {
display: flex; align-items: flex-end; display: flex; align-items: flex-end;
margin-right: 8vw; margin-bottom: 5vh; margin-right: 8vw; margin-bottom: 3vh;
} }
header nav ul, header nav ul li { header nav ul, header nav ul li {
@ -57,7 +79,7 @@ header nav ul li a:hover { color: #ff6b79; }
/**** MAIN CONTENT ****/ /**** MAIN CONTENT ****/
article { width: 100vw; margin-top: 5vh; } article { width: 100vw; margin-top: 5vh; margin-bottom: 5vh; }
article #container { article #container {
margin-left: 10vw; margin-right: 10vw; margin-left: 10vw; margin-right: 10vw;
@ -65,9 +87,15 @@ article #container {
background: rgba(0, 0, 0, .85); background: rgba(0, 0, 0, .85);
} }
article #container .companion { article #container .poketest-companion {
float: right; float: right;
width: 280px; width: 210px;
margin-left: 15px;
}
article #container .flashdex-companion {
float: right;
width: 265px;
margin-left: 15px; margin-left: 15px;
} }
@ -119,11 +147,12 @@ article #container.about ul li a { margin-top: 5px; margin-bottom: 5px; font-wei
.XY { border-radius:50%; background: linear-gradient(-45deg, #025DA6 50%, #EA1A3E 50%); display:block; border: 1px solid white; } .XY { border-radius:50%; background: linear-gradient(-45deg, #025DA6 50%, #EA1A3E 50%); display:block; border: 1px solid white; }
.SM { border-radius:50%; background: linear-gradient(-45deg, #ef9039 50%, #589ac8 50%); display:block; border: 1px solid white; } .SM { border-radius:50%; background: linear-gradient(-45deg, #ef9039 50%, #589ac8 50%); display:block; border: 1px solid white; }
.SWSH { border-radius:50%; background: linear-gradient(-45deg, #00A1E9 50%, #BF004F 50%); display:block; border: 1px solid white; } .SWSH { border-radius:50%; background: linear-gradient(-45deg, #00A1E9 50%, #BF004F 50%); display:block; border: 1px solid white; }
.LA { border-radius:50%; background: #36597B; display:block; border: 1px solid white; }
/**** FOOTER ****/ /**** FOOTER ****/
#content-wrap { #content-wrap {
padding-bottom: 12vh; /* Footer height */ padding-bottom: 5vh; /* Footer height */
} }
footer { footer {
@ -131,7 +160,7 @@ footer {
background: #2f2e2e; background: #2f2e2e;
text-align: center; text-align: center;
position: absolute; position: absolute;
width: 100vw; height: 7vh; width: 100vw; height: 5vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -167,7 +196,7 @@ article #container #game #configuration #right_config { float: right; }
article #container #game .button { article #container #game .button {
margin: auto; margin: auto;
padding: 20px; padding-top: 30px; padding: 20px;
clear: both; clear: both;
text-align: center; text-align: center;
} }
@ -191,14 +220,16 @@ article #container input[type=submit]:hover {
/**** GAME LAUNCHED ****/ /**** GAME LAUNCHED ****/
article #container.game_active { height: 68vh; } article #container.game_active { height: 72vh; }
article #container #top_game { display: flex; justify-content: space-between; height: 8vh; } article #container #top_game { display: flex; justify-content: space-between; height: 10vh; }
article #container #top_game .whois { display: flex; align-items: flex-start; } article #container #top_game .whois { display: flex; align-items: flex-start; }
article #container #top_game .chrono { article #container #top_game .chrono {
width: 35px; height: 35px; width: 2.6rem;
margin-top: 10px; margin-bottom: 0px; height: 2.6rem;
padding: 12px 10px 10px 10px; line-height: 2.4rem;
padding: 10px;
margin-top: 10px;
border-radius: 100%; border-radius: 100%;
background: #e7e2e2; background: #e7e2e2;
color: #2f2e2e; color: #2f2e2e;
@ -217,14 +248,14 @@ article #container .pokemon img.silhouette { filter: contrast(0%) brightness(170
article #container #answers { article #container #answers {
text-align: center; text-align: center;
height: 10vh; height: 14vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
article #container #answers input { margin-right: 30px; display: inline; } article #container #answers input { margin-right: 30px; display: inline; }
article #container #answers input:last-child { margin-right: 0px; } article #container #answers input:last-child { margin-right: 30px; }
article #container #answers .final_answer { font-size: 23px; } article #container #answers .final_answer { font-size: 23px; }
article #container #answers .final_answer .good { color:#3ad48d; font-weight:bold; } article #container #answers .final_answer .good { color:#3ad48d; font-weight:bold; }
@ -296,25 +327,24 @@ article #container.diploma #score {
/**** FLASHDEX ****/ /**** FLASHDEX ****/
#game #flashdex_config { margin:auto; max-width:600px; } #game #flashdex_config { margin:auto; }
#game #flashdex_config p { text-align: center; } #game #flashdex_config p { text-align: center; }
#game #flashdex_config p a { text-decoration: none; } #game #flashdex_config p a { text-decoration: none; }
#game #flashdex_config p label { display: inline-block; margin: 7px; } #game #flashdex_config p label { display: inline-block; margin: 7px; }
#game #flashdex_config h2 { text-decoration: underline; font-size: 1.05em; margin-top: 25px; } #game #flashdex_config h2 { text-decoration: underline; font-size: 1.05em; margin-top: 25px; }
#game #flashdex_config span.alternate_forms { margin-top: 20px; margin-bottom: 0px; display: block; font-variant: small-caps; font-size: 19px; } #game #flashdex_config span.alternate_forms { margin-top: 20px; margin-bottom: 0px; display: block; font-variant: small-caps; font-size: 19px; }
#game #flashdex_config p.button { padding: 0px; margin-top: 20px; }
#loading { #loading {
display: block; display: block;
font-size: 1.5em; font-size: 1.5em;
text-align: center; text-align: center;
margin-top:15px; margin-top: 15px;
margin-bottom: 15px;
} }
#container #game #flashdex { #container #game #flashdex {
margin:auto; margin:auto;
display:inline-block; display:none;
text-align:center; text-align:center;
margin-top:2vh; margin-top:2vh;
} }
@ -357,5 +387,189 @@ span.form.mega { background-image: url('img/icon_mega.png'); }
span.form.giga { span.form.giga {
background-image: url('img/icon_giga.png'); background-color: white; background-image: url('img/icon_giga.png'); background-color: white;
background-position: center; background-size:20px; background-position: center; background-size:20px;
border-radius:50%; border: 1px solid white; border-radius: 50%; border: 1px solid white;
}
/*** MOBILE ***/
@media screen and (max-width:1100px) {
article #container {
margin-left: 5vw;
margin-right: 5vw;
}
}
@media screen and (max-width:800px) {
h1 { margin: 0.2em 0; font-size:1.3em; }
h2 { font-size:1.25em; }
h3 { margin: 10px; margin-left: 0; }
header img { margin-left: 4vw; }
header nav ul { display: none; }
header { display: block; }
header nav {
display: auto;
align-items: auto;
margin-right: auto;
margin-bottom: auto;
}
header nav #hamburger {
cursor: pointer;
position: absolute;
top: 1.75rem;
right: 1.2rem;
}
header nav #hamburger .bar1,
header nav #hamburger .bar2,
header nav #hamburger .bar3 { width:30px; height:3px; background-color:#ff3636; margin:6px 0; transition:0.4s; }
header nav.active #hamburger .bar1 { transform:rotate(-45deg) translate(-4px, 6px); }
header nav.active #hamburger .bar2 { opacity:0; }
header nav.active #hamburger .bar3 { transform:rotate(45deg) translate(-6px, -9.5px); }
header nav.active ul {
margin: auto;
margin-top: 0;
background: #2f2e2e;
width: 100%;
text-align:center;
padding: 10px;
padding-top: 0px;
z-index:0;
}
header a { display: inline-block; }
header nav ul, header nav ul li { margin: 15px; }
header nav ul li a { margin-left: 0; font-size: 1.3em; }
#content-wrap { padding-bottom: 8vh; }
article { margin-top: 2vh; margin-bottom: 0vh; }
article #container {
margin-left: 4vw;
margin-right: 4vw;
padding: 5px 10px;
border-radius: 18px;
}
/* poketest */
article #container #game #configuration #left_config { float: none; }
article #container #game #configuration #right_config { float: none; }
article #container #game #configuration input[name="gen"], article #container #game #selected_options input,
article #container #game #configuration .first { margin-left:15px; margin-bottom:5px; }
article #container #game .button { padding: 10px; padding-top: 20px; }
article #container #game #configuration input[type="checkbox"] {
margin-left: 15px;
margin-top: 7px;
margin-bottom: 8px;
}
article #container input[type="submit"] {
padding: 5px;
border: 2px;
border-radius: 8px;
font-size: 15px;
margin: 3px;
}
article #container.game_active {
max-height: 76vh;
height: auto;
}
article #container #answers {
height: 100%;
display: block;
}
article #container #answers input:last-child { margin-right: 0px; }
article #container.game_active div#answers span { display: block; }
article #container.diploma #score { background: none; }
article #container #seed input {
width: 90%;
margin-top: 10px;
}
article #container.diploma #score { padding: 0px; }
article #container.diploma { border: none; }
article #container .pokemon img {
height: 37vh;
margin-top: 1vh;
}
article #container #top_game .whois { width: 80%; }
article #container #top_game .chrono {
width: 2rem;
height: 2rem;
line-height: 1.8rem;
padding: 5px;
margin-top: 5px;
}
article #container #game .button {
padding: 10px; padding-top: 15px;
}
/* flashdex */
#container #game #flashdex .pokedex { width: 230px; height: 260px; }
#game #flashdex .pokedex img { height: 225px; }
#game #flashdex_config p { text-align: left; }
#game #flashdex_config .generation {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
#game #flashdex_config .generation .gen {
display: block;
position: relative;
padding: 10px;
}
#game #flashdex_config .gen { padding: 0; margin: 0; display: block; }
#game #flashdex_config .gen label { padding: 2px; margin: 2px; margin-left: 8px; }
#game #flashdex_config select.lang { margin-left: 15px; margin-top:5px; }
#game #flashdex_config p.button { padding-top: 15px; margin-top: 15px; }
/* about */
article #container .poketest-companion, article #container .flashdex-companion,
article #container .top-companion, article #container .companion { display: none; }
article #container .middle-companion {
width: 250px;
margin: auto;
display: block;
}
article #container.about ul {
margin-left: 10px;
padding-left: 5px;
}
article #container.about p { margin-left: 0px; }
footer { height:6vh; }
}
@media screen and (max-width:400px) {
header img { height: 60px; }
header nav #hamburger { top: 1.05rem; }
} }

2
waitforimages-2.2.0.min.js vendored
View File

@ -1,2 +0,0 @@
/*! waitForImages jQuery Plugin 2016-01-04 */
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){var b="waitForImages";a.waitForImages={hasImageProperties:["backgroundImage","listStyleImage","borderImage","borderCornerImage","cursor"],hasImageAttributes:["srcset"]},a.expr[":"]["has-src"]=function(b){return a(b).is('img[src][src!=""]')},a.expr[":"].uncached=function(b){return a(b).is(":has-src")?!b.complete:!1},a.fn.waitForImages=function(){var c,d,e,f=0,g=0,h=a.Deferred();if(a.isPlainObject(arguments[0])?(e=arguments[0].waitForAll,d=arguments[0].each,c=arguments[0].finished):1===arguments.length&&"boolean"===a.type(arguments[0])?e=arguments[0]:(c=arguments[0],d=arguments[1],e=arguments[2]),c=c||a.noop,d=d||a.noop,e=!!e,!a.isFunction(c)||!a.isFunction(d))throw new TypeError("An invalid callback was supplied.");return this.each(function(){var i=a(this),j=[],k=a.waitForImages.hasImageProperties||[],l=a.waitForImages.hasImageAttributes||[],m=/url\(\s*(['"]?)(.*?)\1\s*\)/g;e?i.find("*").addBack().each(function(){var b=a(this);b.is("img:has-src")&&!b.is("[srcset]")&&j.push({src:b.attr("src"),element:b[0]}),a.each(k,function(a,c){var d,e=b.css(c);if(!e)return!0;for(;d=m.exec(e);)j.push({src:d[2],element:b[0]})}),a.each(l,function(a,c){var d=b.attr(c);return d?void j.push({src:b.attr("src"),srcset:b.attr("srcset"),element:b[0]}):!0})}):i.find("img:has-src").each(function(){j.push({src:this.src,element:this})}),f=j.length,g=0,0===f&&(c.call(i[0]),h.resolveWith(i[0])),a.each(j,function(e,j){var k=new Image,l="load."+b+" error."+b;a(k).one(l,function m(b){var e=[g,f,"load"==b.type];return g++,d.apply(j.element,e),h.notifyWith(j.element,e),a(this).off(l,m),g==f?(c.call(i[0]),h.resolveWith(i[0]),!1):void 0}),j.srcset&&(k.srcset=j.srcset),k.src=j.src})}),h.promise()}});

2
waitforimages-2.4.0.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/*! waitForImages jQuery Plugin 2018-02-13 */
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){var b="waitForImages",c=function(a){return a.srcset&&a.sizes}(new Image);a.waitForImages={hasImageProperties:["backgroundImage","listStyleImage","borderImage","borderCornerImage","cursor"],hasImageAttributes:["srcset"]},a.expr.pseudos["has-src"]=function(b){return a(b).is('img[src][src!=""]')},a.expr.pseudos.uncached=function(b){return!!a(b).is(":has-src")&&!b.complete},a.fn.waitForImages=function(){var d,e,f,g=0,h=0,i=a.Deferred(),j=this,k=[],l=a.waitForImages.hasImageProperties||[],m=a.waitForImages.hasImageAttributes||[],n=/url\(\s*(['"]?)(.*?)\1\s*\)/g;if(a.isPlainObject(arguments[0])?(f=arguments[0].waitForAll,e=arguments[0].each,d=arguments[0].finished):1===arguments.length&&"boolean"===a.type(arguments[0])?f=arguments[0]:(d=arguments[0],e=arguments[1],f=arguments[2]),d=d||a.noop,e=e||a.noop,f=!!f,!a.isFunction(d)||!a.isFunction(e))throw new TypeError("An invalid callback was supplied.");return this.each(function(){var b=a(this);f?b.find("*").addBack().each(function(){var b=a(this);b.is("img:has-src")&&!b.is("[srcset]")&&k.push({src:b.attr("src"),element:b[0]}),a.each(l,function(a,c){var d,e=b.css(c);if(!e)return!0;for(;d=n.exec(e);)k.push({src:d[2],element:b[0]})}),a.each(m,function(a,c){var d=b.attr(c);return!d||void k.push({src:b.attr("src"),srcset:b.attr("srcset"),element:b[0]})})}):b.find("img:has-src").each(function(){k.push({src:this.src,element:this})})}),g=k.length,h=0,0===g&&(d.call(j),i.resolveWith(j)),a.each(k,function(f,k){var l=new Image,m="load."+b+" error."+b;a(l).one(m,function b(c){var f=[h,g,"load"==c.type];if(h++,e.apply(k.element,f),i.notifyWith(k.element,f),a(this).off(m,b),h==g)return d.call(j[0]),i.resolveWith(j[0]),!1}),c&&k.srcset&&(l.srcset=k.srcset,l.sizes=k.sizes),l.src=k.src}),i.promise()}});