mirror of
https://github.com/Alvin-Zilverstand/pokedex.git
synced 2026-03-06 11:07:31 +01:00
Add SVG assets for various icons and update settings for live server
This commit is contained in:
vista-man
3
v2/.vscode/settings.json
vendored
Normal file
3
v2/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"liveServer.settings.port": 5501
|
||||||
|
}
|
||||||
18
v2/assets/back-to-home.svg
Normal file
18
v2/assets/back-to-home.svg
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g filter="url(#filter0_d_1496_200)">
|
||||||
|
<path d="M13.8999 23.9666L4.63325 14.6999C4.52214 14.5888 4.44436 14.4777 4.39992 14.3666C4.35547 14.2555 4.33325 14.1333 4.33325 13.9999C4.33325 13.8666 4.35547 13.7444 4.39992 13.6333C4.44436 13.5222 4.52214 13.4111 4.63325 13.2999L13.9333 3.99994C14.111 3.82216 14.3333 3.73328 14.5999 3.73328C14.8666 3.73328 15.0999 3.83328 15.2999 4.03328C15.4999 4.23328 15.5999 4.46661 15.5999 4.73328C15.5999 4.99994 15.4999 5.23328 15.2999 5.43328L7.73325 12.9999H24.2666C24.5555 12.9999 24.7944 13.0944 24.9833 13.2833C25.1721 13.4722 25.2666 13.7111 25.2666 13.9999C25.2666 14.2888 25.1721 14.5277 24.9833 14.7166C24.7944 14.9055 24.5555 14.9999 24.2666 14.9999H7.73325L15.3333 22.5999C15.511 22.7777 15.5999 22.9999 15.5999 23.2666C15.5999 23.5333 15.4999 23.7666 15.2999 23.9666C15.0999 24.1666 14.8666 24.2666 14.5999 24.2666C14.3333 24.2666 14.0999 24.1666 13.8999 23.9666Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_1496_200" x="0.333252" y="0.733276" width="28.9333" height="28.5333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_1496_200"/>
|
||||||
|
<feOffset dy="1"/>
|
||||||
|
<feGaussianBlur stdDeviation="1.5"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1496_200"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1496_200" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
3
v2/assets/chevron_left.svg
Normal file
3
v2/assets/chevron_left.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M26.9501 34.9L17.0501 25C16.8834 24.8333 16.7668 24.6667 16.7001 24.5C16.6334 24.3333 16.6001 24.15 16.6001 23.95C16.6001 23.75 16.6334 23.5667 16.7001 23.4C16.7668 23.2333 16.8834 23.0667 17.0501 22.9L27.0001 12.95C27.3001 12.65 27.6584 12.5 28.0751 12.5C28.4918 12.5 28.8501 12.65 29.1501 12.95C29.4501 13.25 29.5918 13.6167 29.5751 14.05C29.5584 14.4833 29.4001 14.85 29.1001 15.15L20.3001 23.95L29.1501 32.8C29.4501 33.1 29.6001 33.45 29.6001 33.85C29.6001 34.25 29.4501 34.6 29.1501 34.9C28.8501 35.2 28.4834 35.35 28.0501 35.35C27.6168 35.35 27.2501 35.2 26.9501 34.9Z" fill="#1D1D1D"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 705 B |
3
v2/assets/chevron_right.svg
Normal file
3
v2/assets/chevron_right.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.6999 34.9C17.4332 34.5667 17.2916 34.2 17.2749 33.8C17.2582 33.4 17.3999 33.05 17.6999 32.75L26.4999 23.95L17.6499 15.1C17.3832 14.8333 17.2582 14.475 17.2749 14.025C17.2916 13.575 17.4332 13.2167 17.6999 12.95C18.0332 12.6167 18.3916 12.4583 18.7749 12.475C19.1582 12.4917 19.4999 12.65 19.7999 12.95L29.7499 22.9C29.9166 23.0667 30.0332 23.2333 30.0999 23.4C30.1666 23.5667 30.1999 23.75 30.1999 23.95C30.1999 24.15 30.1666 24.3333 30.0999 24.5C30.0332 24.6667 29.9166 24.8333 29.7499 25L19.8499 34.9C19.5499 35.2 19.1999 35.3417 18.7999 35.325C18.3999 35.3083 18.0332 35.1667 17.6999 34.9Z" fill="#1D1D1D"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 727 B |
3
v2/assets/cross.svg
Normal file
3
v2/assets/cross.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.9999 5.70002L1.4999 9.20002C1.3999 9.30002 1.28324 9.35002 1.1499 9.35002C1.01657 9.35002 0.899902 9.30002 0.799902 9.20002C0.699902 9.10002 0.649902 8.98336 0.649902 8.85002C0.649902 8.71669 0.699902 8.60002 0.799902 8.50002L4.2999 5.00002L0.799902 1.50002C0.699902 1.40002 0.649902 1.28336 0.649902 1.15002C0.649902 1.01669 0.699902 0.900024 0.799902 0.800024C0.899902 0.700024 1.01657 0.650024 1.1499 0.650024C1.28324 0.650024 1.3999 0.700024 1.4999 0.800024L4.9999 4.30002L8.4999 0.800024C8.5999 0.700024 8.71657 0.650024 8.8499 0.650024C8.98324 0.650024 9.0999 0.700024 9.1999 0.800024C9.2999 0.900024 9.3499 1.01669 9.3499 1.15002C9.3499 1.28336 9.2999 1.40002 9.1999 1.50002L5.6999 5.00002L9.1999 8.50002C9.2999 8.60002 9.3499 8.71669 9.3499 8.85002C9.3499 8.98336 9.2999 9.10002 9.1999 9.20002C9.0999 9.30002 8.98324 9.35002 8.8499 9.35002C8.71657 9.35002 8.5999 9.30002 8.4999 9.20002L4.9999 5.70002Z" fill="#DC0A2D"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
3
v2/assets/height.svg
Normal file
3
v2/assets/height.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="straighten">
|
||||||
|
<path d="M7 36C6.2 36 5.5 35.7 4.9 35.1C4.3 34.5 4 33.8 4 33V15C4 14.2333 4.3 13.5417 4.9 12.925C5.5 12.3083 6.2 12 7 12H41C41.8 12 42.5 12.3083 43.1 12.925C43.7 13.5417 44 14.2333 44 15V33C44 33.8 43.7 34.5 43.1 35.1C42.5 35.7 41.8 36 41 36H7ZM7 33H41V15H34.5V24H31.5V15H25.5V24H22.5V15H16.5V24H13.5V15H7V33ZM13.5 24H16.5H13.5ZM22.5 24H25.5H22.5ZM31.5 24H34.5H31.5Z" fill="#1D1D1D"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 514 B |
18
v2/assets/pokeball.svg
Normal file
18
v2/assets/pokeball.svg
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 48 48"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M29.7144 24C29.7144 27.1559 27.156 29.7143 24.0001 29.7143C20.8442 29.7143 18.2858 27.1559 18.2858 24C18.2858 20.8441 20.8442 18.2857 24.0001 18.2857C27.156 18.2857 29.7144 20.8441 29.7144 24Z"
|
||||||
|
fill="#ffffff"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M24.0001 48C36.0909 48 46.0934 39.0593 47.7571 27.4286H33.7006C32.2885 31.4235 28.4786 34.2857 24.0001 34.2857C19.5217 34.2857 15.7117 31.4235 14.2997 27.4286H0.243164C1.90681 39.0593 11.9094 48 24.0001 48ZM14.2997 20.5714H0.243164C1.90681 8.94071 11.9094 0 24.0001 0C36.0909 0 46.0934 8.94071 47.7571 20.5714H33.7006C32.2885 16.5765 28.4786 13.7143 24.0001 13.7143C19.5217 13.7143 15.7117 16.5765 14.2997 20.5714ZM29.7144 24C29.7144 27.1559 27.156 29.7143 24.0001 29.7143C20.8442 29.7143 18.2858 27.1559 18.2858 24C18.2858 20.8441 20.8442 18.2857 24.0001 18.2857C27.156 18.2857 29.7144 20.8441 29.7144 24Z"
|
||||||
|
fill="#ffffff"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
4
v2/assets/pokedex.svg
Normal file
4
v2/assets/pokedex.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="206" height="208" viewBox="0 0 206 208" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M127.762 104C127.762 117.676 116.676 128.762 103 128.762C89.3244 128.762 78.2381 117.676 78.2381 104C78.2381 90.3244 89.3244 79.2381 103 79.2381C116.676 79.2381 127.762 90.3244 127.762 104Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M103 208C155.393 208 198.738 169.257 205.947 118.857H145.035C138.917 136.169 122.407 148.571 103 148.571C83.5933 148.571 67.0835 136.169 60.9648 118.857H0.0532227C7.26235 169.257 50.6067 208 103 208ZM60.9648 89.1429H0.0532227C7.26235 38.7431 50.6067 0 103 0C155.393 0 198.738 38.7431 205.947 89.1429H145.035C138.917 71.8314 122.407 59.4286 103 59.4286C83.5933 59.4286 67.0835 71.8314 60.9648 89.1429ZM127.762 104C127.762 117.676 116.676 128.762 103 128.762C89.3244 128.762 78.2381 117.676 78.2381 104C78.2381 90.3244 89.3244 79.2381 103 79.2381C116.676 79.2381 127.762 90.3244 127.762 104Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 977 B |
3
v2/assets/search.svg
Normal file
3
v2/assets/search.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10.9 12.6167L6.88333 8.6C6.55 8.88889 6.16111 9.11389 5.71667 9.275C5.27222 9.43612 4.8 9.51667 4.3 9.51667C3.1 9.51667 2.08333 9.1 1.25 8.26667C0.416667 7.43334 0 6.42778 0 5.25C0 4.07223 0.416667 3.06667 1.25 2.23334C2.08333 1.4 3.09444 0.983337 4.28333 0.983337C5.46111 0.983337 6.46389 1.4 7.29167 2.23334C8.11944 3.06667 8.53333 4.07223 8.53333 5.25C8.53333 5.72778 8.45555 6.18889 8.3 6.63334C8.14444 7.07778 7.91111 7.49445 7.6 7.88334L11.65 11.9C11.75 11.9889 11.8 12.1028 11.8 12.2417C11.8 12.3806 11.7444 12.5056 11.6333 12.6167C11.5333 12.7167 11.4111 12.7667 11.2667 12.7667C11.1222 12.7667 11 12.7167 10.9 12.6167ZM4.28333 8.51667C5.18333 8.51667 5.95 8.19723 6.58333 7.55834C7.21667 6.91945 7.53333 6.15 7.53333 5.25C7.53333 4.35 7.21667 3.58056 6.58333 2.94167C5.95 2.30278 5.18333 1.98334 4.28333 1.98334C3.37222 1.98334 2.59722 2.30278 1.95833 2.94167C1.31944 3.58056 1 4.35 1 5.25C1 6.15 1.31944 6.91945 1.95833 7.55834C2.59722 8.19723 3.37222 8.51667 4.28333 8.51667Z" fill="#DC0A2D"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
3
v2/assets/sorting.svg
Normal file
3
v2/assets/sorting.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0.833252 10.6667C0.688808 10.6667 0.569363 10.6195 0.474919 10.525C0.380474 10.4306 0.333252 10.3111 0.333252 10.1667C0.333252 10.0222 0.380474 9.9028 0.474919 9.80835C0.569363 9.71391 0.688808 9.66669 0.833252 9.66669H9.16659C9.31103 9.66669 9.43047 9.71391 9.52492 9.80835C9.61936 9.9028 9.66659 10.0222 9.66659 10.1667C9.66659 10.3111 9.61936 10.4306 9.52492 10.525C9.43047 10.6195 9.31103 10.6667 9.16659 10.6667H0.833252ZM3.54992 5.26669H6.44992L5.03325 1.56669H4.96659L3.54992 5.26669ZM2.28325 8.00002C2.10547 8.00002 1.98881 7.94169 1.93325 7.82502C1.8777 7.70835 1.8777 7.56669 1.93325 7.40002L4.26659 1.18335C4.32214 1.03891 4.41936 0.916687 4.55825 0.816687C4.69714 0.716687 4.84436 0.666687 4.99992 0.666687C5.15547 0.666687 5.3027 0.716687 5.44159 0.816687C5.58047 0.916687 5.6777 1.03891 5.73325 1.18335L8.06659 7.40002C8.12214 7.56669 8.12214 7.70835 8.06659 7.82502C8.01103 7.94169 7.89436 8.00002 7.71659 8.00002C7.6277 8.00002 7.54714 7.97502 7.47492 7.92502C7.4027 7.87502 7.35547 7.81669 7.33325 7.75002L6.68325 6.01669H3.29992L2.64992 7.75002C2.6277 7.81669 2.58047 7.87502 2.50825 7.92502C2.43603 7.97502 2.36103 8.00002 2.28325 8.00002Z" fill="#DC0A2D"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
3
v2/assets/weight.svg
Normal file
3
v2/assets/weight.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10.85 39H37.15L34 17H14L10.85 39ZM24 14C24.8667 14 25.5833 13.7083 26.15 13.125C26.7167 12.5417 27 11.8333 27 11C27 10.1333 26.7167 9.41667 26.15 8.85C25.5833 8.28333 24.8667 8 24 8C23.1667 8 22.4583 8.28333 21.875 8.85C21.2917 9.41667 21 10.1333 21 11C21 11.8333 21.2917 12.5417 21.875 13.125C22.4583 13.7083 23.1667 14 24 14ZM29.2 14H34C34.7667 14 35.4333 14.2417 36 14.725C36.5667 15.2083 36.9 15.8333 37 16.6L40.1 38.6C40.2333 39.5 40.0083 40.2917 39.425 40.975C38.8417 41.6583 38.0833 42 37.15 42H10.85C9.91667 42 9.15834 41.6583 8.575 40.975C7.99167 40.2917 7.76667 39.5 7.9 38.6L11 16.6C11.1 15.8333 11.4333 15.2083 12 14.725C12.5667 14.2417 13.2333 14 14 14H18.8C18.5333 13.5333 18.3333 13.0583 18.2 12.575C18.0667 12.0917 18 11.5667 18 11C18 9.33333 18.5833 7.91667 19.75 6.75C20.9167 5.58333 22.3333 5 24 5C25.6667 5 27.0833 5.58333 28.25 6.75C29.4167 7.91667 30 9.33333 30 11C30 11.5667 29.9333 12.0917 29.8 12.575C29.6667 13.0583 29.4667 13.5333 29.2 14ZM10.85 39H37.15H10.85Z" fill="#1D1D1D"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
97
v2/detail.html
Normal file
97
v2/detail.html
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Pokemon Detail</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<script src="./pokemon-detail.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="detail-main main">
|
||||||
|
<header class="header">
|
||||||
|
<div class="header-wrapper">
|
||||||
|
<div class="header-wrap">
|
||||||
|
<a href="./index.html" class="back-btn-wrap">
|
||||||
|
<img
|
||||||
|
src="./assets/back-to-home.svg"
|
||||||
|
alt="back to home"
|
||||||
|
class="back-btn"
|
||||||
|
id="back-btn"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<div class="name-wrap">
|
||||||
|
<h1 class="name"></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pokemon-id-wrap">
|
||||||
|
<p class="body2-fonts"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="featured-img">
|
||||||
|
<a href="#" class="arrow left-arrow" id="leftArrow">
|
||||||
|
<img src="./assets/chevron_left.svg" alt="back" />
|
||||||
|
</a>
|
||||||
|
<div class="detail-img-wrapper">
|
||||||
|
<img src="" alt="" />
|
||||||
|
</div>
|
||||||
|
<a href="#" class="arrow right-arrow" id="rightArrow">
|
||||||
|
<img src="./assets/chevron_right.svg" alt="forward" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card-detail-wrapper">
|
||||||
|
<div class="power-wrapper">
|
||||||
|
<p class="body3-fonts type grass"></p>
|
||||||
|
<p class="body3-fonts type poison"></p>
|
||||||
|
</div>
|
||||||
|
<p class="body2-fonts about-text">About</p>
|
||||||
|
<div class="pokemon-detail-wrapper">
|
||||||
|
<div class="pokemon-detail-wrap">
|
||||||
|
<div class="pokemon-detail">
|
||||||
|
<img src="./assets/weight.svg" alt="weight" />
|
||||||
|
<p class="body3-fonts weight"></p>
|
||||||
|
</div>
|
||||||
|
<p class="caption-fonts">Weight</p>
|
||||||
|
</div>
|
||||||
|
<div class="pokemon-detail-wrap">
|
||||||
|
<div class="pokemon-detail">
|
||||||
|
<img src="./assets/height.svg" alt="height" class="straighten" />
|
||||||
|
<p class="body3-fonts height"></p>
|
||||||
|
</div>
|
||||||
|
<p class="caption-fonts">Height</p>
|
||||||
|
</div>
|
||||||
|
<div class="pokemon-detail-wrap">
|
||||||
|
<div class="pokemon-detail move"></div>
|
||||||
|
<p class="caption-fonts">Move</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="body3-fonts pokemon-description"></p>
|
||||||
|
<p class="body2-fonts about-text">Base Stats</p>
|
||||||
|
<div class="stats-wrapper">
|
||||||
|
<div class="stats-wrap" data-stat="hp">
|
||||||
|
<p class="body3-fonts stats">HP</p>
|
||||||
|
<p class="body3-fonts"></p>
|
||||||
|
<progress value="" max="100" class="progress-bar"></progress>
|
||||||
|
</div>
|
||||||
|
<div class="stats-wrap" data-stat="ATK">
|
||||||
|
<p class="body3-fonts stats">ATK</p>
|
||||||
|
<p class="body3-fonts"></p>
|
||||||
|
<progress value="" max="100" class="progress-bar"></progress>
|
||||||
|
</div>
|
||||||
|
<div class="stats-wrap" data-stat="DEF">
|
||||||
|
<p class="body3-fonts stats">DEF</p>
|
||||||
|
<p class="body3-fonts"></p>
|
||||||
|
<progress value="" max="100" class="progress-bar"></progress>
|
||||||
|
</div>
|
||||||
|
<div class="stats-wrap" data-stat="SATK">
|
||||||
|
<p class="body3-fonts stats">SATK</p>
|
||||||
|
<p class="body3-fonts"></p>
|
||||||
|
<progress value="" max="100" class="progress-bar"></progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="./assets/pokedex.svg" alt="pokedex" class="detail-bg" />
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
79
v2/index.html
Normal file
79
v2/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" />
|
||||||
|
<title>Document</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<script src="./pokemon.js" defer></script>
|
||||||
|
<script src="./search.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="main">
|
||||||
|
<header class="header home">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo-wrapper">
|
||||||
|
<img src="./assets/pokeball.svg" alt="pokeball" />
|
||||||
|
<h1>Pokedex</h1>
|
||||||
|
</div>
|
||||||
|
<div class="search-wrapper">
|
||||||
|
<div class="search-wrap">
|
||||||
|
<img
|
||||||
|
src="./assets/search.svg"
|
||||||
|
alt="search icon"
|
||||||
|
class="search-icon"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="search-input body3-fonts"
|
||||||
|
placeholder="Search"
|
||||||
|
id="search-input"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="./assets/cross.svg"
|
||||||
|
alt="cross icon"
|
||||||
|
class="search-close-icon"
|
||||||
|
id="search-close-icon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="sort-wrapper">
|
||||||
|
<div class="sort-wrap">
|
||||||
|
<img
|
||||||
|
src="./assets/sorting.svg"
|
||||||
|
alt="sorting"
|
||||||
|
class="sort-icon"
|
||||||
|
id="sort-icon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="filter-wrapper">
|
||||||
|
<p class="body2-fonts">Sort by:</p>
|
||||||
|
<div class="filter-wrap">
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="number"
|
||||||
|
name="filters"
|
||||||
|
value="number"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label for="number" class="body3-fonts">Number</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="radio" id="name" name="filters" value="name" />
|
||||||
|
<label for="name" class="body3-fonts">Name</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section class="pokemon-list">
|
||||||
|
<div class="container">
|
||||||
|
<div class="list-wrapper"></div>
|
||||||
|
</div>
|
||||||
|
<div id="not-found-message">Pokemon not found</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
253
v2/pokemon-detail.js
Normal file
253
v2/pokemon-detail.js
Normal file
@@ -0,0 +1,253 @@
|
|||||||
|
let currentPokemonId = null;
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const MAX_POKEMONS = 151;
|
||||||
|
const pokemonID = new URLSearchParams(window.location.search).get("id");
|
||||||
|
const id = parseInt(pokemonID, 10);
|
||||||
|
|
||||||
|
if (id < 1 || id > MAX_POKEMONS) {
|
||||||
|
return (window.location.href = "./index.html");
|
||||||
|
}
|
||||||
|
|
||||||
|
currentPokemonId = id;
|
||||||
|
loadPokemon(id);
|
||||||
|
});
|
||||||
|
|
||||||
|
async function loadPokemon(id) {
|
||||||
|
try {
|
||||||
|
const [pokemon, pokemonSpecies] = await Promise.all([
|
||||||
|
fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) =>
|
||||||
|
res.json()
|
||||||
|
),
|
||||||
|
fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) =>
|
||||||
|
res.json()
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const abilitiesWrapper = document.querySelector(
|
||||||
|
".pokemon-detail-wrap .pokemon-detail.move"
|
||||||
|
);
|
||||||
|
abilitiesWrapper.innerHTML = "";
|
||||||
|
|
||||||
|
if (currentPokemonId === id) {
|
||||||
|
displayPokemonDetails(pokemon);
|
||||||
|
const flavorText = getEnglishFlavorText(pokemonSpecies);
|
||||||
|
document.querySelector(".body3-fonts.pokemon-description").textContent =
|
||||||
|
flavorText;
|
||||||
|
|
||||||
|
const [leftArrow, rightArrow] = ["#leftArrow", "#rightArrow"].map((sel) =>
|
||||||
|
document.querySelector(sel)
|
||||||
|
);
|
||||||
|
leftArrow.removeEventListener("click", navigatePokemon);
|
||||||
|
rightArrow.removeEventListener("click", navigatePokemon);
|
||||||
|
|
||||||
|
if (id !== 1) {
|
||||||
|
leftArrow.addEventListener("click", () => {
|
||||||
|
navigatePokemon(id - 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (id !== 151) {
|
||||||
|
rightArrow.addEventListener("click", () => {
|
||||||
|
navigatePokemon(id + 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.history.pushState({}, "", `./detail.html?id=${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("An error occured while fetching Pokemon data:", error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function navigatePokemon(id) {
|
||||||
|
currentPokemonId = id;
|
||||||
|
await loadPokemon(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
const typeColors = {
|
||||||
|
normal: "#A8A878",
|
||||||
|
fire: "#F08030",
|
||||||
|
water: "#6890F0",
|
||||||
|
electric: "#F8D030",
|
||||||
|
grass: "#78C850",
|
||||||
|
ice: "#98D8D8",
|
||||||
|
fighting: "#C03028",
|
||||||
|
poison: "#A040A0",
|
||||||
|
ground: "#E0C068",
|
||||||
|
flying: "#A890F0",
|
||||||
|
psychic: "#F85888",
|
||||||
|
bug: "#A8B820",
|
||||||
|
rock: "#B8A038",
|
||||||
|
ghost: "#705898",
|
||||||
|
dragon: "#7038F8",
|
||||||
|
dark: "#705848",
|
||||||
|
steel: "#B8B8D0",
|
||||||
|
dark: "#EE99AC",
|
||||||
|
};
|
||||||
|
|
||||||
|
function setElementStyles(elements, cssProperty, value) {
|
||||||
|
elements.forEach((element) => {
|
||||||
|
element.style[cssProperty] = value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function rgbaFromHex(hexColor) {
|
||||||
|
return [
|
||||||
|
parseInt(hexColor.slice(1, 3), 16),
|
||||||
|
parseInt(hexColor.slice(3, 5), 16),
|
||||||
|
parseInt(hexColor.slice(5, 7), 16),
|
||||||
|
].join(", ");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTypeBackgroundColor(pokemon) {
|
||||||
|
const mainType = pokemon.types[0].type.name;
|
||||||
|
const color = typeColors[mainType];
|
||||||
|
|
||||||
|
if (!color) {
|
||||||
|
console.warn(`Color not defined for type: ${mainType}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const detailMainElement = document.querySelector(".detail-main");
|
||||||
|
setElementStyles([detailMainElement], "backgroundColor", color);
|
||||||
|
setElementStyles([detailMainElement], "borderColor", color);
|
||||||
|
|
||||||
|
setElementStyles(
|
||||||
|
document.querySelectorAll(".power-wrapper > p"),
|
||||||
|
"backgroundColor",
|
||||||
|
color
|
||||||
|
);
|
||||||
|
|
||||||
|
setElementStyles(
|
||||||
|
document.querySelectorAll(".stats-wrap p.stats"),
|
||||||
|
"color",
|
||||||
|
color
|
||||||
|
);
|
||||||
|
|
||||||
|
setElementStyles(
|
||||||
|
document.querySelectorAll(".stats-wrap .progress-bar"),
|
||||||
|
"color",
|
||||||
|
color
|
||||||
|
);
|
||||||
|
|
||||||
|
const rgbaColor = rgbaFromHex(color);
|
||||||
|
const styleTag = document.createElement("style");
|
||||||
|
styleTag.innerHTML = `
|
||||||
|
.stats-wrap .progress-bar::-webkit-progress-bar {
|
||||||
|
background-color: rgba(${rgbaColor}, 0.5);
|
||||||
|
}
|
||||||
|
.stats-wrap .progress-bar::-webkit-progress-value {
|
||||||
|
background-color: ${color};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(styleTag);
|
||||||
|
}
|
||||||
|
|
||||||
|
function capitalizeFirstLetter(string) {
|
||||||
|
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createAndAppendElement(parent, tag, options = {}) {
|
||||||
|
const element = document.createElement(tag);
|
||||||
|
Object.keys(options).forEach((key) => {
|
||||||
|
element[key] = options[key];
|
||||||
|
});
|
||||||
|
parent.appendChild(element);
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayPokemonDetails(pokemon) {
|
||||||
|
const { name, id, types, weight, height, abilities, stats } = pokemon;
|
||||||
|
const capitalizePokemonName = capitalizeFirstLetter(name);
|
||||||
|
|
||||||
|
document.querySelector("title").textContent = capitalizePokemonName;
|
||||||
|
|
||||||
|
const detailMainElement = document.querySelector(".detail-main");
|
||||||
|
detailMainElement.classList.add(name.toLowerCase());
|
||||||
|
|
||||||
|
document.querySelector(".name-wrap .name").textContent =
|
||||||
|
capitalizePokemonName;
|
||||||
|
|
||||||
|
document.querySelector(
|
||||||
|
".pokemon-id-wrap .body2-fonts"
|
||||||
|
).textContent = `#${String(id).padStart(3, "0")}`;
|
||||||
|
|
||||||
|
const imageElement = document.querySelector(".detail-img-wrapper img");
|
||||||
|
imageElement.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${id}.svg`;
|
||||||
|
imageElement.alt = name;
|
||||||
|
|
||||||
|
const typeWrapper = document.querySelector(".power-wrapper");
|
||||||
|
typeWrapper.innerHTML = "";
|
||||||
|
types.forEach(({ type }) => {
|
||||||
|
createAndAppendElement(typeWrapper, "p", {
|
||||||
|
className: `body3-fonts type ${type.name}`,
|
||||||
|
textContent: type.name,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector(
|
||||||
|
".pokemon-detail-wrap .pokemon-detail p.body3-fonts.weight"
|
||||||
|
).textContent = `${weight / 10}kg`;
|
||||||
|
document.querySelector(
|
||||||
|
".pokemon-detail-wrap .pokemon-detail p.body3-fonts.height"
|
||||||
|
).textContent = `${height / 10}m`;
|
||||||
|
|
||||||
|
const abilitiesWrapper = document.querySelector(
|
||||||
|
".pokemon-detail-wrap .pokemon-detail.move"
|
||||||
|
);
|
||||||
|
abilities.forEach(({ ability }) => {
|
||||||
|
createAndAppendElement(abilitiesWrapper, "p", {
|
||||||
|
className: "body3-fonts",
|
||||||
|
textContent: ability.name,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const statsWrapper = document.querySelector(".stats-wrapper");
|
||||||
|
statsWrapper.innerHTML = "";
|
||||||
|
|
||||||
|
const statNameMapping = {
|
||||||
|
hp: "HP",
|
||||||
|
attack: "ATK",
|
||||||
|
defense: "DEF",
|
||||||
|
"special-attack": "SATK",
|
||||||
|
"special-defense": "SDEF",
|
||||||
|
speed: "SPD",
|
||||||
|
};
|
||||||
|
|
||||||
|
stats.forEach(({ stat, base_stat }) => {
|
||||||
|
const statDiv = document.createElement("div");
|
||||||
|
statDiv.className = "stats-wrap";
|
||||||
|
statsWrapper.appendChild(statDiv);
|
||||||
|
|
||||||
|
createAndAppendElement(statDiv, "p", {
|
||||||
|
className: "body3-fonts stats",
|
||||||
|
textContent: statNameMapping[stat.name],
|
||||||
|
});
|
||||||
|
|
||||||
|
createAndAppendElement(statDiv, "p", {
|
||||||
|
className: "body3-fonts",
|
||||||
|
textContent: String(base_stat).padStart(3, "0"),
|
||||||
|
});
|
||||||
|
|
||||||
|
createAndAppendElement(statDiv, "progress", {
|
||||||
|
className: "progress-bar",
|
||||||
|
value: base_stat,
|
||||||
|
max: 100,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
setTypeBackgroundColor(pokemon);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getEnglishFlavorText(pokemonSpecies) {
|
||||||
|
for (let entry of pokemonSpecies.flavor_text_entries) {
|
||||||
|
if (entry.language.name === "en") {
|
||||||
|
let flavor = entry.flavor_text.replace(/\f/g, " ");
|
||||||
|
return flavor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}
|
||||||
98
v2/pokemon.js
Normal file
98
v2/pokemon.js
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
const MAX_POKEMON = 151;
|
||||||
|
const listWrapper = document.querySelector(".list-wrapper");
|
||||||
|
const searchInput = document.querySelector("#search-input");
|
||||||
|
const numberFilter = document.querySelector("#number");
|
||||||
|
const nameFilter = document.querySelector("#name");
|
||||||
|
const notFoundMessage = document.querySelector("#not-found-message");
|
||||||
|
|
||||||
|
let allPokemons = [];
|
||||||
|
|
||||||
|
fetch(`https://pokeapi.co/api/v2/pokemon?limit=${MAX_POKEMON}`)
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
allPokemons = data.results;
|
||||||
|
displayPokemons(allPokemons);
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchPokemonDataBeforeRedirect(id) {
|
||||||
|
try {
|
||||||
|
const [pokemon, pokemonSpecies] = await Promise.all([
|
||||||
|
fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) =>
|
||||||
|
res.json()
|
||||||
|
),
|
||||||
|
fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) =>
|
||||||
|
res.json()
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch Pokemon data before redirect");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayPokemons(pokemon) {
|
||||||
|
listWrapper.innerHTML = "";
|
||||||
|
|
||||||
|
pokemon.forEach((pokemon) => {
|
||||||
|
const pokemonID = pokemon.url.split("/")[6];
|
||||||
|
const listItem = document.createElement("div");
|
||||||
|
listItem.className = "list-item";
|
||||||
|
listItem.innerHTML = `
|
||||||
|
<div class="number-wrap">
|
||||||
|
<p class="caption-fonts">#${pokemonID}</p>
|
||||||
|
</div>
|
||||||
|
<div class="img-wrap">
|
||||||
|
<img src="https://raw.githubusercontent.com/pokeapi/sprites/master/sprites/pokemon/other/dream-world/${pokemonID}.svg" alt="${pokemon.name}" />
|
||||||
|
</div>
|
||||||
|
<div class="name-wrap">
|
||||||
|
<p class="body3-fonts">#${pokemon.name}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
listItem.addEventListener("click", async () => {
|
||||||
|
const success = await fetchPokemonDataBeforeRedirect(pokemonID);
|
||||||
|
if (success) {
|
||||||
|
window.location.href = `./detail.html?id=${pokemonID}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
listWrapper.appendChild(listItem);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
searchInput.addEventListener("keyup", handleSearch);
|
||||||
|
|
||||||
|
function handleSearch() {
|
||||||
|
const searchTerm = searchInput.value.toLowerCase();
|
||||||
|
let filteredPokemons;
|
||||||
|
|
||||||
|
if (numberFilter.checked) {
|
||||||
|
filteredPokemons = allPokemons.filter((pokemon) => {
|
||||||
|
const pokemonID = pokemon.url.split("/")[6];
|
||||||
|
return pokemonID.startsWith(searchTerm);
|
||||||
|
});
|
||||||
|
} else if (nameFilter.checked) {
|
||||||
|
filteredPokemons = allPokemons.filter((pokemon) =>
|
||||||
|
pokemon.name.toLowerCase().startsWith(searchTerm)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
filteredPokemons = allPokemons;
|
||||||
|
}
|
||||||
|
|
||||||
|
displayPokemons(filteredPokemons);
|
||||||
|
|
||||||
|
if (filteredPokemons.length === 0) {
|
||||||
|
notFoundMessage.style.display = "block";
|
||||||
|
} else {
|
||||||
|
notFoundMessage.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeButton = document.querySelector(".search-close-icon");
|
||||||
|
closeButton.addEventListener("click", clearSearch);
|
||||||
|
|
||||||
|
function clearSearch() {
|
||||||
|
searchInput.value = "";
|
||||||
|
displayPokemons(allPokemons);
|
||||||
|
notFoundMessage.style.display = "none";
|
||||||
|
}
|
||||||
37
v2/search.js
Normal file
37
v2/search.js
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
const inputElement = document.querySelector("#search-input");
|
||||||
|
const search_icon = document.querySelector("#search-close-icon");
|
||||||
|
const sort_wrapper = document.querySelector(".sort-wrapper");
|
||||||
|
|
||||||
|
inputElement.addEventListener("input", () => {
|
||||||
|
handleInputChange(inputElement);
|
||||||
|
});
|
||||||
|
search_icon.addEventListener("click", handleSearchCloseOnClick);
|
||||||
|
sort_wrapper.addEventListener("click", handleSortIconOnClick);
|
||||||
|
|
||||||
|
function handleInputChange(inputElement) {
|
||||||
|
const inputValue = inputElement.value;
|
||||||
|
|
||||||
|
if (inputValue !== "") {
|
||||||
|
document
|
||||||
|
.querySelector("#search-close-icon")
|
||||||
|
.classList.add("search-close-icon-visible");
|
||||||
|
} else {
|
||||||
|
document
|
||||||
|
.querySelector("#search-close-icon")
|
||||||
|
.classList.remove("search-close-icon-visible");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSearchCloseOnClick() {
|
||||||
|
document.querySelector("#search-input").value = "";
|
||||||
|
document
|
||||||
|
.querySelector("#search-close-icon")
|
||||||
|
.classList.remove("search-close-icon-visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSortIconOnClick() {
|
||||||
|
document
|
||||||
|
.querySelector(".filter-wrapper")
|
||||||
|
.classList.toggle("filter-wrapper-open");
|
||||||
|
document.querySelector("body").classList.toggle("filter-wrapper-overlay");
|
||||||
|
}
|
||||||
532
v2/style.css
Normal file
532
v2/style.css
Normal file
@@ -0,0 +1,532 @@
|
|||||||
|
:root {
|
||||||
|
--identity-primary: #dc0a2d;
|
||||||
|
|
||||||
|
--grayscale-dark: #212121;
|
||||||
|
--grayscale-medium: #666666;
|
||||||
|
--grayscale-light: #e0e0e0;
|
||||||
|
--grayscale-background: #efefef;
|
||||||
|
--grayscale-white: #ffffff;
|
||||||
|
|
||||||
|
--headline-font-size: 24px;
|
||||||
|
--body1-font-size: 14px;
|
||||||
|
--body2-font-size: 12px;
|
||||||
|
--body3-font-size: 10px;
|
||||||
|
--subtitle1-font-size: 14px;
|
||||||
|
--subtitle2-font-size: 12px;
|
||||||
|
--subtitle3-font-size: 10px;
|
||||||
|
--caption-font-size: 8px;
|
||||||
|
|
||||||
|
--headline-line-height: 32px;
|
||||||
|
--common-line-height: 16px;
|
||||||
|
--caption-line-height: 12px;
|
||||||
|
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-bold: 700;
|
||||||
|
|
||||||
|
--drop-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
--drop-shadow-hover: 0px 3px 12px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
--drop-shadow-inner: 0px 1px 3px 1px rgba(0, 0, 0, 0.25) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
.body1-fonts,
|
||||||
|
.body2-fonts,
|
||||||
|
.body3-fonts {
|
||||||
|
line-height: var(--common-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: var(--headline-font-size);
|
||||||
|
line-height: var(--headline-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: var(--subtitle1-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: var(--subtitle2-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: var(--subtitle3-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body1-fonts {
|
||||||
|
font-size: var(--body1-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body2-fonts {
|
||||||
|
font-size: var(--body2-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body3-fonts {
|
||||||
|
font-size: var(--body3-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption-fonts {
|
||||||
|
font-size: var(--caption-font-size);
|
||||||
|
line-height: var(--caption-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus-visible {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-img a.arrow.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: var(--identity-primary);
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header.home {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-wrapper > h1 {
|
||||||
|
color: var(--grayscale-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-wrapper > img {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper,
|
||||||
|
.search-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrap {
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--grayscale-white);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: var(--drop-shadow-inner);
|
||||||
|
height: 32px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrap svg path {
|
||||||
|
fill: var(--identity-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrap > input {
|
||||||
|
width: 60%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-wrap {
|
||||||
|
background-color: var(--grayscale-white);
|
||||||
|
border-radius: 100%;
|
||||||
|
min-width: 2rem;
|
||||||
|
min-height: 2rem;
|
||||||
|
box-shadow: var(--drop-shadow-inner);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-close-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-close-icon-visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--identity-primary);
|
||||||
|
border: 4px solid var(--identity-primary);
|
||||||
|
border-top: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0px 4px 4px 4px;
|
||||||
|
right: 0px;
|
||||||
|
box-shadow: var(--drop-shadow-hover);
|
||||||
|
min-width: 113px;
|
||||||
|
top: 40px;
|
||||||
|
display: none;
|
||||||
|
z-index: 5000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrapper-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrapper-overlay .main::before {
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrapper > .body2-fonts {
|
||||||
|
color: var(--grayscale-white);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
padding: 16px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrap {
|
||||||
|
background-color: var(--grayscale-white);
|
||||||
|
box-shadow: var(--drop-shadow-inner);
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrap > div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrap > div:last-child {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrap input {
|
||||||
|
accent-color: var(--identity-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-list {
|
||||||
|
background-color: var(--grayscale-white);
|
||||||
|
box-shadow: var(--drop-shadow-inner);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
min-height: calc(85.5% - 1rem);
|
||||||
|
width: calc(100% - 1rem);
|
||||||
|
max-height: 100px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-wrapper {
|
||||||
|
margin: 1rem 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--drop-shadow);
|
||||||
|
background-color: var(--grayscale-white);
|
||||||
|
width: 8.85rem;
|
||||||
|
height: 8.85rem;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item .number-wrap {
|
||||||
|
min-height: 16px;
|
||||||
|
text-align: right;
|
||||||
|
padding: 0 8px;
|
||||||
|
color: var(--grayscale-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item .name-wrap {
|
||||||
|
border-radius: 7px;
|
||||||
|
background-color: var(--grayscale-background);
|
||||||
|
padding: 24px 8px 4px 8px;
|
||||||
|
color: var(--grayscale-dark);
|
||||||
|
margin-top: -18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item .img-wrap {
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item .img-wrap img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* detail page */
|
||||||
|
|
||||||
|
.detail-main .header {
|
||||||
|
padding: 20px 20px 24px 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-main .header-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
column-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-main .header-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-main .back-btn-wrap {
|
||||||
|
max-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-main .back-btn-wrap path,
|
||||||
|
.detail-main .header-wrapper p,
|
||||||
|
.detail-main .header-wrapper h1 {
|
||||||
|
fill: var(--grayscale-white);
|
||||||
|
color: var(--grayscale-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-main .pokemon-id-wrap p {
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-img-wrapper {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-img-wrapper img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card-detail-wrapper {
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: var(--grayscale-white);
|
||||||
|
box-shadow: var(--drop-shadow-inner);
|
||||||
|
padding: 56px 20px 20px 20px;
|
||||||
|
margin-top: -50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.power-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.power-wrapper > p {
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
color: var(--grayscale-white);
|
||||||
|
text-transform: capitalize;
|
||||||
|
background-color: #74cb48;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail.move p {
|
||||||
|
text-transform: capitalize;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item .name-wrap p {
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card-detail-wrapper .about-text {
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail-wrapper .pokemon-detail-wrap {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail-wrap:before {
|
||||||
|
content: "";
|
||||||
|
background-color: var(--grayscale-light);
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail-wrap:last-child::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 20px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail-wrapper {
|
||||||
|
min-height: 76px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail.move {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail-wrap > .caption-fonts {
|
||||||
|
color: var(--grayscale-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-detail-wrap .straighten {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card-detail-wrapper .pokemon-description {
|
||||||
|
color: var(--grayscale-dark);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-wrap p {
|
||||||
|
color: var(--grayscale-dark);
|
||||||
|
margin-right: 8px;
|
||||||
|
min-width: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-wrap p.stats {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 8px;
|
||||||
|
min-width: 35px;
|
||||||
|
border-right: 1px solid var(--grayscale-light);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-wrap .progress-bar {
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-wrap .progress-bar::-webkit-progress-bar {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-wrap .progress-bar::-webkit-progress-value {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-bg {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
right: 8px;
|
||||||
|
top: 8px;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-bg path {
|
||||||
|
fill: var(--grayscale-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
div#not-found-message {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow img {
|
||||||
|
-webkit-filter: brightness(0) grayscale(1) invert(1);
|
||||||
|
filter: brightness(0) grayscale(1) invert(1);
|
||||||
|
width: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-img {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-img a.arrow {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-img a.arrow.left-arrow {
|
||||||
|
left: -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-img a.arrow.right-arrow {
|
||||||
|
right: -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-main.main {
|
||||||
|
height: max-content;
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user