Spaces:
Running
Running
| <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> | |