Spaces:

Jensin
/

anycoder-376bb63e

Running

App Files Files Community

Jensin commited on Nov 29, 2025

Commit

a6e07d5

verified ·

1 Parent(s): d1e2a34

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +413 -272

index.html CHANGED Viewed

@@ -1,5 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -53,17 +77,17 @@
       --rose-500: #f43f5e;
       --indigo-500: #6366f1;
       --violet-500: #8b5cf6;
-    }
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
-    }
     html {
       scroll-behavior: smooth;
-    }
     body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -72,37 +96,42 @@
       min-height: 100vh;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-    }
-    ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
-    }
-    ::-webkit-scrollbar-track {
       background: var(--dark-900);
-    }
-    ::-webkit-scrollbar-thumb {
       background: var(--dark-600);
       border-radius: 9999px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
       background: var(--dark-500);
-    }
-    /* Header */
     .header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 50;
-      background: rgba(15, 23, 42, 0.8);
       backdrop-filter: blur(20px);
-      border-bottom: 1px solid rgba(51, 65, 85, 0.5);
-    }
     .header-content {
       max-width: 1280px;
@@ -111,19 +140,19 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-    }
     .logo-section {
       display: flex;
       align-items: center;
       gap: 0.75rem;
-    }
     .logo-icon {
       position: relative;
       width: 40px;
       height: 40px;
-    }
     .logo-icon-bg {
       width: 100%;
@@ -133,12 +162,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
-    }
     .logo-icon-bg i {
       color: white;
       font-size: 1.25rem;
-    }
     .logo-badge {
       position: absolute;
@@ -151,12 +180,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
-    }
     .logo-badge i {
       font-size: 0.5rem;
       color: white;
-    }
     .logo-text h1 {
       font-size: 1.25rem;
@@ -165,103 +194,118 @@
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
-    }
     .logo-text p {
       font-size: 0.75rem;
       color: var(--dark-400);
-    }
     .header-link {
       font-size: 0.875rem;
       color: var(--dark-400);
       text-decoration: none;
       transition: color 0.3s;
-    }
     .header-link:hover {
       color: var(--primary-400);
-    }
-    /* Main Content */
     .main {
       padding-top: 80px;
       min-height: 100vh;
-    }
     .container {
       max-width: 1280px;
       margin: 0 auto;
       padding: 2rem 1.5rem;
-    }
-    /* Glass Panel */
     .glass-panel {
-      background: rgba(15, 23, 42, 0.8);
       backdrop-filter: blur(20px);
-      border: 1px solid rgba(51, 65, 85, 0.5);
       border-radius: 1rem;
-    }
     .gradient-border {
       position: relative;
-    }
-    .gradient-border::before {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: 1rem;
       padding: 1px;
-      background: linear-gradient(135deg, rgba(14, 165, 233, 0.5), rgba(139, 92, 246, 0.5));
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       pointer-events: none;
-    }
-    /* Project Wizard */
     .wizard {
       padding: 2rem;
-    }
     .wizard-header {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 1.5rem;
-    }
     .wizard-icon {
       width: 48px;
       height: 48px;
-      background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(139, 92, 246, 0.2));
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
-    }
     .wizard-icon i {
       font-size: 1.5rem;
       color: var(--primary-400);
-    }
     .wizard-title {
       font-size: 1.5rem;
       font-weight: 700;
       color: white;
-    }
     .wizard-subtitle {
       color: var(--dark-400);
       font-size: 0.875rem;
-    }
     .form-group {
       margin-bottom: 1.5rem;
-    }
     .form-label {
       display: block;
@@ -269,98 +313,109 @@
       font-weight: 500;
       color: var(--dark-300);
       margin-bottom: 0.5rem;
-    }
     .input-field {
       width: 100%;
       padding: 0.75rem 1rem;
-      background: rgba(30, 41, 59, 0.5);
       border: 1px solid var(--dark-600);
       border-radius: 12px;
       color: var(--dark-100);
       font-family: inherit;
       font-size: 1rem;
       transition: all 0.3s;
-    }
-    .input-field::placeholder {
       color: var(--dark-400);
-    }
     .input-field:focus {
       outline: none;
       border-color: var(--primary-500);
-      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
-    }
     textarea.input-field {
       resize: none;
       min-height: 150px;
-    }
-    /* Stack Selection */
     .stack-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 1rem;
