Update help page styling to match players page design
- Added back link to Game Hub for consistent navigation - Updated header styling to match other pages (smaller, consistent padding) - Restructured sections to use section-content wrapper like other pages - Removed custom background gradients for consistency - Updated title to match "PetBot - Command Help" pattern - Maintained all existing content and functionality 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
megaproxy
parent
c2eb846b77
commit
4ccfdd3505
1 changed files with 83 additions and 67 deletions
150
help.html
150
help.html
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>PetBot IRC Commands Reference</title>
|
<title>PetBot - Command Help</title>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--bg-primary: #0f0f23;
|
--bg-primary: #0f0f23;
|
||||||
|
|
@ -33,35 +33,41 @@
|
||||||
background: var(--bg-primary);
|
background: var(--bg-primary);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
background-image:
|
|
||||||
radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
|
|
||||||
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
|
|
||||||
radial-gradient(circle at 40% 80%, rgba(120, 198, 119, 0.1) 0%, transparent 50%);
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
color: var(--text-accent);
|
||||||
|
text-decoration: none;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: var(--gradient-primary);
|
background: var(--gradient-primary);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 40px;
|
padding: 30px;
|
||||||
border-radius: 20px;
|
border-radius: 15px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 30px;
|
||||||
box-shadow: var(--shadow-dark);
|
box-shadow: var(--shadow-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
margin: 0 0 15px 0;
|
margin: 0;
|
||||||
font-size: 3em;
|
font-size: 2.5em;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
text-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header p {
|
.header p {
|
||||||
margin: 0;
|
margin: 10px 0 0 0;
|
||||||
font-size: 1.3em;
|
font-size: 1.2em;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
font-weight: 300;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
|
|
@ -71,25 +77,21 @@
|
||||||
box-shadow: var(--shadow-dark);
|
box-shadow: var(--shadow-dark);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: var(--shadow-glow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
background: var(--gradient-tertiary);
|
background: var(--gradient-primary);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 20px 25px;
|
padding: 20px 25px;
|
||||||
font-size: 1.4em;
|
font-size: 1.3em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
padding: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.command-grid {
|
.command-grid {
|
||||||
padding: 25px;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -215,14 +217,17 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<a href="/" class="back-link">← Back to Game Hub</a>
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>🐾 PetBot Commands</h1>
|
<h1>📚 PetBot Commands</h1>
|
||||||
<p>Complete guide to Pokemon-style pet collecting in IRC</p>
|
<p>Complete guide to Pokemon-style pet collecting in IRC</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-header">🚀 Getting Started</div>
|
<div class="section-header">🚀 Getting Started</div>
|
||||||
<div class="command-grid">
|
<div class="section-content">
|
||||||
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!start</div>
|
<div class="command-name">!start</div>
|
||||||
<div class="command-desc">Begin your pet collecting journey! Creates your trainer account and gives you your first starter pet.</div>
|
<div class="command-desc">Begin your pet collecting journey! Creates your trainer account and gives you your first starter pet.</div>
|
||||||
|
|
@ -237,13 +242,15 @@
|
||||||
<div class="command-name">!stats</div>
|
<div class="command-name">!stats</div>
|
||||||
<div class="command-desc">View your basic trainer information including level, experience, and money.</div>
|
<div class="command-desc">View your basic trainer information including level, experience, and money.</div>
|
||||||
<div class="command-example">Example: !stats</div>
|
<div class="command-example">Example: !stats</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-header">🌍 Exploration & Travel</div>
|
<div class="section-header">🌍 Exploration & Travel</div>
|
||||||
<div class="command-grid">
|
<div class="section-content">
|
||||||
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!explore</div>
|
<div class="command-name">!explore</div>
|
||||||
<div class="command-desc">Search your current location for wild pets or items. You might find pets to battle/catch or discover useful items!</div>
|
<div class="command-desc">Search your current location for wild pets or items. You might find pets to battle/catch or discover useful items!</div>
|
||||||
|
|
@ -288,12 +295,14 @@
|
||||||
<li><strong>Earthquake</strong> - 1.8x Rock spawns (30-90 minutes)</li>
|
<li><strong>Earthquake</strong> - 1.8x Rock spawns (30-90 minutes)</li>
|
||||||
<li><strong>Calm</strong> - Normal spawns (1.5-3 hours)</li>
|
<li><strong>Calm</strong> - Normal spawns (1.5-3 hours)</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-header">⚔️ Battle System</div>
|
<div class="section-header">⚔️ Battle System</div>
|
||||||
<div class="command-grid">
|
<div class="section-content">
|
||||||
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!catch / !capture</div>
|
<div class="command-name">!catch / !capture</div>
|
||||||
<div class="command-desc">Attempt to catch a wild pet that appeared during exploration. Success depends on the pet's level and rarity.</div>
|
<div class="command-desc">Attempt to catch a wild pet that appeared during exploration. Success depends on the pet's level and rarity.</div>
|
||||||
|
|
@ -319,12 +328,14 @@
|
||||||
<div class="command-desc">Attempt to escape from the current battle. Not always successful!</div>
|
<div class="command-desc">Attempt to escape from the current battle. Not always successful!</div>
|
||||||
<div class="command-example">Example: !flee</div>
|
<div class="command-example">Example: !flee</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-header">🏛️ Gym Battles <span class="badge">NEW!</span></div>
|
<div class="section-header">🏛️ Gym Battles <span class="badge">NEW!</span></div>
|
||||||
<div class="command-grid">
|
<div class="section-content">
|
||||||
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!gym</div>
|
<div class="command-name">!gym</div>
|
||||||
<div class="command-desc">List all gyms in your current location with your progress. Shows victories and next difficulty level.</div>
|
<div class="command-desc">List all gyms in your current location with your progress. Shows victories and next difficulty level.</div>
|
||||||
|
|
@ -345,13 +356,13 @@
|
||||||
<div class="command-desc">Get detailed information about a gym including leader, theme, team, and badge details.</div>
|
<div class="command-desc">Get detailed information about a gym including leader, theme, team, and badge details.</div>
|
||||||
<div class="command-example">Example: !gym info "Storm Master"</div>
|
<div class="command-example">Example: !gym info "Storm Master"</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tip">
|
<div class="tip">
|
||||||
💡 <strong>Gym Strategy:</strong> Each gym specializes in a specific type. Bring pets with type advantages! The more you beat a gym, the harder it gets, but the better the rewards!
|
💡 <strong>Gym Strategy:</strong> Each gym specializes in a specific type. Bring pets with type advantages! The more you beat a gym, the harder it gets, but the better the rewards!
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-box">
|
<div class="info-box">
|
||||||
<h4>🏆 Gym Leaders & Badges</h4>
|
<h4>🏆 Gym Leaders & Badges</h4>
|
||||||
<div class="gym-list">
|
<div class="gym-list">
|
||||||
<div class="gym-card">
|
<div class="gym-card">
|
||||||
|
|
@ -391,12 +402,14 @@
|
||||||
Theme: Fire-type
|
Theme: Fire-type
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-header">🐾 Pet Management</div>
|
<div class="section-header">🐾 Pet Management</div>
|
||||||
<div class="command-grid">
|
<div class="section-content">
|
||||||
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!team</div>
|
<div class="command-name">!team</div>
|
||||||
<div class="command-desc">View your active team of pets with their levels, HP, and status.</div>
|
<div class="command-desc">View your active team of pets with their levels, HP, and status.</div>
|
||||||
|
|
@ -422,12 +435,14 @@
|
||||||
<div class="command-desc">Swap the active status of two pets - one becomes active, the other goes to storage.</div>
|
<div class="command-desc">Swap the active status of two pets - one becomes active, the other goes to storage.</div>
|
||||||
<div class="command-example">Example: !swap leafy flamey</div>
|
<div class="command-example">Example: !swap leafy flamey</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-header">🎒 Inventory System <span class="badge">NEW!</span></div>
|
<div class="section-header">🎒 Inventory System <span class="badge">NEW!</span></div>
|
||||||
<div class="command-grid">
|
<div class="section-content">
|
||||||
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!inventory / !inv / !items</div>
|
<div class="command-name">!inventory / !inv / !items</div>
|
||||||
<div class="command-desc">View all items in your inventory organized by category. Shows quantities and item descriptions.</div>
|
<div class="command-desc">View all items in your inventory organized by category. Shows quantities and item descriptions.</div>
|
||||||
|
|
@ -438,49 +453,50 @@
|
||||||
<div class="command-desc">Use a consumable item from your inventory. Items can heal pets, boost stats, or provide other benefits.</div>
|
<div class="command-desc">Use a consumable item from your inventory. Items can heal pets, boost stats, or provide other benefits.</div>
|
||||||
<div class="command-example">Example: !use Small Potion</div>
|
<div class="command-example">Example: !use Small Potion</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-box">
|
<div class="info-box">
|
||||||
<h4>🎯 Item Categories & Rarities</h4>
|
<h4>🎯 Item Categories & Rarities</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>○ Common (15%)</strong> - Small Potions, basic healing items</li>
|
<li><strong>○ Common (15%)</strong> - Small Potions, basic healing items</li>
|
||||||
<li><strong>◇ Uncommon (8-12%)</strong> - Large Potions, battle boosters, special berries</li>
|
<li><strong>◇ Uncommon (8-12%)</strong> - Large Potions, battle boosters, special berries</li>
|
||||||
<li><strong>◆ Rare (3-6%)</strong> - Super Potions, speed elixirs, location treasures</li>
|
<li><strong>◆ Rare (3-6%)</strong> - Super Potions, speed elixirs, location treasures</li>
|
||||||
<li><strong>★ Epic (2-3%)</strong> - Evolution stones, rare crystals, ancient artifacts</li>
|
<li><strong>★ Epic (2-3%)</strong> - Evolution stones, rare crystals, ancient artifacts</li>
|
||||||
<li><strong>✦ Legendary (1%)</strong> - Lucky charms, ancient fossils, ultimate items</li>
|
<li><strong>✦ Legendary (1%)</strong> - Lucky charms, ancient fossils, ultimate items</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tip">
|
<div class="tip">
|
||||||
💡 <strong>Item Discovery:</strong> Find items while exploring! Each location has unique treasures. Items stack in your inventory and can be used anytime.
|
💡 <strong>Item Discovery:</strong> Find items while exploring! Each location has unique treasures. Items stack in your inventory and can be used anytime.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-header">🏆 Achievements & Progress</div>
|
<div class="section-header">🏆 Achievements & Progress</div>
|
||||||
<div class="command-grid">
|
<div class="section-content">
|
||||||
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!achievements</div>
|
<div class="command-name">!achievements</div>
|
||||||
<div class="command-desc">View your achievement progress and see which new locations you've unlocked.</div>
|
<div class="command-desc">View your achievement progress and see which new locations you've unlocked.</div>
|
||||||
<div class="command-example">Example: !achievements</div>
|
<div class="command-example">Example: !achievements</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-box">
|
<div class="info-box">
|
||||||
<h4>🎯 Location Unlock Requirements</h4>
|
<h4>🎯 Location Unlock Requirements</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>Pet Collector</strong> (5 pets) → Unlocks Whispering Woods</li>
|
<li><strong>Pet Collector</strong> (5 pets) → Unlocks Whispering Woods</li>
|
||||||
<li><strong>Spark Collector</strong> (2 Electric species) → Unlocks Electric Canyon</li>
|
<li><strong>Spark Collector</strong> (2 Electric species) → Unlocks Electric Canyon</li>
|
||||||
<li><strong>Rock Hound</strong> (3 Rock species) → Unlocks Crystal Caves</li>
|
<li><strong>Rock Hound</strong> (3 Rock species) → Unlocks Crystal Caves</li>
|
||||||
<li><strong>Ice Breaker</strong> (5 Water/Ice species) → Unlocks Frozen Tundra</li>
|
<li><strong>Ice Breaker</strong> (5 Water/Ice species) → Unlocks Frozen Tundra</li>
|
||||||
<li><strong>Dragon Tamer</strong> (15 pets + 3 Fire species) → Unlocks Dragon's Peak</li>
|
<li><strong>Dragon Tamer</strong> (15 pets + 3 Fire species) → Unlocks Dragon's Peak</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-header">🌐 Web Interface</div>
|
<div class="section-header">🌐 Web Interface</div>
|
||||||
<div class="command-grid">
|
<div class="section-content">
|
||||||
<div class="tip">
|
<div class="tip">
|
||||||
Access detailed information through the web dashboard at <strong>http://petz.rdx4.com/</strong>
|
Access detailed information through the web dashboard at <strong>http://petz.rdx4.com/</strong>
|
||||||
<ul style="margin-top: 10px;">
|
<ul style="margin-top: 10px;">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue