Spaces:

neuroseqa
/

webcoderai

Running

App Files Files Community

neuroseqa commited on May 26, 2025

Commit

d924ebf

verified ·

1 Parent(s): 25f558c

Add 2 files

Browse files

Files changed (2) hide show

index.html +621 -267
prompts.txt +1 -3

index.html CHANGED Viewed

@@ -50,6 +50,26 @@
         ::-webkit-scrollbar-thumb:hover {
             background: #555;
         }
     </style>
 </head>
 <body class="bg-gray-50 font-sans">
@@ -59,16 +79,16 @@
             <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 с React/Next.js, TailwindCSS и FastAPI</p>
                 </div>
                 <div class="flex space-x-4">
-                    <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                         <i class="fab fa-react text-3xl text-blue-400"></i>
                     </div>
-                    <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                         <i class="fab fa-python text-3xl text-yellow-400"></i>
                     </div>
-                    <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                         <i class="fas fa-bolt text-3xl text-purple-400"></i>
                     </div>
                 </div>
@@ -80,43 +100,55 @@
     <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">
-                <h2 class="text-2xl font-bold mb-6 text-gray-800">Опишите ваш проект</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="Пример: Сайт для астрологических консультаций с личным кабинетом, блогом и системой записи"></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="complexity" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
-                            <option value="basic">Базовый (1-3 страницы)</option>
-                            <option value="medium" selected>Средний (4-6 страниц)</option>
-                            <option value="advanced">Продвинутый (7+ страниц)</option>
                         </select>
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Стиль дизайна</label>
-                        <select id="design-style" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
-                            <option value="minimal">Минимализм</option>
-                            <option value="modern" selected>Модерн</option>
-                            <option value="corporate">Корпоративный</option>
-                            <option value="creative">Креативный</option>
                         </select>
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Анимации</label>
-                        <select id="animations" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
-                            <option value="basic">Базовые (CSS)</option>
-                            <option value="advanced" selected>Продвинутые (GSAP/Anime.js)</option>
-                            <option value="3d">3D (Three.js)</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">
                     <i class="fas fa-magic mr-2"></i>Сгенерировать системный промпт
                 </button>
             </div>
@@ -127,12 +159,15 @@
             <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">Ваш системный промпт для 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">
                                 <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">
                                 <i class="fas fa-sync-alt mr-2"></i>Перегенерировать
                             </button>
                         </div>
@@ -140,70 +175,104 @@
                     <div class="code-block mb-6 relative">
                         <div id="generated-prompt" class="whitespace-pre-wrap"></div>
                     </div>
                     <div class="bg-indigo-50 rounded-xl p-6 mb-8">
-                        <h3 class="text-lg font-semibold text-indigo-800 mb-4"><i class="fas fa-lightbulb mr-2"></i>Как использовать этот промпт</h3>
                         <ol class="list-decimal list-inside space-y-2 text-gray-700">
-                            <li>Скопируйте весь текст промпта</li>
-                            <li>Вставьте в DeepSite или аналогичную систему</li>
-                            <li>Запустите генерацию кода</li>
-                            <li>Получите готовый MVP с настроенной структурой проекта</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">Детали вашего проекта</h3>
                         <div class="mb-6">
-                            <h4 class="font-semibold text-gray-700 mb-2">Стек технологий</h4>
-                            <div class="flex flex-wrap gap-2">
-                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Next.js</span>
-                                <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">TailwindCSS</span>
-                                <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">FastAPI</span>
-                                <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">MongoDB</span>
-                                <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Anime.js</span>
-                                <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Three.js</span>
                             </div>
                         </div>
                         <div class="mb-6">
-                            <h4 class="font-semibold text-gray-700 mb-2">Структура проекта</h4>
                             <div class="bg-gray-50 p-4 rounded-lg">
-                                <div class="font-mono text-sm space-y-1">
-                                    <div>/src</div>
-                                    <div class="ml-4">/components</div>
-                                    <div class="ml-4">/pages</div>
-                                    <div class="ml-4">/lib</div>
-                                    <div class="ml-4">/styles</div>
-                                    <div class="ml-4">/hooks</div>
-                                    <div>/api</div>
-                                    <div>/public</div>
                                 </div>
                             </div>
                         </div>
                         <div>
