File size: 4,630 Bytes
e7cf806 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<!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-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>
|