{source}
<link href=https://fonts.bunny.net rel=preconnect><link href=”https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap”rel=stylesheet><script src=https://cdn.tailwindcss.com></script><script src=https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js defer></script><script src=https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js></script><div class=”bg-opacity-5 bg-[#0067A5] max-w-full mx-auto p-4 rounded-xl w-[700px]”x-data=livegame id=livegame><div class=pb-[150px]><h1 class=”font-bold uppercase text-center text-xs mt-8 text-sky-950 flex justify-center items-center”>Live match<span x-show=”status == ‘started'”><svg class=”animate-ping” style=”fill:red;margin-left:8px;height:10px;width:10px” clip-rule=evenodd fill-rule=evenodd stroke-linejoin=round stroke-miterlimit=2 style=fill:red;margin-left:8px viewBox=”0 0 24 24″xmlns=http://www.w3.org/2000/svg><circle cx=11.998 cy=11.998 fill-rule=nonzero r=9.998 /></svg></span></h1><h2 class=”font-bold uppercase text-center text-xs mt-8 text-sky-950″x-show=”status == ‘started'”>Partita in corso</h2><h2 class=”font-bold uppercase text-center text-xs mt-8 text-sky-950″x-show=”status == ‘preparing'”>Preparazione in corso</h2><h2 class=”font-bold mt-8 text-center text-sky-950 text-xs uppercase”x-show=”status == ‘ended'”>Partita terminata</h2><div class=”mt-8 align-middle content-center grid grid-cols-3 max-w-sm mx-auto p-2″><div class=”items-center flex col-span-1 justify-center flex-col”><img alt=”” class=”max-w-full” :src=”‘https://gare.lnd.it/storage/’ + livematch.home_team.logo” width=60> <span x-text=livematch.home_team.team_name class=”font-bold font-[‘Helvetica’] text-sm mt-2 text-[#08305E]”></span></div><div class=”items-center flex col-span-1 flex-col gap-y-[10px]”><span x-text=date class=”font-bold font-[‘Helvetica’] uppercase text-slate-500 text-center text-xs”></span><div class=”w-full align-middle content-center grid grid-cols-3″><div class=”font-bold font-[‘Helvetica’] uppercase text-center col-span-1 flex items-center justify-center text-4xl text-[#08305E]”x-text=totalGoal.home></div><div class=”font-bold font-[‘Helvetica’] uppercase text-center col-span-1 flex items-center justify-center text-4xl text-[#08305E]”>-</div><div class=”font-bold font-[‘Helvetica’] uppercase text-center col-span-1 flex items-center justify-center text-4xl text-[#08305E]”x-text=totalGoal.away></div></div><span x-text=livematch.game.playday.name class=”font-bold font-[‘Helvetica’] uppercase text-slate-500 text-center text-xs”></span></div><div class=”items-center flex col-span-1 justify-center flex-col”><img alt=”” class=”max-w-full” :src=”‘https://gare.lnd.it/storage/’ + livematch.away_team.logo” width=60> <span x-text=livematch.away_team.team_name class=”font-bold font-[‘Helvetica’] text-sm mt-2 text-[#08305E]”></span></div></div><div class=”flex-col-reverse flex bg-[#0067A50D] bg-opacity-5 border-slate-300 border-t gap-[30px] lg:border lg:gap-x-4 lg:mx-auto lg:rounded-lg max-w-5xl overflow-hidden”><template x-for=”(half,key) in actions”><div><div class=”items-center gap-2.5 bg-white h-8 inline-flex justify-between px-3.5 py-2 w-full”><div class=”font-bold font-[‘Helvetica’] text-sm text-sky-950 basis-0 grow shrink uppercase”x-text=”tempi[parseInt(key)]”></div><div class=”font-bold font-[‘Helvetica’] text-sm text-sky-950 basis-0 grow shrink uppercase text-right”><span x-text=halfGoal[key].home></span> – <span x-text=halfGoal[key].away></span></div></div><div class=”flex-col flex p-3 w-full”><template x-for=”action in half”><div><template x-if=”action.type == ‘goal'”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘w-full py-2.5 rounded flex-col justify-center gap-2.5 inline-flex cursor-pointer max-w-[90%]’: true, ‘ml-0 mr-auto items-start’: isHome, ‘ml-auto mr-0 items-end’: !isHome }”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘items-center gap-1 flex’: true, ‘flex-row-reverse’: isHome }”><div class=”font-bold font-[‘Helvetica’] text-sm text-sky-950 text-right”x-text=”action.player.name+’ ‘+action.player.surname”></div><div class=”items-center flex bg-white gap-2.5 px-2.5 py-1 rounded”><div class=”h-3.5 relative w-3.5″><div class=”absolute h-4 left-[-0.16px] top-[-0.16px] w-4″><svg fill=none height=16 viewBox=”0 0 15 16″width=15 xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_172_6687)><path d=”M7.50018 0.34375C3.26893 0.34375 -0.156067 3.76875 -0.156067 8C-0.156067 12.225 3.26893 15.6562 7.50018 15.6562C11.7252 15.6562 15.1564 12.225 15.1564 8C15.1564 3.76875 11.7252 0.34375 7.50018 0.34375ZM7.50018 1.59375C11.0377 1.59375 13.9064 4.45625 13.9064 8C13.9064 11.5375 11.0377 14.4062 7.50018 14.4062C3.95643 14.4062 1.09393 11.5375 1.09393 8C1.09393 4.45625 3.95643 1.59375 7.50018 1.59375Z”fill=#8D9CB4 /><path d=”M6.14998 10.775L4.95623 7.0875L4.72498 7.78125L7.85623 5.5H7.11873L10.25 7.775L10.0187 7.075L8.82498 10.7625L9.41873 10.325H5.53748L6.13123 10.7562L6.14998 10.775ZM4.95623 11.1562C5.03748 11.4125 5.27498 11.5875 5.54998 11.5875H9.43123C9.69998 11.5875 9.93748 11.4125 10.025 11.15L11.2187 7.4625C11.3 7.2 11.2062 6.91875 10.9875 6.7625L7.84998 4.48125C7.62498 4.31875 7.33123 4.31875 7.11248 4.48125L3.97498 6.7625C3.75623 6.91875 3.66248 7.2 3.74373 7.45625L4.93748 11.1438L4.95623 11.1562Z”fill=#8D9CB4 /><path d=”M9.83748 0.981249L7.14373 2.79312H7.83748L5.14373 0.981249C4.85623 0.787499 4.46873 0.862499 4.27498 1.15C4.08123 1.43125 4.15623 1.81875 4.44373 2.0125L7.13185 3.81875C7.3381 3.95625 7.61935 3.95625 7.8256 3.81875L10.5131 2.00687C10.7943 1.81312 10.8693 1.41937 10.6818 1.13812C10.4881 0.850624 10.0944 0.775624 9.8131 0.963124L9.83748 0.981249Z”fill=#8D9CB4 /><path d=”M9.68127 15.1125L11.0125 12.3837L10.5438 12.7212L13.5963 12.2525C13.9338 12.1962 14.1713 11.8775 14.115 11.5337C14.0588 11.19 13.74 10.9525 13.3963 11.0087L10.3438 11.4775C10.1375 11.5025 9.96252 11.6337 9.87502 11.815L8.53752 14.5437C8.38127 14.85 8.51252 15.225 8.81877 15.375C9.12502 15.525 9.50002 15.3937 9.65002 15.0875L9.68127 15.1125Z”fill=#8D9CB4 /><path d=”M14.9438 8.125L12.8 5.9875L12.975 6.51875L13.4313 3.49438C13.4813 3.15063 13.2438 2.83188 12.9063 2.78188C12.5625 2.72563 12.2438 2.96313 12.1938 3.30063L11.7313 6.325C11.7 6.51875 11.7625 6.71875 11.9063 6.85625L14.0438 8.9875C14.2875 9.225 14.6813 9.225 14.925 8.98125C15.1625 8.73125 15.1625 8.3375 14.9188 8.09375L14.9438 8.125Z”fill=#8D9CB4 /><path d=”M6.875 3.3125V5.00625C6.875 5.35 7.15 5.63125 7.5 5.63125C7.84375 5.63125 8.125 5.35 8.125 5.00625V3.3125C8.125 2.9625 7.84375 2.6875 7.5 2.6875C7.15 2.6875 6.875 2.9625 6.875 3.3125Z”fill=#8D9CB4 /><path d=”M10.9 7.8375L12.6375 6.99375C12.9437 6.8375 13.075 6.46875 12.925 6.15625C12.7687 5.84375 12.4 5.7125 12.0875 5.8625L10.35 6.70625C10.0375 6.85625 9.90625 7.225 10.0562 7.5375C10.2062 7.84375 10.575 7.975 10.8875 7.825L10.9 7.8375Z”fill=#8D9CB4 /><path d=”M0.931245 9.00625L3.06875 6.86875C3.20625 6.725 3.275 6.525 3.24375 6.33125L2.78125 3.30687C2.725 2.96312 2.40625 2.72562 2.06875 2.78187C1.725 2.83187 1.4875 3.15062 1.54375 3.48812L2 6.5125L2.175 5.975L0.0312452 8.10625C-0.218755 8.34375 -0.218755 8.74375 0.0249952 8.9875C0.262495 9.23125 0.662495 9.23125 0.906245 8.9875L0.931245 9.00625Z”fill=#8D9CB4 /><path d=”M4.63752 6.71875L2.90002 5.875C2.58752 5.71875 2.21252 5.85 2.06252 6.1625C1.90627 6.46875 2.03752 6.84375 2.35002 6.99375L4.08752 7.8375C4.39377 7.9875 4.76877 7.85625 4.91877 7.54375C5.06877 7.23125 4.93752 6.85625 4.62502 6.70625L4.63752 6.71875Z”fill=#8D9CB4 /><path d=”M8.96872 11.3813L9.99372 12.525C10.2187 12.7813 10.6187 12.8 10.875 12.5688C11.1312 12.3375 11.15 11.9375 10.9187 11.6812L9.89372 10.5375C9.66247 10.275 9.26247 10.2562 9.00622 10.4875C8.74372 10.7125 8.72497 11.1125 8.95622 11.3687L8.96872 11.3813Z”fill=#8D9CB4 /><path d=”M6.43122 14.5625L5.09372 11.8338C4.99997 11.6463 4.82497 11.5212 4.62497 11.49L1.57247 11.0212C1.22872 10.965 0.909966 11.2025 0.853716 11.54C0.797466 11.8775 1.03497 12.1963 1.37247 12.2525L4.42497 12.7213L3.95622 12.3775L5.28747 15.1063C5.43747 15.4125 5.81247 15.5437 6.11872 15.3875C6.42497 15.2312 6.55622 14.8562 6.39997 14.55L6.43122 14.5625Z”fill=#8D9CB4 /><path d=”M5.09373 10.55L4.06873 11.6938C3.83748 11.95 3.85623 12.3438 4.11248 12.575C4.36873 12.8 4.76248 12.7812 4.99373 12.525L6.01873 11.3813C6.24373 11.1188 6.22498 10.725 5.96873 10.4938C5.70623 10.2625 5.31248 10.2812 5.08123 10.5375L5.09373 10.55Z”fill=#8D9CB4 /></g><defs><clipPath id=clip0_172_6687><rect fill=white height=15 width=15 transform=”translate(0 0.5)”/></clipPath></defs></svg></div></div></div><div class=”font-bold font-[‘Helvetica’] text-sm uppercase text-slate-500 w-5 text-right”><span x-text=”action.minute + ”'”></span></div></div><div class=”items-center gap-2.5 inline-flex justify-end px-7 self-stretch”x-data=”{ isHome: action.who === ‘home’ }”><div class=”bg-sky-700 self-stretch w-0.5″x-show=isHome></div><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{‘grow shrink basis-0 text-slate-500 text-sm font-bold’ : true, ‘text-left’ : isHome, ‘text-right’ : !isHome}”x-text=action.description></div><div class=”bg-sky-700 self-stretch w-0.5″x-show=!isHome></div></div></div></template><template x-if=”action.type == ‘yellowCard'”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘w-full py-2.5 rounded flex-col justify-center gap-2.5 inline-flex cursor-pointer max-w-[90%]’: true, ‘ml-0 mr-auto items-start’: isHome, ‘ml-auto mr-0 items-end’: !isHome }”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘items-center gap-1 flex’: true, ‘flex-row-reverse’: isHome }”><div class=”font-bold font-[‘Helvetica’] text-left text-sm text-sky-950″><span x-text=action.description class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-xs”x-show=!isHome></span> <span x-text=”action.player.name+’ ‘+action.player.surname”></span> <span x-text=action.description class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-xs”x-show=isHome></span></div><div><svg fill=none height=16 viewBox=”0 0 15 16″width=15 xmlns=http://www.w3.org/2000/svg><rect fill=#FFAA2B height=15 width=10.5 rx=2 x=2.25 y=0.5 /></svg></div><div class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-sm uppercase w-5″x-text=action.minute></div></div></div></template><template x-if=”action.type == ‘substitute'”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘w-full py-2.5 rounded flex-col justify-center gap-2.5 inline-flex cursor-pointer max-w-[90%]’: true, ‘ml-0 mr-auto items-start’: isHome, ‘ml-auto mr-0 items-end’: !isHome }”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘items-center gap-1 flex’: true, ‘flex-row-reverse’: isHome }”><div class=”font-bold font-[‘Helvetica’] text-left text-sm text-sky-950″><span x-text=action.description class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-xs”x-show=!isHome></span> <span x-text=”action.player.name+’ ‘+action.player.surname”></span> <span x-text=action.description class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-xs”x-show=isHome></span></div><div><svg fill=none height=16 viewBox=”0 0 17 16″width=17 xmlns=http://www.w3.org/2000/svg><path d=”M3.65625 9.40001V12.2125L4.28125 11.5875H1.46875C1.11875 11.5875 0.84375 11.8625 0.84375 12.2125C0.84375 12.5563 1.11875 12.8375 1.46875 12.8375H4.28125C4.625 12.8375 4.90625 12.5563 4.90625 12.2125V9.40001C4.90625 9.05001 4.625 8.77501 4.28125 8.77501C3.93125 8.77501 3.65625 9.05001 3.65625 9.40001Z”fill=#00A3DA /><path d=”M13.3438 6.58751V3.77501L12.7188 4.40001H15.5312C15.875 4.40001 16.1562 4.11876 16.1562 3.77501C16.1562 3.42501 15.875 3.15001 15.5312 3.15001H12.7188C12.3688 3.15001 12.0938 3.42501 12.0938 3.77501V6.58751C12.0938 6.93126 12.3688 7.21251 12.7188 7.21251C13.0625 7.21251 13.3438 6.93126 13.3438 6.58751Z”fill=#8D9CB4 /><path d=”M12.4438 4.20626C14.5313 6.38126 14.4625 9.84375 12.2813 11.9375C10.7063 13.4438 8.39378 13.875 6.38753 13.0375C6.06878 12.9 5.70003 13.05 5.56878 13.3688C5.43128 13.6813 5.58128 14.05 5.90003 14.1813C8.36253 15.2063 11.2063 14.675 13.1375 12.825C15.8125 10.25 15.9 6.00001 13.3313 3.31876C13.0875 3.06876 12.6938 3.05626 12.4438 3.30001C12.1938 3.53751 12.1813 3.93126 12.425 4.18126L12.4438 4.20626Z”fill=#8D9CB4 /><path d=”M4.54999 11.7813C2.45624 9.59375 2.53124 6.13126 4.71874 4.04376C6.28124 2.53751 8.59374 2.10626 10.6 2.93751C10.9187 3.06876 11.2812 2.91875 11.4125 2.6C11.5437 2.275 11.3937 1.91251 11.075 1.78126C8.60624 0.756255 5.77499 1.28751 3.84374 3.13126C1.16249 5.69376 1.06874 9.95001 3.63124 12.6313C3.86874 12.875 4.26249 12.8875 4.51249 12.65C4.75624 12.4063 4.76874 12.0125 4.53124 11.7625L4.54999 11.7813Z”fill=#00A3DA /></svg></div><div class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-sm uppercase w-5″x-text=action.minute></div></div></div></template><template x-if=”action.type == ‘redCard'”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘w-full py-2.5 rounded flex-col justify-center gap-2.5 inline-flex cursor-pointer max-w-[90%]’: true, ‘ml-0 mr-auto items-start’: isHome, ‘ml-auto mr-0 items-end’: !isHome }”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘items-center gap-1 flex’: true, ‘flex-row-reverse’: isHome }”><div class=”font-bold font-[‘Helvetica’] text-left text-sm text-sky-950″><span x-text=action.description class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-xs”x-show=!isHome></span> <span x-text=”action.player.name+’ ‘+action.player.surname”></span> <span x-text=action.description class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-xs”x-show=isHome></span></div><div><svg fill=none height=16 viewBox=”0 0 15 16″width=15 xmlns=http://www.w3.org/2000/svg><rect fill=#ED0000 height=15 width=10.5 rx=2 x=2.25 y=0.5 /></svg></div><div class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-sm uppercase w-5″x-text=action.minute></div></div></div></template><template x-if=”action.type == ‘comment'”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘w-full py-2.5 rounded flex-col justify-center gap-2.5 inline-flex cursor-pointer max-w-[90%]’: true, ‘ml-0 mr-auto items-start’: isHome, ‘ml-auto mr-0 items-end’: !isHome }”><div class=”items-center inline-flex bg-opacity-5 bg-sky-700 gap-1 justify-start p-2.5 rounded”><div x-data=”{ isHome: action.who === ‘home’ }”:class=”{ ‘items-center gap-1 flex’: true, ‘flex-row-reverse’: isHome }”><div class=”font-bold font-[‘Helvetica’] text-left text-sm text-sky-950″x-text=action.description></div><div><svg fill=none height=16 viewBox=”0 0 15 16″width=15 xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_172_6930)><path d=”M6.875 11.2812V15.0312C6.875 15.375 7.15 15.6562 7.5 15.6562C7.84375 15.6562 8.125 15.375 8.125 15.0312V11.2812C8.125 10.9313 7.84375 10.6562 7.5 10.6562C7.15 10.6562 6.875 10.9313 6.875 11.2812Z”fill=#8D9CB4 /><path d=”M5.625 15.6562H9.375C9.71875 15.6562 10 15.375 10 15.0312C10 14.6813 9.71875 14.4062 9.375 14.4062H5.625C5.275 14.4062 5 14.6813 5 15.0312C5 15.375 5.275 15.6562 5.625 15.6562Z”fill=#8D9CB4 /><path d=”M2.1875 5.65625V7.53125C2.1875 9.94375 4.14375 11.9062 6.5625 11.9062H8.4375C10.85 11.9062 12.8125 9.94375 12.8125 7.53125V5.65625C12.8125 5.30625 12.5312 5.03125 12.1875 5.03125C11.8375 5.03125 11.5625 5.30625 11.5625 5.65625V7.53125C11.5625 9.25625 10.1625 10.6562 8.4375 10.6562H6.5625C4.83125 10.6562 3.4375 9.25625 3.4375 7.53125V5.65625C3.4375 5.30625 3.15625 5.03125 2.8125 5.03125C2.4625 5.03125 2.1875 5.30625 2.1875 5.65625Z”fill=#8D9CB4 /><path d=”M8.43753 8.78125H6.56253C5.84378 8.73125 5.26253 8.0875 5.30628 7.33125V3.075C5.25628 2.28125 5.83753 1.63125 6.59378 1.5875H8.42503C9.13753 1.63125 9.71878 2.275 9.67503 3.03125L9.66878 7.28125C9.71253 8.06875 9.13128 8.71875 8.37503 8.7625L8.43753 8.78125ZM8.47503 10.025C9.91253 9.93125 11.0125 8.69375 10.9313 7.25625V3.06875C11.0063 1.65625 9.90628 0.418751 8.46878 0.331251L6.55003 0.325001C5.06878 0.412501 3.96878 1.65 4.05003 3.09375L4.04378 7.275C3.96253 8.68125 5.06253 9.91875 6.50003 10.0063H8.41253L8.47503 10.025Z”fill=#8D9CB4 /><path d=”M4.6875 4.40625H6.5625C6.90625 4.40625 7.1875 4.125 7.1875 3.78125C7.1875 3.43125 6.90625 3.15625 6.5625 3.15625H4.6875C4.3375 3.15625 4.0625 3.43125 4.0625 3.78125C4.0625 4.125 4.3375 4.40625 4.6875 4.40625Z”fill=#8D9CB4 /><path d=”M8.4375 4.40625H10.3125C10.6562 4.40625 10.9375 4.125 10.9375 3.78125C10.9375 3.43125 10.6562 3.15625 10.3125 3.15625H8.4375C8.0875 3.15625 7.8125 3.43125 7.8125 3.78125C7.8125 4.125 8.0875 4.40625 8.4375 4.40625Z”fill=#8D9CB4 /><path d=”M4.6875 6.28125H6.5625C6.90625 6.28125 7.1875 6 7.1875 5.65625C7.1875 5.30625 6.90625 5.03125 6.5625 5.03125H4.6875C4.3375 5.03125 4.0625 5.30625 4.0625 5.65625C4.0625 6 4.3375 6.28125 4.6875 6.28125Z”fill=#8D9CB4 /><path d=”M8.4375 6.28125H10.3125C10.6562 6.28125 10.9375 6 10.9375 5.65625C10.9375 5.30625 10.6562 5.03125 10.3125 5.03125H8.4375C8.0875 5.03125 7.8125 5.30625 7.8125 5.65625C7.8125 6 8.0875 6.28125 8.4375 6.28125Z”fill=#8D9CB4 /></g><defs><clipPath id=clip0_172_6930><rect fill=white height=15 width=15 transform=”translate(0 0.5)”/></clipPath></defs></svg></div><div class=”font-bold font-[‘Helvetica’] text-left text-slate-500 text-sm uppercase w-5″x-text=action.minute></div></div></div></div></template></div></template></div></div></template></div></div></div><script> function livegame() { return { livematch: [], actions: [], halfGoal: [], totalGoal: [], status: [], date: ”, tempi:[‘1° Tempo’, ‘2° Tempo’,’3° Tempo’,’1° Tempo Supplementare’,’2° Tempo Supplementare’,’3° Tempo Supplementare’, ‘Rigori’ ], init() { axios.get(“https://gare.lnd.it/api/livegame/651”) .then(response => {const data = response.data; this.livematch = data.livematch; this.date = data.date }) .catch(error => { console.error(‘Errore nella richiesta API:’, error); });axios.get(“https://gare.lnd.it/api/liveactions/651”) .then(response => {const data = response.data; this.actions = data.actions; this.halfGoal = data.halfGoal; this.totalGoal = data.totalGoal; this.status = data.status; }) .catch(error => { console.error(‘Errore nella richiesta API:’, error); }); setInterval(() => { axios.get(“https://gare.lnd.it/api/liveactions/651”) .then(response => {const data = response.data; this.actions = data.actions; this.halfGoal = data.halfGoal; this.totalGoal = data.totalGoal; this.status = data.status; }) .catch(error => { console.error(‘Errore nella richiesta API:’, error); }); }, 10000) } }; }</script>
{/source}
