megaproxy/Petbot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update help page styling to match players page design

Browse source 
- 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 2025-07-14 12:53:11 +01:00
parent c2eb846b77
commit 4ccfdd3505
1 changed files with 83 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

70
help.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PetBot IRC Commands Reference</title>
<title>PetBot - Command Help</title>
<style>
:root {
--bg-primary: #0f0f23;
@ -33,35 +33,41 @@
background: var(--bg-primary);
color: var(--text-primary);
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;
}
.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 {
text-align: center;
background: var(--gradient-primary);
color: white;
padding: 40px;
border-radius: 20px;
margin-bottom: 40px;
padding: 30px;
border-radius: 15px;
margin-bottom: 30px;
box-shadow: var(--shadow-dark);
}
.header h1 {
margin: 0 0 15px 0;
font-size: 3em;
font-weight: 800;
text-shadow: 0 4px 8px rgba(0,0,0,0.3);
margin: 0;
font-size: 2.5em;
font-weight: 700;
}
.header p {
margin: 0;
font-size: 1.3em;
margin: 10px 0 0 0;
font-size: 1.2em;
opacity: 0.9;
font-weight: 300;
}
.section {
@ -71,25 +77,21 @@
box-shadow: var(--shadow-dark);
border: 1px solid var(--border-color);
overflow: hidden;
transition: all 0.3s ease;
}
.section:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-glow);
}
.section-header {
background: var(--gradient-tertiary);
background: var(--gradient-primary);
color: white;
padding: 20px 25px;
font-size: 1.4em;
font-size: 1.3em;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.section-content {
padding: 25px;
}
.command-grid {
padding: 25px;
display: grid;
gap: 20px;
}
@ -215,13 +217,16 @@
</style>
</head>
<body>
<a href="/" class="back-link">← Back to Game Hub</a>
<div class="header">
<h1>🐾 PetBot Commands</h1>
<h1>📚 PetBot Commands</h1>
<p>Complete guide to Pokemon-style pet collecting in IRC</p>
</div>
<div class="section">
<div class="section-header">🚀 Getting Started</div>
<div class="section-content">
<div class="command-grid">
<div class="command">
<div class="command-name">!start</div>
@ -240,9 +245,11 @@
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-header">🌍 Exploration & Travel</div>
<div class="section-content">
<div class="command-grid">
<div class="command">
<div class="command-name">!explore</div>
@ -290,9 +297,11 @@
</ul>
</div>
</div>
</div>
<div class="section">
<div class="section-header">⚔️ Battle System</div>
<div class="section-content">
<div class="command-grid">
<div class="command">
<div class="command-name">!catch / !capture</div>
@ -321,9 +330,11 @@
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-header">🏛️ Gym Battles <span class="badge">NEW!</span></div>
<div class="section-content">
<div class="command-grid">
<div class="command">
<div class="command-name">!gym</div>
@ -393,9 +404,11 @@
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-header">🐾 Pet Management</div>
<div class="section-content">
<div class="command-grid">
<div class="command">
<div class="command-name">!team</div>
@ -424,9 +437,11 @@
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-header">🎒 Inventory System <span class="badge">NEW!</span></div>
<div class="section-content">
<div class="command-grid">
<div class="command">
<div class="command-name">!inventory / !inv / !items</div>
@ -458,6 +473,7 @@
<div class="section">
<div class="section-header">🏆 Achievements & Progress</div>
<div class="section-content">
<div class="command-grid">
<div class="command">
<div class="command-name">!achievements</div>
@ -480,7 +496,7 @@
<div class="section">
<div class="section-header">🌐 Web Interface</div>
<div class="command-grid">
<div class="section-content">
<div class="tip">
Access detailed information through the web dashboard at <strong>http://petz.rdx4.com/</strong>
<ul style="margin-top: 10px;">