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
70
help.html
70
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,13 +217,16 @@
|
||||||
</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="section-content">
|
||||||
<div class="command-grid">
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!start</div>
|
<div class="command-name">!start</div>
|
||||||
|
|
@ -240,9 +245,11 @@
|
||||||
</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="section-content">
|
||||||
<div class="command-grid">
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!explore</div>
|
<div class="command-name">!explore</div>
|
||||||
|
|
@ -290,9 +297,11 @@
|
||||||
</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="section-content">
|
||||||
<div class="command-grid">
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!catch / !capture</div>
|
<div class="command-name">!catch / !capture</div>
|
||||||
|
|
@ -321,9 +330,11 @@
|
||||||
</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="section-content">
|
||||||
<div class="command-grid">
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!gym</div>
|
<div class="command-name">!gym</div>
|
||||||
|
|
@ -393,9 +404,11 @@
|
||||||
</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="section-content">
|
||||||
<div class="command-grid">
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!team</div>
|
<div class="command-name">!team</div>
|
||||||
|
|
@ -424,9 +437,11 @@
|
||||||
</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="section-content">
|
||||||
<div class="command-grid">
|
<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>
|
||||||
|
|
@ -458,6 +473,7 @@
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-header">🏆 Achievements & Progress</div>
|
<div class="section-header">🏆 Achievements & Progress</div>
|
||||||
|
<div class="section-content">
|
||||||
<div class="command-grid">
|
<div class="command-grid">
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name">!achievements</div>
|
<div class="command-name">!achievements</div>
|
||||||
|
|
@ -480,7 +496,7 @@
|
||||||
|
|
||||||
<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