сплаттерпанк | 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>Генератор Попутчиков Трассы 66</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&family=Special+Elite&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #2a2420;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 30px 20px;
font-family: 'Raleway', sans-serif;
}
.generator-wrapper {
max-width: 950px;
width: 100%;
background: #e8ddce;
padding: 30px 35px 35px;
border: 10px solid #c4b09a;
border-radius: 12px;
}
.generator-wrapper h1 {
font-size: 1.8rem;
color: #363636;
font-weight: 700;
text-align: center;
margin-bottom: 4px;
letter-spacing: 2px;
}
.generator-wrapper .subtitle {
text-align: center;
color: #7a6854;
font-size: 0.85rem;
margin-bottom: 22px;
font-weight: 500;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.form-group label {
font-size: 0.7rem;
font-weight: 700;
color: #5a4a3a;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group label .hint {
font-weight: 400;
text-transform: none;
color: #8a7a6a;
font-size: 0.65rem;
}
.form-group input,
.form-group textarea {
padding: 7px 11px;
border: 2px solid #c4b09a;
border-radius: 6px;
font-family: 'Raleway', sans-serif;
font-size: 0.85rem;
background: #f5ede4;
color: #363636;
transition: border 0.2s;
width: 100%;
box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #8b6b4a;
}
.full-width {
grid-column: 1 / -1;
}
.buttons-row {
display: flex;
gap: 14px;
margin: 20px 0 16px;
flex-wrap: wrap;
justify-content: center;
}
.buttons-row button {
padding: 11px 32px;
border: none;
border-radius: 8px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.25s;
letter-spacing: 1px;
}
.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: 8px;
width: 100%;
}
.output-area label {
font-size: 0.7rem;
font-weight: 700;
color: #5a4a3a;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 4px;
}
.output-area textarea {
width: 100% !important;
max-width: 100% !important;
min-height: 400px;
padding: 12px 14px;
border: 2px solid #c4b09a;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 0.65rem;
background: #f5ede4;
color: #363636;
resize: vertical;
line-height: 1.4;
box-sizing: border-box !important;
}
.output-area textarea:focus {
outline: none;
border-color: #8b6b4a;
}
.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);
}
.separator {
border: none;
border-top: 2px solid #c4b09a;
margin: 18px 0 16px;
opacity: 0.4;
}
@media screen and (max-width: 700px) {
.generator-wrapper {
padding: 18px 14px;
border-width: 8px;
}
.form-grid {
grid-template-columns: 1fr;
gap: 10px 0;
}
.buttons-row button {
padding: 10px 22px;
font-size: 0.8rem;
flex: 1;
min-width: 100px;
}
.generator-wrapper h1 {
font-size: 1.3rem;
}
.output-area textarea {
min-height: 250px;
font-size: 0.55rem;
}
}
</style>
</head>
<body>
<div class="generator-wrapper">
<h1>🚌 Попутчики</h1>
<p class="subtitle">Заполни форму и получи готовый HTML-код для вставки в тему</p>
<hr class="separator">
<form id="travelerForm" onsubmit="return false;">
<div class="form-grid">
<!-- FC -->
<div class="form-group full-width">
<label>FC (Имя актёра / модели / внешности)</label>
<input type="text" id="fc" placeholder="Например: Кейт Бланшетт / Cate Blanchett" value="">
</div>
<!-- Фото 1 -->
<div class="form-group full-width">
<label>Фото 1 <span class="hint">(обязательное)</span></label>
<input type="text" id="photo1" placeholder="https://...jpg" value="">
</div>
<!-- Фото 2 -->
<div class="form-group full-width">
<label>Фото 2 <span class="hint">(опционально)</span></label>
<input type="text" id="photo2" placeholder="https://...jpg" value="">
</div>
<!-- Фото 3 -->
<div class="form-group full-width">
<label>Фото 3 <span class="hint">(опционально)</span></label>
<input type="text" id="photo3" placeholder="https://...jpg" value="">
</div>
</div>
</form>
<div class="buttons-row">
<button class="btn-generate" onclick="generateTraveler()">⚡ Сгенерировать</button>
<button class="btn-copy" onclick="copyCode()">📋 Копировать код</button>
<button class="btn-reset" onclick="resetForm()">⟳ Сбросить</button>
</div>
<hr class="separator">
<div class="output-area">
<label>📄 Готовый HTML-код (скопируйте и вставьте в тему)</label>
<textarea id="outputCode" readonly></textarea>
</div>
</div>
<div id="toast" class="toast">✅ Код скопирован!</div>
<script>
function generateTraveler() {
const fc = document.getElementById('fc').value || 'Имя актёра';
const photo1 = document.getElementById('photo1').value || 'https://via.placeholder.com/300x400/8a7a6a/ffffff?text=Фото+1';
const photo2 = document.getElementById('photo2').value;
const photo3 = document.getElementById('photo3').value;
const photos = [photo1];
if (photo2) photos.push(photo2);
if (photo3) photos.push(photo3);
// Генерируем уникальные наклоны для каждого фото
const rotations = [];
const count = photos.length;
for (let i = 0; i < count; i++) {
let angle;
let attempts = 0;
do {
angle = (Math.random() * 6 - 3);
angle = Math.round(angle * 10) / 10;
attempts++;
if (attempts > 100) break;
} while (
(i > 0 && Math.abs(angle - rotations[i-1]) < 0.5) ||
(i > 1 && Math.abs(angle - rotations[i-2]) < 0.5)
);
rotations.push(angle);
}
let photosHtml = '';
photos.forEach((url, index) => {
const rotate = rotations[index].toFixed(1);
const margin = (Math.random() * 10 + 5).toFixed(0);
photosHtml += `
<div class="photo-item" style="flex: 1; min-width: 0; padding: 0 ${margin}px; transform: rotate(${rotate}deg);">
<div class="polaroid">
<div class="polaroid-inner">
<img src="${url}" alt="фото">
<div class="scratch-overlay"></div>
<div class="stain-overlay"></div>
<div class="grain-overlay"></div>
</div>
</div>
</div>
`;
});
const html = `<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Попутчик Трассы 66</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&family=Special+Elite&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #3a322a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 30px 20px;
font-family: 'Raleway', sans-serif;
}
.traveler-card {
max-width: 900px;
width: 100%;
background: #e8ddce;
padding: 75px 30px 35px;
border: 10px solid #c4b09a;
border-radius: 12px;
position: relative;
border-color: #d4b68a;
}
.card-stamp {
position: absolute;
top: 15px;
right: 25px;
font-family: 'Special Elite', cursive;
color: #7a5f47;
font-weight: 400;
font-size: 1.3rem;
letter-spacing: 2px;
opacity: 0.2;
transform: rotate(6deg);
border: 2px solid #7a5f47;
padding: 4px 16px;
pointer-events: none;
user-select: none;
}
.route-66 {
position: absolute;
bottom: 15px;
left: 25px;
font-family: 'Special Elite', cursive;
color: #7a5f47;
font-size: 0.9rem;
opacity: 0.12;
letter-spacing: 3px;
pointer-events: none;
user-select: none;
}
.photos-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
margin: 0 -10px;
gap: 5px 0;
position: relative;
z-index: 5;
}
.photo-item {
flex: 1;
min-width: 0;
padding: 0 10px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
}
.photo-item:hover {
transform: scale(1.08) rotate(0deg) !important;
z-index: 10;
}
.photo-item .polaroid {
background: #d4c4b0;
padding: 8px 8px 16px 8px;
border: 1px solid #b7a087;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: box-shadow 0.4s ease;
}
.photo-item:hover .polaroid {
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.photo-item .polaroid-inner {
position: relative;
overflow: hidden;
aspect-ratio: 3/4;
background: #3a322a;
}
.photo-item .polaroid-inner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: sepia(0.35) contrast(1.12) brightness(0.96);
}
.scratch-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 5px), repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(80,60,40,0.04) 3px, rgba(80,60,40,0.04) 7px);
z-index: 2;
}
.stain-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: radial-gradient(ellipse at 15% 25%, rgba(160,130,95,0.1) 0%, transparent 40%), radial-gradient(ellipse at 85% 70%, rgba(110,85,60,0.08) 0%, transparent 50%);
z-index: 2;
}
.grain-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>');
background-repeat: repeat;
background-size: 200px;
z-index: 4;
mix-blend-mode: multiply;
}
.fc-name {
text-align: center;
margin-top: 25px;
font-family: 'Special Elite', cursive;
font-size: 2.2rem;
color: #363636;
letter-spacing: 4px;
word-break: break-word;
padding: 0 10px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
position: relative;
z-index: 5;
}
.fc-name .fc-label {
font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: 0.8rem;
letter-spacing: 3px;
color: #7a6854;
display: block;
margin-bottom: 2px;
text-transform: uppercase;
}
@media screen and (max-width: 650px) {
.traveler-card { padding: 60px 15px 25px; border-width: 8px; }
.card-stamp { font-size: 1.0rem; padding: 3px 12px; top: 10px; right: 15px; }
.route-66 { font-size: 0.7rem; bottom: 10px; left: 15px; }
.fc-name { font-size: 1.6rem; margin-top: 18px; letter-spacing: 2px; }
.photos-container { margin: 0 -5px; }
.photo-item { padding: 0 5px; }
.photo-item .polaroid { padding: 6px 6px 12px 6px; }
}
@media screen and (max-width: 400px) {
.fc-name { font-size: 1.2rem; margin-top: 14px; }
.card-stamp { font-size: 0.9rem; padding: 2px 10px; }
.route-66 { font-size: 0.6rem; bottom: 8px; left: 12px; }
.traveler-card { padding: 50px 10px 18px; }
}
</style>
</head>
<body>
<div class="traveler-card">
<div class="card-stamp">#БАРСУК</div>
<div class="route-66">✦ FEDERAL HIGHWAY 66 ✦</div>
<div class="photos-container">
${photosHtml}
</div>
<div class="fc-name">
<span class="fc-label">✦ faceclaim ✦</span>
${fc}
</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);
navigator.clipboard.writeText(output.value).then(() => {
showToast('✅ Код скопирован в буфер обмена!');
}).catch(() => {
document.execCommand('copy');
showToast('✅ Код скопирован!');
});
}
function resetForm() {
document.getElementById('fc').value = '';
document.getElementById('photo1').value = '';
document.getElementById('photo2').value = '';
document.getElementById('photo3').value = '';
document.getElementById('outputCode').value = '';
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);
}
window.onload = function() {
document.getElementById('fc').value = 'Jordi Webber';
document.getElementById('photo1').value = 'https://i.pinimg.com/736x/d6/da/85/d6da855692e60888bc30c74b51cfc82b.jpg';
document.getElementById('photo2').value = 'https://i.pinimg.com/736x/2a/20/9d/2a209db23d68e5d388cb934351a847d0.jpg';
document.getElementById('photo3').value = 'https://i.pinimg.com/736x/15/2f/3c/152f3c92f5766cc1ba920496ae41d2c0.jpg';
generateTraveler();
};
</script>
</body>
</html>[/html]