keb/poketest
1
0
Fork 0
Code Issues Releases Activity

Mobile version working

Browse Source 
* Removed Backstretch plugin (not working well on mobile)
* Updated all plugins
* Made Hisui a different region
This commit is contained in:
Théo Marchal 2022-02-26 13:10:28 +01:00
parent e660ef295a
commit 4c23ed77f2
14 changed files with 168 additions and 149 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.

6
about.html
View File

@ -7,13 +7,13 @@
<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>
@ -48,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 />

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

14
flashdex.html
View File

@ -7,14 +7,14 @@
<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>
@ -31,13 +31,11 @@
<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>meilleur texte...</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>
<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>
<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>
@ -83,9 +81,9 @@
</div> </div>
</div> </div>
</article> </article>
</div>
<footer> <footer>
<p>© 2012 - 2022 Pokétest 2.7</p> <p>© 2012 - 2022 Pokétest 2.7</p>
</footer> </footer>
</div>
</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")

9
index.html
View File

@ -7,13 +7,13 @@
<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>
@ -30,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>
@ -140,11 +140,10 @@
</div> </div>
</div> </div>
</article> </article>
</div>
<footer> <footer>
<p>© 2012 - 2022 Pokétest 2.7</p> <p>© 2012 - 2022 Pokétest 2.7</p>
</div>
</footer> </footer>
</div>
<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>

2
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) {

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

4
poketest.js
View File

@ -257,7 +257,7 @@ $(document).ready(function() {
showAnswer(false); // timer has ended, so it's a bad answer showAnswer(false); // timer has ended, so it's a bad answer
} }
$('article #container .chrono').empty().append(chrono); $('article #container .chrono').empty().append(chrono);
}, 10000000); }, 1000);
// checking if the answer is good or not // checking if the answer is good or not
$('article .option').click(function() { $('article .option').click(function() {
@ -295,7 +295,7 @@ $(document).ready(function() {
if (!infinite) questions < max_questions ? game() : score(); if (!infinite) questions < max_questions ? game() : score();
else bad_answers < max_infinite_errors ? game() : score(); else bad_answers < max_infinite_errors ? game() : score();
} }
}, 100000000); }, 1000);
} }
function score() { function score() {

254
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:10vh;
background: #2f2e2e; background: #2f2e2e;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -27,8 +47,10 @@ header {
header img { header img {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
height: 9vh; margin-left: 8vw;
margin-left: 8vw; padding-top: 0.4vh; padding-top: 0.5vh;
padding-bottom: 0.5vh;
max-height: 80px;
} }
header nav { header nav {
@ -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: 260px; 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;
@ -196,9 +225,11 @@ article #container #top_game { display: flex; justify-content: space-between; he
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;
@ -296,7 +327,7 @@ 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; }
@ -377,13 +408,52 @@ span.form.giga {
h2 { font-size:1.25em; } h2 { font-size:1.25em; }
h3 { margin: 10px; margin-left: 0; } h3 { margin: 10px; margin-left: 0; }
header { height: 12vh; } header img { margin-left: 4vw; }
header img { height: 11vh; margin-left: 4vw; }
header nav ul { display: none; } 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; } #content-wrap { padding-bottom: 8vh; }
article { margin-top: 2vh; } article { margin-top: 2vh; margin-bottom: 0vh; }
article #container { article #container {
margin-left: 4vw; margin-left: 4vw;
@ -392,12 +462,12 @@ span.form.giga {
border-radius: 18px; border-radius: 18px;
} }
/* poketest */
article #container #game #configuration #left_config { float: none; } article #container #game #configuration #left_config { float: none; }
article #container #game #configuration #right_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 input[name="gen"], article #container #game #selected_options input,
article #container #game #configuration .first { margin-left:15px; margin-bottom:5px; } article #container #game #configuration .first { margin-left:15px; margin-bottom:5px; }
article #container #game .button { padding: 10px; padding-top: 20px; } article #container #game .button { padding: 10px; padding-top: 20px; }
article #container #game #configuration input[type="checkbox"] { article #container #game #configuration input[type="checkbox"] {
@ -407,11 +477,11 @@ span.form.giga {
} }
article #container input[type="submit"] { article #container input[type="submit"] {
padding: 6px; padding: 5px;
border: 2px; border: 2px;
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 15px;
margin: 4px; margin: 3px;
} }
article #container.game_active { article #container.game_active {
@ -425,38 +495,64 @@ span.form.giga {
} }
article #container #answers input:last-child { margin-right: 0px; } article #container #answers input:last-child { margin-right: 0px; }
article #container.game_active div#answers span { display: block; }
article #container.game_active div#answers span { article #container.diploma #score { background: none; }
display: block;
}
article #container.diploma #score {
background: none;
}
article #container #seed input { article #container #seed input {
width: 90%; width: 90%;
margin-top: 10px; margin-top: 10px;
} }
article #container.diploma #score { article #container.diploma #score { padding: 0px; }
padding: 0px; article #container.diploma { border: none; }
}
article #container.diploma {
border: none;
}
article #container .pokemon img { article #container .pokemon img {
height: 37vh; height: 37vh;
margin-top: 1vh; margin-top: 1vh;
} }
article #container #top_game .whois { width: 80%; }
article #container #top_game .chrono {
width: 2rem;
height: 2rem;
line-height: 1.8rem;
article #container .top-companion, article #container .companion { padding: 5px;
display: none; 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 { article #container .middle-companion {
width: 250px; width: 250px;
margin: auto; margin: auto;
@ -470,78 +566,10 @@ span.form.giga {
article #container.about p { margin-left: 0px; } article #container.about p { margin-left: 0px; }
#container #game #flashdex .pokedex { width: 230px; height: 260px; }
#container #game { text-align: justify; }
#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;
width: 60%;
}
#game #flashdex_config .generation .gen {
display: block;
position: relative;
padding: 10px;
width:15%;
}
#game #flashdex_config .gen { padding: 0; margin: 0; margin-left: 15px; 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; }
article #container #game .button {
padding: 10px; padding-top: 15px;
}
footer { height:6vh; } footer { height:6vh; }
}
@media screen and (max-width:400px) {
header { header img { height: 60px; }
display:block; header nav #hamburger { top: 1.05rem; }
height: 12vh;
margin-top: 0px;
padding: 0px;
}
header nav {
display: auto;
align-items: auto;
margin-right: auto;
margin-bottom: auto;
}
header nav #hamburger {
position: absolute;
margin-top: 0rem;
top: 1rem;
right: 1rem;
}
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;
background: #2f2e2e;
width: 100%;
text-align:center;
padding: 10px;
z-index:0;
}
} }

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()}});