================================================================================ CONTRIBUTION INDEX - VISUAL STRUCTURE ================================================================================ COLOR PALETTE ============= Primary Dark Green: #6d8f1a (Used for accents, text, borders) Primary Light Green: #88b121 (Used for gradients, highlights) Light Background: #f5f7fa (Page background) White Cards: #ffffff (Card backgrounds) Success Green: #27ae60 (Success badges) Warning Orange: #f39c12 (Warning badges) Info Blue: #3498db (Info badges) Danger Red: #e74c3c (Error messages) Muted Text: #718096 (Secondary text) Main Text: #2d3748 (Primary text) PAGE LAYOUT (DESKTOP VIEW) ========================== ┌─────────────────────────────────────────────────────────────────────────────┐ │ │ │ GRADIENT HEADER (Light Green to Dark Green, 135° angle) │ │ ┌───────────────────────────────────────────────────────────────────────┐ │ │ │ ✦ Investissements du Projet │ │ │ │ ✦ Mon Projet - 2025 │ │ │ └───────────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ ACTION BUTTONS (Flex Row, Gap: 15px) │ │ │ │ ┌──────────────────────────────┐ ┌──────────────────────────────┐ │ │ │ + Ajouter des investisseurs │ │ ↓ Télécharger rapport global │ │ │ │ [Dark Green Gradient] │ │ [White bg, Green border] │ │ │ └──────────────────────────────┘ └──────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ STATISTICS GRID (4 columns on desktop, auto-fit minimum 280px) ┌─────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ ┃ MONTANT │ │ ┃ INVESTIS │ │ ┃ TOTAL GAIN │ │ ┃ TOTAL RSI │ │ │ │ ┃ TOTAL VERSÉ│ │ ┃ SEURS │ │ ┃ À REMBOUR │ │ ┃ CAPITAL │ │ │ │ ┃ │ │ ┃ │ │ ┃ │ │ ┃ │ │ │ │ ┃ 5,000,000 │ │ ┃ 15 │ │ ┃ 750,000 │ │ ┃ 5,750,000 │ │ │ │ ┃ XOF │ │ ┃ │ │ ┃ XOF │ │ ┃ XOF │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ ┃ DÉBUT │ │ ┃ DATE RETOU │ │ ┃ TOTAL GAIN │ │ ┃ RESTE À │ │ │ │ ┃ REMBOURSEM │ │ ┃ R CAPITAL │ │ ┃ REMBOURSÉ │ │ ┃ REMBOURSER │ │ │ │ ┃ ENT GAINS │ │ ┃ │ │ ┃ │ │ ┃ │ │ │ │ ┃ 2025 │ │ ┃ 2027 │ │ ┃ 250,000 │ │ ┃ 500,000 │ │ │ │ ┃ │ │ ┃ │ │ ┃ XOF │ │ ┃ XOF │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ CONTRIBUTIONS TABLE (Scrollable on mobile) ┌─────────────────────────────────────────────────────────────────────────────┐ │ │ │ ACTIONS│PAIEMENT │REMBOURSEMENT│INVESTISSEUR │... (13 COLUMNS) │ │ │ │ │ │ │ │ ⚙️ ▼ │ Finalisé │ Terminé │Jean Dupont │ ... [Horizontal scroll]│ │ │ [badge] │ [badge] │ (bold) │ │ │ │ │ │ │ │ │ ⚙️ ▼ │ En cours │ En attente │Marie Martin │ ... │ │ │ [badge] │ [badge] │ (bold) │ │ │ │ │ │ │ │ │ ⚙️ ▼ │ Finalisé │ Terminé │Pierre Bernard │ ... │ │ │ [badge] │ [badge] │ (bold) │ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ TABLE COLUMNS DETAILED ====================== 1. ACTIONS | ⚙️ ▼ (Dropdown toggle button) 2. PAIEMENT | [Finalisé] or [En cours] (Green or Orange badge) 3. REMBOURSEM. | [Terminé] or [En attente] (Green or Blue badge) 4. INVESTISSEUR | Jean Dupont (Bold name) 5. ACTIONS | 10 (Number of shares) 6. CAPITAL PAY. | 500,000 XOF / sur 12 mois (Optional months) 7. CAPITAL PAYÉ | 250,000 XOF / sur 6 mois (Optional months) 8. RESTANT | 250,000 XOF / sur 6 mois OR [0 XOF] if complete 9. TYPE | virement / Reçu link 10. % GAIN | 15% 11. TOTAL GAIN | 75,000 XOF (Bold) 12. RSI | 575,000 XOF (Bold + Green highlight) 13. DATE | 15-11-2024 DROPDOWN MENU (When clicked on ⚙️ ▼) ==================================== ┌─────────────────────────┐ │ ✓ Valider virement │ (Only if transfer pending) │─────────────────────────│ │ 💰 Détails Paiements │ (Always shown) │─────────────────────────│ │ 🔄 Remboursements │ (Only if payment complete) └─────────────────────────┘ BADGE STYLES ============ Success (Green): [label] Background: rgba(39, 174, 96, 0.1) Color: #27ae60 Example: "Finalisé", "Terminé" Warning (Orange): [label] Background: rgba(243, 156, 18, 0.1) Color: #f39c12 Example: "En cours" Info (Blue): [label] Background: rgba(52, 152, 219, 0.1) Color: #3498db Example: "En attente" TABLET VIEW (≤768px) ==================== - Container padding reduced: 30px → 15px - Header padding: 30px → 20px - Header title: 32px → 24px - Statistics grid: 4 columns → 1 column (stacked vertically) - Action buttons: Horizontal → Vertical stack, 100% width - Table font: 12px → 11px - Table horizontal scroll enabled Mobile scaling pattern: - Numbers reduce: 32px (h1) → 24px → 20px - Padding reduces: 30px → 15px - Cards stack 100% width - Table remains scrollable MOBILE VIEW (≤480px) ==================== - Container padding: 15px - Header padding: 15px - Header title: 20px (further reduced) - Stat value: 28px → 24px - All single column layouts - Dropdown min-width: 200px → 150px - Table font: 10px RESPONSIVE BEHAVIOR =================== GRID LAYOUT: Desktop: repeat(auto-fit, minmax(280px, 1fr)) → 4 cols Tablet: 1fr → 1 col Mobile: 1fr → 1 col BUTTONS: Desktop: inline-flex, gap: 15px Tablet: flex-direction: column, 100% width Mobile: flex-direction: column, 100% width TABLE: Desktop: Normal scrolling Tablet: Horizontal scroll (overflow-x: auto) Mobile: Horizontal scroll (overflow-x: auto) HOVER EFFECTS ============= HEADER: No hover effect (static gradient) STAT CARD: Lift effect (-4px) + shadow increase BUTTON PRIMARY: Lift effect (-2px) + shadow increase BUTTON SECONDARY: Background fill + text color invert TABLE ROW: Light green background (3% opacity) DROPDOWN ITEM: Light green background + bold text DROPDOWN TOGGLE: Border color green + shadow TEXT HIERARCHY ============== Page Title (H1): 32px 700 weight "Investissements du Projet" Subtitle: 16px 400 weight Project name Card Label: 13px 600 weight "MONTANT TOTAL VERSÉ" Card Value: 28px 700 weight "5,000,000" Table Header: 11px 600 weight uppercase, letter-spacing Table Cell: 12px 300-600 w. "Jean Dupont", amounts Badge Text: 11px 600 weight "Finalisé", "En cours" Button Text: 14px 600 weight "Ajouter" Amount (standard): 12px 600 weight Amount (highlight): 12px 700 weight Primary color SPACING GUIDE ============= Container: 30px (all sides) Header: 30px (all sides) Actions Container: 15px gap between buttons Grid: 20px gap between cards Card Internal: 24px padding Table Row: 14px (vertical), 12px (horizontal) Badge: 4px (vertical), 12px (horizontal) Button: 12px (vertical), 24px (horizontal) SHADOW GUIDE ============ Stat Cards: 0 2px 8px rgba(0,0,0,0.08) (light) Stat Cards Hover: 0 8px 24px rgba(109,143,26,0.15) (green tinted) Table Container: 0 2px 12px rgba(0,0,0,0.08) Button Hover: 0 8px 20px rgba(109,143,26,0.3) (green tinted) Dropdown: 0 4px 16px rgba(0,0,0,0.15) BORDER GUIDE ============ Stat Cards Left: 4px solid (gradient green to dark green) Table Head Bottom: 2px solid rgba(0,0,0,0.1) Table Row Bottom: 1px solid rgba(0,0,0,0.1) Alerts Left: 4px solid (color varies: red/green/etc) Buttons: 0px (sharp edges - border-radius: 0) Badges: 4px border-radius Dropdown: 4px border-radius FONT IMPORTS ============ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap'); Weights used: 300 (light), 400 (regular), 500 (medium), 600 (semi-bold), 700 (bold) TRANSITIONS & ANIMATIONS ======================== All buttons: all 0.3s ease Table rows: background-color 0.2s ease Dropdowns: Instant toggle (no animation) Header gradient: Static (no animation) Hover transforms: - Stat cards: translateY(-4px) - Primary buttons: translateY(-2px) STATE INDICATORS ================ Button States: ✓ Normal - Full opacity, interactive ✓ Hover - Lifted, shadow increased ✓ Active - Form submitted (backend handled) ✓ Disabled - [disabled] attribute, no hover Dropdown States: ✓ Hidden - display: none ✓ Visible - display: block (when .show added) ✓ Item hover - Light green background Badge States: ✓ Success - Green ✓ Warning - Orange ✓ Info - Blue ✓ Danger - Red FILE STRUCTURE ============== contribution_index.blade.php ├── CSS Variables (in :root) ├── Global Styles (fonts, basics) ├── Main Styles (in