Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LBW Hover Analysis</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; background: #222; color: white; margin: 0; padding: 0; } | |
| .video-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 960px; | |
| margin: 40px auto; | |
| } | |
| video { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| border: 4px solid #fff; | |
| } | |
| .overlay { | |
| position: absolute; | |
| border: 2px dashed #ff0; | |
| background-color: rgba(255, 255, 0, 0.2); | |
| color: #000; | |
| font-weight: bold; | |
| padding: 4px; | |
| border-radius: 6px; | |
| pointer-events: all; | |
| cursor: help; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| width: 180px; | |
| background-color: black; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px 8px; | |
| position: absolute; | |
| z-index: 2; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -90px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .overlay:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="video-container"> | |
| <video controls> | |
| <source src="replay_lbw_analysis_f175cd6fa04f4ec8882b647d4763e7d5.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <!-- Hoverable Zones --> | |
| <div class="overlay" style="top: 70%; left: 30%; width: 80px; height: 40px;"> | |
| <div class="tooltip">Pitching: Outside Off</div> | |
| </div> | |
| <div class="overlay" style="top: 48%; left: 45%; width: 90px; height: 40px;"> | |
| <div class="tooltip">Impact: In-line</div> | |
| </div> | |
| <div class="overlay" style="top: 25%; left: 50%; width: 100px; height: 40px;"> | |
| <div class="tooltip">Wickets: Hitting</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |