first commit

2026-06-04 03:52:57 +00:00 · 2025-10-02 12:39:28 +02:00
commit 0fc92f8464
60 changed files with 11834 additions and 0 deletions
@@ -0,0 +1,197 @@
+# 🇨🇿 Czech Clubs Logos API - Frontend
+
+A beautiful, dark mode frontend for the Czech Clubs Logos API. Built with modern web technologies for a smooth and user-friendly experience.
+
+## 🎨 Tech Stack
+
+- **Vite** - Lightning-fast build tool
+- **Tailwind CSS** - Utility-first CSS framework
+- **GSAP** - Professional-grade animation library
+- **Vanilla JavaScript** - No framework overhead
+
+## ✨ Features
+
+- 🌙 **Dark Mode** - Eye-friendly dark theme
+- 🎭 **Smooth Animations** - GSAP-powered transitions
+- 🔍 **Club Search** - Search Czech clubs by name
+- ⬆️ **Logo Upload** - Drag & drop or browse to upload
+- 📱 **Responsive** - Works on all device sizes
+- ⚡ **Fast** - Optimized with Vite
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- Node.js (v18 or higher)
+- npm or yarn
+
+### Installation
+
+1. Navigate to the frontend directory:
+```bash
+cd frontend
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Start the development server:
+```bash
+npm run dev
+```
+
+The app will open at `http://localhost:3000`
+
+## 🏗️ Build for Production
+
+```bash
+npm run build
+```
+
+This will create an optimized build in the `dist` folder.
+
+To preview the production build:
+```bash
+npm run preview
+```
+
+## 🔧 Configuration
+
+### API Endpoint
+
+Update the backend API URL in `src/main.js`:
+
+```javascript
+const API_BASE_URL = 'http://localhost:8080' // Update this to your backend URL
+```
+
+### Styling
+
+Customize colors and theme in `tailwind.config.js`:
+
+```javascript
+colors: {
+  'dark-bg': '#0a0e1a',
+  'dark-card': '#131823',
+  'accent-blue': '#3b82f6',
+  'accent-green': '#10b981',
+}
+```
+
+## 📁 Project Structure
+
+```
+frontend/
+├── src/
+│   ├── main.js          # Main JavaScript logic
+│   └── style.css        # Global styles + Tailwind
+├── index.html           # Main HTML file
+├── vite.config.js       # Vite configuration
+├── tailwind.config.js   # Tailwind configuration
+├── postcss.config.js    # PostCSS configuration
+└── package.json         # Dependencies
+```
+
+## 🎯 Usage
+
+### Search for Clubs
+
+1. Click the "🔍 Search Clubs" button
+2. Type a club name (e.g., "Sparta", "Slavia")
+3. Browse results and copy UUIDs
+
+### Upload a Logo
+
+1. Click the "⬆️ Upload Logo" button
+2. Enter or paste a club UUID
+3. Drag & drop or click to select a logo file (SVG/PNG)
+4. Preview your logo
+5. Click "Upload Logo"
+
+## 🌟 Features in Detail
+
+### Animation System
+
+Powered by GSAP with:
+- Smooth hero animations on page load
+- Scroll-triggered feature cards
+- Staggered API endpoint reveals
+- Interactive button feedback
+
+### Search System
+
+- Real-time search with debouncing
+- Demo data fallback when backend is unavailable
+- Click to auto-fill upload form
+- Copy UUID to clipboard
+
+### Upload System
+
+- Drag & drop support
+- File type validation (SVG/PNG only)
+- UUID format validation
+- Image preview before upload
+- Visual feedback notifications
+
+## 🔌 Backend Integration
+
+This frontend is designed to work with the Go backend API. Ensure the backend is running at the configured URL.
+
+Expected endpoints:
+- `GET /clubs/search?q={query}` - Search clubs
+- `GET /clubs/:id` - Get club details
+- `POST /logos/:id` - Upload logo
+- `GET /logos/:id` - Get logo
+
+## 🎨 Customization
+
+### Colors
+
+Edit `tailwind.config.js` to change the color scheme:
+
+```javascript
+theme: {
+  extend: {
+    colors: {
+      'dark-bg': '#your-color',
+      'dark-card': '#your-color',
+      // ... etc
+    }
+  }
+}
+```
+
+### Fonts
+
+Change the font in `src/style.css`:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=YourFont:wght@300;400;700&display=swap');
+```
+
+### Animations
+
+Adjust GSAP animations in `src/main.js`:
+
+```javascript
+gsap.from('.hero-content', {
+  duration: 1,
+  opacity: 0,
+  y: 50,
+  // ... customize
+})
+```
+
+## 📝 License
+
+This project is part of the Czech Clubs Logos API system.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+---
+
+Built with ❤️ for Czech Football