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
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PySQL Labs - Interactive Python & SQL Learning Platform</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#22c55e', /* lime-500 */ | |
| secondary: '#d946ef' /* fuchsia-500 */ | |
| }, | |
| fontFamily: { | |
| 'mono': ['JetBrains Mono', 'Monaco', 'Courier New', 'monospace'], | |
| 'sans': ['Inter', 'system-ui', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap'); | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans min-h-screen"> | |
| <!-- Navigation --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-gray-800 via-gray-900 to-black"></div> | |
| <div class="relative container mx-auto px-6 py-20 md:py-32"> | |
| <div class="flex flex-col lg:flex-row items-center justify-between gap-12"> | |
| <div class="lg:w-1/2"> | |
| <div class="mb-6 inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-primary/20 to-secondary/20 border border-primary/30"> | |
| <i data-feather="zap" class="w-4 h-4 text-primary mr-2"></i> | |
| <span class="text-sm font-medium">Interactive Learning Platform</span> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> | |
| PySQL <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Labs</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8 max-w-2xl"> | |
| Hands-on Python & SQL labs with auto-grading and interview drills. Master data skills through interactive coding challenges and realistic interview simulations. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#dashboard" class="px-8 py-4 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-gray-900 font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center"> | |
| <i data-feather="play-circle" class="w-5 h-5 mr-2"></i> | |
| Start Free Lab | |
| </a> | |
| <a href="#interview-mode" class="px-8 py-4 bg-gray-800 hover:bg-gray-700 border border-gray-700 font-semibold rounded-lg transition-all duration-300 flex items-center justify-center"> | |
| <i data-feather="clock" class="w-5 h-5 mr-2"></i> | |
| Try Interview Mode | |
| </a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="relative bg-gray-800 rounded-2xl p-6 shadow-2xl border border-gray-700"> | |
| <!-- Mock Editor Split Screen --> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <!-- Python Editor Mock --> | |
| <div class="md:w-1/2 bg-gray-900 rounded-xl p-4 border border-gray-700"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <span class="text-xs text-gray-400 font-mono">lab.py</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="h-4 bg-gray-800 rounded w-3/4"></div> | |
| <div class="h-4 bg-gray-800 rounded w-full"></div> | |
| <div class="h-4 bg-primary/30 rounded w-1/2"></div> | |
| <div class="h-4 bg-gray-800 rounded w-5/6"></div> | |
| <div class="h-4 bg-gray-800 rounded w-full"></div> | |
| </div> | |
| <div class="mt-4 p-2 bg-gray-800 rounded text-xs font-mono text-green-400"> | |
| > Tests passed: 3/5 | |
| </div> | |
| </div> | |
| <!-- SQL Results Mock --> | |
| <div class="md:w-1/2 bg-gray-900 rounded-xl p-4 border border-gray-700"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <i data-feather="database" class="w-4 h-4 text-secondary mr-2"></i> | |
| <span class="text-xs text-gray-300">employees</span> | |
| </div> | |
| <span class="text-xs text-gray-400 font-mono">results.csv</span> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-xs"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="pb-2 text-left">id</th> | |
| <th class="pb-2 text-left">name</th> | |
| <th class="pb-2 text-left">dept</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr><td class="py-1">101</td><td class="py-1">Alice</td><td class="py-1">Engineering</td></tr> | |
| <tr><td class="py-1">102</td><td class="py-1">Bob</td><td class="py-1">Sales</td></tr> | |
| <tr><td class="py-1">103</td><td class="py-1">Charlie</td><td class="py-1">Marketing</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -top-3 -right-3"> | |
| <div class="bg-gradient-to-r from-primary to-secondary text-white text-xs font-bold px-3 py-1 rounded-full"> | |
| LIVE PREVIEW | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section class="py-20 bg-gray-800/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Everything You Need to Master Python & SQL</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <custom-feature-card | |
| icon="code" | |
| title="Interactive Python Lab" | |
| description="Write, run, and test Python code with real-time feedback. Our environment supports all core Python libraries." | |
| cta-text="Try sample" | |
| color="primary"> | |
| </custom-feature-card> | |
| <custom-feature-card | |
| icon="database" | |
| title="SQL Sandbox" | |
| description="Practice SQL queries on realistic datasets. Includes schema browser, query history, and visual result sets." | |
| cta-text="Try sample" | |
| color="secondary"> | |
| </custom-feature-card> | |
| <custom-feature-card | |
| icon="check-circle" | |
| title="Auto-grader & Feedback" | |
| description="Get instant scoring on your solutions. Detailed feedback helps you understand edge cases and optimize your code." | |
| cta-text="Try sample" | |
| color="primary"> | |
| </custom-feature-card> | |
| <custom-feature-card | |
| icon="clock" | |
| title="Interview Simulator" | |
| description="Timed mock interviews with real FAANG-style questions. Track performance metrics and identify areas for improvement." | |
| cta-text="Try sample" | |
| color="secondary"> | |
| </custom-feature-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">How PySQL Labs Works</h2> | |
| <div class="flex flex-col lg:flex-row items-center justify-between gap-8"> | |
| <custom-step | |
| number="1" | |
| icon="search" | |
| title="Select a Lab" | |
| description="Choose from hundreds of Python and SQL problems, categorized by difficulty and topic." | |
| delay="100"> | |
| </custom-step> | |
| <div class="hidden lg:block"> | |
| <div class="w-32 h-1 bg-gradient-to-r from-primary to-secondary rounded-full"></div> | |
| </div> | |
| <custom-step | |
| number="2" | |
| icon="edit" | |
| title="Write & Run Code" | |
| description="Use our integrated editor to write solutions. Run code instantly and see output in real-time." | |
| delay="200"> | |
| </custom-step> | |
| <div class="hidden lg:block"> | |
| <div class="w-32 h-1 bg-gradient-to-r from-primary to-secondary rounded-full"></div> | |
| </div> | |
| <custom-step | |
| number="3" | |
| icon="bar-chart-2" | |
| title="Track Progress" | |
| description="Monitor your learning journey with detailed analytics, badges, and streak tracking." | |
| delay="300"> | |
| </custom-step> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Example Problems Carousel --> | |
| <section class="py-20 bg-gray-800/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Example Challenges</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <custom-problem-card | |
| title="Even or Odd Filter" | |
| language="Python" | |
| difficulty="Easy" | |
| time="15 min" | |
| description="Filter a list to keep only even numbers using list comprehension." | |
| status="free"> | |
| </custom-problem-card> | |
| <custom-problem-card | |
| title="First Prime Number" | |
| language="Python" | |
| difficulty="Medium" | |
| time="25 min" | |
| description="Find the first prime number in a given list of integers." | |
| status="free"> | |
| </custom-problem-card> | |
| <custom-problem-card | |
| title="Employee Finder" | |
| language="SQL" | |
| difficulty="Easy" | |
| time="10 min" | |
| description="Select employee details by name from the employees table." | |
| status="free"> | |
| </custom-problem-card> | |
| <custom-problem-card | |
| title="Department Join" | |
| language="SQL" | |
| difficulty="Medium" | |
| time="20 min" | |
| description="Merge two tables using JOIN to show employee-department relationships." | |
| status="premium"> | |
| </custom-problem-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Preview --> | |
| <section id="dashboard" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Interactive Dashboard Preview</h2> | |
| <custom-dashboard></custom-dashboard> | |
| </div> | |
| </section> | |
| <!-- SQL Lab Mini UI --> | |
| <section class="py-20 bg-gray-800/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Try Our SQL Sandbox</h2> | |
| <custom-sql-lab></custom-sql-lab> | |
| </div> | |
| </section> | |
| <!-- Python Lab Mini UI --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Python Lab Environment</h2> | |
| <custom-python-lab></custom-python-lab> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <custom-footer></custom-footer> | |
| <!-- Web Components Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/feature-card.js"></script> | |
| <script src="components/step.js"></script> | |
| <script src="components/problem-card.js"></script> | |
| <script src="components/dashboard.js"></script> | |
| <script src="components/sql-lab.js"></script> | |
| <script src="components/python-lab.js"></script> | |
| <script src="components/footer.js"></script> | |
| <!-- Main Script --> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |