|
|
<html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Basketball Shot Analysis</title></head><body><header class="max-w-3xl mx-auto"><h1>Basketball Shot Analysis AI</h1></header><main class="max-w-3xl mx-auto"> |
|
|
<div class="grid grid-cols-1 gap-2 py-4 pl-2 "> |
|
|
<div class="flex flex-col md:flex-row justify-between md:items-center"> |
|
|
<div class="flex flex-col md:flex-row mb-2"> |
|
|
<h2 class="text-xl font-bold">Select a Court:</h2> |
|
|
<select id="court-select" class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm py-2 px-3 text-gray-700 md:mt-0" x-model="courtSelected"> |
|
|
<option hidden>-- Select a Court --</option> |
|
|
<option value="1">Court 1</option> |
|
|
<option value="2">Court 2</option> |
|
|
<option value="3">Court 3</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex flex-col md:flex-row mb-2"> |
|
|
<h2 class="text-xl font-bold">Select a Player:</h2> |
|
|
<select id="player-select" class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm py-2 px-3 text-gray-700 md:mt-0" x-model="playerSelected"> |
|
|
<option hidden>-- Select a Player --</option> |
|
|
<option value="1">Player 1</option> |
|
|
<option value="2">Player 2</option> |
|
|
<option value="3">Player 3</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 w-full place-items-center"> |
|
|
<div x-show="courtSelected"> |
|
|
<h3 class="text-gray-700 mb-4 text-2xl">Court 1</h3> |
|
|
<div class="grid grid-cols-1 grid-rows-1 gap-2 w-full" x-show="playerSelected"> |
|
|
<h3 class="text-gray-700 mb-4 text-2xl">Player 1</h3> |
|
|
<div class="grid grid-cols-1 grid-rows-1 gap-2 w-full" x-show="shotSelected"> |
|
|
<h3 class="text-gray-700 mb-4 text-2xl">Shot 1</h3> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 w-full" x-show="analysisSelected"> |
|
|
<span class="col-span-1">{{ shot. similarity }}</span> |
|
|
<span class="col-span-1">{{ shot. count }}</span> |
|
|
<span class="col-span-1">{{ shot. candidate }}</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