-    }
     .stack-option {
       padding: 1rem;
       border-radius: 12px;
       border: 1px solid var(--dark-600);
-      background: rgba(30, 41, 59, 0.5);
       cursor: pointer;
       transition: all 0.3s;
       text-align: left;
-    }
     .stack-option:hover {
       border-color: var(--dark-500);
-    }
     .stack-option.active {
       border-color: var(--primary-500);
-      background: rgba(14, 165, 233, 0.1);
-    }
     .stack-option-header {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 0.5rem;
-    }
     .stack-option-header i {
       font-size: 1.25rem;
-    }
     .stack-option-header span {
       font-weight: 600;
       color: white;
-    }
     .stack-option p {
       font-size: 0.875rem;
       color: var(--dark-400);
-    }
-    /* Examples */
     .examples-section {
       margin-bottom: 1.5rem;
-    }
     .examples-label {
       font-size: 0.875rem;
       color: var(--dark-400);
       margin-bottom: 0.75rem;
-    }
     .examples-list {
       display: flex;
       flex-wrap: wrap;
       gap: 0.5rem;
-    }
     .example-btn {
       padding: 0.375rem 0.75rem;
@@ -371,14 +426,16 @@
       border-radius: 8px;
       cursor: pointer;
       transition: all 0.3s;
-    }
     .example-btn:hover {
-      border-color: rgba(14, 165, 233, 0.5);
       color: var(--primary-400);
-    }
-    /* Buttons */
     .btn-primary {
       width: 100%;
       padding: 0.875rem 1.5rem;
@@ -394,17 +451,20 @@
       justify-content: center;
       gap: 0.5rem;
       transition: all 0.3s;
-      box-shadow: 0 10px 25px rgba(14, 165, 233, 0.25);
-    }
     .btn-primary:hover:not(:disabled) {
       background: linear-gradient(to right, var(--primary-600), var(--primary-700));
-    }
     .btn-primary:disabled {
       opacity: 0.5;
       cursor: not-allowed;
-    }
     .btn-secondary {
       padding: 0.75rem 1.5rem;
@@ -418,36 +478,36 @@
       align-items: center;
       gap: 0.5rem;
       transition: all 0.3s;
-    }
     .btn-secondary:hover {
       background: var(--dark-700);
       border-color: var(--dark-500);
-    }
-    /* Feature Cards */
     .features-section {
       margin-top: 3rem;
-    }
     .features-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 1.5rem;
-    }
     .feature-card {
       padding: 1.5rem;
       transition: all 0.3s;
-    }
     .feature-card:hover {
       border-color: var(--dark-500);
-    }
     .feature-card:hover .feature-icon {
       transform: scale(1.1);
-    }
     .feature-icon {
       width: 48px;
@@ -456,7 +516,7 @@
       padding: 2px;
       margin-bottom: 1rem;
       transition: transform 0.3s;
-    }
     .feature-icon-inner {
       width: 100%;
@@ -466,55 +526,57 @@
       display: flex;
       align-items: center;
       justify-content: center;
-    }
     .feature-icon-inner i {
       font-size: 1.25rem;
       color: white;
-    }
     .feature-card h3 {
       font-size: 1.125rem;
       font-weight: 600;
       color: white;
       margin-bottom: 0.5rem;
-    }
     .feature-card p {
       font-size: 0.875rem;
       color: var(--dark-400);
       line-height: 1.6;
-    }
-    /* Loading State */
     .loading-container {
       padding: 2rem;
       display: none;
-    }
     .loading-container.active {
       display: block;
-    }
     .loading-header {
       text-align: center;
       margin-bottom: 2rem;
-    }
     .loading-icon {
       width: 64px;
       height: 64px;
       margin: 0 auto 1rem;
       position: relative;
-    }
     .loading-icon-bg {
       position: absolute;
       inset: 0;
       background: linear-gradient(to right, var(--primary-500), var(--purple-500));
       border-radius: 50%;
-      animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    }
     .loading-icon-inner {
       position: absolute;
@@ -524,30 +586,30 @@
       display: flex;
       align-items: center;
       justify-content: center;
-    }
     .loading-icon-inner i {
       color: var(--primary-400);
       font-size: 1.5rem;
       animation: float 6s ease-in-out infinite;
-    }
     .loading-header h3 {
       font-size: 1.25rem;
       font-weight: 700;
       color: white;
       margin-bottom: 0.5rem;
-    }
     .loading-header p {
       color: var(--dark-400);
-    }
     .loading-steps {
       display: flex;
       flex-direction: column;
       gap: 1rem;
-    }
     .loading-step {
       display: flex;
@@ -555,20 +617,35 @@
       gap: 1rem;
       padding: 1rem;
       border-radius: 12px;
-      background: rgba(30, 41, 59, 0.5);
       border: 1px solid var(--dark-700);
       transition: all 0.5s;
-    }
     .loading-step.current {
-      background: rgba(14, 165, 233, 0.1);
-      border-color: rgba(14, 165, 233, 0.3);
-    }
     .loading-step.completed {
-      background: rgba(34, 197, 94, 0.1);
-      border-color: rgba(34, 197, 94, 0.3);
-    }
     .loading-step-icon {
       width: 40px;
@@ -578,42 +655,48 @@
       align-items: center;
       justify-content: center;
       background: var(--dark-700);
-    }
     .loading-step.current .loading-step-icon {
-      background: rgba(14, 165, 233, 0.2);
-    }
     .loading-step.completed .loading-step-icon {
-      background: rgba(34, 197, 94, 0.2);
-    }
     .loading-step-icon i {
       font-size: 1.25rem;
       color: var(--dark-500);
-    }
     .loading-step.current .loading-step-icon i {
       color: var(--primary-400);
       animation: pulse 2s infinite;
-    }
     .loading-step.completed .loading-step-icon i {
       color: var(--green-400);
-    }
     .loading-step span {
       font-weight: 500;
       color: var(--dark-500);
-    }
     .loading-step.current span {
       color: var(--primary-400);
-    }
     .loading-step.completed span {
       color: var(--green-400);
-    }
     .loading-spinner {
       margin-left: auto;
@@ -623,17 +706,16 @@
       border-top-color: transparent;
       border-radius: 50%;
       animation: spin 1s linear infinite;
-    }
-    /* Output Section */
     .output-section {
       display: none;
       margin-top: 2rem;
-    }
     .output-section.active {
       display: block;
-    }
     .output-header {
       display: flex;
@@ -642,27 +724,26 @@
       margin-bottom: 1.5rem;
       flex-wrap: wrap;
       gap: 1rem;
-    }
     .output-header h2 {
       font-size: 1.25rem;
       font-weight: 700;
       color: white;
-    }
     .output-actions {
       display: flex;
       gap: 0.75rem;
-    }
-    /* Tabs */
     .tabs {
       display: flex;
       gap: 0.5rem;
       margin-bottom: 1.5rem;
       overflow-x: auto;
       padding-bottom: 0.5rem;
-    }
     .tab-btn {
       display: flex;
@@ -678,29 +759,33 @@
       cursor: pointer;
       white-space: nowrap;
       transition: all 0.3s;
-    }
     .tab-btn:hover {
       border-color: var(--dark-500);
-    }
     .tab-btn.active {
-      background: rgba(14, 165, 233, 0.2);
       color: var(--primary-400);
-      border-color: rgba(14, 165, 233, 0.5);
-    }
-    /* Tab Content */
     .tab-content {
       display: none;
       min-height: 400px;
-    }
     .tab-content.active {
       display: block;
-    }
-    /* Schema Visualizer */
     .schema-container {
       background: var(--dark-900);
       border: 1px solid var(--dark-700);
@@ -708,21 +793,25 @@
       padding: 1.5rem;
       min-height: 400px;
       overflow: auto;
-    }
     .schema-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 1.5rem;
