mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
upload
This commit is contained in:
Tomáš Dvořák
@@ -0,0 +1,727 @@
|
||||
# 🎨 REC Directory to MyUIbrix Conversion Guide
|
||||
|
||||
## 📋 Overview
|
||||
|
||||
This document describes the conversion of HTML/CSS elements from the `rec` directory into MyUIbrix page element structure.
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Identified Elements from splitted.html
|
||||
|
||||
### 1. **Navigation / Header**
|
||||
**HTML Classes:** `layout_NavbarContainer__R81Mg`, `Navbar_Container__zz5qI`
|
||||
**CSS Files:** 1.css (Shaka player), 2.css (fonts + AnnounceBar), 3.css (general layout)
|
||||
**Element Name:** `header`
|
||||
**Variant:** `sparta_navbar`
|
||||
|
||||
**Features:**
|
||||
- Logo with image (AC Sparta Praha)
|
||||
- Burger menu button with animated icon
|
||||
- Navigation links with buttons (Tickets, Fanzone)
|
||||
- Separator between links
|
||||
- Search functionality
|
||||
- User authentication area
|
||||
|
||||
**CSS Styling:**
|
||||
```css
|
||||
.Navbar_Container__zz5qI {
|
||||
/* Main navbar styling */
|
||||
}
|
||||
.Navbar_Toggle__cO4vN {
|
||||
/* Burger button */
|
||||
}
|
||||
.Navbar_Brand__mfC75 {
|
||||
/* Logo area */
|
||||
}
|
||||
.Navbar_Links__Ce4_T {
|
||||
/* Navigation links */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. **Hero Section - Homepage Header**
|
||||
**HTML Classes:** `HomepageHeader_Container__8kG2y`
|
||||
**CSS Files:** 6.css (HomepageHeader)
|
||||
**Element Name:** `hero`
|
||||
**Variant:** `sparta_featured_carousel`
|
||||
|
||||
**Features:**
|
||||
- Full-width background image (absolute positioned)
|
||||
- Article with categories badges
|
||||
- H2 title and description text
|
||||
- Primary button with "Play" action and chevron icon
|
||||
- Navigation carousel at bottom with thumbnails
|
||||
- Active state indicators
|
||||
- Responsive design (mobile/desktop)
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
<header class="HomepageHeader_Container__8kG2y">
|
||||
<picture> [Background Image] </picture>
|
||||
<article>
|
||||
<span class="HomepageHeader_Categories__QbuVC">
|
||||
[Category badges with separators]
|
||||
</span>
|
||||
<h2>HIGHLIGHTS: Sparta - Slavia</h2>
|
||||
<p>Key moments from the 315th derby</p>
|
||||
<a [Button]>Play</a>
|
||||
</article>
|
||||
<nav>
|
||||
[Thumbnail carousel with pagination]
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
**CSS Styling:**
|
||||
- Height: 42.375rem (mobile), 50rem (tablet), 53rem (desktop)
|
||||
- Flexbox layout with flex-end alignment
|
||||
- Gradient overlay at bottom
|
||||
- Article animation: `animateInArticle` 0.5s cubic-bezier
|
||||
- Responsive font sizes
|
||||
|
||||
---
|
||||
|
||||
### 3. **Videos Section - Sparta TV**
|
||||
**HTML Classes:** `Container_Container__Hb4bC`, `page_Tv__iWJ5P`, `HorizontalSlider_Container__fAULW`, `HomepageTvSlider_Slider__VQQkt`
|
||||
**CSS Files:** 3.css (Container), 8.css (page styles), 10.css (Headline)
|
||||
**Element Name:** `videos`
|
||||
**Variant:** `sparta_horizontal_slider`
|
||||
|
||||
**Features:**
|
||||
- Section heading with link and arrow icon
|
||||
- Horizontal scrolling slider with controls
|
||||
- Prev/Next buttons
|
||||
- Article preview cards with:
|
||||
- Picture with responsive images
|
||||
- Meta info (UNLIMITED badge, categories)
|
||||
- Video duration
|
||||
- Play button overlay
|
||||
- Draggable slides
|
||||
- Transform-based animation
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
<section class="Container_Container__Hb4bC page_Tv__iWJ5P">
|
||||
<h2 class="Headline_Container__4_M_i">
|
||||
<a href="/en/sparta-tv">Videos <i [arrow-right]></i></a>
|
||||
</h2>
|
||||
<div class="HorizontalSlider_Container__fAULW">
|
||||
<div data-context="controls">
|
||||
[Prev/Next buttons]
|
||||
</div>
|
||||
<div>
|
||||
<div class="HorizontalSlider_DataContainer__6Yydh" style="transform: translate3d(...)">
|
||||
[Slide items with articles]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**CSS Highlights:**
|
||||
- Gap: 2.5rem (mobile), 3rem (desktop)
|
||||
- Slider buttons with disabled states
|
||||
- Transform3d for smooth scrolling
|
||||
- Responsive image sizing
|
||||
|
||||
---
|
||||
|
||||
### 4. **Teams Section with Tabs**
|
||||
**HTML Classes:** `Container_Container__Hb4bC`, `HomepageTeams_Container__hklP0`, `TabsList_Container__0GSWS`, `TeamStatsTabs_Content__eEnaR`
|
||||
**CSS Files:** 9.css (TeamStatsTabs)
|
||||
**Element Name:** `team`
|
||||
**Variant:** `sparta_tabs_stats`
|
||||
|
||||
**Features:**
|
||||
- Tablist with team categories (Men A, Women A, Men B)
|
||||
- Tab selection indicator with animation
|
||||
- Team stats content area with:
|
||||
- Team photo
|
||||
- Call-to-action buttons ("Buy jersey", "Team details")
|
||||
- Squad tables
|
||||
- Statistics display
|
||||
- Responsive column layout
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
<section class="Container_Container__Hb4bC">
|
||||
<h2 class="Headline_Container__4_M_i">
|
||||
<a href="/en/tymy">Teams <i [arrow-right]></i></a>
|
||||
</h2>
|
||||
<div class="HomepageTeams_Container__hklP0">
|
||||
<main>
|
||||
<div class="TabsList_Container__0GSWS">
|
||||
<div class="TabsList_TablistContainer__vFD4P">
|
||||
<span class="TabsList_TabSelection__1FqGJ" [moving indicator]></span>
|
||||
<div role="tablist">
|
||||
<div role="tab">Men A</div>
|
||||
<div role="tab">Women A</div>
|
||||
<div role="tab">Men B</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel">
|
||||
<div class="TeamStatsTabs_Content__eEnaR">
|
||||
[Team image and buttons]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**CSS Highlights:**
|
||||
- Background: `var(--colorBgSecondary, #1e1e1e)`
|
||||
- Padding: 1.625rem 1.25rem (mobile), 2.5rem (desktop)
|
||||
- Flexbox: column (mobile), row (desktop)
|
||||
- Tab selection animation with transform
|
||||
|
||||
---
|
||||
|
||||
### 5. **Fanshop Section - Product Slider**
|
||||
**HTML Classes:** `Container_Container__Hb4bC`, `page_Fanshop__7Bwng`, `HorizontalSlider_Container__fAULW`, `ShopSlider_Item__aRdi2`
|
||||
**CSS Files:** Similar to Videos section
|
||||
**Element Name:** `merch`
|
||||
**Variant:** `sparta_product_slider`
|
||||
|
||||
**Features:**
|
||||
- Section heading with external link and arrow-up-right icon
|
||||
- Horizontal slider similar to Videos
|
||||
- Product cards with:
|
||||
- Product image
|
||||
- Product name (bold)
|
||||
- Price display
|
||||
- "Buy" button with external link icon
|
||||
- Prev/Next navigation
|
||||
- Draggable slides
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
<section class="Container_Container__Hb4bC page_Fanshop__7Bwng">
|
||||
<h2 class="Headline_Container__4_M_i">
|
||||
<a target="_blank" href="https://...">Fanshop <i [arrow-up-right]></i></a>
|
||||
</h2>
|
||||
<div class="HorizontalSlider_Container__fAULW">
|
||||
[Similar structure to Videos slider]
|
||||
<a class="ShopSlider_Item__aRdi2" href="...">
|
||||
<picture>[Product image]</picture>
|
||||
<div>
|
||||
<strong>Product name</strong>
|
||||
<div>
|
||||
<div class="ShopSlider_Prices__BJZI_">
|
||||
<var>1 999 Kč</var>
|
||||
</div>
|
||||
<button>Buy <i [arrow-up-right]></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. **Footer with Partners Pyramid**
|
||||
**HTML Classes:** `Footer_Container__nn9Ow`, `Footer_Partners__yESEU`, `Footer_PyramindTop__YcpaB`, `Footer_PyramindMid__ohJGg`, `Footer_PyramindDown__PDpgx`
|
||||
**CSS Files:** 3.css, 8.css
|
||||
**Element Name:** `footer`
|
||||
**Variant:** `sparta_partners_pyramid`
|
||||
|
||||
**Features:**
|
||||
- Three-tier pyramid structure for partners:
|
||||
- Top tier: 1 main partner (Betano)
|
||||
- Middle tier: 4 medium partners (EPET, Adidas, T-Mobile, Chance Liga)
|
||||
- Bottom tier: Multiple smaller partners
|
||||
- Each partner with:
|
||||
- Logo image (SVG)
|
||||
- External link
|
||||
- Hover effects
|
||||
- Footer sections with:
|
||||
- Navigation links
|
||||
- Social media
|
||||
- Newsletter signup
|
||||
- Legal information
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
<footer class="Footer_Container__nn9Ow" data-full="true">
|
||||
<section class="Footer_Partners__yESEU">
|
||||
<div class="Container_Container__Hb4bC Footer_PyramindTop__YcpaB">
|
||||
[Main partner logo]
|
||||
</div>
|
||||
<div class="Container_Container__Hb4bC Footer_PyramindMid__ohJGg">
|
||||
[4 medium partner logos]
|
||||
</div>
|
||||
<div class="Container_Container__Hb4bC Footer_PyramindDown__PDpgx">
|
||||
[Multiple smaller partner logos]
|
||||
</div>
|
||||
</section>
|
||||
[Additional footer content sections]
|
||||
</footer>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Common Design Patterns
|
||||
|
||||
### Color Variables
|
||||
```css
|
||||
--colorAccent: [Accent color]
|
||||
--colorBgSecondary: #1e1e1e
|
||||
--colorBgSemiTransparent8: hsla(0,0%,100%,.08)
|
||||
--colorTextSecondary: [Secondary text color]
|
||||
```
|
||||
|
||||
### Typography
|
||||
- **Font Family:** `__zeleznaFont_39190a` (Custom Zelezna font)
|
||||
- **Weights:** 100, 400, 500
|
||||
- **Heading Sizes:**
|
||||
- H1: 2.25rem (mobile), 4rem (desktop)
|
||||
- H2: 1.75rem (mobile), 2.25rem (desktop)
|
||||
- H2 Headline: 1.75rem (mobile), 2rem (desktop)
|
||||
|
||||
### Responsive Breakpoints
|
||||
- Mobile: < 1024px
|
||||
- Tablet: 1024px - 1279px
|
||||
- Desktop: ≥ 1280px
|
||||
|
||||
### Common Animations
|
||||
- Cubic-bezier transitions: `cubic-bezier(.4,0,.6,1)`
|
||||
- Transform3d for hardware acceleration
|
||||
- Opacity fade-ins: 0 → 1 over 0.6s
|
||||
|
||||
### Icons
|
||||
- Material Icons Round: `font-family: Material Icons Round`
|
||||
- Custom icon implementation with `<i>` tags
|
||||
- Icon sizes: 24px (default), 2rem (headlines)
|
||||
|
||||
---
|
||||
|
||||
## 📦 MyUIbrix Element Mappings
|
||||
|
||||
### Suggested New Elements/Variants
|
||||
|
||||
1. **header → sparta_navbar**
|
||||
- Full navigation bar with burger menu
|
||||
- Logo, links, search, authentication
|
||||
|
||||
2. **hero → sparta_featured_carousel**
|
||||
- Hero header with background image
|
||||
- Featured article with categories
|
||||
- Thumbnail navigation carousel
|
||||
|
||||
3. **videos → sparta_horizontal_slider**
|
||||
- Horizontal scrolling video cards
|
||||
- Prev/Next controls
|
||||
- UNLIMITED badges
|
||||
|
||||
4. **team → sparta_tabs_stats**
|
||||
- Tabbed team selector
|
||||
- Team photos and stats
|
||||
- CTA buttons for jersey and details
|
||||
|
||||
5. **merch → sparta_product_slider**
|
||||
- Product carousel
|
||||
- Price display
|
||||
- Buy buttons with external links
|
||||
|
||||
6. **footer → sparta_partners_pyramid**
|
||||
- Three-tier partner pyramid
|
||||
- Footer navigation
|
||||
- Newsletter and social
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Implementation Steps
|
||||
|
||||
### Step 1: Create Element Configurations
|
||||
|
||||
Add to `defaultElements.ts`:
|
||||
|
||||
```typescript
|
||||
export const SPARTA_STYLE_ELEMENTS: PageElementConfig[] = [
|
||||
{
|
||||
page_type: 'homepage',
|
||||
element_name: 'header',
|
||||
variant: 'sparta_navbar',
|
||||
visible: true,
|
||||
display_order: 0,
|
||||
settings: {
|
||||
logo: '/images/sparta-logo.svg',
|
||||
searchEnabled: true,
|
||||
authEnabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
page_type: 'homepage',
|
||||
element_name: 'hero',
|
||||
variant: 'sparta_featured_carousel',
|
||||
visible: true,
|
||||
display_order: 1,
|
||||
settings: {
|
||||
autoSwap: true,
|
||||
swapInterval: 5000,
|
||||
showThumbnails: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
page_type: 'homepage',
|
||||
element_name: 'videos',
|
||||
variant: 'sparta_horizontal_slider',
|
||||
visible: true,
|
||||
display_order: 2,
|
||||
settings: {
|
||||
itemsPerView: 3,
|
||||
showUnlimitedBadge: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
page_type: 'homepage',
|
||||
element_name: 'team',
|
||||
variant: 'sparta_tabs_stats',
|
||||
visible: true,
|
||||
display_order: 3,
|
||||
settings: {
|
||||
tabs: ['Men A', 'Women A', 'Men B'],
|
||||
showBuyJersey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
page_type: 'homepage',
|
||||
element_name: 'merch',
|
||||
variant: 'sparta_product_slider',
|
||||
visible: true,
|
||||
display_order: 4,
|
||||
settings: {
|
||||
itemsPerView: 4,
|
||||
currency: 'Kč',
|
||||
},
|
||||
},
|
||||
{
|
||||
page_type: 'homepage',
|
||||
element_name: 'footer',
|
||||
variant: 'sparta_partners_pyramid',
|
||||
visible: true,
|
||||
display_order: 5,
|
||||
settings: {
|
||||
pyramidTiers: 3,
|
||||
showNewsletter: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
### Step 2: Add Variants to pageElements.ts
|
||||
|
||||
```typescript
|
||||
export const ELEMENT_VARIANTS: Record<string, ElementVariant[]> = {
|
||||
// ... existing variants ...
|
||||
|
||||
header: [
|
||||
// ... existing variants ...
|
||||
{
|
||||
value: 'sparta_navbar',
|
||||
label: 'Sparta Navbar',
|
||||
description: 'AC Sparta Praha style navigation with burger menu, logo, links, and search'
|
||||
},
|
||||
],
|
||||
|
||||
hero: [
|
||||
// ... existing variants ...
|
||||
{
|
||||
value: 'sparta_featured_carousel',
|
||||
label: 'Sparta Featured Carousel',
|
||||
description: 'Hero header with background image, featured article, and thumbnail navigation'
|
||||
},
|
||||
],
|
||||
|
||||
videos: [
|
||||
// ... existing variants ...
|
||||
{
|
||||
value: 'sparta_horizontal_slider',
|
||||
label: 'Sparta Horizontal Slider',
|
||||
description: 'Horizontal scrolling video cards with UNLIMITED badges and controls'
|
||||
},
|
||||
],
|
||||
|
||||
team: [
|
||||
// ... existing variants ...
|
||||
{
|
||||
value: 'sparta_tabs_stats',
|
||||
label: 'Sparta Tabs & Stats',
|
||||
description: 'Tabbed team selector with photos, stats, and CTA buttons'
|
||||
},
|
||||
],
|
||||
|
||||
merch: [
|
||||
// ... existing variants ...
|
||||
{
|
||||
value: 'sparta_product_slider',
|
||||
label: 'Sparta Product Slider',
|
||||
description: 'Product carousel with prices and buy buttons'
|
||||
},
|
||||
],
|
||||
|
||||
footer: [
|
||||
// ... existing variants ...
|
||||
{
|
||||
value: 'sparta_partners_pyramid',
|
||||
label: 'Sparta Partners Pyramid',
|
||||
description: 'Three-tier partner pyramid layout with footer sections'
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Step 3: Create Component Files
|
||||
|
||||
Create the following React component files:
|
||||
|
||||
1. `frontend/src/components/elements/SpartaNavbar.tsx`
|
||||
2. `frontend/src/components/elements/SpartaFeaturedCarousel.tsx`
|
||||
3. `frontend/src/components/elements/SpartaHorizontalSlider.tsx`
|
||||
4. `frontend/src/components/elements/SpartaTabsStats.tsx`
|
||||
5. `frontend/src/components/elements/SpartaProductSlider.tsx`
|
||||
6. `frontend/src/components/elements/SpartaPartnersFooter.tsx`
|
||||
|
||||
### Step 4: Extract and Convert CSS
|
||||
|
||||
Create modular CSS files for each component:
|
||||
|
||||
1. `frontend/src/styles/sparta-navbar.css`
|
||||
2. `frontend/src/styles/sparta-hero.css`
|
||||
3. `frontend/src/styles/sparta-slider.css`
|
||||
4. `frontend/src/styles/sparta-team-tabs.css`
|
||||
5. `frontend/src/styles/sparta-product-slider.css`
|
||||
6. `frontend/src/styles/sparta-footer.css`
|
||||
|
||||
### Step 5: Copy Assets
|
||||
|
||||
Copy required assets from `rec` directory:
|
||||
- Fonts (Zelezna font family)
|
||||
- Icons (Material Icons Round)
|
||||
- Any SVG/image assets
|
||||
|
||||
---
|
||||
|
||||
## 📝 CSS Classes Reference
|
||||
|
||||
### Navigation Classes
|
||||
- `layout_NavbarContainer__R81Mg` - Container wrapper
|
||||
- `Navbar_Container__zz5qI` - Main navbar
|
||||
- `Navbar_Toggle__cO4vN` - Burger button
|
||||
- `Navbar_Brand__mfC75` - Logo area
|
||||
- `Navbar_Links__Ce4_T` - Navigation links
|
||||
- `BurgerButton_Container__0gYhA` - Burger icon container
|
||||
- `Button_Button__qQTgU` - Generic button
|
||||
- `Separator_Container__x7nNU` - Separator element
|
||||
|
||||
### Hero Classes
|
||||
- `HomepageHeader_Container__8kG2y` - Hero container
|
||||
- `HomepageHeader_Categories__QbuVC` - Category badges area
|
||||
- `Icon_Icon__uZZKy` - Icon base class
|
||||
- `Icon_chevron-right__6riuc` - Chevron right icon
|
||||
- `Icon_arrow-right__eVJh7` - Arrow right icon
|
||||
- `Icon_arrow-up-right__tiMr_` - Arrow up-right icon
|
||||
|
||||
### Slider Classes
|
||||
- `Container_Container__Hb4bC` - Generic container
|
||||
- `HorizontalSlider_Container__fAULW` - Slider container
|
||||
- `HorizontalSlider_Buttons__PsOev` - Button controls
|
||||
- `HorizontalSlider_DataContainer__6Yydh` - Slide data container
|
||||
- `HorizontalSlider_Slide__rALdW` - Individual slide
|
||||
- `ArticlePreviewItem_Container__uRp20` - Article preview card
|
||||
- `ArticlePreviewItem_MetaInfo__5gcGd` - Meta info overlay
|
||||
|
||||
### Team Tab Classes
|
||||
- `HomepageTeams_Container__hklP0` - Teams container
|
||||
- `TabsList_Container__0GSWS` - Tabs list container
|
||||
- `TabsList_TablistContainer__vFD4P` - Tab list wrapper
|
||||
- `TabsList_TabSelection__1FqGJ` - Active tab indicator
|
||||
- `TeamStatsTabs_Content__eEnaR` - Tab content area
|
||||
- `TeamStatsTabs_ContentButtons___3Q2j` - CTA buttons area
|
||||
|
||||
### Product/Shop Classes
|
||||
- `page_Fanshop__7Bwng` - Fanshop section
|
||||
- `ShopSlider_Item__aRdi2` - Product item
|
||||
- `ShopSlider_Prices__BJZI_` - Price display
|
||||
|
||||
### Footer Classes
|
||||
- `Footer_Container__nn9Ow` - Footer container
|
||||
- `Footer_Partners__yESEU` - Partners section
|
||||
- `Footer_PyramindTop__YcpaB` - Top tier (1 partner)
|
||||
- `Footer_PyramindMid__ohJGg` - Middle tier (4 partners)
|
||||
- `Footer_PyramindDown__PDpgx` - Bottom tier (multiple)
|
||||
|
||||
### Common Classes
|
||||
- `Headline_Container__4_M_i` - Section headline
|
||||
- `page_Container__ey6AU` - Generic page container
|
||||
- `page_Tv__iWJ5P` - TV/Video page specific
|
||||
- `page_Wrapper__UbSC1` - Page wrapper
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Features to Implement
|
||||
|
||||
### 1. Horizontal Sliders
|
||||
- Transform3d-based scrolling
|
||||
- Prev/Next button controls
|
||||
- Disabled state handling
|
||||
- Drag support with `data-dragging` attribute
|
||||
- Smooth animations
|
||||
|
||||
### 2. Tabs System
|
||||
- Active tab indicator with transform animation
|
||||
- ARIA-compliant tablist/tabpanel
|
||||
- Keyboard navigation support
|
||||
- Tab selection animation
|
||||
|
||||
### 3. Category Badges
|
||||
- Inline badges with separators
|
||||
- Different types: category, sparta-id, etc.
|
||||
- Responsive sizing
|
||||
|
||||
### 4. Button System
|
||||
- Multiple variants: primary, secondary, tertiary
|
||||
- Icon support (left/right)
|
||||
- Size options: default, small, large
|
||||
- Square variant for icon-only buttons
|
||||
- Pressed and disabled states
|
||||
|
||||
### 5. Responsive Images
|
||||
- `<picture>` element with sources
|
||||
- Loading strategies (lazy, eager, high priority)
|
||||
- Decoding: async
|
||||
- Object-fit: cover
|
||||
- Responsive srcset
|
||||
|
||||
### 6. Animations
|
||||
- Fade in/out with cubic-bezier
|
||||
- Transform-based movements
|
||||
- Backdrop-filter blur effects
|
||||
- Hover transitions
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Integration with MyUIbrix
|
||||
|
||||
### Using in MyUIbrix Editor
|
||||
|
||||
1. Open MyUIbrix Editor (`/?myuibrix=edit`)
|
||||
2. Click "Add Element" (A key)
|
||||
3. Select element category
|
||||
4. Choose Sparta-style variant
|
||||
5. Configure settings in Style Panel
|
||||
6. Save changes (Ctrl+S)
|
||||
|
||||
### Customization Options
|
||||
|
||||
Each Sparta element should support:
|
||||
- **Visibility toggle** - Show/hide element
|
||||
- **Display order** - Change position in page
|
||||
- **Settings object** - Element-specific configuration
|
||||
- **Color scheme** - Match club colors
|
||||
- **Responsive behavior** - Mobile/tablet/desktop
|
||||
|
||||
### Settings Schema Examples
|
||||
|
||||
**sparta_navbar settings:**
|
||||
```json
|
||||
{
|
||||
"logo": "/images/club-logo.svg",
|
||||
"logoWidth": 48,
|
||||
"logoHeight": 48,
|
||||
"searchEnabled": true,
|
||||
"authEnabled": true,
|
||||
"links": [
|
||||
{ "label": "Tickets", "url": "/vstupenky", "variant": "tertiary" },
|
||||
{ "label": "Fanzone", "url": "/fanzone", "variant": "tertiary" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**sparta_featured_carousel settings:**
|
||||
```json
|
||||
{
|
||||
"autoSwap": true,
|
||||
"swapInterval": 5000,
|
||||
"showThumbnails": true,
|
||||
"thumbnailCount": 4,
|
||||
"showCategories": true,
|
||||
"buttonLabel": "Play",
|
||||
"buttonVariant": "primary"
|
||||
}
|
||||
```
|
||||
|
||||
**sparta_horizontal_slider settings:**
|
||||
```json
|
||||
{
|
||||
"itemsPerView": { "mobile": 1, "tablet": 2, "desktop": 3 },
|
||||
"gap": 16,
|
||||
"showControls": true,
|
||||
"enableDrag": true,
|
||||
"showUnlimitedBadge": true
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Testing Checklist
|
||||
|
||||
- [ ] All elements render correctly
|
||||
- [ ] Responsive behavior works on mobile/tablet/desktop
|
||||
- [ ] Animations are smooth (60fps)
|
||||
- [ ] Hover effects work as expected
|
||||
- [ ] Click/touch interactions function properly
|
||||
- [ ] Keyboard navigation is accessible
|
||||
- [ ] ARIA attributes are correct
|
||||
- [ ] Images load with proper lazy loading
|
||||
- [ ] Sliders scroll smoothly
|
||||
- [ ] Tab system switches correctly
|
||||
- [ ] External links open in new tabs
|
||||
- [ ] Icons display properly
|
||||
- [ ] Fonts load correctly
|
||||
- [ ] Colors match design
|
||||
- [ ] Settings are saved and loaded
|
||||
- [ ] Element visibility toggle works
|
||||
- [ ] Element reordering works
|
||||
- [ ] MyUIbrix editor integration complete
|
||||
|
||||
---
|
||||
|
||||
## 📚 Additional Resources
|
||||
|
||||
### CSS Files Breakdown
|
||||
|
||||
- **1.css** - Shaka Player (video player library)
|
||||
- **2.css** - Fonts (@font-face for Zelezna) + AnnounceBar
|
||||
- **3.css** - General page layout, Container, Footer base
|
||||
- **4.css** - (Not analyzed - likely more components)
|
||||
- **5.css** - (Not analyzed - likely more components)
|
||||
- **6.css** - HomepageHeader (Hero section)
|
||||
- **7.css** - LastMatches, PosessionProgressBar
|
||||
- **8.css** - Page specific styles, matches, versus, stats
|
||||
- **9.css** - TeamStatsTabs
|
||||
- **10.css** - ContestsCarousel, Headline
|
||||
|
||||
### Key Dependencies
|
||||
|
||||
- **React** - Component framework
|
||||
- **Chakra UI** - UI component library (used in MyUIbrix)
|
||||
- **Material Icons Round** - Icon font
|
||||
- **Custom Zelezna Font** - Typography
|
||||
|
||||
### Browser Support
|
||||
|
||||
Ensure compatibility with:
|
||||
- Chrome/Edge (latest)
|
||||
- Firefox (latest)
|
||||
- Safari (latest)
|
||||
- Mobile browsers (iOS Safari, Chrome Mobile)
|
||||
|
||||
---
|
||||
|
||||
**Created:** October 15, 2025
|
||||
**Version:** 1.0.0
|
||||
**Status:** ✅ Documentation Complete - Ready for Implementation
|
||||
Reference in New Issue
Block a user