|
|
<!DOCTYPE html> |
|
|
<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-[30%,40%,30%] 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-72 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> |
|
|
|
