A modern, interactive web-based gas station pump simulator featuring animated UI, glassmorphism effects, and real-time theming.
- 🎮 Realistic Gas Pump Simulation: Choose fuel type, calculation mode (liters/price), and simulate dispensing
- 🎨 Live Animated Gradients: Dynamic, animated backgrounds and panels for a lively, modern look
- 🪟 Glassmorphism UI: Liquid glass effect on main panels, cards, navbar, and feedback for a premium feel
- 💬 Minimalistic Feedback System: Floating feedback/report bug button with expandable form and quick feedback options
- 📘 Quick Guide: Built-in help modal for instant onboarding
- 🌈 Dynamic Theming: Instantly switch between Petrol, Diesel, and Xfuel themes
- 📱 Fully Responsive Design: Works beautifully on desktop, tablet, and mobile devices
- 🎵 Sound Effects: Realistic pump sounds and UI interactions
- 🧾 Print Bill Feature: Generate and print detailed fuel receipts
- Visit the Live Demo: FuelSim Live
- Or Clone Locally:
git clone https://github.com/dev-harshhh19/FuelSim-Gas-Station-Pump-Simulator.git cd FuelSim-Gas-Station-Pump-Simulator - Open
index.htmlin your browser for the landing page - Click "Enter Simulator" to access the main application
No build step or server required!
FuelSim-Gas-Station-Pump-Simulator/
├── index.html # Landing page
├── simulator.html # Main simulator application
├── styles.css # All styles, glassmorphism & dynamic themes
├── script.js # Interactive logic and functionality
├── logo.png # Application logo
├── privacy.html # Privacy policy page
├── terms.html # Terms of service page
└── README.md # Project documentation
- ✨ Glassmorphism: All major panels and cards use a frosted glass effect for a modern, premium look
- 🌊 Animated Gradients: Subtle, moving backgrounds bring the UI to life
- 🎈 Floating Feedback Button: Minimal, always-accessible feedback/report bug system
- ❓ Quick Guide Modal: Click the help icon in the navbar for instant instructions
- 📱 Mobile-First: Fully responsive design with mobile menu and touch-friendly controls
- 🎯 Accessibility: Keyboard navigation support and screen reader friendly
- 🎨 Themes: Change fuel type to see the UI color and style adapt instantly
- 📝 Feedback: All feedback is handled in-app; no backend required
- 🪟 Glass Effect: Tweak the
.glassclass instyles.cssfor more/less blur or transparency - 🎵 Sound: Toggle sound effects on/off
- 💰 Pricing: Modify fuel prices in the JavaScript configuration
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Styling: Tailwind CSS, Custom CSS with Glassmorphism
- Icons: Font Awesome 6.4.2
- Fonts: Share Tech Mono, Digital-7
- Audio: Web Audio API with Mixkit sounds
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- 👨💻 Developer: Harshad Nikam
- 🎨 Icons: Font Awesome
- 🔤 Fonts: Share Tech Mono, Digital-7
- 🎵 Sounds: Mixkit
- 🎨 Styling: Tailwind CSS
- 📧 Email: help.fuelsim.com
- 🐙 GitHub: @dev-harshhh19
- 💼 LinkedIn: Harshad Nikam
- 📱 Instagram: @dev.harshhh19
If you find this project helpful, consider supporting development:
- ₿ Bitcoin:
1JcifknwxVZDbQafrqBVyVN32FBXhdPCHS - Ξ Ethereum:
0xb797e1a085E39f15841083E6FBB0b4750ff1A173 - 💰 USDT (TRC20):
0xb797e1a085E39f15841083E6FBB0b4750ff1A173
This project is for educational and demonstration purposes only. See terms.html for details.
Enjoy fueling up with FuelSim! ⛽🚗
Made with ❤️ by Harshad Nikam