Hugging Face's logo

Spaces:
S-Dreamer
/
python-code-linter
Running

App Files Community
S-Dreamer commited on
Commit
2e08a17
·
verified ·
1 Parent(s): f79270c

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +93 -347
  2. prompts.txt +1 -0
index.html CHANGED
@@ -5,6 +5,11 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Python Code Linter | PEP 8 & Flake8 Compliance</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  .code-editor {
@@ -46,32 +51,60 @@
46
  .animate-pulse {
47
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
48
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  </style>
50
  </head>
51
- <body class="bg-gray-50 min-h-screen">
52
  <div class="container mx-auto px-4 py-8">
53
  <!-- Header -->
54
- <header class="mb-8 text-center">
55
- <h1 class="text-4xl font-bold text-blue-600 mb-2">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <i class="fas fa-code mr-2"></i>Python Code Linter
57
  </h1>
58
- <p class="text-gray-600 text-lg">
59
  Improve your Python code to meet Flake8 and PEP 8 standards
60
  </p>
61
  </header>
62
 
63
  <!-- Main Content -->
64
- <div class="bg-white rounded-xl shadow-lg overflow-hidden">
65
  <!-- Tabs -->
66
- <div class="flex border-b">
67
- <button id="paste-tab" class="tab-active px-6 py-4 font-medium text-blue-600 focus:outline-none">
68
  <i class="fas fa-paste mr-2"></i>Paste Code
69
  </button>
70
- <button id="upload-tab" class="px-6 py-4 font-medium text-gray-500 hover:text-blue-600 focus:outline-none">
71
  <i class="fas fa-upload mr-2"></i>Upload File
72
  </button>
73
  <div class="ml-auto px-6 py-4">
74
- <span id="error-count" class="hidden bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
75
  <span id="error-count-value">0</span> issues found
76
  </span>
77
  </div>
@@ -83,24 +116,24 @@
83
  <div id="paste-content" class="space-y-6">
84
  <div class="flex space-x-4">
85
  <div class="flex-1 relative">
86
- <label for="python-code" class="block mb-2 text-sm font-medium text-gray-700">
87
  Original Python Code
88
- <span class="text-gray-500 text-xs">(Ctrl+Enter to lint)</span>
89
  </label>
90
  <div class="relative">
91
- <textarea id="python-code" class="code-editor w-full p-4 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Paste your Python code here..."></textarea>
92
- <button id="clear-code" class="absolute top-2 right-2 p-2 text-gray-400 hover:text-gray-600">
93
  <i class="fas fa-times"></i>
94
  </button>
95
  </div>
96
  </div>
97
  <div class="flex-1 relative">
98
- <label for="linted-code" class="block mb-2 text-sm font-medium text-gray-700">
99
  Linted Python Code
100
  </label>
101
  <div class="relative">
102
- <pre id="linted-code" class="code-editor w-full p-4 border border-gray-300 rounded-lg bg-gray-50 overflow-auto" style="white-space: pre-wrap;"></pre>
103
- <button id="copy-code" class="absolute top-2 right-2 p-2 text-gray-400 hover:text-gray-600">
104
  <i class="fas fa-copy"></i>
105
  </button>
106
  </div>
@@ -108,7 +141,7 @@
108
  </div>
109
 
110
  <div class="flex justify-center">
111
- <button id="lint-button" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
112
  <i class="fas fa-magic mr-2"></i>Lint My Code
113
  </button>
114
  </div>
@@ -117,13 +150,13 @@
117
  <!-- Upload File Tab Content -->
118
  <div id="upload-content" class="hidden space-y-6">
119
  <div class="flex items-center justify-center w-full">
120
- <label for="file-upload" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
121
  <div class="flex flex-col items-center justify-center pt-5 pb-6">
122
- <i class="fas fa-file-upload text-4xl text-gray-400 mb-3"></i>
123
- <p class="mb-2 text-sm text-gray-500">
124
  <span class="font-semibold">Click to upload</span> or drag and drop
125
  </p>
126
- <p class="text-xs text-gray-500">.py files only</p>
127
  </div>
128
  <input id="file-upload" type="file" class="hidden" accept=".py" />
129
  </label>
@@ -132,27 +165,27 @@
132
  <div class="hidden" id="upload-preview">
133
  <div class="flex items-center justify-between mb-4">
134
  <div>
135
- <span id="uploaded-filename" class="font-medium text-gray-700"></span>
136
- <span id="uploaded-filesize" class="text-sm text-gray-500 ml-2"></span>
137
  </div>
138
- <button id="remove-file" class="text-red-500 hover:text-red-700">
139
  <i class="fas fa-trash mr-1"></i>Remove
140
  </button>
141
  </div>
142
 
143
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
144
  <div>
145
- <h3 class="text-sm font-medium text-gray-700 mb-2">Original Code</h3>
146
- <pre id="upload-original-code" class="code-editor w-full p-4 border border-gray-300 rounded-lg bg-gray-50 overflow-auto max-h-64"></pre>
147
  </div>
148
  <div>
149
- <h3 class="text-sm font-medium text-gray-700 mb-2">Linted Code</h3>
150
- <pre id="upload-linted-code" class="code-editor w-full p-4 border border-gray-300 rounded-lg bg-gray-50 overflow-auto max-h-64"></pre>
151
  </div>
152
  </div>
153
 
154
  <div class="mt-4 flex justify-center">
155
- <button id="lint-upload-button" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
156
  <i class="fas fa-magic mr-2"></i>Lint Uploaded File
157
  </button>
158
  </div>
@@ -161,32 +194,32 @@
161
 
162
  <!-- Linting Report -->
163
  <div id="report-section" class="hidden mt-8">
164
- <h2 class="text-xl font-semibold text-gray-800 mb-4">
165
  <i class="fas fa-clipboard-list mr-2"></i>Linting Report
166
  </h2>
167
 
168
  <div class="flex mb-4">
169
  <div class="flex-1">
170
- <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
171
  <i class="fas fa-check-circle mr-1"></i>
172
  <span id="fixed-count">0</span> issues fixed
173
  </div>
174
  </div>
175
  <div class="flex-1 text-right">
176
- <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
177
  <i class="fas fa-exclamation-triangle mr-1"></i>
178
  <span id="remaining-count">0</span> issues remaining
179
  </div>
180
  </div>
181
  </div>
182
 
183
- <div class="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
184
- <div id="report-items" class="divide-y divide-gray-200 max-h-96 overflow-y-auto">
185
  <!-- Report items will be added here dynamically -->
186
  </div>
187
  </div>
188
 
189
- <div class="mt-4 text-sm text-gray-500">
190
  <i class="fas fa-info-circle mr-1"></i> PEP 8 is the official style guide for Python code. Flake8 is a tool that checks your code against PEP 8 and other quality standards.
191
  </div>
192
  </div>
@@ -195,31 +228,31 @@
195
 
196
  <!-- Features Section -->
197
  <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
198
- <div class="bg-white p-6 rounded-lg shadow-md">
199
- <div class="text-blue-500 text-2xl mb-3">
200
  <i class="fas fa-broom"></i>
201
  </div>
202
- <h3 class="font-semibold text-lg mb-2">Code Cleanup</h3>
203
- <p class="text-gray-600">Automatically fix indentation, whitespace, line length, and other PEP 8 violations to make your code more readable.</p>
204
  </div>
205
- <div class="bg-white p-6 rounded-lg shadow-md">
206
- <div class="text-blue-500 text-2xl mb-3">
207
  <i class="fas fa-search"></i>
208
  </div>
209
- <h3 class="font-semibold text-lg mb-2">Comprehensive Checks</h3>
210
- <p class="text-gray-600">Detects and reports on style issues, syntax errors, and potential bugs using Flake8's powerful analysis.</p>
211
  </div>
212
- <div class="bg-white p-6 rounded-lg shadow-md">
213
- <div class="text-blue-500 text-2xl mb-3">
214
  <i class="fas fa-graduation-cap"></i>
215
  </div>
216
- <h3 class="font-semibold text-lg mb-2">Learn Best Practices</h3>
217
- <p class="text-gray-600">Detailed explanations help you understand and remember Python coding standards for future projects.</p>
218
  </div>
219
  </div>
220
 
221
  <!-- Footer -->
222
- <footer class="mt-12 text-center text-gray-500 text-sm">
223
  <p>Made with <i class="fas fa-heart text-red-500"></i> for Python developers</p>
224
  <p class="mt-1">This tool helps improve code quality but doesn't replace thorough testing and code reviews.</p>
225
  </footer>
@@ -227,307 +260,20 @@
227
 
228
  <script>
229
  document.addEventListener('DOMContentLoaded', function() {
230
- // Tab switching
231
- const pasteTab = document.getElementById('paste-tab');
232
- const uploadTab = document.getElementById('upload-tab');
233
- const pasteContent = document.getElementById('paste-content');
234
- const uploadContent = document.getElementById('upload-content');
235
-
236
- pasteTab.addEventListener('click', function() {
237
- pasteTab.classList.add('tab-active');
238
- pasteTab.classList.remove('text-gray-500');
239
- pasteTab.classList.add('text-blue-600');
240
-
241
- uploadTab.classList.remove('tab-active');
242
- uploadTab.classList.add('text-gray-500');
243
- uploadTab.classList.remove('text-blue-600');
244
-
245
- pasteContent.classList.remove('hidden');
246
- uploadContent.classList.add('hidden');
247
- });
248
-
249
- uploadTab.addEventListener('click', function() {
250
- uploadTab.classList.add('tab-active');
251
- uploadTab.classList.remove('text-gray-500');
252
- uploadTab.classList.add('text-blue-600');
253
-
254
- pasteTab.classList.remove('tab-active');
255
- pasteTab.classList.add('text-gray-500');
256
- pasteTab.classList.remove('text-blue-600');
257
-
258
- uploadContent.classList.remove('hidden');
259
- pasteContent.classList.add('hidden');
260
- });
261
 
262
- // Code editor functionality
263
- const pythonCode = document.getElementById('python-code');
264
- const lintedCode = document.getElementById('linted-code');
265
- const clearCode = document.getElementById('clear-code');
266
- const copyCode = document.getElementById('copy-code');
267
- const lintButton = document.getElementById('lint-button');
268
- const errorCount = document.getElementById('error-count');
269
- const errorCountValue = document.getElementById('error-count-value');
270
- const reportSection = document.getElementById('report-section');
271
- const reportItems = document.getElementById('report-items');
272
- const fixedCount = document.getElementById('fixed-count');
273
- const remainingCount = document.getElementById('remaining-count');
274
 
275
- // Sample linting function (in a real app, this would call a backend service)
276
- function lintPythonCode(code) {
277
- // This is a mock implementation
278
- // In reality, you would send this to a backend that runs flake8 and autopep8
279
-
280
- // Mock fixes
281
- const mockFixes = [
282
- { line: 2, column: 5, message: "E302 expected 2 blank lines before function definition", fixed: true },
283
- { line: 5, column: 80, message: "E501 line too long (82 > 79 characters)", fixed: true },
284
- { line: 7, column: 1, message: "E303 too many blank lines (3)", fixed: true },
285
- { line: 9, column: 17, message: "E225 missing whitespace around operator", fixed: true },
286
- { line: 12, column: 1, message: "W391 blank line at end of file", fixed: true },
287
- { line: 3, column: 1, message: "E265 block comment should start with '# '", fixed: false },
288
- ];
289
-
290
- // Mock linted code (just some basic formatting for demo)
291
- let linted = code;
292
-
293
- // Add two blank lines before functions
294
- linted = linted.replace(/def (\w+)\(/g, '\n\n$&');
295
-
296
- // Fix line length (very simplistic)
297
- linted = linted.split('\n').map(line => {
298
- if (line.length > 79) {
299
- return line.substring(0, 76) + '...';
300
- }
301
- return line;
302
- }).join('\n');
303
-
304
- // Trim trailing whitespace
305
- linted = linted.split('\n').map(line => line.trimEnd()).join('\n');
306
-
307
- // Ensure exactly one blank line at end of file
308
- linted = linted.trimEnd() + '\n';
309
-
310
- return {
311
- lintedCode: linted,
312
- issues: mockFixes,
313
- originalCode: code
314
- };
315
  }
316
 
317
- // Generate a report item
318
- function createReportItem(issue, index) {
319
- const item = document.createElement('div');
320
- item.className = 'report-item p-4 hover:bg-gray-100';
321
-
322
- const badgeClass = issue.fixed ?
323
- 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800';
324
- const icon = issue.fixed ? 'check-circle' : 'exclamation-triangle';
325
-
326
- item.innerHTML = `
327
- <div class="flex items-start">
328
- <div class="flex-shrink-0 pt-0.5">
329
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${badgeClass}">
330
- <i class="fas fa-${icon} mr-1"></i>
331
- ${issue.fixed ? 'Fixed' : 'Warning'}
332
- </span>
333
- </div>
334
- <div class="ml-3">
335
- <div class="text-sm font-medium text-gray-900">
336
- Line ${issue.line}, Column ${issue.column}
337
- </div>
338
- <div class="text-sm text-gray-500">
339
- ${issue.message}
340
- </div>
341
- </div>
342
- </div>
343
- `;
344
-
345
- return item;
346
- }
347
-
348
- // Clear code editor
349
- clearCode.addEventListener('click', function() {
350
- pythonCode.value = '';
351
- lintedCode.textContent = '';
352
- reportSection.classList.add('hidden');
353
- errorCount.classList.add('hidden');
354
- });
355
-
356
- // Copy linted code
357
- copyCode.addEventListener('click', function() {
358
- if (lintedCode.textContent.trim()) {
359
- navigator.clipboard.writeText(lintedCode.textContent);
360
-
361
- // Show feedback
362
- const originalIcon = copyCode.querySelector('i');
363
- originalIcon.classList.remove('fa-copy');
364
- originalIcon.classList.add('fa-check');
365
-
366
- setTimeout(() => {
367
- originalIcon.classList.remove('fa-check');
368
- originalIcon.classList.add('fa-copy');
369
- }, 2000);
370
- }
371
- });
372
-
373
- // Lint code
374
- function performLint() {
375
- const code = pythonCode.value.trim();
376
- if (!code) return;
377
-
378
- // Show loading state
379
- lintButton.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i> Linting...';
380
- lintButton.disabled = true;
381
-
382
- // Simulate API call delay
383
- setTimeout(() => {
384
- const result = lintPythonCode(code);
385
-
386
- // Update UI with results
387
- lintedCode.textContent = result.lintedCode;
388
-
389
- // Show error count
390
- const totalIssues = result.issues.length;
391
- const fixedIssues = result.issues.filter(i => i.fixed).length;
392
-
393
- if (totalIssues > 0) {
394
- errorCountValue.textContent = totalIssues;
395
- errorCount.classList.remove('hidden');
396
- } else {
397
- errorCount.classList.add('hidden');
398
- }
399
-
400
- // Generate report
401
- reportItems.innerHTML = '';
402
- result.issues.forEach((issue, index) => {
403
- reportItems.appendChild(createReportItem(issue, index));
404
- });
405
-
406
- // Update counts
407
- fixedCount.textContent = fixedIssues;
408
- remainingCount.textContent = totalIssues - fixedIssues;
409
-
410
- // Show report
411
- reportSection.classList.remove('hidden');
412
-
413
- // Reset button
414
- lintButton.innerHTML = '<i class="fas fa-magic mr-2"></i>Lint My Code';
415
- lintButton.disabled = false;
416
- }, 1000);
417
- }
418
-
419
- lintButton.addEventListener('click', performLint);
420
-
421
- // Add Ctrl+Enter shortcut to lint code
422
- pythonCode.addEventListener('keydown', function(e) {
423
- if (e.ctrlKey && e.key === 'Enter') {
424
- performLint();
425
- }
426
- });
427
-
428
- // File upload functionality
429
- const fileUpload = document.getElementById('file-upload');
430
- const uploadPreview = document.getElementById('upload-preview');
431
- const uploadedFilename = document.getElementById('uploaded-filename');
432
- const uploadedFilesize = document.getElementById('uploaded-filesize');
433
- const uploadOriginalCode = document.getElementById('upload-original-code');
434
- const uploadLintedCode = document.getElementById('upload-linted-code');
435
- const removeFile = document.getElementById('remove-file');
436
- const lintUploadButton = document.getElementById('lint-upload-button');
437
-
438
- fileUpload.addEventListener('change', function(e) {
439
- const file = e.target.files[0];
440
- if (!file) return;
441
-
442
- if (!file.name.endsWith('.py')) {
443
- alert('Please upload a Python (.py) file');
444
- return;
445
- }
446
-
447
- const reader = new FileReader();
448
- reader.onload = function(e) {
449
- const content = e.target.result;
450
-
451
- // Update UI
452
- uploadedFilename.textContent = file.name;
453
- uploadedFilesize.textContent = formatFileSize(file.size);
454
- uploadOriginalCode.textContent = content;
455
- uploadLintedCode.textContent = '';
456
-
457
- // Show preview
458
- uploadPreview.classList.remove('hidden');
459
- };
460
- reader.readAsText(file);
461
- });
462
-
463
- removeFile.addEventListener('click', function() {
464
- fileUpload.value = '';
465
- uploadPreview.classList.add('hidden');
466
- });
467
-
468
- lintUploadButton.addEventListener('click', function() {
469
- const code = uploadOriginalCode.textContent.trim();
470
- if (!code) return;
471
-
472
- // Show loading state
473
- lintUploadButton.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i> Linting...';
474
- lintUploadButton.disabled = true;
475
-
476
- // Simulate API call delay
477
- setTimeout(() => {
478
- const result = lintPythonCode(code);
479
-
480
- // Update UI with results
481
- uploadLintedCode.textContent = result.lintedCode;
482
-
483
- // Generate report
484
- reportItems.innerHTML = '';
485
- result.issues.forEach((issue, index) => {
486
- reportItems.appendChild(createReportItem(issue, index));
487
- });
488
-
489
- // Update counts
490
- const totalIssues = result.issues.length;
491
- const fixedIssues = result.issues.filter(i => i.fixed).length;
492
- fixedCount.textContent = fixedIssues;
493
- remainingCount.textContent = totalIssues - fixedIssues;
494
-
495
- // Show report
496
- reportSection.classList.remove('hidden');
497
-
498
- // Reset button
499
- lintUploadButton.innerHTML = '<i class="fas fa-magic mr-2"></i>Lint Uploaded File';
500
- lintUploadButton.disabled = false;
501
- }, 1000);
502
- });
503
-
504
- // Helper function to format file size
505
- function formatFileSize(bytes) {
506
- if (bytes === 0) return '0 Bytes';
507
- const k = 1024;
508
- const sizes = ['Bytes', 'KB', 'MB', 'GB'];
509
- const i = Math.floor(Math.log(bytes) / Math.log(k));
510
- return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
511
- }
512
-
513
- // Sample code for first-time users
514
- if (!pythonCode.value.trim()) {
515
- pythonCode.value = `# This is a sample Python code with some style issues
516
- def calculate_sum(a,b):
517
- result=a+b
518
- return result
519
-
520
- def print_message(msg):
521
- #This function prints a message
522
- print("Message:",msg)
523
-
524
-
525
- print_message("Hello World!")
526
- total=calculate_sum(5,7)
527
- print("The total is:",total)
528
- `;
529
- }
530
- });
531
- </script>
532
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=S-Dreamer/python-code-linter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
533
  </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Python Code Linter | PEP 8 & Flake8 Compliance</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ darkMode: 'class'
11
+ }
12
+ </script>
13
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
  <style>
15
  .code-editor {
 
51
  .animate-pulse {
52
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
53
  }
54
+
55
+ /* Dark mode transitions */
56
+ body, .bg-white, .bg-gray-50, .border-gray-200, .border-gray-300, .divide-gray-200 {
57
+ transition: background-color 0.3s ease, border-color 0.3s ease;
58
+ }
59
+
60
+ /* Toggle switch styling */
61
+ .toggle-checkbox:checked {
62
+ right: 0;
63
+ border-color: #68D391;
64
+ }
65
+ .toggle-checkbox:checked + .toggle-label {
66
+ background-color: #68D391;
67
+ }
68
  </style>
69
  </head>
70
+ <body class="bg-gray-50 min-h-screen dark:bg-gray-900">
71
  <div class="container mx-auto px-4 py-8">
72
  <!-- Header -->
73
+ <header class="mb-8 text-center relative">
74
+ <div class="absolute top-0 right-0">
75
+ <div class="flex items-center">
76
+ <span class="mr-2 text-sm text-gray-600 dark:text-gray-300">
77
+ <i class="fas fa-sun"></i>
78
+ </span>
79
+ <div class="relative inline-block w-10 mr-2 align-middle select-none">
80
+ <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
81
+ <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
82
+ </div>
83
+ <span class="text-sm text-gray-600 dark:text-gray-300">
84
+ <i class="fas fa-moon"></i>
85
+ </span>
86
+ </div>
87
+ </div>
88
+ <h1 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">
89
  <i class="fas fa-code mr-2"></i>Python Code Linter
90
  </h1>
91
+ <p class="text-gray-600 dark:text-gray-300 text-lg">
92
  Improve your Python code to meet Flake8 and PEP 8 standards
93
  </p>
94
  </header>
95
 
96
  <!-- Main Content -->
97
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
98
  <!-- Tabs -->
99
+ <div class="flex border-b dark:border-gray-700">
100
+ <button id="paste-tab" class="tab-active px-6 py-4 font-medium text-blue-600 dark:text-blue-400 focus:outline-none">
101
  <i class="fas fa-paste mr-2"></i>Paste Code
102
  </button>
103
+ <button id="upload-tab" class="px-6 py-4 font-medium text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
104
  <i class="fas fa-upload mr-2"></i>Upload File
105
  </button>
106
  <div class="ml-auto px-6 py-4">
107
+ <span id="error-count" class="hidden bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 text-xs font-medium px-2.5 py-0.5 rounded-full">
108
  <span id="error-count-value">0</span> issues found
109
  </span>
110
  </div>
 
116
  <div id="paste-content" class="space-y-6">
117
  <div class="flex space-x-4">
118
  <div class="flex-1 relative">
119
+ <label for="python-code" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
120
  Original Python Code
121
+ <span class="text-gray-500 dark:text-gray-400 text-xs">(Ctrl+Enter to lint)</span>
122
  </label>
123
  <div class="relative">
124
+ <textarea id="python-code" class="code-editor w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400" placeholder="Paste your Python code here..."></textarea>
125
+ <button id="clear-code" class="absolute top-2 right-2 p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
126
  <i class="fas fa-times"></i>
127
  </button>
128
  </div>
129
  </div>
130
  <div class="flex-1 relative">
131
+ <label for="linted-code" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
132
  Linted Python Code
133
  </label>
134
  <div class="relative">
135
+ <pre id="linted-code" class="code-editor w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-100 overflow-auto" style="white-space: pre-wrap;"></pre>
136
+ <button id="copy-code" class="absolute top-2 right-2 p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
137
  <i class="fas fa-copy"></i>
138
  </button>
139
  </div>
 
141
  </div>
142
 
143
  <div class="flex justify-center">
144
+ <button id="lint-button" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors dark:bg-blue-700 dark:hover:bg-blue-600">
145
  <i class="fas fa-magic mr-2"></i>Lint My Code
146
  </button>
147
  </div>
 
150
  <!-- Upload File Tab Content -->
151
  <div id="upload-content" class="hidden space-y-6">
152
  <div class="flex items-center justify-center w-full">
153
+ <label for="file-upload" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
154
  <div class="flex flex-col items-center justify-center pt-5 pb-6">
155
+ <i class="fas fa-file-upload text-4xl text-gray-400 dark:text-gray-300 mb-3"></i>
156
+ <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
157
  <span class="font-semibold">Click to upload</span> or drag and drop
158
  </p>
159
+ <p class="text-xs text-gray-500 dark:text-gray-400">.py files only</p>
160
  </div>
161
  <input id="file-upload" type="file" class="hidden" accept=".py" />
162
  </label>
 
165
  <div class="hidden" id="upload-preview">
166
  <div class="flex items-center justify-between mb-4">
167
  <div>
168
+ <span id="uploaded-filename" class="font-medium text-gray-700 dark:text-gray-300"></span>
169
+ <span id="uploaded-filesize" class="text-sm text-gray-500 dark:text-gray-400 ml-2"></span>
170
  </div>
171
+ <button id="remove-file" class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
172
  <i class="fas fa-trash mr-1"></i>Remove
173
  </button>
174
  </div>
175
 
176
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
177
  <div>
178
+ <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Original Code</h3>
179
+ <pre id="upload-original-code" class="code-editor w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-100 overflow-auto max-h-64"></pre>
180
  </div>
181
  <div>
182
+ <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Linted Code</h3>
183
+ <pre id="upload-linted-code" class="code-editor w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-100 overflow-auto max-h-64"></pre>
184
  </div>
185
  </div>
186
 
187
  <div class="mt-4 flex justify-center">
188
+ <button id="lint-upload-button" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors dark:bg-blue-700 dark:hover:bg-blue-600">
189
  <i class="fas fa-magic mr-2"></i>Lint Uploaded File
190
  </button>
191
  </div>
 
194
 
195
  <!-- Linting Report -->
196
  <div id="report-section" class="hidden mt-8">
197
+ <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
198
  <i class="fas fa-clipboard-list mr-2"></i>Linting Report
199
  </h2>
200
 
201
  <div class="flex mb-4">
202
  <div class="flex-1">
203
+ <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
204
  <i class="fas fa-check-circle mr-1"></i>
205
  <span id="fixed-count">0</span> issues fixed
206
  </div>
207
  </div>
208
  <div class="flex-1 text-right">
209
+ <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
210
  <i class="fas fa-exclamation-triangle mr-1"></i>
211
  <span id="remaining-count">0</span> issues remaining
212
  </div>
213
  </div>
214
  </div>
215
 
216
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
217
+ <div id="report-items" class="divide-y divide-gray-200 dark:divide-gray-600 max-h-96 overflow-y-auto">
218
  <!-- Report items will be added here dynamically -->
219
  </div>
220
  </div>
221
 
222
+ <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
223
  <i class="fas fa-info-circle mr-1"></i> PEP 8 is the official style guide for Python code. Flake8 is a tool that checks your code against PEP 8 and other quality standards.
224
  </div>
225
  </div>
 
228
 
229
  <!-- Features Section -->
230
  <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
231
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
232
+ <div class="text-blue-500 dark:text-blue-400 text-2xl mb-3">
233
  <i class="fas fa-broom"></i>
234
  </div>
235
+ <h3 class="font-semibold text-lg mb-2 dark:text-gray-200">Code Cleanup</h3>
236
+ <p class="text-gray-600 dark:text-gray-300">Automatically fix indentation, whitespace, line length, and other PEP 8 violations to make your code more readable.</p>
237
  </div>
238
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
239
+ <div class="text-blue-500 dark:text-blue-400 text-2xl mb-3">
240
  <i class="fas fa-search"></i>
241
  </div>
242
+ <h3 class="font-semibold text-lg mb-2 dark:text-gray-200">Comprehensive Checks</h3>
243
+ <p class="text-gray-600 dark:text-gray-300">Detects and reports on style issues, syntax errors, and potential bugs using Flake8's powerful analysis.</p>
244
  </div>
245
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
246
+ <div class="text-blue-500 dark:text-blue-400 text-2xl mb-3">
247
  <i class="fas fa-graduation-cap"></i>
248
  </div>
249
+ <h3 class="font-semibold text-lg mb-2 dark:text-gray-200">Learn Best Practices</h3>
250
+ <p class="text-gray-600 dark:text-gray-300">Detailed explanations help you understand and remember Python coding standards for future projects.</p>
251
  </div>
252
  </div>
253
 
254
  <!-- Footer -->
255
+ <footer class="mt-12 text-center text-gray-500 dark:text-gray-400 text-sm">
256
  <p>Made with <i class="fas fa-heart text-red-500"></i> for Python developers</p>
257
  <p class="mt-1">This tool helps improve code quality but doesn't replace thorough testing and code reviews.</p>
258
  </footer>
 
260
 
261
  <script>
262
  document.addEventListener('DOMContentLoaded', function() {
263
+ // Dark mode toggle functionality
264
+ const toggle = document.getElementById('toggle');
265
+ const html = document.documentElement;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
266
 
267
+ // Check for saved user preference or use system preference
268
+ const savedTheme = localStorage.getItem('theme') ||
269
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
 
 
 
 
 
 
 
 
 
270
 
271
+ if (savedTheme === 'dark') {
272
+ html.classList.add('dark');
273
+ toggle.checked = true;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
274
  }
275
 
276
+ // Toggle dark mode
277
+ toggle.addEventListener('change', function() {
278
+ if (this.checked)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ add light and dark toggle