Affan - PWA Mobile HTML Template

Affan is a cutting-edge, multipurpose, PWA-ready mobile HTML5 template built with the latest web technologies. It features a modern and clean design, Vanilla JavaScript, Bootstrap 5, Progressive Web App (PWA) support, and full Dark Mode & RTL compatibility. Designed following current UI/UX trends and developed using modern coding standards, Affan delivers both performance and visual excellence.

This versatile and scalable template is carefully structured with well-organized and clearly commented code, making customization fast and developer-friendly. Fully responsive and optimized for mobile devices, it ensures a seamless and consistent user experience across all screen sizes.

Affan is specifically crafted for building high-quality Progressive Web Applications (PWAs) that offer a smooth, mobile-first experience. It includes a rich collection of pre-built HTML, CSS, and JavaScript components, allowing developers to quickly launch projects and easily adapt them to specific requirements.

Perfect for a wide range of use cases, Affan is suitable for Startups, Agencies, Businesses, Courses, Corporate websites, eCommerce stores, Travel platforms, News portals, Portfolios, Magazines, and Blogs. Build virtually any mobile website or application with confidence using Affan.

Key Features:

• Built with Bootstrap 5
  Utilizes the latest Bootstrap framework for responsive and flexible layouts.
• Progressive Web App (PWA) Ready
  Enables app-like performance with offline access and installability.
• Pure Vanilla JavaScript
  Lightweight and dependency-free JavaScript for better performance.
• Reusable UI Elements
  A rich collection of ready-to-use components for faster development.
• Pre-built Pages
  Professionally designed pages to launch projects quickly.
• Node Package Manager (NPM) Support
  Simplifies dependency management and project setup.
• Gulp 4 Workflow Included
  Automates tasks such as compiling, minifying, and optimizing assets.
• SCSS Architecture
  Modular and maintainable styling with powerful customization options.
• Dark Mode Support
  Built-in dark theme for improved accessibility and user preference.
• RTL (Right-to-Left) Ready
  Fully supports RTL languages such as Arabic and Hebrew.
• Modern CSS3 Styling
  Uses advanced CSS techniques for smooth and modern UI effects.
• HTML5 Markup
  Clean and semantic HTML structure for better SEO and accessibility.
• Multiple Header Layouts
  Choose from various header styles to match your brand.
• Multiple Footer Menu Styles
  Flexible footer layouts for enhanced navigation.
• Left & Right Sidebar Layouts
  Provides versatile sidebar options for different layouts.
• Alerts & Toast Notifications
  Interactive alerts to deliver real-time user feedback.
• Automatic Online/Offline Detection
  Detects connectivity changes and notifies users instantly.
• Advanced Form Elements
  Enhanced input fields for better data collection.
• Autocomplete Form Inputs
  Improves user experience with intelligent input suggestions.
• Range Slider Inputs
  Allows intuitive value selection with slider controls.
• Accordion Components
  Organizes content efficiently using collapsible sections.
• Timeline Layouts
  Displays chronological information in a clean, visual format.
• Isotope Image Gallery
  Dynamic and filterable image galleries with smooth transitions.
• User Rating System
  Enables users to rate content or products easily.
• Extensive Helper & Utility Elements
  Includes utility classes to speed up development.
• Tiny Slider Integration
  Lightweight slider for smooth and responsive carousels.
• Data Tables
  Structured tables for managing and displaying complex data.
• Countdown Timers & Counter Animations
  Adds urgency and engagement through animations.
• ApexCharts Integration
  Interactive and responsive charts for data visualization.
• Highly Versatile Mobile Template
  Suitable for a wide range of mobile-first applications.
• Modern & Clean UI Design
  Focused on usability with a polished visual appearance.
• Developed with the Latest Technologies
  Ensures future-ready performance and standards.
• Well-Tested, Bug-Free Code
  Thoroughly tested for stability and reliability.
• Cross-Browser Compatibility
  Consistent performance across all major browsers.
• Dedicated Notifications Page
  Centralized interface for managing user notifications.
• Language Selection Page
  Allows users to easily switch between languages.
• Password Strength Meter
  Provides real-time feedback on password security.
• OTP Verification Pages
  Secure one-time password verification flows.
• Complete Shop Pages
  Ready-made pages for eCommerce functionality.
• User Profile Pages
  Structured profile layouts for user information.
• Coming Soon Page
  Professional placeholder for upcoming launches.
• Authentication Pages
  Includes login, registration, and password recovery pages.
• Unique & Professional Design
  Crafted to stand out with a premium look and feel.
• Blog Pages Included
  Pre-designed layouts for articles and content publishing.
• Google Fonts Integration
  Access to modern, web-optimized typography.
• Easy to Customize & Extend
  Developer-friendly structure for quick modifications.
• Clean, W3C-Validated Code
  Standards-compliant code for maximum compatibility.

Pre-buy FAQ:

Q. What type of template is this?
Affan is a mobile-first HTML5 template designed for modern web applications. It includes Progressive Web App (PWA) functionality, along with built-in Dark Mode and RTL support.

Q. What will I receive after purchasing?
You will receive all HTML files, CSS, JavaScript, and supporting assets included in the template package. Please note that demo images are not included in the downloadable files.

Q. What is a PWA?
PWA stands for Progressive Web App. It is a web application that delivers an app-like experience using standard web technologies such as HTML, CSS, and JavaScript, including offline support, fast loading, and installability on supported devices.

Q. What skills are required to customize this template?
No advanced skills are required. Basic knowledge of editing HTML files is sufficient to customize the template.

Q. What are NPM, Gulp, and SCSS used for?
NPM is used to manage project dependencies, Gulp automates development tasks such as compiling and optimization, and SCSS helps write cleaner, more maintainable CSS. These tools are optional but beneficial for advanced customization.

Q. Can I still edit the template if I don’t know NPM, Gulp, or SCSS?
Yes. You can fully customize the template by editing the provided HTML and CSS files without using these tools.

Q. Is this a WordPress theme?
No, this is not a WordPress theme.

Q. Can this template be converted into a WordPress theme?
Yes, the template can be converted into a WordPress theme by a developer.

Q. Is this a native mobile app? Can it be published on the Google Play Store or Apple App Store?
No, this is a web-based template. To publish it on the Play Store or App Store, it must first be converted into a native application.

Q. Can this template be converted into a native app?
Yes, it can be converted into a native app using technologies such as WebView, Cordova, or similar frameworks.

Q. How many websites can I build with a single license?
A single regular license allows you to use the template on one domain only.

Please Note:

All Credits:

• All credits are given in the documentation file.