Play Ping Pong <script src="/tailwindcss.js">"></script> </head> <body class="bg-gradient-to-br from-cyan-50 to-blue-100 min-h-screen flex flex-col"> <header class="bg-gradient-to-r from-blue-700 to-cyan-500 p-4 shadow-md"> <div class="container mx-auto flex justify-between items-center"> <h1 class="text-white text-2xl font-bold">Ping Pong <nav> <ul class="flex space-x-4"> <li>><a href="#game" class="text-white hover:underline">Play <li>><a href="#how-to" class="text-white hover:underline">How to Play <li>><a href="#scores" class="text-white hover:underline">Scores </ul> </nav> </div> </header> <main class="flex-grow container mx-auto px-6 py-12"> <section id="game"> <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl p-6 mb-12 shadow-xl w-full max-w-4xl mx-auto"> <h2 class="text-3xl font-bold text-center text-blue-800 mb-8">Real-Time Ping Pong <canvas id="gameCanvas" width="800" height="600" class="mx-auto border-4 border-blue-500 rounded-lg bg-white shadow-lg">"></canvas> <div class="flex justify-center space-x-4 text-sm text-gray-700 mt-2"> <p id="playerScore" class="text-blue-600 font-bold">0 <p id="aiScore" class="text-blue-600 font-bold">0 </div> </div> </section> <section id="how-to" class="mb-12"> <h3 class="text-2xl font-bold text-center text-blue-800 mb-6">How to Play <div class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow-lg"> <p class="text-gray-700 leading-relaxed mb-4"> Use your <span class="font-bold">left and right arrow keys to move the paddle. The AI will control the opposite paddle. Score points by letting the ball pass your opponent! </p> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="bg-gradient-to-r from-green-100 to-blue-100 p-4 rounded-lg text-sm text-gray-700"> <h4 class="font-bold text-blue-700 mb-2">Controls <ul class="list-disc pl-5 space-y-2"> <li>><kbd>← Key