Frezeer AI - Smart Chatbot

A modern, interactive chatbot website with a snowy technological interface featuring the Frezeer logo. Built with HTML, CSS, and JavaScript with Gemini API integration capabilities.

🌟 Features

• Snowy Technological Interface: Beautiful animated snow effects with glowing elements
• Frezeer Logo Integration: Custom logo with glowing effects and animations
• Real-time Chat: Interactive chat interface with typing indicators
• Gemini API Ready: Prepared for Google's Gemini AI integration
• Responsive Design: Works perfectly on desktop and mobile devices
• Modern UI/UX: Glassmorphism effects, smooth animations, and particle effects
• System Status Panel: Real-time status indicators for AI engine

🚀 Quick Start

1. Clone or download the project files
2. Open index.html in your web browser
3. Start chatting with the Frezeer AI chatbot!

🔧 Gemini API Integration

To integrate with Google's Gemini API:

Step 1: Get API Key

1. Go to Google AI Studio
2. Create a new API key
3. Copy your API key

Step 2: Update the JavaScript

Replace the mock response system in script.js with actual Gemini API calls:

// In the FrezeerChatbot class, replace the generateResponse method:

async generateResponse(userMessage) {
    try {
        const geminiAPI = new GeminiAPI('YOUR_API_KEY_HERE');
        const response = await geminiAPI.generateResponse(userMessage);
        return response;
    } catch (error) {
        console.error('API Error:', error);
        return 'I apologize, but I encountered an error. Please try again.';
    }
}

Step 3: Environment Variables (Recommended)

For security, store your API key in an environment variable:

// Create a config.js file
const config = {
    GEMINI_API_KEY: 'your_api_key_here'
};

// In script.js
const geminiAPI = new GeminiAPI(config.GEMINI_API_KEY);

🎨 Customization

Colors and Themes

The color scheme uses cyan/blue tones. To customize:

/* In styles.css, update these variables */
:root {
    --primary-color: #00ffff;
    --secondary-color: #0080ff;
    --background-gradient: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
}

Logo Customization

• Replace frezeer_logo.jpg with your own logo
• Adjust logo size in CSS: .logo { width: 120px; height: 120px; }

Animation Effects

• Snow animation speed: Modify animation: snowfall 10s in CSS
• Glow effects: Adjust box-shadow values in .logo class
• Particle effects: Customize in the JavaScript click event handler

📱 Responsive Design

The website is fully responsive and includes:

• Mobile-optimized layout
• Touch-friendly buttons
• Adaptive chat interface
• Responsive status panel

🔒 Security Considerations

• Never expose API keys in client-side code for production
• Use environment variables or server-side proxy
• Implement rate limiting for API calls
• Add input validation and sanitization

🛠️ Browser Compatibility

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

📁 File Structure

FREZEER APP/
├── index.html          # Main HTML file
├── styles.css          # CSS styles and animations
├── script.js           # JavaScript functionality
├── frezeer_logo.jpg    # Logo image
└── README.md           # This file

🎯 Features in Detail

Chat Interface

• Real-time message display
• Typing indicators
• Message timestamps
• Smooth scroll animations
• User and bot message differentiation

Visual Effects

• Animated snowfall
• Glowing logo effects
• Particle effects on click
• Gradient text animations
• Glassmorphism UI elements

Interactive Elements

• Hover effects on buttons
• Focus states on input fields
• Loading animations
• Status indicators

🚀 Deployment

Local Development

Simply open index.html in a web browser.

Web Server Deployment

1. Upload all files to your web server
2. Ensure the logo image path is correct
3. Test the Gemini API integration

GitHub Pages

1. Push code to GitHub repository
2. Enable GitHub Pages in repository settings
3. Select source branch (usually main)

🔧 Troubleshooting

Common Issues

1. Logo not displaying

   • Check file path in HTML
   • Ensure image file exists
   • Verify file permissions

2. API not working

   • Verify API key is correct
   • Check network connectivity
   • Review browser console for errors

3. Animations not working

   • Ensure CSS is properly loaded
   • Check browser compatibility
   • Verify JavaScript is enabled

📞 Support

For issues or questions:

1. Check the browser console for errors
2. Verify all files are in the correct location
3. Test with different browsers
4. Ensure API key is valid (if using Gemini)

🎨 Design Credits

• Fonts: Orbitron (for tech feel) and Roboto (for readability)
• Icons: Font Awesome 6.0
• Animations: Custom CSS and JavaScript
• Color Scheme: Cyan/Blue technological theme

📄 License

This project is open source and available under the MIT License.

---

Enjoy your Frezeer AI chatbot experience! 🤖❄️✨