Hugging Face's logo

Spaces:
Azivandor
/
Guide
Running

App Files Community
Azivandor commited on
Commit
b0928aa
·
verified ·
1 Parent(s): 40fa4f6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +86 -58
index.html CHANGED
@@ -4,7 +4,6 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Master Pokédex</title>
7
- <!-- This links your page to the style file we just created! -->
8
  <link rel="stylesheet" href="style.css">
9
  </head>
10
  <body>
@@ -13,73 +12,103 @@
13
  <h1>🔴 The Master Pokédex</h1>
14
  <div class="subtitle">Bypassing basic trivia to deliver exact competitive stats, catch mechanics, and regional lore.</div>
15
 
16
- <!-- REGION SELECTOR NAV -->
17
  <div class="nav-bar">
18
  <button class="nav-btn active" onclick="filterRegion('all', event)">All Regions</button>
19
  <button class="nav-btn" onclick="filterRegion('kanto', event)">Kanto</button>
20
- <button class="nav-btn" onclick="filterRegion('alola', event)">Alola / Special Forms</button>
21
  </div>
22
 
23
- <!-- MAIN DEX GRID -->
24
- <div class="pokedex-grid">
25
-
26
- <!-- PIKACHU CARD -->
27
- <div class="pokemon-card" data-region="kanto">
28
- <div class="pkmn-header">
29
- <h2 class="pkmn-name">Pikachu</h2>
30
- <span class="pkmn-number">#0025</span>
31
- </div>
32
- <div class="type-container">
33
- <span class="type-badge type-electric">Electric</span>
34
- </div>
35
- <p style="margin: 0 0 10px 0; color: #94a3b8; font-size: 0.95rem;">The Mouse Pokémon. Stores electricity in its cheek pouches when sleeping.</p>
36
-
37
- <button class="nav-btn" style="padding: 5px 12px; font-size: 0.8rem;" onclick="toggleData('data-25', event)">View Deep Data ↓</button>
38
-
39
- <div id="data-25" class="deep-data hidden">
40
- <div class="stat-line"><span class="stat-name">Base HP:</span> <span class="stat-val">35</span></div>
41
- <div class="stat-line"><span class="stat-name">Base Speed:</span> <span class="stat-val">90</span></div>
42
- <div class="stat-line"><span class="stat-name">Catch Rate:</span> <span class="stat-val">190 (24.8% full HP Pokéball)</span></div>
43
- <div class="stat-line"><span class="stat-name">Hidden Ability:</span> <span class="stat-val">Lightning Rod</span></div>
44
- <div class="special-note">
45
- ⚡ <strong>Special Mechanic:</strong> If Pikachu holds a <em>Light Ball</em> item, its physical Attack and special Attack stats are completely doubled in battle.
46
- </div>
47
- </div>
48
- </div>
49
-
50
- <!-- VULPIX (ALOLAN FORM EXAMPLE) -->
51
- <div class="pokemon-card" data-region="alola">
52
- <div class="pkmn-header">
53
- <h2 class="pkmn-name">Alolan Vulpix</h2>
54
- <span class="pkmn-number">#0037</span>
55
- </div>
56
- <div class="type-container">
57
- <span class="type-badge type-ice">Ice</span>
58
- </div>
59
- <p style="margin: 0 0 10px 0; color: #94a3b8; font-size: 0.95rem;">The Fox Pokémon. Adapted to snow-covered mountains to avoid competitors.</p>
60
-
61
- <button class="nav-btn" style="padding: 5px 12px; font-size: 0.8rem;" onclick="toggleData('data-37', event)">View Deep Data ↓</button>
62
-
63
- <div id="data-37" class="deep-data hidden">
64
- <div class="stat-line"><span class="stat-name">Base HP:</span> <span class="stat-val">38</span></div>
65
- <div class="stat-line"><span class="stat-name">Base Speed:</span> <span class="stat-val">65</span></div>
66
- <div class="stat-line"><span class="stat-name">Evolution:</span> <span class="stat-val">Ice Stone ➔ Alolan Ninetales</span></div>
67
- <div class="stat-line"><span class="stat-name">Hidden Ability:</span> <span class="stat-val">Snow Warning (Spawns Hail/Snow)</span></div>
68
- <div class="special-note">
69
- ❄️ <strong>Regional Lore:</strong> Originally brought to Alola by humans, this variant migrated to high mountain peaks to escape other Pokémon, permanently shifting from Fire to Ice.
70
- </div>
71
- </div>
72
- </div>
73
-
74
  </div>
