Panel/backup-website/_archived/VISUAL_GUIDE.md

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