RedBus Welcome Screen Prototype

A responsive web implementation of the RedBus welcome screen design from Figma, featuring mobile number verification and Google sign-in functionality.

• Mobile-First Design: Optimized for mobile devices with responsive layout
• Interactive Elements:
  • Mobile number input with country code selection
  • OTP generation button with loading states
  • Google sign-in integration
• Smooth Animations: Fade-in animations and hover effects
• Accessibility: ARIA labels and keyboard navigation support
• Touch-Friendly: Optimized for touch interactions on mobile devices

• Screen Size: 360px × 640px (Android Small)
• Colors:
  • Primary Red: #d30010
  • Background: White
  • Input Fields: #d9d9d9
• Typography:
  • Primary: Alata (Regular)
  • Secondary: Calibri (Bold)
• Shadows: 0px 4px 4px rgba(0,0,0,0.25)

• HTML5: Semantic markup structure
• CSS3: Modern styling with Flexbox and Grid
• Vanilla JavaScript: Interactive functionality
• Google Fonts: Alata and Calibri font families

figma_redbus/
├── index.html          # Main HTML file
├── styles.css          # CSS styles and responsive design
├── script.js           # JavaScript functionality
└── README.md           # Project documentation

1. Clone or Download the project files
2. Open index.html in a web browser
3. Test the functionality on both desktop and mobile devices

• Responsive Design: Adapts to different screen sizes
• Touch Interactions: Optimized for mobile touch events
• Swipe Gestures: Basic swipe detection for future enhancements
• Mobile Number Input: Touch-friendly number input with validation

• Click to focus and enter mobile number
• Country code dropdown (cycles through +60, +91, +1, +44, +86)
• Real-time validation for Malaysian mobile numbers
• Enter key support for quick submission

• Button with loading state animation
• Mobile number validation before OTP generation
• Simulated OTP sending with user feedback

• Hover and click animations
• Loading state during sign-in process
• Placeholder for Google OAuth integration

Update the CSS custom properties in styles.css:

:root {
  --primary-red: #d30010;
  --input-bg: #d9d9d9;
  --text-color: #000000;
}

Replace Google Fonts imports in index.html:

<link href="https://fonts.googleapis.com/css2?family=YourFont:wght@400&display=swap" rel="stylesheet">

Modify animation durations in styles.css:

.container > * {
    animation: fadeIn 0.6s ease-out; /* Change duration here */
}

• Chrome: Full support
• Firefox: Full support
• Safari: Full support
• Edge: Full support
• Mobile Browsers: Optimized for iOS Safari and Chrome Mobile

• Real OTP integration with backend API
• Google OAuth implementation
• Form validation with error messages
• Progressive Web App (PWA) features
• Dark mode support
• Multi-language support
• Accessibility improvements (screen reader support)

• Placeholder images are used instead of actual RedBus assets
• OTP generation is simulated (no real backend integration)
• Google sign-in is a placeholder (no real OAuth implementation)

This project is created for demonstration purposes based on the RedBus Figma design.

Feel free to submit issues and enhancement requests!

Note: This is a prototype implementation based on the Figma design. For production use, integrate with actual backend services and replace placeholder assets with real RedBus branding.