⚙️ ToolBox Web Application

A modern, clean, and professional multi–tool web application built using HTML, CSS, and vanilla JavaScript.
This project contains 8 fully–functional tools, each placed inside its own module, along with standalone Login and About pages — all following a consistent black & white theme, neumorphism shadows, smooth animations, and a responsive layout.

The goal of this project is to demonstrate front-end skills through a real-world style UI/UX and structured modular system that scales cleanly.

🌐 Live Demo

🚀 Features

✅ 8 Functional Tools

Each tool is professionally styled and coded in its own folder:

• 🧮 Calculator
• ☁️ ٌWeather dashboard
• 🔤 Text Generator
• 🗒️ Note App
• 💱 Currency Converter
• 🎨 Drawing App
• 🖼️ Image Editor
• 🧩 Memory Card Game

---

🎨 Consistent UI/UX

• Black & white theme
• Neumorphism shadows
• Smooth hover animations
• Fully responsive grid (4 cards per row)
• Modern card-based layout
• Button hover effects
• Clean typography

---

📄 Additional Pages

• About Page (with animations & intro section)
• Login Page (animated, centered, responsive)

---

🖼 Media & Assets

• pics/ folder containing 8 images (one for each tool)
• logo.png for branding
• All assets loaded locally for offline support

---

🛠 Technologies Used

Technology	Usage
HTML5	Page structure + modular tool layouts
CSS3	Neumorphism design, animations, responsive grid
JavaScript (Vanilla)	All tool logic + DOM handling
Bootstrap 5	Navbar + basic layout help
Font Awesome	Icons across tools
ES6 Features	Clean, modern JS code

---

📁 Project Structure

root/
│
├─ tools/                             # All 8 tools in separate modules
│  ├─ calculator/
│  │   ├─ index.html
│  │   ├─ style.css
│  │   └─ script.js
│  │
│  ├─ calculator-advanced/
│  │   ├─ index.html
│  │   ├─ style.css
│  │   └─ script.js
│  │
│  ├─ text-generator/
│  │   ├─ index.html
│  │   ├─ style.css
│  │   └─ script.js
│  │
│  ├─ note-app/
│  │   ├─ index.html
│  │   ├─ style.css
│  │   └─ script.js
│  │
│  ├─ currency-converter/
│  │   ├─ index.html
│  │   ├─ style.css
│  │   └─ script.js
│  │
│  ├─ drawing-app/
│  │   ├─ index.html
│  │   ├─ style.css
│  │   └─ script.js
│  │
│  ├─ image-editor/
│  │   ├─ index.html
│  │   ├─ style.css
│  │   └─ script.js
│  │
│  └─ memory-game/
│      ├─ index.html
│      ├─ style.css
│      └─ script.js
│
│
├─ about/
│  ├─ index.html
│  ├─ style.css
│  └─ script.js
│
├─ login/
│  ├─ index.html
│  ├─ style.css
│  └─ script.js
│
│
├─ pics/                              # 8 preview images for cards
│  ├─ project1.png
│  ├─ project2.png
│  ├─ project3.png
│  ├─ project4.png
│  ├─ project5.png
│  ├─ project6.png
│  ├─ project7.png
│  └─ project8.png
│
│
├─ index.html                         # Main dashboard (home)
├─ style.css
├─ script.js
│
├─ logo.png                           # Main site logo
├─ README.md
└─ LICENSE

▶️ How to Run

You don’t need any server or dependencies. The project is 100% HTML/CSS/JS.

Option 1 — Open Directly

Simply open:

index.html

Everything works locally.

Option 2 — Local Server (recommended for animations)

For VS Code users:

Right-click → Open with Live Server

🎨 UI Theme (Black & White Neumorphism)

All pages follow:

.White background

.Soft shadows

.Smooth scale-in hover

.Curve radius: 18px

.Button hover: invert colors

.Card hover: scale 1.05–1.1

🛡️ License

This project is licensed under the Apache License 2.0 📄
Feel free to use, modify, and distribute — just keep the required notices and attribution.

👉 Full license details can be found in the LICENSE file.

---

Made with ❤️ by danialsource