-    }
     .entity-card {
       background: var(--dark-800);
       border: 1px solid var(--dark-600);
       border-radius: 12px;
       overflow: hidden;
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
-    }
     .entity-header {
       background: linear-gradient(to right, var(--primary-600), var(--purple-600));
@@ -730,22 +819,22 @@
       display: flex;
       align-items: center;
       gap: 0.5rem;
-    }
     .entity-header i {
       color: white;
       font-size: 0.875rem;
-    }
     .entity-header span {
       font-weight: 700;
       color: white;
       font-size: 0.875rem;
-    }
     .entity-fields {
       padding: 0.75rem;
-    }
     .entity-field {
       display: flex;
@@ -753,39 +842,38 @@
       gap: 0.5rem;
       padding: 0.375rem 0;
       font-size: 0.75rem;
-    }
     .entity-field i {
       font-size: 0.625rem;
-    }
     .entity-field .field-name {
       color: var(--dark-200);
-    }
     .entity-field .field-type {
       color: var(--dark-500);
       margin-left: auto;
-    }
     .entity-field.primary .field-name {
       color: var(--yellow-400);
-    }
     .entity-field.primary i {
       color: var(--yellow-400);
-    }
     .entity-field.relation i {
       color: var(--primary-400);
-    }
-    /* Code Viewer */
     .code-viewer {
       border: 1px solid var(--dark-700);
       border-radius: 12px;
       overflow: hidden;
-    }
     .code-header {
       background: var(--dark-800);
@@ -794,7 +882,7 @@
       align-items: center;
       justify-content: between;
       border-bottom: 1px solid var(--dark-700);
-    }
     .code-filename {
       display: flex;
@@ -803,11 +891,11 @@
       font-size: 0.875rem;
       color: var(--dark-300);
       font-family: 'JetBrains Mono', monospace;
-    }
     .code-filename i {
       color: var(--dark-400);
-    }
     .copy-btn {
       margin-left: auto;
@@ -817,26 +905,26 @@
       border-radius: 8px;
       cursor: pointer;
       transition: background 0.3s;
-    }
     .copy-btn:hover {
       background: var(--dark-700);
-    }
     .copy-btn i {
       color: var(--dark-400);
-    }
     .copy-btn.copied i {
       color: var(--green-400);
-    }
     .code-block {
       background: var(--dark-900);
       padding: 1rem;
       max-height: 400px;
       overflow: auto;
-    }
     .code-block pre {
       margin: 0;
@@ -846,81 +934,97 @@
       color: var(--dark-100);
       white-space: pre-wrap;
       word-break: break-word;
-    }
-    /* API Routes */
     .api-routes {
       display: flex;
       flex-direction: column;
       gap: 1rem;
-    }
     .api-route {
-      background: rgba(30, 41, 59, 0.5);
       border: 1px solid var(--dark-700);
       border-radius: 12px;
       padding: 1rem;
-    }
     .api-route-header {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 0.5rem;
-    }
     .api-method {
       padding: 0.25rem 0.5rem;
       font-size: 0.75rem;
       font-weight: 700;
       border-radius: 4px;
-    }
     .api-method.get {
-      background: rgba(34, 197, 94, 0.2);
       color: var(--green-400);
-    }
     .api-method.post {
-      background: rgba(59, 130, 246, 0.2);
       color: var(--blue-400);
-    }
     .api-method.put,
     .api-method.patch {
-      background: rgba(234, 179, 8, 0.2);
       color: var(--yellow-400);
-    }
     .api-method.delete {
-      background: rgba(239, 68, 68, 0.2);
       color: var(--red-400);
-    }
     .api-path {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.875rem;
       color: var(--dark-200);
-    }
     .api-description {
       font-size: 0.875rem;
       color: var(--dark-400);
-    }
-    /* File List */
     .file-list {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
-    }
     .file-item {
-      background: rgba(30, 41, 59, 0.5);
       border: 1px solid var(--dark-700);
       border-radius: 12px;
       overflow: hidden;
-    }
     .file-header {
       width: 100%;
@@ -932,11 +1036,14 @@
       border: none;
       cursor: pointer;
       transition: background 0.3s;
-    }
     .file-header:hover {
-      background: rgba(51, 65, 85, 0.5);
-    }
     .file-name {
       display: flex;
@@ -945,126 +1052,117 @@
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.875rem;
       color: var(--dark-200);
-    }
     .file-name i {
       color: var(--primary-400);
-    }
     .file-header .chevron {
       color: var(--dark-400);
       transition: transform 0.3s;
-    }
     .file-item.expanded .file-header .chevron {
       transform: rotate(180deg);
-    }
     .file-content {
       display: none;
       border-top: 1px solid var(--dark-700);
-    }
     .file-item.expanded .file-content {
       display: block;
-    }
-    /* Animations */
     @keyframes pulse-slow {
-      0%,
-      100% {
         opacity: 1;
-      }
       50% {
         opacity: 0.5;
-      }
-    }
     @keyframes float {
-      0%,
-      100% {
         transform: translateY(0);
-      }
       50% {
         transform: translateY(-10px);
-      }
-    }
     @keyframes spin {
       to {
         transform: rotate(360deg);
-      }
-    }
     @keyframes pulse {
-      0%,
-      100% {
         opacity: 1;
-      }
       50% {
         opacity: 0.5;
-      }
-    }
-    /* Responsive */
     @media (max-width: 768px) {
       .header-content {
         flex-direction: column;
         gap: 1rem;
-      }
       .wizard {
         padding: 1.5rem;
-      }
       .features-grid {
         grid-template-columns: 1fr;
-      }
       .output-header {
         flex-direction: column;
         align-items: flex-start;
-      }
       .tabs {
         flex-wrap: nowrap;
-      }
-    }
-    /* Syntax Highlighting */
     .keyword {
       color: var(--primary-400);
-    }
     .string {
       color: var(--green-400);
-    }
     .comment {
       color: var(--dark-500);
-    }
     .type {
       color: var(--purple-400);
-    }
     .function {
       color: var(--yellow-400);
-    }
     .property {
       color: var(--pink-400);
-    }
     .number {
       color: var(--orange-400);
-    }
   </style>
 </head>
