-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (127 loc) · 11.2 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en" class="w-full min-h-screen">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Gotta Drink'em All!">
<link rel="shortcut icon" href="./assets/images/Ph-Favicon-square.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jersey+10&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik+Mono+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/CSS/style.css">
<link rel="stylesheet" href="./assets/CSS/select.css">
<script defer src="https://kit.fontawesome.com/fef0315d16.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.tailwindcss.com"></script>
<script defer src="./assets/js/logic.js"></script>
<script defer src="./assets/js/select.js"></script>
<title>Pokeholic | Gotta Drink'em All!</title>
</head>
<body class="flex flex-col justify-between relative">
<div class="front-bg-filter z-0"></div>
<header class="w-full flex flex-row justify-center items-start relative z-20">
<div class="brand-bg absolute h-1/2 w-full top-0 z-0"></div>
<div class="font-brand-title color-brand title-brand flex flex-row flex-nowrap justify-start header-div z-10 h-5/6 md:pl-16 pl-6 mr-auto">
<h1 class="letter front" data-rotation="-.2">P</h1>
<h1 class="letter back" data-rotation="-.1">o</h1>
<h1 class="letter middle" data-rotation="-.05">k</h1>
<h1 class="letter front" data-rotation=".05">E</h1>
<h1 class="letter middle" data-rotation="-.05">h</h1>
<h1 class="letter back" data-rotation=".1">ó</h1>
<h1 class="letter front" data-rotation=".1">L</h1>
<h1 class="letter middle" data-rotation=".05">i</h1>
<h1 class="letter back" data-rotation=".2">c</h1>
</div>
<div class="flex justify-end items-center header-div z-10 h-4/6 div-dex md:pr-16 pr-2 ml-auto">
<button id="btn-dex" class="flex items-center justify-center py-4 px-6 text-white/75">
<h1 class="font-brand-title text-4xl booze-dex pl-1 pr-8">BOOZE-DEX</h1>
<i class="fa-regular fa-game-console-handheld md:text-6xl lg:text-7xl text-5xl"></i>
</button>
</div>
</header>
<main class="flex z-10 relative justify-center items-center w-full">
<div id="loading-filter-div" class="absolute hidden justify-center items-center w-screen h-screen z-50">
<div id="loading-filter" class="bg-black/70 h-full w-full"></div>
<i class="fa-light fa-glass-empty absolute text-slate-50 opacity-90 animate-pulse"></i>
<div class="poke-ball w-20 h-20 rounded-full absolute animate-pulse"></div>
<div class="poke-ball w-20 h-20 rounded-full absolute animate-ping"></div>
</div>
<section id="left-screen" class="bg-poketype flex flex-col items-center justify-around h-full relative rounded-3xl py-4 z-20 animate-pulse">
<div class="stats flex flex-col w-11/12 items-center justify-center px-4 py-3 rounded-3xl border-4 border-black">
<div id="poke-preview-div" class="relative flex justify-center items-center mb-4">
<img id="poke-gif" class="z-10" src="" alt="">
<img id="poke-gif-shadow" class="z-0 absolute" src="" alt="">
</div>
<div class="meter flex flex-row font-brand-title w-full"><h3 class="px-1 w-3/12">HP </h3><div class="stat w-7/12 border-2 border-slate-300 m-1"><div class="level h-full"></div></div><p class="extra w-2/12 text-center"></p></div>
<div class="meter flex flex-row font-brand-title w-full"><h3 class="px-1 w-3/12">ATK </h3><div class="stat w-7/12 border-2 border-slate-300 m-1"><div class="level h-full"></div></div><p class="extra w-2/12 text-center"></p></div>
<div class="meter flex flex-row font-brand-title w-full"><h3 class="px-1 w-3/12">DEF </h3><div class="stat w-7/12 border-2 border-slate-300 m-1"><div class="level h-full"></div></div><p class="extra w-2/12 text-center"></p></div>
<div class="meter flex flex-row font-brand-title w-full"><h3 class="px-1 w-3/12">SP.ATK</h3><div class="stat w-7/12 border-2 border-slate-300 m-1"><div class="level h-full"></div></div><p class="extra w-2/12 text-center"></p></div>
<div class="meter flex flex-row font-brand-title w-full"><h3 class="px-1 w-3/12">SP.DEF</h3><div class="stat w-7/12 border-2 border-slate-300 m-1"><div class="level h-full"></div></div><p class="extra w-2/12 text-center"></p></div>
<div class="meter flex flex-row font-brand-title w-full"><h3 class="px-1 w-3/12">SPEED </h3><div class="stat w-7/12 border-2 border-slate-300 m-1"><div class="level h-full"></div></div><p class="extra w-2/12 text-center"></p></div>
</div>
<div class="text-white px-4 py-2 div-name div-poke-name text-7xl relative">
<h1 id="poke-name" class="font-name text-center"> </h1>
</div>
</section>
<section id="showroom-section" class="flex flex-col items-center h-full relative">
<div id="btns-number" class="flex flex-row items-start bg-teal-950/40 hover:bg-teal-950/90 px-5 py-1 rounded-3xl border-2 border-teal-200/70 text-teal-200/70 hover:border-teal-200 absolute top-0 z-40 animate-pulse">
<div class="flex flex-col items-center">
<button id="poke-num-selector" class="font-brand-title text-4xl w-fit hover:text-teal-100 pl-16 pr-16"></button>
<div id="div-options" class="flex-col poke-num-option font-brand-title text-4xl w-full border-t border-t-teal-100/50 pt-1 mb-2 px-5 hover:text-teal-100 overflow-y-scroll"></div>
</div>
<button id="btn-options" class="font-brand-title text-4xl w-fit pl-1 hover:text-teal-100 rotate-90">></button>
</div>
<div class="showroom-floor absolute animate-pulse"></div>
<div class="btn-scroller-div z-40 px-3 border-4 border-x-teal-200 border-y-teal-200/0 hover:border-x-teal-100 rounded-full absolute animate-pulse">
<div id="btns-scroller" class="flex flex-nowrap bg-teal-950/90 px-10 py-2 rounded-full border-4 border-teal-200 text-teal-200 hover:border-teal-100">
<button id="btn-back" class="font-brand-title text-5xl w-fit mr-3 hover:text-teal-100"><</button>
<button id="btn-select" class="font-brand-title text-5xl w-fit mx-10 hover:text-teal-100">SELECT</button>
<button id="btn-next" class="font-brand-title text-5xl w-fit ml-3 hover:text-teal-100">></button>
</div>
</div>
<section id="vs-screen" class="flex flex-col w-full h-full absolute">
<div id="ls-mobile-div" class="h-1/2">
<div id="left-screen-mobile" class="h-full relative flex items-center">
<div class="flex items-center name-mobile-div h-1/2 w-2/3 relative">
<h1 class="font-poke-mobile text-center absolute text-7xl">Pokemon</h1>
<h1 id="poke-name-mobile" class="names-mobile font-p-name-mobile text-center absolute text-7xl"></h1>
</div>
<div class="flex w-1/3 relative justify-center pr-2">
<img id="poke-gif-mobile" class="z-10" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/showdown/6.gif" alt="">
<img id="poke-gif-shadow-mobile" class="z-0 absolute" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/showdown/6.gif" alt="">
</div>
</div>
</div>
<div id="rs-mobile-div" class="h-1/2">
<div id="right-screen-mobile" class="h-full relative flex flex-col items-start justify-center">
<div class="flex flex-row items-center drink-mobile-div h-1/2 w-5/6 relative">
<h1 class="font-drink-mobile text-7xl absolute w-full">Drink</h1>
<h1 id="drink-name-mobile" class="names-mobile font-d-name-mobile text-7xl absolute w-full"></h1>
</div>
</div>
</div>
</section>
<div id="showroom" class="flex flex-col items-center justify-end w-full h-full relative z-10"></div>
</section>
<section id="right-screen" class="bg-poketype-2 flex flex-col items-center justify-around h-full rounded-3xl py-4 z-20 animate-pulse">
<div class="drink-stats flex flex-col w-11/12 items-center justify-center px-4 py-3 rounded-3xl border-4 border-black">
<i id="drink-icon" class="text-7xl mb-7 mt-4"></i>
<div class="meter flex flex-row font-brand-title w-full"><h3 class="px-1 w-3/12">DIFF.LV</h3><div class="stat w-7/12 border-2 border-slate-300 m-1"><div class="level h-full"></div></div><p class="extra w-2/12 text-center"></p></div>
<div class="meter flex flex-row font-brand-title w-full"><h3 class="px-1 w-3/12">INGRED.</h3><div class="stat w-7/12 border-2 border-slate-300 m-1"><div class="level h-full"></div></div><p class="extra w-2/12 text-center"></p></div>
</div>
<div class="text-white px-4 py-2 text-7xl div-name div-drink-name">
<h1 id="drink-name" class="font-drink text-center"> </h1>
</div>
</section>
</main>
<footer class="flex flex-col items-center justify-between brand-bg border-t-slate-500 border-t-2 z-20">
<a id="GH-link" href="https://github.com/Rod-Freedom/P1-Pokeholic" target="_blank" class="h-1/2 flex flex-row justify-center items-center text-2xl w-fit text-slate-300 hover:text-slate-50">
<i class="fa-brands fa-github"></i>
<h3 class="ml-3 font-content font-light underline-offset-4 link-text"><span class="font-bold">PokEhólic</span> GitHub</h3>
</a>
<div class="flex flex-row justify-between items-center w-full px-10 h-2/5">
<a class="font-content font-bold hover:underline underline-offset-4 text-slate-300 hover:text-slate-50" href="./credits.html">Credits</a>
<p class="font-content text-slate-300 text-end">by <span class="text-xl">®</span>PokEmons Anonymous. <span class="text-xl">©</span>2024</p>
</div>
</footer>
</body>
</html>