123
Шаблон редакт лс
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться12026-04-08 18:22:56
- Администратор
Маттиас Райндт Am I garbage or God?
Am Igarbage or God?
Church or a trashcan?
Either way you're awaste of my time - Сообщений: 17
- Уважение: +3
- Совы: 123
- Люмены: 123
You can't take this from me
Forbidden in Heaven and useless in Hell
Поделиться22026-04-08 18:23:23
- Администратор
Маттиас Райндт Am I garbage or God?
Am Igarbage or God?
Church or a trashcan?
Either way you're awaste of my time - Сообщений: 17
- Уважение: +3
- Совы: 123
- Люмены: 123
You can't take this from me
Forbidden in Heaven and useless in Hell
[html]<section class='personalpage'>
<div class='pp-twinks charlist '>
<a href="/profile.php?id=2" class="profile-card"></a>
<a href="/profile.php?id=2" class="profile-card"></a>
<a href="/profile.php?id=2" class="profile-card"></a>
</div>
<div class='char-menu'><img src='https://i.pinimg.com/736x/e2/2f/a9/e22fa90e3e54c831652f6a82bedc812d.jpg' class='page-bg'>
<div class='char-av-wrap mainchar'>
<img src='https://i.pinimg.com/736x/ae/a9/96/aea996018ee4827b53245e1922ca46d5.jpg' class='user-av'>
<a href='#'></a>
</div>
<charname>name surname </charname>
<charquote>какая-то цитата, куда можно включить и толстенькую <a href='#'>ссылку</a> при желании</charquote>
<div class='char-basis'>
<loyalty>лояльность</loyalty>
<charocc>длинное описание деятельности</charocc>
</div>
</div>
<div class="vtabs-wrapper"><div class="vtabs-cont"><div class="vtab-buttons">
<button class="vtab-btn">Вкладка 1</button>
<button class="vtab-btn">Вкладка 2</button>
<button class="vtab-btn">Вкладка 3</button>
</div>
<div class="vtab-content">
<div class='pp-chron' data-title='эпизоды'><div>
<ep class='ep_1'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>
<ep class='ep_0'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>
</div></div>
<!---------------- АРТЕФАКТЫ --------------------------------------------------------------->
<div class='pp-art' data-title='артефакты'><div>
<art>
<img src='https://forumstatic.ru/files/001c/af/2d/51277.png'>
<div>
<ttl>название артефакта</ttl>
<desc>очень краткое описание артефакта</desc>
</div></art>
<art>
<img src='https://forumstatic.ru/files/001c/af/2d/51277.png'>
<div>
<ttl>название артефакта</ttl>
<desc>очень краткое описание артефакта</desc>
</div></art>
</div></div>
<!-------------------- ПОДПИСКИ ------------------------------------------------------->
<div class='pp-coupons' data-title='подписки'><div>
<coupon class='ep_1'>
<img src='https://forumstatic.ru/files/001c/af/2d/81568.png'>
<ppnum>1</ppnum>
<ttl>название и назначение</ttl>
</coupon>
</div></div>
</div>
<!--------------------------- ВТОРАЯ ВКЛАДКА --------------------------------------------------------->
<div class="vtab-content">
<!----------- ФОТО ---------------------------------------------------------->
<div class='pp-photo' ><div>
<pphoto><img src='https://i.pinimg.com/736x/42/19/ab/4219abb2cf753c9fcbef742192d46d1b.jpg'></pphoto>
<pphoto><img src='https://i.pinimg.com/736x/ca/8c/f2/ca8cf264ed27a9cee8fc66d7a2b7f9f7.jpg'></pphoto>
<pphoto><img src='https://i.pinimg.com/736x/e2/e0/70/e2e070cc77f81f214d863b4e65d5e284.jpg'></pphoto>
</div></div>
<!----------- ИВЕНТЫ ---------------------------------------------------------->
<div class='pp-events' data-title='ивенты'><div>
<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание, в каком ивенте поучаствовал человек</ttl>
</event>
<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание ивента </ttl>
</event>
</div></div>
<!----------- КАРТЫ ТАРО ------------------------------------------------------>
<div class="pp-tarot" data-title="карты таро"><div>
<tarot>
<img src="https://forumstatic.ru/files/001c/af/2d/51277.png">
<div>
<ttl>название карты</ttl>
<desc>краткое описание карты </desc>
</div></tarot>
</div></div>
</div>
<!--------------------------- ТРЕТЬЯ ВКЛАДКА --------------------------------------------------------->
<div class="vtab-content">
<div class="pp-bgs" data-title="фоны профиля"><div>
<img src='https://i.pinimg.com/736x/e1/86/74/e18674d396c44701b40903e6416b868b.jpg'>
<img src='https://i.pinimg.com/736x/e1/86/74/e18674d396c44701b40903e6416b868b.jpg'>
</div></div>
<div class="pp-ppbgs" data-title="фоны страницы"><div>
<img src='https://i.pinimg.com/736x/e1/86/74/e18674d396c44701b40903e6416b868b.jpg'>
<img src='https://i.pinimg.com/736x/e1/86/74/e18674d396c44701b40903e6416b868b.jpg'>
</div></div>
<div class="pp-plaques" data-title="плашки"><div>
<div class="plaque"><p>You can't take this from me</p><p>Forbidden in Heaven and useless in Hell</p><img src="https://i.pinimg.com/736x/93/f2/50/93f250cf38c199905558191666c744f0.jpg"></div>
</div></div>
</div></div></div>
</section>
[/html][hideprofile]
Поделиться32026-04-08 19:26:32
- Администратор
Маттиас Райндт Am I garbage or God?
Am Igarbage or God?
Church or a trashcan?
Either way you're awaste of my time - Сообщений: 17
- Уважение: +3
- Совы: 123
- Люмены: 123
You can't take this from me
Forbidden in Heaven and useless in Hell
[html]<style>
.lp-editor {
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
color: var(--cl5, #333);
background: url(https://forumstatic.ru/files/001c/af/2d/13055.jpg) repeat center / 100%;
border: 1px solid rgba(175, 175, 175, 1);
}
.lp-editor-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
border-bottom: 2px solid var(--cl9, #ddd);
padding-bottom: 10px;
}
.lp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.lp-full {
grid-column: 1 / -1;
}
.lp-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.lp-label {
font-size: 13px;
font-weight: bold;
color: var(--cl5, #555);
}
.lp-input, .lp-textarea {
width: 100%;
padding: 10px;
border: 1px solid var(--bord, #ccc);
border-radius: 4px;
background: var(--pn, #fff);
color: var(--cl2, #333);
box-sizing: border-box;
font-family: inherit;
transition: border-color 0.2s;
}
.lp-input:focus, .lp-textarea:focus {
border-color: var(--cl3, #007bff);
outline: none;
}
.lp-textarea {
resize: vertical;
min-height: 80px;
}
.lp-dynamic-section {
background: rgba(0,0,0,0.03);
padding: 15px;
border-radius: 6px;
border: 1px dashed var(--cl9, #ccc);
margin-bottom: 20px;
}
.lp-dynamic-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
font-weight: bold;
}
.lp-btn-add {
background: rgb(158 87 64 / 1);
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
.lp-btn-add:hover { filter: brightness(1.1); }
.lp-item {
display: flex;
gap: 10px;
margin-bottom: 10px;
align-items: center;
background: var(--pn, #fff);
padding: 10px;
border: 1px solid var(--bord, #eee);
border-radius: 4px;
position: relative;
}
.lp-item-content {
display: flex;
flex-grow: 1;
gap: 10px;
flex-wrap: wrap;
}
.lp-item-content > * { flex: 1; min-width: 150px; }
.lp-checkbox-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
cursor: pointer;
flex: 0 0 auto !important;
}
.lp-btn-remove {
background: #dc3545;
color: #fff;
border: none;
border-radius: 3px;
width: 28px;
height: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-shrink: 0;
}
.lp-btn-remove:hover { filter: brightness(1.1); }
.lp-btn-copy {
background: rgb(158 87 64 / 1);
color: #fff;
border: none;
padding: 15px;
width: 100%;
font-size: 16px;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
transition: 0.2s;
text-transform: uppercase;
letter-spacing: 1px;
}
.lp-btn-copy:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.lp-preview-wrapper {
margin-top: 30px;
border: 2px solid var(--cl3, #007bff);
border-radius: 8px;
padding: 20px;
background: var(--pn, #fff);
position: relative;
background: url(https://forumstatic.ru/files/001c/af/2d/13055.jpg) repeat center / 100%;
border: 1px solid rgba(175, 175, 175, 1);
}
.lp-preview-label {
position: absolute;
top: 0; left: 0;
background: rgba(175, 175, 175, 1);
color: #fff;
padding: 5px 15px;
font-size: 12px;
font-weight: bold;
border-bottom-right-radius: 8px;
border-top-left-radius: 6px;
z-index: 10;
}
</style>
<div class="lp-editor" id="live-editor">
<div class="lp-editor-title">Генератор личной страницы</div>
<div class="lp-grid">
<div class="lp-group">
<span class="lp-label">Имя и Фамилия</span>
<input type="text" class="lp-input" name="char-name" placeholder="Name Surname">
</div>
<div class="lp-group">
<span class="lp-label">Ссылка на Аватар (user-av)</span>
<input type="text" class="lp-input" name="char-av" placeholder="https://...">
</div>
<div class="lp-group">
<span class="lp-label">Лояльность</span>
<input type="text" class="lp-input" name="char-loyal" placeholder="Ваша лояльность">
</div>
<div class="lp-group">
<span class="lp-label">Ссылка на фон (page-bg)</span>
<input type="text" class="lp-input" name="char-bg" placeholder="https://...">
</div>
<div class="lp-group lp-full">
<span class="lp-label">Цитата / Статус</span>
<input type="text" class="lp-input" name="char-quote" placeholder="Любая цитата...">
</div>
<div class="lp-group lp-full">
<span class="lp-label">Род деятельности (charocc)</span>
<textarea class="lp-textarea" name="char-occ" placeholder="Длинное описание деятельности..."></textarea>
</div>
</div>
<div class="lp-dynamic-section">
<div class="lp-dynamic-header">
<span>Твинки (Связи)</span>
<button class="lp-btn-add" onclick="lpAddTwink()">+ Добавить твинка</button>
</div>
<div id="lp-twinks-container"></div>
</div>
<div class="lp-dynamic-section">
<div class="lp-dynamic-header">
<span>Эпизоды</span>
<button class="lp-btn-add" onclick="lpAddEpisode()">+ Добавить эпизод</button>
</div>
<div id="lp-episodes-container"></div>
</div>
<button class="lp-btn-copy" onclick="lpCopyCode()">Скопировать код</button>
</div>
<div class="lp-preview-wrapper">
<div class="lp-preview-label">LIVE ПРЕВЬЮ</div>
<div id="lp-preview-box" style="margin-top: 20px;">
</div>
</div>
[/html][hideprofile]
Страница: 1
