mirror of
https://github.com/handsomezhuzhu/AeroStart.git
synced 2026-02-20 12:00:15 +00:00
56dd6d8bf2
Implement a modern, customizable browser start page with comprehensive features: - Multi-theme support with 8 preset color schemes - Custom wallpaper system supporting images and videos with multiple fit modes - Integrated search functionality with 5 major search engines (Google, Baidu, Bing, DuckDuckGo, Bilibili) - Real-time clock component with 12/24 hour format options - Dynamic background blur effect during search for enhanced focus - Complete i18n system with English and Chinese language support - Responsive design with smooth animations and transitions - Local storage integration for persistent user preferences - Context menu system for quick settings access - Toast notification system for user feedback - Error boundary for robust error handling Tech Stack: - React 19 with TypeScript - Vite 6 for build tooling - Tailwind CSS for styling - Local storage for data persistence Project Structure: - Core components: Clock, SearchBox, SettingsModal, ThemeSettings, WallpaperManager - Utility modules: storage management, search suggestions - Context providers: Toast notifications, i18n - Type definitions and constants configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2.9 KiB
2.9 KiB
AeroStart
A modern, customizable browser start page with elegant search experience and personalized settings.
✨ Features
- 🎨 Multi-Theme Support - 8 preset theme colors to choose from
- 🖼️ Custom Wallpapers - Support for image and video backgrounds with multiple fit modes
- 🔍 Multiple Search Engines - Built-in Google, Baidu, Bing, DuckDuckGo, Bilibili
- ⏰ Real-time Clock - Support for 12/24 hour format with optional seconds display
- 🎭 Dynamic Blur - Background automatically blurs during search for enhanced focus
- 💾 Local Storage - All settings automatically saved to browser local storage
- 📱 Responsive Design - Perfect adaptation to all screen sizes
- 🎬 Smooth Animations - Carefully designed transitions and interactive animations
🚀 Quick Start
Prerequisites: Node.js 16+
Install Dependencies
pnpm install
# or
npm install
Run Development Server
pnpm dev
# or
npm run dev
Visit http://localhost:3000 to view the application.
Build for Production
pnpm build
# or
npm run build
🎯 Usage Guide
Search Functionality
- Enter keywords in the search box and press Enter to search
- Click the icon on the left side of the search box to switch search engines
- Background automatically blurs during search to enhance focus
Settings Panel
- Right-click the background to enter Dashboard mode
- Click the settings icon in the top right corner to open the settings panel
- Customizable options:
- Clock format (12/24 hour)
- Background wallpaper (preset or custom URL)
- Theme color
- Search box opacity
- Background blur intensity
Wallpaper Settings
- Support for image and video backgrounds
- 5 fit modes: Cover, Contain, Fill, Center, Repeat
- Add custom wallpaper URLs
🛠️ Tech Stack
- Framework: React 19
- Build Tool: Vite 6
- Language: TypeScript
- Styling: Tailwind CSS
📁 Project Structure
AeroStart/
├── components/ # React components
│ ├── Clock.tsx # Clock component
│ ├── SearchBox.tsx # Search box component
│ ├── SettingsModal.tsx # Settings panel
│ └── ...
├── utils/ # Utility functions
├── context/ # React Context
├── constants.ts # Constants configuration
├── types.ts # TypeScript type definitions
├── App.tsx # Main application component
└── index.tsx # Application entry point
🎨 Customization
Add Search Engine
Edit the SEARCH_ENGINES array in constants.ts:
{
name: 'Engine Name',
urlPattern: 'https://example.com/search?q=',
icon: 'SVG icon string'
}
Add Theme Color
Edit the THEMES array in constants.ts:
{ name: 'Theme Name', hex: '#colorcode' }
📄 License
MIT License
🤝 Contributing
Issues and Pull Requests are welcome!