diff --git a/frontend/font/LMS Pokemon Master Solid.ttf b/frontend/font/LMS Pokemon Master Solid.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..b565293cc0204d87ef0a2d1935ff95f7df088840
Binary files /dev/null and b/frontend/font/LMS Pokemon Master Solid.ttf differ
diff --git a/frontend/font/Pokemon Hollow.ttf b/frontend/font/Pokemon Hollow.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..17a283a8e52fad002b2fe690a26c25515af4d300
Binary files /dev/null and b/frontend/font/Pokemon Hollow.ttf differ
diff --git a/frontend/font/Pokemon Solid.ttf b/frontend/font/Pokemon Solid.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..918fe22dc64b84451b8bf658b56cb7556099ee47
Binary files /dev/null and b/frontend/font/Pokemon Solid.ttf differ
diff --git a/frontend/font/PokemonGb-RAeo.ttf b/frontend/font/PokemonGb-RAeo.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..b5025f06293a9a0ce040a2513fb61bc6494f8416
Binary files /dev/null and b/frontend/font/PokemonGb-RAeo.ttf differ
diff --git a/frontend/img/833314.svg b/frontend/img/833314.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5e189aad97cc6008969cacf3d97e4d656497f547
--- /dev/null
+++ b/frontend/img/833314.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 450.391 450.391" style="enable-background:new 0 0 450.391 450.391;" xml:space="preserve">
+<g>
+ <g>
+ <g>
+ <path d="M143.673,350.322c-25.969,0-47.02,21.052-47.02,47.02c0,25.969,21.052,47.02,47.02,47.02
+ c25.969,0,47.02-21.052,47.02-47.02C190.694,371.374,169.642,350.322,143.673,350.322z M143.673,423.465
+ c-14.427,0-26.122-11.695-26.122-26.122c0-14.427,11.695-26.122,26.122-26.122c14.427,0,26.122,11.695,26.122,26.122
+ C169.796,411.77,158.1,423.465,143.673,423.465z"/>
+ <path d="M342.204,350.322c-25.969,0-47.02,21.052-47.02,47.02c0,25.969,21.052,47.02,47.02,47.02s47.02-21.052,47.02-47.02
+ C389.224,371.374,368.173,350.322,342.204,350.322z M342.204,423.465c-14.427,0-26.122-11.695-26.122-26.122
+ c0-14.427,11.695-26.122,26.122-26.122s26.122,11.695,26.122,26.122C368.327,411.77,356.631,423.465,342.204,423.465z"/>
+ <path d="M448.261,76.037c-2.176-2.377-5.153-3.865-8.359-4.18L99.788,67.155L90.384,38.42
+ C83.759,19.211,65.771,6.243,45.453,6.028H10.449C4.678,6.028,0,10.706,0,16.477s4.678,10.449,10.449,10.449h35.004
+ c11.361,0.251,21.365,7.546,25.078,18.286l66.351,200.098l-5.224,12.016c-5.827,15.026-4.077,31.938,4.702,45.453
+ c8.695,13.274,23.323,21.466,39.184,21.943h203.233c5.771,0,10.449-4.678,10.449-10.449c0-5.771-4.678-10.449-10.449-10.449
+ H175.543c-8.957-0.224-17.202-4.936-21.943-12.539c-4.688-7.51-5.651-16.762-2.612-25.078l4.18-9.404l219.951-22.988
+ c24.16-2.661,44.034-20.233,49.633-43.886l25.078-105.012C450.96,81.893,450.36,78.492,448.261,76.037z M404.376,185.228
+ c-3.392,15.226-16.319,26.457-31.869,27.69l-217.339,22.465L106.58,88.053l320.261,4.702L404.376,185.228z"/>
+ </g>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/frontend/img/872243.svg b/frontend/img/872243.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c1b24c8b9a4e1f061482ef6b3c147ef618746609
--- /dev/null
+++ b/frontend/img/872243.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" width="512" height="512"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="174.667" x2="174.667" y1="30" y2="438.078"><stop offset="0" stop-color="#00efd1"/><stop offset="1" stop-color="#00acea"/></linearGradient><linearGradient id="b" x1="372.786" x2="372.786" xlink:href="#a" y1="30" y2="438.078"/><linearGradient id="c" x1="256" x2="256" xlink:href="#a" y1="30" y2="438.078"/><path d="m174.667 380.772a46.5 46.5 0 1 0 46.5 46.5 46.549 46.549 0 0 0 -46.5-46.5zm0 72.992a26.5 26.5 0 1 1 26.5-26.5 26.526 26.526 0 0 1 -26.5 26.5z" fill="url(#a)"/><path d="m372.786 380.772a46.5 46.5 0 1 0 46.5 46.5 46.549 46.549 0 0 0 -46.5-46.5zm0 72.992a26.5 26.5 0 1 1 26.5-26.5 26.526 26.526 0 0 1 -26.5 26.5z" fill="url(#b)"/><path d="m470.433 103.407-340.081-5.136-9.329-28.271a46.542 46.542 0 0 0 -44.164-32h-35.14a10 10 0 1 0 0 20h35.14a26.578 26.578 0 0 1 25.179 18.289l11.781 35.611 54.359 164.28-4.9 11.865a46.293 46.293 0 0 0 42.984 63.955h203.019a10 10 0 0 0 0-20h-203.019a26.312 26.312 0 0 1 -24.49-36.384l3.844-9.272 219.733-22.5a57 57 0 0 0 49.58-43.376l25.078-104.738a10 10 0 0 0 -9.574-12.323zm-34.955 112.415a36.988 36.988 0 0 1 -32.169 28.144l-217.365 22.274-48.936-147.866 320.641 4.843z" fill="url(#c)"/></svg>
diff --git a/frontend/img/bug.jpg b/frontend/img/bug.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..aa0762d13c27e00aee8641a3e0efeeabe100d81a
Binary files /dev/null and b/frontend/img/bug.jpg differ
diff --git a/frontend/img/dark.jpg b/frontend/img/dark.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..af9b7b1b54e206413e6bf5a46e914e3ef2e3d04c
Binary files /dev/null and b/frontend/img/dark.jpg differ
diff --git a/frontend/img/dragon.jpg b/frontend/img/dragon.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f596d4a224aa819983bca2dac6849b7afee5f5ea
Binary files /dev/null and b/frontend/img/dragon.jpg differ
diff --git a/frontend/img/eevee.svg b/frontend/img/eevee.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dfe7e63e8d68a6466f1d63b934040f73269de20f
--- /dev/null
+++ b/frontend/img/eevee.svg
@@ -0,0 +1,217 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" 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 127.6 127.6" style="enable-background:new 0 0 127.6 127.6;" xml:space="preserve">
+<g>
+ <g>
+ <path style="fill:#FFECD2;" d="M115.06,91.168c0,16.236-22.949,34.932-51.26,34.932s-51.26-18.695-51.26-34.932
+ c0-16.238,22.949-29.402,51.26-29.402S115.06,74.93,115.06,91.168z"/>
+ </g>
+ <g>
+ <path style="fill:#EFC99A;" d="M115.06,91.168c0,16.236-22.949,29.266-51.26,29.266s-51.26-13.029-51.26-29.266
+ c0-16.238,22.949-29.402,51.26-29.402S115.06,74.93,115.06,91.168z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M63.8,127.6c-29.713,0-52.76-19.584-52.76-36.432c0-17.04,23.668-30.902,52.76-30.902
+ s52.76,13.862,52.76,30.902C116.56,108.016,93.513,127.6,63.8,127.6z M63.8,63.266c-27.438,0-49.76,12.517-49.76,27.902
+ c0,15.143,22.196,33.432,49.76,33.432s49.76-18.289,49.76-33.432C113.56,75.782,91.237,63.266,63.8,63.266z"/>
+ </g>
+ <g>
+ <g>
+ <path style="fill:#E5B076;" d="M113.009,79.612c0,20.676-22.031,37.441-49.209,37.441s-49.209-16.766-49.209-37.441
+ c0-20.68,22.031-45.459,49.209-45.459S113.009,58.932,113.009,79.612z"/>
+ </g>
+ <g>
+ <path style="fill:#D3964C;" d="M113.009,79.612c0,20.676-22.031,37.441-49.209,37.441s-49.209-16.766-49.209-37.441
+ c0-20.68,22.031-34.928,49.209-34.928S113.009,58.932,113.009,79.612z"/>
+ </g>
+ <g>
+ <path style="fill:#E5B076;" d="M74.278,83.569c0,1.393-4.691,1.643-10.478,1.643c-5.787,0-10.479-0.25-10.479-1.643
+ c0-1.395,4.691-5.037,10.479-5.037C69.587,78.531,74.278,82.174,74.278,83.569z"/>
+ </g>
+ <g>
+ <path style="fill:#C4833D;" d="M113.009,79.612c0,20.676-22.031,37.441-49.209,37.441s-49.209-16.766-49.209-37.441
+ c0-20.682,6.262,18.34,49.209,18.34S113.009,58.93,113.009,79.612z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M63.8,118.553c-27.961,0-50.709-17.469-50.709-38.941c0-21.27,22.619-46.959,50.709-46.959
+ s50.709,25.689,50.709,46.959C114.509,101.084,91.761,118.553,63.8,118.553z M63.8,35.653c-26.428,0-47.709,24.048-47.709,43.959
+ c0,19.818,21.402,35.941,47.709,35.941s47.709-16.123,47.709-35.941C111.509,59.7,90.228,35.653,63.8,35.653z"/>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#D3964C;" d="M21.11,34.031c-0.124,12.322,4.217,22.303,11.009,27.771
+ c6.933-8.355,11.495-20.207,11.619-32.531C43.863,16.948,39.522,6.967,32.729,1.5C25.798,9.854,21.235,21.707,21.11,34.031z"
+ />
+ </g>
+ <g>
+ <path style="fill:#C4833D;" d="M32.729,1.5C25.798,9.854,21.235,21.707,21.11,34.031
+ c-0.124,12.322,4.217,22.303,11.009,27.771L32.729,1.5z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M26.4,56.705c-0.503,0-0.995-0.254-1.278-0.714c-3.69-6-5.596-13.599-5.511-21.976
+ c0.123-12.257,4.484-24.458,11.964-33.474c0.521-0.631,1.454-0.725,2.095-0.211c7.479,6.019,11.695,16.572,11.569,28.956
+ c-0.075,7.313-1.688,14.76-4.665,21.537c-0.333,0.757-1.219,1.104-1.977,0.77c-0.758-0.333-1.103-1.218-0.77-1.977
+ c2.815-6.409,4.341-13.45,4.411-20.361c0.109-10.797-3.267-20.025-9.311-25.604c-6.463,8.362-10.206,19.348-10.317,30.395
+ c-0.079,7.811,1.672,14.855,5.065,20.373c0.435,0.706,0.214,1.63-0.491,2.063C26.94,56.634,26.668,56.705,26.4,56.705z"/>
+ </g>
+ </g>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#66310E;" d="M26.919,40.11c-0.059,5.826,1.994,10.541,5.204,13.127c3.276-3.949,5.433-9.551,5.491-15.375
+ c0.06-5.826-1.992-10.543-5.203-13.127C29.135,28.684,26.978,34.285,26.919,40.11z"/>
+ </g>
+ <g>
+ <path style="fill:#89410B;" d="M32.411,24.735c-3.276,3.949-5.434,9.551-5.492,15.375
+ c-0.059,5.826,1.994,10.541,5.204,13.127L32.411,24.735z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M32.122,54.737c-0.33,0-0.663-0.108-0.94-0.332c-3.724-3-5.824-8.216-5.763-14.31l0,0
+ c0.061-5.971,2.188-11.919,5.838-16.318c0.521-0.631,1.455-0.726,2.095-0.211c3.725,2.998,5.825,8.214,5.763,14.312
+ c-0.061,5.971-2.188,11.919-5.837,16.317C32.982,54.552,32.554,54.737,32.122,54.737z M26.919,40.11l1.5,0.015
+ c-0.045,4.413,1.253,8.354,3.524,10.88c2.618-3.716,4.123-8.423,4.171-13.157c0.045-4.416-1.252-8.356-3.523-10.88
+ c-2.619,3.716-4.124,8.424-4.172,13.157L26.919,40.11z"/>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#D3964C;" d="M106.489,34.031c0.124,12.322-4.217,22.303-11.009,27.771
+ c-6.933-8.355-11.495-20.207-11.619-32.531C83.736,16.948,88.078,6.967,94.871,1.5
+ C101.802,9.854,106.365,21.707,106.489,34.031z"/>
+ </g>
+ <g>
+ <path style="fill:#C4833D;" d="M94.871,1.5c6.931,8.353,11.494,20.207,11.618,32.531
+ c0.124,12.322-4.217,22.303-11.009,27.771L94.871,1.5z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M101.2,56.705c-0.269,0-0.54-0.071-0.785-0.223c-0.705-0.434-0.926-1.357-0.491-2.063
+ c3.394-5.518,5.145-12.563,5.065-20.372c-0.111-11.048-3.854-22.033-10.317-30.396c-6.044,5.579-9.42,14.808-9.311,25.604
+ c0.07,6.911,1.596,13.952,4.411,20.361c0.333,0.759-0.012,1.644-0.77,1.977c-0.758,0.336-1.644-0.012-1.977-0.77
+ c-2.978-6.777-4.59-14.225-4.665-21.537C82.235,16.904,86.452,6.35,93.931,0.331c0.641-0.514,1.572-0.42,2.095,0.211
+ c7.479,9.016,11.841,21.217,11.964,33.475c0.085,8.376-1.82,15.975-5.511,21.975C102.195,56.451,101.703,56.705,101.2,56.705
+ z"/>
+ </g>
+ </g>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#66310E;" d="M100.681,40.11c0.059,5.826-1.994,10.541-5.204,13.127c-3.276-3.949-5.433-9.551-5.491-15.375
+ c-0.06-5.826,1.992-10.543,5.203-13.127C98.465,28.684,100.622,34.285,100.681,40.11z"/>
+ </g>
+ <g>
+ <path style="fill:#89410B;" d="M95.189,24.735c3.276,3.949,5.434,9.551,5.492,15.375c0.059,5.826-1.994,10.541-5.204,13.127
+ L95.189,24.735z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M95.478,54.737c-0.432,0-0.859-0.185-1.155-0.542c-3.649-4.398-5.776-10.347-5.837-16.318
+ c-0.063-6.097,2.038-11.313,5.763-14.311c0.64-0.515,1.572-0.42,2.095,0.211c3.65,4.399,5.777,10.348,5.838,16.318l0,0
+ c0.062,6.094-2.039,11.31-5.763,14.31C96.141,54.628,95.808,54.737,95.478,54.737z M95.009,26.967
+ c-2.271,2.523-3.568,6.464-3.523,10.879c0.048,4.735,1.553,9.442,4.171,13.158c2.271-2.525,3.569-6.467,3.524-10.88
+ C99.133,35.391,97.628,30.683,95.009,26.967z"/>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ <path style="fill:#33363A;" d="M73.437,94.565c-0.828,0-1.5,0.672-1.5,1.5c0,1.428-1.162,2.59-2.59,2.59H67.89
+ c-1.428,0-2.59-1.162-2.59-2.59V94.61c0-0.073-0.011-0.143-0.021-0.213l3.111-1.557c0.622-0.312,0.949-1.01,0.789-1.687
+ s-0.765-1.155-1.46-1.155h-7.837c-0.695,0-1.3,0.479-1.46,1.155s0.167,1.375,0.789,1.687l3.11,1.557
+ c-0.01,0.07-0.021,0.14-0.021,0.213v1.455c0,1.428-1.162,2.59-2.59,2.59h-1.457c-1.428,0-2.59-1.162-2.59-2.59
+ c0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5c0,3.082,2.508,5.59,5.59,5.59h1.457c1.615,0,3.068-0.693,4.09-1.792
+ c1.021,1.099,2.475,1.792,4.09,1.792h1.457c3.082,0,5.59-2.508,5.59-5.59C74.937,95.237,74.265,94.565,73.437,94.565z"/>
+ <g>
+ <path style="fill:#89410B;" d="M47.638,84.428c0,4.449-3.605,8.051-8.053,8.051c-4.445,0-8.051-3.602-8.051-8.051
+ c0-4.447,3.605-8.051,8.051-8.051C44.032,76.377,47.638,79.981,47.638,84.428z"/>
+ </g>
+ <g>
+ <circle style="fill:#FFFFFF;" cx="35.582" cy="81.811" r="3.28"/>
+ </g>
+ <path style="fill:#33363A;" d="M39.585,74.877c-3.243,0-6.11,1.628-7.837,4.107c-0.106,0.143-0.198,0.294-0.288,0.448
+ c-0.898,1.456-1.426,3.163-1.426,4.996c0,5.267,4.284,9.551,9.551,9.551c5.268,0,9.553-4.284,9.553-9.551
+ S44.853,74.877,39.585,74.877z M39.585,90.979c-2.721,0-5.058-1.668-6.046-4.034c0.68-0.018,1.509-0.201,2.437-0.393
+ c0.357-0.03,0.701-0.097,1.032-0.202c0.809-0.144,1.675-0.258,2.577-0.258c2.413,0,4.572,0.813,6.048,0.853
+ C44.644,89.311,42.307,90.979,39.585,90.979z"/>
+ <circle style="fill:#FFFFFF;" cx="35.581" cy="81.812" r="1.78"/>
+ <g>
+ <path style="fill:#89410B;" d="M96.066,84.428c0,4.449-3.605,8.051-8.051,8.051c-4.447,0-8.053-3.602-8.053-8.051
+ c0-4.447,3.605-8.051,8.053-8.051C92.46,76.377,96.066,79.981,96.066,84.428z"/>
+ </g>
+ <g>
+ <circle style="fill:#FFFFFF;" cx="84.01" cy="81.811" r="3.28"/>
+ </g>
+ <path style="fill:#33363A;" d="M88.015,74.877c-3.242,0-6.108,1.626-7.835,4.102c-0.108,0.146-0.202,0.299-0.294,0.457
+ c-0.897,1.455-1.424,3.161-1.424,4.992c0,5.267,4.285,9.551,9.553,9.551c5.267,0,9.551-4.284,9.551-9.551
+ S93.281,74.877,88.015,74.877z M88.015,90.979c-2.721,0-5.059-1.668-6.048-4.034c0.689-0.018,1.526-0.2,2.47-0.396
+ c0.335-0.03,0.657-0.093,0.968-0.189c0.82-0.148,1.695-0.268,2.61-0.268c2.412,0,4.571,0.813,6.046,0.853
+ C93.073,89.311,90.735,90.979,88.015,90.979z"/>
+ <circle style="fill:#FFFFFF;" cx="84.009" cy="81.812" r="1.78"/>
+ <g>
+ <g>
+ <polygon style="fill:#E5B076;" points="84.327,44.19 77.62,29.262 71.208,32.145 63.8,24.735 56.391,32.145 49.98,29.262
+ 43.273,44.19 58.197,50.897 58.53,50.155 63.8,55.424 69.069,50.156 69.402,50.897 "/>
+ </g>
+ <g>
+ <polygon style="fill:#D3964C;" points="71.208,44.645 63.8,37.237 56.391,44.645 49.98,41.764 47.946,46.289 58.197,50.897
+ 58.53,50.155 63.8,55.424 69.069,50.156 69.402,50.897 79.653,46.289 77.62,41.764 "/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M84.328,45.69c-0.572,0-1.119-0.329-1.369-0.885l-6.092-13.56l-5.044,2.268
+ c-0.567,0.256-1.235,0.132-1.676-0.308l-6.348-6.35l-6.349,6.35c-0.441,0.439-1.109,0.563-1.676,0.308l-5.043-2.268l-6.092,13.56
+ c-0.34,0.755-1.226,1.095-1.983,0.753c-0.755-0.34-1.093-1.228-0.753-1.983l6.707-14.928c0.163-0.362,0.464-0.646,0.836-0.787
+ c0.37-0.143,0.783-0.13,1.147,0.034l5.467,2.458l6.678-6.678c0.281-0.281,0.663-0.439,1.061-0.439l0,0
+ c0.397,0,0.779,0.158,1.061,0.439l6.677,6.678l5.468-2.458c0.362-0.164,0.775-0.177,1.147-0.034
+ c0.372,0.142,0.673,0.425,0.836,0.787l6.707,14.928c0.34,0.756,0.002,1.644-0.753,1.983C84.742,45.648,84.533,45.69,84.328,45.69
+ z"/>
+ </g>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/frontend/img/electric.jpg b/frontend/img/electric.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..53d57748e90ebafa022cf14697780fec638f99f8
Binary files /dev/null and b/frontend/img/electric.jpg differ
diff --git a/frontend/img/fairy.jpg b/frontend/img/fairy.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5596ff64bd2bbc15a715a16cf96c03f652d516d9
Binary files /dev/null and b/frontend/img/fairy.jpg differ
diff --git a/frontend/img/fighting.jpg b/frontend/img/fighting.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..69d6b1e377bcfd3fe840b36eef7bfb169e270b23
Binary files /dev/null and b/frontend/img/fighting.jpg differ
diff --git a/frontend/img/fire.jpg b/frontend/img/fire.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cb11ed1ac41e177f24d054591330e51e8d26139d
Binary files /dev/null and b/frontend/img/fire.jpg differ
diff --git a/frontend/img/flying.jpg b/frontend/img/flying.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..29f929d803715c5e2cdc2014c33b6922fdf887d9
Binary files /dev/null and b/frontend/img/flying.jpg differ
diff --git a/frontend/img/ghost.jpg b/frontend/img/ghost.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..80f4fedb674bb4ba2231afc48235da3a05d2f804
Binary files /dev/null and b/frontend/img/ghost.jpg differ
diff --git a/frontend/img/grass.jpg b/frontend/img/grass.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..348b802bb9a6713012fc98cb53d5c6dc425329e0
Binary files /dev/null and b/frontend/img/grass.jpg differ
diff --git a/frontend/img/ground.jpg b/frontend/img/ground.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dd26045d071f1fe3e6efad32873a5129095955d4
Binary files /dev/null and b/frontend/img/ground.jpg differ
diff --git a/frontend/img/ice.jpg b/frontend/img/ice.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..55a898653958443be4ae2d37711d366fb2d0c007
Binary files /dev/null and b/frontend/img/ice.jpg differ
diff --git a/frontend/img/normal.jpg b/frontend/img/normal.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a0632a5b46cae6b0a5f321be3cd37a551f7ebec5
Binary files /dev/null and b/frontend/img/normal.jpg differ
diff --git a/frontend/img/physical.png b/frontend/img/physical.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f60ce3498658c2457a1f8c11442cb8cc5ae8be9
Binary files /dev/null and b/frontend/img/physical.png differ
diff --git a/frontend/img/pikachu.svg b/frontend/img/pikachu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..94e0667fd120459574674e4f87c9c3260658f7a4
--- /dev/null
+++ b/frontend/img/pikachu.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#303C42;" d="M448,266.667c0-24.962-9.085-54.28-17.755-76.638C487.435,175.296,512,74.178,512,32
+ c0-5.896-4.771-10.667-10.667-10.667c-60.137,0-141.182,39.081-157.033,81.564C321.71,94.258,290.186,85.333,256,85.333
+ s-65.71,8.924-88.301,17.564c-15.85-42.483-96.896-81.564-157.033-81.564C4.771,21.333,0,26.104,0,32
+ c0,42.178,24.565,143.296,81.755,158.029C73.085,212.387,64,241.704,64,266.667c0,18.719-3.833,25.417-8.708,33.896
+ C49.375,310.885,42.667,322.604,42.667,352c0,56.677,75.979,138.667,213.333,138.667S469.333,408.677,469.333,352
+ c0-29.396-6.708-41.115-12.625-51.438C451.833,292.083,448,285.385,448,266.667z"/>
+<path style="fill:#FFEE58;" d="M400.438,150.521c5.25-2.667,11.688-0.656,14.375,4.583c0.382,0.741,3.228,6.339,7.064,14.882
+ c10.01-1.695,18.934-7.691,26.839-16.277c-1.47-22.102-14.262-71.655-28.268-90.72c-29.005,13.956-51.608,32.642-56.635,48.164
+ c8.816,4.134,14.23,7.237,14.918,7.639c5.083,2.979,6.771,9.5,3.813,14.583c-2.958,5.083-9.479,6.833-14.583,3.833
+ c-0.521-0.302-53.083-30.542-111.958-30.542c-59.083,0-111.417,30.229-111.938,30.542c-1.708,0.99-3.563,1.458-5.396,1.458
+ c-3.646,0-7.229-1.885-9.208-5.281c-2.979-5.083-1.271-11.615,3.813-14.594c0.688-0.402,6.102-3.505,14.918-7.639
+ c-5.027-15.522-27.63-34.208-56.635-48.164c-14.428,19.639-27.146,70.22-27.911,91.115c7.818,8.374,16.622,14.214,26.482,15.883
+ c3.836-8.543,6.682-14.141,7.064-14.882c2.708-5.24,9.146-7.271,14.375-4.583c5.229,2.698,7.292,9.135,4.583,14.365
+ c-0.313,0.604-30.813,60.271-30.813,101.781c0,24.396-6.125,35.073-11.521,44.5c-2.939,5.132-5.757,10.185-7.62,18.133
+ C74.767,323.478,84.99,320,96,320c29.417,0,53.333,23.927,53.333,53.333c0,24.596-16.822,45.154-39.51,51.288
+ c32.003,24.927,80.672,44.712,146.177,44.712s114.174-19.785,146.177-44.712c-22.689-6.134-39.51-26.691-39.51-51.288
+ C362.667,343.927,386.583,320,416,320c11.01,0,21.233,3.477,29.807,9.299c-1.863-7.947-4.681-13.001-7.62-18.133
+ c-5.396-9.427-11.521-20.104-11.521-44.5c0-41.594-30.5-101.177-30.813-101.771C393.146,159.656,395.208,153.219,400.438,150.521z"
+ />
+<circle style="fill:#303C42;" cx="160" cy="266.667" r="32"/>
+<circle style="fill:#FFFFFF;" cx="170.667" cy="256" r="10.667"/>
+<circle style="fill:#303C42;" cx="352" cy="266.667" r="32"/>
+<circle style="fill:#FFFFFF;" cx="343.04" cy="256" r="10.667"/>
+<path style="fill:#303C42;" d="M311.229,335.25c-0.792,1.125-6.125,4.552-16.313,5.719c-9.917,1.135-23.563-0.25-31.833-7.604
+ c-2.017-1.798-4.543-2.697-7.069-2.701c2.724-0.003,5.448-1.043,7.527-3.122l10.667-10.667c3.042-3.052,3.958-7.635,2.313-11.625
+ c-1.646-3.99-5.542-6.583-9.854-6.583h-21.333c-4.313,0-8.208,2.594-9.854,6.583c-1.646,3.99-0.729,8.573,2.313,11.625
+ l10.667,10.667c2.079,2.079,4.803,3.12,7.527,3.122c-2.526,0.004-5.052,0.902-7.069,2.701c-8.271,7.375-21.938,8.75-31.833,7.604
+ c-10.188-1.167-15.521-4.594-16.313-5.719c-3.375-4.833-10.021-6.042-14.854-2.677c-4.833,3.354-6.042,10-2.688,14.844
+ c7.201,10.372,22.612,13.548,29.927,14.518c-0.18,15.685,0.837,39.401,14.74,53.628c7.208,7.365,16.667,11.104,28.104,11.104
+ c10.438,0,19.646-3.969,26.646-11.479c13.478-14.495,15.954-39.034,16.195-53.253c7.311-0.97,22.728-4.145,29.93-14.518
+ c3.333-4.833,2.125-11.417-2.688-14.781C321.313,329.302,314.625,330.448,311.229,335.25z"/>
+<path style="fill:#E53935;" d="M243.167,400.656c-8.165-8.355-8.806-26.975-8.671-38.947c7.906-1.21,15.297-3.587,21.504-7.251
+ c6.172,3.648,13.642,5.669,21.491,6.887c-0.254,12.069-2.375,30.595-10.47,39.311C260.333,407.792,248.75,406.417,243.167,400.656z"
+ />
+<path style="opacity:0.1;enable-background:new ;" d="M256,373.292c5.655,3.342,12.457,5.217,19.585,6.462
+ c1.201-6.461,1.794-13.068,1.906-18.409c-7.849-1.217-15.319-3.238-21.491-6.887c-6.207,3.664-13.598,6.042-21.504,7.251
+ c-0.061,5.371,0.142,12.076,1.003,18.595C243.013,379.051,250.066,376.794,256,373.292z"/>
+<path style="fill:#E53935;" d="M424.092,403.928C401.934,410.135,384,393.582,384,373.333c0-17.646,14.354-32,32-32
+ c14.169,0,26.181,9.363,30.264,22.797C443.253,376.47,435.865,390.328,424.092,403.928z"/>
+<path style="opacity:0.2;fill:#FFFFFF;enable-background:new ;" d="M389.777,380.345c0-17.646,14.354-32,32-32
+ c8.145,0,15.353,3.336,20.975,8.517c-5.607-9.337-15.374-15.529-26.753-15.529c-17.646,0-32,14.354-32,32
+ c0,9.639,4.15,18.353,10.799,24.26C391.698,392.561,389.777,386.691,389.777,380.345z"/>
+<path style="fill:#E53935;" d="M87.901,403.921c-11.768-13.598-19.154-27.453-22.165-39.79
+ c4.083-13.435,16.095-22.797,30.264-22.797c17.646,0,32,14.354,32,32C128,393.605,109.909,410.086,87.901,403.921z"/>
+<path style="opacity:0.2;fill:#FFFFFF;enable-background:new ;" d="M97.777,351.111c14.059,0,25.895,9.172,30.18,21.801
+ c-0.232-17.447-14.456-31.578-31.957-31.578c-14.169,0-26.181,9.362-30.264,22.797c0.638,2.613,1.578,5.324,2.608,8.056
+ C72.931,359.75,84.268,351.111,97.777,351.111z"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-36.5446" y1="631.7689" x2="-29.6035" y2="624.8278" gradientTransform="matrix(21.3333 0 0 -21.3333 996.3334 13791.667)">
+ <stop offset="0" style="stop-color:#000000;stop-opacity:0.1"/>
+ <stop offset="1" style="stop-color:#000000;stop-opacity:0"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1_);" d="M183.229,347.417l30.587,30.587c-0.492-5.75-0.715-11.309-0.66-16.069
+ C205.841,360.965,190.43,357.789,183.229,347.417z M362.667,373.333c0-1.215,0.277-2.353,0.358-3.547l-33.961-33.961h-0.007
+ c2.134,3.482,2.182,8.012-0.286,11.591c-7.202,10.374-22.618,13.548-29.93,14.518c-0.241,14.219-2.717,38.758-16.195,53.253
+ c-7,7.51-16.208,11.479-26.646,11.479c-11.438,0-20.896-3.74-28.104-11.104l52.77,52.77c53.184-4.259,93.669-22.025,121.512-43.711
+ C379.488,418.487,362.667,397.93,362.667,373.333z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-47.8644" y1="642.6061" x2="-23.703" y2="631.3364" gradientTransform="matrix(21.3333 0 0 -21.3333 996.3334 13791.667)">
+ <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
+ <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+</linearGradient>
+<path style="fill:url(#SVGID_2_);" d="M448,266.667c0-24.962-9.085-54.28-17.755-76.638C487.435,175.296,512,74.178,512,32
+ c0-5.896-4.771-10.667-10.667-10.667c-60.137,0-141.182,39.081-157.033,81.564C321.71,94.258,290.186,85.333,256,85.333
+ s-65.71,8.924-88.301,17.564c-15.85-42.483-96.896-81.564-157.033-81.564C4.771,21.333,0,26.104,0,32
+ c0,42.178,24.565,143.296,81.755,158.029C73.085,212.387,64,241.704,64,266.667c0,18.719-3.833,25.417-8.708,33.896
+ C49.375,310.885,42.667,322.604,42.667,352c0,56.677,75.979,138.667,213.333,138.667S469.333,408.677,469.333,352
+ c0-29.396-6.708-41.115-12.625-51.438C451.833,292.083,448,285.385,448,266.667z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/frontend/img/pikachu2.svg b/frontend/img/pikachu2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..eb2ffaee80e2e6cd414a8c6b412e8d2b46465792
--- /dev/null
+++ b/frontend/img/pikachu2.svg
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" 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 127.782 127.782" style="enable-background:new 0 0 127.782 127.782;" xml:space="preserve">
+<g>
+ <g>
+ <g>
+ <polygon style="fill:#FFD400;" points="90.685,5.927 64.69,5.927 50.365,31.066 62.005,31.066 46.735,62.091 86.864,26.183
+ 73.827,26.183 "/>
+ </g>
+ <g>
+ <polygon style="fill:#FFB000;" points="59.724,14.642 50.365,31.066 62.005,31.066 46.735,62.091 77.124,34.898 66.995,34.898
+ 74.247,26.183 73.827,26.183 83.431,14.642 "/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M46.734,63.591c-0.318,0-0.638-0.101-0.906-0.305c-0.572-0.435-0.757-1.213-0.439-1.857
+ l14.206-28.863h-9.229c-0.534,0-1.028-0.284-1.297-0.746s-0.271-1.032-0.007-1.496L63.386,5.185
+ c0.268-0.469,0.765-0.758,1.304-0.758h25.995c0.582,0,1.111,0.337,1.358,0.863c0.247,0.527,0.167,1.149-0.205,1.597
+ L77.027,24.683h9.837c0.622,0,1.18,0.384,1.401,0.965s0.063,1.238-0.401,1.653l-40.13,35.908
+ C47.451,63.463,47.093,63.591,46.734,63.591z M52.946,29.566h9.059c0.519,0,1,0.268,1.273,0.707
+ c0.273,0.44,0.301,0.99,0.072,1.455L51.492,55.821l31.446-28.138h-9.111c-0.582,0-1.111-0.337-1.358-0.863
+ c-0.247-0.527-0.167-1.149,0.205-1.597L87.484,7.427H65.562L52.946,29.566z"/>
+ </g>
+ </g>
+ <g>
+ <g>
+ <path style="fill:#FFF800;" d="M113.1,84.413c0,20.676-22.032,37.441-49.209,37.441c-27.178,0-49.209-16.766-49.209-37.441
+ c0-20.68,22.031-45.459,49.209-45.459C91.068,38.954,113.1,63.734,113.1,84.413z"/>
+ </g>
+ <g>
+ <path style="fill:#FFD400;" d="M113.1,84.413c0,20.676-22.032,37.441-49.209,37.441c-27.178,0-49.209-16.766-49.209-37.441
+ c0-20.68,22.031-34.928,49.209-34.928C91.068,49.486,113.1,63.734,113.1,84.413z"/>
+ </g>
+ <g>
+ <path style="fill:#FFF800;" d="M74.37,74.615c0,1.393-4.691,1.643-10.479,1.643s-10.479-0.25-10.479-1.643
+ c0-1.395,4.691-5.037,10.479-5.037S74.37,73.22,74.37,74.615z"/>
+ </g>
+ <g>
+ <path style="fill:#FFB000;" d="M113.1,84.413c0,20.676-22.032,37.441-49.209,37.441c-27.178,0-49.209-16.766-49.209-37.441
+ c0-20.682,6.261,18.34,49.209,18.34S113.1,63.732,113.1,84.413z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M63.891,123.355c-27.961,0-50.709-17.469-50.709-38.941c0-21.27,22.619-46.959,50.709-46.959
+ S114.6,63.144,114.6,84.413C114.6,105.886,91.852,123.355,63.891,123.355z M63.891,40.454c-26.428,0-47.709,24.048-47.709,43.959
+ c0,19.818,21.402,35.941,47.709,35.941S111.6,104.232,111.6,84.413C111.6,64.502,90.318,40.454,63.891,40.454z"/>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#FFD400;" d="M9.197,47.273c6.385,10.541,15.331,16.738,23.985,17.811
+ c1.492-10.754-0.872-23.232-7.258-33.773C19.539,20.767,10.593,14.57,1.94,13.501C0.447,24.251,2.812,36.732,9.197,47.273z"/>
+ </g>
+ <g>
+ <path style="fill:#FFB000;" d="M1.94,13.501c-1.492,10.75,0.872,23.23,7.258,33.771c6.385,10.541,15.331,16.738,23.985,17.811
+ L1.94,13.501z"/>
+ </g>
+ <path style="fill:#33363A;" d="M34.587,51.296c-1.041-7.334-3.593-14.514-7.379-20.764c-6.417-10.594-15.56-17.344-25.085-18.52
+ c-0.816-0.101-1.557,0.47-1.669,1.282c-1.611,11.602,1.108,24.27,7.46,34.755c4.339,7.166,9.961,12.622,16.259,15.778
+ c0.216,0.108,0.444,0.159,0.671,0.159c0.55,0,1.079-0.303,1.342-0.828c0.371-0.74,0.072-1.642-0.669-2.013
+ c-5.791-2.903-10.99-7.969-15.036-14.651c-1.861-3.071-3.385-6.34-4.567-9.713c6.1-1,13.157,2.117,12.314-12.987
+ c2.338,2.362,4.503,5.137,6.414,8.292c3.579,5.906,5.99,12.694,6.975,19.631c0.117,0.82,0.879,1.385,1.696,1.274
+ C34.133,52.876,34.703,52.117,34.587,51.296z"/>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#FFD400;" d="M118.584,47.273c-6.385,10.541-15.331,16.738-23.985,17.811
+ c-1.492-10.754,0.871-23.232,7.258-33.773c6.386-10.543,15.332-16.74,23.986-17.808
+ C127.334,24.251,124.971,36.732,118.584,47.273z"/>
+ </g>
+ <g>
+ <path style="fill:#FFB000;" d="M125.843,13.501c1.491,10.75-0.872,23.23-7.259,33.771
+ c-6.385,10.541-15.331,16.738-23.985,17.811L125.843,13.501z"/>
+ </g>
+ <path style="fill:#33363A;" d="M127.328,13.295c-0.112-0.813-0.857-1.382-1.669-1.282c-9.525,1.176-18.669,7.926-25.086,18.52
+ c-3.787,6.253-6.339,13.434-7.378,20.764c-0.116,0.82,0.454,1.58,1.274,1.696c0.832,0.114,1.58-0.455,1.696-1.274
+ c0.982-6.934,3.395-13.722,6.974-19.631c1.911-3.155,4.076-5.93,6.414-8.292c-0.844,15.104,6.214,11.987,12.315,12.987
+ c-1.182,3.373-2.706,6.642-4.567,9.713c-4.048,6.684-9.247,11.75-15.036,14.651c-0.741,0.371-1.04,1.272-0.669,2.013
+ c0.263,0.525,0.792,0.828,1.342,0.828c0.226,0,0.455-0.051,0.671-0.159c6.296-3.155,11.918-8.611,16.259-15.778
+ C126.219,37.567,128.939,24.899,127.328,13.295z"/>
+ </g>
+ </g>
+ </g>
+ <g>
+ <g>
+ <circle style="fill:#FF1A1A;" cx="32.889" cy="87.775" r="7.013"/>
+ </g>
+ <g>
+ <path style="fill:#D61D1D;" d="M39.902,87.775c0,3.871-3.14,7.012-7.013,7.012c-3.874,0-7.014-3.141-7.014-7.012"/>
+ </g>
+ <g>
+ <circle style="fill:#FF1A1A;" cx="94.892" cy="87.775" r="7.014"/>
+ </g>
+ <g>
+ <path style="fill:#D61D1D;" d="M101.905,87.775c0,3.871-3.141,7.012-7.014,7.012c-3.873,0-7.014-3.141-7.014-7.012"/>
+ </g>
+ </g>
+ <path style="fill:#33363A;" d="M73.528,80.281c-0.828,0-1.5,0.672-1.5,1.5c0,1.427-1.162,2.588-2.591,2.588h-1.456
+ c-1.428,0-2.59-1.161-2.59-2.588v-1.455c0-0.073-0.011-0.143-0.021-0.213l3.11-1.556c0.622-0.312,0.949-1.01,0.789-1.687
+ s-0.765-1.155-1.46-1.155h-7.837c-0.695,0-1.3,0.479-1.46,1.155s0.167,1.375,0.789,1.687l3.109,1.556
+ c-0.01,0.07-0.021,0.14-0.021,0.213v1.455c0,1.427-1.161,2.588-2.589,2.588h-1.457c-1.429,0-2.591-1.161-2.591-2.588
+ c0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5c0,3.081,2.508,5.588,5.591,5.588h1.457c1.616,0,3.069-0.693,4.09-1.792
+ c1.021,1.099,2.475,1.792,4.091,1.792h1.456c3.083,0,5.591-2.507,5.591-5.588C75.028,80.953,74.357,80.281,73.528,80.281z"/>
+ <g>
+ <path style="fill:#6D5C4D;" d="M47.729,70.144c0,4.449-3.605,8.051-8.053,8.051c-4.446,0-8.051-3.602-8.051-8.051
+ c0-4.447,3.604-8.053,8.051-8.053C44.123,62.091,47.729,65.697,47.729,70.144z"/>
+ </g>
+ <g>
+ <circle style="fill:#FFFFFF;" cx="35.672" cy="67.527" r="3.281"/>
+ </g>
+ <path style="fill:#33363A;" d="M39.676,60.591c-3.245,0-6.113,1.63-7.84,4.111c-0.105,0.143-0.197,0.293-0.286,0.447
+ c-0.897,1.455-1.425,3.163-1.425,4.995c0,5.267,4.284,9.551,9.551,9.551c5.268,0,9.553-4.284,9.553-9.551
+ C49.229,64.876,44.943,60.591,39.676,60.591z M39.676,76.695c-2.721,0-5.058-1.668-6.047-4.035c0.681-0.018,1.511-0.202,2.44-0.394
+ c0.356-0.03,0.699-0.097,1.029-0.201c0.809-0.145,1.675-0.259,2.577-0.259c2.413,0,4.573,0.814,6.049,0.854
+ C44.736,75.027,42.398,76.695,39.676,76.695z"/>
+ <circle style="fill:#FFFFFF;" cx="35.672" cy="67.527" r="1.779"/>
+ <g>
+ <path style="fill:#6D5C4D;" d="M96.155,70.144c0,4.449-3.604,8.051-8.051,8.051c-4.447,0-8.052-3.602-8.052-8.051
+ c0-4.447,3.604-8.053,8.052-8.053C92.551,62.091,96.155,65.697,96.155,70.144z"/>
+ </g>
+ <g>
+ <circle style="fill:#FFFFFF;" cx="84.1" cy="67.527" r="3.28"/>
+ </g>
+ <path style="fill:#33363A;" d="M88.105,60.591c-3.243,0-6.11,1.629-7.837,4.108c-0.107,0.145-0.201,0.298-0.292,0.455
+ c-0.896,1.454-1.423,3.16-1.423,4.99c0,5.267,4.285,9.551,9.552,9.551s9.551-4.284,9.551-9.551
+ C97.655,64.876,93.371,60.591,88.105,60.591z M88.105,76.695c-2.721,0-5.059-1.668-6.048-4.035
+ c0.689-0.019,1.527-0.201,2.471-0.397c0.335-0.03,0.658-0.093,0.97-0.189c0.819-0.148,1.693-0.268,2.607-0.268
+ c2.413,0,4.571,0.814,6.047,0.854C93.163,75.027,90.826,76.695,88.105,76.695z"/>
+ <circle style="fill:#FFFFFF;" cx="84.101" cy="67.527" r="1.779"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/frontend/img/player.svg b/frontend/img/player.svg
new file mode 100644
index 0000000000000000000000000000000000000000..008af1e636dc77780071b49efd37cf2984a8bd74
--- /dev/null
+++ b/frontend/img/player.svg
@@ -0,0 +1,208 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" 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 126.924 126.924" style="enable-background:new 0 0 126.924 126.924;" xml:space="preserve">
+<g>
+ <g>
+ <path style="fill:#7BC7FF;" d="M109.66,29.78c0,1.709-1.385,3.094-3.094,3.094H59.254c-1.709,0-3.094-1.385-3.094-3.094l0,0
+ c0-1.709,1.385-3.095,3.094-3.095h47.312C108.275,26.686,109.66,28.071,109.66,29.78L109.66,29.78z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M106.566,34.374H59.254c-2.533,0-4.594-2.061-4.594-4.594s2.061-4.595,4.594-4.595h47.312
+ c2.533,0,4.594,2.062,4.594,4.595S109.099,34.374,106.566,34.374z M59.254,28.186c-0.879,0-1.594,0.716-1.594,1.595
+ s0.715,1.594,1.594,1.594h47.312c0.879,0,1.594-0.715,1.594-1.594s-0.715-1.595-1.594-1.595H59.254z"/>
+ </g>
+ <g>
+ <path style="fill:#BA8663;" d="M86.346,32.309c0,10.335-8.377,18.712-18.711,18.712h-8.346c-10.334,0-18.711-8.377-18.711-18.712
+ V27.37c0-10.334,8.377-18.711,18.711-18.711h8.346c10.334,0,18.711,8.377,18.711,18.711V32.309z"/>
+ </g>
+ <g>
+ <path style="fill:#A57555;" d="M86.346,37.059c0,10.335-8.377,18.712-18.711,18.712h-8.346c-10.334,0-18.711-8.377-18.711-18.712
+ V32.12c0-10.334,8.377-18.711,18.711-18.711h8.346c10.334,0,18.711,8.377,18.711,18.711V37.059z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M67.635,52.521h-8.346c-11.145,0-20.211-9.067-20.211-20.212V27.37
+ c0-11.145,9.066-20.211,20.211-20.211h8.346c11.145,0,20.211,9.066,20.211,20.211v4.938
+ C87.846,43.453,78.779,52.521,67.635,52.521z M59.289,10.159c-9.49,0-17.211,7.721-17.211,17.211v4.938
+ c0,9.49,7.721,17.212,17.211,17.212h8.346c9.49,0,17.211-7.722,17.211-17.212V27.37c0-9.49-7.721-17.211-17.211-17.211H59.289z"/>
+ </g>
+ <g>
+ <g>
+ <polygon style="fill:#4B6466;" points="63.463,70.753 1.5,89.36 1.5,121.97 125.424,121.97 125.424,89.36 "/>
+ </g>
+ <g>
+ <polygon style="fill:#7BC7FF;" points="63.463,70.753 1.5,89.36 1.5,121.97 125.424,121.97 125.424,89.36 "/>
+ </g>
+ <g>
+ <polygon style="fill:#12B2B2;" points="63.463,87.939 1.5,89.36 1.5,121.97 125.424,121.97 125.424,89.36 "/>
+ </g>
+ <g>
+ <polygon style="fill:#0086FF;" points="63.463,87.939 1.5,89.36 1.5,121.97 125.424,121.97 125.424,89.36 "/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M125.424,123.47H1.5c-0.829,0-1.5-0.672-1.5-1.5V89.36c0-0.662,0.434-1.246,1.068-1.437
+ l61.963-18.607c0.282-0.084,0.581-0.084,0.863,0l61.961,18.607c0.634,0.19,1.068,0.774,1.068,1.437v32.609
+ C126.924,122.798,126.252,123.47,125.424,123.47z M3,120.47h120.924V90.476L63.463,72.319L3,90.477V120.47z"/>
+ </g>
+ </g>
+ <g>
+ <polygon style="fill:#33363A;" points="49.792,54.069 47.162,84.981 63.462,93.101 79.763,84.981 77.133,54.069 "/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M63.462,96.101c-0.264,0-0.527-0.069-0.762-0.208l-16.3-9.62c-0.497-0.293-0.781-0.845-0.732-1.419
+ l2.629-30.911c0.066-0.776,0.715-1.373,1.495-1.373h27.342c0.779,0,1.429,0.597,1.495,1.373l2.629,30.911
+ c0.049,0.574-0.236,1.126-0.732,1.419l-16.301,9.62C63.989,96.031,63.726,96.101,63.462,96.101z M48.737,84.168l14.725,8.69
+ l14.726-8.69l-2.433-28.599H51.169L48.737,84.168z"/>
+ </g>
+ <g>
+ <polygon style="fill:#F9C19B;" points="49.792,54.069 47.162,84.981 63.462,87.939 79.763,84.981 77.133,54.069 "/>
+ </g>
+ <g>
+ <path style="fill:#EFA37D;" d="M77.133,54.069H49.792l-1.5,17.625l10.448,8.549c1.374,1.123,3.049,1.686,4.723,1.686
+ c1.675,0,3.35-0.563,4.723-1.686l10.448-8.549L77.133,54.069z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M63.462,90.151c-0.11,0-0.221-0.013-0.33-0.037l-16.3-3.671c-0.731-0.164-1.229-0.843-1.165-1.59
+ l2.629-30.911c0.066-0.776,0.715-1.373,1.495-1.373h27.342c0.779,0,1.429,0.597,1.495,1.373l2.629,30.911
+ c0.063,0.747-0.434,1.426-1.165,1.59l-16.301,3.671C63.683,90.139,63.572,90.151,63.462,90.151z M48.768,83.805l14.694,3.31
+ l14.695-3.31l-2.402-28.235H51.169L48.768,83.805z"/>
+ </g>
+ <g>
+ <path style="fill:#F9C19B;" d="M41.565,48.591c-4.275,0-7.739-3.465-7.739-7.74c0-4.273,3.464-7.739,7.739-7.739"/>
+ </g>
+ <g>
+ <path style="fill:#F9C19B;" d="M85.359,33.111c4.275,0,7.74,3.466,7.74,7.739c0,4.276-3.465,7.74-7.74,7.74"/>
+ </g>
+ <g>
+ <path style="fill:#A57555;" d="M78.13,25.964l-13.362-2.377c-0.864-0.152-1.748-0.152-2.612,0l-13.361,2.377
+ c-3.559,0.634-6.152,3.728-6.152,7.344v22.01c0,2.239,1.003,4.357,2.736,5.774l13.361,10.932c1.374,1.124,3.049,1.687,4.723,1.687
+ c1.675,0,3.35-0.563,4.723-1.687l13.362-10.932c1.731-1.417,2.735-3.535,2.735-5.774v-22.01
+ C84.282,29.692,81.689,26.598,78.13,25.964z"/>
+ </g>
+ <g>
+ <path style="fill:#F9C19B;" d="M78.13,25.964L64.768,32.44c-0.864-0.154-1.748-0.154-2.612,0l-13.361-6.476
+ c-3.559,0.634-6.152,3.728-6.152,7.344v22.01c0,2.239,1.003,4.357,2.736,5.774l13.361,10.932c1.374,1.124,3.049,1.687,4.723,1.687
+ c1.675,0,3.35-0.563,4.723-1.687l13.362-10.932c1.731-1.417,2.735-3.535,2.735-5.774v-22.01
+ C84.282,29.692,81.689,26.598,78.13,25.964z"/>
+ </g>
+ <g>
+ <path style="fill:#EFA37D;" d="M63.462,73.71c1.675,0,3.35-0.563,4.723-1.687l13.362-10.932c1.731-1.417,2.735-3.535,2.735-5.774
+ v-22.01c0-3.615-2.593-6.71-6.152-7.344l-13.362-2.377c-0.864-0.152-0.442-0.152-1.306,0"/>
+ </g>
+ <path style="fill:#33363A;" d="M94.599,40.851c0-5.095-4.145-9.239-9.24-9.239c-0.288,0-0.554,0.085-0.783,0.226
+ c-0.095-0.019-0.193-0.03-0.294-0.03c-0.829,0-1.5,0.672-1.5,1.5v22.01c0,1.796-0.796,3.478-2.185,4.613L67.235,70.862
+ c-2.121,1.738-5.421,1.738-7.546,0L46.328,59.931c-1.389-1.136-2.186-2.817-2.186-4.613v-22.01c0-0.828-0.671-1.5-1.5-1.5
+ c-0.101,0-0.199,0.011-0.294,0.03c-0.228-0.141-0.495-0.226-0.783-0.226c-5.095,0-9.239,4.145-9.239,9.239
+ c0,4.952,3.919,8.995,8.816,9.219v5.248c0,2.699,1.198,5.228,3.286,6.936l13.361,10.932c1.597,1.306,3.611,2.025,5.673,2.025
+ c2.063,0,4.078-0.72,5.673-2.025l13.363-10.932c2.087-1.709,3.285-4.236,3.285-6.936v-5.248
+ C90.68,49.846,94.599,45.802,94.599,40.851z M35.326,40.851c0-3.298,2.573-5.999,5.816-6.218v12.437
+ C37.899,46.85,35.326,44.148,35.326,40.851z M85.782,47.069V34.633c3.243,0.219,5.816,2.92,5.816,6.218S89.025,46.85,85.782,47.069
+ z"/>
+ <g>
+ <g>
+ <path style="fill:#33363A;" d="M12.221,123.126c-0.672,0-1.284-0.454-1.454-1.136l-5.333-21.307
+ c-0.201-0.804,0.287-1.618,1.091-1.819c0.803-0.198,1.618,0.287,1.819,1.091l5.333,21.307c0.201,0.804-0.287,1.618-1.091,1.819
+ C12.464,123.111,12.341,123.126,12.221,123.126z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M114.703,123.126c-0.121,0-0.243-0.015-0.365-0.045c-0.804-0.201-1.292-1.016-1.091-1.819
+ l5.333-21.307c0.201-0.805,1.014-1.289,1.819-1.091c0.804,0.201,1.292,1.016,1.091,1.819l-5.333,21.307
+ C115.987,122.672,115.375,123.126,114.703,123.126z"/>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#7BC7FF;" d="M74.071,4.954H52.853c-8.108,0-14.681,6.572-14.681,14.68v13.874h50.58V19.634
+ C88.752,11.526,82.18,4.954,74.071,4.954z"/>
+ </g>
+ <g>
+ <path style="fill:#0086FF;" d="M74.071,11.687H52.853c-8.108,0-14.681,6.572-14.681,14.681v7.141h50.58v-7.141
+ C88.752,18.259,82.18,11.687,74.071,11.687z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M88.752,35.008h-50.58c-0.829,0-1.5-0.672-1.5-1.5V19.634c0-8.922,7.259-16.18,16.181-16.18
+ h21.219c8.922,0,16.181,7.258,16.181,16.18v13.874C90.252,34.336,89.581,35.008,88.752,35.008z M39.672,32.008h47.58V19.634
+ c0-7.268-5.913-13.18-13.181-13.18H52.853c-7.268,0-13.181,5.912-13.181,13.18V32.008z"/>
+ </g>
+ </g>
+ <path style="fill:#33363A;" d="M69.462,21.098h-12c-0.829,0-1.5,0.672-1.5,1.5v4.67c0,0.828,0.671,1.5,1.5,1.5h12
+ c0.829,0,1.5-0.672,1.5-1.5v-4.67C70.962,21.77,70.291,21.098,69.462,21.098z"/>
+ </g>
+ <g>
+ <g>
+ <path style="fill:#33363A;" d="M35.024,88.351c-0.704,0-1.332-0.497-1.471-1.213c-0.159-0.813,0.372-1.601,1.186-1.76l12.834-2.5
+ c0.813-0.155,1.601,0.373,1.759,1.186c0.159,0.813-0.372,1.601-1.186,1.76l-12.834,2.5
+ C35.215,88.342,35.119,88.351,35.024,88.351z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M91.9,88.351c-0.095,0-0.191-0.009-0.288-0.027l-12.834-2.5c-0.813-0.159-1.344-0.946-1.186-1.76
+ c0.158-0.813,0.945-1.341,1.759-1.186l12.834,2.5c0.813,0.159,1.344,0.946,1.186,1.76C93.231,87.854,92.604,88.351,91.9,88.351z"
+ />
+ </g>
+ </g>
+ <g>
+ <g>
+ <path style="fill:#FF8F8F;" d="M45.338,114.486c0-10.009,8.115-18.124,18.123-18.124c10.009,0,18.124,8.115,18.124,18.124"/>
+ </g>
+ <g>
+ <path style="fill:#FF1A1A;" d="M45.338,114.486c0-7.662,8.115-13.885,18.123-13.885c10.009,0,18.124,6.223,18.124,13.885"/>
+ </g>
+ <g>
+ <line style="fill:#FFFFFF;" x1="81.585" y1="114.486" x2="45.338" y2="114.486"/>
+ </g>
+ <g>
+ <line style="fill:#DCE6EA;" x1="81.585" y1="114.486" x2="45.338" y2="114.486"/>
+ </g>
+ <path style="fill:#33363A;" d="M63.461,94.862c-10.82,0-19.623,8.804-19.623,19.624c0,0.828,0.671,1.5,1.5,1.5h36.247
+ c0.829,0,1.5-0.672,1.5-1.5C83.085,103.666,74.282,94.862,63.461,94.862z M63.461,97.862c8.66,0,15.786,6.658,16.548,15.124
+ H46.914C47.676,104.521,54.802,97.862,63.461,97.862z"/>
+ <g>
+ <path style="fill:#FFFFFF;" d="M67.698,110.288c2.341,2.339,2.341,6.136,0,8.472c-2.338,2.342-6.133,2.342-8.474,0
+ c-2.339-2.336-2.339-6.133,0-8.472C61.565,107.947,65.36,107.947,67.698,110.288z"/>
+ </g>
+ <g>
+ <path style="fill:#D8E5EA;" d="M59.224,118.76c-2.339-2.336-2.339-6.133,0-8.472c2.341-2.341,6.136-2.341,8.474,0"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M63.462,122.017c-2.001,0-3.883-0.78-5.299-2.196c-1.414-1.412-2.193-3.293-2.193-5.295
+ s0.779-3.884,2.193-5.298c1.416-1.416,3.297-2.195,5.298-2.195s3.882,0.779,5.296,2.194l0,0c1.417,1.416,2.196,3.298,2.195,5.301
+ c0,2.001-0.78,3.882-2.196,5.294c-1.412,1.414-3.292,2.194-5.293,2.195C63.464,122.017,63.463,122.017,63.462,122.017z
+ M63.462,110.032c-1.2,0-2.328,0.468-3.177,1.316c-0.848,0.848-1.314,1.976-1.314,3.177c0,1.199,0.466,2.327,1.314,3.173
+ c0.85,0.851,1.978,1.317,3.178,1.318c0,0,0.001,0,0.001,0c1.199-0.001,2.326-0.469,3.173-1.316
+ c0.85-0.849,1.317-1.975,1.317-3.174c0-1.2-0.467-2.329-1.315-3.177c0-0.001-0.001-0.001-0.001-0.002
+ C65.789,110.5,64.662,110.032,63.462,110.032z"/>
+ </g>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/frontend/img/poison.jpg b/frontend/img/poison.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a057feec350692b24bcb809df61402f8c8dad084
Binary files /dev/null and b/frontend/img/poison.jpg differ
diff --git a/frontend/img/poke.svg b/frontend/img/poke.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8a9dba069fa33430fe43b1b0f612cf34f2f26ccf
--- /dev/null
+++ b/frontend/img/poke.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" 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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#D3D3D3;" d="M500.87,256v0.301C500.703,391.402,391.135,500.87,256,500.87S11.297,391.402,11.13,256.301V256
+ C11.13,120.765,120.765,11.13,256,11.13S500.87,120.765,500.87,256z"/>
+<path style="fill:#FF3962;" d="M500.87,256v0.301H11.13V256C11.13,120.765,120.765,11.13,256,11.13S500.87,120.765,500.87,256z"/>
+<circle style="fill:#D3D3D3;" cx="256" cy="256" r="66.783"/>
+<path d="M437.02,74.98C388.667,26.628,324.381,0,256,0S123.333,26.628,74.98,74.98S0,187.619,0,256s26.628,132.667,74.98,181.02
+ S187.619,512,256,512s132.667-26.628,181.02-74.98S512,324.381,512,256S485.372,123.333,437.02,74.98z M256,489.739
+ c-125.152,0-227.637-98.874-233.468-222.609h156.363c5.419,37.705,37.925,66.783,77.105,66.783s71.687-29.077,77.105-66.783h34.199
+ c6.146,0,11.13-4.984,11.13-11.13s-4.984-11.13-11.13-11.13h-34.188c-1.663-11.62-5.919-22.697-12.564-32.51
+ c-3.448-5.089-10.368-6.421-15.458-2.975c-5.09,3.448-6.422,10.368-2.974,15.458c6.236,9.207,9.532,19.981,9.532,31.157
+ c0,30.687-24.966,55.652-55.652,55.652S200.348,286.687,200.348,256c0-27.774,20.72-51.488,48.198-55.159
+ c6.094-0.814,10.372-6.414,9.559-12.506c-0.815-6.094-6.413-10.366-12.506-9.559c-34.755,4.644-61.785,32.168-66.702,66.094H22.532
+ C28.363,121.135,130.848,22.261,256,22.261s227.637,98.874,233.468,222.609h-77.641c-6.146,0-11.13,4.984-11.13,11.13
+ s4.984,11.13,11.13,11.13h77.641C483.637,390.865,381.152,489.739,256,489.739z"/>
+<path d="M288.772,185.303c-0.1-0.05-0.207-0.101-0.313-0.15c-5.442-2.532-11.944-0.288-14.645,5.117
+ c-2.749,5.497-0.521,12.183,4.979,14.933c0.1,0.05,0.207,0.101,0.313,0.15c1.513,0.705,3.109,1.04,4.681,1.04
+ c4.083,0,8.014-2.254,9.964-6.155C296.5,194.738,294.272,188.052,288.772,185.303z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/frontend/img/pokeball.svg b/frontend/img/pokeball.svg
new file mode 100644
index 0000000000000000000000000000000000000000..90173ace39097142023529342ef83f119a8a0a70
--- /dev/null
+++ b/frontend/img/pokeball.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" 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 511.99 511.99" style="enable-background:new 0 0 511.99 511.99;" xml:space="preserve">
+<polygon style="fill:#ED5564;" points="493.991,200.996 478.991,149.497 437.991,89.998 384.493,45.999 319.493,19.999
+ 263.995,13.499 198.996,21.499 128.997,48.999 78.498,87.498 40.499,135.497 18.999,200.496 18.999,236.995 58.498,240.495
+ 168.996,255.995 187.996,210.996 234.995,184.996 262.495,184.996 287.995,188.996 320.993,210.996 347.993,252.495
+ 496.491,235.995 "/>
+<polygon style="fill:#F5F7FA;" points="340.993,288.495 335.993,293.494 319.493,326.993 288.995,346.993 260.245,349.493
+ 235.995,344.993 220.495,339.993 199.996,326.993 187.496,311.994 174.496,288.495 150.497,283.995 75.498,276.495 18.999,271.995
+ 14.999,284.995 40.499,374.493 107.997,451.991 219.495,497.991 304.994,500.491 367.993,478.491 432.991,427.491 482.491,353.493
+ 505.49,266.667 "/>
+<path style="fill:#434A54;" d="M505.49,238.495l-35.999,3l-123.998,18l-8-8l-7.5-17.5l-13.499-26.5l-37.499-19h-23l-43.101,8.719
+ l-23.398,20.781l-14.5,38h-41.5l-118.497-12l2,22.672l23,4.828l97.92,11.25l34.554,5.375l11.523,27.374l25.5,22.999l23,9.484h45.125
+ c0,0,29.374-17.984,31.718-19.484c2.328-1.5,31.655-39.998,31.655-39.998l12.5-6.5l130.998-15.328l23.498-7.672L505.49,238.495z"/>
+<path style="fill:#F5F7FA;" d="M296.869,266.557c0,21.844-17.718,39.562-39.562,39.562c-21.851,0-39.562-17.718-39.562-39.562
+ s17.711-39.562,39.562-39.562C279.151,226.995,296.869,244.714,296.869,266.557z"/>
+<path d="M491.866,156.341c-12.891-30.468-31.344-57.843-54.844-81.358c-23.515-23.515-50.904-41.953-81.373-54.858
+ C324.087,6.781,290.557,0,255.995,0c-34.554,0-68.085,6.781-99.646,20.125C125.865,33.03,98.482,51.468,74.983,74.983
+ c-23.507,23.515-41.968,50.89-54.858,81.358C6.773,187.918,0,221.433,0,255.995s6.773,68.092,20.125,99.654
+ c12.89,30.484,31.351,57.858,54.858,81.373c23.5,23.5,50.882,41.953,81.366,54.844c31.562,13.358,65.092,20.124,99.646,20.124
+ c34.562,0,68.092-6.766,99.654-20.124c30.469-12.891,57.858-31.344,81.373-54.844c23.5-23.515,41.953-50.889,54.844-81.373
+ c13.343-31.562,20.124-65.092,20.124-99.654C511.99,221.433,505.209,187.918,491.866,156.341z M490.647,255.995
+ c0,0.656,0,1.297-0.016,1.938c-10.406,1.984-30.203,5.438-57.672,8.859c-20.765,2.594-48.326,5.453-81.279,7.531
+ c0.219-2.516,0.312-5.078,0.312-7.656c0-0.984-0.016-1.953-0.047-2.938c68.202-4.234,116.576-11.984,138.545-16.047
+ C490.585,250.448,490.647,253.214,490.647,255.995z M90.06,90.06c44.328-44.311,103.256-68.717,165.935-68.717
+ c62.686,0,121.607,24.406,165.935,68.717c37.233,37.25,60.405,84.795,66.874,136.216c-10.812,2.031-29.906,5.281-55.844,8.516
+ c-21.343,2.672-49.873,5.609-84.061,7.703c-10.734-41.28-48.312-71.827-92.904-71.827c-44.585,0-82.17,30.546-92.913,71.827
+ c-34.179-2.094-62.709-5.031-84.045-7.703c-8.906-1.109-16.992-2.219-24.227-3.281c5.367-44.859,25.437-86.374,57.882-118.826
+ c38.274-38.265,89.171-59.343,143.303-59.343l0,0c2.727,0,5.461-1.046,7.539-3.125c4.172-4.172,4.172-10.922,0-15.094
+ c-2.078-2.078-4.812-3.125-7.539-3.125l0,0l0,0l0,0c-59.835,0-116.084,23.312-158.388,65.608
+ C61.936,133.277,39.795,178.87,33.725,228.15c-4.094-0.688-7.617-1.328-10.531-1.875C29.647,174.856,52.827,127.31,90.06,90.06z
+ M330.649,266.667c0,41.171-33.483,74.67-74.654,74.67s-74.663-33.499-74.663-74.67s33.491-74.671,74.663-74.671
+ C297.166,191.996,330.649,225.495,330.649,266.667z M21.335,255.995c0-2.781,0.062-5.547,0.156-8.312
+ c21.968,4.062,70.35,11.812,138.552,16.047c-0.031,0.984-0.047,1.953-0.047,2.938c0,2.578,0.102,5.141,0.305,7.656
+ c-32.944-2.078-60.506-4.938-81.264-7.531c-27.484-3.422-47.273-6.875-57.679-8.859C21.351,257.292,21.335,256.651,21.335,255.995z
+ M421.93,421.93c-44.328,44.327-103.249,68.733-165.935,68.733c-62.679,0-121.607-24.406-165.935-68.733
+ c-38.64-38.64-62.14-88.405-67.53-142.06c22.937,4.219,72.53,12.03,142.06,16.124c12.422,38.64,48.702,66.671,91.405,66.671
+ c42.702,0,78.982-28.031,91.404-66.671c45.594-2.688,82.623-6.968,109.186-10.78c-6.188,43.029-25.984,82.779-57.28,114.091
+ c-38.28,38.28-89.186,59.358-143.31,59.358l0,0c-2.727,0-5.461,1.047-7.539,3.125c-4.172,4.172-4.172,10.922,0,15.078
+ c2.078,2.094,4.812,3.125,7.539,3.125c59.843,0,116.092-23.297,158.388-65.593c36.171-36.187,58.437-82.53,64.14-132.606
+ c4.141-0.703,7.781-1.328,10.938-1.922C484.069,333.524,460.569,383.29,421.93,421.93z"/>
+<path d="M255.995,213.339c-29.406,0-53.335,23.922-53.335,53.328c0,29.405,23.929,53.326,53.335,53.326s53.343-23.921,53.343-53.326
+ C309.338,237.261,285.401,213.339,255.995,213.339z M255.995,298.666c-17.648,0-32-14.358-32-31.999s14.351-32,32-32
+ c17.641,0,32,14.359,32,32S273.636,298.666,255.995,298.666z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/frontend/img/psychic.jpg b/frontend/img/psychic.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d66f0d74de5406d21c34f823bf1ad688057b306a
Binary files /dev/null and b/frontend/img/psychic.jpg differ
diff --git a/frontend/img/rock.jpg b/frontend/img/rock.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a6ff094a1f7f62cfa8182e4597f304b1c79480d7
Binary files /dev/null and b/frontend/img/rock.jpg differ
diff --git a/frontend/img/ronflex.svg b/frontend/img/ronflex.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e3b2f4f91f6fae3e7c56d9eb6722999ad1e840b8
--- /dev/null
+++ b/frontend/img/ronflex.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" 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 127.543 127.543" style="enable-background:new 0 0 127.543 127.543;" xml:space="preserve">
+<g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#0D5C9E;" d="M11.573,15.268c-7.047,9.68-8.523,22.881-2.655,34.246c5.867,11.371,17.481,17.81,29.458,17.678
+ c7.047-9.684,8.522-22.881,2.654-34.25C35.162,21.574,23.551,15.133,11.573,15.268z"/>
+ </g>
+ <g>
+ <path style="fill:#009BE8;" d="M38.376,67.191c7.047-9.684,8.522-22.881,2.654-34.25c-5.868-11.367-17.479-17.809-29.457-17.674
+ "/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M38.001,68.693c-12.888,0-24.517-7.058-30.416-18.492c-5.963-11.549-4.9-25.273,2.775-35.816
+ c0.279-0.383,0.722-0.611,1.196-0.617c0.132-0.001,0.266-0.002,0.397-0.002c12.883,0,24.508,7.056,30.41,18.487
+ c5.962,11.551,4.899,25.276-2.774,35.821c-0.279,0.383-0.722,0.612-1.196,0.617C38.262,68.692,38.131,68.693,38.001,68.693z
+ M12.348,16.768c-6.604,9.534-7.421,21.747-2.097,32.058c5.32,10.312,15.751,16.721,27.351,16.866
+ c6.602-9.536,7.418-21.75,2.096-32.062C34.375,23.319,23.944,16.911,12.348,16.768z"/>
+ </g>
+ </g>
+ <g>
+ <g>
+ <path style="fill:#0D5C9E;" d="M115.97,15.268c7.047,9.68,8.523,22.881,2.655,34.246c-5.867,11.371-17.48,17.81-29.458,17.678
+ c-7.047-9.684-8.522-22.881-2.654-34.25C92.381,21.574,103.992,15.133,115.97,15.268z"/>
+ </g>
+ <g>
+ <path style="fill:#009BE8;" d="M89.167,67.191c-7.047-9.684-8.522-22.881-2.654-34.25c5.868-11.367,17.479-17.809,29.457-17.674
+ "/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M89.542,68.693c-0.131,0-0.26-0.001-0.392-0.002c-0.474-0.005-0.917-0.234-1.196-0.617
+ c-7.673-10.545-8.736-24.271-2.774-35.82c5.901-11.432,17.528-18.488,30.41-18.488c0.132,0,0.264,0.001,0.397,0.002
+ c0.474,0.006,0.917,0.234,1.196,0.617c7.675,10.543,8.739,24.268,2.775,35.817C114.059,61.635,102.429,68.693,89.542,68.693z
+ M115.195,16.768c-11.597,0.143-22.027,6.551-27.35,16.862s-4.506,22.525,2.096,32.062c11.6-0.145,22.03-6.555,27.351-16.865
+ C122.616,38.515,121.799,26.302,115.195,16.768z"/>
+ </g>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#009BE8;" d="M126.043,68.844c0,26.166-27.88,47.381-62.271,47.381S1.5,95.01,1.5,68.844
+ c0-26.168,27.88-57.525,62.271-57.525S126.043,42.676,126.043,68.844z"/>
+ </g>
+ <g>
+ <path style="fill:#0D5C9E;" d="M126.043,68.844c0,26.166-27.88,47.381-62.271,47.381S1.5,95.01,1.5,68.844
+ c0-26.168,27.88-44.199,62.271-44.199S126.043,42.676,126.043,68.844z"/>
+ </g>
+ <g>
+ <path style="fill:#063B66;" d="M126.043,68.844c0,26.166-27.88,47.381-62.271,47.381S1.5,95.01,1.5,68.844
+ c0-26.17,7.923,23.209,62.271,23.209S126.043,42.674,126.043,68.844z"/>
+ </g>
+ <g>
+ <path style="fill:#F4D7B8;" d="M81.88,38.541L63.771,56.65L45.663,38.541c-22.968,3.551-39.547,14.4-39.547,33.814
+ c0,24.227,25.812,43.869,57.655,43.869s57.655-19.643,57.655-43.869C121.427,52.943,104.848,42.092,81.88,38.541z"/>
+ </g>
+ <g>
+ <path style="fill:#FCE6C8;" d="M104.186,45.525c-6.225-3.365-13.828-5.674-22.307-6.984L63.771,56.65L45.663,38.541
+ c-8.479,1.311-16.082,3.619-22.307,6.984c10.404,7.783,24.669,12.592,40.415,12.592
+ C79.517,58.117,93.782,53.309,104.186,45.525z"/>
+ </g>
+ <g>
+ <path style="fill:#EAC79D;" d="M121.427,72.355c0-2.656-0.321-5.148-0.916-7.488c-7.173,8.18-23.018,27.186-56.739,27.186
+ S14.205,73.047,7.032,64.867c-0.596,2.34-0.916,4.832-0.916,7.488c0,23.469,24.225,42.637,54.687,43.811
+ c0.984,0.035,1.973,0.059,2.968,0.059c0.995,0,1.983-0.023,2.968-0.059C97.202,114.992,121.427,95.824,121.427,72.355z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M63.771,117.725c-32.618,0-59.155-20.353-59.155-45.369c0-18.692,14.496-31.228,40.818-35.297
+ c0.473-0.07,0.952,0.084,1.29,0.422l17.048,17.049L80.819,37.48c0.337-0.339,0.819-0.496,1.29-0.422
+ c26.322,4.069,40.818,16.604,40.818,35.297C122.927,97.372,96.39,117.725,63.771,117.725z M45.143,40.143
+ C30.776,42.484,7.616,49.77,7.616,72.355c0,23.362,25.191,42.369,56.155,42.369s56.155-19.007,56.155-42.369
+ c0-22.586-23.16-29.871-37.527-32.213L64.832,57.711c-0.563,0.563-1.559,0.563-2.121,0L45.143,40.143z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M63.771,117.725C28.608,117.725,0,95.797,0,68.844C0,42.108,28.446,9.818,63.771,9.818
+ s63.771,32.29,63.771,59.025C127.543,95.797,98.935,117.725,63.771,117.725z M63.771,12.818C30.108,12.818,3,43.468,3,68.844
+ c0,25.299,27.262,45.881,60.771,45.881s60.771-20.582,60.771-45.881C124.543,43.468,97.435,12.818,63.771,12.818z"/>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ <g>
+ <path style="fill:#FCE6C8;" d="M76.187,82.021c0,2.613-5.559,1.146-12.416,1.146s-12.416,1.467-12.416-1.146
+ s5.559-4.734,12.416-4.734S76.187,79.408,76.187,82.021z"/>
+ </g>
+ </g>
+ <g>
+ <g>
+ <g>
+ <path style="fill:#33363A;" d="M53.608,73.309c-0.616,0-1.194-0.383-1.413-0.996c-1.032-2.896-3.071-4.771-6.059-5.57
+ c-2.781-0.745-6.21-0.476-9.658,0.755c-0.783,0.278-1.639-0.129-1.917-0.909c-0.279-0.78,0.128-1.638,0.908-1.917
+ c4.016-1.433,8.079-1.728,11.442-0.827c3.942,1.055,6.746,3.635,8.11,7.461c0.278,0.78-0.129,1.639-0.91,1.917
+ C53.945,73.281,53.775,73.309,53.608,73.309z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M73.934,73.309c-0.167,0-0.337-0.027-0.504-0.087c-0.78-0.278-1.187-1.137-0.909-1.917
+ c1.364-3.826,4.169-6.406,8.111-7.461c3.362-0.9,7.426-0.605,11.442,0.827c0.78,0.279,1.187,1.137,0.908,1.917
+ c-0.278,0.781-1.135,1.188-1.917,0.909c-3.448-1.231-6.878-1.501-9.658-0.755c-2.989,0.8-5.028,2.674-6.06,5.57
+ C75.127,72.926,74.55,73.309,73.934,73.309z"/>
+ </g>
+ </g>
+ <path style="fill:#33363A;" d="M84.627,81.144c-0.124-0.06-0.254-0.109-0.397-0.134l-3.514-0.602
+ c-0.391-0.07-0.795,0.023-1.12,0.254s-0.545,0.58-0.612,0.973l-0.581,3.406c-3.229,0.945-8.142,1.754-14.633,1.754
+ s-11.404-0.81-14.633-1.754l-0.581-3.406c-0.067-0.393-0.287-0.742-0.612-0.973s-0.73-0.323-1.12-0.254l-3.514,0.602
+ c-0.143,0.024-0.273,0.074-0.397,0.134c-0.721,0.109-1.276,0.726-1.276,1.477c0,4.929,11.473,7.174,22.132,7.174
+ s22.132-2.245,22.132-7.174C85.903,81.87,85.349,81.253,84.627,81.144z M45.881,83.784c-0.083-0.046-0.144-0.089-0.22-0.133
+ l0.191-0.033L45.881,83.784z M81.69,83.618l0.191,0.033c-0.075,0.045-0.136,0.088-0.22,0.133L81.69,83.618z"/>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/frontend/img/sac.svg b/frontend/img/sac.svg
new file mode 100644
index 0000000000000000000000000000000000000000..92cc27b55e75e6c33e3b43524cb9ffabb1b5f805
--- /dev/null
+++ b/frontend/img/sac.svg
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" 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 126.935 126.935" style="enable-background:new 0 0 126.935 126.935;" xml:space="preserve">
+<g>
+ <g>
+ <path style="fill:#FF1A1A;" d="M21.528,104.172c0,4.52-3.662,8.181-8.182,8.181l0,0c-4.519,0-8.182-3.661-8.182-8.181V80.436
+ c0-4.52,3.662-8.183,8.182-8.183l0,0c4.519,0,8.182,3.663,8.182,8.183V104.172z"/>
+ </g>
+ <g>
+ <path style="fill:#FF7676;" d="M13.346,72.254c-4.519,0-8.182,3.663-8.182,8.183v1.61c0,4.519,3.662,8.181,8.182,8.181
+ s8.182-3.662,8.182-8.181v-1.61C21.528,75.917,17.866,72.254,13.346,72.254z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M13.346,113.853c-5.339,0-9.682-4.343-9.682-9.681V80.437c0-5.339,4.343-9.683,9.682-9.683
+ s9.682,4.344,9.682,9.683v23.735C23.028,109.51,18.685,113.853,13.346,113.853z M13.346,73.754c-3.685,0-6.682,2.998-6.682,6.683
+ v23.735c0,3.684,2.997,6.681,6.682,6.681s6.682-2.997,6.682-6.681V80.437C20.028,76.752,17.031,73.754,13.346,73.754z"/>
+ </g>
+ <g>
+ <path style="fill:#FF1A1A;" d="M121.77,104.172c0,4.52-3.662,8.181-8.183,8.181l0,0c-4.519,0-8.181-3.661-8.181-8.181V80.436
+ c0-4.52,3.662-8.183,8.181-8.183l0,0c4.521,0,8.183,3.663,8.183,8.183V104.172z"/>
+ </g>
+ <g>
+ <path style="fill:#FF7676;" d="M113.587,72.254c-4.519,0-8.181,3.663-8.181,8.183v1.61c0,4.519,3.662,8.181,8.181,8.181
+ c4.521,0,8.183-3.662,8.183-8.181v-1.61C121.77,75.917,118.108,72.254,113.587,72.254z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M113.587,113.853c-5.338,0-9.681-4.343-9.681-9.681V80.437c0-5.339,4.343-9.683,9.681-9.683
+ c5.339,0,9.683,4.344,9.683,9.683v23.735C123.27,109.51,118.926,113.853,113.587,113.853z M113.587,73.754
+ c-3.684,0-6.681,2.998-6.681,6.683v23.735c0,3.684,2.997,6.681,6.681,6.681c3.685,0,6.683-2.997,6.683-6.681V80.437
+ C120.27,76.752,117.272,73.754,113.587,73.754z"/>
+ </g>
+ <g>
+ <path style="fill:#8DE4FF;" d="M66.922,11.39H60.01c-24.771,0-44.926,20.156-44.926,44.928v51.838
+ c0,9.543,7.734,17.279,17.279,17.279h62.205c9.545,0,17.281-7.736,17.281-17.279V56.317C111.85,31.546,91.695,11.39,66.922,11.39z
+ "/>
+ </g>
+ <g>
+ <path style="fill:#00AAFF;" d="M66.922,23.593H60.01c-24.771,0-44.926,20.156-44.926,44.928v39.635
+ c0,9.543,7.734,17.279,17.279,17.279h62.205c9.545,0,17.281-7.736,17.281-17.279V68.52C111.85,43.749,91.695,23.593,66.922,23.593
+ z"/>
+ </g>
+ <g>
+ <path style="fill:#FF1A1A;" d="M95.631,96.541c0,8.091-6.559,14.652-14.65,14.652H45.954c-8.09,0-14.65-6.562-14.65-14.652V85.552
+ c0-8.09,6.561-14.648,14.65-14.648h35.027c8.092,0,14.65,6.559,14.65,14.648V96.541z"/>
+ </g>
+ <g>
+ <path style="fill:#FF7676;" d="M45.954,70.903c-5.369,0-10.051,2.896-12.603,7.205c2.552,4.31,7.233,7.209,12.603,7.209h35.027
+ c5.369,0,10.051-2.899,12.601-7.209c-2.551-4.309-7.232-7.205-12.601-7.205H45.954z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M95.571,58.81c-0.828,0-1.5-0.671-1.5-1.5c0-15.61-12.7-28.31-28.312-28.31h-4.585
+ c-15.61,0-28.311,12.7-28.311,28.31c0,0.829-0.672,1.5-1.5,1.5s-1.5-0.671-1.5-1.5C29.864,40.045,43.91,26,61.174,26h4.585
+ c17.266,0,31.312,14.045,31.312,31.31C97.071,58.138,96.399,58.81,95.571,58.81z"/>
+ </g>
+ <g>
+ <path style="fill:#33363A;" d="M95.85,68.479c-1.287,0-2.334-1.048-2.334-2.336v-2.633c0-1.287,1.047-2.334,2.334-2.334
+ s2.334,1.047,2.334,2.334v2.633C98.184,67.432,97.137,68.479,95.85,68.479z"/>
+ </g>
+ <path style="fill:#33363A;" d="M78.495,11.35C76.623,4.808,70.602,0,63.467,0C56.333,0,50.311,4.807,48.44,11.35
+ C28.42,16.504,13.584,34.71,13.584,56.317v51.838c0,10.355,8.425,18.779,18.779,18.779h62.205c10.356,0,18.781-8.424,18.781-18.779
+ V56.317C113.35,34.711,98.515,16.505,78.495,11.35z M63.467,3c5.185,0,9.647,3.141,11.594,7.619
+ c-2.645-0.47-5.361-0.729-8.139-0.729H60.01c-2.777,0-5.493,0.259-8.137,0.729C53.821,6.141,58.282,3,63.467,3z M110.35,108.155
+ c0,8.701-7.079,15.779-15.781,15.779H32.364c-8.701,0-15.779-7.079-15.779-15.779V56.317c0-19.735,13.236-36.426,31.294-41.69
+ c-0.022,0.337-0.051,0.672-0.051,1.015c0,0.829,0.672,1.5,1.5,1.5s1.5-0.671,1.5-1.5c0-0.612,0.059-1.21,0.143-1.799
+ c2.918-0.62,5.941-0.953,9.041-0.953h6.912c3.101,0,6.124,0.333,9.042,0.954c0.084,0.589,0.143,1.186,0.143,1.798
+ c0,0.829,0.672,1.5,1.5,1.5s1.5-0.671,1.5-1.5c0-0.342-0.03-0.677-0.051-1.014c18.057,5.265,31.294,21.955,31.294,41.69V108.155z"
+ />
+ <g>
+ <path style="fill:#33363A;" d="M80.981,69.403H45.954c-8.905,0-16.15,7.244-16.15,16.148v10.989
+ c0,8.906,7.245,16.152,16.15,16.152h35.027c8.905,0,16.15-7.246,16.15-16.152V85.552C97.131,76.647,89.886,69.403,80.981,69.403z
+ M80.981,109.693H45.954c-4.805,0-9.004-2.599-11.299-6.457h1.98c0.828,0,1.5-0.671,1.5-1.5s-0.672-1.5-1.5-1.5h-3.294
+ c-0.344-1.174-0.538-2.412-0.538-3.695V85.552c0-7.25,5.899-13.148,13.15-13.148h35.027c7.251,0,13.15,5.898,13.15,13.148v10.989
+ c0,1.284-0.193,2.522-0.538,3.695h-3.294c-0.828,0-1.5,0.671-1.5,1.5s0.672,1.5,1.5,1.5h1.98
+ C89.985,107.095,85.786,109.693,80.981,109.693z"/>
+ <path style="fill:#33363A;" d="M51.967,100.236h-7.666c-0.828,0-1.5,0.671-1.5,1.5s0.672,1.5,1.5,1.5h7.666
+ c0.828,0,1.5-0.671,1.5-1.5S52.795,100.236,51.967,100.236z"/>
+ <path style="fill:#33363A;" d="M67.3,100.236h-7.666c-0.828,0-1.5,0.671-1.5,1.5s0.672,1.5,1.5,1.5H67.3
+ c0.828,0,1.5-0.671,1.5-1.5S68.128,100.236,67.3,100.236z"/>
+ <path style="fill:#33363A;" d="M82.632,100.236h-7.666c-0.828,0-1.5,0.671-1.5,1.5s0.672,1.5,1.5,1.5h7.666
+ c0.828,0,1.5-0.671,1.5-1.5S83.46,100.236,82.632,100.236z"/>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/frontend/img/special.png b/frontend/img/special.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bad4ac28250837f257479a3d565a1e705db16f4
Binary files /dev/null and b/frontend/img/special.png differ
diff --git a/frontend/img/status.png b/frontend/img/status.png
new file mode 100644
index 0000000000000000000000000000000000000000..af32a1cdef5bf20d8825f520e946dc03c280ae4c
Binary files /dev/null and b/frontend/img/status.png differ
diff --git a/frontend/img/steel.jpg b/frontend/img/steel.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3136763dda9fed13065dda37fb7f842e0a189e63
Binary files /dev/null and b/frontend/img/steel.jpg differ
diff --git a/frontend/img/water.jpg b/frontend/img/water.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e97653d1b5e7f960d5d5795618d02bc590b4be28
Binary files /dev/null and b/frontend/img/water.jpg differ
diff --git a/frontend/index.html b/frontend/index.html
index 2041ae7b90dc4448794b3f07fc8aa00136f0e698..87407287419acd90a9ef16597c8b38389b24fa34 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,11 +1,53 @@
-<!DOCTYPE html>
-
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>Blagues de Chuck Norris</title>
- </head>
- <body>
- <h1>Blagues de Chuck Norris</h1>
- </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="menu.css">
+ <title>Pokeshop</title>
+</head>
+<body>
+
+ <nav>
+ <div class="shop">
+ <img src="img/player.svg" id="logo">
+ </div>
+
+ <p id="fill">POKESHOP</p>
+ <div class="shop">
+
+ <div id="sac"></div>
+ </div>
+
+
+ </nav>
+
+ <main onscroll="scrollEffect()">
+
+
+
+ <div class="search">
+ <input type="text" name="pokemon" id="poke" onkeyup="search()" placeholder="Search a Pokemon..">
+
+
+ </div>
+
+ <div class="tab" >
+
+ </div>
+
+
+ </main>
+
+
+ <footer>
+
+ </footer>
+
+ <script src="js/index.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/js/index.js b/frontend/js/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f7dae08206d8a0552618c9f77e8395547708e91a
--- /dev/null
+++ b/frontend/js/index.js
@@ -0,0 +1,194 @@
+
+
+
+
+
+
+ let val = 0;
+
+ function Pokemons(){
+
+ return fetch("https://pokeapi.co/api/v2/pokemon/?limit=900")
+ .then(response => response.json())
+ .catch(error => console.error(error));
+
+ }
+
+ function get(that) {
+
+ return fetch(that)
+ .then(response => response.json())
+ .catch(error => console.error(error));
+
+ }
+
+
+ function typeBox(){
+
+ var typeBox = document.createElement("div");
+ typeBox.className = "typebox"
+
+
+ var type1 = document.createElement("img");
+ var type2 = document.createElement("img");
+ type1.className = "type";
+ type2.className = "type";
+
+ typeBox.appendChild(type1);
+ typeBox.appendChild(type2);
+
+ return typeBox;
+
+ }
+
+ function boxGenerator(init,number){
+
+
+
+ for(let i = init+1; i<init+number; i++){
+
+ var tab = document.getElementsByClassName("tab");
+
+ var box = document.createElement("div");
+ box.className = "box";
+
+ var img = document.createElement("img");
+ img.id = "pokemon" + i;
+ img.className = "canvas";
+ img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + i + ".png";
+
+ var name = document.createElement("p");
+ name.className = "names";
+
+ var add = document.createElement("p");
+ add.className = "add";
+ add.innerHTML = "Select";
+
+ var button = document .createElement("button");
+ button.id = i;
+
+
+ button.onclick = function(){
+
+
+
+ let pokemon = document.getElementById(i).parentNode.children;
+
+
+ let name = pokemon[2].innerHTML;
+ let type = pokemon[1].children
+
+
+ let data = [name,type[0].src,type[1].src,"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + i + ".png"]
+
+ console.log(data);
+
+
+ localStorage.setItem("oui",data);
+ window.location.href = "select.html";
+ }
+
+
+
+
+ box.appendChild(img);
+ box.appendChild(typeBox(poke))
+ box.appendChild(name);
+ box.appendChild(add);
+ box.appendChild(button);
+
+ tab[0].appendChild(box);
+
+
+ }
+ }
+
+
+
+ function pokedex(init,number){
+
+ let pokemons = Pokemons();
+
+ boxGenerator(init,number);
+
+ pokemons.then(Poks => {
+
+ let names = document.getElementsByClassName("names");
+ let types = document.getElementsByClassName("type");
+
+ for(let i = init; i<init+number; i++){
+ names[i].innerHTML = i + 1 + " - " + Poks.results[i].name;
+
+ let stats = get(Poks.results[i].url);
+
+ stats.then(stat => {
+
+ if(stat.types.length > 1){
+ types[2*i].src = "img/" + stat.types[0].type.name + ".jpg";
+ types[(2*i)+1].src = "img/" + stat.types[1].type.name + ".jpg";
+
+ }
+ else{
+
+ types[2*i].src = "img/" + stat.types[0].type.name + ".jpg";
+ types[(2*i)+1].style.display = "none";
+ }
+ })
+ }
+ });
+ }
+
+
+ function search() {
+
+ var input, filter, txtValue, names, boxs;
+ input = document.getElementById("poke");
+ filter = input.value.toUpperCase();
+
+ names = document.getElementsByClassName("names");
+ boxs = document.getElementsByClassName("box");
+
+ for (let i = 0; i < names.length; i++) {
+
+
+ txtValue = names[i].textContent || names[i].innerText;
+
+ if (txtValue.toUpperCase().indexOf(filter) > -1) {
+ boxs[i].style.display = "";
+ } else {
+ boxs[i].style.display = "none";
+ }
+ }
+ }
+
+
+
+
+
+ pokedex(0,20);
+
+
+ function scrollEffect(){
+
+ let main = document.getElementsByTagName("main")[0].scrollTop;
+ for(let i = 1; i<48; i++){
+
+ if(main > i*50 && main < i*100 && val<i*50){
+ if(i==47){
+ val = i*50;
+ pokedex(i*19,5);
+ }
+ else{
+ val = i*50;
+ pokedex(i*19,20);
+ }
+ }
+ }
+ }
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/js/product.js b/frontend/js/product.js
new file mode 100644
index 0000000000000000000000000000000000000000..cf279feb7fe41af24921f01a4dadf323f1453ee4
--- /dev/null
+++ b/frontend/js/product.js
@@ -0,0 +1,210 @@
+
+ function typeBox(src1,src2){
+
+ var typeBox = document.createElement("div");
+ typeBox.className = "typebox"
+
+
+ var type1 = document.createElement("img");
+ var type2 = document.createElement("img");
+ type1.className = "type";
+ type2.className = "type";
+
+ type1.src = src1;
+
+ if(src2 == ""){
+ type2.style.display = "none";
+ }
+ else{
+ type2.src = src2;
+ }
+
+
+ typeBox.appendChild(type1);
+ typeBox.appendChild(type2);
+
+ return typeBox;
+
+ }
+
+ function get(that) {
+
+ return fetch(that)
+ .then(response => response.json())
+ .catch(error => console.error(error));
+
+ }
+
+ function getMoves(stat,description,abilities,selection,choice){
+
+
+
+ selection.then(data =>{
+
+ for(let i = 0; i<data.moves.length; i++){
+
+
+ let ability = document.createElement("div");
+ ability.className = "ability";
+
+
+ let type = document.createElement("img");
+ let dmgclass = document.createElement("img");
+ dmgclass.className = "dmgclass";
+
+ get(data.moves[i].move.url).then(move => {
+ type.src = "img/" + move.type.name +".jpg";
+ dmgclass.src = "img/" + move.damage_class.name + ".png";
+
+ ability.onclick = function(){
+
+ description.innerHTML = move.effect_entries[0].effect;
+ stat.innerHTML = "PP: " + move.pp + " - Power: " + move.power + " - Accuracy: " + move.accuracy;
+
+ }
+ })
+
+ let txt = document.createElement("p");
+ txt.innerHTML = data.moves[i].move.name;
+
+ ability.appendChild(type);
+ ability.appendChild(dmgclass);
+ ability.appendChild(txt);
+
+
+ ability.ondblclick = function(){
+
+ if(choice.childNodes.length < 4){
+
+ ability.ondblclick = function(){
+ abilities.appendChild(ability);
+
+ }
+ choice.appendChild(ability);
+ }
+ }
+ abilities.appendChild(ability);
+ }
+ });
+ }
+
+
+ function getFirstMove(stat,description,pokemon){
+
+ pokemon.then(data =>{
+
+ get(data.moves[0].move.url).then(move => {
+
+ description.innerHTML = move.effect_entries[0].effect;
+ stat.innerHTML = "PP: " + move.pp + " - Power: " + move.power + " - Accuracy: " + move.accuracy;
+
+ });
+ });
+ }
+
+
+
+ function displayOfAbilities(main,selection,choice){
+
+ let container = document.createElement("div");
+ container.className = "container";
+
+ let abilities = document.createElement("div");
+ abilities.className = "abilities";
+
+ let description = document.createElement("div");
+ description.className = "description";
+
+
+ let stats = document.createElement("p");
+ let desc = document.createElement("p");
+
+ getFirstMove(stats,desc,selection);
+ getMoves(stats,desc,abilities,selection,choice);
+
+ description.appendChild(stats);
+ description.appendChild(desc);
+
+
+ container.appendChild(abilities);
+ container.appendChild(description);
+
+ main.appendChild(container);
+
+ }
+
+
+
+ function gotSelect(){
+
+ /** Création de la box du pokemon */
+ let data = localStorage.getItem("oui").split(',');
+ let pokemon = data[0].split(' ')[2];
+ let number = data[0].split(' ')[0];
+ let main = document.getElementById("selected");
+ let selection = get("https://pokeapi.co/api/v2/pokemon/" + pokemon);
+
+
+ let box = document.createElement("div");
+ box.className = "box";
+
+ let link = document.createElement("a");
+ link.className = "gif";
+ link.href = "http://pokemondb.net/pokedex/" + pokemon;
+
+ let img = document.createElement("img");
+ img.id = "select";
+ img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png";
+ img.alt = pokemon;
+
+ let button = document.createElement("p");
+ button.className = "shiny";
+ button.innerHTML = "Shiny";
+
+
+ button.onclick = function(){
+
+ if(img.src == "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png"){
+ img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/" + number + ".png";
+ button.style.backgroundColor = "black"
+ button.style.color = "white";
+
+ }
+ else{
+ img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png"
+ button.style.backgroundColor = "white"
+ button.style.color = "black";
+ }
+ }
+
+ link.appendChild(img);
+
+
+
+ let name = document.createElement("p");
+ name.className = "names";
+ name.innerHTML = pokemon;
+
+
+ let choice = document.createElement("div");
+ choice.className = "choice";
+
+
+
+ box.appendChild(link);
+ box.appendChild(typeBox(data[1],data[2]));
+ box.appendChild(name);
+ box.appendChild(button);
+ box.appendChild(choice);
+ main.appendChild(box);
+
+
+ /** Création des box des capacités */
+ displayOfAbilities(main,selection,choice);
+
+ }
+
+
+
+
+ gotSelect();
\ No newline at end of file
diff --git a/frontend/js/slider.js b/frontend/js/slider.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/menu.css b/frontend/menu.css
new file mode 100644
index 0000000000000000000000000000000000000000..1ca252ff7f1c58135d22a2dfc1a0a8f1b366d7c9
--- /dev/null
+++ b/frontend/menu.css
@@ -0,0 +1,104 @@
+@font-face {
+ font-family: gb;
+ src: url(font/PokemonGb-RAeo.ttf);
+}
+
+
+@font-face {
+ font-family: title;
+ src: url(font/LMS\ Pokemon\ Master\ Solid.ttf);
+}
+
+*{
+ margin:0;
+ padding: 0;
+ list-style: none;
+ overflow-x: hidden;
+ font-family: 'Titillium Web', sans-serif;
+
+}
+
+*::-webkit-scrollbar {
+ width: 4px;
+ }
+
+ *::-webkit-scrollbar-thumb {
+ background-color: rgb(0, 0, 0);
+ }
+
+
+html {
+ font-size: 50%;
+ box-sizing: border-box;
+ scroll-behavior: smooth;
+}
+
+body{
+ display: flex;
+ flex-direction: column;
+}
+
+nav {
+
+ display: flex;
+ flex-direction: row;
+ width: 100vw;
+ height: 15vh;
+ background-color: rgb(255, 83, 64);
+ overflow-y: hidden;
+
+}
+
+#fill {
+ width: 80vw;
+ height: 15vh;
+ padding-top: 2.5vh;
+
+ text-align: center;
+ font-size: 10vh;
+ font-family: title;
+ color: rgb(11, 2, 61);
+
+}
+
+
+
+#logo{
+
+ width: 7.5vh;
+ height: 7.5vh;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+
+
+
+}
+
+.shop{
+
+ width: 10vw;
+
+}
+
+#sac {
+
+ width: 5vh;
+ height: 5vh;
+ position: relative;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%,-50%);
+ background-image: url("img/sac.svg");
+
+}
+
+#sac::after {
+
+ content: "-";
+ font-size: medium;
+ background-image: url(img/pokeball.svg);
+ border-radius: 10px 10px;
+
+}
\ No newline at end of file
diff --git a/frontend/select.css b/frontend/select.css
new file mode 100644
index 0000000000000000000000000000000000000000..817ec1efd3812856d38e6724255f7efeb7cf6a55
--- /dev/null
+++ b/frontend/select.css
@@ -0,0 +1,240 @@
+main {
+ display: flex;
+ flex-direction:column ;
+
+}
+
+
+#selected{
+ display: flex;
+ flex-direction: row;
+ margin-top: 5vh;
+}
+
+
+.box {
+ justify-content: center;
+ display: flex;
+ flex-direction: column;
+ width: 25vw;
+ height: 30vw;
+ background-color: rgb(255, 255, 255);
+ border: gray 2px groove;
+ border-radius: 5px 5px;
+ margin-left: 2.5vw;
+ margin-right: 2.5vw;
+}
+
+
+.gif {
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 25vh;
+ height: 25vh;
+ border: gray 2px groove;
+ border-radius: 5px;
+ overflow-y: hidden;
+}
+
+.gif > img{
+
+
+
+ background-color: white;
+ width: 100%;
+ height: 100%;
+
+}
+
+
+.names {
+
+
+ font-weight: bold;
+ margin-bottom: 2.5%;
+ font-size: 3vh;
+ text-align: center;
+ color: rgb(11, 2, 61);
+ border-radius: 10px 10px;
+}
+
+button {
+ width: 50%;
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
+ border: none;
+ background-image: url(img/poke.svg);
+ background-color: rgba(0, 0, 0, 0);
+ font-size: small;
+ width: 15.2%;
+ height: 15.2%;
+ transition: 0.1s linear;
+ outline: none;
+ cursor: pointer;
+
+
+}
+
+
+button:hover {
+
+ width: 16.5%;
+ height: 16.5%;
+
+}
+
+.add {
+
+ text-align: center;
+ font-size: 1.5vh;
+ margin-bottom: 5px;
+ color: rgb(11, 2, 61);
+
+}
+
+
+.typebox {
+
+ display: flex;
+
+ justify-content: center;
+ width:100%;
+ height: 35px;
+
+}
+
+.type {
+
+ width: 40px;
+ height: 20px;
+ padding-top: 0.5vh;
+ margin-left: 5px;
+ margin-right: 2px;
+
+
+}
+
+.container {
+ display: flex;
+ flex-direction: row;
+
+ width: 40vw;
+ margin-left: 2.5vw;
+ margin-right: 2.5vw;
+
+}
+
+.description {
+
+ font-size: 2vh;
+ font-weight: bold;
+ width: 70%;
+ height: 15vw;
+ border: solid 2px rgba(150, 150, 150, 1);
+ background-color: rgba(240, 240, 240, 0.5);
+
+}
+
+.description > p {
+
+ margin-top: 1%;
+ margin-left: 1%;
+ border-bottom: 1px solid rgba(150, 150, 150, 1);
+
+}
+
+.choice {
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
+ display: block;
+ margin-top: 2%;
+ width: 15vw;
+ height: 11.5vh;
+ overflow-y: hidden;
+ border: gray 2px groove;
+
+}
+
+.abilities{
+ display: block;
+
+ margin-right: 1%;
+ width: 40%;
+ height: 30vw;
+ border: solid 2px rgba(150, 150, 150, 1);
+ background-color: white;
+
+}
+
+.abilities::-webkit-scrollbar {
+ width: 3px;
+}
+
+.abilities::-webkit-scrollbar-thumb {
+ background-color: gray;
+}
+
+.ability {
+
+ display: flex;
+ flex-direction: row;
+ height: 2.5vh;
+ margin-left: 0.5%;
+ margin-top: 0.5%;
+ margin-bottom: 1%;
+ background-color: rgb(255, 255, 255);
+ border-radius: 2px 2px;
+ text-align: center;
+ overflow-y: hidden;
+ cursor: pointer;
+}
+
+.ability:hover {
+
+ background-color: rgb(231, 231, 231);
+
+}
+
+.ability > p {
+
+ position: relative;
+
+ left: 15%;
+ overflow-y: hidden;
+ font-size: 1.8vh;
+ font-weight: bold;
+
+}
+
+.ability > img {
+
+ width: 40px;
+ height: 100%;
+}
+
+.dmgclass{
+
+ position: relative;
+ left: 1%;
+}
+
+
+.shiny {
+ font-size: 1.5vh;
+ font-weight: bold;
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 15%;
+ background-color: white;
+ height: 2.2vh;
+ border: gray groove 2px;
+ text-align: center;
+ cursor: pointer;
+ border-radius: 2px 2px;
+ overflow-y: hidden;
+
+}
\ No newline at end of file
diff --git a/frontend/select.html b/frontend/select.html
new file mode 100644
index 0000000000000000000000000000000000000000..cf928294d66faa8f2235c6f6daa4c53a4a97c295
--- /dev/null
+++ b/frontend/select.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200&display=swap" rel="stylesheet">
+ <title>Document</title>
+
+ <link rel="stylesheet" href="menu.css">
+ <link rel="stylesheet" href="select.css">
+</head>
+<body>
+
+ <nav>
+ <div class="shop">
+ <img src="img/player.svg" id="logo">
+ </div>
+
+ <p id="fill">POKESHOP</p>
+ <div class="shop">
+
+ <div id="sac"></div>
+ </div>
+ </nav>
+
+ <main>
+
+ <div id="selected">
+
+ </div>
+
+
+
+ </main>
+
+
+
+ <script src="js/product.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/style.css b/frontend/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..cdfeb364d54d6a998d35c1c5ad12e25a206f728a
--- /dev/null
+++ b/frontend/style.css
@@ -0,0 +1,137 @@
+
+
+
+
+main{
+ height: 85vh;
+ width: 100vw;
+ background-color: whitesmoke;
+}
+
+.search {
+ display: flex;
+ width: 100vw;
+ height: 15vh;
+}
+
+input {
+
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ height: 7.5vh;
+ width: 50vw;
+ border-radius: 10px 10px;
+ border: solid rgba(135, 135, 135, 0.5);
+ font-size: large;
+ padding-left: 2vh;
+ outline: none;
+
+}
+
+input:focus {
+ outline: none;
+ color: rgb(255, 83, 64);
+}
+
+
+.tab {
+ display: grid;
+ grid-template-columns: auto auto auto auto auto;
+ gap:40px;
+ justify-content: center;
+ width: 100vw;
+
+
+}
+
+.box {
+ justify-content: center;
+ display: flex;
+ flex-direction: column;
+ width: 15vw;
+ height: 15vw;
+ background-color: rgb(255, 255, 255);
+ border-radius: 10px 10px;
+
+}
+
+
+.canvas {
+
+ width: 50%;
+ height: 50%;
+
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
+ border-radius: 100%;
+}
+
+
+.names {
+
+ margin-bottom: 5%;
+ font-size: 1.5vh;
+ text-align: center;
+ color: rgb(11, 2, 61);
+ border-radius: 10px 10px;
+}
+
+button {
+ width: 50%;
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
+ border: none;
+ background-image: url(img/poke.svg);
+ background-color: rgba(0, 0, 0, 0);
+ font-size: small;
+ width: 15.2%;
+ height: 15.2%;
+ transition: 0.1s linear;
+ outline: none;
+ cursor: pointer;
+
+
+}
+
+
+button:hover {
+
+ width: 16.5%;
+ height: 16.5%;
+
+}
+
+.add {
+
+ text-align: center;
+ font-size: 1.5vh;
+ margin-bottom: 5px;
+ color: rgb(11, 2, 61);
+
+}
+
+
+.typebox {
+
+ display: flex;
+
+ justify-content: center;
+ width:100%;
+ height: 26px;
+
+}
+
+.type {
+
+ width: 30px;
+ height: 15px;
+ padding-top: 0.5vh;
+ margin-left: 5px;
+ margin-right: 2px;
+
+
+}
\ No newline at end of file