Navyug Service - Corporate Catering Website

A modern, professional website for Navyug Service, showcasing corporate food catering solutions with interactive features including factory location mapping and live stream access.

🚀 Features

Core Sections

• Hero Section: Compelling introduction with key statistics and call-to-action buttons
• Services: Detailed breakdown of breakfast, lunch, and dinner catering services
• Factory Facilities: Interactive map showing all factory locations in Bareilly
• Gallery: Photo showcase of manufacturing facilities with hover effects
• Live Stream: Access to real-time factory operations monitoring
• Contact Form: Professional inquiry form for corporate clients

Interactive Features

• Interactive Map: Leaflet.js powered map showing factory locations in Bareilly
• Live Stream Access: Modal-based livestream viewing for transparency
• Responsive Design: Mobile-first approach with hamburger navigation
• Form Validation: Client-side validation with visual feedback
• Image Lightbox: Click-to-expand gallery images
• Smooth Scrolling: Enhanced navigation experience
• Loading Animations: Intersection Observer API for scroll-triggered animations

Technical Highlights

• Modern CSS: Flexbox and Grid layouts with custom animations
• Vanilla JavaScript: No framework dependencies for faster loading
• Font Awesome Icons: Professional iconography throughout
• Google Fonts: Inter font family for modern typography
• OpenStreetMap: Free mapping solution via Leaflet.js

📁 File Structure

Navyug Services/
├── index.html          # Main HTML file
├── styles.css          # Complete CSS styling
├── script.js           # JavaScript functionality
└── README.md           # This file

🛠️ Setup Instructions

Option 1: Simple Local Setup

1. Download all files to a folder
2. Open index.html in any modern web browser
3. The website will work immediately with all features

Option 2: Local Server (Recommended)

For better performance and to avoid CORS issues:

# Using Python 3
python -m http.server 8000

# Using Python 2
python -m SimpleHTTPServer 8000

# Using Node.js (if you have http-server installed)
npx http-server

# Using PHP
php -S localhost:8000

Then visit http://localhost:8000 in your browser.

🗺️ Map Configuration

The interactive map shows factory locations in Bareilly with the following features:

• Main Production Facility: Primary manufacturing unit (5,000 meals/day)
• Quality Control Center: Food safety testing facility
• Packaging & Distribution Hub: Logistics coordination (10,000 packages/day)
• Cold Storage Facility: Temperature-controlled storage (500 tons capacity)

Customizing Locations

To update factory locations, edit the factoryLocations array in script.js:

const factoryLocations = [
    {
        name: "Your Factory Name",
        coords: [latitude, longitude],
        description: "Factory description",
        capacity: "Production capacity"
    }
    // Add more locations as needed
];

📺 Live Stream Integration

The website includes placeholder livestream functionality. To integrate real streams:

1. Update the streamUrls object in script.js with your actual stream URLs
2. Replace the placeholder content in the openLivestream() function
3. Consider integrating with services like:
   • YouTube Live
   • Twitch
   • Custom RTMP streams
   • WebRTC solutions

📱 Responsive Design

The website is fully responsive with breakpoints at:

• Desktop: 1200px and above
• Tablet: 768px - 1199px
• Mobile: Below 768px

Mobile Features

• Hamburger navigation menu
• Touch-friendly buttons and forms
• Optimized image sizes
• Stacked layouts for better readability

🎨 Customization

Colors

The website uses a green color scheme representing freshness and nature:

• Primary Green: #2c5530
• Light Green: #4a7c59
• Background: #f8fffe

To change colors, update the CSS variables or search and replace color values in styles.css.

Images

All images are sourced from Unsplash for demonstration. Replace with your actual factory photos:

• Hero image: Professional kitchen shot
• Gallery images: Various facility photos
• Maintain aspect ratios for best results

Content

Update the following in index.html:

• Company contact information
• Service descriptions
• Statistics and numbers
• Certification details

📧 Contact Form

The contact form includes:

• Required fields: Company name, contact person, phone, email
• Optional fields: Employee count, service type, additional requirements
• Validation: Email format, phone number format, required field checks
• Success notification: User feedback on form submission

Backend Integration

To make the form functional:

1. Create a server endpoint to handle form submissions
2. Update the form action in index.html
3. Add CSRF protection for security
4. Implement email notifications

🔧 Browser Support

• Chrome: 60+
• Firefox: 60+
• Safari: 12+
• Edge: 79+

Required Features

• CSS Grid and Flexbox
• ES6 JavaScript features
• Intersection Observer API
• Fetch API (for future backend integration)

📈 Performance Optimization

The website is optimized for performance:

• Minimal dependencies: Only essential external libraries
• Optimized images: Compressed and properly sized
• CSS animations: Hardware-accelerated transforms
• Lazy loading: Images load as needed
• Minification ready: Code can be minified for production

🚀 Deployment

Static Hosting Options

• Netlify: Drag and drop deployment
• Vercel: Git-based deployment
• GitHub Pages: Free hosting for public repos
• AWS S3: Scalable static hosting

Steps for Deployment

1. Ensure all file paths are relative
2. Test the website locally
3. Upload files to your hosting provider
4. Configure custom domain (optional)
5. Set up SSL certificate

🔒 Security Considerations

• Form validation: Client-side validation implemented
• XSS protection: Sanitize any user inputs
• HTTPS: Use SSL certificates in production
• Content Security Policy: Implement CSP headers
• Regular updates: Keep dependencies updated

📞 Support

For questions or customizations:

• Review the code comments for detailed explanations
• Check browser console for any JavaScript errors
• Ensure all files are in the same directory
• Verify internet connection for external resources (fonts, icons, maps)

🎯 Future Enhancements

Potential improvements for the website:

• CMS Integration: Content management system
• Multi-language Support: Hindi and English versions
• Online Ordering: Direct order placement system
• Customer Portal: Account management for corporate clients
• Analytics: Google Analytics or similar tracking
• SEO Optimization: Meta tags and structured data
• Progressive Web App: Offline functionality

---

Built with ❤️ for Navyug Service

This website showcases modern web development practices while maintaining simplicity and performance.