@@ -1123,19 +1221,19 @@
             <label class="form-label">Target Stack</label>
             <div class="stack-grid">
               <button type="button" class="stack-option active" data-stack="nestjs-prisma">
-                                <div class="stack-option-header">
-                                    <i class="fas fa-server" style="color: var(--primary-400);"></i>
-                                    <span>NestJS + Prisma</span>
-                                </div>
-                                <p>TypeScript, NestJS framework, Prisma ORM, PostgreSQL</p>
-                            </button>
               <button type="button" class="stack-option" data-stack="express-drizzle">
-                                <div class="stack-option-header">
-                                    <i class="fas fa-code" style="color: var(--green-400);"></i>
-                                    <span>Express + Drizzle</span>
-                                </div>
-                                <p>TypeScript, Express.js, Drizzle ORM, PostgreSQL</p>
-                            </button>
             </div>
           </div>
@@ -1149,9 +1247,9 @@
           </div>
           <button type="submit" id="generate-btn" class="btn-primary" disabled>
-                        <span>Generate Backend</span>
-                        <i class="fas fa-arrow-right"></i>
-                    </button>
         </form>
       </div>
@@ -1200,4 +1298,47 @@
         <div class="output-header">
           <h2>Generated Backend</h2>
           <div class="output-actions">
-            <button id="

 <!DOCTYPE html>
 <html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ComfyUI Workflow</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+            background-color: #000000;
+            color: #f5f5f7;
+            padding: 40px;
+        }
+        pre {
+            background: #1d1d1f;
+            padding: 24px;
+            border-radius: 12px;
+            overflow-x: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>ComfyUI Workflow</h1>
+    <p>Error: Invalid JSON format</p>
+    <pre><!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="UTF-8">
       --rose-500: #f43f5e;
       --indigo-500: #6366f1;
       --violet-500: #8b5cf6;
+}
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
+}
     html {
       scroll-behavior: smooth;
+}
     body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
       min-height: 100vh;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
+}
+    : :-webkit-scrollbar {
       width: 8px;
       height: 8px;
+}
+    : :-webkit-scrollbar-track {
       background: var(--dark-900);
+}
+    : :-webkit-scrollbar-thumb {
       background: var(--dark-600);
       border-radius: 9999px;
+}
+    : :-webkit-scrollbar-thumb:hover {
       background: var(--dark-500);
+}
+/* Header */
     .header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 50;
+      background: rgba(15,
+  23,
+  42,
+  0.8);
       backdrop-filter: blur(20px);
+      border-bottom: 1px solid rgba(51,
+  65,
+  85,
+  0.5);
+}
     .header-content {
       max-width: 1280px;
       display: flex;
       align-items: center;
       justify-content: space-between;
+}
     .logo-section {
       display: flex;
       align-items: center;
       gap: 0.75rem;
+}
     .logo-icon {
       position: relative;
       width: 40px;
       height: 40px;
+}
     .logo-icon-bg {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
+}
     .logo-icon-bg i {
       color: white;
       font-size: 1.25rem;
+}
     .logo-badge {
       position: absolute;
       display: flex;
       align-items: center;
       justify-content: center;
+}
     .logo-badge i {
       font-size: 0.5rem;
       color: white;
+}
     .logo-text h1 {
       font-size: 1.25rem;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+}
     .logo-text p {
       font-size: 0.75rem;
       color: var(--dark-400);
+}
     .header-link {
       font-size: 0.875rem;
       color: var(--dark-400);
       text-decoration: none;
       transition: color 0.3s;
+}
     .header-link:hover {
       color: var(--primary-400);
+}
+/* Main Content */
     .main {
       padding-top: 80px;
       min-height: 100vh;
+}
     .container {
       max-width: 1280px;
       margin: 0 auto;
       padding: 2rem 1.5rem;
+}
+/* Glass Panel */
     .glass-panel {
+      background: rgba(15,
+  23,
+  42,
+  0.8);
       backdrop-filter: blur(20px);
+      border: 1px solid rgba(51,
+  65,
+  85,
+  0.5);
       border-radius: 1rem;
+}
     .gradient-border {
       position: relative;
+}
+    .gradient-border: :before {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: 1rem;
       padding: 1px;
+      background: linear-gradient(135deg, rgba(14,
+  165,
+  233,
+  0.5), rgba(139,
+  92,
+  246,
+  0.5));
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       pointer-events: none;
+}
+/* Project Wizard */
     .wizard {
       padding: 2rem;
+}
     .wizard-header {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 1.5rem;
+}
     .wizard-icon {
       width: 48px;
       height: 48px;
+      background: linear-gradient(135deg, rgba(14,
+  165,
+  233,
+  0.2), rgba(139,
+  92,
+  246,
+  0.2));
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
+}
     .wizard-icon i {
       font-size: 1.5rem;
       color: var(--primary-400);
+}
     .wizard-title {
       font-size: 1.5rem;
       font-weight: 700;
       color: white;
+}
     .wizard-subtitle {
       color: var(--dark-400);
       font-size: 0.875rem;
+}
     .form-group {
       margin-bottom: 1.5rem;
+}
     .form-label {
       display: block;
       font-weight: 500;
       color: var(--dark-300);
       margin-bottom: 0.5rem;
+}
     .input-field {
       width: 100%;
       padding: 0.75rem 1rem;
+      background: rgba(30,
+  41,
+  59,
+  0.5);
       border: 1px solid var(--dark-600);
       border-radius: 12px;
       color: var(--dark-100);
       font-family: inherit;
       font-size: 1rem;
       transition: all 0.3s;
+}
+    .input-field: :placeholder {
       color: var(--dark-400);
+}
     .input-field:focus {
       outline: none;
       border-color: var(--primary-500);
+      box-shadow: 0 0 0 3px rgba(14,
+  165,
+  233,
+  0.2);
+}
     textarea.input-field {
       resize: none;
       min-height: 150px;
+}
+/* Stack Selection */
     .stack-grid {
       display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px,
+  1fr));
       gap: 1rem;
