Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on 23 days ago

Commit

2e145cf

verified ·

1 Parent(s): 7346e6e

Update index.html

Browse files

Files changed (1) hide show

index.html +375 -352

index.html CHANGED Viewed

@@ -1,361 +1,384 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Prompt Generator & Launcher</title>
-    <style>
-        :root {
-            --primary: #4F46E5;
-            --primary-hover: #4338ca;
-            --bg: #F3F4F6;
-            --card-bg: #ffffff;
-            --text: #1F2937;
-            --border: #D1D5DB;
-        }
-        body {
-            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-            background-color: var(--bg);
-            color: var(--text);
-            margin: 0;
-            padding: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
-        .container {
-            background-color: var(--card-bg);
-            width: 100%;
-            max-width: 600px;
-            padding: 30px;
-            border-radius: 16px;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-        }
-        h1 {
-            text-align: center;
-            color: var(--primary);
-            margin-top: 0;
-            margin-bottom: 5px;
-            font-size: 1.8rem;
-        }
-        p.subtitle {
-            text-align: center;
-            color: #6B7280;
-            margin-bottom: 25px;
-            font-size: 0.95rem;
-        }
-        .form-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-        }
-        .full-width {
-            grid-column: span 2;
-        }
-        .form-group {
-            display: flex;
-            flex-direction: column;
-        }
-        label {
-            font-weight: 600;
-            margin-bottom: 6px;
-            font-size: 0.9rem;
-            color: #374151;
-        }
-        select, textarea, input {
-            padding: 10px 12px;
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            font-size: 1rem;
-            background-color: #fff;
-            transition: border-color 0.2s, box-shadow 0.2s;
-            outline: none;
-        }
-        select:focus, textarea:focus {
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
-        }
-        textarea {
-            resize: vertical;
-            min-height: 80px;
-            font-family: inherit;
-        }
-        .btn-container {
-            margin-top: 25px;
-            text-align: center;
-        }
-        .action-btn {
-            background-color: var(--primary);
-            color: white;
-            border: none;
-            padding: 14px 28px;
-            font-size: 1.1rem;
-            font-weight: bold;
-            border-radius: 10px;
-            cursor: pointer;
-            width: 100%;
-            transition: background-color 0.2s, transform 0.1s;
-            box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 10px;
-        }
-        .action-btn:hover {
-            background-color: var(--primary-hover);
-            transform: translateY(-1px);
-        }
-        .action-btn:active {
-            transform: translateY(1px);
-        }
-        /* Адаптивность для мобильных */
-        @media (max-width: 500px) {
-            .form-grid {
-                grid-template-columns: 1fr;
-            }
-            .full-width {
-                grid-column: span 1;
-            }
-            .container {
-                padding: 20px;
-            }
-        }
-    </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Генератор Персонажа</h1>
-        <p class="subtitle">Настройте параметры, скопируйте JSON и перейдите в редактор</p>
-        <form id="promptForm">
-            <div class="form-grid">
-                <!-- Пол -->
-                <div class="form-group">
-                    <label for="gender">Пол</label>
-                    <select id="gender">
-                        <option value="Female">Женщина</option>
-                        <option value="Male">Мужчина</option>
-                    </select>
-                </div>
-                <!-- Возраст -->
-                <div class="form-group">
-                    <label for="age">Возраст</label>
-                    <select id="age">
-                        <option value="Newborn (0-1 year)">Младенец (0-1)</option>
-                        <option value="Toddler (1-3 years)">Малыш (1-3)</option>
-                        <option value="Child (4-9 years)">Ребенок (4-9)</option>
-                        <option value="Preteen (10-12 years)">Ребенок (10-12)</option>
-                        <option value="Teenager (13-19 years)">Подросток (13-19)</option>
-                        <option value="Young Adult (20-29 years)">20-29 лет</option>
-                        <option value="Adult (30-39 years)">30-39 лет</option>
-                        <option value="Middle-aged (40-49 years)">40-49 лет</option>
-                        <option value="Mature (50-59 years)">50-59 лет</option>
-                        <option value="Elderly (60-69 years)">60-69 лет</option>
-                        <option value="Senior (70+ years)">70+ лет</option>
-                    </select>
-                </div>
-                <!-- Национальность -->
-                <div class="form-group">
-                    <label for="nationality">Национальность</label>
-                    <select id="nationality">
-                        <option value="European">Европейская</option>
-                        <option value="Slavic">Славянская</option>
-                        <option value="Asian">Азиатская</option>
-                        <option value="African">Африканская</option>
-                        <option value="African American">Афроамериканская</option>
-                        <option value="Latino">Латиноамериканская</option>
-                        <option value="Indian">Индийская</option>
-                        <option value="Middle Eastern">Ближневосточная</option>
-                        <option value="Nordic">Скандинавская</option>
-                        <option value="Mixed Race">Смешанная</option>
-                    </select>
-                </div>
-                <!-- Фигура -->
-                <div class="form-group">
-                    <label for="bodyType">Фигура</label>
-                    <select id="bodyType">
-                        <option value="Slim">Стройная</option>
-                        <option value="Athletic">Спортивная</option>
-                        <option value="Average">Обычная</option>
-                        <option value="Muscular">Мускулистая</option>
-                        <option value="Curvy">Пышная (Curvy)</option>
-                        <option value="Plus Size">Полная (Plus Size)</option>
-                        <option value="Skinny">Очень худая</option>
-                    </select>
-                </div>
-                <!-- Волосы -->
-                <div class="form-group">
-                    <label for="hairColor">Цвет волос</label>
-                    <select id="hairColor">
-                        <option value="Brown">Каштановые</option>
-                        <option value="Blonde">Блонд</option>
-                        <option value="Black">Черные</option>
-                        <option value="Red">Рыжие</option>
-                        <option value="Grey">Седые</option>
-                        <option value="White">Белые</option>
-                        <option value="Dyed Pink">Розовые</option>
-                        <option value="Dyed Blue">Синие</option>
-                        <option value="Bald">Лысый</option>
-                    </select>
-                </div>
-                <!-- Прическа -->
-                <div class="form-group">
-                    <label for="hairstyle">Прическа</label>
-                    <select id="hairstyle">
-                        <option value="Long straight">Длинные прямые</option>
-                        <option value="Wavy">Волнистые</option>
-                        <option value="Curly">Кудрявые</option>
-                        <option value="Bob cut">Каре</option>
-                        <option value="Short cut">Короткая стрижка</option>
-                        <option value="Ponytail">Хвост</option>
-                        <option value="Bun">Пучок</option>
-                        <option value="Braids">Косички</option>
-                        <option value="Dreadlocks">Дреды</option>
-                        <option value="Bald">Налысо</option>
-                    </select>
-                </div>
-                <!-- Глаза -->
-                <div class="form-group">
-                    <label for="eyeColor">Цвет глаз</label>
-                    <select id="eyeColor">
-                        <option value="Brown">Карие</option>
-                        <option value="Blue">Голубые</option>
-                        <option value="Green">Зеленые</option>
-                        <option value="Grey">Серые</option>
-                        <option value="Hazel">Ореховые</option>
-                        <option value="Heterochromia">Разные (Гетерохромия)</option>
-                    </select>
-                </div>
-                <!-- Стиль -->
-                <div class="form-group">
-                    <label for="style">Стиль фото</label>
-                    <select id="style">
-                        <option value="Professional Studio Portrait">Студийный портрет</option>
-                        <option value="Cinematic Lighting">Кинематографичный</option>
-                        <option value="Candid Street Photography">Уличное фото</option>
-                        <option value="Artistic Creative">Творческий / Арт</option>
-                        <option value="Cyberpunk Neon">Киберпанк / Неон</option>
-                        <option value="Black and White">Чёрно-белое</option>
-                        <option value="Vintage Polaroid">Винтаж / Полароид</option>
-                        <option value="Fashion Editorial">Фэшн (Журнальный)</option>
-                        <option value="Corporate Headshot">Бизнес портрет</option>
-                        <option value="Fantasy">Фэнтези</option>
-                        <option value="Anime Style">Аниме стиль</option>
-                    </select>
-                </div>
-                <!-- Доп инфо -->
-                <div class="form-group full-width">
-                    <label for="additional">Дополнительные пожелания</label>
-                    <textarea id="additional" placeholder="Опишите одежду, локацию, освещение или эмоции (например: в красном костюме, смеется, на фоне Эйфелевой башни)"></textarea>
-                </div>
-            </div>
-            <div class="btn-container">
-                <button type="button" class="action-btn" onclick="processAndOpen()">
-                    <span>СКОПИРОВАТЬ И ОТКРЫТЬ САЙТ</span>
-                    <span style="font-size: 1.2em">🚀</span>
-                </button>
-            </div>
-        </form>
     </div>
