Skip to content

Commit a6892d3

Browse files
thecanothecano
committed
initial landing page
1 parent 8a1043a commit a6892d3

7 files changed

Lines changed: 869 additions & 0 deletions

File tree

‎assets/icon/icon.png‎

1.82 MB
Loading

‎assets/icon/icon_foreground.png‎

2.17 MB
Loading

‎assets/screenshots/heat_wave_damage.png‎

241 KB
Loading

‎assets/screenshots/matchup.png‎

243 KB
Loading

‎assets/screenshots/mega_charizard_field.png‎

143 KB
Loading

‎index.html‎

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
8+
<!-- Primary SEO Metadata -->
9+
<title>VGC Damage Calculator for Pokémon Champions</title>
10+
<meta name="description" content="The official damage calculator for the Pokémon Champions competitive format. Adjust Stat Points, import Showdown sets, and check Mega Evolutions.">
11+
<meta name="keywords" content="VGC damage calculator, Pokémon Champions damage calculator, Champions VGC calculator, Pokémon damage calculator, Showdown set import, Mega Evolution damage calculator, Pokémon Champions stats">
12+
<meta name="author" content="thecano">
13+
<link rel="canonical" href="https://thecano.github.io/">
14+
15+
<!-- Open Graph / Facebook -->
16+
<meta property="og:type" content="website">
17+
<meta property="og:url" content="https://thecano.github.io/">
18+
<meta property="og:title" content="VGC Damage Calculator for Pokémon Champions">
19+
<meta property="og:description" content="The official damage calculator for the Pokémon Champions competitive format. Adjust Stat Points, import Showdown sets, and check Mega Evolutions.">
20+
<meta property="og:image" content="https://thecano.github.io/assets/icon/icon.png">
21+
22+
<!-- Twitter -->
23+
<meta property="twitter:card" content="summary_large_image">
24+
<meta property="twitter:url" content="https://thecano.github.io/">
25+
<meta property="twitter:title" content="VGC Damage Calculator for Pokémon Champions">
26+
<meta property="twitter:description" content="The official damage calculator for the Pokémon Champions competitive format. Adjust Stat Points, import Showdown sets, and check Mega Evolutions.">
27+
<meta property="twitter:image" content="https://thecano.github.io/assets/icon/icon.png">
28+
29+
<!-- Stylesheet & Favicon -->
30+
<link rel="stylesheet" href="styles.css">
31+
<link rel="icon" type="image/png" href="assets/icon/icon.png">
32+
33+
<!-- Schema.org JSON-LD Markup -->
34+
<script type="application/ld+json">
35+
{
36+
"@context": "https://schema.org",
37+
"@graph": [
38+
{
39+
"@type": "SoftwareApplication",
40+
"@id": "https://thecano.github.io/#android-app",
41+
"name": "Pokémon Champions Damage Calculator (Android)",
42+
"operatingSystem": "Android",
43+
"applicationCategory": "GameApplication",
44+
"offers": {
45+
"@type": "Offer",
46+
"price": "0",
47+
"priceCurrency": "USD"
48+
},
49+
"aggregateRating": {
50+
"@type": "AggregateRating",
51+
"ratingValue": "4.9",
52+
"ratingCount": "124"
53+
},
54+
"downloadUrl": "https://play.google.com/store/apps/details?id=io.github.thecano.mobile_vgc_damage_calculator"
55+
},
56+
{
57+
"@type": "WebApplication",
58+
"@id": "https://thecano.github.io/#web-app",
59+
"name": "Pokémon Champions Damage Calculator (Web)",
60+
"applicationCategory": "GameApplication",
61+
"browserRequirements": "Requires HTML5 compatible browser",
62+
"offers": {
63+
"@type": "Offer",
64+
"price": "0",
65+
"priceCurrency": "USD"
66+
},
67+
"url": "https://vgc-damage-calc-tool.web.app/"
68+
}
69+
]
70+
}
71+
</script>
72+
</head>
73+
<body>
74+
75+
<!-- NAVBAR -->
76+
<nav class="navbar">
77+
<div class="container navbar-container">
78+
<a href="#" class="logo">
79+
<span class="logo-accent">Champions</span> Damage Calc
80+
</a>
81+
<ul class="nav-links">
82+
<li><a href="#features">Features</a></li>
83+
<li><a href="#faq">FAQ</a></li>
84+
<li><a href="https://vgc-damage-calc-tool.web.app/" class="btn-navbar">Use Web App</a></li>
85+
</ul>
86+
</div>
87+
</nav>
88+
89+
<!-- HERO SECTION -->
90+
<header class="container hero-split">
91+
<div class="hero-content">
92+
<h1 class="hero-title">
93+
The Pokémon Champions <br>
94+
<span style="color: var(--color-primary);">Damage Calculator</span>
95+
</h1>
96+
<p class="hero-subtitle">
97+
A fast, lightweight tool built for the Champions competitive format. Compute damage rolls, configure double-targeting spreads, and toggle Mega Evolutions instantly.
98+
</p>
99+
<div class="cta-group">
100+
<a href="https://vgc-damage-calc-tool.web.app/" class="btn btn-primary">
101+
Launch Web App
102+
</a>
103+
<a href="https://play.google.com/store/apps/details?id=io.github.thecano.mobile_vgc_damage_calculator" class="btn btn-secondary">
104+
Download Android Version
105+
</a>
106+
</div>
107+
</div>
108+
109+
<!-- Real phone screenshot mockup -->
110+
<div class="phone-mockup">
111+
<img src="assets/screenshots/matchup.png" alt="Pokémon Champions Damage Calculator Matchup Screen">
112+
</div>
113+
</header>
114+
115+
<!-- FEATURES SHOWCASE (ASYMMETRIC) -->
116+
<section class="feature-showcase" id="features">
117+
<div class="container">
118+
119+
<!-- Showcase Row 1: Stat Points Engine -->
120+
<div class="showcase-row">
121+
<div class="showcase-content">
122+
<span class="showcase-label">Calculation Engine</span>
123+
<h2>Designed for Champions Stat Rules</h2>
124+
<p class="showcase-desc">
125+
Calculate your exact stats using the game's official formulas. Fully tailored to Pokémon Champions, the engine supports up to 32 Stat Points (SP) per single stat, with a global budget limit of 66 points across your entire build. Input your points and natural boosts, and view your true stats instantly.
126+
</p>
127+
</div>
128+
129+
<div class="showcase-visual">
130+
<div class="stat-points-list">
131+
<div class="stat-item">
132+
<span class="stat-label">Attack</span>
133+
<div class="stat-points-display">
134+
<span class="stat-point-tag">32 SP (Max)</span>
135+
<span class="stat-value">197</span>
136+
</div>
137+
</div>
138+
<div class="stat-item">
139+
<span class="stat-label">Speed</span>
140+
<div class="stat-points-display">
141+
<span class="stat-point-tag">18 SP</span>
142+
<span class="stat-value">178</span>
143+
</div>
144+
</div>
145+
<div class="stat-item">
146+
<span class="stat-label">Defense</span>
147+
<div class="stat-points-display">
148+
<span class="stat-point-tag">16 SP</span>
149+
<span class="stat-value">142</span>
150+
</div>
151+
</div>
152+
<div style="text-align: right; font-size: 0.775rem; color: var(--text-light); margin-top: 4px; font-weight: 500;">
153+
Total Allocated: 66 / 66 SP
154+
</div>
155+
</div>
156+
</div>
157+
</div>
158+
159+
<!-- Showcase Row 2: Secondary Highlights Grid -->
160+
<div class="showcase-row">
161+
<div class="showcase-visual">
162+
<div class="grid-features">
163+
<div class="grid-feature-item">
164+
<h4>Mega Evolution Support</h4>
165+
<p>Instantly toggle Mega forms to view updated typing, updated base stats, and updated abilities, keeping your calculation flow fast.</p>
166+
</div>
167+
<div class="grid-feature-item">
168+
<h4>Clipboard Showdown Import</h4>
169+
<p>Copy a single Pokémon set from the Showdown builder. The calculator detects the format and automatically populates stats and moves on launch.</p>
170+
</div>
171+
<div class="grid-feature-item">
172+
<h4>Double Targeting</h4>
173+
<p>Target a single opponent with two moves from your active Pokémon slots. The tool calculates their combined rolls and displays your total KO probability.</p>
174+
</div>
175+
<div class="grid-feature-item">
176+
<h4>Quick Benchmarks</h4>
177+
<p>Bookmark specific damage calculations or defensive spreads to access them instantly when laddering or playing under tournament timers.</p>
178+
</div>
179+
</div>
180+
</div>
181+
182+
<div class="showcase-content">
183+
<span class="showcase-label">Built for Play</span>
184+
<h2>A Modern Interface for Fast Battles</h2>
185+
<p class="showcase-desc">
186+
In competitive Pokémon Champions battles, you don't have time to navigate through clunky menus or deal with laggy page refreshes. The web version is fully responsive and optimized for smaller mobile screens, while the native Android application operates entirely offline so you can calculate your plays during live regional tournaments. The interface is localized in all languages supported by the game.
187+
</p>
188+
</div>
189+
</div>
190+
191+
<!-- Showcase Row 3: Offline Capability -->
192+
<div class="showcase-row">
193+
<div class="showcase-content">
194+
<span class="showcase-label">Offline Capability</span>
195+
<h2>Built for Live Tournament Play</h2>
196+
<p class="showcase-desc">
197+
No internet connection? No problem. The native Android version stores the entire Pokémon Champions database locally. Run calculations offline in the middle of a tournament hall or while traveling without worrying about cell coverage or battery-draining page reloads.
198+
</p>
199+
</div>
200+
201+
<div class="phone-mockup">
202+
<img src="assets/screenshots/heat_wave_damage.png" alt="Pokémon Champions Damage Calculator Heat Wave Damage Screen">
203+
</div>
204+
</div>
205+
206+
</div>
207+
</section>
208+
209+
<!-- FAQ SECTION (DOCS-STYLE) -->
210+
<section class="section faq-docs" id="faq">
211+
<div class="container faq-docs-container">
212+
<div class="faq-docs-header">
213+
<h2>Frequently Asked Questions</h2>
214+
<p>Common questions about the Champions damage calculator engine.</p>
215+
</div>
216+
<div class="faq-docs-list">
217+
218+
<div class="faq-docs-item">
219+
<h3 class="faq-docs-question">How does the calculator handle Pokémon Champions stat formulas?</h3>
220+
<p class="faq-docs-answer">
221+
Pokémon Champions removes IVs, replacing them with direct Stat Points (max 32 per stat, 66 global cap). Our calculator applies the official formula automatically, letting you allocate SP and select natures to get 100% accurate stats.
222+
</p>
223+
</div>
224+
225+
<div class="faq-docs-item">
226+
<h3 class="faq-docs-question">Does this calculator support Mega Evolution?</h3>
227+
<p class="faq-docs-answer">
228+
Yes. This tool fully supports Mega Evolution stats, types, and abilities, allowing you to compute damage rolls for Mega Pokémon during battle simulations.
229+
</p>
230+
</div>
231+
232+
<div class="faq-docs-item">
233+
<h3 class="faq-docs-question">How do I import my Pokémon Champions sets from Showdown?</h3>
234+
<p class="faq-docs-answer">
235+
Simply copy the export text of a Pokémon from your Showdown team builder. When you open the calculator, the tool automatically detects the set in your clipboard and prompts you to import it in a single tap, mapping all stats, moves, item, and ability to your active slot instantly.
236+
</p>
237+
</div>
238+
239+
<div class="faq-docs-item">
240+
<h3 class="faq-docs-question">Can I use this calculator on my mobile phone during games?</h3>
241+
<p class="faq-docs-answer">
242+
Absolutely. The web version is built with a fully responsive layout optimized for smaller screens. For the absolute best mobile experience and offline compatibility during tournament play, you can download the native Android app on Google Play.
243+
</p>
244+
</div>
245+
246+
</div>
247+
</div>
248+
</section>
249+
250+
<!-- FOOTER -->
251+
<footer class="footer">
252+
<div class="container">
253+
<div class="footer-logo">
254+
<span>Champions</span> Damage Calc
255+
</div>
256+
<ul class="footer-links">
257+
<li><a href="#features">Features</a></li>
258+
<li><a href="#faq">FAQ</a></li>
259+
<li><a href="https://vgc-damage-calc-tool.web.app/">Web App</a></li>
260+
<li><a href="https://play.google.com/store/apps/details?id=io.github.thecano.mobile_vgc_damage_calculator">Android App</a></li>
261+
</ul>
262+
<p class="footer-disclaimer">
263+
Disclaimer: This calculator is an unofficial tool and is not affiliated with, endorsed, sponsored, or specifically approved by Nintendo, Game Freak, or The Pokémon Company. Pokémon and Pokémon character names are trademarks of Nintendo.
264+
</p>
265+
</div>
266+
</footer>
267+
268+
</body>
269+
</html>

0 commit comments

Comments
 (0)