+}
     .stack-option {
       padding: 1rem;
       border-radius: 12px;
       border: 1px solid var(--dark-600);
+      background: rgba(30,
+  41,
+  59,
+  0.5);
       cursor: pointer;
       transition: all 0.3s;
       text-align: left;
+}
     .stack-option:hover {
       border-color: var(--dark-500);
+}
     .stack-option.active {
       border-color: var(--primary-500);
+      background: rgba(14,
+  165,
+  233,
+  0.1);
+}
     .stack-option-header {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 0.5rem;
+}
     .stack-option-header i {
       font-size: 1.25rem;
+}
     .stack-option-header span {
       font-weight: 600;
       color: white;
+}
     .stack-option p {
       font-size: 0.875rem;
       color: var(--dark-400);
+}
+/* Examples */
     .examples-section {
       margin-bottom: 1.5rem;
+}
     .examples-label {
       font-size: 0.875rem;
       color: var(--dark-400);
       margin-bottom: 0.75rem;
+}
     .examples-list {
       display: flex;
       flex-wrap: wrap;
       gap: 0.5rem;
+}
     .example-btn {
       padding: 0.375rem 0.75rem;
       border-radius: 8px;
       cursor: pointer;
       transition: all 0.3s;
+}
     .example-btn:hover {
+      border-color: rgba(14,
+  165,
+  233,
+  0.5);
       color: var(--primary-400);
+}
+/* Buttons */
     .btn-primary {
       width: 100%;
       padding: 0.875rem 1.5rem;
       justify-content: center;
       gap: 0.5rem;
       transition: all 0.3s;
+      box-shadow: 0 10px 25px rgba(14,
+  165,
+  233,
+  0.25);
+}
     .btn-primary:hover:not(:disabled) {
       background: linear-gradient(to right, var(--primary-600), var(--primary-700));
+}
     .btn-primary:disabled {
       opacity: 0.5;
       cursor: not-allowed;
+}
     .btn-secondary {
       padding: 0.75rem 1.5rem;
       align-items: center;
       gap: 0.5rem;
       transition: all 0.3s;
+}
     .btn-secondary:hover {
       background: var(--dark-700);
       border-color: var(--dark-500);
+}
+/* Feature Cards */
     .features-section {
       margin-top: 3rem;
+}
     .features-grid {
       display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px,
+  1fr));
       gap: 1.5rem;
+}
     .feature-card {
       padding: 1.5rem;
       transition: all 0.3s;
+}
     .feature-card:hover {
       border-color: var(--dark-500);
+}
     .feature-card:hover .feature-icon {
       transform: scale(1.1);
+}
     .feature-icon {
       width: 48px;
       padding: 2px;
       margin-bottom: 1rem;
       transition: transform 0.3s;
+}
     .feature-icon-inner {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
+}
     .feature-icon-inner i {
       font-size: 1.25rem;
       color: white;
+}
     .feature-card h3 {
       font-size: 1.125rem;
       font-weight: 600;
       color: white;
       margin-bottom: 0.5rem;
+}
     .feature-card p {
       font-size: 0.875rem;
       color: var(--dark-400);
       line-height: 1.6;
+}
+/* Loading State */
     .loading-container {
       padding: 2rem;
       display: none;
+}
     .loading-container.active {
       display: block;
+}
     .loading-header {
       text-align: center;
       margin-bottom: 2rem;
+}
     .loading-icon {
       width: 64px;
       height: 64px;
       margin: 0 auto 1rem;
       position: relative;
+}
     .loading-icon-bg {
       position: absolute;
       inset: 0;
       background: linear-gradient(to right, var(--primary-500), var(--purple-500));
       border-radius: 50%;
+      animation: pulse-slow 3s cubic-bezier(0.4,
+  0,
+  0.6,
+  1) infinite;
+}
     .loading-icon-inner {
       position: absolute;
       display: flex;
       align-items: center;
       justify-content: center;
+}
     .loading-icon-inner i {
       color: var(--primary-400);
       font-size: 1.5rem;
       animation: float 6s ease-in-out infinite;
+}
     .loading-header h3 {
       font-size: 1.25rem;
       font-weight: 700;
       color: white;
       margin-bottom: 0.5rem;
+}
     .loading-header p {
       color: var(--dark-400);
+}
     .loading-steps {
       display: flex;
       flex-direction: column;
       gap: 1rem;
+}
     .loading-step {
       display: flex;
       gap: 1rem;
       padding: 1rem;
       border-radius: 12px;
+      background: rgba(30,
+  41,
+  59,
+  0.5);
       border: 1px solid var(--dark-700);
       transition: all 0.5s;
+}
     .loading-step.current {
+      background: rgba(14,
+  165,
+  233,
+  0.1);
+      border-color: rgba(14,
+  165,
+  233,
+  0.3);
+}
     .loading-step.completed {
+      background: rgba(34,
+  197,
+  94,
+  0.1);
+      border-color: rgba(34,
+  197,
+  94,
+  0.3);
+}
     .loading-step-icon {
       width: 40px;
       align-items: center;
       justify-content: center;
       background: var(--dark-700);
+}
     .loading-step.current .loading-step-icon {
+      background: rgba(14,
+  165,
+  233,
+  0.2);
+}
     .loading-step.completed .loading-step-icon {
+      background: rgba(34,
+  197,
+  94,
+  0.2);
+}
     .loading-step-icon i {
       font-size: 1.25rem;
       color: var(--dark-500);
+}
     .loading-step.current .loading-step-icon i {
       color: var(--primary-400);
       animation: pulse 2s infinite;
+}
     .loading-step.completed .loading-step-icon i {
       color: var(--green-400);
+}
     .loading-step span {
       font-weight: 500;
       color: var(--dark-500);
+}
     .loading-step.current span {
       color: var(--primary-400);
+}
     .loading-step.completed span {
       color: var(--green-400);
+}
     .loading-spinner {
       margin-left: auto;
       border-top-color: transparent;
       border-radius: 50%;
       animation: spin 1s linear infinite;
+}
+/* Output Section */
     .output-section {
       display: none;
       margin-top: 2rem;
+}
     .output-section.active {
       display: block;
+}
     .output-header {
       display: flex;
       margin-bottom: 1.5rem;
       flex-wrap: wrap;
       gap: 1rem;
+}
     .output-header h2 {
       font-size: 1.25rem;
       font-weight: 700;
       color: white;
+}
     .output-actions {
       display: flex;
       gap: 0.75rem;
+}
+/* Tabs */
     .tabs {
       display: flex;
       gap: 0.5rem;
       margin-bottom: 1.5rem;
       overflow-x: auto;
       padding-bottom: 0.5rem;
+}
     .tab-btn {
       display: flex;
       cursor: pointer;
       white-space: nowrap;
       transition: all 0.3s;
+}
     .tab-btn:hover {
       border-color: var(--dark-500);
+}
     .tab-btn.active {
+      background: rgba(14,
+  165,
+  233,
+  0.2);
       color: var(--primary-400);
+      border-color: rgba(14,
+  165,
+  233,
+  0.5);
+}
+/* Tab Content */
     .tab-content {
       display: none;
       min-height: 400px;
+}
     .tab-content.active {
       display: block;
+}
+/* Schema Visualizer */
     .schema-container {
       background: var(--dark-900);
       border: 1px solid var(--dark-700);
       padding: 1.5rem;
       min-height: 400px;
       overflow: auto;
+}
     .schema-grid {
       display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px,
+  1fr));
       gap: 1.5rem;
