Generate a modern web app landing + dashboard UI for an app called "PySQL Labs" — a Python + SQL interactive learning platform with hands-on labs and interview-style drills. Create a polished, developer-focused, slightly playful but professional design.
509f3c2
verified
| class CustomPythonLab extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| } | |
| .python-lab { | |
| background: rgba(31, 41, 55, 0.8); | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| border: 1px solid rgba(55, 65, 81, 0.5); | |
| } | |
| .editor-container { | |
| background: #1a202c; | |
| padding: 1.5rem; | |
| } | |
| .code-editor { | |
| background: transparent; | |
| color: #e2e8f0; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.875rem; | |
| line-height: 1.5; | |
| } | |
| .console-output { | |
| background: rgba(17, 24, 39, 0.9); | |
| color: #e2e8f0; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.875rem; | |
| line-height: 1.5; | |
| } | |
| .test-case { | |
| padding: 0.75rem; | |
| border-radius: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .test-pass { | |
| color: #22c55e; | |
| border: 1px solid rgba(34, 197, 94, 0.3); | |
| } | |
| .test-fail { | |
| color: #ef4444; | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| .hints-toggle { | |
| background: rgba(217, 70, 239, 0.1); | |
| } | |
| .hint-content { | |
| background: rgba(17, 24, 39, 0.9); | |
| } | |
| .badge-pass { | |
| background: rgba(34, 197, 94, 0.1); | |
| border: 1px solid rgba(34, 197, 94, 0.3); | |
| } | |
| .badge-fail { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: #ef4444; | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| </style> | |
| <div class="python-lab"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6"> | |
| <!-- Left: Editor --> | |
| <div class="lg:col-span-2"> | |
| <div class="editor-container rounded-xl mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="code" class="w-5 h-5 text-primary mr-3"></i> | |
| <h3 class="text-lg font-semibold">Python Editor</h3> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="code-editor"> | |
| <pre id="python-editor"> | |
| def find_first_prime(nums): | |
| """Return the first prime number in a list.""" | |
| for num in nums: | |
| if num < 2: | |
| continue | |
| is_prime = True | |
| for i in range(2, int(num**0.5) + 1): | |
| if num % i == 0: | |
| is_prime = False | |
| break | |
| if is_prime: | |
| return num | |
| return None | |
| # Test cases | |
| print(find_first_prime([4, 6, 7, 8, 9, 10, 11]) # Should return 7 | |
| print(find_first_prime([1, 2, 3, 4, 5]) # Should return 2 | |
| print(find_first_prime([4, 6, 8, 10])) # Should return None | |
| </pre> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4 mb-6"> | |
| <button id="run-btn" class="px-6 py-3 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-gray-900 font-semibold rounded-lg transition-all"> | |
| <i data-feather="play" class="w-4 h-4 mr-2"></i> | |
| Run Code | |
| </button> | |
| <button id="hints-toggle" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 font-semibold rounded-lg transition-all"> | |
| <i data-feather="help-circle" class="w-4 h-4 mr-2"></i> | |
| Show Hints | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right: Console & Tests --> | |
| <div class="space-y-6"> | |
| <div class="console-output rounded-xl p-4"> | |
| <div class="text-sm font-medium mb-2">Console Output</div> | |
| <div id="python-output" class="font-mono text-sm"> | |
| Click "Run Code" to see output... | |
| </div> | |
| </div> | |
| <div class="hints-toggle rounded-xl p-4 hidden"> | |
| <div class="text-sm font-medium mb-2">Hints</div> | |
| <div class="hint-content p-3 rounded-lg"> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center"> | |
| <i data-feather="info" class="w-4 h-4 mr-2 text-primary"></i> | |
| Remember that 0 and 1 are not prime numbers.</li> | |
| <li class="flex items-center"> | |
| <i data-feather="info" class="w-4 h-4 mr-2 text-primary"></i> | |
| The Sieve of Eratosthenes is efficient for finding primes in a range.</li> | |
| <li class="flex items-center"> | |
| <i data-feather="info" class="w-4 h-4 mr-2 text-primary"></i> | |
| Try breaking the problem into smaller functions.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="test-cases space-y-3"> | |
| <div class="text-sm font-medium">Test Cases</div> | |
| <div class="test-case test-pass flex items-center justify-between"> | |
| <span>First prime in [4, 6, 7, 8, 9, 10, 11]</div> | |
| <div class="badge-pass px-3 py-1 rounded-full text-xs"> | |
| PASS | |
| </div> | |
| </div> | |
| <div class="test-case test-pass flex items-center justify-between"> | |
| <span>First prime in [1, 2, 3, 4, 5]</div> | |
| <div class="badge-pass px-3 py-1 rounded-full text-xs"> | |
| PASS | |
| </div> | |
| </div> | |
| <div class="test-case test-pass flex items-center justify-between"> | |
| <span>Handles empty list</span> | |
| <div class="badge-pass px-3 py-1 rounded-full text-xs"> | |
| PASS | |
| </div> | |
| </div> | |
| <div class="test-case test-fail flex items-center justify-between"> | |
| <span>First prime in large list</span> | |
| <div class="badge-fail px-3 py-1 rounded-full text-xs"> | |
| FAIL | |
| </div> | |
| </div> | |
| <div class="test-case test-pass flex items-center justify-between"> | |
| <span>Returns None if no prime</span> | |
| <div class="badge-pass px-3 py-1 rounded-full text-xs"> | |
| PASS | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| setTimeout(() => { | |
| if (typeof feather !== 'undefined') { | |
| feather.replace(); | |
| } | |
| }, 100); | |
| } | |
| } | |
| customElements.define('custom-python-lab', CustomPythonLab); |