mirror of
https://github.com/Alvin-Zilverstand/pokedex.git
synced 2026-03-06 11:07:31 +01:00
Add initial SVG icons and configuration for live server
This commit is contained in:
vista-man
3
pokedex/.vscode/settings.json
vendored
Normal file
3
pokedex/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
BIN
pokedex/Fonts/Moltors.ttf
Normal file
BIN
pokedex/Fonts/Moltors.ttf
Normal file
Binary file not shown.
BIN
pokedex/Fonts/PocketMonk.ttf
Normal file
BIN
pokedex/Fonts/PocketMonk.ttf
Normal file
Binary file not shown.
BIN
pokedex/Fonts/PokemonGb.ttf
Normal file
BIN
pokedex/Fonts/PokemonGb.ttf
Normal file
Binary file not shown.
BIN
pokedex/Fonts/SlumbersWeight.ttf
Normal file
BIN
pokedex/Fonts/SlumbersWeight.ttf
Normal file
Binary file not shown.
1
pokedex/Icons/bug.svg
Normal file
1
pokedex/Icons/bug.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m342.198.501279c.373-.5317158 1.105-.660937 1.637-.288625l36.354 25.455546c.532.3723.661 1.1051.289 1.6368l-50.599 72.2623c24.599 7.8587 41.358 16.3357 41.358 16.3357s-40.964 70.462-110.443 70.462-118.85-65.672-118.85-65.672 17.506-11.172 43.456-20.7539l-55.5-66.1415c-.417-.4973-.352-1.2386.145-1.6558l33.997-28.52715c.498-.41723 1.239-.35238 1.656.14487l70.272 83.74688c6.017-.6806 12.147-1.061 18.333-1.061 8.891 0 17.771.6759 26.44 1.8229zm13.746 189.200721c18.541-13.242 46.597-47.804 46.597-47.804s71.664 56.79 71.664 177.206c0 120.415-123.896 192.888-123.896 192.888s-59.195-59.781-73.727-135.562c-14.531-75.781 21.496-159.927 21.496-159.927s39.324-13.559 57.866-26.801zm-199.683 0c-18.541-13.242-46.597-47.804-46.597-47.804s-71.664 56.79-71.664 177.206c0 120.415 123.896 192.888 123.896 192.888s59.195-59.781 73.727-135.562c14.531-75.781-21.496-159.927-21.496-159.927s-39.324-13.559-57.866-26.801z" fill="#fff" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
3
pokedex/Icons/dark.svg
Normal file
3
pokedex/Icons/dark.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M229.379 452.85C239.106 454.339 249.068 455.111 259.212 455.111C367.214 455.111 454.767 367.558 454.767 259.556C454.767 151.553 367.214 64 259.212 64C251.966 64 244.811 64.3941 237.77 65.1621C291.345 105.751 326.767 176.062 326.767 256C326.767 340.04 287.616 413.44 229.379 452.85ZM255.656 512C397.041 512 511.656 397.385 511.656 256C511.656 114.615 397.041 0 255.656 0C114.271 0 -0.34375 114.615 -0.34375 256C-0.34375 397.385 114.271 512 255.656 512Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 624 B |
BIN
pokedex/Icons/default/logo.png
Normal file
BIN
pokedex/Icons/default/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
pokedex/Icons/default/pokeball.png
Normal file
BIN
pokedex/Icons/default/pokeball.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
14
pokedex/Icons/default/pokeball.svg
Normal file
14
pokedex/Icons/default/pokeball.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 1000 1000" overflow="visible" xml:space="preserve">
|
||||
<rect x="279.9" y="1096.8" display="none" fill="#ED1C24" stroke="#000000" stroke-miterlimit="10" width="957.2" height="70.5"/>
|
||||
<path display="none" fill="#ED1C24" stroke="#000000" stroke-miterlimit="10" d="M700.7,1331H463.5c-0.9,11.6-1.4,23.4-1.4,35.2
|
||||
s0.5,23.6,1.4,35.2h237.3c-1.9-11.5-2.9-23.2-2.9-35.2S698.8,1342.5,700.7,1331z M1355.1,1331h-237.3c1.9,11.5,2.9,23.2,2.9,35.2
|
||||
s-1,23.8-2.9,35.2h237.3c0.9-11.6,1.4-23.4,1.4-35.2S1356,1342.7,1355.1,1331z"/>
|
||||
<path fill="#FFFFFF" d="M291.5,464.5H54.2C72.2,234,264.9,52.6,500,52.6S927.8,234,945.8,464.5H708.5
|
||||
c-16.8-100-103.8-176.2-208.5-176.2S308.2,364.5,291.5,464.5z"/>
|
||||
<path fill="#FFFFFF" d="M708.5,535.5h237.3C927.8,766,735.1,947.4,500,947.4S72.2,766,54.2,535.5h237.3
|
||||
c16.8,100,103.8,176.2,208.5,176.2S691.8,635.5,708.5,535.5z"/>
|
||||
<circle fill="#FFFFFF" cx="500" cy="500" r="149.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
pokedex/Icons/dragon.svg
Normal file
3
pokedex/Icons/dragon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M280.702 254.881C284.172 252.765 287.116 248.331 289.49 243.403C320.735 256.173 342.692 286.349 342.692 321.54C342.692 368.29 303.942 406.189 256.142 406.189C236.52 406.189 218.423 399.802 203.906 389.039C199.144 386.784 195.226 384.618 192.02 382.845C187.047 380.096 183.786 378.293 181.744 378.575C175.775 379.398 177.508 384.89 179.083 389.879C180.152 393.268 181.149 396.425 179.606 397.727C177.992 399.091 172.764 394.106 166.655 388.282C158.339 380.353 148.391 370.868 143.7 373.717C139.991 375.97 143.592 382.081 148 389.561L148.327 390.116C150.189 393.278 152.347 396.498 154.316 399.436C158.319 405.407 161.543 410.219 159.93 411.033C157.98 412.017 144.394 402.847 132.945 390.116C128.526 385.203 124.246 379.877 120.268 374.928L120.268 374.927C111.561 364.093 104.307 355.068 100.235 356.137C95.3365 357.423 99.0421 367.527 104.487 377.25C107.033 381.797 110.028 386.427 112.621 390.436L112.621 390.437C116.654 396.671 119.715 401.402 118.605 401.984C117.107 402.767 103.926 389.914 94.9734 373.717C89.6559 364.096 85.1909 353.464 81.5761 344.857C77.656 335.522 74.7359 328.569 72.8131 327.869C66.1325 325.438 66.1325 339.059 68.8119 358.718C69.1614 361.283 69.6819 363.973 70.3228 366.712C96.307 450.785 176.128 512 270.567 512C386.084 512 479.728 420.412 479.728 307.432C479.728 199.9 394.899 111.747 287.12 103.494C287.256 98.4284 289.9 88.383 289.9 88.383C289.9 88.383 308.927 42.3472 309.933 32.5099C309.999 31.857 310.078 31.1475 310.163 30.3919C311.348 19.7629 313.553 0 296.551 0C287.471 0 283.249 6.75464 278.42 14.4799L278.42 14.48C276.566 17.4457 274.622 20.5545 272.28 23.479C255.412 44.5436 227.048 70.8488 210.965 84.8631C176.971 114.484 143.619 138.828 124.167 153.026L124.167 153.026L124.166 153.027C115.319 159.484 109.348 163.843 107.5 165.644C93.574 179.22 43.6418 269.286 43.6418 269.286C43.6418 269.286 27.4943 298.182 33.2338 304.043C38.9733 309.903 52.8141 308.56 52.8141 308.56C52.8141 308.56 238.755 265.903 255.402 262.539C259.884 261.633 263.048 261.11 265.477 260.709C272.072 259.62 273.256 259.424 280.702 254.881ZM149.235 200.064C139.254 209.551 122.701 232.196 122.701 232.196C122.701 232.196 153.465 234.091 170.408 217.986C187.352 201.88 183.47 174.433 183.47 174.433C183.47 174.433 159.215 190.577 149.235 200.064Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
3
pokedex/Icons/electric.svg
Normal file
3
pokedex/Icons/electric.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M152.56 0.583659C152.461 0.29796 152.674 0 152.976 0H332.805C332.998 0 333.169 0.125587 333.226 0.309782L415.824 267.171C415.911 267.454 415.7 267.741 415.403 267.741H295.684C295.538 267.741 295.433 267.88 295.473 268.021L364.135 509.726C364.269 510.195 363.654 510.501 363.361 510.111L96.5295 155.267C96.3115 154.977 96.5184 154.563 96.881 154.563H205.536C205.687 154.563 205.793 154.414 205.743 154.271L152.56 0.583659Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 594 B |
3
pokedex/Icons/fairy.svg
Normal file
3
pokedex/Icons/fairy.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M102.726 405.978L184.848 382.166L255.778 511.857C255.871 512.025 256.112 512.025 256.204 511.857L327.134 382.166L409.257 405.978C409.441 406.031 409.612 405.86 409.557 405.676L385.741 325.179L511.856 256.204C512.025 256.112 512.025 255.871 511.857 255.779L384.702 186.235L409.557 102.225C409.612 102.041 409.441 101.87 409.257 101.923L325.208 126.294L256.204 0.126188C256.112 -0.0420597 255.871 -0.0420644 255.779 0.126184L186.775 126.294L102.726 101.923C102.542 101.87 102.371 102.041 102.426 102.225L127.281 186.235L0.126188 255.779C-0.0420597 255.871 -0.0420644 256.112 0.126184 256.204L126.241 325.179L102.426 405.676C102.371 405.86 102.542 406.031 102.726 405.978ZM166.452 256.876L224.631 288.695L256.45 346.873C256.542 347.042 256.784 347.042 256.876 346.873L288.695 288.695L346.873 256.876C347.041 256.784 347.041 256.542 346.873 256.45L288.695 224.631L256.876 166.453C256.784 166.284 256.542 166.284 256.45 166.453L224.631 224.631L166.452 256.45C166.284 256.542 166.284 256.784 166.452 256.876Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
pokedex/Icons/fighting.svg
Normal file
3
pokedex/Icons/fighting.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.2336 42.5656C94.4299 18.1014 116.593 0 142.983 0C162.778 0 180.195 10.1847 190.279 25.6H206.792C217.051 15.0716 231.384 8.53333 247.245 8.53333C270.499 8.53333 290.471 22.5882 299.129 42.6667H312.954C321.617 37.2585 331.853 34.1333 342.818 34.1333C366.073 34.1333 386.044 48.1882 394.702 68.2667H432.297C432.618 68.2667 432.919 68.3532 433.178 68.5041C434.895 68.347 436.634 68.2667 438.391 68.2667C469.582 68.2667 494.866 93.5514 494.866 124.742V294.086L494.867 294.4L494.866 294.714V297.153C494.866 298.186 494.838 299.215 494.782 300.239C491.384 417.717 385.749 512 255.933 512C123.974 512 17 414.577 17 294.4C17 236.391 41.9249 183.683 82.5535 144.675C82.4522 201.228 83.4074 259.694 87.8107 258.691C99.6011 256.003 90.3891 80.8395 88.2336 42.5656Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 929 B |
3
pokedex/Icons/fire.svg
Normal file
3
pokedex/Icons/fire.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M352.258 395.394C358.584 372.263 346.305 324.71 346.305 324.71C346.305 324.71 337.399 363.449 323.483 377.767C311.611 389.98 297.066 398.451 276.206 400.677C293.261 392.393 304.99 375.12 304.99 355.155C304.99 327.129 281.878 304.409 253.368 304.409C224.858 304.409 201.745 327.129 201.745 355.155C201.745 362.809 203.47 370.068 206.557 376.576C188.725 362.37 185.921 339.594 185.921 339.594C185.921 339.594 166.009 422.264 220.875 461.152C275.74 500.04 383.219 466.614 383.219 466.614C383.219 466.614 229.41 574.837 115.436 457.05C17.2568 355.584 89.8111 222.003 89.8111 222.003C89.8111 222.003 86.6777 234.395 86.6777 248.78C86.6777 263.165 94.477 274.11 94.477 274.11C94.477 274.11 117.742 225.071 135.848 205.128C152.984 186.254 174.465 170.946 193.019 157.724C207.301 147.546 219.849 138.604 227.343 130.223C268.62 84.0687 243.311 0 243.311 0C243.311 0 289.841 41.02 302.831 93.9978C307.783 114.192 304.597 137.169 301.749 157.716C297.125 191.072 293.388 218.025 326.793 216.276C380.775 213.449 333.866 130.223 333.866 130.223C333.866 130.223 456.318 194.583 447.17 307.145C438.021 419.707 313.324 445.297 313.324 445.297C313.324 445.297 345.931 418.525 352.258 395.394Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
pokedex/Icons/flying.svg
Normal file
3
pokedex/Icons/flying.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M178.712 477.733C253.715 477.733 317.927 436.048 344.436 376.956C344.76 376.235 238.007 404.699 241.411 394.637C242.931 390.144 308.371 366.238 356.048 338.354C383.451 322.327 396.07 288.4 396.07 288.4C396.07 288.4 349.903 310.815 326.564 316.501C279.532 327.961 238.131 326.727 238.131 325.533C238.131 322.951 306.876 309.889 402.424 251.664C447.367 224.277 459.574 177.103 459.574 177.103C459.574 177.103 410.163 206.535 380.293 216.252C309.457 239.295 244.815 246.239 244.815 243.121C244.815 236.445 301.702 220.802 362.016 191.577C393.376 176.382 420.535 156.53 452.008 134.453C503.506 98.332 511.999 34 511.999 34C511.999 34 461.207 66.7601 436.42 77.6394C334.141 122.531 243.829 146.079 178.712 151.177C80.416 158.873 0 227.456 0 316.501C0 405.547 80.0119 477.733 178.712 477.733Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 959 B |
3
pokedex/Icons/ghost.svg
Normal file
3
pokedex/Icons/ghost.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M368.952 510.227C322.769 512.591 269.896 512.591 251.928 510.227C111.77 491.788 0 389.313 0 250.8C0 112.287 114.615 0 256 0C397.385 0 512 112.287 512 250.8C512 315.221 487.207 373.969 446.46 418.387C435.395 430.448 450.577 438.908 466.002 447.504C481.13 455.935 496.492 464.496 487.564 476.712C477.726 490.173 424.392 507.389 368.952 510.227ZM220 219.45C220 241.092 202.091 258.637 180 258.637C157.909 258.637 140 241.092 140 219.45C140 204.935 148.055 192.264 160.024 185.491C160.713 204.362 176.229 219.449 195.269 219.449H220C220 219.449 220 219.45 220 219.45ZM343.976 185.491C343.287 204.362 327.771 219.449 308.731 219.449H284C284 219.449 284 219.45 284 219.45C284 241.092 301.909 258.637 324 258.637C346.091 258.637 364 241.092 364 219.45C364 204.935 355.945 192.264 343.976 185.491Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 962 B |
1
pokedex/Icons/grass.svg
Normal file
1
pokedex/Icons/grass.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m97.4121 440.649c-1.7574-1.653-3.4954-3.338-5.2132-5.056-90.68455-90.684-90.68453-237.713 0-328.397 90.6841-90.6849 379.6401-96.7516 379.6401-96.7516s39.442 334.4646-51.242 425.1486c-80.54 80.54-205.522 89.55-296.005 27.031l72.908-89.471 116.55-25.163-95.139-9.511 60.462-61.562 68.824-15.077-54.422-16.117 54.422-98.176-77.41 86.828-29.893-42.183 10.523 69.648-53.917 60.782-24.993-76.9v102.268z" fill="#fff" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 565 B |
3
pokedex/Icons/ground.svg
Normal file
3
pokedex/Icons/ground.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.764 439.754C112.625 439.754 112.528 439.617 112.574 439.486L243.289 70.134C243.318 70.0537 243.394 70 243.479 70H383.021C383.106 70 383.183 70.0541 383.211 70.1349L511.987 439.487C512.032 439.618 511.935 439.754 511.797 439.754H116.692H112.764ZM0.201306 441.199C0.0609122 441.199 -0.0362852 441.059 0.0129607 440.928L97.3526 181.056C97.3821 180.977 97.4571 180.925 97.541 180.925H182.118C182.258 180.925 182.355 181.064 182.307 181.195L88.1823 441.067C88.1535 441.146 88.0779 441.199 87.9932 441.199H0.201306Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 687 B |
8
pokedex/Icons/ice.svg
Normal file
8
pokedex/Icons/ice.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M384.304 39.0418L385.879 177.392L265.209 235.319L263.721 104.69L384.304 39.0418Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M505.269 257.047L385.814 325.374L266.288 256.939L385.752 194.187L505.269 257.047Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M245.04 257.047L125.585 325.374L6.05861 256.939L125.523 194.187L245.04 257.047Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M124.243 38.4753L248.229 99.881L245.059 233.697L127.993 175.719L124.243 38.4753Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M387.678 473.525L263.692 412.119L266.862 278.302L383.928 336.281L387.678 473.525Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.525 474.77L126.949 336.42L247.62 278.493L249.108 409.121L128.525 474.77Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 981 B |
3
pokedex/Icons/normal.svg
Normal file
3
pokedex/Icons/normal.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M481 256C481 380.264 380.264 481 256 481C131.736 481 31 380.264 31 256C31 131.736 131.736 31 256 31C380.264 31 481 131.736 481 256ZM384.571 256C384.571 327.008 327.008 384.571 256 384.571C184.992 384.571 127.429 327.008 127.429 256C127.429 184.992 184.992 127.429 256 127.429C327.008 127.429 384.571 184.992 384.571 256Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 493 B |
3
pokedex/Icons/poison.svg
Normal file
3
pokedex/Icons/poison.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M427.821 393.449C479.524 352.108 512 292.376 512 225.95C512 101.161 397.385 0 256 0C114.615 0 0 101.161 0 225.95C0 289.978 30.1737 347.786 78.6553 388.901C75.7171 399.046 74.1052 410.081 74.1052 421.62C74.1052 471.535 104.267 512 141.474 512C165.65 512 186.852 494.915 198.737 469.254C210.622 494.915 231.824 512 256 512C278.038 512 297.604 497.804 309.895 475.857C322.186 497.804 341.752 512 363.789 512C400.996 512 431.158 471.535 431.158 421.62C431.158 411.784 429.986 402.314 427.821 393.449ZM404.211 230.431C404.211 293.785 336.346 345.144 252.632 345.144C168.917 345.144 101.053 293.785 101.053 230.431C101.053 167.077 168.917 115.718 252.632 115.718C336.346 115.718 404.211 167.077 404.211 230.431Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 878 B |
BIN
pokedex/Icons/pokeball.png
Normal file
BIN
pokedex/Icons/pokeball.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
3
pokedex/Icons/psychic.svg
Normal file
3
pokedex/Icons/psychic.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M455.925 425.184C455.925 425.184 391.365 476.963 262.893 455.536C165.423 439.279 113.437 331.833 113.437 274.079C113.437 137.149 214.783 105.988 283.3 105.988C351.816 105.988 396.513 172.788 396.513 224.508C396.513 276.228 359.933 321.466 303.006 321.466C246.08 321.466 229.22 281.501 229.22 244.758C229.22 208.016 258.947 195.071 286.058 195.071C313.169 195.071 322.452 218.217 322.452 238.11C322.452 258.004 307.017 265.128 294.143 265.128C281.269 265.128 279.996 258.633 275.069 251.807C270.141 244.982 281.353 219.146 262.893 219.146C244.433 219.146 240.992 248.847 240.992 248.847C240.992 248.847 247.722 306.18 303.006 305.191C358.291 304.201 384.518 261.461 376.896 219.146C369.274 176.83 328.207 131.865 256.133 140.951C184.059 150.037 154.632 222.861 167.603 300.685C180.574 378.51 273.807 423.602 347.112 407.379C420.418 391.156 493.429 338.086 493.429 203.533C493.429 68.9789 376.896 -11.9002 237.941 1.42913C98.9859 14.7584 12.729 136.242 18.2502 282.207C23.7714 428.172 162.275 507.669 279.394 511.766C396.513 515.864 468.312 448.067 468.312 448.067C468.312 448.067 484.459 433.668 478.128 422.424C471.798 411.18 455.925 425.184 455.925 425.184Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
pokedex/Icons/rock.svg
Normal file
3
pokedex/Icons/rock.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M395.138 244.757C395.109 244.717 395.097 244.667 395.105 244.618L427.769 54.1518C427.784 54.0641 427.861 54 427.949 54H438.287C438.367 54 438.437 54.0517 438.461 54.1277L512.051 287.131C512.074 287.203 512.049 287.283 511.989 287.33L457.73 329.693C457.649 329.756 457.532 329.74 457.471 329.657L395.138 244.757ZM-1 371.022C-1 371.101 -0.949204 371.171 -0.874109 371.196L110.975 407.767C111.029 407.785 111.089 407.776 111.136 407.744L361.145 235.144C361.187 235.115 361.215 235.07 361.222 235.02L388.032 55.1284C388.049 55.018 387.963 54.9188 387.852 54.9188H166.406C166.351 54.9188 166.3 54.943 166.265 54.9849L-0.957974 256.714C-0.98514 256.747 -1 256.788 -1 256.831V371.022ZM157.583 417.085L279.776 457.112C279.831 457.13 279.892 457.121 279.939 457.087L425.418 352.734C425.499 352.677 425.519 352.566 425.464 352.484L370.928 271.329C370.871 271.244 370.757 271.222 370.673 271.28L157.583 417.085Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
3
pokedex/Icons/steel.svg
Normal file
3
pokedex/Icons/steel.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0511107 254.527C-0.0170046 254.411 -0.0170388 254.267 0.0510196 254.15L128.795 34.1843C128.862 34.0702 128.985 34 129.117 34H384.294C384.427 34 384.55 34.0708 384.617 34.1859L511.949 254.152C512.016 254.267 512.016 254.41 511.949 254.525L384.617 474.244C384.55 474.359 384.427 474.43 384.294 474.43H129.117C128.985 474.43 128.862 474.36 128.795 474.246L0.0511107 254.527ZM374.617 254.215C374.617 319.703 321.528 372.792 256.04 372.792C190.552 372.792 137.463 319.703 137.463 254.215C137.463 188.726 190.552 135.638 256.04 135.638C321.528 135.638 374.617 188.726 374.617 254.215Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 754 B |
3
pokedex/Icons/water.svg
Normal file
3
pokedex/Icons/water.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M422.172 346.515C422.172 437.897 347.813 511.977 256.086 511.977C164.359 511.977 90 437.897 90 346.515C90 257.639 247.102 13.5479 255.718 0.22781C255.915 -0.0759384 256.258 -0.0759358 256.454 0.227813C265.07 13.5479 422.172 257.639 422.172 346.515ZM228.4 458.931C144.12 440.49 158.542 347.13 158.542 347.13C158.542 347.13 181.556 403.488 237.405 421.744C293.253 439.999 360.745 413.225 360.745 413.225C360.745 413.225 312.68 477.371 228.4 458.931Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 620 B |
78
pokedex/Readme.md
Normal file
78
pokedex/Readme.md
Normal file
@@ -0,0 +1,78 @@
|
||||
# Pokedex App
|
||||
[](https://lazyjinchuriki.github.io/pokedex/)
|
||||
|
||||
Pokedex is a web application that serves as a comprehensive guide to Pokemon. It allows users to search for information on different Pokemon species, including their characteristics, abilities, types, and evolutions. The website is built using basic HTML, CSS, and vanilla JavaScript, and it utilizes the PokeAPI to fetch data on Pokemon.
|
||||
|
||||
## Tech Stacks
|
||||
|
||||
  
|
||||
|
||||
## Features
|
||||
|
||||
Pokedex offers the following features:
|
||||
|
||||
- Search for Pokemon by name or Pokedex number
|
||||
- Get detailed information about a specific Pokemon, including its types, abilities, stats, and evolutions
|
||||
- View a list of all Pokemon and browse through them
|
||||
- Filter Pokemon based on their types
|
||||
- View popular Pokemon and their rankings
|
||||
- View top-rated Pokemon based on their stats
|
||||
- Explore Pokemon evolutions and their evolutionary paths
|
||||
|
||||
## Installation
|
||||
|
||||
To install Pokedex, follow these steps:
|
||||
|
||||
1. Download the source code from the repository: https://github.com/lazyjinchuriki/pokedex
|
||||
2. Extract the files from the downloaded ZIP archive.
|
||||
3. Open the `index.html` file in your web browser.
|
||||
|
||||
## Usage
|
||||
|
||||
Once you have installed Pokedex, you can use it by opening it in your web browser. You can search for Pokemon using the search bar or browse through the list of all Pokemon. Clicking on a Pokemon will display its detailed information, including its types, abilities, stats, and evolutions.
|
||||
|
||||
## Screenshots
|
||||
|
||||
Here are some screenshots of Pokedex in action:
|
||||
|
||||
| Homepage |
|
||||
|---------------------------------|
|
||||
|  |
|
||||
|
||||
| Pokemon Overview | Mobile Version |
|
||||
|--------------------------------|--------------------------------|
|
||||
|  |  |
|
||||
|
||||
| Pokemon Stats | Pokemon Evolution |
|
||||
|---------------------------------|--------------------------------|
|
||||
|  |  |
|
||||
|
||||
|
||||
## Credits
|
||||
|
||||
Pokedex uses the following open source libraries and APIs:
|
||||
|
||||
- PokeAPI: https://pokeapi.co/
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions to Pokedex are always welcome. If you find any bugs or issues, please open an issue on GitHub or submit a pull request.
|
||||
|
||||
## Contact
|
||||
|
||||
If you have any questions or concerns, you can contact the author of this project at [rahulkhushalani@proton.me](mailto:rahulkhushalani@proton.me).
|
||||
|
||||
### Donations
|
||||
|
||||
If you found Gallery useful, consider buying me a coffee!
|
||||
|
||||
<a href="https://www.buymeacoffee.com/lazyjinchuriki">
|
||||
<img src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg" width="150" height="50">
|
||||
</a>
|
||||
|
||||
## Social
|
||||
|
||||
If you're not coding right now, check out my socials:
|
||||
|
||||
[](https://www.instagram.com/amundaneguy/)
|
||||
[](https://www.linkedin.com/in/rahul-khushalani-77ab21201/)
|
||||
44
pokedex/details.html
Normal file
44
pokedex/details.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<title>Pokemon Details</title>
|
||||
<link rel="stylesheet" href="style2.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="pokemon-details">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="details">
|
||||
<div class="tabs">
|
||||
<span data-tab-value="#tab_1">Overview</span>
|
||||
<span data-tab-value="#tab_2">Stats</span>
|
||||
<span data-tab-value="#tab_3">Evolution</span>
|
||||
</div>
|
||||
|
||||
<div id="tab-content">
|
||||
<div class="tabs__tab active" id="tab_1" data-tab-info>
|
||||
</div>
|
||||
<div class="tabs__tab " id="tab_2" data-tab-info>
|
||||
</div>
|
||||
<div class="tabs__tab " id="tab_3" data-tab-info>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- preloader-->
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader">
|
||||
</div>
|
||||
<div class="loader-section section-left"></div>
|
||||
<div class="loader-section section-right"></div>
|
||||
</div>
|
||||
|
||||
<!-- preloader ends-->
|
||||
<script src="script2.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
79
pokedex/index.html
Normal file
79
pokedex/index.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
/>
|
||||
<link rel="icon" href="./Icons/pokeball.png" type="image/x-icon">
|
||||
<title>Pokedex</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div class="header">
|
||||
|
||||
<div class="logo">
|
||||
<img class="img" src="./Icons/default/pokeball.png" alt="logo" />
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<input
|
||||
id="searchbar"
|
||||
onkeyup="search_pokemon()"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="features">
|
||||
<div class="darkmode-container">
|
||||
<div class="darkmode-content">
|
||||
<span class="darkmode-text">Dark Mode</span>
|
||||
<i class="fa-solid fa-toggle-off" id="dark"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github">
|
||||
<a href="https://github.com/lazyjinchuriki/pokedex" target="_blank"
|
||||
><i class="github-icon fab fa-github"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="select-wrapper">
|
||||
<div class="regions" id="regionSelect">
|
||||
<span data-value="kanto" class="active regionvalue">Kanto</span>
|
||||
<span data-value="johto" class="regionvalue">Johto</span>
|
||||
<span data-value="hoenn" class="regionvalue">Hoenn</span>
|
||||
<span data-value="sinnoh" class="regionvalue">Sinnoh</span>
|
||||
<span data-value="unova" class="regionvalue">Unova</span>
|
||||
<span data-value="kalos" class="regionvalue">Kalos</span>
|
||||
<span data-value="alola" class="regionvalue">Alola</span>
|
||||
<span data-value="galar" class="regionvalue">Galar</span>
|
||||
<span data-value="hisui" class="regionvalue">Hisui</span>
|
||||
<span data-value="paldea" class="regionvalue">Paldea</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="poke-container" id="poke-container"></div>
|
||||
<div class="lds-ring">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<button id="scrollToTopBtn"><i class="fas fa-chevron-up"></i></button>
|
||||
<button id="scrollToDownBtn"><i class="fas fa-chevron-down"></i></button>
|
||||
</div>
|
||||
|
||||
<!-- Design inspired by this Dribbble shot: https://dribbble.com/shots/5611109--Pokemon -->
|
||||
<script src="script.js"></script>
|
||||
<script src="https://kit.fontawesome.com/919bc986f5.js" crossorigin="anonymous"></script>
|
||||
<!-- <script src="new.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
BIN
pokedex/screenshots/evolution.jpg
Normal file
BIN
pokedex/screenshots/evolution.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
BIN
pokedex/screenshots/homepage.png
Normal file
BIN
pokedex/screenshots/homepage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
BIN
pokedex/screenshots/mobile.jpg
Normal file
BIN
pokedex/screenshots/mobile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
pokedex/screenshots/overview.jpg
Normal file
BIN
pokedex/screenshots/overview.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
BIN
pokedex/screenshots/stats.jpg
Normal file
BIN
pokedex/screenshots/stats.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
293
pokedex/script.js
Normal file
293
pokedex/script.js
Normal file
@@ -0,0 +1,293 @@
|
||||
const poke_container = document.getElementById("poke-container");
|
||||
const pokemon_count = 1010;
|
||||
const colors = {
|
||||
fire: "#e03a3a",
|
||||
grass: "#50C878",
|
||||
electric: "#fad343",
|
||||
water: "#1E90FF",
|
||||
ground: "#735139",
|
||||
rock: "#63594f",
|
||||
fairy: "#EE99AC",
|
||||
poison: "#b34fb3",
|
||||
bug: "#A8B820",
|
||||
dragon: "#fc883a",
|
||||
psychic: "#882eff",
|
||||
flying: "#87CEEB",
|
||||
fighting: "#bf5858",
|
||||
normal: "#D2B48C",
|
||||
ghost: "#7B62A3",
|
||||
dark: "#414063",
|
||||
steel: "#808080",
|
||||
ice: "#98D8D8",
|
||||
};
|
||||
const regions = {
|
||||
kanto: {
|
||||
start: 1,
|
||||
end: 151,
|
||||
},
|
||||
johto: {
|
||||
start: 152,
|
||||
end: 251,
|
||||
},
|
||||
hoenn: {
|
||||
start: 252,
|
||||
end: 386,
|
||||
},
|
||||
sinnoh: {
|
||||
start: 387,
|
||||
end: 493,
|
||||
},
|
||||
unova: {
|
||||
start: 494,
|
||||
end: 649,
|
||||
},
|
||||
kalos: {
|
||||
start: 650,
|
||||
end: 721,
|
||||
},
|
||||
alola: {
|
||||
start: 722,
|
||||
end: 809,
|
||||
},
|
||||
galar: {
|
||||
start: 810,
|
||||
end: 898,
|
||||
},
|
||||
hisui: {
|
||||
start: 899,
|
||||
end: 905,
|
||||
},
|
||||
paldea: {
|
||||
start: 906,
|
||||
end: 1010,
|
||||
},
|
||||
};
|
||||
|
||||
const loader = document.querySelector(".lds-ring");
|
||||
const fetchPokemons = async (region) => {
|
||||
const { start, end } = regions[region];
|
||||
|
||||
loader.classList.add("ring-active");
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
const pokemonName = i.toString();
|
||||
const url = `https://pokeapi.co/api/v2/pokemon/${pokemonName}`;
|
||||
|
||||
let res = await fetch(url);
|
||||
let data = await res.json();
|
||||
loader.classList.remove('ring-active')
|
||||
createPokemonCard(data);
|
||||
setTimeout(() => {
|
||||
}, "150");
|
||||
}
|
||||
};
|
||||
|
||||
const main_types = Object.keys(colors);
|
||||
|
||||
// const fetchPokemons = async () => {
|
||||
// for (let i = 1; i <= pokemon_count; i++) {
|
||||
// await getPokemon(i);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const getPokemon = async (id) => {
|
||||
// const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
|
||||
// const res = await fetch(url);
|
||||
// const data = await res.json();
|
||||
// console.log(data);
|
||||
// createPokemonCard(data);
|
||||
// };
|
||||
|
||||
const createPokemonCard = (pokemon) => {
|
||||
|
||||
const pokemonEl = document.createElement("div");
|
||||
pokemonEl.classList.add("card");
|
||||
pokemonEl.id = pokemon.id;
|
||||
|
||||
let name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
|
||||
if (name.length > 9) {
|
||||
name = name.split("-")[0];
|
||||
} else {
|
||||
name = name;
|
||||
}
|
||||
const id = pokemon.id.toString().padStart(3, "0");
|
||||
// const moves = [];
|
||||
// try {
|
||||
// for (let i = 0; i <= 1 ; i++) {
|
||||
// moves.push(pokemon.moves[i].move.name);
|
||||
// }
|
||||
// console.log(moves);
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
|
||||
let weight = pokemon.weight / 10 + "kg";
|
||||
let height = pokemon.height / 10 + "m";
|
||||
|
||||
const poke_types = pokemon.types.map((type) => type.type.name);
|
||||
const type = main_types.find((type) => poke_types.indexOf(type) > -1);
|
||||
const color = colors[type];
|
||||
let frontImg;
|
||||
let backImg;
|
||||
try{
|
||||
frontImg = pokemon.sprites.front_default;
|
||||
backImg = pokemon.sprites.back_default;
|
||||
}
|
||||
catch(err){
|
||||
frontImg = "#";
|
||||
backImg = "#";
|
||||
}
|
||||
|
||||
pokemonEl.style.backgroundColor = color;
|
||||
|
||||
const pokemonInnerHTML = `
|
||||
<div class="front side">
|
||||
<div class="img-container">
|
||||
<img class="background" src="./Icons/default/pokeball.svg" alt="pokeball">
|
||||
<img class="image" src="${frontImg}" alt="${name}">
|
||||
</div>
|
||||
<span class="number">#${id}</span>
|
||||
<h3 class="name">${name}</h3>
|
||||
<div class="types">
|
||||
${poke_types
|
||||
.map(
|
||||
(type) => `
|
||||
<div class="poke__type__bg ${type}">
|
||||
<img src="Icons/${type}.svg" alt="Type">
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
<div class="back side">
|
||||
<div class="img-container">
|
||||
<img class="image" src="${
|
||||
backImg == null ? frontImg : backImg
|
||||
}" alt="${name}" />
|
||||
<img class="background" src="./Icons/default/pokeball.svg" alt="pokeball">
|
||||
</div>
|
||||
<span class="number">#${id}</span>
|
||||
<div class="stats">
|
||||
<div> Weight:<br> <b>${weight}</b></div>
|
||||
<div> Height:<br> <b>${height}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// <div class="moves">
|
||||
// <div>${moves[0]}</div>
|
||||
// <div>${moves[1]}</div>
|
||||
// </div>
|
||||
|
||||
pokemonEl.innerHTML = pokemonInnerHTML;
|
||||
// Add event listener to open new page on card click
|
||||
pokemonEl.addEventListener("click", () => {
|
||||
// Open new page with specific card details
|
||||
window.open(`details.html?id=${id}`, "_self");
|
||||
});
|
||||
|
||||
const pokemonElHolder = document.createElement("div");
|
||||
pokemonElHolder.classList.add("cardContainer");
|
||||
pokemonElHolder.appendChild(pokemonEl);
|
||||
|
||||
poke_container.appendChild(pokemonElHolder);
|
||||
};
|
||||
|
||||
const changeRegion = () => {
|
||||
const regionSelect = document.getElementById("regionSelect");
|
||||
regionSelect.addEventListener("click", (event) => {
|
||||
const selectedRegion = event.target.getAttribute("data-value");
|
||||
const activeRegion = document.querySelector(".active");
|
||||
if (selectedRegion) {
|
||||
poke_container.innerHTML = "";
|
||||
fetchPokemons(selectedRegion);
|
||||
activeRegion.classList.remove("active");
|
||||
event.target.classList.add("active");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
fetchPokemons("kanto");
|
||||
|
||||
window.addEventListener("scroll", function () {
|
||||
var scrollToTopBtn = document.getElementById("scrollToTopBtn");
|
||||
if (window.scrollY > 100) {
|
||||
scrollToTopBtn.style.display = "block";
|
||||
} else {
|
||||
scrollToTopBtn.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("scrollToTopBtn")
|
||||
.addEventListener("click", function () {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("scroll", function () {
|
||||
var scrollToDownBtn = document.getElementById("scrollToDownBtn");
|
||||
if (window.scrollY > 100) {
|
||||
scrollToDownBtn.style.display = "block";
|
||||
} else {
|
||||
scrollToDownBtn.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("scrollToDownBtn")
|
||||
.addEventListener("click", function () {
|
||||
window.scrollTo({
|
||||
top: 999999,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
function search_pokemon() {
|
||||
let input = document.getElementById("searchbar").value;
|
||||
input = input.toLowerCase();
|
||||
input = input.replace(/\s+/g, ""); // removing all spaces from search box
|
||||
// storing all card along wiith details in variable
|
||||
let x = document.getElementsByClassName("cardContainer");
|
||||
|
||||
for (i = 0; i < x.length; i++) {
|
||||
// checking the name or type entered by user from search box if doesn't match than dont display the message
|
||||
if (!x[i].innerHTML.toLowerCase().includes(input)) {
|
||||
x[i].style.display = "none";
|
||||
}
|
||||
// checking the name or type entered by user from search box if doesn't match than dont display the pokemon card
|
||||
else {
|
||||
x[i].style.display = "block";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// dark mode enabled
|
||||
const darkModeButton = document.getElementById("dark");
|
||||
|
||||
darkModeButton.addEventListener("click", () => {
|
||||
|
||||
let element = document.body;
|
||||
element.classList.toggle("dark-mode");
|
||||
document.body.classList.toggle("dark-mode");
|
||||
|
||||
const regions = document.querySelectorAll(".regionvalue");
|
||||
console.log(regions);
|
||||
regions.forEach(region => {
|
||||
region.classList.toggle("dark-mode");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
const darkModeIcon = document.getElementById("dark");
|
||||
darkModeButton.addEventListener("click", () => {
|
||||
document.body.classList.toggle("dark-mode");
|
||||
darkModeIcon.classList.toggle("fa-toggle-on");
|
||||
// You can add additional elements that need dark mode here
|
||||
});
|
||||
|
||||
|
||||
changeRegion();
|
||||
681
pokedex/script2.js
Normal file
681
pokedex/script2.js
Normal file
@@ -0,0 +1,681 @@
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const id = parseInt(params.get("id"));
|
||||
|
||||
// console.log(id);
|
||||
const colors = {
|
||||
fire: "#e03a3a",
|
||||
grass: "#50C878",
|
||||
electric: "#fad343",
|
||||
water: "#1E90FF",
|
||||
ground: "#735139",
|
||||
rock: "#63594f",
|
||||
fairy: "#EE99AC",
|
||||
poison: "#b34fb3",
|
||||
bug: "#A8B820",
|
||||
dragon: "#fc883a",
|
||||
psychic: "#882eff",
|
||||
flying: "#87CEEB",
|
||||
fighting: "#bf5858",
|
||||
normal: "#D2B48C",
|
||||
ghost: "#7B62A3",
|
||||
dark: "#414063",
|
||||
steel: "#808080",
|
||||
ice: "#98D8D8",
|
||||
};
|
||||
const main_types = Object.keys(colors);
|
||||
|
||||
|
||||
|
||||
|
||||
// const getPokeApi = async (url)=>{
|
||||
|
||||
// await fetch(url)
|
||||
// .then(
|
||||
// async response => {
|
||||
// let isJson = response.headers.get('content-type')?.includes('application/json');
|
||||
// let data = isJson ? await response.json() : null;
|
||||
|
||||
// // check for error response
|
||||
// if (!response.ok) {
|
||||
// // get error message from body or default to response status
|
||||
// const error = (data && data.message) || response.status;
|
||||
// return Promise.reject(error);
|
||||
// }
|
||||
// // element.innerHTML = JSON.stringify(data, null, 4);
|
||||
// })
|
||||
// .catch(error => {
|
||||
// // element.parentElement.innerHTML = `Error: ${error}`;
|
||||
// console.error('There was an error!', error);
|
||||
// });
|
||||
// }
|
||||
const getType_data = async(url)=>{
|
||||
let res = await fetch(url);
|
||||
let data = await res.json();
|
||||
return data;
|
||||
}
|
||||
const fetchPokemonDetails = async () => {
|
||||
|
||||
|
||||
const url = `https://pokeapi.co/api/v2/pokemon/${id}/`;
|
||||
const url2 = `https://pokeapi.co/api/v2/pokemon-species/${id}/`;
|
||||
//changing the api so that the query is pokemon specific
|
||||
// const url3 = `https://pokeapi.co/api/v2/type/${id}/`;
|
||||
|
||||
const res = await fetch(url);
|
||||
const res2 = await fetch(url2);
|
||||
|
||||
const data = await res.json();
|
||||
const data2 = await res2.json();
|
||||
|
||||
|
||||
// get the type of pokemon
|
||||
let type_names = data.types.map((val, index)=>val.type.name)
|
||||
// console.log(data.types);
|
||||
let data3 = type_names.map( async (val) => {
|
||||
return await getType_data(`https://pokeapi.co/api/v2/type/${val}/`)
|
||||
})
|
||||
|
||||
// console.log(type_names);
|
||||
|
||||
const arr = [data, data2, data3];
|
||||
await displayPokemonDetails(arr);
|
||||
// console.log(arr);
|
||||
};
|
||||
|
||||
const displayPokemonDetails = async (pokemon) => {
|
||||
const name = pokemon[0].name[0].toUpperCase() + pokemon[0].name.slice(1);
|
||||
const japaneseName = pokemon[1].names[0].name;
|
||||
const id = pokemon[0].id.toString().padStart(3, "0");
|
||||
const imageSrc = pokemon[0].sprites.other.dream_world.front_default;
|
||||
const imageSrc2 = pokemon[0].sprites.other["official-artwork"].front_default;
|
||||
const poke_types = pokemon[0].types.map((type) => type.type.name);
|
||||
const type = main_types.find((type) => poke_types.indexOf(type) > -1);
|
||||
|
||||
const color = colors[type];
|
||||
|
||||
const hp = pokemon[0].stats[0].base_stat;
|
||||
// const maxHp = hp * 2 + 204;
|
||||
// const minHp = hp * 2 + 110;
|
||||
const attack = pokemon[0].stats[1].base_stat;
|
||||
// const maxAttack = Math.floor((attack * 2 + 99) * 1.1);
|
||||
// const minAttack = Math.floor((attack * 2 + 5) * 0.9);
|
||||
const spAttack = Math.floor(pokemon[0].stats[3].base_stat);
|
||||
// const maxSpAttack = Math.floor((spAttack * 2 + 99) * 1.1);
|
||||
// const minSpAttack = Math.floor((spAttack * 2 + 5) * 0.9);
|
||||
const spDefense = Math.floor(pokemon[0].stats[4].base_stat);
|
||||
// const maxSpDefense = Math.floor((spDefense * 2 + 99) * 1.1);
|
||||
// const minSpDefense = Math.floor((spDefense * 2 + 5) * 0.9);
|
||||
const defense = pokemon[0].stats[2].base_stat;
|
||||
// const maxDefense = Math.floor((defense * 2 + 99) * 1.1);
|
||||
// const minDefense = Math.floor((defense * 2 + 5) * 0.9);
|
||||
const speed = pokemon[0].stats[5].base_stat;
|
||||
// const maxSpeed = Math.floor((speed * 2 + 99) * 1.1);
|
||||
// const minSpeed = Math.floor((speed * 2 + 5) * 0.9);
|
||||
|
||||
const abilities = pokemon[0].abilities.map((ability) => ability.ability.name);
|
||||
const eggGroups = pokemon[1].egg_groups.map((group) => group.name);
|
||||
// const moves = pokemon[0].moves.map((move) => move.move.name);
|
||||
document.body.style.backgroundColor = color;
|
||||
const evolutionChainUrl = pokemon[1].evolution_chain.url;
|
||||
const resEvolutionChain = await fetch(evolutionChainUrl);
|
||||
const evolutionChainData = await resEvolutionChain.json();
|
||||
// console.log(evolutionChainData);
|
||||
|
||||
const varieties = pokemon[1].varieties
|
||||
.map((variety) => {
|
||||
if (variety.is_default === true) {
|
||||
return null; // or return undefined;
|
||||
}
|
||||
return variety.pokemon;
|
||||
})
|
||||
.filter((item) => item !== null); // Remove null items from the array
|
||||
// console.log(varieties);
|
||||
const resVarieties = await Promise.all(
|
||||
varieties.map((variety) => fetch(variety.url))
|
||||
);
|
||||
const varietiesData = await Promise.all(
|
||||
resVarieties.map((res) => res.json())
|
||||
);
|
||||
// console.log(varietiesData);
|
||||
|
||||
let tab3 = document.getElementById("tab_3");
|
||||
tab3.innerHTML = `
|
||||
<div class="evolution">
|
||||
</div>
|
||||
<div class="varieties">
|
||||
</div>
|
||||
`;
|
||||
|
||||
const displayVarieties = (varietiesData) => {
|
||||
const container = document.querySelector(".varieties");
|
||||
container.innerHTML = "";
|
||||
|
||||
varietiesData.forEach((variety) => {
|
||||
const pokemonName = variety.name;
|
||||
const imgUrl = variety.sprites.other["official-artwork"].front_default;
|
||||
|
||||
const pokemonDiv = document.createElement("div");
|
||||
pokemonDiv.classList.add("varieties__pokemon");
|
||||
|
||||
const nameElement = document.createElement("h1");
|
||||
nameElement.textContent = pokemonName;
|
||||
pokemonDiv.appendChild(nameElement);
|
||||
|
||||
const imageElement = document.createElement("img");
|
||||
imageElement.src = imgUrl;
|
||||
pokemonDiv.appendChild(imageElement);
|
||||
|
||||
container.appendChild(pokemonDiv);
|
||||
});
|
||||
};
|
||||
|
||||
displayVarieties(varietiesData);
|
||||
const displayEvolutionChain = (evolutionChainData) => {
|
||||
const container = document.querySelector(".evolution");
|
||||
container.innerHTML = "";
|
||||
|
||||
const chain = evolutionChainData.chain;
|
||||
displayEvolutionRecursive(chain, container);
|
||||
};
|
||||
|
||||
const displayEvolutionRecursive = (chain, container) => {
|
||||
try{
|
||||
|
||||
const pokemonName = chain.species.name;
|
||||
const imgUrl = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${getPokemonIdFromURL(
|
||||
chain.species.url
|
||||
)}.png`;
|
||||
|
||||
const EvolutionId = getPokemonIdFromURL(chain.species.url);
|
||||
|
||||
const pokemonDiv = document.createElement("div");
|
||||
pokemonDiv.classList.add("evolution__pokemon");
|
||||
const iconDiv = document.createElement("div");
|
||||
|
||||
const nameElement = document.createElement("h1");
|
||||
nameElement.textContent = pokemonName;
|
||||
pokemonDiv.appendChild(nameElement);
|
||||
|
||||
const imageElement = document.createElement("img");
|
||||
imageElement.src = imgUrl;
|
||||
pokemonDiv.appendChild(imageElement);
|
||||
imageElement.addEventListener("click", () => {
|
||||
window.location.href = `details.html?id=${EvolutionId}}`;
|
||||
});
|
||||
|
||||
if (chain.evolves_to.length > 0) {
|
||||
const arrowIndicator = document.createElement("i");
|
||||
arrowIndicator.classList.add(
|
||||
"fa-solid",
|
||||
"fa-caret-right",
|
||||
"fa-2x",
|
||||
"fa-beat"
|
||||
);
|
||||
iconDiv.appendChild(arrowIndicator);
|
||||
}
|
||||
|
||||
container.appendChild(pokemonDiv);
|
||||
container.appendChild(iconDiv);
|
||||
|
||||
if (chain.evolves_to.length > 0) {
|
||||
const evolutionData = chain.evolves_to[0];
|
||||
displayEvolutionRecursive(evolutionData, container);
|
||||
}
|
||||
|
||||
}
|
||||
catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function getPokemonIdFromURL(url) {
|
||||
const parts = url.split("/");
|
||||
return parts[parts.length - 2];
|
||||
}
|
||||
displayEvolutionChain(evolutionChainData);
|
||||
|
||||
if(pokemon[2] != null){
|
||||
|
||||
var weakTypesString='';
|
||||
var strongTypesString='';
|
||||
|
||||
pokemon[2].map(async (val)=>{
|
||||
|
||||
val.then((res)=>{
|
||||
// console.log(res);
|
||||
|
||||
let weakTypes=[res.damage_relations.no_damage_to.map((type)=>{
|
||||
return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
|
||||
})]
|
||||
|
||||
// var weakTypesString='';
|
||||
for(let i in weakTypes){
|
||||
weakTypesString += weakTypes[i];
|
||||
}
|
||||
|
||||
let strongTypes=[res.damage_relations.double_damage_to.map((type)=>{
|
||||
return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
|
||||
})]
|
||||
|
||||
// var strongTypesString='';
|
||||
for(let i in strongTypes){
|
||||
strongTypesString += strongTypes[i];
|
||||
}
|
||||
|
||||
let tab2 = document.getElementById("tab_2");
|
||||
tab2.innerHTML = `
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Health:</span>
|
||||
<span>${hp}</span>
|
||||
</div>
|
||||
<meter id="hp"
|
||||
style="content: 'HP';"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${hp}">
|
||||
</meter>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Attack:</span>
|
||||
<span>${attack}</span>
|
||||
</div>
|
||||
<meter id="attack"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${attack}">
|
||||
</meter>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Defense:</span>
|
||||
<span>${defense}</span>
|
||||
</div>
|
||||
<meter id="defense"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${defense}">
|
||||
</meter>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Sp. Atk:</span>
|
||||
<span>${spAttack}</span>
|
||||
</div>
|
||||
<meter id="spattack"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${spAttack}">
|
||||
</meter>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Sp. Def:</span>
|
||||
<span>${spDefense}</span>
|
||||
</div>
|
||||
<meter id="spdefense"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${spDefense}">
|
||||
</meter>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span>Speed:</span>
|
||||
<span>${speed}</span>
|
||||
</div>
|
||||
<meter id="speed"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${speed}">
|
||||
</meter>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Total:</span>
|
||||
<span>${speed + hp + attack + defense + spAttack + spDefense}</span>
|
||||
</div>
|
||||
<meter id="total"
|
||||
min="0" max="1530"
|
||||
low="500" high="720" optimum="1000"
|
||||
value="${speed + hp + attack + defense + spAttack + spDefense}">
|
||||
</meter>
|
||||
</div>
|
||||
<div class="statTypes">
|
||||
<div class="statTypeText">
|
||||
<div>
|
||||
Weak Against
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="statIconHolder">
|
||||
${weakTypesString==""?'None':weakTypesString}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="statTypes">
|
||||
<div class="statTypeText">
|
||||
<span>
|
||||
Strong Against
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="statIconHolder">
|
||||
${strongTypesString==""?'None':strongTypesString}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
// let weakTypes=[...pokemon[2].damage_relations.no_damage_to.map((type)=>{
|
||||
// return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
|
||||
// })]
|
||||
|
||||
// var weakTypesString='';
|
||||
// for(let i in weakTypes){
|
||||
// weakTypesString=weakTypesString+weakTypes[i];
|
||||
|
||||
// }
|
||||
|
||||
// let strongTypes=[...pokemon[2].damage_relations.double_damage_to.map((type)=>{
|
||||
// return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
|
||||
// })]
|
||||
|
||||
// var strongTypesString='';
|
||||
// for(let i in strongTypes){
|
||||
// strongTypesString=strongTypesString+strongTypes[i];
|
||||
// }
|
||||
|
||||
// let tab2 = document.getElementById("tab_2");
|
||||
// tab2.innerHTML = `
|
||||
// <div class="stats">
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Health:</span>
|
||||
// <span>${hp}</span>
|
||||
// </div>
|
||||
// <meter id="hp"
|
||||
// style="content: 'HP';"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${hp}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Attack:</span>
|
||||
// <span>${attack}</span>
|
||||
// </div>
|
||||
// <meter id="attack"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${attack}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Defense:</span>
|
||||
// <span>${defense}</span>
|
||||
// </div>
|
||||
// <meter id="defense"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${defense}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Sp. Atk:</span>
|
||||
// <span>${spAttack}</span>
|
||||
// </div>
|
||||
// <meter id="spattack"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${spAttack}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Sp. Def:</span>
|
||||
// <span>${spDefense}</span>
|
||||
// </div>
|
||||
// <meter id="spdefense"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${spDefense}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span>Speed:</span>
|
||||
// <span>${speed}</span>
|
||||
// </div>
|
||||
// <meter id="speed"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${speed}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Total:</span>
|
||||
// <span>${speed + hp + attack + defense + spAttack + spDefense}</span>
|
||||
// </div>
|
||||
// <meter id="total"
|
||||
// min="0" max="1530"
|
||||
// low="500" high="720" optimum="1000"
|
||||
// value="${speed + hp + attack + defense + spAttack + spDefense}">
|
||||
// </meter>
|
||||
// </div>
|
||||
// <div class="statTypes">
|
||||
// <div class="statTypeText">
|
||||
// <div>
|
||||
// Weak Against
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
|
||||
// <div class="statIconHolder">
|
||||
// ${weakTypesString==""?'None':weakTypesString}
|
||||
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="statTypes">
|
||||
// <div class="statTypeText">
|
||||
// <span>
|
||||
// Strong Against
|
||||
// </span>
|
||||
// </div>
|
||||
|
||||
// <div class="statIconHolder">
|
||||
// ${strongTypesString==""?'None':strongTypesString}
|
||||
// </div>
|
||||
// </div>
|
||||
// `;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
else{
|
||||
console.log(pokemon[2])
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
let pokemonDetailsEl = document.getElementById("pokemon-details");
|
||||
pokemonDetailsEl.innerHTML = `
|
||||
<div class="btn">
|
||||
<button class="previousBtn" onclick="backButton()"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="nextBtn" onclick="nextPokemon()"><i class="fas fa-chevron-right"></i></button>
|
||||
</div>
|
||||
<div class="names">
|
||||
<div class="japaneseName">${japaneseName}</div>
|
||||
<div class="name">${name}</div>
|
||||
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="image">
|
||||
<img class="imgFront" src="${
|
||||
imageSrc == null ? imageSrc2 : imageSrc
|
||||
}" alt="${name}">
|
||||
<img class="imgBack" src="./Icons/default/pokeball.svg" alt="pokeball">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
`;
|
||||
|
||||
const desiredLanguage = "en";
|
||||
let overview = "Sorry, no description available.";
|
||||
let genus = "Sorry, no description available.";
|
||||
|
||||
for (const entry of pokemon[1].flavor_text_entries) {
|
||||
if (entry.language.name === desiredLanguage) {
|
||||
// Replace "\f" with a space in the flavor text
|
||||
overview = entry.flavor_text.replace("\f", " ");
|
||||
break; // Stop the loop once we find the English flavor text
|
||||
}
|
||||
}
|
||||
for (const entry of pokemon[1].genera) {
|
||||
if (entry.language.name === desiredLanguage) {
|
||||
genus = entry.genus;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const height = pokemon[0].height / 10 + "m";
|
||||
const weight = pokemon[0].weight / 10 + "kg";
|
||||
|
||||
const genderRate = pokemon[1].gender_rate;
|
||||
let male = "";
|
||||
let female = "";
|
||||
if (genderRate === -1) {
|
||||
male = "??";
|
||||
female = "??";
|
||||
} else if (genderRate === 0) {
|
||||
male = "100%";
|
||||
female = "0%";
|
||||
} else if (genderRate === 8) {
|
||||
male = "0%";
|
||||
female = "100%";
|
||||
} else {
|
||||
female = (genderRate / 8) * 100 + "%";
|
||||
male = 100 - (genderRate / 8) * 100 + "%";
|
||||
}
|
||||
const friendship = pokemon[1].base_happiness;
|
||||
const catchRate = pokemon[1].capture_rate;
|
||||
|
||||
let tab1 = document.getElementById("tab_1");
|
||||
tab1.innerHTML = `
|
||||
<div>
|
||||
<div class="overview">
|
||||
<p><span class="genus">${genus}</span><br>${overview}</p>
|
||||
<div class="heightWeight">
|
||||
<span>Height:<br><b>${height}</b></span>
|
||||
<span>Weight:<br><b>${weight}</b></span>
|
||||
</div>
|
||||
|
||||
<div class="types">
|
||||
${poke_types
|
||||
.map(
|
||||
(type) => `
|
||||
<div class="poke__type__bg ${type}">
|
||||
<img src="Icons/${type}.svg" alt="Type">
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about">
|
||||
<div>Id: <b class="id">#${id}</b></div>
|
||||
<div>Gender: <b><i class="fa-solid fa-mars" style="color: #1f71ff;"></i>${male} <i class="fa-solid fa-venus" style="color: #ff5c74;"></i>${female}</b></div>
|
||||
<span>Abilities: <b>${abilities.join(", ")}</b></span>
|
||||
<span>Catch Rate: <b>${catchRate} (${((catchRate / 255) * 100).toFixed(
|
||||
2
|
||||
)}% chance)</b></span>
|
||||
<span>Base Friendship: <b>${friendship} (${
|
||||
friendship < 50 ? "lower" : friendship < 100 ? "normal" : "higher"
|
||||
})</b></span>
|
||||
<span>Base Exp: <b>${pokemon[0].base_experience}</b></span>
|
||||
<span>Growth Rate: <b>${pokemon[1].growth_rate.name}</b></span>
|
||||
<span>Egg Groups: <b>${eggGroups.join(", ")}</b></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
`;
|
||||
};
|
||||
|
||||
const tabs = document.querySelectorAll("[data-tab-value]");
|
||||
const tabsContainer = document.querySelector(".tabs");
|
||||
const tabInfos = document.querySelectorAll("[data-tab-info]");
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
const target = document.querySelector(tab.dataset.tabValue);
|
||||
|
||||
tabInfos.forEach((tabInfo) => {
|
||||
tabInfo.classList.remove("active");
|
||||
});
|
||||
target.classList.add("active");
|
||||
target.scrollIntoView({ behavior: "smooth" });
|
||||
});
|
||||
});
|
||||
const nextPokemon = (e) => {
|
||||
window.location.href = `details.html?id=${id + 1}`;
|
||||
e.preventDefault();
|
||||
};
|
||||
const backButton = (e) => {
|
||||
window.history.back();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
fetchPokemonDetails();
|
||||
|
||||
//preloader
|
||||
window.addEventListener("load", function () {
|
||||
document.querySelector("body").classList.add("loaded");
|
||||
});
|
||||
|
||||
644
pokedex/style.css
Normal file
644
pokedex/style.css
Normal file
@@ -0,0 +1,644 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Lato:300,400&display=swap");
|
||||
|
||||
@font-face {
|
||||
font-family: pocketMonk;
|
||||
src: url(./Fonts/PocketMonk.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: slumbersWeight;
|
||||
src: url(./Fonts/SlumbersWeight.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: moltors;
|
||||
src: url(./Fonts/Moltors.ttf);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--grass: #5fbd58;
|
||||
--bug: #92bc2c;
|
||||
--dark: #595761;
|
||||
--dragon: #0c69c8;
|
||||
--electric: #f2d94e;
|
||||
--fairy: #ee90e6;
|
||||
--fighting: #d3425f;
|
||||
--fire: #dc872f;
|
||||
--flying: #a1bbec;
|
||||
--ghost: #5f6dbc;
|
||||
--ground: #da7c4d;
|
||||
--ice: #75d0c1;
|
||||
--normal: #a0a29f;
|
||||
--poison: #b763cf;
|
||||
--psychic: #ff2ca8;
|
||||
--rock: #a38c21;
|
||||
--steel: #5695a3;
|
||||
--water: #539ddf;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #efefbb;
|
||||
/* background: linear-gradient(to right, #ffffff, #827eff); */
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
h1 {
|
||||
letter-spacing: 3px;
|
||||
font-weight: 800;
|
||||
font-size: 2.5em;
|
||||
|
||||
padding: 20px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.poke-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.cardContainer {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transform-style: preserve-3d;
|
||||
transition: 0.25s ease-in;
|
||||
max-width: 210px;
|
||||
min-width: 210px;
|
||||
min-height: 330px;
|
||||
max-height: 330px;
|
||||
color: #202020;
|
||||
perspective: 150rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.card {
|
||||
min-width: 45vw !important;
|
||||
max-width: 45vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cardContainer:hover .card {
|
||||
transform: rotateY(180deg);
|
||||
cursor: pointer;
|
||||
transition: 0.25s ease-in-out;
|
||||
transition-delay: .2s;
|
||||
}
|
||||
|
||||
/* Handle card flip behavior on touch-screen */
|
||||
@media(hover: none) {
|
||||
.cardContainer:hover .card {
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.back {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.types {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.front,
|
||||
.back {
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.back {
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
.back .background {
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: -10;
|
||||
opacity: 0.4;
|
||||
animation: rotate 5s linear infinite;
|
||||
}
|
||||
.side {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between !important;
|
||||
align-items: center;
|
||||
}
|
||||
.image-container {
|
||||
position: relative;
|
||||
}
|
||||
.image {
|
||||
width: 150px;
|
||||
top: 10px;
|
||||
position: relative;
|
||||
aspect-ratio: 1/1;
|
||||
z-index: 10;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
.background {
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
opacity: 0.4;
|
||||
animation: rotate 5s linear infinite;
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.number {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
padding: 10px 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 1em;
|
||||
font-family: moltors, sans-serif;
|
||||
}
|
||||
.name {
|
||||
padding: 10px;
|
||||
letter-spacing: 5px;
|
||||
font-family: "pocketMonk", sans-serif;
|
||||
font-size: 1.5em;
|
||||
white-space: nowrap;
|
||||
text-overflow: clip;
|
||||
}
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
font-family: "slumbersWeight", sans-serif;
|
||||
font-size: 1.5em;
|
||||
font-style: italic;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.select-wrapper .regions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
}
|
||||
|
||||
.nav.github,
|
||||
a:hover {
|
||||
color: #310d15;
|
||||
transform: scale(1.2);
|
||||
transition: color 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 5em;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
z-index: 100;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.header .logo img {
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
transition: transform 0.6s;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.nav .github,
|
||||
a {
|
||||
color: #202020;
|
||||
font-size: 1.5em;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#scrollToTopBtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 20px;
|
||||
z-index: 99999;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #202020;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#scrollToDownBtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 20px;
|
||||
z-index: 99999;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #202020;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#searchbar{
|
||||
border-radius: 15px;
|
||||
color: black;
|
||||
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
|
||||
border: 2px solid rgb(32, 32, 32);
|
||||
}
|
||||
::placeholder{
|
||||
font-weight: 400;
|
||||
color: #121212;
|
||||
}
|
||||
#searchbar:hover{
|
||||
color: rgb(28, 28, 18);
|
||||
|
||||
background-color:#f1eeee;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#searchbar:focus::placeholder {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.box input {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1.7em;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
font-weight: 300;
|
||||
letter-spacing: 5px;
|
||||
font-family: "slumbersWeight", sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box input:focus {
|
||||
border: 2px solid #202020;
|
||||
}
|
||||
|
||||
.poke__type__bg > img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: all 0.3s ease; /* Add a smooth transition effect */
|
||||
}
|
||||
|
||||
.poke__type__bg:hover > img {
|
||||
transform: scale(1.2); /* Enlarge the type on hover */
|
||||
}
|
||||
|
||||
.poke__type__bg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
margin: 0px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.grass {
|
||||
background: var(--grass);
|
||||
box-shadow: 0 0 20px var(--grass);
|
||||
}
|
||||
|
||||
.bug {
|
||||
background: var(--bug);
|
||||
box-shadow: 0 0 20px var(--bug);
|
||||
}
|
||||
|
||||
.dark {
|
||||
background: var(--dark);
|
||||
box-shadow: 0 0 20px var(--dark);
|
||||
}
|
||||
|
||||
.dragon {
|
||||
background: var(--dragon);
|
||||
box-shadow: 0 0 20px var(--dragon);
|
||||
}
|
||||
|
||||
.electric {
|
||||
background: var(--electric);
|
||||
box-shadow: 0 0 20px #796d26;
|
||||
}
|
||||
|
||||
.fairy {
|
||||
background: var(--fairy);
|
||||
box-shadow: 0 0 20px var(--fairy);
|
||||
}
|
||||
|
||||
.fighting {
|
||||
background: var(--fighting);
|
||||
box-shadow: 0 0 20px var(--fighting);
|
||||
}
|
||||
|
||||
.flying {
|
||||
background: var(--flying);
|
||||
box-shadow: 0 0 20px var(--flying);
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background: var(--ghost);
|
||||
box-shadow: 0 0 20px var(--ghost);
|
||||
}
|
||||
|
||||
.ground {
|
||||
background: var(--ground);
|
||||
box-shadow: 0 0 20px var(--ground);
|
||||
}
|
||||
|
||||
.ice {
|
||||
background: var(--ice);
|
||||
box-shadow: 0 0 20px var(--ice);
|
||||
}
|
||||
|
||||
.normal {
|
||||
background: var(--normal);
|
||||
box-shadow: 0 0 20px var(--normal);
|
||||
}
|
||||
|
||||
.poison {
|
||||
background: var(--poison);
|
||||
box-shadow: 0 0 20px var(--poison);
|
||||
}
|
||||
|
||||
.psychic {
|
||||
background: var(--psychic);
|
||||
box-shadow: 0 0 20px var(--psychic);
|
||||
}
|
||||
|
||||
.rock {
|
||||
background: var(--rock);
|
||||
box-shadow: 0 0 20px var(--rock);
|
||||
}
|
||||
|
||||
.steel {
|
||||
background: var(--steel);
|
||||
box-shadow: 0 0 20px var(--steel);
|
||||
}
|
||||
|
||||
.water {
|
||||
background: var(--water);
|
||||
box-shadow: 0 0 20px var(--water);
|
||||
}
|
||||
|
||||
.fire {
|
||||
background: var(--fire);
|
||||
box-shadow: 0 0 20px var(--fire);
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
overflow: hidden;
|
||||
max-width: 95%;
|
||||
width: max-content;
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
font-family: "slumbersWeight", sans-serif;
|
||||
font-size: 1.5em;
|
||||
font-style: italic;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#regionSelect{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
gap: 10px;
|
||||
overflow-x: scroll;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#regionSelect::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
#regionSelect::-moz-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#regionSelect span {
|
||||
background-color: rgba(46, 46, 46, 0.1);
|
||||
|
||||
padding: 5px 15px;
|
||||
border-radius: 10px;
|
||||
|
||||
border: 2px solid #202020;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
|
||||
}
|
||||
|
||||
#regionSelect span:hover{
|
||||
background-color: #bbbbbb;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgba(46, 46, 46, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #202020;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: black !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.lds-ring {
|
||||
margin-top: 30vh;
|
||||
display: none;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.lds-ring div {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 8px;
|
||||
border: 8px solid #fff;
|
||||
border-radius: 50%;
|
||||
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
border-color: cornflowerblue transparent transparent transparent;
|
||||
}
|
||||
.lds-ring div:nth-child(1) {
|
||||
animation-delay: -0.45s;
|
||||
}
|
||||
.lds-ring div:nth-child(2) {
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
.lds-ring div:nth-child(3) {
|
||||
animation-delay: -0.15s;
|
||||
}
|
||||
@keyframes lds-ring {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.ring-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.features{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#dark:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.darkmode-container{
|
||||
margin-right: 2.5em;
|
||||
}
|
||||
|
||||
.darkmode-content{
|
||||
position: relative;
|
||||
left: 15%;
|
||||
z-index: 999;
|
||||
font-size: 1.5em;
|
||||
font-family: pocketMonk;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.darkmode-text{
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.github {
|
||||
min-height: 2rem;
|
||||
min-width: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
.dark-mode .header {
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
}
|
||||
.dark-mode .darkmode-button-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark-mode .github-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark-mode .box input {
|
||||
background-color: #787878;
|
||||
color: #ab0101;
|
||||
}
|
||||
|
||||
.dark-mode #regionSelect span {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
relative
|
||||
.dark-mode #regionSelect span:hover{
|
||||
color: black;
|
||||
background-color: #ead51d;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
/* Media query for smaller screens */
|
||||
@media (max-width: 924px) {
|
||||
.header {
|
||||
height: 6em;
|
||||
padding-top: 35px;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 10px;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.darkmode-content {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
687
pokedex/style2.css
Normal file
687
pokedex/style2.css
Normal file
@@ -0,0 +1,687 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
|
||||
|
||||
@font-face {
|
||||
font-family: pocketMonk;
|
||||
src: url(./Fonts/PocketMonk.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: slumbersWeight;
|
||||
src: url(./Fonts/SlumbersWeight.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: moltors;
|
||||
src: url(./Fonts/Moltors.ttf);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--grass: #5FBD58;
|
||||
--bug: #92BC2C;
|
||||
--dark: #595761;
|
||||
--dragon: #0C69C8;
|
||||
--electric: #F2D94E;
|
||||
--fairy: #EE90E6;
|
||||
--fighting: #D3425F;
|
||||
--fire: #dc872f;
|
||||
--flying: #A1BBEC;
|
||||
--ghost: #5F6DBC;
|
||||
--ground: #DA7C4D;
|
||||
--ice: #75D0C1;
|
||||
--normal: #A0A29F;
|
||||
--poison: #B763CF;
|
||||
--psychic: #ff2ca8;
|
||||
--rock: #a38c21;
|
||||
--steel: #5695A3;
|
||||
--water: #539DDF;
|
||||
}
|
||||
.grass {
|
||||
background: var(--grass);
|
||||
box-shadow: 0 0 20px var(--grass);
|
||||
}
|
||||
|
||||
.bug {
|
||||
background: var(--bug);
|
||||
box-shadow: 0 0 20px var(--bug);
|
||||
}
|
||||
|
||||
.dark {
|
||||
background: var(--dark);
|
||||
box-shadow: 0 0 20px var(--dark);
|
||||
}
|
||||
|
||||
.dragon {
|
||||
background: var(--dragon);
|
||||
box-shadow: 0 0 20px var(--dragon);
|
||||
}
|
||||
|
||||
.electric {
|
||||
background: var(--electric);
|
||||
box-shadow: 0 0 20px #796d26;
|
||||
}
|
||||
|
||||
.fairy {
|
||||
background: var(--fairy);
|
||||
box-shadow: 0 0 20px var(--fairy);
|
||||
}
|
||||
|
||||
.fighting {
|
||||
background: var(--fighting);
|
||||
box-shadow: 0 0 20px var(--fighting);
|
||||
}
|
||||
|
||||
.flying {
|
||||
background: var(--flying);
|
||||
box-shadow: 0 0 20px var(--flying);
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background: var(--ghost);
|
||||
box-shadow: 0 0 20px var(--ghost);
|
||||
}
|
||||
|
||||
.ground {
|
||||
background: var(--ground);
|
||||
box-shadow: 0 0 20px var(--ground);
|
||||
}
|
||||
|
||||
.ice {
|
||||
background: var(--ice);
|
||||
box-shadow: 0 0 20px var(--ice);
|
||||
}
|
||||
|
||||
.normal {
|
||||
background: var(--normal);
|
||||
box-shadow: 0 0 20px var(--normal);
|
||||
}
|
||||
|
||||
.poison {
|
||||
background: var(--poison);
|
||||
box-shadow: 0 0 20px var(--poison);
|
||||
}
|
||||
|
||||
.psychic {
|
||||
background: var(--psychic);
|
||||
box-shadow: 0 0 20px var(--psychic);
|
||||
}
|
||||
|
||||
.rock {
|
||||
background: var(--rock);
|
||||
box-shadow: 0 0 20px var(--rock);
|
||||
}
|
||||
|
||||
.steel {
|
||||
background: var(--steel);
|
||||
box-shadow: 0 0 20px var(--steel);
|
||||
}
|
||||
|
||||
.water {
|
||||
background: var(--water);
|
||||
box-shadow: 0 0 20px var(--water);
|
||||
}
|
||||
|
||||
.fire {
|
||||
background: var(--fire);
|
||||
box-shadow: 0 0 20px var(--fire);
|
||||
}
|
||||
/* ::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgba(46, 46, 46, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #202020;
|
||||
border-radius: 10px;
|
||||
} */
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
}
|
||||
.image .imgFront{
|
||||
width: 30vh;
|
||||
height: 30vh;
|
||||
top: 7vh;
|
||||
position: relative;
|
||||
aspect-ratio: 1/1;
|
||||
z-index: 10;
|
||||
}
|
||||
.imgBack{
|
||||
position: absolute;
|
||||
width: 30vh;
|
||||
z-index: -10;
|
||||
top: 3vh;
|
||||
opacity: 0.5;
|
||||
animation: rotate 5s linear infinite;
|
||||
right: 0px;
|
||||
}
|
||||
.names{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 2vh;
|
||||
}
|
||||
.name{
|
||||
font-size: 3em;
|
||||
font-weight: 800;
|
||||
letter-spacing: 5px;
|
||||
font-family: 'pocketMonk', sans-serif;
|
||||
top: 5vh;
|
||||
text-align: center;
|
||||
z-index: 99;
|
||||
}
|
||||
.japaneseName{
|
||||
font-size: 2em;
|
||||
font-weight: 800;
|
||||
letter-spacing: 5px;
|
||||
font-family: 'pocketMonk', sans-serif;
|
||||
top: 5vh;
|
||||
text-align: center;
|
||||
z-index: 99;
|
||||
color: rgba(255, 255, 255, 0.253);
|
||||
}
|
||||
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* .image img:hover{
|
||||
filter: contrast(1);
|
||||
transition: 0.5s;
|
||||
} */
|
||||
|
||||
.top{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* background-color: white;
|
||||
border-bottom-left-radius: 50px;
|
||||
border-bottom-right-radius: 50px; */
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.top .name{
|
||||
font-size: 2.5em;
|
||||
font-weight: 800;
|
||||
letter-spacing: 5px;
|
||||
font-family: 'pocketMonk', sans-serif;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
}
|
||||
.id{
|
||||
background-color: rgba(0, 0, 0, 0.151);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
[data-tab-info] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.active[data-tab-info] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
color: rgb(82, 75, 75);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
font-size: 1em;
|
||||
justify-content:space-evenly;
|
||||
color: black;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
letter-spacing: 5px;
|
||||
display: flex;
|
||||
border-bottom: 2px solid rgba(207, 207, 207, 0.26);
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding-top: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.tabs span {
|
||||
padding: 10px;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.tabs span:hover {
|
||||
transform: scale(1.1);
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.listWrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
font-size: 1.25em;
|
||||
font-style: oblique;
|
||||
|
||||
}
|
||||
|
||||
.listItem{
|
||||
font-size: 1.25em;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.stats{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1em;
|
||||
font-weight: 900;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.stats hr{
|
||||
width: 100%;
|
||||
margin: 5px, 10px;
|
||||
padding: 5px, 10px;
|
||||
border: none;
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.stats .stat{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
.stat div{
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
width: 35%;
|
||||
padding: 7px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stats meter{
|
||||
width: 60%;
|
||||
height: 1.5em;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
position: relative;
|
||||
top: 8px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
meter::-webkit-meter-optimum-value{
|
||||
background-color: #23dd48be;
|
||||
}
|
||||
meter::-webkit-meter-suboptimum-value{
|
||||
background-color: #fdc945e6;
|
||||
}
|
||||
meter::-webkit-meter-even-less-good-value{
|
||||
background-color: #ff4545e2;
|
||||
}
|
||||
.stats meter::-webkit-meter-bar{
|
||||
background-color: rgba(183, 183, 183, 0.3);
|
||||
border: none;
|
||||
}
|
||||
.statTypes{
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 1%;
|
||||
}
|
||||
.statTypes .statTypeText{
|
||||
|
||||
|
||||
width: 35%;
|
||||
margin-bottom: 1%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.statTypes img{
|
||||
height: 35px;
|
||||
border-radius: 15px;
|
||||
margin: 10px;
|
||||
}
|
||||
.statTypes .statIconHolder{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.poke__type__bg img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
overflow: visible;
|
||||
border-radius: 100%;
|
||||
|
||||
}
|
||||
|
||||
.poke__type__bg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
overflow: visible;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.details{
|
||||
background-color: rgb(245, 245, 245);
|
||||
box-shadow: 10px 10px 50px 10px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 40px 40px 0px 0px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.overview p{
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
padding: 25px 20px;
|
||||
text-align: justify;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
.genus{
|
||||
font-size: 1em;
|
||||
font-weight: lighter;
|
||||
font-family: 'moltors', sans-serif;
|
||||
}
|
||||
.types{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.heightWeight{
|
||||
display: flex;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background-color: rgba(255, 255, 255, 0.329);
|
||||
box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.2);
|
||||
border-radius: 20px;
|
||||
padding: 10px 50px;
|
||||
font-size: 1.25em;
|
||||
width: max-content;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
.about{
|
||||
font-size: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 20px;
|
||||
text-transform: capitalize;
|
||||
padding: 25px 20px;
|
||||
text-align: justify;
|
||||
letter-spacing: 2px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
.previousBtn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 99999;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #202020;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.nextBtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #202020;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.btn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.evolution {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
align-items: center !important;
|
||||
overflow: scroll;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
padding: 30px;
|
||||
font-size: 0.5em;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
text-transform: capitalize;
|
||||
border-bottom: 2px solid rgba(207, 207, 207, 0.26);
|
||||
}
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.evolution__pokemon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.evolution__pokemon img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
filter: contrast(1.5) brightness(0.8) saturate(1.2) drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.37));
|
||||
}
|
||||
.evolution__pokemon h1{
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-family: 'moltors', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.varieties__pokemon img{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
filter: contrast(1.5) brightness(0.8) saturate(1.2) drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.37));
|
||||
}
|
||||
.varieties__pokemon h1{
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-family: 'moltors', sans-serif;
|
||||
}
|
||||
.varieties{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 2fr);
|
||||
align-items: center !important;
|
||||
overflow: scroll;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
padding: 30px;
|
||||
font-size: 0.5em;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
text-transform: capitalize;
|
||||
|
||||
}
|
||||
|
||||
/* preloader css*/
|
||||
/* General Styling */
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 567px) {
|
||||
h1 {
|
||||
font-size: 7vw;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Loader Styles start here */
|
||||
.loader-wrapper {
|
||||
--line-width: 5px;
|
||||
--curtain-color: #f1faee;
|
||||
--outer-line-color: #a8dadc;
|
||||
--middle-line-color: #457b9d;
|
||||
--inner-line-color: #1d3557;
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:1000;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display:block;
|
||||
position: relative;
|
||||
top:50%;
|
||||
left:50%;
|
||||
/* transform: translate(-50%, -50%); */
|
||||
width:150px;
|
||||
height:150px;
|
||||
margin:-75px 0 0 -75px;
|
||||
border:var(--line-width) solid transparent;
|
||||
border-top-color: var(--outer-line-color);
|
||||
border-radius:100%;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
z-index:1001;
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
top:4px;
|
||||
left:4px;
|
||||
right:4px;
|
||||
bottom:4px;
|
||||
border:var(--line-width) solid transparent;
|
||||
border-top-color: var(--inner-line-color);
|
||||
border-radius:100%;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
content:"";
|
||||
position: absolute;
|
||||
top:14px;
|
||||
left:14px;
|
||||
right:14px;
|
||||
bottom:14px;
|
||||
border:var(--line-width) solid transparent;
|
||||
border-top-color: var(--middle-line-color);
|
||||
border-radius:100%;
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loader-wrapper .loader-section {
|
||||
position:fixed;
|
||||
top:0;
|
||||
background:var(--curtain-color);
|
||||
width:51%;
|
||||
height:100%;
|
||||
z-index:1000;
|
||||
}
|
||||
|
||||
.loader-wrapper .loader-section.section-left {
|
||||
left:0
|
||||
}
|
||||
.loader-wrapper .loader-section.section-right {
|
||||
right:0;
|
||||
}
|
||||
|
||||
/* Loaded Styles */
|
||||
.loaded .loader-wrapper .loader-section.section-left {
|
||||
transform: translateX(-100%);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
|
||||
}
|
||||
.loaded .loader-wrapper .loader-section.section-right {
|
||||
transform: translateX(100%);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
|
||||
}
|
||||
.loaded .loader {
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.loaded .loader-wrapper {
|
||||
visibility: hidden;
|
||||
transform:translateY(-100%);
|
||||
transition: all .3s 1s ease-out;
|
||||
}
|
||||
.statIconHolder{
|
||||
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user