Google Gemini Clone

📜 Project Overview

This repository is a front-end clone of Google’s Gemini chatbot interface, designed using HTML, CSS, and JavaScript. It replicates the visual aesthetics and some basic interactions of Google Gemini, with a focus on UI/UX. The project includes a modern, responsive design, theme toggle (dark and light modes), and mock chatbot responses for a smooth user experience.

✨ Features

• Responsive UI Design: Adapts to various screen sizes.
• Dark and Light Mode Toggle.
• Interactive Chat UI with predefined suggestions.
• Mock API Integration for chatbot responses.
• Custom Styling using Google Fonts and Material Icons.

🖥️ Technologies Used

• HTML: Structure of the webpage.
• CSS: Styling and themes.
• JavaScript: Functionality and interactivity.
• Google Fonts: For clean and professional typography.
• Material Icons: For modern and consistent visual elements.

🚀 Getting Started

Prerequisites

Make sure you have a modern web browser like Google Chrome, Firefox, or Microsoft Edge to run the project seamlessly.

Installation

1. Clone the repository: git clone https://github.com/hariomgupta70427/Google-Gemini-Clone.git

2. Navigate into the project directory: cd Google-Gemini-Clone

3. Open the index.html file in your browser to view the project:

🔧 Project Structure

├── index.html            # Main HTML file for the project
├── style.css             # CSS file for styling
├── script.js             # JavaScript file for interactions
├── images/               # Contains project images and icons
└── README.md             # Project documentation

🗂️ Detailed Description

1. index.html

• Defines the main structure of the chatbot UI.
• Includes headers, chat containers, and footer elements for user input.

2. style.css

• Custom styling for dark and light themes.
• Uses CSS variables for easy theme management.

3. script.js

• Handles theme toggling, chat interactions, and mock API responses.
• Utilizes state management to simulate user interactions.

Screenshots

Light Mode

Dark Mode

📧 Contact

For any inquiries or feedback, reach out to me at guptahariom049@gmail.com