+}
     .entity-card {
       background: var(--dark-800);
       border: 1px solid var(--dark-600);
       border-radius: 12px;
       overflow: hidden;
+      box-shadow: 0 10px 25px rgba(0,
+  0,
+  0,
+  0.3);
+}
     .entity-header {
       background: linear-gradient(to right, var(--primary-600), var(--purple-600));
       display: flex;
       align-items: center;
       gap: 0.5rem;
+}
     .entity-header i {
       color: white;
       font-size: 0.875rem;
+}
     .entity-header span {
       font-weight: 700;
       color: white;
       font-size: 0.875rem;
+}
     .entity-fields {
       padding: 0.75rem;
+}
     .entity-field {
       display: flex;
       gap: 0.5rem;
       padding: 0.375rem 0;
       font-size: 0.75rem;
+}
     .entity-field i {
       font-size: 0.625rem;
+}
     .entity-field .field-name {
       color: var(--dark-200);
+}
     .entity-field .field-type {
       color: var(--dark-500);
       margin-left: auto;
+}
     .entity-field.primary .field-name {
       color: var(--yellow-400);
+}
     .entity-field.primary i {
       color: var(--yellow-400);
+}
     .entity-field.relation i {
       color: var(--primary-400);
+}
+/* Code Viewer */
     .code-viewer {
       border: 1px solid var(--dark-700);
       border-radius: 12px;
       overflow: hidden;
+}
     .code-header {
       background: var(--dark-800);
       align-items: center;
       justify-content: between;
       border-bottom: 1px solid var(--dark-700);
+}
     .code-filename {
       display: flex;
       font-size: 0.875rem;
       color: var(--dark-300);
       font-family: 'JetBrains Mono', monospace;
+}
     .code-filename i {
       color: var(--dark-400);
+}
     .copy-btn {
       margin-left: auto;
       border-radius: 8px;
       cursor: pointer;
       transition: background 0.3s;
+}
     .copy-btn:hover {
       background: var(--dark-700);
+}
     .copy-btn i {
       color: var(--dark-400);
+}
     .copy-btn.copied i {
       color: var(--green-400);
+}
     .code-block {
       background: var(--dark-900);
       padding: 1rem;
       max-height: 400px;
       overflow: auto;
+}
     .code-block pre {
       margin: 0;
       color: var(--dark-100);
       white-space: pre-wrap;
       word-break: break-word;
+}
+/* API Routes */
     .api-routes {
       display: flex;
       flex-direction: column;
       gap: 1rem;
+}
     .api-route {
+      background: rgba(30,
+  41,
+  59,
+  0.5);
       border: 1px solid var(--dark-700);
       border-radius: 12px;
       padding: 1rem;
+}
     .api-route-header {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 0.5rem;
+}
     .api-method {
       padding: 0.25rem 0.5rem;
       font-size: 0.75rem;
       font-weight: 700;
       border-radius: 4px;
+}
     .api-method.get {
+      background: rgba(34,
+  197,
+  94,
+  0.2);
       color: var(--green-400);
+}
     .api-method.post {
+      background: rgba(59,
+  130,
+  246,
+  0.2);
       color: var(--blue-400);
+}
     .api-method.put,
     .api-method.patch {
+      background: rgba(234,
+  179,
+  8,
+  0.2);
       color: var(--yellow-400);
+}
     .api-method.delete {
+      background: rgba(239,
+  68,
+  68,
+  0.2);
       color: var(--red-400);
+}
     .api-path {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.875rem;
       color: var(--dark-200);
+}
     .api-description {
       font-size: 0.875rem;
       color: var(--dark-400);
+}
+/* File List */
     .file-list {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
+}
     .file-item {
+      background: rgba(30,
+  41,
+  59,
+  0.5);
       border: 1px solid var(--dark-700);
       border-radius: 12px;
       overflow: hidden;
+}
     .file-header {
       width: 100%;
       border: none;
       cursor: pointer;
       transition: background 0.3s;
+}
     .file-header:hover {
+      background: rgba(51,
+  65,
+  85,
+  0.5);
+}
     .file-name {
       display: flex;
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.875rem;
       color: var(--dark-200);
+}
     .file-name i {
       color: var(--primary-400);
+}
     .file-header .chevron {
       color: var(--dark-400);
       transition: transform 0.3s;
+}
     .file-item.expanded .file-header .chevron {
       transform: rotate(180deg);
+}
     .file-content {
       display: none;
       border-top: 1px solid var(--dark-700);
+}
     .file-item.expanded .file-content {
       display: block;
+}
+/* Animations */
     @keyframes pulse-slow {
+  0%,
+  100% {
         opacity: 1;
+  }
       50% {
         opacity: 0.5;
+  }
+}
     @keyframes float {
+  0%,
+  100% {
         transform: translateY(0);
+  }
       50% {
         transform: translateY(-10px);
+  }
+}
     @keyframes spin {
       to {
         transform: rotate(360deg);
+  }
+}
     @keyframes pulse {
+  0%,
+  100% {
         opacity: 1;
+  }
       50% {
         opacity: 0.5;
+  }
+}
+/* Responsive */
     @media (max-width: 768px) {
       .header-content {
         flex-direction: column;
         gap: 1rem;
+  }
       .wizard {
         padding: 1.5rem;
+  }
       .features-grid {
         grid-template-columns: 1fr;
+  }
       .output-header {
         flex-direction: column;
         align-items: flex-start;
+  }
       .tabs {
         flex-wrap: nowrap;
+  }
+}
+/* Syntax Highlighting */
     .keyword {
       color: var(--primary-400);
+}
     .string {
       color: var(--green-400);
+}
     .comment {
       color: var(--dark-500);
+}
     .type {
       color: var(--purple-400);
+}
     .function {
       color: var(--yellow-400);
+}
     .property {
       color: var(--pink-400);
+}
     .number {
       color: var(--orange-400);
+}
   </style>
 </head>
             <label class="form-label">Target Stack</label>
             <div class="stack-grid">
               <button type="button" class="stack-option active" data-stack="nestjs-prisma">
