Ignat2009/sql-jazz-maestro
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Query Editor | SQL Jazz Maestro</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">10 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/mysql/dist/mysql.min.js"></script>12</head>13<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">14 <header class="py-6 px-4 border-b border-gray-800">15 <div class="container mx-auto flex justify-between items-center">16 <a href="index.html" class="text-2xl font-bold text-primary flex items-center">17 <i data-feather="database" class="mr-2"></i>18 SQL Jazz Maestro19 </a>20 <nav class="flex space-x-2">21 <a href="connection.html" class="px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors">22 Connection23 </a>24 <a href="tables.html" class="px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors">25 View Tables26 </a>27 </nav>28</div>29 </header>30 31 <main class="flex-grow container mx-auto px-4 py-8">32 <div class="max-w-6xl mx-auto">33 <div class="flex justify-between items-center mb-6">34 <h2 class="text-2xl font-bold text-primary">35 <i data-feather="edit-3" class="mr-2 inline"></i>36 Query Editor37 </h2>38 <button id="execute-btn" class="px-6 py-2 bg-primary hover:bg-primary/80 rounded-lg font-medium transition-colors flex items-center">39 <i data-feather="play" class="mr-2 w-4 h-4"></i>40 Execute41 </button>42 </div>43 44 <div class="grid lg:grid-cols-2 gap-6">45 <div class="bg-gray-800/50 rounded-xl p-6 shadow-xl h-full">46 <div class="flex justify-between items-center mb-4">47 <h3 class="text-lg font-semibold text-primary">SQL Query</h3>48 <div class="flex space-x-2">49 <button title="Format SQL" class="p-2 rounded hover:bg-gray-700 transition-colors">50 <i data-feather="align-left" class="w-4 h-4"></i>51 </button>52 <button title="Clear" class="p-2 rounded hover:bg-gray-700 transition-colors">53 <i data-feather="trash-2" class="w-4 h-4"></i>54 </button>55 </div>56 </div>57 <textarea id="sql-editor" class="w-full h-64 bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm focus:ring-2 focus:ring-primary outline-none resize-none" spellcheck="false">SELECT * FROM users LIMIT 10;</textarea>58 </div>59 60 <div class="bg-gray-800/50 rounded-xl p-6 shadow-xl h-full">61 <div class="flex justify-between items-center mb-4">62 <h3 class="text-lg font-semibold text-primary">Results</h3>63 <button title="Export Results" class="p-2 rounded hover:bg-gray-700 transition-colors">64 <i data-feather="download" class="w-4 h-4"></i>65 </button>66 </div>67 <div id="results-container" class="bg-gray-900 rounded-lg overflow-hidden h-64 overflow-y-auto">68 <div class="text-gray-500 p-4 text-center">69 <i data-feather="database" class="w-8 h-8 mx-auto mb-2"></i>70 <p>Execute a query to see results</p>71 </div>72 </div>73 </div>74 </div>75 76 <div class="mt-6 bg-gray-800/50 rounded-xl p-6 shadow-xl">77 <h3 class="text-lg font-semibold mb-4 text-primary">Query History</h3>78 <div class="space-y-2">79 <div class="flex justify-between items-center p-3 bg-gray-900 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer">80 <code class="text-sm text-gray-300">SELECT * FROM users LIMIT 10;</code>81 <span class="text-xs text-gray-500">Just now</span>82 </div>83 <div class="flex justify-between items-center p-3 bg-gray-900 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer">84 <code class="text-sm text-gray-300">DESCRIBE users;</code>85 <span class="text-xs text-gray-500">2 minutes ago</span>86 </div>87 </div>88 </div>89 </div>90 </main>91 92 <footer class="py-4 px-4 border-t border-gray-800 text-center text-gray-400 text-sm">93 <p>SQL Jazz Maestro - Play your data like a pro</p>94 </footer>95 96 <script>97 // MySQL connection configuration98 const dbConfig = {99 host: 'localhost',100 user: 'root', // Change to your MySQL username101 password: '', // Change to your MySQL password102 database: 'test' // Change to your database name103 };104 105 document.addEventListener('DOMContentLoaded', function() {106 feather.replace();107 108 document.getElementById('execute-btn').addEventListener('click', function() {109 const sql = document.getElementById('sql-editor').value;110 const resultsContainer = document.getElementById('results-container');111 112 // Create MySQL connection113 const mysql = require('mysql');114 const connection = mysql.createConnection(dbConfig);115 116 connection.connect();117 118 connection.query(sql, function(error, results, fields) {119 if (error) {120 resultsContainer.innerHTML = `121 <div class="p-4 text-red-400">122 <i data-feather="alert-triangle" class="w-6 h-6 mr-2 inline"></i>123 Error: ${error.message}124 </div>125 `;126 feather.replace();127 return;128 }129 130 if (results.length === 0) {131 resultsContainer.innerHTML = `132 <div class="p-4 text-gray-400">133 <i data-feather="info" class="w-6 h-6 mr-2 inline"></i>134 Query executed successfully, no results returned.135 </div>136 `;137 feather.replace();138 return;139 }140 141 // Generate table headers142 let html = '<table class="w-full text-sm text-left text-gray-400"><thead class="text-xs text-primary uppercase bg-gray-800"><tr>';143 for (const field of fields) {144 html += `<th scope="col" class="px-6 py-3">${field.name}</th>`;145 }146 html += '</tr></thead><tbody>';147 148 // Generate table rows149 for (const row of results) {150 html += '<tr class="border-b border-gray-700 hover:bg-gray-800/50">';151 for (const field of fields) {152 html += `<td class="px-6 py-4">${row[field.name] || 'NULL'}</td>`;153 }154 html += '</tr>';155 }156 157 html += '</tbody></table>';158 resultsContainer.innerHTML = html;159 160 connection.end();161 feather.replace();162 });163<table class="w-full text-sm text-left text-gray-400">164 <thead class="text-xs text-primary uppercase bg-gray-800">165 <tr>166 <th scope="col" class="px-6 py-3">ID</th>167 <th scope="col" class="px-6 py-3">Name</th>168 <th scope="col" class="px-6 py-3">Email</th>169 <th scope="col" class="px-6 py-3">Status</th>170 </tr>171 </thead>172 <tbody>173 <tr class="border-b border-gray-700 hover:bg-gray-800/50">174 <td class="px-6 py-4">1</td>175 <td class="px-6 py-4">John Doe</td>176 <td class="px-6 py-4">john@example.com</td>177 <td class="px-6 py-4"><span class="px-2 py-1 bg-green-900/50 text-green-400 rounded text-xs">Active</span></td>178 </tr>179 <tr class="border-b border-gray-700 hover:bg-gray-800/50">180 <td class="px-6 py-4">2</td>181 <td class="px-6 py-4">Jane Smith</td>182 <td class="px-6 py-4">jane@example.com</td>183 <td class="px-6 py-4"><span class="px-2 py-1 bg-green-900/50 text-green-400 rounded text-xs">Active</span></td>184 </tr>185 </tbody>186 </table>187 `;188 });189 });190 </script>191</body>192</html>193