[html]
<div class="sk-wrap">
<!-- =====================================
ЛЕВЫЕ И ЦЕНТРАЛЬНЫЕ ЗОНЫ
===================================== -->
<div class="sk-label sk-label-welcome">WELCOME</div>
<div class="sk-label sk-label-reserved">ЗАБРОНИРОВАНО</div>
<div class="sk-label sk-label-bought">ВЫКУПЛЕНО</div>
<a href="#" class="sk-link sk-welcome-center"></a>
<a href="#" class="sk-link sk-holidays-link"></a>
<a href="#" class="sk-link sk-weekends-link"></a>
<a href="#" class="sk-link sk-reserved-link"></a>
<!-- =====================================
ЦЕНТРАЛЬНЫЙ WELCOME
===================================== -->
<div class="sk-text sk-center-text">
- очередная корея и тест.
<br>- делаем акцент на том, что это реал с примесью мистики.
<br>- за <b>гостями</b> придерживаем внешность на сутки, за <b>зарегистрированными участниками</b> — до открытия при условии наличия сообщения в день придержания (с 00 до 00). все даты включительно.
<br>- на одного персонажа — не более пяти твинков. все твинки платные, приобрести их можно в банке.
<br>- для каждой внешности создаётся отдельный профиль. после покупки твинка даются сутки на регистрацию.
</div>
<!-- =====================================
ПРАЗДНИЧНЫЕ
===================================== -->
<div class="sk-text sk-holidays-text">
<div class="sk-date">10.10</div>
[skz] hwang hyunjin - пабо<br>
[enhypen] kim sunoo - ого<br>
[ateez] jung wooyoung - зимняя вишня<br>
<div class="sk-date">до открытия</div>
[skz] lee felix - <a href="https://muwol.f-rpg.me/profile.php?id=6">увядающая сирень</a> <br>
[ateez] jeong yunho - <a href="https://muwol.f-rpg.me/profile.php?id=4">onyx</a> <br>
[ateez] song mingi - <a href="https://muwol.f-rpg.me/profile.php?id=5">fenrir</a> <br>
name [group] - nickname<br>
</div>
<!-- =====================================
ВЫХОДНЫЕ
===================================== -->
<div class="sk-text sk-weekends-text">
<div class="sk-date">за амс</div>
[ateez] kim hongjoong - <a href="https://muwol.f-rpg.me/profile.php?id=2">dokkaebi</a> <br>
[skz] lee minho - <a href="https://muwol.f-rpg.me/profile.php?id=2">dokkaebi</a> <br>
[bts] jeon jungkook - <a href="https://muwol.f-rpg.me/profile.php?id=2">dokkaebi</a> <br>
<div class="sk-date">00.00</div>
name [group] - nickname<br>
name [group] - nickname<br>
name [group] - nickname<br>
name [group] - nickname<br>
name [group] - nickname<br>
<div class="sk-date">00.00</div>
name [group] - nickname<br>
name [group] - nickname<br>
name [group] - nickname<br>
name [group] - nickname<br>
name [group] - nickname<br>
</div>
</div>
<style>
.sk-wrap{
width:900px;
height:450px;
margin:20px auto;
position:relative;
overflow:hidden;
background-image:url("https://forumstatic.ru/files/001c/cf/61/18934.png");
background-repeat:no-repeat;
background-position:center;
background-size:100% 100%;
}
/* =========================================
НАДПИСИ В ПУСТЫХ ЗОНАХ
========================================= */
.sk-label{
position:absolute;
z-index:25;
font-family:Georgia,"Times New Roman",serif;
font-size:7px;
letter-spacing:2px;
color:#8f5558;
text-align:center;
white-space:nowrap;
}
/* WELCOME */
.sk-label-welcome{
left:305px;
top:45px;
width:190px;
}
/* ЗАБРОНИРОВАНО */
.sk-label-reserved{
left:496px;
top:45px;
width:200px;
}
/* ВЫКУПЛЕНО */
.sk-label-bought {
left: 678px;
top: 45px;
width: 170px;
}
/* =========================================
НЕВИДИМЫЕ РАБОЧИЕ ЗОНЫ
========================================= */
.sk-link{
position:absolute;
display:block;
z-index:10;
}
/* левая welcome */
.sk-welcome-left{
left:45px;
top:55px;
width:285px;
height:300px;
}
/* центральный welcome */
.sk-welcome-center{
left:365px;
top:55px;
width:320px;
height:270px;
overflow-y:auto;
overflow-x:hidden;
}
/* праздничные */
.sk-holidays-link{
left:715px;
top:45px;
width:170px;
height:410px;
}
/* выходные */
.sk-weekends-link{
left:905px;
top:45px;
width:170px;
height:410px;
}
/* придержанные роли */
.sk-reserved-link{
left:365px;
top:590px;
width:715px;
height:130px;
}
/* =========================================
ТЕКСТОВЫЕ СЛОИ
========================================= */
.sk-text{
position:absolute;
z-index:20;
box-sizing:border-box;
}
/* левый текст */
.sk-left-text{
left:72px;
top:88px;
width:255px;
color:#eadbd7;
font-family:Georgia,"Times New Roman",serif;
font-size:11px;
line-height:1.45;
text-align:justify;
}
/* центральный текст */
.sk-center-text{
left:311px;
top:65px;
width:190px;
color:#513b3c;
font-family:Georgia,"Times New Roman",serif;
font-size:11px;
line-height:1.5;
text-align:justify;
overflow-y:auto;
overflow-x:hidden;
height:130px;
padding:7px;
}
/* =========================================
ПРАЗДНИЧНЫЕ
========================================= */
.sk-holidays-text{
left:530px;
top:53px;
width:147px;
color:#4d393a;
font-family:Georgia,"Times New Roman",serif;
font-size:11px;
line-height:1.55;
overflow-y:auto;
overflow-x:hidden;
height:250px;
}
/* =========================================
ВЫХОДНЫЕ
========================================= */
.sk-weekends-text{
left:701px;
top:53px;
width:141px;
color:#4d393a;
font-family:Georgia,"Times New Roman",serif;
font-size:11px;
line-height:1.55;
overflow-y:auto;
overflow-x:hidden;
height:250px;
}
/* даты */
.sk-date{
color:#a04e50;
font-weight:bold;
text-align:center;
margin:7px 0;
}
/* =========================================
ПРИДЕРЖАННЫЕ РОЛИ
========================================= */
.sk-reserved-text{
left:405px;
top:625px;
width:630px;
font-family:Georgia,"Times New Roman",serif;
font-size:11px;
color:#513b3c;
}
/* =========================================
INPUTS
========================================= */
.sk-input{
height:29px;
box-sizing:border-box;
border:1px solid rgba(100,60,60,.18);
border-radius:5px;
background:rgba(255,248,245,.70);
color:#503b3c;
padding:0 10px;
font-family:Georgia,"Times New Roman",serif;
font-size:10px;
outline:none;
}
.sk-name{
width:245px;
}
.sk-face{
width:245px;
margin-left:8px;
}
.sk-copy{
display:inline-flex;
width:65px;
height:29px;
margin-left:8px;
align-items:center;
justify-content:center;
border-radius:5px;
background:#a66a6b;
color:#f8e8e3;
font-size:9px;
}
/* =========================================
КНОПКИ
========================================= */
.sk-button{
display:inline-block;
padding:6px 12px;
margin-top:8px;
border-radius:4px;
background:#edd9d3;
color:#593f40;
font-size:10px;
}
.sk-button.active{
background:#9f6263;
color:#f8e7e2;
}
/* =========================================
УБИРАЕМ ССЫЛКИ/ТЕКСТ НА МОБИЛЬНЫХ
========================================= */
@media(max-width:1150px){
.sk-wrap{
transform-origin:top center;
transform:scale(.9);
margin-bottom:-75px;
}
}
</style>
<script>
(function(){
function sortColumn(selector){
document.querySelectorAll(selector).forEach(function(column){
var children = Array.from(column.childNodes);
var groups = [];
var currentGroup = null;
var currentLine = [];
function saveLine(){
var nodes = currentLine.filter(function(node){
return !(
node.nodeType === 3 &&
node.textContent.trim() === ''
);
});
currentLine = [];
if(!currentGroup || !nodes.length){
return;
}
var text = nodes
.map(function(node){
return node.textContent || '';
})
.join('')
.replace(/\s+/g,' ')
.trim();
if(text){
currentGroup.items.push({
nodes:nodes,
text:text
});
}
}
children.forEach(function(node){
/* новый заголовок даты */
if(
node.nodeType === 1 &&
node.classList.contains('sk-date')
){
saveLine();
currentGroup = {
date:node,
items:[]
};
groups.push(currentGroup);
return;
}
/* перенос строки */
if(
node.nodeType === 1 &&
node.tagName === 'BR'
){
saveLine();
return;
}
/* обычный текст, ссылка и т.д. */
currentLine.push(node);
});
saveLine();
/*
* Если дата существует, сортируем записи
* только внутри этой даты.
*/
groups.forEach(function(group){
group.items.sort(function(a,b){
return a.text.localeCompare(
b.text,
'ru',
{
sensitivity:'base',
numeric:true
}
);
});
});
/*
* Пересобираем колонку.
* CSS при этом вообще не меняется.
*/
var fragment = document.createDocumentFragment();
groups.forEach(function(group){
fragment.appendChild(group.date);
group.items.forEach(function(item){
item.nodes.forEach(function(node){
fragment.appendChild(node);
});
fragment.appendChild(
document.createElement('br')
);
});
});
/*
* Если в колонке есть текст до первой даты,
* он сохраняется.
*/
var hasDate = groups.length > 0;
if(hasDate){
column.innerHTML = '';
column.appendChild(fragment);
}
});
}
/* праздничные */
sortColumn('.sk-holidays-text');
/* выходные */
sortColumn('.sk-weekends-text');
})();
</script>
[/html]
[hideprofile]
