Project Overviewlink

Vhato is a responsive instant messaging chat application HTML template built on Bootstrap 5, featuring a complete user authentication flow, contact management, group chat, emoji picker, and other chat functionalities. It supports three theme modes: Light, Dark, and RTL, making it ideal for quickly building web-based chat applications.

Tech Stacklink

• Bootstrap 5.3
• Gulp 4.0 (Build Tool)
• Sass (Style Preprocessing)
• glightbox (Image Lightbox)
• Swiper (Carousel Component)
• @simonwep/pickr (Color Picker)
• Node-waves (Wave Animation)

Project Structurelink

Vhato_HTML_v1.1.0/
├── Documentation/          # Template Documentation
│   ├── index.html          # Documentation Homepage
│   ├── setup.html          # Environment Setup Guide
│   ├── light.html          # Light Theme Guide
│   ├── dark.html           # Dark Theme Guide
│   └── rtl.html            # RTL Theme Guide
└── HTML/                   # Theme Source Code
    ├── gulpfile.js         # Gulp Build Configuration
    ├── package.json        # Dependency Management
    └── src/                # Source Code
        ├── index.html      # Main Chat Page
        ├── auth-login.html # Login Page
        ├── auth-register.html # Registration Page
        └── pages-starter.html # Blank Page Template

Core File Descriptionlink

• HTML/gulpfile.js — Gulp build task configuration (compiles Sass, auto-prefixes, minifies CSS/JS)
• HTML/package.json — Node dependency definitions, includes all third-party libraries
• HTML/src/index.html — Main chat interface with conversation, contacts, settings, and other tabs
• HTML/src/auth-login.html — User login page
• HTML/src/auth-register.html — User registration page
• HTML/src/pages-starter.html — Blank starter page, can be used as a base for custom pages

Quick Startlink

cd Vhato_HTML_v1.1.0/HTML
npm install
gulp

Running gulp will start a BrowserSync local server and watch for file changes, automatically opening a preview in the browser.

Usage Recommendationslink

• For custom pages, it's recommended to copy pages-starter.html as a base to avoid breaking the existing structure
• This template contains only the frontend interface; backend logic needs to be integrated separately