Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepSite Prompt Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1, #8b5cf6); | |
| } | |
| .prompt-box { | |
| min-height: 200px; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| background-color: #1e293b; | |
| color: #f8fafc; | |
| border-radius: 0.5rem; | |
| padding: 1.5rem; | |
| position: relative; | |
| white-space: pre-wrap; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .tech-tag { | |
| transition: all 0.2s ease; | |
| } | |
| .tech-tag:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .section-highlight { | |
| position: relative; | |
| } | |
| .section-highlight::before { | |
| content: ''; | |
| position: absolute; | |
| left: -8px; | |
| top: 0; | |
| height: 100%; | |
| width: 4px; | |
| background: #6366f1; | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <h1 class="text-4xl font-bold mb-4">DeepSite Prompt Generator</h1> | |
| <p class="text-xl opacity-90">Превратите ваше ТЗ в готовый системный промпт для генерации MVP</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg transform hover:scale-105 transition duration-300"> | |
| <i class="fab fa-react text-3xl text-blue-400"></i> | |
| </div> | |
| <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg transform hover:scale-105 transition duration-300"> | |
| <i class="fab fa-python text-3xl text-yellow-400"></i> | |
| </div> | |
| <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg transform hover:scale-105 transition duration-300"> | |
| <i class="fas fa-bolt text-3xl text-purple-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Input Section --> | |
| <section class="mb-12"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 transform transition duration-300 hover:shadow-xl"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center"> | |
| <i class="fas fa-file-alt mr-3 text-indigo-600"></i> | |
| Введите ваше техническое задание | |
| </h2> | |
| <div class="mb-6"> | |
| <label for="user-input" class="block text-lg font-medium text-gray-700 mb-3">Полное ТЗ:</label> | |
| <textarea id="user-input" class="w-full prompt-box p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-700" placeholder="Пример: | |
| – Цель: лэндинг для IT-консалтинга... | |
| – Страницы: /, /services, /about, /contact... | |
| – Функции: форма обратной связи, блог, авторизация через OAuth... | |
| – Стек: Next.js, Tailwind, TypeScript, FastAPI, PostgreSQL... | |
| – Дизайн: светлая палитра, плавные переходы... | |
| – Нефункционально: Lighthouse ≥ 90, mobile-first... | |
| – CI/CD: Vercel, Docker, Railway..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Тип проекта</label> | |
| <select id="project-type" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="landing">Лэндинг</option> | |
| <option value="ecommerce">Интернет-магазин</option> | |
| <option value="saas">SaaS приложение</option> | |
| <option value="portal">Корпоративный портал</option> | |
| <option value="blog">Блог/Медиа</option> | |
| <option value="dashboard">Дашборд/Аналитика</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Уровень детализации</label> | |
| <select id="detail-level" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="basic">Базовый</option> | |
| <option value="detailed" selected>Детализированный</option> | |
| <option value="expert">Экспертный</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Приоритет</label> | |
| <select id="priority" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="speed">Скорость разработки</option> | |
| <option value="quality" selected>Качество кода</option> | |
| <option value="performance">Производительность</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="generate-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-6 rounded-lg transition duration-300 shadow-lg transform hover:scale-[1.01]"> | |
| <i class="fas fa-magic mr-2"></i>Сгенерировать системный промпт | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section id="results" class="hidden"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-2/3"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-terminal mr-3 text-indigo-600"></i> | |
| Ваш системный промпт для DeepSite | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button id="copy-btn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg transition duration-300 flex items-center"> | |
| <i class="fas fa-copy mr-2"></i>Копировать | |
| </button> | |
| <button id="regenerate-btn" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition duration-300 flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i>Перегенерировать | |
| </button> | |
| </div> | |
| </div> | |
| <div class="code-block mb-6 relative"> | |
| <div id="generated-prompt" class="whitespace-pre-wrap"></div> | |
| <div id="prompt-structure" class="hidden"> | |
| <div class="text-indigo-400 font-bold mb-2 section-highlight">You are DeepSite, a world-class AI architect and full-stack engineer with 30+ years of experience.</div> | |
| <div class="text-indigo-400 font-bold mb-4 section-highlight">Mission: Build a production-ready Web-MVP that fully satisfies the following technical specification:</div> | |
| <div class="text-green-400 font-semibold mt-4 mb-2 section-highlight">### 1. Context & Goals</div> | |
| <div id="context-goals"></div> | |
| <div class="text-green-400 font-semibold mt-4 mb-2 section-highlight">### 2. Pages & Routes</div> | |
| <div id="pages-routes"></div> | |
| <div class="text-green-400 font-semibold mt-4 mb-2 section-highlight">### 3. Core Functionality</div> | |
| <div id="core-functionality"></div> | |
| <div class="text-green-400 font-semibold mt-4 mb-2 section-highlight">### 4. Tech Stack & Architecture</div> | |
| <div id="tech-stack"></div> | |
| <div class="text-green-400 font-semibold mt-4 mb-2 section-highlight">### 5. UX/UI & Design</div> | |
| <div id="ux-ui"></div> | |
| <div class="text-green-400 font-semibold mt-4 mb-2 section-highlight">### 6. Non-Functional Requirements</div> | |
| <div id="non-functional"></div> | |
| <div class="text-green-400 font-semibold mt-4 mb-2 section-highlight">### 7. Deliverables & Deployment</div> | |
| <div id="deliverables"></div> | |
| </div> | |
| </div> | |
| <div class="bg-indigo-50 rounded-xl p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-indigo-800 mb-4 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i>Как использовать этот промпт | |
| </h3> | |
| <ol class="list-decimal list-inside space-y-2 text-gray-700"> | |
| <li class="flex items-start"> | |
| <span class="mr-2">1.</span> | |
| <span>Скопируйте весь текст промпта (кнопка выше)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mr-2">2.</span> | |
| <span>Вставьте в DeepSite или аналогичную систему</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mr-2">3.</span> | |
| <span>Запустите генерацию кода</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mr-2">4.</span> | |
| <span>Получите готовый MVP с настроенной структурой проекта</span> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| <div class="md:w-1/3"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 sticky top-6"> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-info-circle mr-2 text-indigo-600"></i> | |
| Детали вашего проекта | |
| </h3> | |
| <div class="mb-6"> | |
| <h4 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-layer-group mr-2 text-indigo-600"></i> | |
| Стек технологий | |
| </h4> | |
| <div class="flex flex-wrap gap-2" id="tech-tags"> | |
| <!-- Will be filled by JS --> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-sitemap mr-2 text-indigo-600"></i> | |
| Структура проекта | |
| </h4> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="font-mono text-sm space-y-1" id="project-structure"> | |
| <!-- Will be filled by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-tachometer-alt mr-2 text-indigo-600"></i> | |
| Метрики качества | |
| </h4> | |
| <ul class="space-y-2 text-sm text-gray-700" id="quality-metrics"> | |
| <!-- Will be filled by JS --> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-rocket mr-2 text-indigo-600"></i> | |
| Опции деплоя | |
| </h4> | |
| <ul class="space-y-2 text-sm text-gray-700" id="deployment-options"> | |
| <!-- Will be filled by JS --> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">DeepSite Prompt Generator</h3> | |
| <p class="text-gray-400">Профессиональные системные промпты для быстрого создания MVP веб-приложений.</p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Технологии</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300 flex items-center"><i class="fab fa-react mr-2"></i> React/Next.js</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300 flex items-center"><i class="fab fa-css3-alt mr-2"></i> TailwindCSS</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300 flex items-center"><i class="fab fa-python mr-2"></i> FastAPI</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300 flex items-center"><i class="fas fa-cube mr-2"></i> Three.js</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Контакты</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-400"></i> | |
| <span>support@deepsite.ai</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fab fa-github mr-2 text-gray-400"></i> | |
| <span>github.com/deepsite</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fab fa-discord mr-2 text-gray-400"></i> | |
| <span>discord.gg/deepsite</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 DeepSite Prompt Generator. Все права защищены.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Generate system prompt | |
| document.getElementById('generate-btn').addEventListener('click', function() { | |
| const userInput = document.getElementById('user-input').value.trim(); | |
| if (!userInput) { | |
| alert('Пожалуйста, введите ваше техническое задание'); | |
| return; | |
| } | |
| // Show loading state | |
| const btn = this; | |
| btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Генерация...'; | |
| btn.disabled = true; | |
| // Get selected options | |
| const projectType = document.getElementById('project-type').value; | |
| const detailLevel = document.getElementById('detail-level').value; | |
| const priority = document.getElementById('priority').value; | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // Generate project details | |
| const projectDetails = analyzeUserSpec(userInput, projectType, detailLevel, priority); | |
| // Display results | |
| document.getElementById('prompt-structure').classList.remove('hidden'); | |
| document.getElementById('context-goals').innerHTML = formatContextGoals(projectDetails); | |
| document.getElementById('pages-routes').innerHTML = formatPagesRoutes(projectDetails); | |
| document.getElementById('core-functionality').innerHTML = formatCoreFunctionality(projectDetails); | |
| document.getElementById('tech-stack').innerHTML = formatTechStack(projectDetails); | |
| document.getElementById('ux-ui').innerHTML = formatUxUi(projectDetails); | |
| document.getElementById('non-functional').innerHTML = formatNonFunctional(projectDetails); | |
| document.getElementById('deliverables').innerHTML = formatDeliverables(projectDetails); | |
| // Update sidebar | |
| updateTechTags(projectDetails.techStack); | |
| updateProjectStructure(projectType); | |
| updateQualityMetrics(projectDetails.nonFunctional); | |
| updateDeploymentOptions(projectDetails.techStack); | |
| // Show results section | |
| document.getElementById('results').classList.remove('hidden'); | |
| // Scroll to results | |
| document.getElementById('results').scrollIntoView({ behavior: 'smooth' }); | |
| // Reset button | |
| btn.innerHTML = '<i class="fas fa-magic mr-2"></i>Сгенерировать системный промпт'; | |
| btn.disabled = false; | |
| }, 1500); | |
| }); | |
| // Copy to clipboard | |
| document.getElementById('copy-btn').addEventListener('click', function() { | |
| const promptText = document.getElementById('generated-prompt').textContent; | |
| navigator.clipboard.writeText(promptText).then(() => { | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i>Скопировано!'; | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| }); | |
| // Regenerate prompt | |
| document.getElementById('regenerate-btn').addEventListener('click', function() { | |
| const userInput = document.getElementById('user-input').value.trim(); | |
| if (!userInput) { | |
| alert('Пожалуйста, введите ваше техническое задание'); | |
| return; | |
| } | |
| // Show loading state | |
| const btn = this; | |
| btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Перегенерация...'; | |
| btn.disabled = true; | |
| // Get selected options | |
| const projectType = document.getElementById('project-type').value; | |
| const detailLevel = document.getElementById('detail-level').value; | |
| const priority = document.getElementById('priority').value; | |
| // Simulate regeneration with slight variations | |
| setTimeout(() => { | |
| const projectDetails = analyzeUserSpec(userInput, projectType, detailLevel, priority, true); | |
| // Update prompt sections | |
| document.getElementById('context-goals').innerHTML = formatContextGoals(projectDetails); | |
| document.getElementById('pages-routes').innerHTML = formatPagesRoutes(projectDetails); | |
| document.getElementById('core-functionality').innerHTML = formatCoreFunctionality(projectDetails); | |
| document.getElementById('tech-stack').innerHTML = formatTechStack(projectDetails); | |
| document.getElementById('ux-ui').innerHTML = formatUxUi(projectDetails); | |
| document.getElementById('non-functional').innerHTML = formatNonFunctional(projectDetails); | |
| document.getElementById('deliverables').innerHTML = formatDeliverables(projectDetails); | |
| // Update sidebar | |
| updateTechTags(projectDetails.techStack); | |
| // Reset button | |
| btn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i>Перегенерировать'; | |
| btn.disabled = false; | |
| }, 1000); | |
| }); | |
| // Helper functions | |
| function analyzeUserSpec(userInput, projectType, detailLevel, priority, isRegenerate = false) { | |
| // Extract project name | |
| const projectName = extractProjectName(userInput) || | |
| (isRegenerate ? "Обновленный проект" : getDefaultProjectName(projectType)); | |
| // Extract goals and audience | |
| const goals = extractGoals(userInput) || getDefaultGoals(projectType); | |
| const audience = extractAudience(userInput) || getDefaultAudience(projectType); | |
| // Extract pages and routes | |
| const pages = extractPages(userInput) || getDefaultPages(projectType); | |
| // Extract functionality | |
| const functionality = extractFunctionality(userInput) || getDefaultFunctionality(projectType); | |
| // Extract tech stack | |
| const techStack = extractTechStack(userInput) || getDefaultTechStack(projectType, priority); | |
| // Extract design requirements | |
| const design = extractDesign(userInput) || getDefaultDesign(projectType); | |
| // Extract non-functional requirements | |
| const nonFunctional = extractNonFunctional(userInput) || getDefaultNonFunctional(priority); | |
| return { | |
| projectName, | |
| goals, | |
| audience, | |
| pages, | |
| functionality, | |
| techStack, | |
| design, | |
| nonFunctional, | |
| detailLevel | |
| }; | |
| } | |
| function extractProjectName(input) { | |
| const nameMatch = input.match(/Цель:\s*(.*?)(?:\n|$)/i); | |
| if (nameMatch && nameMatch[1]) { | |
| return nameMatch[1].trim(); | |
| } | |
| return null; | |
| } | |
| function extractGoals(input) { | |
| const goalsMatch = input.match(/Цели?:\s*(.*?)(?:\n|$)/i); | |
| if (goalsMatch && goalsMatch[1]) { | |
| return goalsMatch[1].trim().split(',').map(g => g.trim()); | |
| } | |
| return null; | |
| } | |
| function extractAudience(input) { | |
| const audienceMatch = input.match(/Аудитория:\s*(.*?)(?:\n|$)/i); | |
| if (audienceMatch && audienceMatch[1]) { | |
| return audienceMatch[1].trim(); | |
| } | |
| return null; | |
| } | |
| function extractPages(input) { | |
| const pagesMatch = input.match(/Страницы:\s*(.*?)(?:\n|$)/i); | |
| if (pagesMatch && pagesMatch[1]) { | |
| return pagesMatch[1].trim().split(',').map(p => p.trim()); | |
| } | |
| return null; | |
| } | |
| function extractFunctionality(input) { | |
| const funcMatch = input.match(/Функции?:\s*(.*?)(?:\n|$)/i); | |
| if (funcMatch && funcMatch[1]) { | |
| return funcMatch[1].trim().split(',').map(f => f.trim()); | |
| } | |
| return null; | |
| } | |
| function extractTechStack(input) { | |
| const stackMatch = input.match(/Стек:\s*(.*?)(?:\n|$)/i); | |
| if (stackMatch && stackMatch[1]) { | |
| return stackMatch[1].trim().split(',').map(s => s.trim()); | |
| } | |
| return null; | |
| } | |
| function extractDesign(input) { | |
| const designMatch = input.match(/Дизайн:\s*(.*?)(?:\n|$)/i); | |
| if (designMatch && designMatch[1]) { | |
| return designMatch[1].trim(); | |
| } | |
| return null; | |
| } | |
| function extractNonFunctional(input) { | |
| const nfMatch = input.match(/Нефункционально:\s*(.*?)(?:\n|$)/i); | |
| if (nfMatch && nfMatch[1]) { | |
| return nfMatch[1].trim().split(',').map(n => n.trim()); | |
| } | |
| return null; | |
| } | |
| function getDefaultProjectName(type) { | |
| const names = { | |
| landing: "Корпоративный лэндинг", | |
| ecommerce: "Интернет-магазин", | |
| saas: "SaaS приложение", | |
| portal: "Корпоративный портал", | |
| blog: "Медиа-платформа", | |
| dashboard: "Аналитический дашборд" | |
| }; | |
| return names[type] || "Веб-проект"; | |
| } | |
| function getDefaultGoals(type) { | |
| const goals = { | |
| landing: ["Генерация лидов", "Повышение узнаваемости бренда"], | |
| ecommerce: ["Увеличение конверсии", "Рост среднего чека"], | |
| saas: ["Привлечение подписчиков", "Удержание пользователей"], | |
| portal: ["Автоматизация процессов", "Централизация информации"], | |
| blog: ["Увеличение трафика", "Монетизация контента"], | |
| dashboard: ["Визуализация данных", "Автоматизация отчетности"] | |
| }; | |
| return goals[type] || ["Достижение бизнес-целей", "Удовлетворение потребностей пользователей"]; | |
| } | |
| function getDefaultAudience(type) { | |
| const audiences = { | |
| landing: "Потенциальные клиенты и партнеры", | |
| ecommerce: "Покупатели товаров/услуг", | |
| saas: "Малый и средний бизнес", | |
| portal: "Сотрудники компании", | |
| blog: "Целевая аудитория по тематике", | |
| dashboard: "Менеджеры и аналитики" | |
| }; | |
| return audiences[type] || "Целевые пользователи"; | |
| } | |
| function getDefaultPages(type) { | |
| const pages = { | |
| landing: ["/", "/services", "/about", "/contact"], | |
| ecommerce: ["/", "/catalog", "/product/:id", "/cart", "/checkout"], | |
| saas: ["/", "/pricing", "/features", "/login", "/dashboard"], | |
| portal: ["/", "/news", "/documents", "/contacts", "/profile"], | |
| blog: ["/", "/posts", "/categories", "/about", "/contact"], | |
| dashboard: ["/", "/login", "/dashboard", "/reports", "/settings"] | |
| }; | |
| return pages[type] || ["/", "/about", "/contact"]; | |
| } | |
| function getDefaultFunctionality(type) { | |
| const funcs = { | |
| landing: ["Форма обратной связи", "Галерея работ", "Отзывы клиентов"], | |
| ecommerce: ["Каталог товаров", "Корзина", "Онлайн-оплата"], | |
| saas: ["Многофакторная аутентификация", "Подписки", "API интеграции"], | |
| portal: ["Поиск по документам", "Календарь событий", "Чат"], | |
| blog: ["Система комментариев", "Поиск по статьям", "Подписка на новости"], | |
| dashboard: ["Графики и диаграммы", "Экспорт данных", "Уведомления"] | |
| }; | |
| return funcs[type] || ["Форма обратной связи", "Базовый контент"]; | |
| } | |
| function getDefaultTechStack(type, priority) { | |
| const baseStacks = { | |
| landing: ["Next.js", "TailwindCSS", "TypeScript"], | |
| ecommerce: ["Next.js", "TailwindCSS", "Node.js", "MongoDB"], | |
| saas: ["Next.js", "TailwindCSS", "FastAPI", "PostgreSQL"], | |
| portal: ["Next.js", "Material UI", "NestJS", "PostgreSQL"], | |
| blog: ["Next.js", "TailwindCSS", "Strapi", "MySQL"], | |
| dashboard: ["React", "Material UI", "Express", "MongoDB"] | |
| }; | |
| const base = baseStacks[type] || ["Next.js", "TailwindCSS", "TypeScript"]; | |
| if (priority === "performance") { | |
| base.push("Redis", "CDN", "Web Workers"); | |
| } else if (priority === "quality") { | |
| base.push("Storybook", "Cypress", "Jest"); | |
| } | |
| return base; | |
| } | |
| function getDefaultDesign(type) { | |
| const designs = { | |
| landing: "Чистый современный дизайн с акцентами на CTA", | |
| ecommerce: "Удобная навигация и быстрый доступ к корзине", | |
| saas: "Минималистичный интерфейс с акцентом на функционал", | |
| portal: "Корпоративный стиль с четкой структурой", | |
| blog: "Читабельный контент с хорошей типографикой", | |
| dashboard: "Функциональный интерфейс с информативными визуализациями" | |
| }; | |
| return designs[type] || "Современный адаптивный дизайн"; | |
| } | |
| function getDefaultNonFunctional(priority) { | |
| const base = ["Lighthouse ≥ 80", "Mobile-first", "HTTPS"]; | |
| if (priority === "performance") { | |
| base.push("Время загрузки <1s", "Кеширование ресурсов", "Оптимизация изображений"); | |
| } else if (priority === "quality") { | |
| base.push("100% покрытие типов", "ESLint + Prettier", "Документация API"); | |
| } | |
| return base; | |
| } | |
| function formatContextGoals(details) { | |
| return `• Project: ${details.projectName}\n` + | |
| `• Goals: ${details.goals.join(', ')}\n` + | |
| `• Audience: ${details.audience}\n` + | |
| `• Detail Level: ${details.detailLevel === 'basic' ? 'Basic' : details.detailLevel === 'detailed' ? 'Detailed' : 'Expert'}`; | |
| } | |
| function formatPagesRoutes(details) { | |
| return details.pages.map(page => { | |
| const pageName = page.replace(/^\//, '').replace(/:id/, '[id]') || 'home'; | |
| return `• ${page} → ${getPageDescription(pageName, details.projectType)}`; | |
| }).join('\n'); | |
| } | |
| function getPageDescription(page, projectType) { | |
| const descriptions = { | |
| landing: { | |
| home: "Hero section with CTA, features, testimonials", | |
| services: "List of services with descriptions", | |
| about: "Company info, team members", | |
| contact: "Contact form with map" | |
| }, | |
| ecommerce: { | |
| home: "Featured products, promotions", | |
| catalog: "Product grid with filters", | |
| product: "Product details, gallery, add to cart", | |
| cart: "Cart items, total, checkout button", | |
| checkout: "Order form, payment methods" | |
| }, | |
| saas: { | |
| home: "Value proposition, features", | |
| pricing: "Subscription plans comparison", | |
| features: "Detailed feature descriptions", | |
| login: "Auth form, password recovery", | |
| dashboard: "User workspace with widgets" | |
| } | |
| }; | |
| const defaultDesc = { | |
| home: "Main page with key information", | |
| about: "Information about the project", | |
| contact: "Contact information and form" | |
| }; | |
| return (descriptions[projectType] && descriptions[projectType][page]) || | |
| defaultDesc[page] || | |
| "Page with relevant content"; | |
| } | |
| function formatCoreFunctionality(details) { | |
| return details.functionality.map((func, i) => | |
| `• ${func}: ${getFunctionalityDescription(func, details.projectType)}` | |
| ).join('\n'); | |
| } | |
| function getFunctionalityDescription(func, projectType) { | |
| const descriptions = { | |
| "Форма обратной связи": "Secure submission with validation and notifications", | |
| "Каталог товаров": "Filterable grid with pagination and sorting", | |
| "Корзина": "Persistent cart with quantity adjustment", | |
| "Многофакторная аутентификация": "Email/SMS + password with JWT tokens", | |
| "Подписки": "Recurring payments with Stripe/PayPal", | |
| "Поиск по документам": "Full-text search with filters", | |
| "Система комментариев": "Nested threads with moderation", | |
| "Графики и диаграммы": "Interactive visualizations with Chart.js" | |
| }; | |
| return descriptions[func] || "Implementation according to requirements"; | |
| } | |
| function formatTechStack(details) { | |
| const { techStack } = details; | |
| const frontend = techStack.filter(t => | |
| t.includes('Next') || t.includes('React') || t.includes('Vue') || | |
| t.includes('Svelte') || t.includes('Tailwind') || t.includes('Material') | |
| ); | |
| const backend = techStack.filter(t => | |
| t.includes('Node') || t.includes('FastAPI') || t.includes('Nest') || | |
| t.includes('Express') || t.includes('Django') || t.includes('Laravel') | |
| ); | |
| const database = techStack.filter(t => | |
| t.includes('Mongo') || t.includes('Postgre') || t.includes('MySQL') || | |
| t.includes('SQL') || t.includes('Redis') | |
| ); | |
| const devops = techStack.filter(t => | |
| t.includes('Docker') || t.includes('Kubernetes') || t.includes('CI/CD') || | |
| t.includes('Vercel') || t.includes('Railway') || t.includes('AWS') | |
| ); | |
| return `• Frontend: ${frontend.join(', ') || 'Not specified'}\n` + | |
| `• Backend: ${backend.join(', ') || 'Not specified'}\n` + | |
| `• Database: ${database.join(', ') || 'Not specified'}\n` + | |
| `• DevOps: ${devops.join(', ') || 'Not specified'}\n` + | |
| `• Other: ${techStack.filter(t => | |
| !frontend.includes(t) && !backend.includes(t) && | |
| !database.includes(t) && !devops.includes(t) | |
| ).join(', ') || 'None'}`; | |
| } | |
| function formatUxUi(details) { | |
| return `• Design Style: ${details.design}\n` + | |
| `• Colors: Primary #6366f1, Secondary #8b5cf6\n` + | |
| `• Fonts: Inter (sans-serif), JetBrains Mono (monospace)\n` + | |
| `• Animations: ${details.projectType === 'landing' ? 'Scroll-triggered' : 'Subtle transitions'}\n` + | |
| `• Accessibility: WCAG 2.1 AA compliant`; | |
| } | |
| function formatNonFunctional(details) { | |
| return `• Performance: ${details.nonFunctional.join(', ')}\n` + | |
| `• Security: JWT auth, input sanitization, rate limiting\n` + | |
| `• Scalability: Horizontal scaling ready\n` + | |
| `• Maintainability: Clean architecture, documentation`; | |
| } | |
| function formatDeliverables(details) { | |
| return `• Code Repository: Full source code with commit history\n` + | |
| `• README: Setup instructions, architecture overview\n` + | |
| `• API Documentation: Swagger/OpenAPI specs\n` + | |
| `• Deployment: One-click deploy to Vercel + Railway\n` + | |
| `• Quality Report: Lighthouse scores, test coverage`; | |
| } | |
| function updateTechTags(techStack) { | |
| const colors = { | |
| 'Next.js': 'bg-blue-100 text-blue-800', | |
| 'React': 'bg-blue-100 text-blue-800', | |
| 'TailwindCSS': 'bg-cyan-100 text-cyan-800', | |
| 'TypeScript': 'bg-blue-100 text-blue-800', | |
| 'Node.js': 'bg-green-100 text-green-800', | |
| 'FastAPI': 'bg-yellow-100 text-yellow-800', | |
| 'PostgreSQL': 'bg-indigo-100 text-indigo-800', | |
| 'MongoDB': 'bg-green-100 text-green-800', | |
| 'Docker': 'bg-blue-100 text-blue-800', | |
| 'Vercel': 'bg-black text-white', | |
| 'Material UI': 'bg-purple-100 text-purple-800', | |
| 'NestJS': 'bg-red-100 text-red-800' | |
| }; | |
| const container = document.getElementById('tech-tags'); | |
| container.innerHTML = ''; | |
| techStack.forEach(tech => { | |
| const colorClass = colors[tech] || 'bg-gray-100 text-gray-800'; | |
| const tag = document.createElement('span'); | |
| tag.className = `tech-tag ${colorClass} px-3 py-1 rounded-full text-sm mb-2`; | |
| tag.textContent = tech; | |
| container.appendChild(tag); | |
| }); | |
| } | |
| function updateProjectStructure(projectType) { | |
| const structures = { | |
| landing: [ | |
| "/src", | |
| " /components", | |
| " /ui - Button, Card, Section", | |
| " /sections - Hero, Features, Testimonials", | |
| " /pages", | |
| " /public - images, fonts", | |
| " /styles - global.css" | |
| ], | |
| ecommerce: [ | |
| "/src", | |
| " /components", | |
| " /cart - CartItem, CartSummary", | |
| " /product - ProductCard, Gallery", | |
| " /pages", | |
| " /api - product routes", | |
| " /context - CartContext", | |
| " /hooks - useCart, useProducts" | |
| ], | |
| saas: [ | |
| "/src", | |
| " /components", | |
| " /auth - LoginForm, RegisterForm", | |
| " /dashboard - Widgets", | |
| " /pages", | |
| " /lib - API clients", | |
| " /store - Zustand stores", | |
| " /types - TypeScript definitions" | |
| ] | |
| }; | |
| const defaultStructure = [ | |
| "/src", | |
| " /components", | |
| " /pages", | |
| " /lib", | |
| " /styles", | |
| "/public" | |
| ]; | |
| const structure = structures[projectType] || defaultStructure; | |
| const container = document.getElementById('project-structure'); | |
| container.innerHTML = structure.map(line => | |
| `<div class="${line.startsWith(' ') ? 'ml-4' : ''}">${line}</div>` | |
| ).join(''); | |
| } | |
| function updateQualityMetrics(nonFunctional) { | |
| const container = document.getElementById('quality-metrics'); | |
| container.innerHTML = nonFunctional.map(metric => | |
| `<li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i> | |
| <span>${metric}</span> | |
| </li>` | |
| ).join(''); | |
| } | |
| function updateDeploymentOptions(techStack) { | |
| const options = []; | |
| if (techStack.includes('Vercel')) { | |
| options.push('Vercel (Frontend)'); | |
| } | |
| if (techStack.includes('Railway')) { | |
| options.push('Railway (Backend)'); | |
| } | |
| if (techStack.includes('Docker')) { | |
| options.push('Docker Containers'); | |
| } | |
| if (techStack.includes('AWS') || techStack.includes('GCP') || techStack.includes('Azure')) { | |
| options.push('Cloud Deployment'); | |
| } | |
| if (options.length === 0) { | |
| options.push('Vercel + Railway', 'Docker', 'Manual Setup'); | |
| } | |
| const container = document.getElementById('deployment-options'); | |
| container.innerHTML = options.map(option => | |
| `<li class="flex items-start"> | |
| <i class="fas fa-server text-indigo-600 mt-1 mr-2"></i> | |
| <span>${option}</span> | |
| </li>` | |
| ).join(''); | |
| } | |
| </script> | |
| <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=neuroseqa/webcoderai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |