Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCraft Input Symphony</title> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | |
| <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> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6366f1', | |
| }, | |
| secondary: { | |
| 500: '#8b5cf6', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <h1 class="text-3xl font-bold mb-6 text-primary-500">Spring Boot Generator<span class="text-secondary-500">🎹</span></h1> | |
| <div class="flex flex-col lg:flex-row gap-6 h-full"> | |
| <!-- Left Column - Inputs --> | |
| <div class="lg:w-1/3 h-full"> | |
| <div class="bg-gray-800 rounded-lg shadow-xl p-4 h-full flex flex-col"> | |
| <div class="mb-4"> | |
| <label for="class-name" class="block text-sm font-medium text-gray-300 mb-1">Class Name</label> | |
| <input type="text" id="class-name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-gray-100 focus:border-primary-500 focus:ring-1 focus:ring-primary-500" placeholder="MyClass"> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-primary-500">Input Fields</h2> | |
| <button id="add-input" class="bg-primary-500 hover:bg-primary-600 text-white px-3 py-1 rounded-lg flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add | |
| </button> | |
| </div> | |
| <div id="input-container" class="space-y-4"> | |
| <!-- Input fields will be added here --> | |
| <div class="input-group"> | |
| <div class="flex gap-2"> | |
| <input type="text" class="w-1/2 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-gray-100 focus:border-primary-500 focus:ring-1 focus:ring-primary-500" placeholder="Field Name"> | |
| <input type="text" class="w-1/2 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-gray-100 focus:border-primary-500 focus:ring-1 focus:ring-primary-500" placeholder="Field Type"> | |
| </div> | |
| <button class="remove-input mt-1 text-red-400 hover:text-red-300 text-sm flex items-center"> | |
| <i data-feather="trash-2" class="w-3 h-3 mr-1"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex gap-2 mt-auto"> | |
| <button id="generate-btn" class="flex-1 bg-secondary-500 hover:bg-secondary-600 text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center"> | |
| <i data-feather="play" class="w-4 h-4 mr-2"></i> Generate Output | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Output with Tabs --> | |
| <div class="lg:w-2/3 h-full"> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden shadow-xl h-full"> | |
| <!-- Tabs Header --> | |
| <div class="flex items-center justify-between border-b border-gray-700"> | |
| <div class="flex"> | |
| <button class="tab-btn active px-4 py-2 text-primary-500 font-medium" data-tab="entity"> | |
| <i data-feather="database" class="w-4 h-4 mr-2"></i> Entity | |
| </button> | |
| <button class="tab-btn px-4 py-2 text-gray-400 hover:text-primary-500 font-medium" data-tab="repository"> | |
| <i data-feather="archive" class="w-4 h-4 mr-2"></i> Repository | |
| </button> | |
| <button class="tab-btn px-4 py-2 text-gray-400 hover:text-primary-500 font-medium" data-tab="service"> | |
| <i data-feather="activity" class="w-4 h-4 mr-2"></i> Service | |
| </button> | |
| <button class="tab-btn px-4 py-2 text-gray-400 hover:text-primary-500 font-medium" data-tab="controller"> | |
| <i data-feather="terminal" class="w-4 h-4 mr-2"></i> Controller | |
| </button> | |
| </div> | |
| <button id="download-btn" class="bg-green-500 hover:bg-green-600 text-white py-1 px-3 rounded-lg font-medium flex items-center justify-center mr-2"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> Download | |
| </button> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="p-4 flex-1 flex flex-col"> | |
| <div id="entity" class="tab-content flex flex-col flex-1"> | |
| <textarea class="w-full flex-1 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" readonly></textarea> | |
| </div> | |
| <div id="repository" class="tab-content hidden flex flex-col flex-1"> | |
| <textarea class="w-full flex-1 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" readonly></textarea> | |
| </div> | |
| <div id="service" class="tab-content hidden flex flex-col flex-1"> | |
| <textarea class="w-full flex-1 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" readonly></textarea> | |
| </div> | |
| <div id="controller" class="tab-content hidden flex flex-col flex-1"> | |
| <textarea class="w-full flex-1 bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" readonly></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="components/tab-component.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |