-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
84 lines (77 loc) · 3.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!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" />
<!--tab label-->
<title>PokeBuilder</title>
<!--tab icon-->
<link rel="icon" href="./assets/images/pikachu.png" />
<!-- tailwind css link -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<!-- Content -->
<body class="mx-5">
<div class="container mx-auto items-center justify-center mt-8 lg:w-1/4">
<img class="" src="./assets/images/2560px-International_Pokémon_logo.svg.png" alt="pokemon-logo" />
</div>
<main class="text-center max-w-md container mx-auto items-center justify-center">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block xl:inline text-yellow-400">Generate</span>
<span class="block text-blue-600 xl:inline">Pokemon!</span>
</h1>
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Welcome to PokeBuilder! Search for any pokemon from any of the games. Create a team of 6 for your next play through!
</p>
<form id="submitListener" class="mb-3">
<input type="text" class="shadow text-center appearance-none w-full my-3 py-2 px-3 text-gray-700 placeholder:italic" placeholder="Enter the Pokemon name" required="" id="characterName" />
<div class="mb-3 sm:grid sm:grid-cols-3 sm:gap-2">
<div class="mt-3 sm:mt-0">
<button class="w-full flex justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black-900 bg-indigo-300 hover:bg-indigo-400 md:py-4 md:text-lg md:px-10" id="btnGenerate">
Generate
</button>
</div>
<div class="sm:order-first mt-3 sm:mt-0">
<button id="saveListener" type="button" href="#" class="w-full flex justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black-800 bg-yellow-200 hover:bg-yellow-300 md:py-4 md:text-lg md:px-10" id="saveBtn">
Save
</button>
</div>
<div class="mt-3 sm:mt-0">
<button id="deleteListener" type="button" href="#" class="w-full flex justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black-500 bg-red-400 hover:bg-red-500 md:py-4 md:text-lg md:px-10" id="deleteBtn">
Delete
</button>
</div>
</div>
<label class="text-gray-500 font-bold">
<input
class="mr-2 leading-tight"
type="checkbox"
id="renamePokemon"
/>
<span class="text-sm"
>Do you want to give your Pokemon a Random Nickname?</span
>
</label>
</form>
<!--localStorage Div-->
</main>
<!-- stacked card -->
<!--Pokemon Name, Image & Details-->
<div id="invisible" class="mt-8 invisible max-w-md container mx-auto text-center justify-center">
<div id="pokeDetails" class="w-full font-bold text-xl mb-2"></div>
<div id="pokeNickname" class="w-full font-semibold font-style: italic text-xl mb-2"></div>
<ul id="abilities"></ul>
<img id="charcterImg" class="w-full" src="" alt="pokemom-logo" />
</div>
<div class="justify-space-between w-full flex justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md">
<div>
<h2>Saved Searches:</h2>
<ul id="searchHistory">
</ul>
</div>
</div>
<!-- link to javascript file -->
<script src="./assets/js/script.js"></script>
</body>
</html>