A clean, production-ready static website for the Red Cross Philippines user registration system.
This is a static website that requires no build process. Simply open index.html in your browser or deploy to any static hosting service.
├── index.html # Home page
├── login.html # Unified login page (users & admins)
├── register.html # Registration page
├── payment.html # Payment page
├── admin.html # Admin dashboard
├── admin.js # Admin dashboard functionality
├── style.css # Custom styles
├── script.js # JavaScript functionality (includes auth)
├── favicon.ico # Site icon
└── README.md # This file
- Responsive Design: Mobile-first approach with Tailwind CSS
- Form Validation: Real-time validation with error handling
- Interactive Elements: QR scanner simulation, payment methods
- Admin Dashboard: Complete management system with authentication
- Role-Based Access: Multiple admin levels with different permissions
- Security Features: SSL indicators, privacy compliance notices
- No Dependencies: Pure HTML, CSS, and JavaScript
- Fast Loading: CDN-delivered resources, optimized performance
- HTML5: Semantic markup
- Tailwind CSS: Utility-first CSS framework (via CDN)
- Vanilla JavaScript: No frameworks required
- Font Awesome: Icons (via CDN)
- Google Fonts: Inter font family
- Hero section with call-to-action
- Features showcase
- Security information
- Community benefits
- Secure login form
- Form validation
- Security features display
- Registration teaser
- Multi-step process indicator
- QR code scanning simulation
- Comprehensive form with validation
- Test data population
- Security compliance notices
- Multiple payment methods
- Card number formatting
- Payment summary
- Security processing information
- Complete management system
- User management with filtering
- Event creation and management
- Volunteer and staff management
- Donation tracking
- Role-based access control
- Real-time notifications
- Unified login for both regular users and administrators
- Smart routing - automatically detects admin users
- Role-based authentication with different permission levels
- Session management for all user types
- Install Vercel CLI:
npm i -g vercel - Run:
vercel --prod
- Drag and drop all files to Netlify
- Your site is live!
- Upload files to a GitHub repository
- Enable Pages in repository settings
- Select source: Deploy from a branch
- Upload all files to your hosting service
- No build process required
- Works with any static file server
Red Cross brand colors are defined in the Tailwind config:
- Primary Blue:
#002888 - Red:
#E3000E - Light Blue:
#e6f0ff - Secondary Blue:
#1a4ba8
- Edit HTML files to modify content
- Update
style.cssfor custom styles - Modify
script.jsfor functionality changes
- No Build Process: Instant deployment
- CDN Resources: Fast loading from global CDNs
- Optimized Images: Compressed and responsive
- Minimal JavaScript: Lightweight and fast
- Mobile Optimized: Touch-friendly interface
For testing and demonstration purposes, use these credentials to access the admin dashboard:
| Role | Password | Permissions | |
|---|---|---|---|
| Super Admin | admin@redcross.org.ph |
Admin123! |
Full access to all features |
| Manager | manager@redcross.org.ph |
Admin123! |
Users, Events, Volunteers, Donations |
| Staff | staff@redcross.org.ph |
Admin123! |
Users, Events, Volunteers |
| Volunteer | volunteer@redcross.org.ph |
Admin123! |
Volunteers, Events |
Note: All passwords are
Admin123!for demonstration purposes. In production, each admin would have unique, secure passwords.
The admin system includes multiple user accounts with different permission levels:
- Email:
admin@redcross.org.ph - Password:
Admin123! - Role: Super Admin
- Permissions: Full access to all features (users, events, volunteers, donations, settings)
- Email:
manager@redcross.org.ph - Password:
Admin123! - Role: Admin
- Permissions: Users, Events, Volunteers, Donations, Reports
- Email:
staff@redcross.org.ph - Password:
Admin123! - Role: Staff
- Permissions: Users, Events, Volunteers
- Email:
volunteer@redcross.org.ph - Password:
Admin123! - Role: Volunteer
- Permissions: Volunteers, Events
- Dashboard Overview: Key statistics and recent activity
- User Management: Create, edit, delete users with role assignment
- Event Management: Full CRUD operations for events
- Volunteer Management: Staff and volunteer coordination
- Donation Tracking: Financial monitoring and reporting
- Role-Based Access: Different permissions for different admin levels
- Session Management: 24-hour automatic logout
- Real-time Notifications: Success/error messages
- Navigate to
login.html(unified login page) - Use any of the provided admin credentials above
- System automatically detects admin users and redirects to admin dashboard
- Regular users are redirected to the main site
- Session automatically expires after 24 hours
- Single Login Page: One login form for all users
- Automatic Detection: System recognizes admin vs regular users
- Smart Routing: Admins go to dashboard, users go to main site
- Session Management: 24-hour sessions for all user types
- Role-Based Access: Different permissions for different admin levels
- SSL Indicators: Visual security assurance
- Privacy Compliance: Data protection notices
- Form Validation: Client-side validation
- Admin Authentication: Role-based access control
- Session Management: Automatic timeout protection
- Secure Headers: Security headers for production
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
For technical issues or questions:
- Check browser console for errors
- Verify CDN resources are loading
- Test on different devices
- Contact: support@redcross.org.ph
This project is for the Philippine Red Cross and follows their branding guidelines.
Ready to deploy! 🚀