75
  </div>
76
 
77
- <!-- JAVASCRIPT: Panel switching logic -->
78
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  function toggleData(id, event) {
80
  event.stopPropagation();
81
- const panel = document.getElementById(id);
82
- panel.classList.toggle('hidden');
83
  }
84
 
85
  function filterRegion(region, event) {
@@ -97,6 +126,5 @@
97
  });
98
  }
99
  </script>
100
-
101
  </body>
102
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Master Pokédex</title>
 
7
  <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
 
12
  <h1>🔴 The Master Pokédex</h1>
13
  <div class="subtitle">Bypassing basic trivia to deliver exact competitive stats, catch mechanics, and regional lore.</div>
14
 
15
+ <!-- NAVIGATION CONTROLS -->
16
  <div class="nav-bar">
17
  <button class="nav-btn active" onclick="filterRegion('all', event)">All Regions</button>
18
  <button class="nav-btn" onclick="filterRegion('kanto', event)">Kanto</button>
 
19
  </div>
20
 
21
+ <!-- DYNAMIC GRID TARGET -->
22
+ <div class="pokedex-grid" id="dex-grid">
23
+ <!-- JavaScript will safely drop your massive cards right here! -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </div>
25
  </div>
26
 
 
27
  <script>
28
+ // Load the external database spreadsheet automatically
29
+ fetch('pokemon.json')
30
+ .then(response => response.json())
31
+ .then(data => {
32
+ const grid = document.getElementById('dex-grid');
33
+ grid.innerHTML = data.map(pkmn => `
34
+ <div class="pokemon-card" data-region="${pkmn.region}" style="grid-column: 1 / -1; max-width: 100%;">
35
+ <div class="pkmn-header">
36
+ <h2 class="pkmn-name" style="font-size: 2rem;">${pkmn.name}</h2>
37
+ <span class="pkmn-number" style="font-size: 1.5rem;">${pkmn.number}</span>
38
+ </div>
39
+
40
+ <div class="type-container">
41
+ <span class="type-badge type-${pkmn.type1.toLowerCase()}">${pkmn.type1}</span>
42
+ </div>
43
+
44
+ <p style="color: #cbd5e1; font-size: 1.05rem; margin-bottom: 20px;">
45
+ <strong>Official Category:</strong> ${pkmn.category}<br>
46
+ <strong>Exhaustive Description:</strong> ${pkmn.description}
47
+ </p>
48
+
49
+ <button class="nav-btn" style="padding: 8px 18px; margin-bottom: 15px;" onclick="toggleData('data-${pkmn.id}', event)">Access Ultimate Master Data Panel ↓</button>
50
+
51
+ <div id="data-${pkmn.id}" class="deep-data hidden" style="padding: 20px;">
52
+ <h3 style="margin-top:0;">📊 Physical, Regional, & Breeding Statistics</h3>
53
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-bottom: 20px;">
54
+ <div>
55
+ <strong>Height:</strong> ${pkmn.height}<br>
56
+ <strong>Weight:</strong> ${pkmn.weight}<br>
57
+ <strong>Abilities:</strong> ${pkmn.abilities}<br>
58
+ <strong>Evolutionary Chain:</strong> ${pkmn.evolution}
59
+ </div>
60
+ <div>
61
+ <strong>Egg Groups:</strong> ${pkmn.egg_groups}<br>
62
+ <strong>Egg Cycles:</strong> ${pkmn.egg_cycles}<br>
63
+ <strong>EV Yield:</strong> ${pkmn.ev_yield}<br>
64
+ <strong>Catch Rate:</strong> ${pkmn.catch_rate}
65
+ </div>
66
+ <div>
67
+ <strong>Base Friendship:</strong> ${pkmn.friendship}<br>
68
+ <strong>Base Exp. Yield:</strong> ${pkmn.base_exp}<br>
69
+ <strong>Regional Indices:</strong> ${pkmn.indices}
70
+ </div>
71
+ </div>
72
+
73
+ <h3>⚔️ Precise Base Stats</h3>
74
+ <div style="margin-bottom: 20px;">
75
+ <div class="stat-line"><span class="stat-name">HP:</span> <span class="stat-val">${pkmn.hp}</span></div>
76
+ <div class="stat-line"><span class="stat-name">Attack:</span> <span class="stat-val">${pkmn.atk}</span></div>
77
+ <div class="stat-line"><span class="stat-name">Defense:</span> <span class="stat-val">${pkmn.def}</span></div>
78
+ <div class="stat-line"><span class="stat-name">Special Attack:</span> <span class="stat-val">${pkmn.sp_atk}</span></div>
79
+ <div class="stat-line"><span class="stat-name">Special Defense:</span> <span class="stat-val">${pkmn.sp_defense || pkmn.sp_def}</span></div>
80
+ <div class="stat-line"><span class="stat-name">Speed:</span> <span class="stat-val">${pkmn.speed}</span></div>
81
+ <div class="special-note" style="background-color: #172535; border-color: #3b82f6;">
82
+ 📈 <strong>Game Variable Note:</strong> ${pkmn.game_note}
83
+ </div>
84
+ </div>
85
+
86
+ <h3>🛡️ Type Effectiveness & Damage Multipliers</h3>
87
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; font-size: 0.9rem;">
88
+ <div style="background: #221616; padding: 10px; border-radius: 4px; border-left: 3px solid #ef4444;"><strong style="color:#fca5a5;">Weak to (2x):</strong> ${pkmn.weak}</div>
89
+ <div style="background: #14221a; padding: 10px; border-radius: 4px; border-left: 3px solid #22c55e;"><strong style="color:#a7f3d0;">Resists (0.5x):</strong> ${pkmn.resist}</div>
90
+ <div style="background: #1c1c1c; padding: 10px; border-radius: 4px; border-left: 3px solid #94a3b8;"><strong style="color:#cbd5e1;">Immune to (0x):</strong> ${pkmn.immune}</div>
91
+ <div style="background: #151e29; padding: 10px; border-radius: 4px; border-left: 3px solid #3b82f6;"><strong style="color:#93c5fd;">Damaged Normally (1x):</strong> ${pkmn.normal}</div>
92
+ </div>
93
+
94
+ <h3>🌍 Video Game Inclusion & Habitats</h3>
95
+ <p style="font-size: 0.9rem; color: #cbd5e1;">
96
+ <strong>Included Games:</strong> ${pkmn.games}<br>
97
+ <strong>Natural Habitats:</strong> ${pkmn.habitat}
98
+ </p>
99
+
100
+ <h3>📖 Historical Field Narrative</h3>
101
+ <p style="font-size: 0.95rem; line-height: 1.6; color: #cbd5e1; border-top: 1px solid #24354a; padding-top: 10px; font-style: italic;">
102
+ ${pkmn.story}
103
+ </p>
104
+ </div>
105
+ </div>
106
+ `).join('');
107
+ });
108
+
109
  function toggleData(id, event) {
110
  event.stopPropagation();
111
+ document.getElementById(id).classList.toggle('hidden');
 
112
  }
113
 
114
  function filterRegion(region, event) {
 
126
  });
127
  }
128
  </script>
 
129
  </body>
130
  </html>