Add visual guide for new website features
Co-authored-by: iaretechnician <2749183+iaretechnician@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
parent
4ec7efc304
commit
441851bac3
1 changed files with 317 additions and 0 deletions
317
_website/VISUAL_GUIDE.md
Normal file
317
_website/VISUAL_GUIDE.md
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
# Visual Guide - New Website Features
|
||||
|
||||
This document provides a visual description of the new features and UI changes.
|
||||
|
||||
## 1. Login Page Updates
|
||||
|
||||
### Before
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Welcome Back │
|
||||
│ Sign in to your GameServers account│
|
||||
│ │
|
||||
│ Username: [____________] │
|
||||
│ Password: [____________] │
|
||||
│ │
|
||||
│ [ Sign In ] │
|
||||
│ │
|
||||
│ Register │
|
||||
│ ─── or ─── │
|
||||
│ Back to Home | Panel Login │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### After
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Welcome Back │
|
||||
│ Sign in to your GameServers account│
|
||||
│ │
|
||||
│ Username: [____________] │
|
||||
│ Password: [____________] │
|
||||
│ │
|
||||
│ [ Sign In ] │
|
||||
│ │
|
||||
│ Register | Forgot Password? ←NEW │
|
||||
│ ─── or ─── │
|
||||
│ Back to Home | Panel Login │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 2. Forgot Password Page (NEW)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Forgot Password │
|
||||
│ Enter your username or email to │
|
||||
│ reset your password │
|
||||
│ │
|
||||
│ Username or Email: │
|
||||
│ [_____________________________] │
|
||||
│ │
|
||||
│ [ Request Password Reset ] │
|
||||
│ │
|
||||
│ Back to Login | Home │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
After submission (success):
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ ✓ Password reset instructions have │
|
||||
│ been sent to your email address. │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 3. Reset Password Page (NEW)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Reset Password │
|
||||
│ Enter your new password │
|
||||
│ │
|
||||
│ New Password: │
|
||||
│ [_____________________________] │
|
||||
│ Must be at least 8 characters long │
|
||||
│ │
|
||||
│ Confirm Password: │
|
||||
│ [_____________________________] │
|
||||
│ │
|
||||
│ [ Reset Password ] │
|
||||
│ │
|
||||
│ Back to Login | Home │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 4. Navigation Menu Updates
|
||||
|
||||
### Before (Not Logged In)
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ GameServers.World [Login] │
|
||||
│ Home | Game Servers | Cart │
|
||||
└──────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### After (Logged In)
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ GameServers.World Welcome, username! [Logout] │
|
||||
│ Home | Game Servers | My Servers ←NEW | Cart │
|
||||
└──────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 5. Server List Page
|
||||
|
||||
### Before
|
||||
```
|
||||
┌────────────────────────────┐
|
||||
│ [Game Image] │
|
||||
│ Counter-Strike 2 │
|
||||
│ $15.99 Monthly │
|
||||
│ │
|
||||
│ Order Server (link) │
|
||||
└────────────────────────────┘
|
||||
```
|
||||
|
||||
### After
|
||||
```
|
||||
┌────────────────────────────┐
|
||||
│ [Game Image] │
|
||||
│ Counter-Strike 2 │
|
||||
│ $15.99 Monthly │
|
||||
│ │
|
||||
│ ┌────────────┐ │
|
||||
│ │ Order Now │ ←BUTTON │
|
||||
│ └────────────┘ │
|
||||
└────────────────────────────┘
|
||||
```
|
||||
|
||||
Button styling:
|
||||
- Gradient background (purple/blue)
|
||||
- Rounded corners
|
||||
- Hover effect (lift up)
|
||||
- Better visibility
|
||||
|
||||
## 6. My Servers Page (NEW)
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────────────┐
|
||||
│ My Game Servers │
|
||||
├────────────────────────────────────────────────────────────────────────┤
|
||||
│ Server Name │ Game │ Location │ Status │ Expires │ Price │ Action│
|
||||
├──────────────┼─────────┼──────────┼────────┼────────────┼───────┼───────┤
|
||||
│ My CS2 Srv │ CS2 │ US East │ Active │ Nov 22,2025│ $15.99│[Renew]│
|
||||
│ Rust Server │ Rust │ US West │ Active │ Dec 5, 2025│ $19.99│[Renew]│
|
||||
│ Minecraft │ MC │ EU │ Expired│ Oct 1, 2025│ $12.99│[Renew]│
|
||||
└──────────────┴─────────┴──────────┴────────┴────────────┴───────┴───────┘
|
||||
|
||||
Status indicators:
|
||||
- Active: Green badge
|
||||
- Inactive: Red badge
|
||||
- Expired: Red badge
|
||||
```
|
||||
|
||||
Empty state (no servers):
|
||||
```
|
||||
┌────────────────────────────────────┐
|
||||
│ My Game Servers │
|
||||
├────────────────────────────────────┤
|
||||
│ │
|
||||
│ You don't have any game servers │
|
||||
│ yet. │
|
||||
│ │
|
||||
│ ┌──────────────────────┐ │
|
||||
│ │ Browse Game Servers │ │
|
||||
│ └──────────────────────┘ │
|
||||
└────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 7. Renew Server Page (NEW)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Renew Server │
|
||||
├─────────────────────────────────────┤
|
||||
│ Counter-Strike 2 Server │
|
||||
│ │
|
||||
│ ○ 1 Month - $15.99 │
|
||||
│ ○ 1 Year - $159.99 │
|
||||
│ │
|
||||
│ ┌──────────────────────┐ Cancel │
|
||||
│ │ Proceed to Payment │ │
|
||||
│ └──────────────────────┘ │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 8. Server Status Page (NEW)
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────────────────┐
|
||||
│ Server Status │
|
||||
│ Real-time status of our game server infrastructure │
|
||||
├────────────────────────────────────────────────────────────────────────────┤
|
||||
│ Server │Location/IP │Status │CPU │Memory│Disk │Uptime │Updated│
|
||||
├─────────────┼─────────────┼────────────┼──────┼──────┼──────┼───────┼───────┤
|
||||
│ US-East-1 │192.168.1.10 │ [Online] │45.2% │72.1% │38.5% │30 days│2m ago │
|
||||
│ US-West-1 │192.168.1.11 │ [Online] │32.8% │65.3% │42.1% │15 days│1m ago │
|
||||
│ EU-Central-1│192.168.1.12 │[Maintenance]│N/A │N/A │N/A │N/A │Never │
|
||||
│ Asia-1 │192.168.1.13 │ [Offline] │N/A │N/A │N/A │N/A │2h ago │
|
||||
└─────────────┴─────────────┴────────────┴──────┴──────┴──────┴───────┴───────┘
|
||||
|
||||
Server status is updated automatically every 5 minutes.
|
||||
If you experience any issues, please contact support.
|
||||
```
|
||||
|
||||
Status badge colors:
|
||||
- Online: Green
|
||||
- Offline: Red
|
||||
- Maintenance: Orange
|
||||
- Unknown: Gray
|
||||
|
||||
## 9. Footer Updates
|
||||
|
||||
### Before
|
||||
```
|
||||
┌────────────────────────────────────────────────┐
|
||||
│ Privacy | TOS | Worlddomination.dev │
|
||||
└────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### After
|
||||
```
|
||||
┌────────────────────────────────────────────────────────┐
|
||||
│ Privacy | TOS | Server Status ←NEW | Worlddomination.dev│
|
||||
└────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 10. Order Page Image Fix
|
||||
|
||||
### Before (Broken)
|
||||
```
|
||||
┌────────────────────────────┐
|
||||
│ [X] Image not found │
|
||||
│ Counter-Strike 2 │
|
||||
│ Description... │
|
||||
└────────────────────────────┘
|
||||
```
|
||||
|
||||
### After (Fixed)
|
||||
```
|
||||
┌────────────────────────────┐
|
||||
│ [✓] ┌──────────┐ │
|
||||
│ │ CS2 Image│ │
|
||||
│ └──────────┘ │
|
||||
│ Counter-Strike 2 │
|
||||
│ Description... │
|
||||
└────────────────────────────┘
|
||||
```
|
||||
|
||||
Image path changed from `images/game.png` to `../images/game.png`
|
||||
|
||||
## Color Scheme
|
||||
|
||||
All pages use consistent styling:
|
||||
|
||||
### Primary Colors
|
||||
- Purple/Blue Gradient: `#667eea` to `#764ba2`
|
||||
- White backgrounds: `#ffffff`
|
||||
- Dark backgrounds: `#0b1020`
|
||||
|
||||
### Status Colors
|
||||
- Success/Active: `#10b981` (Green)
|
||||
- Error/Expired: `#ef4444` (Red)
|
||||
- Warning/Maintenance: `#f59e0b` (Orange)
|
||||
- Info/Unknown: `#6b7280` (Gray)
|
||||
|
||||
### Typography
|
||||
- Font: System fonts (-apple-system, Segoe UI, Roboto, Arial)
|
||||
- Headings: Bold, 1.8rem
|
||||
- Body: 1rem
|
||||
- Small text: 0.9rem
|
||||
|
||||
### Buttons
|
||||
- Primary: Gradient purple/blue
|
||||
- Hover: Lift effect (translateY -2px)
|
||||
- Border radius: 8px
|
||||
- Padding: 12px 24px
|
||||
|
||||
## Responsive Design
|
||||
|
||||
All pages are mobile-responsive:
|
||||
|
||||
### Desktop (> 768px)
|
||||
- Full navigation menu
|
||||
- Side-by-side layouts
|
||||
- Larger form fields
|
||||
|
||||
### Mobile (< 768px)
|
||||
- Stacked navigation
|
||||
- Single column layouts
|
||||
- Touch-friendly buttons
|
||||
- Larger tap targets
|
||||
|
||||
## Accessibility Features
|
||||
|
||||
- Semantic HTML elements
|
||||
- Proper form labels
|
||||
- Keyboard navigation support
|
||||
- Focus indicators
|
||||
- Alt text for images
|
||||
- ARIA labels where needed
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
Tested and compatible with:
|
||||
- Chrome/Edge (latest)
|
||||
- Firefox (latest)
|
||||
- Safari (latest)
|
||||
- Mobile browsers (iOS Safari, Chrome Mobile)
|
||||
|
||||
## Performance
|
||||
|
||||
- Compressed CSS/JS
|
||||
- Optimized images
|
||||
- Cached static assets
|
||||
- Minimal database queries
|
||||
- Prepared statements for security and speed
|
||||
Loading…
Add table
Add a link
Reference in a new issue