🧩 CRM Arena

Interactive all-in-one simulation of four leading CRM platforms

A unified SaaS-style CRM ecosystem simulating marketing, sales, and pipeline platforms in a single interactive application.

A fully interactive, single-file CRM experience. No server. No build tools. No dependencies.
Open the HTML file in any browser and explore all four platforms instantly.

---

📸 Platforms at a Glance

Platform	Color	Specialty
🟠 HubSpot CRM	#FF7A59	Marketing automation & lead nurturing
🟢 Zoho CRM	#E42527	Balanced CRM with workflow automation
🟣 Freshsales	#6C47FF	Sales-focused CRM with AI lead scoring
🟩 Pipedrive	#21993B	Visual pipeline & deal tracking

---

✨ Features

• Zero dependencies — pure HTML, CSS, and vanilla JavaScript in a single .html file
• Four complete CRM simulations — each with its own design language, color palette, and UI components
• Instant platform switching — jump between CRMs with smooth animated transitions
• Live form functionality — Save Lead, Save Contact, and Save Deal buttons insert real rows into tables
• Live search — filter tables in real time across all platforms
• Responsive design — works on desktop, tablet, and mobile
• Interactive dashboards — animated stat counters, progress bars, and charts
• Kanban-style pipelines — drag-inspired deal stage visualizations (Pipedrive)
• Search overlay — full-page search with live filtering (Pipedrive)

---

🗂️ CRM Modules

Each platform simulation includes the following modules:

├── 🏠  Hero Section          — Brand identity, key CTAs, mockup UI
├── 📊  Dashboard             — KPIs, charts, conversion metrics
├── 🌱  Lead Management       — Add, view, and search leads
├── 👤  Contact Management    — Add, view, and search contacts
├── 💼  Deal Management       — Add deals, track pipeline stages
└── 🔁  Sales Pipeline        — Visual stage-based pipeline view

---

🚀 Getting Started

No installation, no setup — just open the file.

# Clone the repository
git clone https://github.com/your-username/crm-platform-simulations.git

# Navigate into the folder
cd crm-platform-simulations

# Open in your browser
open CRM_Fixed.html
# — or double-click the file in your file explorer

---

🗃️ File Structure

crm-platform-simulations/
└── CRM_Fixed.html          # The complete all-in-one simulation

All CSS, JavaScript, and HTML live inside a single self-contained file — ideal for sharing, emailing, or hosting on any static server.

---

🛠️ How It Works

Platform Wrapper Divs
│
├── #hs-platform            ← HubSpot CRM (active by default)
├── #zoho-platform          ← Zoho CRM
├── #freshsales-platform    ← Freshsales
└── #pipedrive-platform     ← Pipedrive

The switchCRM(target) JavaScript function toggles the .platform-open class on each wrapper, showing one platform at a time while hiding the others. All interactions (saving leads, contacts, deals) are handled with scoped vanilla JS using unique element IDs per platform.

---

🎨 Design Highlights

• Inter typeface from Google Fonts for a clean, modern feel
• Each platform uses its own CSS custom properties (--hs-orange, --zoho-blue, --pd-green, etc.)
• Micro-interactions: button hover lifts, row flash highlights on save, animated counters
• Mobile-first breakpoints at 768px and 480px for all four platforms

---

🧩 Platform Feature Matrix

Feature	HubSpot	Zoho	Freshsales	Pipedrive
Dashboard with KPIs	✅	✅	✅	✅
Lead Management Form	✅	✅	✅	—
Contact Management Form	✅	✅	—	✅
Deal Management Form	—	✅	✅	✅
Live Search / Filter	✅	✅	✅	✅
Search Overlay	—	—	—	✅
Sales Pipeline View	✅	✅	✅	✅
AI / Smart Insights	✅	✅	✅	—

---

⚠️ Disclaimer

This project is created for educational and demonstration purposes only.
It is not affiliated with or endorsed by HubSpot, Zoho, Freshworks, or Pipedrive.

📄 License

MIT License 

---

👩‍💻 Author

Reaishma N
📧 hayagreevar9018@gmail.com 🌐 https://reaishma.github.io/Portfolio-website/

Made with ❤️ using pure HTML · CSS · JavaScript