-    <script>
-        async function processAndOpen() {
-            const btn = document.querySelector('.action-btn');
-            const originalText = btn.innerHTML;
-            // 1. Сбор данных
-            const data = {
-                prompt_settings: {
-                    subject: {
-                        gender: document.getElementById('gender').value,
-                        age: document.getElementById('age').value,
-                        ethnicity: document.getElementById('nationality').value,
-                        appearance: {
-                            body: document.getElementById('bodyType').value,
-                            hair: `${document.getElementById('hairColor').value}, ${document.getElementById('hairstyle').value}`,
-                            eyes: document.getElementById('eyeColor').value
-                        }
-                    },
-                    style: document.getElementById('style').value,
-                    details: document.getElementById('additional').value || "High quality, sharp focus",
-                    technical: "8k resolution, photorealistic, masterpiece"
-                }
-            };
-            const jsonString = JSON.stringify(data, null, 2);
-            // 2. Копирование
-            let copied = false;
-            try {
-                if (navigator.clipboard && navigator.clipboard.writeText) {
-                    await navigator.clipboard.writeText(jsonString);
-                    copied = true;
-                } else {
-                    throw new Error("Clipboard API unavailable");
-                }
-            } catch (err) {
-                // Fallback для старых браузеров
-                const textArea = document.createElement("textarea");
-                textArea.value = jsonString;
-                textArea.style.position = "fixed";
-                document.body.appendChild(textArea);
-                textArea.focus();
-                textArea.select();
-                try {
-                    document.execCommand('copy');
-                    copied = true;
-                } catch (e) {
-                    console.error("Copy failed", e);
-                    alert("Не удалось скопировать автоматически. Пожалуйста, скопируйте текст вручную.");
-                }
-                document.body.removeChild(textArea);
-            }
-            // 3. Визуальная индикация и открытие ссылки
-            if (copied) {
-                btn.style.backgroundColor = "#10B981"; // Зеленый цвет
-                btn.innerHTML = "СКОПИРОВАНО! ОТКРЫВАЮ... ✅";
-                setTimeout(() => {
-                    // Открытие ссылки в новой вкладке
-                    window.open('https://lmarena.ai/ru?chat-modality=image&mode=direct', '_blank');
-                    // Возврат кнопки в исходное состояние
-                    setTimeout(() => {
-                        btn.style.backgroundColor = "";
-                        btn.innerHTML = originalText;
-                    }, 1000);
-                }, 800);
-            }
-        }
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="ru">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Synkris Look 5</title>
+<style>
+:root {
+--bg: #000000;
+--card-bg: #0a0a0a;
+--primary: #ccff00;
+--primary-hover: #b3e600;
+--text: #ffffff;
+--text-secondary: #a1a1a1;
+--border: #333333;
+--input-bg: #111111;
+}
+code
+Code
+download
+content_copy
+expand_less
+body {
+    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    background-color: var(--bg);
+    color: var(--text);
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+.container {
+    background-color: var(--card-bg);
+    width: 100%;
+    max-width: 600px;
+    padding: 35px;
+    border-radius: 20px;
+    border: 1px solid #222;
+    box-shadow: 0 0 30px rgba(204, 255, 0, 0.05);
+}
+h1 {
+    text-align: center;
+    color: var(--primary);
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-size: 2rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    text-shadow: 0 0 10px rgba(204, 255, 0, 0.3);
+}
+p.subtitle {
+    text-align: center;
+    color: var(--text-secondary);
+    margin-bottom: 30px;
+    font-size: 0.9rem;
+    letter-spacing: 0.5px;
+}
+.form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+.full-width {
+    grid-column: span 2;
+}
+.form-group {
+    display: flex;
+    flex-direction: column;
+}
+label {
+    font-weight: 500;
+    margin-bottom: 8px;
+    font-size: 0.85rem;
+    color: var(--primary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+select, textarea, input {
+    padding: 12px 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    font-size: 1rem;
+    background-color: var(--input-bg);
+    color: var(--text);
+    transition: all 0.3s ease;
+    outline: none;
+}
+select:focus, textarea:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 10px rgba(204, 255, 0, 0.2);
+}
+textarea {
+    resize: vertical;
+    min-height: 80px;
+    font-family: inherit;
+}
+.btn-container {
+    margin-top: 30px;
+    text-align: center;
+}
+.action-btn {
+    background-color: var(--primary);
+    color: #000;
+    border: none;
+    padding: 16px 30px;
+    font-size: 1.1rem;
+    font-weight: 800;
+    border-radius: 12px;
+    cursor: pointer;
+    width: 100%;
+    transition: all 0.2s ease;
+    box-shadow: 0 0 15px rgba(204, 255, 0, 0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    text-transform: uppercase;
+}
+.action-btn:hover {
+    background-color: var(--primary-hover);
+    transform: scale(1.02);
+    box-shadow: 0 0 25px rgba(204, 255, 0, 0.6);
+}
+.action-btn:active {
+    transform: scale(0.98);
+}
+select option {
+    background-color: #000;
+    color: #fff;
+}
+@media (max-width: 500px) {
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
+    .full-width {
+        grid-column: span 1;
+    }
+    .container {
+        padding: 20px;
+    }
+}
+</style>
 </head>
 <body>
+<div class="container">
+<h1>Synkris Look 5</h1>
+<p class="subtitle">PROMPT GENERATOR & LAUNCHER</p>
+code
+Code
+download
+content_copy
+expand_less
+<form id="promptForm">
+    <div class="form-grid">
+        <div class="form-group">
+            <label for="gender">Пол</label>
+            <select id="gender" onchange="autoAdjustDefaults()">
+                <option value="Woman">Женщина</option>
+                <option value="Man">Мужчина</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="age">Возраст</label>
+            <select id="age">
+                <option value="18 years old">18 лет</option>
+                <option value="20-25 years old" selected>20-25 лет</option>
+                <option value="25-30 years old">25-30 лет</option>
+                <option value="30-40 years old">30-40 лет</option>
+                <option value="40-50 years old">40-50 лет</option>
+                <option value="50-60 years old">50-60 лет</option>
+                <option value="60+ years old">60+ лет</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="nationality">Внешность/Этнос</label>
+            <select id="nationality">
+                <option value="Eastern European">Восточная Европа</option>
+                <option value="Northern European">Скандинавская</option>
+                <option value="Southern European">Южно-европейская</option>
+                <option value="Asian">Азиатская</option>
+                <option value="Latin American">Латиноамериканская</option>
+                <option value="African">Африканская</option>
+                <option value="Indian">Индийская</option>
+                <option value="Middle Eastern">Ближневосточная</option>
+                <option value="Mixed Race">Смешанная</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="bodyType">Телосложение</label>
+            <select id="bodyType">
+                <option value="Fit and slim">Стройное/Подтянутое</option>
+                <option value="Hourglass figure">Песочные часы</option>
+                <option value="Athletic">Спортивное</option>
+                <option value="Muscular">Мускулистое</option>
+                <option value="Curvy">Пышное (Curvy)</option>
+                <option value="Skinny model look">Модельная худоба</option>
+                <option value="Average realistic">Обычное</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="hairColor">Цвет волос</label>
+            <select id="hairColor">
+                <option value="Brunette">Брюнет</option>
+                <option value="Blonde">Блонд</option>
+                <option value="Black">Черные</option>
+                <option value="Redhead">Рыжие</option>
+                <option value="Platinum Blonde">Платиновые</option>
+                <option value="Grey">Седые</option>
+                <option value="Pastel Pink">Розовые</option>
+                <option value="Bald">Лысый</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="hairstyle">Стрижка</label>
+            <select id="hairstyle">
+                <option value="Long loose wavy hair">Длинные волны</option>
+                <option value="Straight long hair">Длинные прямые</option>
+                <option value="Messy bun">Небрежный пучок</option>
+                <option value="Ponytail">Хвост</option>
+                <option value="Bob cut">Каре</option>
+                <option value="Short pixie">Пикси (Короткая)</option>
+                <option value="Buzz cut">Ежик</option>
+                <option value="Fade cut">Фейд (Мужской)</option>
+                <option value="Slicked back">Зачесанные назад</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="eyeColor">Глаза</label>
+            <select id="eyeColor">
+                <option value="Brown">Карие</option>
+                <option value="Blue">Голубые</option>
+                <option value="Green">Зеленые</option>
+                <option value="Hazel">Ореховые</option>
+                <option value="Grey">Серые</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="style">Эстетика</label>
+            <select id="style">
+                <option value="Raw Candid Photography">Живое фото (Raw)</option>
+                <option value="Cinematic Movie Still">Кадр из фильма</option>
+                <option value="Fashion Editorial">Модный журнал</option>
+                <option value="Street Style">Уличный стиль</option>
+                <option value="Dark Moody Atmosphere">Мрачная атмосфера</option>
+                <option value="Neon Cyberpunk">Неон / Киберпанк</option>
+                <option value="Vintage Analog Film">Пленка (Vintage)</option>
+                <option value="Professional Studio">Студийный свет</option>
+            </select>
+        </div>
+        <div class="form-group full-width">
+            <label for="additional">Детали (Одежда, Локация, Действие)</label>
+            <textarea id="additional" placeholder="Например: в черном кожаном плаще, идет по дождливой улице, смотрит в камеру"></textarea>
+        </div>
+    </div>
+    <div class="btn-container">
+        <button type="button" class="action-btn" onclick="processAndOpen()">
+            <span>Launch Synkris AI</span>
+            <span style="font-size: 1.2em">⚡</span>
+        </button>
     </div>
+</form>
+</div>
+<script>
+function autoAdjustDefaults() {
+const gender = document.getElementById('gender').value;
+const hairstyle = document.getElementById('hairstyle');
+const bodyType = document.getElementById('bodyType');
+if (gender === 'Man') {
+hairstyle.value = 'Fade cut';
+bodyType.value = 'Athletic';
+if (!hairstyle.value) hairstyle.value = 'Short cut';
+} else {
+hairstyle.value = 'Long loose wavy hair';
+bodyType.value = 'Fit and slim';
+}
+}
+async function processAndOpen() {
+const btn = document.querySelector('.action-btn');
+const originalText = btn.innerHTML;
+const gender = document.getElementById('gender').value;
+const age = document.getElementById('age').value;
+const nationality = document.getElementById('nationality').value;
+const bodyType = document.getElementById('bodyType').value;
+const hairColor = document.getElementById('hairColor').value;
+const hairstyle = document.getElementById('hairstyle').value;
+const eyeColor = document.getElementById('eyeColor').value;
+const style = document.getElementById('style').value;
+const additional = document.getElementById('additional').value || "casual stylish outfit, standing confidently";
+const fullPrompt = `Full body shot, wide angle view, visible shoes and legs. A photorealistic ${style} of a ${age} ${nationality} ${gender}.
+Appearance: ${bodyType} physique, ${hairColor} ${hairstyle}, detailed ${eyeColor} eyes, realistic skin texture with pores and natural imperfections.
+Action/Context: ${additional}.
+Technical: 8k resolution, raw photo, unedited look, fujifilm xt4, sharp focus, volumetric lighting, hyper-detailed, alive, non-artificial, masterpiece.`;
+const data = {
+prompt: fullPrompt,
+negative_prompt: "cropped, portrait, close up, watermark, text, 3d render, cartoon, anime, smooth skin, plastic look, doll, artificial, blurry, distorted hands, extra fingers",
+aspect_ratio: "9:16"
+};
+const jsonString = JSON.stringify(data, null, 2);
+let copied = false;
+try {
+if (navigator.clipboard && navigator.clipboard.writeText) {
+await navigator.clipboard.writeText(jsonString);
+copied = true;
+} else {
+throw new Error("Clipboard API unavailable");
+}
+} catch (err) {
+const textArea = document.createElement("textarea");
+textArea.value = jsonString;
+textArea.style.position = "fixed";
+document.body.appendChild(textArea);
+textArea.focus();
+textArea.select();
+try {
+document.execCommand('copy');
+copied = true;
+} catch (e) {
+alert("Manual copy required.");
+}
+document.body.removeChild(textArea);
+}
+if (copied) {
+btn.style.backgroundColor = "#fff";
+btn.style.color = "#000";
+btn.innerHTML = "SYSTEM READY. LAUNCHING... 🚀";
+setTimeout(() => {
+window.open('https://lmarena.ai/ru?chat-modality=image&mode=direct', '_blank');
+setTimeout(() => {
+btn.style.backgroundColor = "";
+btn.style.color = "";
+btn.innerHTML = originalText;
+}, 1000);
+}, 800);
+}
+}
+document.addEventListener('DOMContentLoaded', autoAdjustDefaults);
+</script>
 </body>
+</html>