Коды картинки фигинки
Сообщений 1 страница 6 из 6
Поделиться2Вчера 23:23:15
/* =========================================================
DOKKAEBI — ЛИЧНОЕ ЗВАНИЕ
========================================================= */
.dk-lz-name {
color: #d5ae6d !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
}
.dk-lz-name:hover {
color: #f0d39e !important;
}
.dk-lz {
max-width: 210px;
color: #9e896d !important;
font-family: Arial, sans-serif !important;
font-size: 9px !important;
line-height: 1.45 !important;
text-align: center !important;
}Поделиться3Вчера 23:50:17
Код:
/* =========================================================
DOKKAEBI — ЛИЧНОЕ ЗВАНИЕ
========================================================= */
Проба
Поделиться6Сегодня 00:06:41
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOKKAEBI · генератор анкет</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap');
:root{
--bg:#0d0a06;
--panel:#1c150d;
--panel2:#241b10;
--line:#6b5227;
--gold:#d4a94e;
--gold-bright:#f0c65a;
--gold-soft:#fadc9f;
--text:#e8d5a8;
--text-dim:#a9884e;
--disp:'Cormorant Garamond', serif;
--body:'Jost', sans-serif;
}
*{box-sizing:border-box;}
body{
margin:0; padding:32px;
background:var(--bg);
color:var(--text);
font-family:var(--body);
font-size:14px;
line-height:1.5;
}
.wrap{
max-width:1200px; margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:28px;
align-items:start;
}
h1{
grid-column:1/-1;
font-family:var(--disp);
font-size:42px; font-weight:600;
color:var(--gold-bright);
letter-spacing:4px; text-transform:uppercase;
text-align:center; margin:0 0 4px;
}
.sub{
grid-column:1/-1; text-align:center;
color:var(--text-dim); font-size:12px;
letter-spacing:2px; text-transform:uppercase;
margin-bottom:20px;
}
.card{
background:var(--panel);
border:1px solid var(--line);
border-radius:20px;
padding:26px 28px;
}
.card h2{
font-family:var(--disp); font-size:22px; font-weight:600;
color:var(--gold); letter-spacing:2px; text-transform:uppercase;
margin:0 0 18px; padding-bottom:10px;
border-bottom:1px solid var(--line);
}
label{
display:block; font-size:10px; text-transform:uppercase;
letter-spacing:1px; color:var(--text-dim); margin:14px 0 5px;
}
input[type=text], textarea{
width:100%; background:var(--bg);
border:1px solid var(--line); border-radius:12px;
color:var(--text); padding:10px 14px;
font-family:var(--body); font-size:13px;
transition:border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus{
outline:none; border-color:var(--gold);
box-shadow:0 0 0 3px rgba(201,164,76,.15);
}
textarea{min-height:120px; resize:vertical;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.photos-list input{margin-bottom:8px;}
button{
font-family:var(--body); cursor:pointer;
border:none; border-radius:12px;
transition:all .25s ease;
}
.btn-add{
background:var(--panel2); color:var(--gold);
border:1px solid var(--line);
padding:8px 16px; font-size:12px; margin-top:4px;
}
.btn-add:hover{border-color:var(--gold); color:var(--gold-bright);}
.actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}
.btn-main{
background:var(--gold); color:#1c150d;
padding:12px 22px; font-size:13px; font-weight:500;
text-transform:uppercase; letter-spacing:1px;
}
.btn-main:hover{background:var(--gold-bright); box-shadow:0 4px 18px rgba(240,198,90,.35);}
.btn-ghost{
background:transparent; color:var(--text-dim);
border:1px solid var(--line); padding:12px 18px; font-size:12px;
}
.btn-ghost:hover{color:var(--gold); border-color:var(--gold);}
/* ---- ПРЕДПРОСМОТР АНКЕТЫ ---- */
.preview-wrap{position:sticky; top:32px;}
.anketa{
background:var(--panel);
border:1px solid var(--line);
border-radius:20px;
overflow:hidden;
position:relative;
}
.anketa-hero{
position:relative;
padding:34px 30px 26px;
text-align:center;
background-size:cover; background-position:center;
}
.anketa-hero:before{
content:""; position:absolute; inset:0;
background:linear-gradient(to bottom, rgba(13,10,6,.55), rgba(13,10,6,.9));
}
.anketa-hero > *{position:relative; z-index:2;}
.anketa-ava{
width:96px; height:96px; margin:0 auto 14px;
border-radius:14px; object-fit:cover;
border:2px solid var(--gold);
box-shadow:0 4px 20px rgba(0,0,0,.6);
display:block;
}
.anketa-name{
font-family:var(--disp); font-size:34px; font-weight:600;
color:var(--gold-bright); letter-spacing:3px; text-transform:lowercase;
line-height:1; margin:0;
text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.anketa-face{
font-family:var(--disp); font-style:italic; font-size:15px;
color:var(--text); margin-top:6px;
}
.anketa-pills{
display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
margin-top:18px;
}
.anketa-pill{
border:1px solid var(--gold); border-radius:20px;
padding:5px 16px; font-family:var(--disp); font-style:italic;
font-size:13px; color:var(--gold); background:rgba(13,10,6,.4);
}
.anketa-pill-vals{
display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
margin-top:8px;
}
.anketa-pill-val{
flex:1; min-width:90px; text-align:center;
font-size:12px; color:var(--text);
}
.anketa-divider{
border:none; border-top:1px dashed var(--line);
margin:0;
}
.anketa-body{
padding:24px 30px;
font-family:var(--body); font-size:13px; line-height:1.7;
color:var(--text); text-align:justify;
white-space:pre-wrap;
}
.anketa-extra{
padding:0 30px 26px;
}
.anketa-extra-title{
font-family:var(--disp); font-size:16px; color:var(--gold);
letter-spacing:1px; text-transform:uppercase; margin-bottom:8px;
text-align:center;
}
.anketa-extra-box{
background:var(--bg); border:1px solid var(--line);
border-radius:12px; padding:14px 18px;
font-size:12px; color:var(--text-dim); line-height:1.6;
white-space:pre-wrap;
}
.hint{font-size:11px; color:var(--text-dim); margin-top:4px;}
.toast{
position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
background:var(--gold); color:#1c150d;
padding:12px 24px; border-radius:12px; font-size:13px; font-weight:500;
opacity:0; pointer-events:none; transition:opacity .3s; z-index:99;
}
.toast.show{opacity:1;}
@media(max-width:900px){ .wrap{grid-template-columns:1fr;} .preview-wrap{position:static;} }
</style>
</head>
<body>
<div class="wrap">
<h1>Dokkaebi</h1>
<div class="sub">генератор анкет — заполни поля, скопируй код</div>
<!-- ЛЕВАЯ КОЛОНКА: ФОРМА -->
<div class="card">
<h2>Заполнение</h2>
<div class="row">
<div><label>Имя</label><input type="text" id="name" placeholder="name"></div>
<div><label>Фамилия</label><input type="text" id="surname" placeholder="surname"></div>
</div>
<label>Фото (ссылки)</label>
<div class="photos-list" id="photos">
<input type="text" class="photo" placeholder="https://ссылка-на-фото.png">
</div>
<button class="btn-add" onclick="addPhoto()">+ ещё фото</button>
<div class="row">
<div><label>Имя внешности</label><input type="text" id="faceName" placeholder="name surname"></div>
<div><label>Группа / актёр / соло</label><input type="text" id="faceGroup" placeholder="группа"></div>
</div>
<div class="row">
<div><label>Возраст</label><input type="text" id="age" placeholder="24 года"></div>
<div><label>Место жительства</label><input type="text" id="place" placeholder="сеул, корея"></div>
</div>
<label>Занятость</label>
<input type="text" id="job" placeholder="род занятий">
<label>Текст анкеты</label>
<textarea id="bio" placeholder="Текст анкеты с любой нужной информацией о персонаже."></textarea>
<label>Манера игры (доп. блок)</label>
<textarea id="extra" placeholder="Темп игры, от какого лица пишете, и всё такое." style="min-height:70px"></textarea>
<div class="actions">
<button class="btn-main" onclick="copyCode()">Скопировать код</button>
<button class="btn-ghost" onclick="clearAll()">Очистить</button>
</div>
</div>
<!-- ПРАВАЯ КОЛОНКА: ПРЕДПРОСМОТР -->
<div class="preview-wrap">
<div class="card" style="padding:0; overflow:visible;">
<div style="padding:18px 28px 0"><h2 style="border:none; margin:0;">Предпросмотр</h2></div>
<div style="padding:0 20px 20px">
<div class="anketa" id="preview"></div>
</div>
</div>
</div>
</div>
<div class="toast" id="toast">Код скопирован ✦</div>
<script>
function addPhoto(){
const d=document.createElement('input');
d.type='text'; d.className='photo'; d.placeholder='https://ссылка-на-фото.png';
d.addEventListener('input', render);
document.getElementById('photos').appendChild(d);
}
function val(id){return (document.getElementById(id).value||'').trim();}
function photos(){return [...document.querySelectorAll('.photo')].map(i=>i.value.trim()).filter(Boolean);}
function esc(s){return (s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');}
// собираем HTML анкеты (для форума)
function buildHTML(){
const ph=photos();
const ava=ph[0]||'';
const name=(val('name')+' '+val('surname')).trim()||'name surname';
const face=val('faceName'); const grp=val('faceGroup');
const faceLine=(face||grp)?`${face}${grp?' ('+grp+')':''}`:'';
const pills=[];
if(val('age')) pills.push(['возраст',val('age')]);
if(val('place')) pills.push(['место жительства',val('place')]);
if(val('job')) pills.push(['занятость',val('job')]);
let h='';
h+='<div class="mantra-profile">\n';
h+=' <div class="mantra-profile-hero"'+(ava?` style="background-image:url(${esc(ava)})"`:'')+'>\n';
if(ava) h+=` <img class="mantra-profile-ava" src="${esc(ava)}">\n`;
h+=` <div class="mantra-profile-name">${esc(name)}</div>\n`;
if(faceLine) h+=` <div class="mantra-profile-face">${esc(faceLine)}</div>\n`;
if(pills.length){
h+=' <div class="mantra-profile-pills">';
h+=pills.map(p=>`<span class="mantra-pill">${esc(p[0])}</span>`).join('');
h+='</div>\n';
h+=' <div class="mantra-profile-vals">';
h+=pills.map(p=>`<span class="mantra-val">${esc(p[1])}</span>`).join('');
h+='</div>\n';
}
h+=' </div>\n';
h+=' <hr class="mantra-profile-divider">\n';
h+=` <div class="mantra-profile-body">\n <p>${esc(val('bio')||'Текст анкеты.')}</p>\n </div>\n`;
if(val('extra')){
h+=' <div class="mantra-profile-extra">\n';
h+=' <div class="mantra-profile-extra-title">манера игры</div>\n';
h+=` <div class="mantra-profile-extra-box">${esc(val('extra'))}</div>\n`;
h+=' </div>\n';
}
h+='</div>';
return h;
}
// предпросмотр (те же классы, но локальные anketa-*)
function render(){
const ph=photos(); const ava=ph[0]||'';
const name=(val('name')+' '+val('surname')).trim()||'name surname';
const face=val('faceName'); const grp=val('faceGroup');
const faceLine=(face||grp)?`${face}${grp?' ('+grp+')':''}`:'';
const pills=[];
if(val('age')) pills.push(['возраст',val('age')]);
if(val('place')) pills.push(['место жительства',val('place')]);
if(val('job')) pills.push(['занятость',val('job')]);
let h='';
h+=`<div class="anketa-hero"${ava?` style="background-image:url(${esc(ava)})"`:''}>`;
if(ava) h+=`<img class="anketa-ava" src="${esc(ava)}">`;
h+=`<div class="anketa-name">${esc(name)}</div>`;
if(faceLine) h+=`<div class="anketa-face">${esc(faceLine)}</div>`;
if(pills.length){
h+='<div class="anketa-pills">'+pills.map(p=>`<span class="anketa-pill">${esc(p[0])}</span>`).join('')+'</div>';
h+='<div class="anketa-pill-vals">'+pills.map(p=>`<span class="anketa-pill-val">${esc(p[1])}</span>`).join('')+'</div>';
}
h+='</div>';
h+='<hr class="anketa-divider">';
h+=`<div class="anketa-body">${esc(val('bio')||'Текст анкеты.')}</div>`;
if(val('extra')){
h+='<div class="anketa-extra"><div class="anketa-extra-title">манера игры</div>';
h+=`<div class="anketa-extra-box">${esc(val('extra'))}</div></div>`;
}
document.getElementById('preview').innerHTML=h;
}
function copyCode(){
const code='[html]\n'+buildHTML()+'\n[/html]';
navigator.clipboard.writeText(code).then(()=>{
const t=document.getElementById('toast'); t.classList.add('show');
setTimeout(()=>t.classList.remove('show'),1800);
});
}
function clearAll(){
document.querySelectorAll('input,textarea').forEach(i=>i.value='');
document.querySelectorAll('.photo').forEach((p,i)=>{if(i>0)p.remove();});
render();
}
document.querySelectorAll('input,textarea').forEach(i=>i.addEventListener('input',render));
render();
</script>
</body>
</html>[/html]






