сплаттерпанк | 21+
Технические моменты
Здесь можно баловаться с генератором и создавать все, что твоей душе угодно
У генератора нет предварительного просмотра, поэтому результат можно увидеть либо отправив код, который у тебя вышел, либо нажав кнопку посмотреть
Как пользоваться генератором? Ты заполняешь пункты в генераторе, затем нажимаешь сгенерировать код, после этого нажимаешь копировать. Затем вставляешь этот код в свое сообщение/подпись в своем профиле. После нажимаешь ctrl + a (английскую) или правой кнопку мыши, а затем выбираешь пункт выделить все. Должно получится так, что у тебя все вставленное тобой сообщение выделено. Затем нажимаешь стрелочку рядом с голодным дайсом и выбираешь пункт HTML в сообщениях. Весь сгенерированный код должен по итогу оказаться в bb-тегах [.htm]сгенерированный код[/.html]. Затем нажимаешь отправить.
[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Генератор галереи 4 картинки</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #2a2420;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 30px 20px;
font-family: 'Raleway', sans-serif;
}
.generator-wrapper {
max-width: 860px;
width: 100%;
background: #e8ddce;
padding: 30px 35px 35px;
border: 8px solid #c4b09a;
border-radius: 12px;
}
.generator-wrapper h1 {
font-family: 'Special Elite', monospace;
color: #363636;
font-size: 2rem;
margin-bottom: 4px;
letter-spacing: 2px;
font-weight: 700;
}
.generator-wrapper .subtitle {
color: #7a6854;
font-size: 1rem;
margin-bottom: 22px;
font-weight: 500;
border-bottom: 2px solid #c4b09a;
padding-bottom: 14px;
opacity: 0.8;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 18px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 3px;
}
.form-group label {
font-size: 0.85rem;
font-weight: 700;
color: #5a4a3a;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group input,
.form-group select {
padding: 8px 12px;
border: 2px solid #c4b09a;
border-radius: 6px;
font-family: 'Raleway', sans-serif;
font-size: 0.95rem;
background: #f5ede4;
color: #363636;
transition: border 0.2s;
width: 100%;
box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #8b6b4a;
}
.form-group select option {
background: #f5ede4;
color: #363636;
font-size: 0.95rem;
padding: 4px 8px;
}
.buttons-row {
display: flex;
gap: 14px;
margin: 20px 0 16px;
flex-wrap: wrap;
}
.buttons-row button {
padding: 12px 32px;
border: none;
border-radius: 8px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.25s;
letter-spacing: 0.5px;
}
.btn-generate {
background: #5a4a3a;
color: #f5ede4;
}
.btn-generate:hover {
background: #3a322a;
transform: scale(1.02);
}
.btn-copy {
background: #7a5f47;
color: #f5ede4;
}
.btn-copy:hover {
background: #5a4a3a;
transform: scale(1.02);
}
.btn-reset {
background: #c4b09a;
color: #363636;
}
.btn-reset:hover {
background: #b09a82;
transform: scale(1.02);
}
.output-area {
margin-top: 12px;
}
.output-area label {
font-size: 0.85rem;
font-weight: 700;
color: #5a4a3a;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 6px;
}
.output-area textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 220px;
max-height: 400px;
padding: 12px 14px;
border: 2px solid #c4b09a;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 0.75rem;
background: #f5ede4;
color: #363636;
resize: vertical;
line-height: 1.4;
box-sizing: border-box;
}
.output-area textarea:focus {
outline: none;
border-color: #8b6b4a;
}
/* ===== НАСТРОЙКИ ===== */
.style-controls {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px 16px;
margin-top: 16px;
padding: 16px 18px;
background: rgba(210, 190, 170, 0.25);
border-radius: 8px;
border: 2px solid #c4b09a;
}
.style-controls .form-group label {
font-size: 0.75rem;
}
.style-controls .form-group select {
font-size: 0.95rem;
padding: 8px 10px;
}
.style-controls .form-group select option {
font-size: 0.95rem;
padding: 6px 8px;
}
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: #3a322a;
color: #f5ede4;
padding: 14px 32px;
border-radius: 10px;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 0.95rem;
opacity: 0;
transition: all 0.4s ease;
pointer-events: none;
z-index: 9999;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media screen and (max-width: 700px) {
.generator-wrapper {
padding: 18px 14px;
border-width: 6px;
}
.generator-wrapper h1 {
font-size: 1.5rem;
}
.form-grid {
grid-template-columns: 1fr;
gap: 8px 0;
}
.style-controls {
grid-template-columns: 1fr 1fr;
padding: 12px 14px;
}
.buttons-row button {
padding: 10px 22px;
font-size: 0.85rem;
flex: 1;
min-width: 80px;
}
.output-area textarea {
min-height: 160px;
max-height: 300px;
font-size: 0.65rem;
}
.form-group select option {
font-size: 0.85rem;
}
.style-controls .form-group select option {
font-size: 0.85rem;
}
}
@media screen and (max-width: 400px) {
.style-controls {
grid-template-columns: 1fr;
}
.generator-wrapper {
padding: 12px 10px;
border-width: 4px;
}
.generator-wrapper h1 {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<div class="generator-wrapper">
<h1>🖼 Генератор галереи</h1>
<p class="subtitle">4 картинки 110×110 px, расстояние 5px — все эффекты применяются одновременно</p>
<form id="galleryForm" onsubmit="return false;">
<div class="form-grid">
<div class="form-group">
<label>Картинка 1</label>
<input type="text" id="img1" value="https://i.pinimg.com/736x/bf/e9/38/bfe9380bb8cc69d55b020f3119e163ea.jpg">
</div>
<div class="form-group">
<label>Картинка 2</label>
<input type="text" id="img2" value="https://i.pinimg.com/736x/cf/be/ce/cfbecea910784b382a4258596b7119cd.jpg">
</div>
<div class="form-group">
<label>Картинка 3</label>
<input type="text" id="img3" value="https://i.pinimg.com/736x/be/a1/a5/bea1a5b075d4986f2da8f28e1a608837.jpg">
</div>
<div class="form-group">
<label>Картинка 4</label>
<input type="text" id="img4" value="https://i.pinimg.com/736x/52/6d/e6/526de66d4f52c612b4ef6f5d5c9101c5.jpg">
</div>
</div>
<!-- ===== НАСТРОЙКА СТИЛЕЙ ===== -->
<div class="style-controls">
<div class="form-group">
<label>Стиль рамки</label>
<select id="frameStyle">
<option value="none">Без рамки</option>
<option value="frame-vintage">Винтажная</option>
<option value="frame-modern">Современная</option>
<option value="frame-polaroid">Полароид</option>
<option value="frame-rough">Грубая (скетч)</option>
<option value="frame-double">Двойная рамка</option>
<option value="frame-shadow">Теневая</option>
<option value="frame-gold">Золотая</option>
<option value="frame-wood">Деревянная</option>
<option value="frame-brick">Кирпичная</option>
<option value="frame-neon">Неоновая</option>
<option value="frame-film">Киноплёнка</option>
<option value="frame-grunge">Гранж</option>
<option value="frame-ornament">Орнамент</option>
<option value="frame-marble">Мраморная</option>
<option value="frame-velvet">Бархатная</option>
<option value="frame-steel">Стальная</option>
<option value="frame-copper">Медная</option>
<option value="frame-bamboo">Бамбуковая</option>
<option value="frame-ivory">Слоновая кость</option>
<option value="frame-obsidian">Обсидиан</option>
<option value="frame-rust">Ржавая</option>
<option value="frame-pearl">Жемчужная</option>
<option value="frame-amber">Янтарная</option>
<option value="frame-jade">Нефритовая</option>
<option value="frame-crystal">Хрустальная</option>
<option value="frame-charcoal">Угольная</option>
<option value="frame-rose">Розовое золото</option>
<option value="frame-titanium">Титан</option>
<option value="frame-carbon">Карбон</option>
</select>
</div>
<div class="form-group">
<label>Эффект поверх</label>
<select id="imgEffect">
<option value="none">Без эффекта</option>
<option value="grayscale">Ч/Б (grayscale)</option>
<option value="sepia">Сепия</option>
<option value="blur">Размытие</option>
<option value="bright">Ярче</option>
<option value="dark">Темнее</option>
<option value="vignette">Виньетка</option>
<option value="polaroid">Полароид</option>
<option value="invert">Инверсия</option>
<option value="pixelate">Пикселизация</option>
<option value="neon">Неоновое свечение</option>
<option value="hue">Сдвиг цвета</option>
<option value="film">Киноплёнка</option>
<option value="contrast">Контраст</option>
<option value="saturate">Насыщенность</option>
<option value="dreamy">Мечтательный</option>
<option value="noisy">Шум</option>
<option value="posterize">Постеризация</option>
<option value="emboss">Рельеф</option>
<option value="frost">Иней</option>
<option value="vaporwave">Вейпорвейв</option>
<option value="retro">Ретро</option>
<option value="cold">Холодный</option>
<option value="warm">Тёплый</option>
<option value="matrix">Матрица</option>
<option value="synthwave">Синтвейв</option>
<option value="sketch">Набросок</option>
<option value="watermark">Водяной знак</option>
<option value="hdr">HDR</option>
<option value="soft">Мягкий</option>
</select>
</div>
<div class="form-group">
<label>Дополнительно</label>
<select id="imgExtra">
<option value="none">Без доп. эффектов</option>
<option value="rounded">Скруглённые углы</option>
<option value="shadow">Тень</option>
<option value="glow">Свечение</option>
<option value="rounded-shadow">Скругление + тень</option>
<option value="rainbow">Радужная рамка</option>
<option value="glitch">Глитч</option>
<option value="cracked">Треснутая</option>
<option value="scratched">Царапины</option>
<option value="watercolor">Акварель</option>
<option value="pulse">Пульсация</option>
<option value="rotate">Вращение</option>
<option value="shake">Тряска</option>
<option value="sparkle">Блёстки</option>
<option value="gradient">Градиент</option>
<option value="neon-glow">Неоновое сияние</option>
<option value="vintage-border">Винтажная окантовка</option>
<option value="mosaic">Мозаика</option>
<option value="filigree">Финифть</option>
<option value="damaged">Повреждённая</option>
<option value="painted">Роспись</option>
<option value="embroidery">Вышивка</option>
<option value="lace">Кружево</option>
<option value="woven">Плетение</option>
<option value="leather">Кожа</option>
<option value="denim">Деним</option>
<option value="velvet-texture">Бархатная текстура</option>
<option value="rust-texture">Ржавчина</option>
<option value="stone-texture">Камень</option>
<option value="sand-texture">Песок</option>
</select>
</div>
</div>
</form>
<div class="buttons-row">
<button class="btn-generate" onclick="generateGallery()">⚡ Сгенерировать</button>
<button class="btn-copy" onclick="copyCode()">📋 Копировать код</button>
<button class="btn-reset" onclick="resetForm()">⟳ Сбросить</button>
</div>
<div class="output-area">
<label>📄 Готовый HTML-код</label>
<textarea id="outputCode" readonly></textarea>
</div>
</div>
<div id="toast" class="toast">✅ Код скопирован!</div>
<script>
function generateGallery() {
const img1 = document.getElementById('img1').value || '';
const img2 = document.getElementById('img2').value || '';
const img3 = document.getElementById('img3').value || '';
const img4 = document.getElementById('img4').value || '';
const frame = document.getElementById('frameStyle').value || 'none';
const effect = document.getElementById('imgEffect').value || 'none';
const extra = document.getElementById('imgExtra').value || 'none';
const width = 110;
const height = 110;
const gap = 5;
// ===== 30 СТИЛЕЙ РАМОК =====
const frameStyles = {
'none': 'border: none; border-radius: 0; box-shadow: none; background: transparent; padding: 0;',
'frame-vintage': 'border: 3px solid #8a7a62; border-radius: 4px; box-shadow: 2px 2px 8px rgba(0,0,0,0.3); background: #d4c4b0; padding: 4px;',
'frame-modern': 'border: 2px solid #c9b99a; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); background: #2a2420;',
'frame-polaroid': 'border: 1px solid #b7a087; border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); background: #f5ede4; padding: 6px 6px 18px 6px; transform: rotate(var(--rot, 0deg));',
'frame-rough': 'border: 3px solid #5a4a3a; border-radius: 0px; box-shadow: 3px 3px 0px #3a2a1a; background: #c4b09a; padding: 3px; clip-path: polygon(0% 0%, 95% 0%, 100% 5%, 100% 100%, 5% 100%, 0% 95%);',
'frame-double': 'border: 4px double #8a7a62; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); background: #d4c4b0; padding: 5px;',
'frame-shadow': 'border: 2px solid #8a7a62; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 0 10px rgba(0,0,0,0.05); background: #d4c4b0; padding: 4px;',
'frame-gold': 'border: 3px solid #c9a84c; border-radius: 6px; box-shadow: 0 0 15px rgba(201, 168, 76, 0.3); background: #2a1f0a; padding: 4px;',
'frame-wood': 'border: 4px solid #6b4a2a; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); background: #8b6a4a; padding: 5px;',
'frame-brick': 'border: 3px solid #6b3a2a; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); background: #8b4a3a; padding: 4px;',
'frame-neon': 'border: 2px solid #ff00ff; border-radius: 8px; box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff, inset 0 0 20px #ff00ff; background: #1a0a1a; padding: 4px;',
'frame-film': 'border: 3px solid #1a1a1a; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); background: #2a2a2a; padding: 4px;',
'frame-grunge': 'border: 3px solid #3a2a1a; border-radius: 4px; box-shadow: 2px 2px 0px #2a1a0a; background: #4a3a2a; padding: 4px; clip-path: polygon(0% 0%, 92% 0%, 100% 8%, 100% 100%, 8% 100%, 0% 92%);',
'frame-ornament': 'border: 3px solid #8a7a62; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); background: #d4c4b0; padding: 6px;',
'frame-marble': 'border: 3px solid #b0a090; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); background: #d0c8b8; padding: 5px;',
'frame-velvet': 'border: 3px solid #6a1a4a; border-radius: 8px; box-shadow: 0 2px 12px rgba(106, 26, 74, 0.3); background: #2a0a1a; padding: 5px;',
'frame-steel': 'border: 3px solid #6a7a8a; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); background: #3a4a5a; padding: 4px;',
'frame-copper': 'border: 3px solid #b87333; border-radius: 6px; box-shadow: 0 2px 12px rgba(184, 115, 51, 0.3); background: #2a1a0a; padding: 5px;',
'frame-bamboo': 'border: 3px solid #5a7a3a; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); background: #8aaa6a; padding: 5px;',
'frame-ivory': 'border: 3px solid #f5ede4; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); background: #faf5ee; padding: 5px;',
'frame-obsidian': 'border: 3px solid #1a0a0a; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); background: #0a0a0a; padding: 4px;',
'frame-rust': 'border: 3px solid #8a4a2a; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); background: #6a3a2a; padding: 4px;',
'frame-pearl': 'border: 3px solid #e8ddd0; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1), inset 0 0 20px rgba(255,255,255,0.2); background: #f5ede4; padding: 5px;',
'frame-amber': 'border: 3px solid #c9a040; border-radius: 6px; box-shadow: 0 2px 12px rgba(201, 160, 64, 0.3); background: #2a1f0a; padding: 5px;',
'frame-jade': 'border: 3px solid #3a8a5a; border-radius: 6px; box-shadow: 0 2px 12px rgba(58, 138, 90, 0.3); background: #1a2a1a; padding: 5px;',
'frame-crystal': 'border: 2px solid rgba(255,255,255,0.2); border-radius: 8px; box-shadow: 0 0 30px rgba(255,255,255,0.05); background: rgba(255,255,255,0.05); padding: 6px; backdrop-filter: blur(4px);',
'frame-charcoal': 'border: 3px solid #3a3a3a; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); background: #2a2a2a; padding: 4px;',
'frame-rose': 'border: 3px solid #d4a0a0; border-radius: 8px; box-shadow: 0 2px 12px rgba(212, 160, 160, 0.3); background: #1a0a0a; padding: 5px;',
'frame-titanium': 'border: 2px solid #8a9aaa; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); background: #2a3a4a; padding: 4px;',
'frame-carbon': 'border: 3px solid #1a1a1a; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); background: #0a0a0a; padding: 4px; background-image: repeating-linear-gradient(45deg, #1a1a1a 0px, #1a1a1a 2px, #2a2a2a 2px, #2a2a2a 4px);'
};
// ===== 30 ЭФФЕКТОВ =====
const effectStyles = {
'none': '',
'grayscale': 'filter: grayscale(100%);',
'sepia': 'filter: sepia(80%);',
'blur': 'filter: blur(2px);',
'bright': 'filter: brightness(1.3);',
'dark': 'filter: brightness(0.6);',
'vignette': 'box-shadow: inset 0 0 40px rgba(0,0,0,0.7);',
'polaroid': 'transform: rotate(var(--rot, 0deg)); padding: 6px 6px 18px 6px; background: #f5ede4;',
'invert': 'filter: invert(100%);',
'pixelate': 'image-rendering: pixelated; filter: blur(1px);',
'neon': 'box-shadow: 0 0 20px rgba(201, 185, 154, 0.6), inset 0 0 20px rgba(201, 185, 154, 0.1); border-color: #c9b99a;',
'hue': 'filter: hue-rotate(180deg);',
'film': 'background: #2a1a0a; padding: 4px; border: 2px solid #1a0a00; box-shadow: 0 2px 10px rgba(0,0,0,0.5);',
'contrast': 'filter: contrast(200%);',
'saturate': 'filter: saturate(200%);',
'dreamy': 'filter: blur(1px) brightness(1.1) saturate(0.8);',
'noisy': 'background: repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);',
'posterize': 'filter: posterize(4);',
'emboss': 'filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3)) drop-shadow(-2px -2px 0 rgba(255,255,255,0.2));',
'frost': 'background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 3px, transparent 3px, transparent 6px);',
'vaporwave': 'filter: saturate(300%) hue-rotate(-30deg) contrast(150%);',
'retro': 'filter: sepia(50%) contrast(120%) brightness(0.9);',
'cold': 'filter: hue-rotate(240deg) saturate(150%);',
'warm': 'filter: sepia(60%) brightness(1.1);',
'matrix': 'filter: hue-rotate(120deg) contrast(200%) saturate(50%);',
'synthwave': 'box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff; border: 2px solid #ff00ff;',
'sketch': 'filter: contrast(200%) brightness(0.8) grayscale(100%); border: 2px solid #1a1a1a;',
'watermark': 'background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 10px, transparent 10px, transparent 20px);',
'hdr': 'filter: contrast(150%) brightness(1.1) saturate(120%);',
'soft': 'filter: blur(0.5px) brightness(1.05);'
};
// ===== 30 ДОПОЛНИТЕЛЬНЫХ ЭФФЕКТОВ =====
const extraStyles = {
'none': '',
'rounded': 'border-radius: 12px; overflow: hidden;',
'shadow': 'box-shadow: 0 8px 20px rgba(0,0,0,0.4);',
'glow': 'box-shadow: 0 0 20px rgba(201, 185, 154, 0.3);',
'rounded-shadow': 'border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.4);',
'rainbow': 'background: linear-gradient(45deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff); padding: 3px;',
'glitch': 'animation: glitch 0.3s infinite alternate;',
'cracked': 'clip-path: polygon(0% 0%, 85% 0%, 90% 10%, 95% 0%, 100% 15%, 100% 100%, 0% 100%);',
'scratched': 'background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px);',
'watercolor': 'filter: saturate(0.5) contrast(0.8) brightness(1.1); border-radius: 50% 20% 50% 20%;',
'pulse': 'animation: pulse 2s infinite alternate;',
'rotate': 'animation: rotate 4s infinite linear;',
'shake': 'animation: shake 0.5s infinite alternate;',
'sparkle': 'background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);',
'gradient': 'background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.1));',
'neon-glow': 'box-shadow: 0 0 30px rgba(201, 185, 154, 0.5), 0 0 60px rgba(201, 185, 154, 0.2); border-color: #c9b99a;',
'vintage-border': 'border: 4px double #8a7a62; border-radius: 8px; background: #f5ede4; padding: 5px;',
'mosaic': 'border: 3px solid #6b5a4a; border-radius: 2px; background: repeating-conic-gradient(#8a7a62 0% 25%, #b7a087 0% 50%); padding: 4px;',
'filigree': 'border: 3px solid #c9b99a; border-radius: 12px 2px 12px 2px; background: #d4c4b0; padding: 5px; box-shadow: inset 0 0 10px rgba(0,0,0,0.1);',
'damaged': 'border: 3px solid #4a3a2a; border-radius: 4px; background: #5a4a3a; padding: 4px; clip-path: polygon(0% 0%, 90% 0%, 100% 10%, 100% 90%, 95% 100%, 0% 100%, 0% 95%, 5% 90%, 0% 85%);',
'painted': 'border: 4px solid #8a7a6a; border-radius: 2px 12px 2px 12px; background: #d4c4b0; padding: 5px; box-shadow: inset 0 0 15px rgba(0,0,0,0.1);',
'embroidery': 'border: 3px dashed #c9a84c; border-radius: 8px; background: #1a1a0a; padding: 5px;',
'lace': 'border: 2px dotted #d4c4b0; border-radius: 12px; background: #f5ede4; padding: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.05);',
'woven': 'background: repeating-linear-gradient(90deg, #8a7a62 0px, #8a7a62 2px, #b7a087 2px, #b7a087 4px); padding: 4px;',
'leather': 'border: 3px solid #3a2a1a; border-radius: 4px; background: #4a3a2a; padding: 5px; background-image: repeating-linear-gradient(45deg, #4a3a2a 0px, #4a3a2a 3px, #3a2a1a 3px, #3a2a1a 6px);',
'denim': 'border: 3px solid #2a3a6a; border-radius: 4px; background: #1a2a4a; padding: 5px; background-image: repeating-linear-gradient(0deg, #1a2a4a 0px, #1a2a4a 2px, #2a3a6a 2px, #2a3a6a 4px);',
'velvet-texture': 'border: 3px solid #4a1a2a; border-radius: 6px; background: #2a0a1a; padding: 5px; background-image: radial-gradient(circle, #4a1a2a 0%, #2a0a1a 100%);',
'rust-texture': 'border: 3px solid #6a3a1a; border-radius: 4px; background: #4a2a0a; padding: 4px; background-image: repeating-linear-gradient(45deg, #4a2a0a 0px, #4a2a0a 3px, #6a3a1a 3px, #6a3a1a 6px);',
'stone-texture': 'border: 3px solid #6a6a6a; border-radius: 4px; background: #5a5a5a; padding: 4px; background-image: repeating-linear-gradient(45deg, #5a5a5a 0px, #5a5a5a 2px, #6a6a6a 2px, #6a6a6a 4px);',
'sand-texture': 'border: 3px solid #c9b99a; border-radius: 4px; background: #d4c4b0; padding: 4px; background-image: radial-gradient(circle, #d4c4b0 0%, #c9b99a 100%);'
};
const frameStyle = frameStyles[frame] || frameStyles['none'];
const effectStyle = effectStyles[effect] || '';
const extraStyle = extraStyles[extra] || '';
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Галерея</title>
<style>
.gallery-wrapper { max-width: 100%; width: 100%; margin: 0 auto; }
.gallery-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: ${gap}px; margin: 20px 0; max-width: 100%; overflow: hidden; }
.gallery-item {
width: ${width}px; min-width: ${width}px; height: ${height}px; flex: 0 0 ${width}px;
overflow: hidden; ${frameStyle} ${effectStyle} ${extraStyle}
box-sizing: border-box; position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes glitch { 0% { transform: translate(0, 0); } 25% { transform: translate(-2px, 2px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(-1px, -1px); } 100% { transform: translate(1px, 1px); } }
@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@media (max-width: 600px) {
.gallery-item { width: calc((100% - ${gap*3}px) / 4); min-width: calc((100% - ${gap*3}px) / 4); height: auto; aspect-ratio: 1/1; flex: 0 0 calc((100% - ${gap*3}px) / 4); }
.gallery-row { gap: ${gap}px; }
}
@media (max-width: 400px) {
.gallery-item { width: calc((100% - ${gap*3}px) / 4); min-width: calc((100% - ${gap*3}px) / 4); flex: 0 0 calc((100% - ${gap*3}px) / 4); }
}
</style>
</head>
<body style="background:#2a2420; padding:20px; display:flex; justify-content:center; align-items:center; min-height:100vh; margin:0;">
<div class="gallery-wrapper">
<div class="gallery-row">
<div class="gallery-item"><img src="${img1}" alt="1"></div>
<div class="gallery-item"><img src="${img2}" alt="2"></div>
<div class="gallery-item"><img src="${img3}" alt="3"></div>
<div class="gallery-item"><img src="${img4}" alt="4"></div>
</div>
</div>
</body>
</html>`;
document.getElementById('outputCode').value = html;
}
function copyCode() {
const output = document.getElementById('outputCode');
if (!output.value) {
showToast('⚠️ Сначала сгенерируйте код!');
return;
}
output.select();
output.setSelectionRange(0, 999999);
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(output.value).then(() => {
showToast('✅ Код скопирован в буфер обмена!');
}).catch(() => {
document.execCommand('copy');
showToast('✅ Код скопирован!');
});
} else {
document.execCommand('copy');
showToast('✅ Код скопирован!');
}
}
function resetForm() {
document.getElementById('img1').value = 'https://i.pinimg.com/736x/bf/e9/38/bfe9380bb8cc69d55b020f3119e163ea.jpg';
document.getElementById('img2').value = 'https://i.pinimg.com/736x/cf/be/ce/cfbecea910784b382a4258596b7119cd.jpg';
document.getElementById('img3').value = 'https://i.pinimg.com/736x/be/a1/a5/bea1a5b075d4986f2da8f28e1a608837.jpg';
document.getElementById('img4').value = 'https://i.pinimg.com/736x/52/6d/e6/526de66d4f52c612b4ef6f5d5c9101c5.jpg';
document.getElementById('frameStyle').value = 'none';
document.getElementById('imgEffect').value = 'none';
document.getElementById('imgExtra').value = 'none';
document.getElementById('outputCode').value = '';
generateGallery();
showToast('⟳ Форма сброшена');
}
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
clearTimeout(toast._timer);
toast._timer = setTimeout(() => {
toast.classList.remove('show');
}, 2500);
}
document.querySelectorAll('#galleryForm input, #galleryForm select').forEach(el => {
el.addEventListener('input', generateGallery);
el.addEventListener('change', generateGallery);
});
window.onload = generateGallery;
</script>
</body>
</html>
[/html]