mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2025-12-18 14:35:11 +00:00
a92d7a51c6
- Created platform/index.html: Landing page with glassmorphism, animations, particle effects - Created platform/dashboard.html: Interactive analytics dashboard with live data - Created platform/chat.html: AI conversational interface with intelligent responses - All pages connected to live API endpoints - Responsive design with mobile support - Features: API explorer, code examples, tool comparison, real-time search - Deployment verification docs added
221 lines
6.2 KiB
Markdown
221 lines
6.2 KiB
Markdown
# 🚀 AI Tools Hub - Futuristic Platform
|
|
|
|
A cutting-edge, modern web UI/UX platform showcasing 32 AI coding tools with interactive features, real-time data, and stunning visual design.
|
|
|
|
## ✨ Features
|
|
|
|
### 🎨 Design Elements
|
|
- **Glassmorphism Effects** - Modern translucent cards with backdrop blur
|
|
- **Animated Background** - Dynamic gradient animations with particle effects
|
|
- **Smooth Transitions** - Buttery-smooth animations and hover effects
|
|
- **Gradient Typography** - Eye-catching gradient text throughout
|
|
- **Responsive Design** - Fully responsive across all devices
|
|
|
|
### 🔥 Interactive Components
|
|
|
|
#### Landing Page (`index.html`)
|
|
- Hero section with live statistics
|
|
- API Explorer with "Try It" buttons
|
|
- Dynamic tools grid (loads from API)
|
|
- Code examples in Python, JavaScript, PowerShell
|
|
- Smooth scroll navigation
|
|
- Copy-to-clipboard functionality
|
|
- Feature showcase grid
|
|
|
|
#### Dashboard (`dashboard.html`)
|
|
- **Sidebar Navigation** - Quick access to all sections
|
|
- **Real-time Stats** - Total tools, API endpoints, active tools, open source count
|
|
- **Search Functionality** - Filter tools by name, description, or type
|
|
- **Tools Table** - Sortable, filterable table of all 32 tools
|
|
- **Feature Matrix** - Visual representation of feature adoption
|
|
- **Tools Chart** - Distribution by type (IDE, Web, Agent, etc.)
|
|
- **Comparison View** - Side-by-side tool comparison
|
|
- **Theme Toggle** - Light/dark mode switcher
|
|
|
|
## 🎯 Pages
|
|
|
|
### 1. **Landing Page** - `index.html`
|
|
The main entry point featuring:
|
|
- Animated hero section with stats (32 tools, 39 endpoints, 24K+ lines)
|
|
- Feature grid showcasing platform capabilities
|
|
- API Explorer with live endpoint links
|
|
- Tools showcase (first 12 tools from API)
|
|
- Code examples with syntax highlighting
|
|
- Documentation links
|
|
- Footer with social links
|
|
|
|
### 2. **Dashboard** - `dashboard.html`
|
|
Interactive analytics dashboard featuring:
|
|
- Left sidebar with navigation menu
|
|
- Top search bar with filters
|
|
- 4 stat cards with live data
|
|
- Tools distribution chart
|
|
- Feature adoption matrix
|
|
- Complete tools table with sorting
|
|
- Tool comparison section
|
|
|
|
## 🔌 API Integration
|
|
|
|
Both pages connect to the live API:
|
|
```
|
|
https://sahiixx.github.io/system-prompts-and-models-of-ai-tools/api/
|
|
```
|
|
|
|
### Endpoints Used:
|
|
- `/api/index.json` - List of all 32 tools
|
|
- `/api/tools/{slug}.json` - Individual tool details
|
|
- `/api/features.json` - Feature adoption matrix
|
|
- `/api/by-type.json` - Tools grouped by type
|
|
- `/api/statistics.json` - Aggregate statistics
|
|
|
|
## 🎨 Color Scheme
|
|
|
|
```css
|
|
--primary: #00f0ff (Cyan)
|
|
--secondary: #ff00ff (Magenta)
|
|
--accent: #7b2ff7 (Purple)
|
|
--success: #00ff88 (Green)
|
|
--warning: #ffaa00 (Orange)
|
|
--danger: #ff3366 (Red)
|
|
--dark: #0a0e27 (Dark Blue)
|
|
--darker: #060920 (Darker Blue)
|
|
```
|
|
|
|
## 🚀 Usage
|
|
|
|
### Local Development
|
|
Simply open the HTML files in a modern browser:
|
|
```bash
|
|
# Open landing page
|
|
start platform/index.html
|
|
|
|
# Open dashboard
|
|
start platform/dashboard.html
|
|
```
|
|
|
|
### Deploy to GitHub Pages
|
|
The platform works perfectly with GitHub Pages:
|
|
1. Place files in `platform/` directory
|
|
2. Enable GitHub Pages in repository settings
|
|
3. Access at: `https://[username].github.io/[repo]/platform/`
|
|
|
|
## 📱 Responsive Breakpoints
|
|
|
|
- **Desktop**: 1400px+ (Full features)
|
|
- **Tablet**: 768px - 1023px (Responsive grid)
|
|
- **Mobile**: < 768px (Stacked layout, collapsible sidebar)
|
|
|
|
## ✨ Key Features
|
|
|
|
### 🎭 Animations
|
|
- Particle background effects
|
|
- Gradient animations
|
|
- Hover transformations
|
|
- Smooth scrolling
|
|
- Loading states
|
|
- Success notifications
|
|
|
|
### 🔍 Search & Filter
|
|
- Real-time search across all tools
|
|
- Filter by type (IDE, Web, Agent)
|
|
- Filter by pricing model
|
|
- Filter by status (Active, Beta, Discontinued)
|
|
|
|
### 📊 Data Visualization
|
|
- Progress bars for feature completion
|
|
- Distribution charts
|
|
- Feature matrix grid
|
|
- Statistics cards with trends
|
|
- Comparison tables
|
|
|
|
### 🎯 Interactive Elements
|
|
- "Try It" buttons for API endpoints
|
|
- Copy code buttons
|
|
- External links to GitHub, docs
|
|
- Smooth navigation
|
|
- Theme toggle
|
|
- Refresh data button
|
|
|
|
## 🛠️ Technologies Used
|
|
|
|
- **Pure HTML5** - Semantic markup
|
|
- **CSS3** - Advanced animations, gradients, glassmorphism
|
|
- **Vanilla JavaScript** - No frameworks, pure JS
|
|
- **Fetch API** - For loading data
|
|
- **CSS Grid & Flexbox** - Modern layouts
|
|
- **CSS Custom Properties** - Theming system
|
|
|
|
## 📦 File Structure
|
|
|
|
```
|
|
platform/
|
|
├── index.html # Landing page (futuristic design)
|
|
├── dashboard.html # Interactive dashboard
|
|
└── README.md # This file
|
|
```
|
|
|
|
## 🌟 Highlights
|
|
|
|
### Performance
|
|
- **No frameworks** - Lightning-fast load times
|
|
- **Minimal dependencies** - Only external API calls
|
|
- **Optimized CSS** - Single-file stylesheets
|
|
- **Lazy loading** - Tools load on demand
|
|
|
|
### Accessibility
|
|
- Semantic HTML structure
|
|
- ARIA labels where needed
|
|
- Keyboard navigation support
|
|
- High contrast text
|
|
- Focus indicators
|
|
|
|
### User Experience
|
|
- Instant feedback on interactions
|
|
- Loading states for async operations
|
|
- Success notifications
|
|
- Error handling
|
|
- Smooth animations (60fps)
|
|
|
|
## 🎯 Use Cases
|
|
|
|
1. **API Documentation** - Interactive API explorer
|
|
2. **Tool Discovery** - Browse and compare AI coding tools
|
|
3. **Analytics** - View statistics and trends
|
|
4. **Research** - Compare features across tools
|
|
5. **Integration** - Example code for developers
|
|
|
|
## 🔮 Future Enhancements
|
|
|
|
- [ ] Advanced filtering (multi-select)
|
|
- [ ] Export comparison to PDF
|
|
- [ ] Bookmark favorite tools
|
|
- [ ] Share comparison links
|
|
- [ ] Dark mode persistence
|
|
- [ ] Advanced charts (Chart.js)
|
|
- [ ] User reviews and ratings
|
|
- [ ] Tool recommendations
|
|
|
|
## 🤝 Contributing
|
|
|
|
The platform is open for enhancements:
|
|
1. Fork the repository
|
|
2. Create your feature branch
|
|
3. Add new visualizations or interactions
|
|
4. Submit a pull request
|
|
|
|
## 📄 License
|
|
|
|
Same license as the main repository.
|
|
|
|
## 🔗 Links
|
|
|
|
- **Live Platform**: https://sahiixx.github.io/system-prompts-and-models-of-ai-tools/platform/
|
|
- **API Docs**: https://github.com/sahiixx/system-prompts-and-models-of-ai-tools/blob/main/api/README.md
|
|
- **Main Repository**: https://github.com/sahiixx/system-prompts-and-models-of-ai-tools
|
|
|
|
---
|
|
|
|
**Built with ❤️ for the developer community**
|
|
|
|
*Showcasing 32 AI coding tools through cutting-edge web design*
|