Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GoalPredict — Прогнозы Футбольных Матчей</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['"DM Sans"', 'sans-serif'], | |
| display: ['"Space Grotesk"', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --pitch-dark: #0b1e15; | |
| --pitch-green: #0f291d; | |
| --pitch-mid: #1a3c2b; | |
| --pitch-light: #2d5a3f; | |
| --grass-accent: #4ade80; | |
| --warm-glow: #f59e0b; | |
| --void-black: #050a08; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'DM Sans', sans-serif; | |
| background: var(--void-black); | |
| color: #e8ede9; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ── Animated grass field background ── */ | |
| .grass-field { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -2; | |
| background: | |
| radial-gradient(ellipse 80% 60% at 50% 20%, #143626 0%, transparent 70%), | |
| radial-gradient(ellipse 60% 80% at 80% 80%, #0d2118 0%, transparent 60%), | |
| radial-gradient(ellipse 50% 50% at 20% 90%, #112b1f 0%, transparent 50%), | |
| linear-gradient(180deg, #070f0b 0%, #0b1e15 40%, #0f291d 100%); | |
| } | |
| .grass-field::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(74,222,128,0.03) 39px, rgba(74,222,128,0.03) 40px), | |
| repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(74,222,128,0.02) 79px, rgba(74,222,128,0.02) 80px); | |
| pointer-events: none; | |
| } | |
| /* ── Floating particles ── */ | |
| .particle { | |
| position: fixed; | |
| width: 3px; height: 3px; | |
| background: rgba(74,222,128,0.4); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: -1; | |
| animation: floatParticle linear infinite; | |
| } | |
| @keyframes floatParticle { | |
| 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 0.3; } | |
| 100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; } | |
| } | |
| /* ── Navigation ── */ | |
| .nav-glass { | |
| background: rgba(8, 26, 17, 0.75); | |
| backdrop-filter: blur(24px) saturate(1.2); | |
| -webkit-backdrop-filter: blur(24px) saturate(1.2); | |
| border-bottom: 1px solid rgba(74,222,128,0.08); | |
| } | |
| .nav-link { | |
| position: relative; | |
| padding: 8px 0; | |
| font-weight: 500; | |
| font-size: 0.875rem; | |
| color: #8da892; | |
| letter-spacing: 0.02em; | |
| transition: color 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; left: 50%; right: 50%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--grass-accent), transparent); | |
| transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| border-radius: 2px; | |
| } | |
| .nav-link:hover { color: #e8ede9; } | |
| .nav-link.active { color: var(--grass-accent); } | |
| .nav-link.active::after { left: 0; right: 0; } | |
| /* ── Match Cards ── */ | |
| .match-card { | |
| position: relative; | |
| background: rgba(15, 41, 29, 0.6); | |
| border: 1px solid rgba(74,222,128,0.06); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1); | |
| cursor: pointer; | |
| } | |
| .match-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 20px; | |
| padding: 1px; | |
| background: linear-gradient(135deg, rgba(74,222,128,0.15), transparent 50%, rgba(74,222,128,0.05)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.4s ease; | |
| } | |
| .match-card:hover { | |
| transform: translateY(-6px); | |
| border-color: rgba(74,222,128,0.15); | |
| box-shadow: 0 20px 60px -15px rgba(74,222,128,0.12), 0 0 0 1px rgba(74,222,128,0.08); | |
| } | |
| .match-card:hover::before { opacity: 1; } | |
| .match-card .match-status-live { | |
| animation: pulseLive 2s ease-in-out infinite; | |
| } | |
| @keyframes pulseLive { | |
| 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } | |
| 50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(239,68,68,0); } | |
| } | |
| /* ── Badge chips ── */ | |
| .chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 12px; | |
| border-radius: 100px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .chip-league { | |
| background: rgba(74,222,128,0.08); | |
| color: var(--grass-accent); | |
| border: 1px solid rgba(74,222,128,0.12); | |
| } | |
| .chip-time { | |
| background: rgba(245,158,11,0.08); | |
| color: var(--warm-glow); | |
| border: 1px solid rgba(245,158,11,0.12); | |
| } | |
| /* ── Team Crests (CSS-only) ── */ | |
| .crest { | |
| width: 44px; height: 44px; | |
| border-radius: 14px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-weight: 700; | |
| font-size: 0.65rem; | |
| letter-spacing: 0.08em; | |
| position: relative; | |
| flex-shrink: 0; | |
| } | |
| .crest-1 { background: linear-gradient(135deg, #c1121f, #780000); color: #fff; } /* Manchester United */ | |
| .crest-2 { background: linear-gradient(135deg, #023e8a, #001845); color: #fff; } /* Chelsea */ | |
| .crest-3 { background: linear-gradient(135deg, #d00000, #9d0208); color: #fff; } /* Liverpool */ | |
| .crest-4 { background: linear-gradient(135deg, #6a4c93, #4a3574); color: #fff; } /* Tottenham */ | |
| .crest-5 { background: linear-gradient(135deg, #ef476f, #b83253); color: #fff; } /* Arsenal */ | |
| .crest-6 { background: linear-gradient(135deg, #118ab2, #073b4c); color: #fff; } /* Man City */ | |
| .crest-7 { background: linear-gradient(135deg, #06d6a0, #048a81); color: #fff; } /* Brighton */ | |
| .crest-8 { background: linear-gradient(135deg, #ff9f1c, #d4830b); color: #fff; } /* Wolves */ | |
| /* Crest inner ring effect */ | |
| .crest::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 3px; | |
| border: 1.5px solid rgba(255,255,255,0.15); | |
| border-radius: 11px; | |
| } | |
| .crest-lg { width: 56px; height: 56px; font-size: 0.75rem; } | |
| .crest-lg::after { inset: 4px; border-radius: 14px; } | |
| /* ── Prediction bars ── */ | |
| .prob-track { | |
| height: 6px; | |
| background: rgba(255,255,255,0.04); | |
| border-radius: 100px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .prob-fill { | |
| height: 100%; | |
| border-radius: 100px; | |
| transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .prob-fill-home { background: linear-gradient(90deg, #4ade80, #22c55e); } | |
| .prob-fill-draw { background: linear-gradient(90deg, #f59e0b, #d97706); } | |
| .prob-fill-away { background: linear-gradient(90deg, #ef4444, #dc2626); } | |
| /* ── Scoreboard glow ── */ | |
| .score-display { | |
| font-family: 'Space Grotesk', monospace; | |
| font-weight: 700; | |
| font-variant-numeric: tabular-nums; | |
| letter-spacing: 0.1em; | |
| text-shadow: 0 0 20px rgba(74,222,128,0.15); | |
| } | |
| /* ── Stat bars ── */ | |
| .stat-bar-bg { | |
| height: 6px; | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 100px; | |
| overflow: hidden; | |
| } | |
| .stat-bar-fill { | |
| height: 100%; | |
| border-radius: 100px; | |
| transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* ── Section titles ── */ | |
| .section-title { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-weight: 700; | |
| font-size: 1.75rem; | |
| letter-spacing: -0.02em; | |
| color: #fff; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; left: 0; | |
| width: 40px; height: 3px; | |
| background: linear-gradient(90deg, var(--grass-accent), transparent); | |
| border-radius: 2px; | |
| } | |
| /* ── Standing rows ── */ | |
| .standing-row { | |
| display: grid; | |
| grid-template-columns: 48px 1fr 48px 48px 48px 48px 48px 48px 48px; | |
| align-items: center; | |
| padding: 14px 20px; | |
| border-radius: 14px; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .standing-row:hover { | |
| background: rgba(74,222,128,0.04); | |
| } | |
| .standing-rank { | |
| width: 32px; height: 32px; | |
| border-radius: 10px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-weight: 700; | |
| font-size: 0.8rem; | |
| } | |
| .rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000; } | |
| .rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; } | |
| .rank-3 { background: linear-gradient(135deg, #b45309, #78350f); color: #fff; } | |
| .rank-other { background: rgba(255,255,255,0.05); color: #8da892; } | |
| /* ── History items ── */ | |
| .hist-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 16px; | |
| border-radius: 14px; | |
| transition: all 0.25s ease; | |
| } | |
| .hist-item:hover { background: rgba(255,255,255,0.03); } | |
| /* ── Modal ── */ | |
| .modal-backdrop { | |
| position: fixed; inset: 0; | |
| background: rgba(5,10,8,0.85); | |
| backdrop-filter: blur(12px); | |
| z-index: 100; | |
| display: flex; align-items: center; justify-content: center; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .modal-backdrop.open { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal-card { | |
| background: linear-gradient(180deg, #0f291d 0%, #0b1e15 100%); | |
| border: 1px solid rgba(74,222,128,0.1); | |
| border-radius: 28px; | |
| max-width: 520px; | |
| width: 92%; | |
| transform: translateY(30px) scale(0.96); | |
| transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(74,222,128,0.05); | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| } | |
| .modal-backdrop.open .modal-card { | |
| transform: translateY(0) scale(1); | |
| } | |
| /* ── Live ticker ── */ | |
| .live-ticker { | |
| overflow: hidden; | |
| mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); | |
| -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); | |
| } | |
| .ticker-track { | |
| display: flex; | |
| gap: 36px; | |
| animation: tickerScroll 35s linear infinite; | |
| white-space: nowrap; | |
| padding: 12px 0; | |
| } | |
| @keyframes tickerScroll { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| /* ── Custom scrollbar ── */ | |
| ::-webkit-scrollbar { width: 5px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: rgba(74,222,128,0.2); border-radius: 10px; } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(74,222,128,0.35); } | |
| /* ── Entrance animations ── */ | |
| @keyframes fadeUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .anim-up { | |
| animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; | |
| opacity: 0; | |
| } | |
| .d-1 { animation-delay: 0.05s; } | |
| .d-2 { animation-delay: 0.1s; } | |
| .d-3 { animation-delay: 0.15s; } | |
| .d-4 { animation-delay: 0.2s; } | |
| .d-5 { animation-delay: 0.25s; } | |
| .d-6 { animation-delay: 0.3s; } | |
| /* ── Score glow on live matches ── */ | |
| .live-score-glow { | |
| animation: scoreGlow 2s ease-in-out infinite; | |
| } | |
| @keyframes scoreGlow { | |
| 0%, 100% { text-shadow: 0 0 10px rgba(74,222,128,0.3); } | |
| 50% { text-shadow: 0 0 25px rgba(74,222,128,0.6), 0 0 50px rgba(74,222,128,0.2); } | |
| } | |
| /* ── Placeholder shimmer ── */ | |
| .shimmer { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .shimmer::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: -100%; width: 100%; height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent); | |
| animation: shimmerMove 3s infinite; | |
| } | |
| @keyframes shimmerMove { | |
| 0% { left: -100%; } | |
| 100% { left: 100%; } | |
| } | |
| /* ── Form dots ── */ | |
| .form-dot { | |
| width: 18px; height: 18px; | |
| border-radius: 6px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 0.55rem; | |
| font-weight: 700; | |
| } | |
| /* ── Animated gradient text ── */ | |
| .gradient-text { | |
| background: linear-gradient(90deg, #4ade80, #22d3ee, #4ade80); | |
| background-size: 200% auto; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradientShift 4s ease infinite; | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% center; } | |
| 50% { background-position: 100% center; } | |
| 100% { background-position: 0% center; } | |
| } | |
| /* ── Divider ── */ | |
| .fancy-divider { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(74,222,128,0.15), transparent); | |
| } | |
| /* ── Buttons ── */ | |
| .btn-primary { | |
| background: linear-gradient(135deg, #4ade80, #22c55e); | |
| color: #052e16; | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| letter-spacing: 0.02em; | |
| padding: 12px 28px; | |
| border-radius: 14px; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, transparent, rgba(255,255,255,0.15), transparent); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 32px -8px rgba(74,222,128,0.35); | |
| } | |
| .btn-primary:hover::after { opacity: 1; } | |
| .btn-secondary { | |
| background: rgba(255,255,255,0.04); | |
| border: 1px solid rgba(255,255,255,0.08); | |
| color: #e8ede9; | |
| font-weight: 500; | |
| font-size: 0.85rem; | |
| padding: 12px 28px; | |
| border-radius: 14px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255,255,255,0.08); | |
| border-color: rgba(74,222,128,0.15); | |
| } | |
| /* ── Streak dots ── */ | |
| .streak-dot { | |
| width: 22px; height: 22px; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.6rem; | |
| font-weight: 800; | |
| } | |
| .streak-win { background: rgba(34,197,94,0.15); color: #4ade80; } | |
| .streak-draw { background: rgba(245,158,11,0.15); color: #f59e0b; } | |
| .streak-loss { background: rgba(239,68,68,0.15); color: #ef4444; } | |
| /* ── Countdown flipper effect ── */ | |
| .countdown-segment { | |
| background: rgba(255,255,255,0.04); | |
| border: 1px solid rgba(255,255,255,0.06); | |
| border-radius: 12px; | |
| min-width: 52px; | |
| text-align: center; | |
| padding: 10px 6px; | |
| } | |
| .countdown-segment .num { | |
| font-family: 'Space Grotesk', monospace; | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: #fff; | |
| line-height: 1; | |
| } | |
| .countdown-segment .label { | |
| font-size: 0.6rem; | |
| color: #6b8f6e; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| margin-top: 4px; | |
| } | |
| /* ── Prediction confidence ring ── */ | |
| .conf-ring { | |
| width: 80px; height: 80px; | |
| border-radius: 50%; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .conf-ring svg { | |
| position: absolute; inset: 0; | |
| transform: rotate(-90deg); | |
| } | |
| .conf-ring svg circle { | |
| fill: none; | |
| stroke-width: 5; | |
| stroke-linecap: round; | |
| } | |
| .conf-ring svg circle.bg { stroke: rgba(255,255,255,0.05); } | |
| .conf-ring .num { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| } | |
| /* ── Tooltip ── */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip::before { | |
| content: attr(data-tip); | |
| position: absolute; | |
| bottom: calc(100% + 8px); | |
| left: 50%; | |
| transform: translateX(-50%) scale(0.9); | |
| background: #0f291d; | |
| color: #fff; | |
| padding: 6px 12px; | |
| border-radius: 8px; | |
| font-size: 0.7rem; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.2s ease; | |
| border: 1px solid rgba(74,222,128,0.15); | |
| } | |
| .tooltip:hover::before { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1); | |
| } | |
| /* ── Quick stat pills ── */ | |
| .stat-pill { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 14px; | |
| background: rgba(255,255,255,0.03); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| border-radius: 12px; | |
| font-size: 0.78rem; | |
| color: #9ab89e; | |
| } | |
| /* ── View transitions ── */ | |
| .view-section { | |
| display: none; | |
| } | |
| .view-section.active { | |
| display: block; | |
| animation: fadeUp 0.4s ease; | |
| } | |
| /* ── H2H timeline ── */ | |
| .h2h-timeline { | |
| position: relative; | |
| padding-left: 20px; | |
| } | |
| .h2h-timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 6px; | |
| top: 0; bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(180deg, rgba(74,222,128,0.3), rgba(74,222,128,0.05)); | |
| border-radius: 2px; | |
| } | |
| .h2h-item { | |
| position: relative; | |
| padding-bottom: 16px; | |
| } | |
| .h2h-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -16px; top: 6px; | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--grass-accent); | |
| box-shadow: 0 0 8px rgba(74,222,128,0.3); | |
| } | |
| /* ── Tab pills ── */ | |
| .tab-pill { | |
| padding: 8px 18px; | |
| border-radius: 100px; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| border: 1px solid transparent; | |
| color: #6b8f6e; | |
| background: transparent; | |
| } | |
| .tab-pill.active { | |
| background: rgba(74,222,128,0.1); | |
| color: var(--grass-accent); | |
| border-color: rgba(74,222,128,0.2); | |
| } | |
| .tab-pill:hover:not(.active) { | |
| color: #9ab89e; | |
| background: rgba(255,255,255,0.03); | |
| } | |
| /* ── Responsive ── */ | |
| @media (max-width: 640px) { | |
| .standing-row { | |
| grid-template-columns: 36px 1fr 36px 36px 36px 36px 36px 36px 36px; | |
| padding: 10px 12px; | |
| font-size: 0.75rem; | |
| } | |
| .countdown-segment { min-width: 40px; padding: 6px 4px; } | |
| .countdown-segment .num { font-size: 1rem; } | |
| } | |
| @media (max-width: 1024px) { | |
| .h2h-timeline { padding-left: 0; } | |
| .h2h-timeline::before { display: none; } | |
| .h2h-item::before { display: none; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated background --> | |
| <div class="grass-field"></div> | |
| <div id="particles"></div> | |
| <!-- Navbar --> | |
| <nav class="nav-glass sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-5 sm:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="flex items-center gap-3 group"> | |
| <div class="relative w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center shadow-lg shadow-emerald-500/20 group-hover:shadow-emerald-500/30 transition-shadow"> | |
| <i class="fa-solid fa-futbol text-white text-sm"></i> | |
| <div class="absolute inset-0 rounded-xl border border-white/10"></div> | |
| </div> | |
| <div> | |
| <h1 class="font-display font-bold text-base text-white leading-tight">GoalPredict</h1> | |
| <p class="text-[0.65rem] text-emerald-400/60 font-medium -mt-0.5 tracking-wider uppercase">Football Analytics</p> | |
| </div> | |
| </a> | |
| <div class="hidden md:flex items-center gap-8"> | |
| <button class="nav-link active" onclick="switchView('matches', this)">Матчи</button> | |
| <button class="nav-link" onclick="switchView('table', this)">Таблица</button> | |
| <button class="nav-link" onclick="switchView('predictions', this)">Прогнозы</button> | |
| <button class="nav-link" onclick="switchView('simulator', this)">Симулятор</button> | |
| </div> | |
| <!-- Mobile nav dots --> | |
| <div class="md:hidden flex items-center gap-1"> | |
| <button class="w-8 h-8 rounded-lg flex items-center justify-center text-emerald-400/70 hover:text-emerald-400 hover:bg-emerald-500/10 transition-all" onclick="switchView('matches', null, true)"> | |
| <i class="fa-solid fa-futbol text-sm"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-lg flex items-center justify-center text-emerald-400/70 hover:text-emerald-400 hover:bg-emerald-500/10 transition-all" onclick="switchView('table', null, true)"> | |
| <i class="fa-solid fa-table text-sm"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-lg flex items-center justify-center text-emerald-400/70 hover:text-emerald-400 hover:bg-emerald-500/10 transition-all" onclick="switchView('predictions', null, true)"> | |
| <i class="fa-solid fa-chart-line text-sm"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-lg flex items-center justify-center text-emerald-400/70 hover:text-emerald-400 hover:bg-emerald-500/10 transition-all" onclick="switchView('simulator', null, true)"> | |
| <i class="fa-solid fa-coins text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Live Ticker --> | |
| <div class="border-b border-emerald-500/5 bg-[#081a11]/50 backdrop-blur-sm"> | |
| <div class="live-ticker max-w-7xl mx-auto"> | |
| <div class="ticker-track" id="tickerTrack"></div> | |
| </div> | |
| </div> | |
| <!-- ────────────────── VIEW: MATCHES ────────────────── --> | |
| <section id="view-matches" class="view-section active"> | |
| <div class="max-w-7xl mx-auto px-5 sm:px-8 py-8 pb-20"> | |
| <!-- Hero: Featured Match --> | |
| <div class="relative rounded-[24px] overflow-hidden mb-12 anim-up d-1 group" id="featuredMatch"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-emerald-900/40 via-[#0b1e15] to-[#0b1e15]"></div> | |
| <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(74,222,128,0.06),transparent_60%)]"></div> | |
| <div class="relative p-6 sm:p-10 lg:p-12"> | |
| <div class="flex flex-wrap items-center gap-3 mb-6"> | |
| <span class="chip chip-league"><i class="fa-solid fa-star text-[0.6rem]"></i> Главный матч</span> | |
| <span class="chip chip-time"><i class="fa-regular fa-clock text-[0.6rem]"></i> <span id="featuredTimer"></span></span> | |
| </div> | |
| <div class="flex flex-col lg:flex-row items-center justify-between gap-8"> | |
| <div class="flex items-center gap-5 flex-1 justify-end order-2 lg:order-1"> | |
| <div class="text-right"> | |
| <h3 class="font-display font-bold text-lg sm:text-xl text-white leading-tight" id="featuredHome">--</h3> | |
| <p class="text-[0.72rem] text-emerald-400/50 mt-0.5 font-medium tracking-wider uppercase">Хозяева</p> | |
| </div> | |
| <div class="crest crest-lg" id="featuredHomeCrest"></div> | |
| </div> | |
| <div class="text-center order-1 lg:order-2"> | |
| <div class="score-display text-4xl sm:text-5xl lg:text-6xl text-emerald-400 mb-3" id="featuredScore">- : -</div> | |
| <div class="flex items-center gap-3 justify-center mb-2"> | |
| <span class="text-xs text-amber-400/80 font-semibold flex items-center gap-1.5"> | |
| <i class="fa-solid fa-circle text-[6px] animate-pulse"></i> LIVE | |
| </span> | |
| <span class="text-xs text-white/40 font-mono" id="featuredMinute">--'</span> | |
| </div> | |
| <div class="flex items-center gap-1.5 justify-center"> | |
| <span class="text-[0.65rem] text-white/30 font-medium bg-white/5 px-3 py-1 rounded-full" id="featuredLeague">--</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-5 flex-1 order-3"> | |
| <div class="crest crest-lg" id="featuredAwayCrest"></div> | |
| <div class="text-left"> | |
| <h3 class="font-display font-bold text-lg sm:text-xl text-white leading-tight" id="featuredAway">--</h3> | |
| <p class="text-[0.72rem] text-emerald-400/50 mt-0.5 font-medium tracking-wider uppercase">Гости</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick stats bar --> | |
| <div class="flex flex-wrap items-center justify-center gap-3 mt-8 pt-6 border-t border-emerald-500/8"> | |
| <div class="stat-pill"><i class="fa-solid fa-calendar text-emerald-400/50 text-[0.65rem]"></i> <span id="featuredDate">--</span></div> | |
| <div class="stat-pill"><i class="fa-solid fa-location-dot text-emerald-400/50 text-[0.65rem]"></i> <span id="featuredVenue">--</span></div> | |
| <div class="stat-pill"><i class="fa-solid fa-eye text-emerald-400/50 text-[0.65rem]"></i> <span id="featuredViewers">--</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Section header --> | |
| <div class="flex items-end justify-between mb-7 anim-up d-2"> | |
| <h2 class="section-title">Расписание матчей</h2> | |
| <div class="flex gap-2"> | |
| <button class="tab-pill active" onclick="filterMatches('all', this)">Все</button> | |
| <button class="tab-pill" onclick="filterMatches('live', this)">Live</button> | |
| <button class="tab-pill" onclick="filterMatches('upcoming', this)">Предстоящие</button> | |
| </div> | |
| </div> | |
| <!-- Match Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-5" id="matchGrid"></div> | |
| </div> | |
| </section> | |
| <!-- ────────────────── VIEW: TABLE ────────────────── --> | |
| <section id="view-table" class="view-section"> | |
| <div class="max-w-7xl mx-auto px-5 sm:px-8 py-8 pb-20"> | |
| <h2 class="section-title mb-7 anim-up">Турнирная таблица</h2> | |
| <div class="anim-up d-2 overflow-x-auto -mx-2 px-2"> | |
| <div class="min-w-[640px] bg-[#0f291d]/50 border border-emerald-500/8 rounded-2xl overflow-hidden backdrop-blur-sm"> | |
| <div class="standing-row bg-white/[0.02] text-[0.68rem] text-emerald-400/50 font-semibold tracking-wider uppercase border-b border-emerald-500/8 py-3" style="grid-template-columns:48px 1fr 48px 48px 48px 48px 48px 48px 48px"> | |
| <span>#</span><span>Команда</span><span>И</span><span>В</span><span>Н</span><span>П</span><span>ГЗ</span><span>ГП</span><span>О</span> | |
| </div> | |
| <div id="standingsBody"></div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap items-center gap-6 mt-6 text-[0.75rem] text-white/30 anim-up d-3"> | |
| <div class="flex items-center gap-2"><div class="w-3 h-3 rounded bg-amber-400"></div> Лига Чемпионов</div> | |
| <div class="flex items-center gap-2"><div class="w-3 h-3 rounded bg-slate-400"></div> Лига Европы</div> | |
| <div class="flex items-center gap-2"><div class="w-3 h-3 rounded bg-amber-700"></div> Конференц-лига</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ────────────────── VIEW: PREDICTIONS ────────────────── --> | |
| <section id="view-predictions" class="view-section"> | |
| <div class="max-w-7xl mx-auto px-5 sm:px-8 py-8 pb-20"> | |
| <h2 class="section-title mb-7 anim-up">Движок прогнозов</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 anim-up d-2"> | |
| <!-- Left: match selector --> | |
| <div class="lg:col-span-1 space-y-4"> | |
| <div class="text-[0.7rem] text-emerald-400/50 uppercase tracking-widest font-semibold mb-2">Выберите матч</div> | |
| <div id="predictionList" class="space-y-3 max-h-[500px] overflow-y-auto pr-1"></div> | |
| </div> | |
| <!-- Center: prediction output --> | |
| <div class="lg:col-span-2" id="predictionOutput"> | |
| <div class="bg-[#0f291d]/40 border border-emerald-500/8 rounded-2xl p-8 flex flex-col items-center justify-center text-center h-full min-h-[400px]"> | |
| <div class="w-16 h-16 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-5"> | |
| <i class="fa-solid fa-brain text-2xl text-emerald-400/40"></i> | |
| </div> | |
| <h3 class="font-display font-bold text-lg text-white/60 mb-1">Выберите матч слева</h3> | |
| <p class="text-sm text-white/30 max-w-xs">Наш AI-анализатор рассчитает вероятности исхода на основе статистики, формы и истории встреч.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ────────────────── VIEW: SIMULATOR ────────────────── --> | |
| <section id="view-simulator" class="view-section"> | |
| <div class="max-w-7xl mx-auto px-5 sm:px-8 py-8 pb-20"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 anim-up"> | |
| <!-- Wallet --> | |
| <div class="bg-[#0f291d]/50 border border-emerald-500/8 rounded-2xl p-7 backdrop-blur-sm relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 rounded-full -translate-y- |