+                <div class="stack-option-header">
+                  <i class="fas fa-server" style="color: var(--primary-400);"></i>
+                  <span>NestJS + Prisma</span>
+                </div>
+                <p>TypeScript, NestJS framework, Prisma ORM, PostgreSQL</p>
+              </button>
               <button type="button" class="stack-option" data-stack="express-drizzle">
+                <div class="stack-option-header">
+                  <i class="fas fa-code" style="color: var(--green-400);"></i>
+                  <span>Express + Drizzle</span>
+                </div>
+                <p>TypeScript, Express.js, Drizzle ORM, PostgreSQL</p>
+              </button>
             </div>
           </div>
           </div>
           <button type="submit" id="generate-btn" class="btn-primary" disabled>
+            <span>Generate Backend</span>
+            <i class="fas fa-arrow-right"></i>
+          </button>
         </form>
       </div>
         <div class="output-header">
           <h2>Generated Backend</h2>
           <div class="output-actions">
+            <button id="download-btn" class="btn-secondary">
+              <i class="fas fa-download"></i>
+              <span>Download ZIP</span>
+            </button>
+            <button id="new-project-btn" class="btn-secondary">
+              <i class="fas fa-plus"></i>
+              <span>New Project</span>
+            </button>
+          </div>
+        </div>
+        <!-- Tabs -->
+        <div class="tabs">
+          <button class="tab-btn active" data-tab="schema">
+            <i class="fas fa-database"></i>
+            <span>Schema</span>
+          </button>
+          <button class="tab-btn" data-tab="api">
+            <i class="fas fa-server"></i>
+            <span>API Routes</span>
+          </button>
+          <button class="tab-btn" data-tab="prisma">
+            <i class="fas fa-file-code"></i>
+            <span>Prisma Schema</span>
+          </button>
+          <button class="tab-btn" data-tab="files">
+            <i class="fas fa-folder"></i>
+            <span>All Files</span>
+          </button>
+        </div>
+        <!-- Schema Tab -->
+        <div id="schema-tab" class="tab-content active">
+          <div class="schema-container">
+            <div id="schema-grid" class="schema-grid">
+              <!-- Entity cards will be generated here -->
+            </div>
+          </div>
+        </div>
+        <!-- API Tab -->
+        <div</pre>
+</body>
+</html>