Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>SQL Practice Platform</title> | |
| <link rel="icon" href="/static/favicon.png" type="image/x-icon" /> | |
| <script src="https://cdn.tailwindcss.com/3.3.3"></script> | |
| <script | |
| src="/static/ace.js" | |
| id="ace-script" | |
| onerror="this.nextElementSibling.src='https://cdnjs.cloudflare.com/ajax/libs/ace-builds/1.35.0/ace.js';" | |
| ></script> | |
| <script src="" id="ace-fallback"></script> | |
| <link href="/static/style.css" rel="stylesheet" /> | |
| <style> | |
| #schemaInfo { | |
| max-height: calc(100vh - 200px); | |
| overflow-y: auto; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="max-w-full mx-auto p-4"> | |
| <h1 class="text-3xl font-bold mb-6 text-center text-blue-600"> | |
| SQL Practice Platform | |
| </h1> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-[calc(100vh-100px)]"> | |
| <div class="bg-white p-4 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold mb-4 text-green-600">Database</h2> | |
| <select | |
| id="domainSelect" | |
| class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4" | |
| > | |
| <option value="">Select Database</option> | |
| </select> | |
| <button | |
| id="loadSchemaBtn" | |
| class="w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 mb-4" | |
| disabled | |
| > | |
| Loading... | |
| </button> | |
| <button | |
| id="showSchemaBtn" | |
| class="w-full bg-gray-500 text-white p-2 rounded-md hover:bg-gray-600 mb-4 hidden" | |
| > | |
| Show Schema | |
| </button> | |
| <button | |
| id="showTableBtn" | |
| class="w-full bg-gray-500 text-white p-2 rounded-md hover:bg-gray-600 mb-4 hidden" | |
| > | |
| Show Table | |
| </button> | |
| <div | |
| id="schemaInfo" | |
| class="text-sm overflow-auto max-h-60 hidden" | |
| ></div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-md flex flex-col"> | |
| <h2 class="text-xl font-semibold mb-4 text-purple-600">SQL Editor</h2> | |
| <div id="sqlEditor" class="w-full h-48 border rounded-md mb-4"></div> | |
| <div class="flex space-x-4 mb-4"> | |
| <button | |
| id="runQueryBtn" | |
| class="bg-green-600 text-white p-2 rounded-md hover:bg-green-700 disabled:bg-gray-400" | |
| > | |
| Run | |
| </button> | |
| </div> | |
| <h2 class="text-xl font-semibold mb-4 text-purple-600">Results</h2> | |
| <div id="results" class="text-sm overflow-auto flex-grow"></div> | |
| <div id="errorMessage" class="text-red-500 mt-2"></div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-md flex flex-col"> | |
| <h2 class="text-xl font-semibold mb-4 text-yellow-600"> | |
| Practice Question | |
| </h2> | |
| <select | |
| id="difficultySelect" | |
| class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4" | |
| disabled | |
| > | |
| <option value="">Select Difficulty</option> | |
| <option value="Beginner">Beginner</option> | |
| <option value="Intermediate">Intermediate</option> | |
| <option value="Advanced">Advanced</option> | |
| </select> | |
| <div id="questionDetails" class="text-sm mb-4"></div> | |
| <div | |
| class="flex justify-between mb-4" | |
| style="display: none" | |
| id="navButtons" | |
| > | |
| <button | |
| id="prevBtn" | |
| class="bg-gray-500 text-white p-2 rounded-md hover:bg-gray-600" | |
| > | |
| << | |
| </button> | |
| <button | |
| id="nextBtn" | |
| class="bg-gray-500 text-white p-2 rounded-md hover:bg-gray-600" | |
| > | |
| >> | |
| </button> | |
| </div> | |
| <button | |
| id="hintBtn" | |
| class="w-full bg-gray-500 text-white p-2 rounded-md hover:bg-gray-600 mb-4" | |
| style="display: none" | |
| > | |
| Show Hint | |
| </button> | |
| <button | |
| id="solutionBtn" | |
| class="w-full bg-gray-400 text-white p-2 rounded-md hover:bg-gray-500 mb-4" | |
| style="display: none" | |
| > | |
| Show Solution | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> | |