Home Dashboard - Personal Homepage

A beautiful, responsive personal homepage designed to be your new tab page or home screen. Features bookmark management, search functionality, real-time clock, weather information, and quick access tools.

✨ Features

🔍 Smart Search Bar

• Google search integration
• Direct URL navigation
• Keyboard shortcut support (Ctrl/Cmd + K)

⏰ Real-time Clock & Date

• Live updating time display
• Current date with day of the week
• Beautiful gradient styling

🌤️ Weather Widget

• Automatic location detection
• Current temperature display
• Weather condition icons
• Updates every 10 minutes

📚 Bookmark Management

• Pre-loaded popular websites
• Add custom bookmarks with icons
• One-click bookmark deletion
• Local storage persistence
• Keyboard shortcut (Ctrl/Cmd + B)

🛠️ Quick Tools

• Google Translate
• Calculator
• Google Keep Notes
• Google Calendar

📱 Responsive Design

• Works on all devices (phone, tablet, desktop)
• Touch-friendly interface
• Optimized for different screen sizes

🚀 Getting Started

Local Development

1. Clone or download this repository
2. Open index.html in your web browser
3. That's it! No build process required.

Setting as New Tab Page

Chrome/Edge:

1. Install a "Custom New Tab" extension
2. Set the extension to load your hosted page URL

Firefox:

1. Install "New Tab Override" extension
2. Configure it to use your hosted page

🌐 GitHub Pages Deployment

1. Push this repository to GitHub
2. Go to repository Settings
3. Navigate to Pages section
4. Select "Deploy from a branch"
5. Choose "main" branch and "/ (root)" folder
6. Your site will be available at https://yourusername.github.io/your-repo-name

⚙️ Customization

Adding Weather API (Optional)

The weather widget currently uses mock data. To get real weather:

1. Sign up for a free API key at OpenWeatherMap
2. Replace the mock data section in script.js with:

const API_KEY = 'your-api-key-here';
const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
);
const weatherData = await response.json();

Customizing Bookmarks

Edit the defaultBookmarks array in script.js:

const defaultBookmarks = [
    { name: 'Your Site', url: 'https://yoursite.com', icon: 'fas fa-globe' },
    // Add more bookmarks...
];

Styling Changes

• Colors: Edit CSS variables in :root section of styles.css
• Fonts: Change the Google Fonts import in index.html
• Layout: Modify grid settings in styles.css

Icons

This project uses Font Awesome for icons. Browse their library for icon class names.

🎨 Color Scheme

The default theme uses a beautiful gradient color scheme:

• Primary: #667eea (Soft Blue)
• Secondary: #764ba2 (Purple)
• Accent: #f093fb (Pink)

📁 File Structure

├── index.html          # Main HTML file
├── styles.css          # All styling and animations
├── script.js           # JavaScript functionality
├── README.md           # This file
└── .github/
    └── copilot-instructions.md  # Development instructions

🔧 Browser Support

• Chrome/Chromium (recommended)
• Firefox
• Safari
• Edge

📄 License

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

🤝 Contributing

Feel free to fork this project and submit pull requests for improvements!

💡 Tips

• Keyboard Shortcuts:

  • Ctrl/Cmd + K: Focus search bar
  • Ctrl/Cmd + B: Add new bookmark
  • Escape: Close modal

• Bookmark Icons: Use Font Awesome class names (e.g., fab fa-github, fas fa-envelope)

• Performance: The page is optimized for fast loading with minimal dependencies

🆘 Troubleshooting

Weather not working?

• Check if location permissions are granted
• Consider adding a real weather API key

Bookmarks not saving?

• Ensure localStorage is enabled in your browser
• Check if you're running from file:// (use a local server instead)

Responsive issues?

• Clear browser cache
• Check CSS media queries in styles.css

---

Made with ❤️ for a better browsing experience!