dokkaebi

DOKKAEBI

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » DOKKAEBI » Новый форум » Коды картинки фигинки


Коды картинки фигинки

Сообщений 1 страница 6 из 6

1

https://upforme.ru/uploads/001c/c6/54/3/142445.png
https://upforme.ru/uploads/001c/c6/54/3/41438.png
https://upforme.ru/uploads/001c/c6/54/3/353569.png
https://upforme.ru/uploads/001c/c6/54/3/t622236.png

Код:
[img]https://upforme.ru/uploads/001c/c6/54/3/142445.png[/img]
Код:
[img]https://upforme.ru/uploads/001c/c6/54/3/41438.png[/img]
Код:
[img]https://upforme.ru/uploads/001c/c6/54/3/353569.png[/img]
Код:
https://upforme.ru/uploads/001c/c6/54/3/622236.png

0

2

Код:
/* =========================================================
   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;
}

0

3

Sehrin написал(а):

Код:
/* =========================================================
   DOKKAEBI — ЛИЧНОЕ ЗВАНИЕ
   ========================================================= */

Проба

0

Перевести4

https://upforme.ru/uploads/001c/c6/54/2/t102613.png

0

Перевести5

https://upforme.ru/uploads/001c/c6/54/3/t378727.png

0

6

[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,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}

// собираем 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]

0


Вы здесь » DOKKAEBI » Новый форум » Коды картинки фигинки


Рейтинг форумов | Создать форум бесплатно