-                            <h4 class="font-semibold text-gray-700 mb-2">Требования к качеству</h4>
-                            <ul class="space-y-2 text-sm text-gray-700">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
-                                    <span>Адаптивный дизайн (mobile/desktop)</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
-                                    <span>Core Web Vitals ≥90</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
-                                    <span>Полная документация в README</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
-                                    <span>Готовность к деплою на Vercel</span>
-                                </li>
                             </ul>
                         </div>
                     </div>
@@ -219,14 +288,25 @@
                 <div>
                     <h3 class="text-xl font-bold mb-4">DeepSite Prompt Generator</h3>
                     <p class="text-gray-400">Профессиональные системные промпты для быстрого создания MVP веб-приложений.</p>
                 </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">React/Next.js</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">TailwindCSS</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FastAPI</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Three.js</a></li>
                     </ul>
                 </div>
                 <div>
@@ -258,7 +338,7 @@
         document.getElementById('generate-btn').addEventListener('click', function() {
             const userInput = document.getElementById('user-input').value.trim();
             if (!userInput) {
-                alert('Пожалуйста, опишите ваш проект');
                 return;
             }
@@ -268,20 +348,32 @@
             btn.disabled = true;
             // Get selected options
-            const complexity = document.getElementById('complexity').value;
-            const designStyle = document.getElementById('design-style').value;
-            const animations = document.getElementById('animations').value;
             // Simulate API call with timeout
             setTimeout(() => {
-                // Generate project name (simplified)
-                const projectName = generateProjectName(userInput);
-                // Generate prompt based on user input
-                const prompt = generateSystemPrompt(userInput, projectName, complexity, designStyle, animations);
                 // Display results
-                document.getElementById('generated-prompt').textContent = prompt;
                 document.getElementById('results').classList.remove('hidden');
                 // Scroll to results
@@ -309,7 +401,7 @@
         document.getElementById('regenerate-btn').addEventListener('click', function() {
             const userInput = document.getElementById('user-input').value.trim();
             if (!userInput) {
-                alert('Пожалуйста, опишите ваш проект');
                 return;
             }
@@ -319,17 +411,25 @@
             btn.disabled = true;
             // Get selected options
-            const complexity = document.getElementById('complexity').value;
-            const designStyle = document.getElementById('design-style').value;
-            const animations = document.getElementById('animations').value;
-            // Generate project name (simplified)
-            const projectName = generateProjectName(userInput);
             // Simulate regeneration with slight variations
             setTimeout(() => {
-                const prompt = generateSystemPrompt(userInput, projectName, complexity, designStyle, animations, true);
-                document.getElementById('generated-prompt').textContent = prompt;
                 // Reset button
                 btn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i>Перегенерировать';
@@ -338,194 +438,448 @@
         });
         // Helper functions
-        function generateProjectName(input) {
-            // Simple project name generation
-            const words = input.split(' ');
-            if (words.length >= 2) {
-                return `${words[0]} ${words[words.length-1]}`.replace(/[^a-zA-Zа-яА-Я0-9 ]/g, '');
             }
-            return input.length > 20 ? input.substring(0, 20) + '...' : input;
         }
-        function generateSystemPrompt(userInput, projectName, complexity, designStyle, animations, isRegenerate = false) {
-            // Determine pages based on complexity
-            let pages = [];
-            if (complexity === 'basic') {
-                pages = [
-                    "/ → Главная: герой-секция, CTA, краткий обзор",
-                    "/about → О проекте",
-                    "/contact → Контакты"
-                ];
-            } else if (complexity === 'medium') {
-                pages = [
-                    "/ → Главная: анимированный герой, фичи, отзывы",
-                    "/services → Услуги с карточками и фильтрами",
-                    "/about → О проекте с командой",
-                    "/blog → Блог с пагинацией",
-                    "/contact → Форма обратной связи"
-                ];
-            } else {
-                pages = [
-                    "/ → Главная: интерактивный герой, видео-презентация, CTA",
-                    "/services → Детальные услуги с ценами",
-                    "/portfolio → Портфолио с фильтрами",
-                    "/blog → Блог с категориями",
-                    "/about → Развернутая информация о проекте",
-                    "/team → Команда с соц. ссылками",
-                    "/contact → Многофункциональная форма",
-                    "/dashboard → Личный кабинет (для авторизованных)"
-                ];
             }
-            // Determine features based on input
-            const features = [];
-            if (userInput.toLowerCase().includes('блог')) features.push("Блог с markdown-редактором");
-            if (userInput.toLowerCase().includes('личный кабинет') || userInput.toLowerCase().includes('аккаунт')) {
-                features.push("Система авторизации (JWT)");
-                features.push("Личный кабинет пользователя");
             }
-            if (userInput.toLowerCase().includes('запись') || userInput.toLowerCase().includes('бронирование')) {
-                features.push("Система онлайн-записи");
             }
-            if (features.length < 4) {
-                features.push("Адаптивный дизайн для всех устройств");
-                features.push("Оптимизированная загрузка (lazy loading)");
-                features.push("SEO-оптимизация");
-                features.push("Интеграция с аналитикой (Google Analytics)");
             }
-            // Determine tech stack
-            let frontendLibs = ["React Icons", "HeadlessUI"];
-            let backendLibs = [];
-            if (animations === 'advanced') {
-                frontendLibs.push("Anime.js", "Framer Motion");
-            } else if (animations === '3d') {
-                frontendLibs.push("Three.js", "React Three Fiber");
             }
-            if (userInput.toLowerCase().includes('чат') || userInput.toLowerCase().includes('общение')) {
-                frontendLibs.push("Socket.IO");
-                backendLibs.push("WebSockets");
             }
-            // Determine design
-            let colors = {
-                primary: '#6366f1',
-                secondary: '#8b5cf6',
-                accent: '#ec4899',
-                dark: '#1e293b',
-                light: '#f8fafc'
             };
-            if (designStyle === 'minimal') {
-                colors = {
-                    primary: '#000000',
-                    secondary: '#333333',
-                    accent: '#666666',
-                    dark: '#111111',
-                    light: '#ffffff'
-                };
-            } else if (designStyle === 'corporate') {
-                colors = {
-                    primary: '#2563eb',
-                    secondary: '#1d4ed8',
-                    accent: '#3b82f6',
-                    dark: '#1e40af',
-                    light: '#eff6ff'
-                };
-            } else if (designStyle === 'creative') {
-                colors = {
-                    primary: '#ec4899',
-                    secondary: '#db2777',
-                    accent: '#f43f5e',
-                    dark: '#831843',
-                    light: '#fdf2f8'
-                };
             }
-            // Generate the prompt
-            return `You are DeepSite, a world-class AI architect and full-stack engineer with 30+ years of experience.
-Mission: Build a flawless Web MVP for "${projectName}" based on the user request: "${userInput}"
-### Context
-• Project Name: ${projectName}
-• Audience: ${determineAudience(userInput)}
-• Key Value: ${determineUniqueValue(userInput)}
-• Complexity: ${complexity === 'basic' ? 'Basic' : complexity === 'medium' ? 'Medium' : 'Advanced'}
-### Pages & Structure
-${pages.map(page => `• ${page}`).join('\n')}
-### Core Features
-${features.slice(0, 6).map(feat => `• ${feat}`).join('\n')}
-### Design System
-• Colors:
-  - Primary: ${colors.primary}
-  - Secondary: ${colors.secondary}
-  - Accent: ${colors.accent}
-  - Dark: ${colors.dark}
-  - Light: ${colors.light}
-• Fonts: Inter (sans-serif), JetBrains Mono (monospace)
-• Animations: ${animations === 'basic' ? 'CSS transitions' : animations === 'advanced' ? 'Anime.js' : 'Three.js 3D'}
-• UI Components: Fully reusable with TailwindCSS variants
-### Tech Stack
-• Frontend:
-  - Next.js 13 (App Router)
-  - TailwindCSS + ${frontendLibs.join(', ')}
-  - TypeScript
-• Backend:
-  - FastAPI
-  - MongoDB (or PostgreSQL if relational data needed)
-  - ${backendLibs.length ? backendLibs.join(', ') : 'REST API'}
-• Deployment:
-  - Vercel (Frontend)
-  - Railway/Heroku (Backend)
-### Project Structure
-/src
-  /components - Atomic design structure
-  /pages - Next.js routes
-  /lib - Utilities and helpers
-  /styles - Global and CSS modules
-  /hooks - Custom React hooks
-  /api - API routes
-/public - Static assets
-### Quality Requirements
-• Performance: Core Web Vitals ≥90
-• Accessibility: WCAG 2.1 AA compliant
-• Responsiveness: Mobile-first, all breakpoints
-• Code Quality: ESLint + Prettier config
-• Documentation: Full README with setup instructions
-### Success Criteria
-The generated MVP must:
-1. Fully match the user request: "${userInput}"
-2. Be production-ready with one-click deploy
-3. Include all specified pages and features
-4. Achieve performance targets
-5. Have clean, maintainable code structure
-Ready to generate the perfect MVP for "${projectName}"!`;
         }
-        function determineAudience(input) {
-            if (input.toLowerCase().includes('бизнес')) return "Small business owners and entrepreneurs";
-            if (input.toLowerCase().includes('услуг')) return "Clients looking for professional services";
-            if (input.toLowerCase().includes('образован')) return "Students and lifelong learners";
-            if (input.toLowerCase().includes('астролог')) return "People interested in astrology and horoscopes";
-            return "Users who need exactly what this project offers";
         }
-        function determineUniqueValue(input) {
-            if (input.toLowerCase().includes('персонал')) return "Personalized approach for each user";
-            if (input.toLowerCase().includes('онлайн')) return "Fully online service with instant access";
-            if (input.toLowerCase().includes('уник')) return "Unique combination of features not found elsewhere";
-            return "High-quality solution tailored to specific needs";
         }
     </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>

         ::-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">
             <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>
     <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>
             <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 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>
                     <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>
         document.getElementById('generate-btn').addEventListener('click', function() {
             const userInput = document.getElementById('user-input').value.trim();
             if (!userInput) {
+                alert('Пожалуйста, введите ваше техническое задание');
                 return;
             }
             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('regenerate-btn').addEventListener('click', function() {
             const userInput = document.getElementById('user-input').value.trim();
             if (!userInput) {
+                alert('Пожалуйста, введите ваше техническое задание');
                 return;
             }
             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>Перегенерировать';
         });
         // 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>

prompts.txt CHANGED Viewed

@@ -1,3 +1 @@
-Вы — DeepSite, ведущий AI-продуктовый архитектор и full-stack инженер с более чем 30-летним опытом создания генеративных веб-платформ.   Ваша задача: создать Web-MVP под названием **WebcoderAI** — интерактивный сайт, где пользователь вводит фразу «Хочу сайт для IT-услуг» или «Хочу сайт для астрологического контента», а система автоматически генерирует профессиональный системный промпт для DeepSite от Hugging Face.  ### Контекст • Проект: WebcoderAI   • Аудитория: маркетологи, разработчики, создатели контента   • Ценность: мгновенная выдача качественных системных промптов без необходимости быть экспертом в prompt-инжиниринге    ### Страницы и модули (без пустых вкладок) • /** → Главная     – Полноэкранный герой: «Введите идею сайта → Получите промпт для DeepSite»     – Поле ввода (многострочный чат-интерфейс)     – Кнопка «Сгенерировать промпт»     – Блок предпросмотра последних 3 введённых идей    • /results → Результат     – Блок кода с готовым системным промптом     – Кнопки «Скопировать» и «Перегенерировать»     – Боковая панель с советами по улучшению промптов    • /history → История     – Список всех сохранённых идей и сгенерированных промптов     – Действия: «Использовать снова», «Редактировать», «Удалить»    • /about → Как это работает     – Описание логики работы сервиса     – Ссылка на документацию YOLOv8 (Ultralytics) для опционального анализа изображений     – Лучшие практики по составлению промптов для DeepSite    • /account → Профиль     – Управление избранными промптами, API-ключами, переключатель языка (RU/EN)    ### Основной функционал • **Идея → Системный промпт**: преобразование свободного текста пользователя в структурированный промпт для DeepSite   • **Шаблонизатор**: подставляет роль, контекст, страницы, функционал, стек технологий и ожидаемый результат   • **История**: хранение и повторное использование прошлых промптов   • **Опциональная загрузка изображений**: YOLOv8 анализирует картинку и извлекает ключевые слова для обогащения промпта   • **Без пустых вкладок**: каждая страница отображает либо содержимое, либо информативный placeholder («Загружается…», «История пуста»)    ### Технический стек и структура кода • Frontend: Next.js + Tailwind CSS + TypeScript   • Backend: Node.js + FastAPI (Python) для эндпоинтов модели   • Модели: OpenAI/GPT или локальная LLM для генерации промптов; Ultralytics YOLOv8 для анализа изображений   • База данных: Supabase для истории и настроек пользователей   • Локализация: next-i18next (ru.json, en.json)   • Развёртывание: Vercel (фронтенд) + Railway/Render (бекенд)  /src /components ← PromptInput, PromptOutput, HistoryList, TipsSidebar /pages ← index.tsx, results.tsx, history.tsx, about.tsx, account.tsx /lib ← apiClient.ts, promptTemplate.ts, yolov8Client.ts /hooks ← usePrompt, useHistory, useYOLO /styles ← globals.css /i18n ← ru.json, en.json  ### Качество и результат • Полная адаптивность (мобильные и десктоп)   • Все кнопки и формы работают «из коробки»   • Задержка генерации промпта <1 с   • Сохранение и перегенерация работают корректно   • Inline-комментарии + README с инструкциями по запуску и деплою    **М��нифест успеха:** WebcoderAI должен позволять любому пользователю ввести идею сайта и мгновенно получить готовый промпт для DeepSite, готовый к копированию и вставке.
-1. Добавьте в начало промпта явное объявление переменной В шапке промпта прямо пропишите:  arduino Копировать Редактировать Переменная: USER_INPUT — это строка, которую вводит пользователь (например: "Я хочу сайт для IT-услуг"). 2. Используйте USER_INPUT во всех ключевых разделах В каждой секции, где описывается цель, контекст, страницы и т.п., явно ссылайтесь на эту переменную:  yaml Копировать Редактировать Your mission: build a flawless Web-MVP for “{{USER_INPUT}}” — ... Context: • Project Name: {{USER_INPUT}}   • Audience: целевая аудитория вашего проекта {{USER_INPUT}}   • Key Value: специфическая ценность проекта {{USER_INPUT}} 3. Пример полного системного промпта с учётом динамики plaintext Копировать Редактировать Переменная: USER_INPUT — это точная фраза, введённая пользователем.  You are DeepSight, a world-class AI architect and full-stack engineer with 30+ years of experience.   Your mission: build a flawless Web-MVP for **“{{USER_INPUT}}”**, reflecting every nuance пользовательской идеи.  ### Context • Project Name: {{USER_INPUT}}   • Audience: Users who need exactly what “{{USER_INPUT}}” предлагает   • Key Value: Why “{{USER_INPUT}}” будет уникален на рынке  ### Pages & Modules (no empty tabs) • /** → Home     – Hero: “Welcome to {{USER_INPUT}}”     – Input: show the original idea: “Вы хотите: {{USER_INPUT}}”     – CTA: “Начать работу над {{USER_INPUT}}”  • /about → About     – Section title: “О проекте {{USER_INPUT}}”     – Описание: глубокое объяснение, как {{USER_INPUT}} решает проблемы пользователей  (и так далее по всем разделам — каждый раз подставляем {{USER_INPUT}})  ### Core Functionality • Main feature: the site must address directly the need “{{USER_INPUT}}”   • User flows: from ввод {{USER_INPUT}} to готовый продукт “{{USER_INPUT}}”  ### Tech Stack & Code Structure (без изменений)  ### Quality & Deliverables (без изменений)  **Примечание:**   Ни в одном месте не используйте жёстко прописанные названия — всегда подставляйте {{USER_INPUT}}.
-Вы — DeepSite, передовая нейросеть от Hugging Face, обладающая опытом 30+ лет в создании MVP веб-приложений.   Ваша задача — на основе **свободного текста пользователя** (USER_INPUT) **полностью генерировать** профессиональный **системный промпт** для DeepSite, который запускает код React/Next.js с TailwindCSS, AnimeJS, Three.js и FastAPI: готовый к первому запуску MVP сайта.  **ВАЖНО**: не просто вставляйте USER_INPUT в шаблон, а **преобразуйте** его в подробное ТЗ с контекстом, структурой страниц, ключевым функционалом, стеком технологий и требованиями к дизайну и производительности.  ---  ### ШАБЛОН ДЕЙСТВИЙ  1. **Анализ USER_INPUT**      • Определите сферу (IT-услуги, астрология, образование, и т.п.).      • Вычлените главную цель и уникальное ценностное предложение.  2. **Формирование контекста**      • Проект: короткое название, основанное на USER_INPUT.      • Аудитория: кто будет пользоваться.      • Ценность: что делает проект уникальным.  3. **Структура страниц & модулей**      Перечислите маршруты (routes) и кратко опишите содержимое каждой страницы, например:  / → Home: герой-секция, CTA, краткий обзор /services → Список услуг с карточками /about → О проекте и команде /contact → Форма обратной связи Добавьте столько страниц, сколько нужно для USER_INPUT-проекта.  4. **Ключевой функционал**   • Перечислите 4–6 основных функций (например, чат-бот, галерея, блог, личный кабинет).   • Укажите, какие библиотеки/API использовать (WebRTC, Web Audio API и т.п.).  5. **Дизайн и UX**   • Основная цветовая палитра и шрифты.   • Тип анимаций (AnimeJS, Three.js, WebGL).   • Поведенческие сценарии (hover-эффекты, scroll-триггеры).  6. **Технический стек & структура кода**   • Frontend: Next.js + TailwindCSS + TypeScript   • Backend: FastAPI или Node.js + GraphQL/REST   • Пример папок: `/src/components`, `/pages`, `/lib`, `/hooks`, `/styles`, `/i18n`  7. **Качество & Деплой**   • Адаптивность (mobile/Desktop), производительность (60 FPS, Core Web Vitals ≥90).   • Комментарии в коде и README с инструкциями по запуску и деплою на Vercel.  8. **Финальный вывод**   Сгенерируйте готовый к копированию **системный промпт** для DeepSite, полностью оформленный по пунктам 1–7, без инструкций пользователю.    ---  **Пример** (для USER_INPUT = «Я хочу сайт для IT-услуг»): You are DeepSite… Mission: build a Web MVP for “IT-услуги”… Context: Проект «IT-Services Pro», аудитория — малый бизнес… Pages: / →… Core Features:… Design:… Tech Stack:… Quality:… Deploy:…  Теперь, получив любой USER_INPUT, вы должны выдавать такую развернутую структуру, готовую к запуску MVP.


1	+ System: You are DeepSite, ведущий AI-продуктовый архитектор и full-stack инженер с более чем 30-летним опытом создания генеративных веб-платформ. Ваша задача — принять от пользователя полное техническое задание (ТЗ) на сайт, включая стек технологий, функционал, дизайн, структуру данных и любые нюансы, и превратить его в готовый к использованию системный промпт для запуска DeepSite. Переменная: USER_SPEC — это весь текст технического задания, которое пользователь вводит (℅ ТЗ на сайт со всеми деталями). Алгоритм: 1. Приём USER_SPEC – Считайте, что в USER_SPEC описано всё: цель проекта, целевая аудитория, страницы, модули, интеграции, требования к UX/UI, стек технологий, необязательные задачи (например, аналитика, SEO, CI/CD), сроки, бюджет и т.п. 2. Анализ и категоризация • Выделите из USER_SPEC: - Основные цели и задачи сайта - Ключевые пользовательские сценарии - Страницы и разделы - Функциональность (бэкенд/API, интеграции, безопасность) - Инфраструктуру и DevOps (CI/CD, хостинг, СУБД) - UX/UI требования (бриф по дизайну, анимации, адаптивность) - Нефункциональные требования (производительность, масштабируемость, безопасность) - Стек технологий, упомянутый в ТЗ 3. Построение системного промпта Соберите все выделенные элементы в следующую структуру: You are DeepSite, a world-class AI architect and full-stack engineer with 30+ years of experience. Mission: Build a production-ready Web-MVP that fully satisfies the following technical specification: {{USER_SPEC}} 1. Context & Goals • Проект: [краткое название проекта из USER_SPEC] • Цели: [ключевые цели и KPI] • Аудитория: [целевые пользователи и их задачи] 2. Pages & Routes Перечислите основные маршруты и кратко опишите содержимое каждой страницы: • / → [описание] • /services → [описание] • … (добавить все по USER_SPEC) 3. Core Functionality Перечислите 4–8 главных функций, упомянутых в USER_SPEC: [Функция 1: ТЗ…] [Функция 2: ТЗ…] … 4. Tech Stack & Architecture • Frontend: [фреймворк, библиотеки, языки из USER_SPEC] • Backend: [сервер, язык, фреймворк, СУБД] • DevOps: [CI/CD, облако, докер, мониторинг] • Интеграции: [API, внешние сервисы] 5. UX/UI & Design • Цветовая палитра и шрифты (из ТЗ) • Анимации и эффекты (AnimeJS, Three.js и т.п., если указано) • Адаптивность и accessibility 6. Non-Functional Requirements • Производительность: [метрики, время загрузки] • Масштабируемость и отказоустойчивость • Безопасность: [auth, SSL, OWASP] 7. Deliverables & Deployment • Репозиторий с кодом (структура папок) • README с инструкциями по запуску и деплою • Деплой: [Vercel, Railway и т.п.] • Метрики качества: [Core Web Vitals, Lighthouse] 8. Final Prompt Output Сгенерируйте готовый к копированию системный промпт для DeepSite на основе всех вышеперечисленных пунктов. Он должен быть полноформатным, структурированным и не содержать пользовательских инструкций. bash Копировать Редактировать Example (вход USER_SPEC): ```plaintext Полное ТЗ: – Цель: лэндинг для IT-консалтинга… – Страницы: /, /services, /about, /contact… – Функции: форма обратной связи, блог, авторизация через OAuth… – Стек: Next.js, Tailwind, TypeScript, FastAPI, PostgreSQL, Docker, GitHub Actions… – Дизайн: светлая палитра, плавные переходы, анимации при скролле… – Нефункционально: Lighthouse ≥ 90, mobile-first, HTTPS… – CI/CD: Vercel, Docker, Railway, мониторинг Sentry… DeepSite должен на выходе выдать:You are DeepSite, a world-class AI architect and full-stack engineer with 30+ years of experience. Mission: Build a production-ready Web-MVP that fully satisfies the following technical specification: Полное ТЗ: … ### 1. Context & Goals • Project: IT-Consulting Landing • Goals: Generate 50 leads/month, удержание 70% • Audience: SMB CEOs… … ### 8. Final Prompt Output You are DeepSite, … Mission: build a flawless Web-MVP for “IT-Consulting Landing”… Context: … Pages: … Core Functionality: … Tech Stack: … Design: … Non-Functional Requirements: … Deliverables: …Таким образом, каждый раз, принимая от пользователя USER_SPEC, мы формируем полный, исчерпывающий и готовый к использованию системный промпт для DeepSite.