{"id":475,"date":"2026-03-04T12:31:51","date_gmt":"2026-03-04T12:31:51","guid":{"rendered":"https:\/\/grossenoix.com\/?page_id=475"},"modified":"2026-03-04T13:15:32","modified_gmt":"2026-03-04T13:15:32","slug":"sports-book","status":"publish","type":"page","link":"https:\/\/grossenoix.com\/index.php\/sports-book\/","title":{"rendered":"Sports book"},"content":{"rendered":"\n\n\n<div id=\"eventbookApp\">\n  <style>\n    \/* =========================\n       EVENTBOOK \/ SPORTSBOOK UI\n       Flatsome-safe: scoped to #eventbookApp\n       ========================= *\/\n\n    #eventbookApp{\n      --bg0:#07080b;\n      --bg1:#0b0d12;\n      --panel: rgba(255,255,255,.06);\n      --panel2: rgba(255,255,255,.09);\n      --stroke: rgba(255,255,255,.12);\n      --text: rgba(255,255,255,.92);\n      --muted: rgba(255,255,255,.65);\n      --soft: rgba(255,255,255,.10);\n      --shadow: 0 18px 60px rgba(0,0,0,.55);\n      --radius: 18px;\n      --radius2: 28px;\n\n      --acc:#8b5cf6;\n      --acc2:#22c55e;\n      --warn:#f59e0b;\n      --bad:#ef4444;\n      --good:#34d399;\n\n      --maxw: 1220px;\n      --gap: 14px;\n      --gap2: 20px;\n\n      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\",\"Segoe UI Emoji\";\n      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n\n      color:var(--text);\n      font-family:var(--font);\n    }\n\n    #eventbookApp *{box-sizing:border-box}\n    #eventbookApp a{color:inherit; text-decoration:none}\n    #eventbookApp button, #eventbookApp input{font:inherit}\n\n    #eventbookApp .eb-wrap{\n      max-width:var(--maxw);\n      margin:0 auto;\n      padding:26px 18px 40px;\n    }\n\n    \/* Background (scoped) *\/\n    #eventbookApp .eb-shell{\n      background:\n        radial-gradient(1200px 600px at 20% -10%, rgba(139,92,246,.22), transparent 55%),\n        radial-gradient(900px 500px at 90% 10%, rgba(34,197,94,.18), transparent 58%),\n        radial-gradient(1100px 700px at 50% 120%, rgba(245,158,11,.10), transparent 58%),\n        linear-gradient(180deg, var(--bg0), var(--bg1));\n      border-radius: 24px;\n      overflow:hidden;\n      border:1px solid rgba(255,255,255,.06);\n    }\n\n    \/* Top bar *\/\n    #eventbookApp .topbar{\n      position:sticky; top:0; z-index:50;\n      backdrop-filter: blur(18px);\n      background: linear-gradient(180deg, rgba(7,8,11,.82), rgba(7,8,11,.45));\n      border-bottom:1px solid rgba(255,255,255,.08);\n    }\n    #eventbookApp .topbar .eb-wrap{\n      padding-top:16px; padding-bottom:14px;\n      display:flex; align-items:center; justify-content:space-between; gap:12px;\n    }\n\n    #eventbookApp .brand{\n      display:flex; align-items:center; gap:10px;\n      min-width: 220px;\n    }\n    #eventbookApp .mark{\n      width:42px; height:42px; border-radius:14px;\n      background:\n        radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.35), transparent 60%),\n        linear-gradient(135deg, rgba(139,92,246,.95), rgba(34,197,94,.85));\n      box-shadow: 0 16px 40px rgba(0,0,0,.45);\n      border:1px solid rgba(255,255,255,.12);\n      flex:0 0 auto;\n    }\n    #eventbookApp .brand h1{\n      margin:0; font-size:14px; letter-spacing:.32em; text-transform:uppercase;\n    }\n    #eventbookApp .brand .sub{\n      font-size:12px; color:var(--muted); letter-spacing:.08em;\n    }\n\n    #eventbookApp .controls{\n      display:flex; align-items:center; gap:10px;\n      flex:1; justify-content:center;\n      min-width: 260px;\n    }\n    #eventbookApp .search{\n      display:flex; align-items:center; gap:10px;\n      width:min(520px, 100%);\n      padding:11px 12px;\n      border-radius: 999px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(255,255,255,.04);\n      box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);\n    }\n    #eventbookApp .search svg{opacity:.75; flex:0 0 auto}\n    #eventbookApp .search input{\n      width:100%;\n      border:0; outline:none;\n      background:transparent;\n      color:var(--text);\n      font-size:14px;\n    }\n    #eventbookApp .search input::placeholder{color:rgba(255,255,255,.45)}\n\n    #eventbookApp .right{\n      display:flex; align-items:center; gap:10px; justify-content:flex-end;\n      min-width: 200px;\n    }\n\n    #eventbookApp .chip{\n      display:inline-flex; align-items:center; gap:8px;\n      padding:10px 12px;\n      border-radius: 999px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(255,255,255,.04);\n      color:rgba(255,255,255,.84);\n      cursor:pointer;\n      transition: transform .12s ease, background .12s ease, border-color .12s ease;\n      user-select:none;\n      white-space:nowrap;\n    }\n    #eventbookApp .chip:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14)}\n    #eventbookApp .chip b{font-weight:650}\n    #eventbookApp .dot{\n      width:10px; height:10px; border-radius:999px;\n      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%), var(--acc);\n      box-shadow: 0 0 0 3px rgba(139,92,246,.18);\n    }\n\n    \/* Hero *\/\n    #eventbookApp .hero{\n      margin-top:18px;\n      border-radius: var(--radius2);\n      border:1px solid rgba(255,255,255,.10);\n      background:\n        radial-gradient(900px 420px at 20% 10%, rgba(139,92,246,.20), transparent 55%),\n        radial-gradient(760px 440px at 90% 20%, rgba(34,197,94,.16), transparent 58%),\n        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));\n      box-shadow: var(--shadow);\n      overflow:hidden;\n      position:relative;\n    }\n    #eventbookApp .hero::before{\n      content:\"\";\n      position:absolute; inset:-120px -40px auto -40px;\n      height:240px;\n      background: linear-gradient(90deg, rgba(255,255,255,.16), transparent 55%);\n      transform: rotate(-6deg);\n      opacity:.22;\n      pointer-events:none;\n    }\n    #eventbookApp .hero-inner{\n      padding:18px 18px 16px;\n      display:grid;\n      grid-template-columns: 1.1fr .9fr;\n      gap: var(--gap2);\n      align-items:stretch;\n    }\n    #eventbookApp .hero h2{\n      margin:0 0 8px;\n      font-size:26px;\n      letter-spacing:-.02em;\n      line-height:1.12;\n    }\n    #eventbookApp .hero p{\n      margin:0 0 14px;\n      color:var(--muted);\n      max-width: 56ch;\n    }\n\n    #eventbookApp .tabs{\n      display:flex; gap:10px; flex-wrap:wrap;\n      margin-top: 12px;\n    }\n    #eventbookApp .tab{\n      border-radius: 999px;\n      padding:10px 12px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(255,255,255,.04);\n      color: rgba(255,255,255,.82);\n      cursor:pointer;\n      transition: background .12s ease, transform .12s ease, border-color .12s ease;\n      display:inline-flex; align-items:center; gap:8px;\n      user-select:none;\n    }\n    #eventbookApp .tab:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14)}\n    #eventbookApp .tab.active{\n      background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(34,197,94,.18));\n      border-color: rgba(255,255,255,.18);\n      color: rgba(255,255,255,.92);\n      box-shadow: 0 12px 40px rgba(0,0,0,.35);\n    }\n    #eventbookApp .tab .pill{\n      font-family:var(--mono);\n      font-size:11px;\n      padding:3px 8px;\n      border-radius: 999px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(0,0,0,.25);\n      color: rgba(255,255,255,.75);\n    }\n\n    #eventbookApp .wallet{\n      border-radius: var(--radius);\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(0,0,0,.22);\n      padding:14px;\n      display:flex; flex-direction:column; gap:12px;\n      justify-content:space-between;\n    }\n    #eventbookApp .wallet-top{\n      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;\n    }\n    #eventbookApp .wallet h3{\n      margin:0;\n      font-size:13px;\n      letter-spacing:.18em;\n      text-transform:uppercase;\n      color: rgba(255,255,255,.82);\n    }\n    #eventbookApp .wallet .bal{\n      margin-top:8px;\n      font-size:28px;\n      letter-spacing:-.02em;\n    }\n    #eventbookApp .wallet .meta{\n      color: var(--muted);\n      font-size:12px;\n    }\n    #eventbookApp .wallet-actions{\n      display:flex; gap:10px; flex-wrap:wrap;\n    }\n    #eventbookApp .btn{\n      border:1px solid rgba(255,255,255,.12);\n      background: rgba(255,255,255,.05);\n      color: rgba(255,255,255,.90);\n      padding:10px 12px;\n      border-radius: 14px;\n      cursor:pointer;\n      transition: transform .12s ease, background .12s ease, border-color .12s ease;\n      display:inline-flex; align-items:center; gap:8px;\n      user-select:none;\n    }\n    #eventbookApp .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16)}\n    #eventbookApp .btn.primary{\n      background: linear-gradient(135deg, rgba(139,92,246,.42), rgba(34,197,94,.20));\n      border-color: rgba(255,255,255,.18);\n    }\n    #eventbookApp .btn.danger{\n      background: rgba(239,68,68,.12);\n      border-color: rgba(239,68,68,.22);\n    }\n\n    \/* Main grid *\/\n    #eventbookApp .grid{\n      margin-top: 18px;\n      display:grid;\n      grid-template-columns: 1.45fr .55fr;\n      gap: var(--gap2);\n      align-items:start;\n    }\n\n    #eventbookApp .panel{\n      border-radius: var(--radius2);\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(255,255,255,.03);\n      box-shadow: var(--shadow);\n      overflow:hidden;\n    }\n    #eventbookApp .panel-head{\n      padding:14px 14px 12px;\n      display:flex; align-items:center; justify-content:space-between; gap:12px;\n      border-bottom:1px solid rgba(255,255,255,.08);\n      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));\n    }\n    #eventbookApp .panel-head h3{\n      margin:0;\n      font-size:13px;\n      letter-spacing:.18em;\n      text-transform:uppercase;\n      color: rgba(255,255,255,.86);\n      display:flex; align-items:center; gap:10px;\n    }\n    #eventbookApp .badge{\n      font-family:var(--mono);\n      font-size:11px;\n      padding:4px 8px;\n      border-radius: 999px;\n      border:1px solid rgba(255,255,255,.10);\n      color: rgba(255,255,255,.72);\n      background: rgba(0,0,0,.25);\n      white-space:nowrap;\n    }\n\n    \/* Event list *\/\n    #eventbookApp .events{\n      display:flex; flex-direction:column;\n      padding: 10px;\n      gap: 10px;\n    }\n\n    #eventbookApp .event{\n      border-radius: 18px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(255,255,255,.04);\n      padding: 12px;\n      display:grid;\n      grid-template-columns: 1fr auto;\n      gap: 12px;\n      align-items:stretch;\n      transition: transform .12s ease, border-color .12s ease, background .12s ease;\n    }\n    #eventbookApp .event:hover{\n      transform: translateY(-1px);\n      border-color: rgba(255,255,255,.14);\n      background: rgba(255,255,255,.055);\n    }\n\n    #eventbookApp .event-left{min-width:0}\n    #eventbookApp .kicker{\n      display:flex; align-items:center; gap:10px; flex-wrap:wrap;\n      margin-bottom:8px;\n      color: var(--muted);\n      font-size:12px;\n    }\n    #eventbookApp .kicker .cat{\n      display:inline-flex; align-items:center; gap:8px;\n      padding:5px 10px;\n      border-radius: 999px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(0,0,0,.22);\n      color: rgba(255,255,255,.78);\n      font-family: var(--mono);\n      letter-spacing:.02em;\n    }\n    #eventbookApp .kicker .live{\n      display:inline-flex; align-items:center; gap:8px;\n      padding:5px 10px;\n      border-radius:999px;\n      border:1px solid rgba(34,197,94,.22);\n      background: rgba(34,197,94,.10);\n      color: rgba(255,255,255,.88);\n      font-family: var(--mono);\n    }\n    #eventbookApp .pulse{\n      width:8px; height:8px; border-radius:999px;\n      background: var(--acc2);\n      box-shadow: 0 0 0 4px rgba(34,197,94,.14);\n      animation: ebPulse 1.2s infinite ease-in-out;\n    }\n    @keyframes ebPulse{\n      0%{transform:scale(1); opacity:1}\n      50%{transform:scale(1.25); opacity:.75}\n      100%{transform:scale(1); opacity:1}\n    }\n\n    #eventbookApp .title{\n      font-size:16px;\n      line-height:1.2;\n      margin:0 0 6px;\n      letter-spacing:-.01em;\n      font-weight:650;\n      white-space:nowrap;\n      overflow:hidden;\n      text-overflow:ellipsis;\n    }\n    #eventbookApp .meta2{\n      color: var(--muted);\n      font-size:12px;\n      display:flex;\n      gap:10px;\n      flex-wrap:wrap;\n      align-items:center;\n    }\n    #eventbookApp .meta2 span{\n      display:inline-flex; align-items:center; gap:7px;\n      padding:6px 10px;\n      border-radius: 12px;\n      background: rgba(0,0,0,.18);\n      border:1px solid rgba(255,255,255,.08);\n      font-family: var(--mono);\n      font-size: 11px;\n      color: rgba(255,255,255,.72);\n    }\n\n    #eventbookApp .event-right{\n      display:flex; flex-direction:column; gap:10px;\n      min-width: 300px;\n    }\n    #eventbookApp .markets{\n      display:grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 10px;\n    }\n    #eventbookApp .odd{\n      border-radius: 16px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(0,0,0,.22);\n      padding: 10px;\n      cursor:pointer;\n      transition: transform .12s ease, border-color .12s ease, background .12s ease;\n      display:flex;\n      flex-direction:column;\n      gap:6px;\n      user-select:none;\n      text-align:left;\n    }\n    #eventbookApp .odd:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.14); background: rgba(0,0,0,.28)}\n    #eventbookApp .odd .label{\n      color: rgba(255,255,255,.78);\n      font-size:12px;\n      white-space:nowrap;\n      overflow:hidden;\n      text-overflow:ellipsis;\n    }\n    #eventbookApp .odd .price{\n      display:flex; align-items:baseline; justify-content:space-between; gap:8px;\n      font-family: var(--mono);\n      font-size: 15px;\n    }\n    #eventbookApp .odd .price b{font-weight:750}\n    #eventbookApp .odd.selected{\n      background: linear-gradient(135deg, rgba(139,92,246,.30), rgba(34,197,94,.16));\n      border-color: rgba(255,255,255,.18);\n      box-shadow: 0 14px 40px rgba(0,0,0,.35);\n    }\n\n    \/* Bet slip *\/\n    #eventbookApp .betslip{\n      position:sticky;\n      top: 92px;\n      border-radius: var(--radius2);\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(255,255,255,.03);\n      box-shadow: var(--shadow);\n      overflow:hidden;\n    }\n    #eventbookApp .betslip-head{\n      padding:14px;\n      display:flex; align-items:center; justify-content:space-between;\n      border-bottom:1px solid rgba(255,255,255,.08);\n      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));\n    }\n    #eventbookApp .betslip-head h3{\n      margin:0;\n      font-size:13px;\n      letter-spacing:.18em;\n      text-transform:uppercase;\n    }\n    #eventbookApp .count{\n      font-family: var(--mono);\n      font-size: 12px;\n      color: rgba(255,255,255,.78);\n      padding: 6px 10px;\n      border-radius: 999px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(0,0,0,.22);\n    }\n\n    #eventbookApp .betslip-body{\n      padding: 12px;\n      display:flex;\n      flex-direction:column;\n      gap: 12px;\n    }\n    #eventbookApp .slip-items{\n      display:flex;\n      flex-direction:column;\n      gap: 10px;\n      max-height: 44vh;\n      overflow:auto;\n      padding-right: 4px;\n    }\n    #eventbookApp .slip-items::-webkit-scrollbar{width:8px}\n    #eventbookApp .slip-items::-webkit-scrollbar-thumb{background: rgba(255,255,255,.10); border-radius: 999px}\n    #eventbookApp .slip-items::-webkit-scrollbar-track{background: transparent}\n\n    #eventbookApp .slip-item{\n      border-radius: 16px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(0,0,0,.20);\n      padding: 10px;\n      display:flex;\n      flex-direction:column;\n      gap: 8px;\n    }\n    #eventbookApp .slip-row{\n      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;\n    }\n    #eventbookApp .slip-item .who{\n      font-size: 13px;\n      line-height: 1.2;\n      color: rgba(255,255,255,.90);\n      max-width: 26ch;\n      overflow:hidden;\n      text-overflow:ellipsis;\n      white-space:nowrap;\n    }\n    #eventbookApp .slip-item .what{\n      font-size: 12px;\n      color: var(--muted);\n      font-family: var(--mono);\n      white-space:nowrap;\n      overflow:hidden;\n      text-overflow:ellipsis;\n      max-width: 30ch;\n    }\n    #eventbookApp .slip-item .oddv{\n      font-family: var(--mono);\n      font-size: 13px;\n      color: rgba(255,255,255,.86);\n    }\n    #eventbookApp .xbtn{\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(255,255,255,.04);\n      color: rgba(255,255,255,.85);\n      width: 30px; height: 30px;\n      border-radius: 12px;\n      cursor:pointer;\n      transition: transform .12s ease, background .12s ease, border-color .12s ease;\n    }\n    #eventbookApp .xbtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14)}\n\n    #eventbookApp .stake{\n      display:grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 10px;\n    }\n    #eventbookApp .field{\n      border-radius: 16px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(0,0,0,.22);\n      padding: 10px;\n      display:flex;\n      flex-direction:column;\n      gap: 6px;\n    }\n    #eventbookApp .field label{\n      font-size: 11px;\n      font-family: var(--mono);\n      color: rgba(255,255,255,.72);\n      letter-spacing: .02em;\n    }\n    #eventbookApp .field input{\n      width:100%;\n      border:0;\n      outline:none;\n      background: transparent;\n      color: rgba(255,255,255,.92);\n      font-size: 16px;\n      font-family: var(--mono);\n    }\n\n    #eventbookApp .summary{\n      border-radius: 18px;\n      border:1px solid rgba(255,255,255,.10);\n      background: rgba(255,255,255,.04);\n      padding: 10px;\n      display:flex;\n      flex-direction:column;\n      gap: 8px;\n    }\n    #eventbookApp .sum-row{\n      display:flex; align-items:center; justify-content:space-between;\n      color: rgba(255,255,255,.85);\n      font-family: var(--mono);\n      font-size: 12px;\n      padding: 6px 6px;\n      border-bottom: 1px dashed rgba(255,255,255,.10);\n    }\n    #eventbookApp .sum-row:last-child{border-bottom:0}\n    #eventbookApp .sum-row .mut{color: rgba(255,255,255,.62)}\n    #eventbookApp .cta{\n      display:flex;\n      gap: 10px;\n    }\n    #eventbookApp .cta .btn{flex:1; justify-content:center; padding:12px}\n    #eventbookApp .hint{\n      color: rgba(255,255,255,.60);\n      font-size: 12px;\n      line-height:1.35;\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 980px){\n      #eventbookApp .hero-inner{grid-template-columns: 1fr}\n      #eventbookApp .grid{grid-template-columns: 1fr}\n      #eventbookApp .event-right{min-width: 0}\n      #eventbookApp .betslip{position:relative; top:auto}\n      #eventbookApp .right{display:none}\n      #eventbookApp .brand{min-width:auto}\n      #eventbookApp .controls{justify-content:flex-end}\n    }\n    @media (max-width: 620px){\n      #eventbookApp .markets{grid-template-columns: 1fr}\n      #eventbookApp .stake{grid-template-columns: 1fr}\n      #eventbookApp .title{white-space:normal}\n      #eventbookApp .kicker{gap:8px}\n    }\n  <\/style>\n\n  <div class=\"eb-shell\">\n    <!-- TOPBAR -->\n    <div class=\"topbar\">\n      <div class=\"eb-wrap\">\n        <div class=\"brand\" aria-label=\"Brand\">\n          <div class=\"mark\" aria-hidden=\"true\"><\/div>\n          <div>\n            <h1>EVENTBOOK<\/h1>\n            <div class=\"sub\">Sportsbook \u2022 Entertainment \u2022 Insolite<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"controls\">\n          <div class=\"search\" role=\"search\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\".9\"\/>\n              <path d=\"M16.5 16.5 21 21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\".9\"\/>\n            <\/svg>\n            <input id=\"eb_q\" type=\"search\" placeholder=\"Search events, teams, artists, weird bets\u2026\" autocomplete=\"off\" \/>\n          <\/div>\n        <\/div>\n\n        <div class=\"right\">\n          <div class=\"chip\" id=\"eb_modeChip\" title=\"Demo mode\">\n            <span class=\"dot\" aria-hidden=\"true\"><\/span>\n            <span><b>LIVE UI<\/b> \u2022 demo<\/span>\n          <\/div>\n          <div class=\"chip\" id=\"eb_clearAllTop\" title=\"Clear bet slip\">\n            <span style=\"font-family:var(--mono); opacity:.85;\">\u232b<\/span>\n            <span>Clear<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"eb-wrap\">\n      <!-- HERO -->\n      <section class=\"hero\" aria-label=\"Overview\">\n        <div class=\"hero-inner\">\n          <div>\n            <h2>One interface. Three worlds. Same velocity.<\/h2>\n            <p>\n              Premium sportsbook + eventbook layout for fast scanning. Filter by category, search instantly, pick markets, and build a slip.\n            <\/p>\n\n            <div class=\"tabs\" role=\"tablist\" aria-label=\"Category tabs\">\n              <button class=\"tab active\" data-filter=\"all\" type=\"button\" aria-selected=\"true\">\n                All <span class=\"pill\" id=\"eb_countAll\">\u2014<\/span>\n              <\/button>\n              <button class=\"tab\" data-filter=\"sports\" type=\"button\" aria-selected=\"false\">\n                Sports <span class=\"pill\" id=\"eb_countSports\">\u2014<\/span>\n              <\/button>\n              <button class=\"tab\" data-filter=\"entertainment\" type=\"button\" aria-selected=\"false\">\n                Entertainment <span class=\"pill\" id=\"eb_countEnt\">\u2014<\/span>\n              <\/button>\n              <button class=\"tab\" data-filter=\"insolite\" type=\"button\" aria-selected=\"false\">\n                Insolite <span class=\"pill\" id=\"eb_countIns\">\u2014<\/span>\n              <\/button>\n            <\/div>\n          <\/div>\n\n          <aside class=\"wallet\" aria-label=\"Wallet demo\">\n            <div class=\"wallet-top\">\n              <div>\n                <h3>Wallet<\/h3>\n                <div class=\"bal\" id=\"eb_balance\">$1,250.00<\/div>\n                <div class=\"meta\">Demo balance \u2022 odds are mock data<\/div>\n              <\/div>\n              <div class=\"badge\">v1 \u2022 Flatsome<\/div>\n            <\/div>\n            <div class=\"wallet-actions\">\n              <button class=\"btn primary\" id=\"eb_quick10\" type=\"button\">+ $10 stake<\/button>\n              <button class=\"btn\" id=\"eb_quick25\" type=\"button\">+ $25 stake<\/button>\n              <button class=\"btn danger\" id=\"eb_resetSlip\" type=\"button\">Reset slip<\/button>\n            <\/div>\n          <\/aside>\n        <\/div>\n      <\/section>\n\n      <!-- MAIN GRID -->\n      <section class=\"grid\" aria-label=\"Main content\">\n        <!-- EVENT LIST -->\n        <div class=\"panel\" aria-label=\"Event list\">\n          <div class=\"panel-head\">\n            <h3>\n              Event Feed\n              <span class=\"badge\" id=\"eb_feedMeta\">All categories<\/span>\n            <\/h3>\n            <span class=\"badge\" id=\"eb_shownCount\">\u2014 shown<\/span>\n          <\/div>\n\n          <div class=\"events\" id=\"eb_events\"><\/div>\n        <\/div>\n\n        <!-- BET SLIP -->\n        <aside class=\"betslip\" aria-label=\"Bet slip\">\n          <div class=\"betslip-head\">\n            <h3>Bet Slip<\/h3>\n            <div class=\"count\"><span id=\"eb_slipCount\">0<\/span> selections<\/div>\n          <\/div>\n\n          <div class=\"betslip-body\">\n            <div class=\"slip-items\" id=\"eb_slipItems\" aria-label=\"Selections\"><\/div>\n\n            <div class=\"stake\" aria-label=\"Stake controls\">\n              <div class=\"field\">\n                <label for=\"eb_stake\">STAKE<\/label>\n                <input id=\"eb_stake\" type=\"number\" min=\"0\" step=\"0.5\" value=\"10\" \/>\n              <\/div>\n              <div class=\"field\">\n                <label>MODE<\/label>\n                <input type=\"text\" value=\"Parlay math (demo)\" readonly \/>\n              <\/div>\n            <\/div>\n\n            <div class=\"summary\" aria-label=\"Summary\">\n              <div class=\"sum-row\">\n                <span class=\"mut\">Total odds<\/span>\n                <span id=\"eb_totalOdds\">\u2014<\/span>\n              <\/div>\n              <div class=\"sum-row\">\n                <span class=\"mut\">Potential return<\/span>\n                <span id=\"eb_return\">\u2014<\/span>\n              <\/div>\n              <div class=\"sum-row\">\n                <span class=\"mut\">Risk level<\/span>\n                <span id=\"eb_risk\">\u2014<\/span>\n              <\/div>\n            <\/div>\n\n            <div class=\"cta\" aria-label=\"Actions\">\n              <button class=\"btn\" id=\"eb_clearAll\" type=\"button\">Clear<\/button>\n              <button class=\"btn primary\" id=\"eb_placeBet\" type=\"button\">Place (demo)<\/button>\n            <\/div>\n\n            <div class=\"hint\">\n              Tip: click any odd tile to add\/remove it from the slip.\n            <\/div>\n          <\/div>\n        <\/aside>\n      <\/section>\n    <\/div>\n  <\/div>\n\n  <script>\n    (function(){\n      \/\/ Prevent double-init if Flatsome re-renders blocks\n      if (window.__EVENTBOOK_FLATSOME_INIT__) return;\n      window.__EVENTBOOK_FLATSOME_INIT__ = true;\n\n      const DATA = [\n        { id:\"sp-001\", category:\"sports\", live:true,  title:\"MTL Titans vs QC Nordiques\", league:\"Hockey \u2022 Pro\", when:\"Tonight \u2022 19:30\", venue:\"Bell District\",\n          markets:[ {key:\"home\",label:\"Titans\",price:1.82},{key:\"draw\",label:\"Draw\",price:3.60},{key:\"away\",label:\"Nordiques\",price:2.15} ] },\n        { id:\"sp-002\", category:\"sports\", live:false, title:\"Toronto FC vs NYC City\", league:\"Football \u2022 League\", when:\"Sat \u2022 15:00\", venue:\"Harbor Arena\",\n          markets:[ {key:\"home\",label:\"Toronto\",price:2.10},{key:\"draw\",label:\"Draw\",price:3.30},{key:\"away\",label:\"NYC\",price:3.05} ] },\n        { id:\"sp-003\", category:\"sports\", live:false, title:\"Main Event \u2014 Lightweight Title\", league:\"MMA \u2022 5 rounds\", when:\"Sun \u2022 21:00\", venue:\"Octagon Hall\",\n          markets:[ {key:\"a\",label:\"Fighter A\",price:1.68},{key:\"b\",label:\"Fighter B\",price:2.35},{key:\"ko\",label:\"KO\/TKO\",price:2.05} ] },\n\n        { id:\"en-101\", category:\"entertainment\", live:false, title:\"Global Music Awards \u2014 Best Album\", league:\"Awards \u2022 Live broadcast\", when:\"Apr 12 \u2022 20:00\", venue:\"Cobalt Theater\",\n          markets:[ {key:\"x\",label:\"Artist X\",price:2.40},{key:\"y\",label:\"Artist Y\",price:2.75},{key:\"z\",label:\"Artist Z\",price:3.20} ] },\n        { id:\"en-102\", category:\"entertainment\", live:true,  title:\"Reality Finale \u2014 Winner Vote\", league:\"TV \u2022 Live\", when:\"Now\", venue:\"Studio 07\",\n          markets:[ {key:\"a\",label:\"Contestant A\",price:1.95},{key:\"b\",label:\"Contestant B\",price:2.05},{key:\"c\",label:\"Contestant C\",price:3.80} ] },\n        { id:\"en-103\", category:\"entertainment\", live:false, title:\"Box Office Weekend \u2014 #1 Movie\", league:\"Cinema \u2022 Weekend\", when:\"Fri\u2013Sun\", venue:\"North America\",\n          markets:[ {key:\"m1\",label:\"Movie 1\",price:2.05},{key:\"m2\",label:\"Movie 2\",price:2.65},{key:\"m3\",label:\"Movie 3\",price:3.10} ] },\n\n        { id:\"in-201\", category:\"insolite\", live:false, title:\"First word in tomorrow\u2019s headline\", league:\"Insolite \u2022 Culture\", when:\"Tomorrow \u2022 06:00\", venue:\"Top outlet\",\n          markets:[ {key:\"w1\",label:\"\u201cChaos\u201d\",price:3.10},{key:\"w2\",label:\"\u201cGold\u201d\",price:2.55},{key:\"w3\",label:\"\u201cSignal\u201d\",price:2.95} ] },\n        { id:\"in-202\", category:\"insolite\", live:true,  title:\"Will the next trending meme be an animal?\", league:\"Insolite \u2022 Internet\", when:\"Now\", venue:\"#ForYou\",\n          markets:[ {key:\"yes\",label:\"Yes\",price:1.72},{key:\"no\",label:\"No\",price:2.10},{key:\"type\",label:\"Cat specifically\",price:2.85} ] },\n        { id:\"in-203\", category:\"insolite\", live:false, title:\"Weather roulette \u2014 will it rain at 17:00?\", league:\"Insolite \u2022 Micro-forecast\", when:\"Today \u2022 17:00\", venue:\"Downtown\",\n          markets:[ {key:\"r1\",label:\"Rain\",price:2.20},{key:\"r2\",label:\"No rain\",price:1.78},{key:\"r3\",label:\"Thunder\",price:3.90} ] },\n      ];\n\n      const CATEGORY_LABEL = { sports:\"Sports\", entertainment:\"Entertainment\", insolite:\"Insolite\" };\n\n      const els = {\n        q: document.getElementById(\"eb_q\"),\n        events: document.getElementById(\"eb_events\"),\n        tabs: Array.from(document.querySelectorAll(\"#eventbookApp .tab\")),\n        feedMeta: document.getElementById(\"eb_feedMeta\"),\n        shownCount: document.getElementById(\"eb_shownCount\"),\n\n        slipItems: document.getElementById(\"eb_slipItems\"),\n        slipCount: document.getElementById(\"eb_slipCount\"),\n        stake: document.getElementById(\"eb_stake\"),\n        totalOdds: document.getElementById(\"eb_totalOdds\"),\n        ret: document.getElementById(\"eb_return\"),\n        risk: document.getElementById(\"eb_risk\"),\n\n        countAll: document.getElementById(\"eb_countAll\"),\n        countSports: document.getElementById(\"eb_countSports\"),\n        countEnt: document.getElementById(\"eb_countEnt\"),\n        countIns: document.getElementById(\"eb_countIns\"),\n\n        clearAll: document.getElementById(\"eb_clearAll\"),\n        clearAllTop: document.getElementById(\"eb_clearAllTop\"),\n        resetSlip: document.getElementById(\"eb_resetSlip\"),\n        placeBet: document.getElementById(\"eb_placeBet\"),\n        quick10: document.getElementById(\"eb_quick10\"),\n        quick25: document.getElementById(\"eb_quick25\"),\n      };\n\n      const slip = new Map();\n      let state = { filter:\"all\", query:\"\" };\n\n      function fmtMoney(v){\n        const n = Number(v || 0);\n        return n.toLocaleString(undefined, { style:\"currency\", currency:\"USD\" });\n      }\n      function fmtOdds(v){ return Number(v).toFixed(2); }\n      function riskLabel(totalOdds){\n        if (!isFinite(totalOdds) || totalOdds <= 0) return \"\u2014\";\n        if (totalOdds < 2.2) return \"Low\";\n        if (totalOdds < 4.0) return \"Medium\";\n        return \"High\";\n      }\n\n      function counts(){\n        const all = DATA.length;\n        const sports = DATA.filter(x=>x.category===\"sports\").length;\n        const ent = DATA.filter(x=>x.category===\"entertainment\").length;\n        const ins = DATA.filter(x=>x.category===\"insolite\").length;\n        els.countAll.textContent = all;\n        els.countSports.textContent = sports;\n        els.countEnt.textContent = ent;\n        els.countIns.textContent = ins;\n      }\n\n      function matchEvent(ev){\n        if (state.filter !== \"all\" && ev.category !== state.filter) return false;\n        const q = String(state.query||\"\").trim().toLowerCase();\n        if (!q) return true;\n        const hay = `${ev.title} ${ev.league} ${ev.when} ${ev.venue} ${CATEGORY_LABEL[ev.category]}`.toLowerCase();\n        return hay.includes(q);\n      }\n\n      function renderEvents(){\n        const list = DATA.filter(matchEvent);\n        els.events.innerHTML = \"\";\n\n        els.feedMeta.textContent = state.filter === \"all\" ? \"All categories\" : CATEGORY_LABEL[state.filter];\n        els.shownCount.textContent = `${list.length} shown`;\n\n        if (!list.length){\n          const empty = document.createElement(\"div\");\n          empty.className = \"hint\";\n          empty.textContent = \"No events found. Try another search.\";\n          els.events.appendChild(empty);\n          return;\n        }\n\n        list.forEach(ev=>{\n          const card = document.createElement(\"article\");\n          card.className = \"event\";\n\n          const left = document.createElement(\"div\");\n          left.className = \"event-left\";\n\n          const kicker = document.createElement(\"div\");\n          kicker.className = \"kicker\";\n\n          const cat = document.createElement(\"span\");\n          cat.className = \"cat\";\n          cat.textContent = CATEGORY_LABEL[ev.category].toUpperCase();\n          kicker.appendChild(cat);\n\n          if (ev.live){\n            const live = document.createElement(\"span\");\n            live.className = \"live\";\n            live.innerHTML = `<span class=\"pulse\" aria-hidden=\"true\"><\/span> LIVE`;\n            kicker.appendChild(live);\n          }\n\n          const title = document.createElement(\"h4\");\n          title.className = \"title\";\n          title.textContent = ev.title;\n\n          const meta = document.createElement(\"div\");\n          meta.className = \"meta2\";\n          meta.innerHTML = `\n            <span title=\"Type \/ League\">\u2301 ${ev.league || \"\u2014\"}<\/span>\n            <span title=\"Time\">\u23f1 ${ev.when || \"\u2014\"}<\/span>\n            <span title=\"Venue\">\u2316 ${ev.venue || \"\u2014\"}<\/span>\n          `;\n\n          left.appendChild(kicker);\n          left.appendChild(title);\n          left.appendChild(meta);\n\n          const right = document.createElement(\"div\");\n          right.className = \"event-right\";\n\n          const markets = document.createElement(\"div\");\n          markets.className = \"markets\";\n\n          ev.markets.forEach(m=>{\n            const selId = `${ev.id}::${m.key}`;\n            const b = document.createElement(\"button\");\n            b.className = \"odd\" + (slip.has(selId) ? \" selected\" : \"\");\n            b.type = \"button\";\n            b.innerHTML = `\n              <div class=\"label\">${m.label}<\/div>\n              <div class=\"price\"><span>ODDS<\/span><b>${fmtOdds(m.price)}<\/b><\/div>\n            `;\n            b.addEventListener(\"click\", ()=> toggleSelection(ev, m));\n            markets.appendChild(b);\n          });\n\n          right.appendChild(markets);\n          card.appendChild(left);\n          card.appendChild(right);\n          els.events.appendChild(card);\n        });\n      }\n\n      function renderSlip(){\n        els.slipItems.innerHTML = \"\";\n        els.slipCount.textContent = slip.size;\n\n        let total = 1;\n        for (const it of slip.values()) total *= it.price;\n\n        const stake = Number(els.stake.value || 0);\n        const potential = slip.size ? (stake * total) : 0;\n\n        els.totalOdds.textContent = slip.size ? fmtOdds(total) : \"\u2014\";\n        els.ret.textContent = slip.size ? fmtMoney(potential) : \"\u2014\";\n        els.risk.textContent = slip.size ? riskLabel(total) : \"\u2014\";\n\n        if (slip.size === 0){\n          const empty = document.createElement(\"div\");\n          empty.className = \"hint\";\n          empty.textContent = \"No selections yet. Click odds to build your slip.\";\n          els.slipItems.appendChild(empty);\n          return;\n        }\n\n        for (const [selId, it] of slip.entries()){\n          const node = document.createElement(\"div\");\n          node.className = \"slip-item\";\n          node.innerHTML = `\n            <div class=\"slip-row\">\n              <div style=\"min-width:0\">\n                <div class=\"who\">${it.title}<\/div>\n                <div class=\"what\">${it.pick} \u2022 ${it.category}<\/div>\n              <\/div>\n              <div style=\"display:flex; gap:10px; align-items:center;\">\n                <div class=\"oddv\">${fmtOdds(it.price)}<\/div>\n                <button class=\"xbtn\" type=\"button\" aria-label=\"Remove selection\">\u00d7<\/button>\n              <\/div>\n            <\/div>\n          `;\n          node.querySelector(\".xbtn\").addEventListener(\"click\", ()=>{\n            slip.delete(selId);\n            renderSlip();\n            renderEvents();\n          });\n          els.slipItems.appendChild(node);\n        }\n      }\n\n      function toggleSelection(ev, m){\n        const selId = `${ev.id}::${m.key}`;\n        if (slip.has(selId)) slip.delete(selId);\n        else {\n          if (slip.size >= 12) { alert(\"Max 12 selections in demo.\"); return; }\n          slip.set(selId, {\n            eventId: ev.id,\n            category: CATEGORY_LABEL[ev.category],\n            title: ev.title,\n            pick: m.label,\n            price: m.price\n          });\n        }\n        renderSlip();\n        renderEvents();\n      }\n\n      function setActiveTab(filter){\n        state.filter = filter;\n        els.tabs.forEach(t=>{\n          const on = t.dataset.filter === filter;\n          t.classList.toggle(\"active\", on);\n          t.setAttribute(\"aria-selected\", on ? \"true\" : \"false\");\n        });\n        renderEvents();\n      }\n\n      function clearSlip(){\n        slip.clear();\n        renderSlip();\n        renderEvents();\n      }\n\n      \/\/ Bind\n      els.tabs.forEach(t=> t.addEventListener(\"click\", ()=> setActiveTab(t.dataset.filter)));\n      els.q.addEventListener(\"input\", ()=>{ state.query = els.q.value; renderEvents(); });\n      els.stake.addEventListener(\"input\", renderSlip);\n\n      if (els.clearAll) els.clearAll.addEventListener(\"click\", clearSlip);\n      if (els.clearAllTop) els.clearAllTop.addEventListener(\"click\", clearSlip);\n      if (els.resetSlip) els.resetSlip.addEventListener(\"click\", clearSlip);\n\n      if (els.quick10) els.quick10.addEventListener(\"click\", ()=>{\n        els.stake.value = (Number(els.stake.value || 0) + 10).toFixed(0);\n        renderSlip();\n      });\n      if (els.quick25) els.quick25.addEventListener(\"click\", ()=>{\n        els.stake.value = (Number(els.stake.value || 0) + 25).toFixed(0);\n        renderSlip();\n      });\n\n      if (els.placeBet) els.placeBet.addEventListener(\"click\", ()=>{\n        if (slip.size === 0){ alert(\"Add at least one selection.\"); return; }\n        alert(\"Demo: bet placed (UI only). Wire this to backend later.\");\n        clearSlip();\n      });\n\n      \/\/ Init\n      counts();\n      setActiveTab(\"all\");\n      renderSlip();\n    })();\n  <\/script>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-475","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":3,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/475\/revisions"}],"predecessor-version":[{"id":483,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/475\/revisions\/483"}],"wp:attachment":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/media?parent=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}