317 lines
13 KiB
Markdown
317 lines
13 KiB
Markdown
# 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
|