Информация

JavaScript должен быть включен. С отключенным JavaScript функционал форума недоступен.
</noscript> <!-- Мгновенные уведомления © Alex_63, 2024 --> <link rel="stylesheet" type="text/css" href="//forumstatic.ru/f/ru/bestbb/notifications.css" /> <script type="text/javascript" src="//forumstatic.ru/f/ru/bestbb/notifications.js"></script> <!-- посты из важных тем --> <script type="text/javascript"> notifications.load('common', {}); notifications.load('important', {topics: [2921,6505,8996]}); </script> <script>notifications.load('subscriptions');</script><!-- подписки на форум/тему --> <script>notifications.load('fields', {fields: [1, 2], emptyNotify: true})</script><!-- изменения в полях профиля --> <script>notifications.load('mentions');</script><!-- упоминания --> <script>notifications.load('reports');</script><!-- Жалобы --> <script>notifications.load('new_user')</script><!-- регистрация юзеров --> <script>notifications.addons.tgbot.noInvite = true;</script> <!-- убрать подсказку про телегу --> <script>notifications.load('premod')</script><!-- премодерация --> <!-- Правка для уведомлений по клику на ник, в связи с измененной версткой профиля --> <script type="text/javascript"> $('#pun-viewtopic').on('click', '.fd-name a', function(e) {$(this).parents('.post').find('.pa-author a').trigger('click');}); </script> <!-- Голосовые сообщения © Alex_63, 2024 --> <link rel="stylesheet" type="text/css" href="//forumstatic.ru/f/ru/bestbb/voice.css" /> <script type="text/javascript" src="https://forumstatic.ru/f/ru/bestbb/voice.js"></script> <script>voice.startOnOpen = false</script> <style> .voice-modal .container { overflow: hidden; } </style> <!-- иконки font awesome --> <script src="https://kit.fontawesome.com/f50f12bcbf.js" crossorigin="anonymous"></script> <!-- free --> <script src="https://kit.fontawesome.com/c06ba4bb64.js" crossorigin="anonymous"></script> <!-- pro --> <!-- Скрипт для создания анкет © Alex_63 --> <style> .postlink a[href*="questionary"] {background: #f98561; border-bottom: 6px solid #e63737;} .postlink a[href*="questionary"]:hover {background: #e63737;} </style> <script type="text/javascript"> var Questnr = {}; Questnr.groups = [1,2,6,12,16]; //Группы, которым разрешено создавать шаблоны для анкет Questnr.forums = [4,5,6,19,2,22,108,121,1,144,90,179,151,133,184,123]; //Форумы с допуском к анкетированию Questnr.title = 'Заказ от '; //Начало заголовка темы с анкетой (по умолчанию) Questnr.noedit = 0; //Запрет редактирования заполненной анкеты пользователем </script> <script type="text/javascript"> ['viewforum','viewtopic','post','edit','searchposts'].indexOf($('.punbb')[0].id.substr(4))!=-1&& $().pun_mainReady(function(){var s='script',l='/files/0007/e3/f7/32678.js'; var f=$('#pun-viewforum').length?$('link[rel="alternate"]'):$('.crumbs a[href*="viewforum"]:last'); f=+f[0].href.match(/id=(\d+)$/)[1];Questnr.forums.indexOf(f)!=-1&&document.write('<'+s+' src="'+l+'"></'+s+'>')}); </script> <script> //работающий у всех кроме динозавров вариант //Questnr.allowReply = [+$('link[rel="alternate"]')[0].href.match(/id=(\d+)$/)?.[1]]; //текущая тема var curReplyMatch = $('link[rel="alternate"]')[0].href.match(/id=(\d+)$/); //если нашел текущую тему - массив, иначе 0 if (curReplyMatch) { Questnr.allowReply = [+curReplyMatch[1]]; } </script> <script> // Проверенные спецы var verifiedData = [ { id: '2', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>UI/UX дизайн</b>, <b>CSS/Верстка</b>, Javascript">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7032', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>PHP/Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7907', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>PHP/Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7006', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>Вебдизайн</b>, <b>Графический дизайн</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7181', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>DigitalArt</b> - цифровой рисунок, pixelart, анимация">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7130', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>CSS/Верстка</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7639', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Вебдизайн</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '6797', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '6489', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>PHP/Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '8926', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Вебдизайн</b>, <b>Верстка</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '5063', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Вебдизайн</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7884', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>дизайны для форумов MyBB</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' } ]; // Должности var dutyData = [ { id: '2', color: 'red', fld: '<li class="fd-duty rus">Главный администратор</li><li class="fd-duty eng">System support administrator</li>', }, { id: '7842', color: 'green', fld: '<li class="fd-duty rus">Модератор каталога графики</li><li class="fd-duty eng">Graphics Catalog Moderator</li>', }, { id: '7151', color: 'green', fld: '<li class="fd-duty rus">Модератор ролевых разделов</li><li class="fd-duty eng">Role-Playing Sections Moderator</li>', }, { id: '6995', color: 'green', fld: '<li class="fd-duty rus">Модератор стримов</li><li class="fd-duty eng">Streams Moderator</li>' }, { id: '9439', color: 'green', fld: '<li class="fd-duty rus">Модератор системы бонусов</li><li class="fd-duty eng">Bonus System Moderator</li>' }, { id: '9734', color: 'green', fld: '<li class="fd-duty rus">Ассистент англоязычной версии</li><li class="fd-duty eng">English Content Assistant</li>' }, { id: '9758', color: 'green', fld: '<li class="fd-duty rus">SMM менеджер</li><li class="fd-duty eng">SMM Manager</li>' } ]; // группы с доступом к закладкам var BookmGroups = [1,2,6,16,4,8,12]; </script> <!-- Редирект на портал <script> var portal = '/pages/index'; var TimeRedirect = 24*60*60; //Редирект при последнем посещении более суток var url = document.URL.split('#')[0]; if(!localStorage.LastVisit || RequestTime-localStorage.LastVisit > TimeRedirect){ if((url+'%a').split('/%')[1]=='a'&&url.indexOf('mod')==-1)location.href=portal; }localStorage.LastVisit = RequestTime; $(document).ready(function(){ var a = $('#pun-navlinks #navindex a')[0]; a.href = a.href+'=&forum' }); </script> --> <!-- стили спец постов --> <link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0007/e3/f7/34232.css?v=7"> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93794845, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/93794845" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </div> <div id="pun-title" class="section"> <table id="title-logo-table" cellspacing="0"> <tbody id="title-logo-tbody"> <tr id="title-logo-tr"> <td id="title-logo-tdl" class="title-logo-tdl"> <h1 class="title-logo"><span>ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов</span></h1> </td> <td id="title-logo-tdr" class="title-logo-tdr"><!-- banner_top --></td> </tr> </tbody> </table> </div> <div id="pun-navlinks" class="section"> <h2><span>Меню навигации</span></h2> <ul class="container"> <li id="navindex"><a href="https://forumd.ru/"><span>Форум</span></a></li> <li id="navuserlist"><a href="https://forumd.ru/userlist.php" rel="nofollow"><span>Участники</span></a></li> <li id="navrules"><a href="https://forumd.ru/misc.php?action=rules" rel="nofollow"><span>Правила</span></a></li> <li id="navsearch"><a href="https://forumd.ru/search.php" rel="nofollow"><span>Поиск</span></a></li> <li id="navregister"><a href="https://forumd.ru/register.php" rel="nofollow"><span>Регистрация</span></a></li> <li id="navlogin"><a href="https://forumd.ru/login.php" rel="nofollow"><span>Войти</span></a></li> </ul> </div> <div id="pun-ulinks" class="section" onclick="void(0)"> <h2><span>Пользовательские ссылки</span></h2> <ul class="container"> <li class="item1"><a href="https://forumd.ru/search.php?action=show_recent">Активные темы</a></li> </ul> </div> <!--noindex--> <div id="pun-announcement" class="section"> <h2><span>Объявление</span></h2> <div class="container"> <div class="html-box"> <!-- Юзер-меню --> <div id="user-menu" class="side-menu"> <div class="close"><i class="material-symbols-outlined">cancel</i></div> <div class="u-ava"></div> <div class="fd-guest g-inf rus"> <b>РЕГИСТРАЦИЯ</b> на форуме позволит: <li>скачивать <i>дизайны</i> и видеть <i>коды скриптов</i></li> <li>оставлять <i>ссылки</i> на сайты/картинки</li> <li><i>оформлять</i> заказы</li> <li>отправлять <i>личные</i> сообщения</li> <li><i>рекламировать</i> свои форумы/сайты или услуги</span> </div> <div class="fd-guest g-inf eng"> <b>REGISTRATION</b> on the forum allows you to: <li>download <i>designs</i> and view <i>script codes</i></li> <li>leave <i>links</i> to websites/images</li> <li><i>place</i> orders</li> <li>send <i>private</i> messages</li> <li><i>advertise</i> your forums/websites or services</li> </div> <ul class="u-menu"> <li class="fd-guest rus"><a href='/register.php'><span class='material-icons'>person</span> Регистрация</a></li> <li class="fd-guest rus"><a href='/login.php'><span class='material-icons'>login</span> Вход</a></li> <li class="fd-guest rus"><a href='/viewtopic.php?id=4506'><span class='material-icons'>message</span> Обратная связь</a></li> <li class="fd-guest eng"><a href='/register.php'><span class='material-icons'>person</span> Register</a></li> <li class="fd-guest eng"><a href='/login.php'><span class='material-icons'>login</span> Login</a></li> <li class="fd-guest eng"><a href='/viewtopic.php?id=7165'><span class='material-icons'>message</span> Feedback</a></li> </ul> </div> <!-- Сайдбар --> <div id="sidebar" class="rus"> <div class="u-ava" title="Меню профиля"></div> <div class="u-notif fd-user icon remake" title="Уведомления" id="notify-link" data-number-unread="0"> <a><em class="notify-link"><strong class="unreads">0</strong></em></a> </div> <div class="u-pm fd-user icon remake" title="Личные сообщения"></div> <div class="u-options icon"> <i class="material-symbols-outlined dark" title="Включить темную тему">dark_mode</i> <i class="material-symbols-outlined light" title="Включить светлую тему">light_mode</i> </div> <div class="u-arrow icon"> <div title="Наверх страницы" class="toTop"><i class="material-symbols-outlined">arrow_circle_up</i></div> <div title="Вниз страницы" class="onBottom"><i class="material-symbols-outlined">arrow_circle_down</i></div> </div> </div> <div id="sidebar" class="eng"> <div class="u-ava" title="Profile menu"></div> <div class="u-notif fd-user icon remake" title="Notifications" id="notify-link" data-number-unread="0"> <a><em class="notify-link"><strong class="unreads">0</strong></em></a> </div> <div class="u-pm fd-user icon remake" title="Private messages"></div> <div class="u-arrow icon"> <div title="Scroll to top" class="toTop"><i class="material-symbols-outlined">arrow_circle_up</i></div> <div title="Scroll to bottom" class="onBottom"><i class="material-symbols-outlined">arrow_circle_down</i></div> </div> </div> <!--кнопки стрелки вверх вниз--> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ if ($(window).scrollTop() > 250) { $(".toTop").fadeIn("slow"); } else { $(".toTop").fadeOut("slow"); } if ($(window).scrollTop() < $(document).height() - 999) { $(".onBottom").fadeIn("slow"); } else { $(".onBottom").fadeOut("slow"); } }); $(".toTop").click(function(){ $("html, body").animate({scrollTop: 0}, "slow"); }); $(".onBottom").click(function(){ $("html, body").animate({scrollTop: $(document).height()}, "slow"); }); }); </script> <!-- Меню --> <div id="nav"><ul class="inner"> <li id="logo"></li> <!-- <li id="navindex"><a href="/pages/index"><i class="material-symbols-outlined">home</i><span class="rus">Главная</span><span class="eng">Home</span></a></li> --> <li id="navforum"><a href="/=&forum"><i class="material-symbols-outlined">forum</i><span class="rus">Форум</span><span class="eng">Forum</span></a></li> <li id="navactive"><a href="/search.php?action=show_recent"><i class="material-symbols-outlined">chat</i><span class="rus">Активные темы</span><span class="eng">Active topics</span></a></li> <li id="navmembers"><a href="/userlist.php"><i class="material-symbols-outlined">group</i><span class="rus">Участники</span><span class="eng">Members</span></a></li> <li id="navsearch"><a href="/search.php"><i class="material-symbols-outlined">search</i><span class="rus">Поиск</span><span class="eng">Search</span></a></li> <li id="navadmin"><a href="/admin_index.php"><i class="material-symbols-outlined">shield_person</i><span class="rus">Админка</span><span class="eng">Admin</span></a></li> <li id="navguest"><a href="/register.php"><i class="material-symbols-outlined">passkey</i><span class="rus">Регистрация</span><span class="eng">Register</span></a></li> <li id="navguest"><a href="/login.php"><i class="material-symbols-outlined">login</i><span class="rus">Вход</span><span class="eng">Login</span></a></li> </ul></div> <!-- Смена языка --> <div id="langChange"><a class="material-icons">language</a><span class="eng"><b>Eng</b>/<a>Ru</a></span><span class="rus"><a>Eng</a>/<b>Ru</b></span></div> <!-- СЛАЙДЕР --> <div class="fd-slider"><!-- НАЧАЛО --> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/236383.jpg"> <div class="content"> <h3>&#127911; Подкаст «НЕ<b>ТЕ</b>РОЛЕВЫЕ»</h3> <p> Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ). </p> <a id="store" target="_blank" href="https://t.me/neterolevye">Telegram</a> <a id="store" href="/viewtopic.php?id=8954">Обсудить</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/808399.jpg"> <div class="content"> <h3>&#127809; Что такое осень? <b>Конкурс</b> осенних дизайнов!</h3> <p> Как вы выражаете осень на своём форуме/сайте? Что осень для вас? <br> Вас ждут вкусные призы за участие, призовой фонд растет вместе с числом участников! <br> Все участники гарантировано получают <b>рекламные места</b>. </p> <a id="store" href="/viewtopic.php?id=8918#p207189">Участвовать</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/965290.jpg"> <div class="content"> <h3>&#128293; Акция! Осенние <b>скидки</b> на Мгновенные уведомления</h3> <p> Оплачивая уведомления <b>до 1 ноября 2024</b>, вы можете получить скидки в 10% или 20% за наградные баллы! <br> <a href="/viewtopic.php?id=8045">Скрипт уведомлений</a> поддерживается уже более 5 лет и имеет много бесплатных дополнений. <br> Мы принимаем <b>все способы оплаты из любых стран</b>. </p> <a id="store" href="/viewtopic.php?id=8924#p207222">Подробности</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/993126.jpg"> <div class="content"> <h3>&#10084;&#65039; Поддержи проект! Стань модератором!</h3> <p> Разыскиваются модераторы на должности: <br> Модератор вебмастерских разделов, Ассистент англоязычной версии, Видеомонтажер и другие<br> <a href="/viewtopic.php?id=5787#p134326">Посмотреть вакансии и условия.</a> </p> <a id="store" href="/viewtopic.php?id=5787#p134326">Подать заявку</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/435761.jpg"> <div class="content"> <h3>&#128140; <b>Акция!</b> Подписка, лайк, коммент, репост!</h3> <p> В рамках акции вы можете помочь нам в продвижении и заработать НАГРАДНЫЕ БАЛЛЫ.<br> НБ можно обменивать на платные скрипты, скидки на заказы, рекламу на нашем форуме и т.д. <br> Подробнее о том, где еще можно потратить баллы, можно <a href="https://forumd.ru/viewtopic.php?id=8324#p206561">в теме акции</a>. </p> <a id="store" href="https://forumd.ru/viewtopic.php?id=8324#p206561">Участвовать</a> </div> </div> <div class="slide eng" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/209339.jpg"> <div class="content"> <h3>&#127775; SPECIAL OFFER: We distribute designs for free</h3> <p> Finalizing the layout for your project;<br> Developing a style code; <br> Mobile version included if you wish.<br> </p> <a id="store" href="/viewtopic.php?id=7243">Details</a> </div> </div> <div class="slide eng" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/209339.jpg"> <div class="content"> <h3>&#10084;&#65039; Support the project</h3> <p> If you want to help us:<br> <a href=/viewtopic.php?id=5787>Become a moderator</a><br> <a href="/viewtopic.php?id=7167">Suggestions</a> &#8226; <a href="/viewtopic.php?id=7168">Reviews</a> </p> <a id="store" href="/viewtopic.php?id=6616">Details</a> </div> </div> <!-- КОНЕЦ --><div class="fd-slider-dots"></div></div> <div class="bot-hr"></div> <!-- мини объявы --> <div id="ann" class="rus"> &#127809; Конкурс! <a href="/viewtopic.php?id=8918#p207189" target='blank'>Что такое осень? Конкурс осенних дизайнов!</a> Вас ждут вкусные призы за участие, призовой фонд растет вместе с числом участников! </div> <!-- <div id="ann" class="rus"> &#128140; Акция! <a href="/viewtopic.php?id=8324#p206561" target='blank'>Подписка, лайк, коммент, репост!</a> Поделись нашими YouTube видео и получи наградные баллы.</div> --> <!-- <div id="ann" class="rus">Требуются модераторы! <a href="https://forumd.ru/viewtopic.php?id=5787#p134326" target='blank'>Посмотреть вакансии и подать заявку.</a> Денежную оплату и "плюшки" гарантируем &#128178; </div> --> <!-- <div id="ann" class="rus"> &#10071; &#10071; &#10071; На форуме временные проблемы с регистрацией пользователей! &#10071; &#10071; &#10071; <br> Если вам не пришел пароль от аккаунта на почту пишите сюда свой никнейм и e-mail: <a href="/viewtopic.php?id=4506" target='blank'>Диалог с администрацией</a> <br>Администраторы зарегистрируют и активируют аккаунт вручную. </div> --> <!-- <div id="ann" class="rus"> &#127876; <a href="/viewtopic.php?id=2921&p=21#p191508" target='blank'>Подборка новогодних украшений вашего проекта</a></div> --> <!-- --><div id="ann" class="eng"> &#10071; &#10071; &#10071; Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, <a href="https://i.imgur.com/mg0OGtT.png" target='blank'>switch to the russian language.</a> This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience. </div> <!-- <div id="ann" class="rus moderator-ann">Пожалуйста <a href="/viewtopic.php?id=7206" target='blank'>заполните анкету</a> и расскажите о вашей готовности к англоязычным пользователям. </div> --> <!-- Скрипт слайдера --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/14086.js?v=2" async></script> </div> </div> </div> <!--/noindex--> <div id="pun-status" class="section"> <h2><span>Информация о пользователе</span></h2> <p class="container"> <span class="item1">Привет, Гость!</span> <span class="item2"><a href="/login.php" rel="nofollow">Войдите</a> или <a href="/register.php" rel="nofollow">зарегистрируйтесь</a>.</span> </p> </div> <div id="pun-break1" class="divider"><hr /></div> <div id="pun-crumbs1" class="section"> <p class="container crumbs"><strong>Вы здесь</strong> <em>&#187;&#160;</em><a href="https://forumd.ru/">ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов</a> <em>&#187;&#160;</em><a href="https://forumd.ru/viewforum.php?id=123">Коворкинг: обмен вдохновением и опытом</a> <em>&#187;&#160;</em>Эксперименты Will O The Wisp</p> </div> <div id="pun-break2" class="divider"><hr /></div> <!-- banner_mini_top --> <div id="pun-main" class="main multipage"> <h1><span>Эксперименты Will O The Wisp</span></h1> <div class="linkst"> <div class="pagelink">Страница: <a class="prev" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=14">&laquo;</a>&#160;&#160;<a href="https://forumd.ru/viewtopic.php?id=7075">1</a>&#160;<span class="ellipsis">&#8230;</span>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=13">13</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=14">14</a>&#160;<strong>15</strong>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=16">16</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=17">17</a>&#160;<span class="ellipsis">&#8230;</span>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=21">21</a>&#160;&#160;<a class="next" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=16">&raquo;</a></div> <div class="postlink"><span><a href="https://forumd.ru/post.php?tid=7075" rel="nofollow">Ответить</a></span></div> </div> <div id="topic_t7075" class="topic"> <h2><span class="item1">Сообщений</span> <span class="item2">141 страница 150 из 203</span></h2> <div id="p178882" class="post toppost" data-posted="1674030424" data-user-id="7629" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p178882" onclick="return false;">Поделиться</a><strong>141</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p178882">18.01.23 11:27</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=7629" rel="nofollow">Will O The Wisp</a></li> <li class="pa-title">Участник</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/7629-1628896044.jpg" alt="Will O The Wisp" title="Will O The Wisp" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />10.12.24 18:09</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+594</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/43425.svg" alt="Изыскатель" title="Изыскатель" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p178882-content" class="post-content"> <p>Знаете что это внезапная внезапность? Рандомайзер цвета в формате рулетки! <br /><a href="https://codepen.io/borntofrappe/pen/zyLoJR" rel="nofollow ugc" target="_blank">https://codepen.io/borntofrappe/pen/zyLoJR</a></p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>[html] &lt;style&gt; /* import font(s) */ @import url(&quot;https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,900&quot;); /* detail root variables --color-theme cascades to most html elements, and will be later updated in JavaScript */ :root { --font: &quot;Alegreya Sans SC&quot;, sans-serif; --color-bg: #000b14; --color-theme: #70a9fe; } /* heading centered atop the page */ h17 { text-align: center; margin: 1rem 0 0; font-size: 3rem; transition: all 0.25s ease-in-out; display: block; position: absolute; right: 110px; top: 160px; border: 3px solid currentColor; padding: 10px; background: #fff; color: var(--color-theme); } /* shown/hidden through an dedicated class */ h17.isHidden { opacity: 0; visibility: hidden; transform: translateY(-1rem) scale(0); } /* wheel positioned to the left of the page, and occupying 50% of whichever dimension is the biggest */ svg#wheel { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 500px; height: 500px; } /* arrow positioned to the right of the wheel, and pointing at the very middle section */ svg#pin { position: absolute; left: 500px; width: calc(50vmax / 25); height: calc(50vmax / 25); top: 50%; transform: translateY(-50%); fill: var(--color-theme); } /* instructions displayed on the right side, in a single column layout */ .instructions { min-height: 600px; color: var(--color-theme); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 1rem; } .instructions h2 { font-size: 1rem; letter-spacing: 0.1rem; position: relative; } /* beside a silly exclamation point add a simple word in the middle of the sentence hinting at the innocent nature of the project */ .instructions h2:after { content: &quot;!&quot;; } .instructions h2:before { position: absolute; content: &quot;suspicious&quot;; font-size: 0.75rem; opacity: 0.6; bottom: 100%; left: 50%; transform: translateX(-50%) rotate(-12deg); } .instructions button { margin-top: 1rem; padding: 0.25rem 0.75rem; font-size: 1.55rem; font-family: inherit; color: inherit; border: none; border-radius: 10px; box-shadow: 0 0 0 2px currentColor; background: var(--color-bg); /* transition for a simple hover and active state */ transition: all 0.5s ease-out; } .instructions button:hover { box-shadow: 0 0 0 1px var(--color-bg), 0 0 0 3px currentColor, 0 0 0 5px var(--color-bg), 0 0 0 7px currentColor; } .instructions button:active { box-shadow: 0 0 0 2px currentColor, 0 0 0 4px var(--color-bg), 0 0 0 6px currentColor; transform: scale(0.95) translateY(0.1rem); } /* cursor customized to grab, and not allowed when the wheel is spinning (class added in JS) */ .instructions button, svg#pin { cursor: grab; } .instructions button.isSpinning, svg#pin.isSpinning { cursor: not-allowed; } /* animation for the pin, to have it soundly move up and down alongside the spinning wheel the duration of the animation is customized in JS to have it run a certain number of times */ @keyframes pinWheel { 33% { transform: translateY(-50%) rotate(-10deg); } 67% { transform: translateY(-50%) rotate(10deg); } } &lt;/style&gt; &lt;script&gt; // target the SVG and the pin right next to it const containerSlices = document.querySelector('g#slices'); const pin = document.querySelector('svg#pin'); // immediately add simple dots around the wheel for (let i = 0; i &lt; 48; i += 1) { const transform = `rotate(${360 / 48 * i}), translate(0 -49.5), rotate(${-360 / 48 * i})`; const dot = `&lt;circle r=&quot;0.5&quot; cx=&quot;50&quot; cy=&quot;50&quot; fill=&quot;currentColor&quot; transform=&quot;${transform}&quot;/&gt;`; containerSlices.innerHTML += dot; } // target the heading and the button const heading = document.querySelector('h17'); const spinButton = document.querySelector('button'); // variable updated for the timeout let timeoutID = 0; // utility functions returning a random integer in a range and a random hex value const randomInt = (min = 0, max = 16) =&gt; Math.floor(Math.random() * (max - min) + min); const randomHex = () =&gt; randomInt().toString(16); // object used throughout the script, describing the colors and 3 particular rotation values // the idea is to include the three slices aroud the wheel and have the arrow point always at one of them const suspicious = [ { rotation: 45, color: 'A2CCB6' }, { rotation: 180, color: 'FCEEB5' }, { rotation: 315, color: 'EE786E' } ]; // add a random fill color to the circle behind the slices let randomFill = ''; for (let i = 0; i &lt; 6; i += 1) { randomFill += randomHex(); } document.querySelector('svg circle#slice').style.fill = randomFill; // create the slices, 24 in total, using a bit of trigonometry to compute the appropriate arc coordinates for (let i = 360; i &gt; 0; i -= 15) { // values for the path element const xCoor = 50 + Math.sin(i * Math.PI / 180) * 47; const yCoor = 50 - Math.cos(i * Math.PI / 180) * 47; const flags = i &gt; 180 ? '0 1 1' : '0 0 1'; // initialize a variable for the fill color let fill = ''; // create six random hex values for the fill color // ! the look might be rather jarring for (let j = 0; j &lt; 6; j += 1) { fill += randomHex(); } // if the de-cremented variable matches the arbitrary rotation value of one of the objects, find the specific object const suspect = suspicious.find(pairing =&gt; pairing.rotation === i); // if existing, substitute the random hex with the value specified in said object if (suspect) { fill = suspect.color; } // create the path element and append it to the SVG container const path = ` &lt;path d=&quot;M 50 50 L 50 3 A 47 47 ${flags} ${xCoor} ${yCoor}&quot; fill=#${fill} /&gt; `; containerSlices.innerHTML += path; } // function spinning the wheel function spinWheel() { // remove the event listener from the button and the wheel, to avoid running the function twice at the same time spinButton.removeEventListener('click', spinWheel); pin.removeEventListener('click', spinWheel); // immediately hide the heading showing the matching color heading.classList.add('isHidden'); // add a class to the pin and the button to show how they should not be clicked pin.classList.add('isSpinning'); spinButton.classList.add('isSpinning'); // create variables for the duration of the rotation, as whell as the number of rotations achieved by the wheel const randomDuration = randomInt(4, 10); const randomRotate = randomInt(10, 20); // crate a variable to pick from one of the objects at random const randomSuspect = randomInt(0, 3); // apply the transition and the transform properties containerSlices.style.transformOrigin = '50%'; containerSlices.style.transition = `transform ${randomDuration}s ease-out`; /* for the rotation, beside an arbitrary x360 rotation, remember to - add 90 to match the position of the arrow (to the very right of the wheel) - subtract the rotation of the slices - add up to a slice as to have the arrow point within the slice's boundaries */ containerSlices.style.transform = `rotate(${randomRotate * 360 - suspicious[randomSuspect].rotation + 90 + randomInt(0, 360 / 24)}deg)`; pin.style.animation = `pinWheel ${randomDuration / 10}s 10 ease-in-out`; // after the time allocated for the rotation show the heading with the &quot;random&quot; color, update the custom property with its value timeoutID = setTimeout(() =&gt; { heading.textContent = `#${suspicious[randomSuspect].color}`; heading.classList.remove('isHidden'); pin.style.animation = ''; document.documentElement.style.setProperty('--color-theme', `#${suspicious[randomSuspect].color}`); // remove the class on the pin and button showing the forbidden cursor pin.classList.remove('isSpinning'); spinButton.classList.remove('isSpinning'); // reset the event listener on the button and the pin spinButton.addEventListener('click', spinWheel); pin.addEventListener('click', spinWheel); // clear the interval and set the boolean back to false clearInterval(timeoutID); }, randomDuration * 1000); } // attach a click event listener on the button, at which point call the spinWheel function spinButton.addEventListener('click', spinWheel); // call the same function when pressing the pin pin.addEventListener('click', spinWheel); &lt;/script&gt; &lt;!-- project's structure - svg for the color wheel (consisting of circle elements, and a group in which the slices are added) - svg for the arrow pointing at the selected color (positioned to the right of the circle) - heading in which to show the color selected through the wheel (hidden by default) - container for the simple instructions and the button spinning the wheel --&gt; &lt;svg id=&quot;wheel&quot; viewBox=&quot;0 0 100 100&quot;&gt; &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;48&quot; fill=&quot;none&quot; stroke-width=&quot;1&quot; stroke=&quot;currentColor&quot; /&gt; &lt;!-- add an id to the underlying circle as this depicts the final slice, and as to add a random color --&gt; &lt;circle id=&quot;slice&quot; cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;47&quot; fill=&quot;#001C34&quot; /&gt; &lt;g id=&quot;slices&quot;&gt;&lt;/g&gt; &lt;/svg&gt; &lt;svg id=&quot;pin&quot; viewBox=&quot;0 0 50 50&quot;&gt;&lt;path d=&quot;M 0 25 L 50 0 V 50&quot; /&gt;&lt;/svg&gt; &lt;h17 class=&quot;isHidden&quot; style=&quot;user-select: all;&quot;&gt;#ffffff00&lt;/h17&gt; &lt;div class=&quot;instructions&quot;&gt; &lt;h2&gt;Spin that color &lt;span&gt;wheel&lt;/span&gt;&lt;/h2&gt; &lt;button&gt;Spin!&lt;/button&gt; &lt;/div&gt; [/html]</pre></div></div></div> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+3</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-quote"><a href="javascript:quote('Will O The Wisp', 178882)">Цитировать<span class="acchide">&nbsp;Сообщение 141</span></a></li> </ul> </div> </div> </div> <div id="p178905" class="post altstyle" data-posted="1674108762" data-user-id="7629" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p178905" onclick="return false;">Поделиться</a><strong>142</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p178905">19.01.23 09:12</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=7629" rel="nofollow">Will O The Wisp</a></li> <li class="pa-title">Участник</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/7629-1628896044.jpg" alt="Will O The Wisp" title="Will O The Wisp" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />10.12.24 18:09</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+594</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/43425.svg" alt="Изыскатель" title="Изыскатель" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p178905-content" class="post-content"> <p>Виселица<br />в поле для угадывания вводить свое, но маленькими буквами</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>[html] &lt;style&gt; #container{ text-align:center; width:340px; height:480px; margin:auto; position:relative; background:#006f81; } #menu{ padding-top:10px; padding-left:20px; font-size:55px; width:100%; } #game{ padding-top:10px; font-size:55px; width:100%; display:none; } #opcje{ padding-top:10px; font-size:55px; width:100%; display:none; } #autor{ font-size:55px; width:100%; display:none; } .txt{ font-size:24px; width:80%; margin:auto; } .txt a{ text-decoration:none; color:#000; } svg line{ stroke:#000; stroke-width:5 } #back{ text-align:center; width:140px; margin:auto; background-color: #008499; color: white; font-size:24px; cursor:pointer; display:none; } #back:hover{ background-color:#4c9aa6; } #pass{ font-size:24px; width:250px; margin:5px auto 5px auto; border-radius:10px; background-color:#008499; border: 1px black; padding:4px 0; cursor:default; } .title{ color:#ededed; width:340px; font-size:48px; font-family:nosifer; } ul{ list-style-type: none; margin:auto; margin-top: 0; width: 300px; padding:0; } li a, li a.lock:hover{ width: 300px; position:relative; left:0; font-size:24px; margin:5px 0; display: block; color: white; padding: 6px 0 6px 0; text-decoration: none; background-color: #005968; cursor:pointer; border-radius:5px; } li a:hover { background-color:#008499 ; color: white; width: 320px; position:relative; left:-10px; cursor:hand; } li a.lock{ opacity:0.5; } #alphabet{ color:#fff; font-size:18px; margin: auto; margin-bottom:5px; display: flex; flex-wrap: wrap; width:90%; justify-content: center; } #alphabet span{ background-color:#008499; margin: 3px 5px; height:25px; width:25px; padding:4px; border-radius:30%; cursor:pointer; } .red{ opacity:0.4 !important; background:red !important; } .green{ opacity:0.4 !important; background:lime !important; } #svg{ margin:auto; background-color:#008499; width:280px; height:220px; } svg{ position:absolute; left:50px; } .tb1{ stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; stroke-linecap:round; } @keyframes dash { to { stroke-dashoffset: 0; } } #stickman{ position:absolute; left:190px; bottom:0; cursor:pointer; } @keyframes jmp{ 0% { } 11%{ transform: rotate(270deg); bottom:30px; left:260px;} 22%{ transform: rotate(450deg); bottom:100px; left:0;} 33%{ transform: rotate(630deg); bottom:150px; left:260px;} 44%{ transform: rotate(810deg); bottom:210px; left:0;} 55%{ transform: rotate(990deg); bottom:250px; left:260px;} 66%{ transform: rotate(1170deg); bottom:200px; left:0;} 77%{ transform: rotate(1350deg); bottom:150px; left:260px;} 88%{ transform: rotate(1530deg); bottom:40px; left:0;} 100%{ transform: rotate(1800deg); } } &lt;/style&gt; &lt;script&gt; errors=0; pkt=0; toggle=0; word = [ &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot; ]; $(document).ready(function(){ $(&quot;#alphabet span&quot;).click(function(){ var input = $(this).html(); var styyl = $(this).attr(&quot;id&quot;); check(input, styyl); }); }); function gra(){ startgame(); startpass(); hide(); $(&quot;#menu&quot;).hide(); $(&quot;#game&quot;).show(); $(&quot;.title&quot;).hide(); $(&quot;#back&quot;).toggle(); } function showMenu() { $(&quot;#menu&quot;).show(); $(&quot;#game&quot;).hide(); $(&quot;#opcje&quot;).hide(); $(&quot;#autor&quot;).hide(); $(&quot;.title&quot;).show(); $(&quot;#back&quot;).toggle(); } function showOptions() { $(&quot;#back&quot;).toggle(); $(&quot;#menu&quot;).hide(); $(&quot;#opcje&quot;).show(); } function showInfo() { $(&quot;#back&quot;).toggle(); $(&quot;#menu&quot;).hide(); $(&quot;#autor&quot;).show(); } function exit(){ c=confirm(&quot;Are you sure?&quot;); if (c==true){ window.location.href = &quot;#&quot;; } } function hide() { $(&quot;#svg svg&quot;).hide(); } function startpass(){ boxy = new Array(); hiden=&quot;&quot;; hub=wordp; i=hub.length; for(i=0; i&lt;hub.length; i++) { hiden=hiden+&quot;*&quot;; boxy[i]=&quot;*&quot;; } $(&quot;#pass&quot;).text(hiden); } function startgame(){ errors=0; n=Math.floor(Math.random() * 110); wordp=word[n]; clearAlphabet(); } function jump(){ if(toggle==0){ $(&quot;#stickman&quot;).css(&quot;animation&quot;,&quot;jmp 4s ease-out &quot;); toggle=1; } else{ $(&quot;#stickman&quot;).css(&quot;animation&quot;,&quot;none&quot;); toggle=0; } } function szubienica(){ errors++; if(errors&lt;11){ $(&quot;#t&quot;+errors).show(); } else{ $(&quot;#t&quot;+errors).show(); alert(&quot;You lost! \nWord is: &quot;+wordp+&quot;\nFinal score is: &quot;+pkt); window.setTimeout(gameOver, 600); } } function gameOver(){ pkt=0; hide(); showMenu(); } function clearAlphabet(){ $(&quot;#alphabet span&quot;).removeClass(&quot;red green&quot;); } function check(val,styl){ if (wordp.indexOf(val) &gt; -1){ $(&quot;#&quot;+styl).addClass(&quot;green&quot;); slowa(val); } else{ $(&quot;#&quot;+styl).addClass(&quot;red&quot;); szubienica(); } } function slowa(val){ n=wordp.length; for(i=0; i&lt;n; i++){ st=wordp.indexOf(val, i); boxy[st]=val;} hiden=''; for(d=0; d&lt;n; d++){ hiden+=boxy[d]; $(&quot;#pass&quot;).text(hiden); } win(); } function wygrana(){ pkt++; alert(&quot;Congratulations! \nYour score is: &quot;+pkt+&quot;\nLet's continue!&quot;); gra(); $(&quot;#back&quot;).toggle(); } function win(){ if(hiden==wordp){ window.setTimeout(wygrana, 600); } } &lt;/script&gt; &lt;html&gt; &lt;head&gt; &lt;meta name=&quot;viewport&quot; id=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; &lt;link href=&quot;https://fonts.googleapis.com/css?family=Nosifer&quot; rel=&quot;stylesheet&quot;&gt; &lt;script src=&quot;https://code.jquery.com/jquery-3.1.1.js&quot;&gt;&lt;/script&gt; &lt;title&gt;Виселица&lt;/title&gt; &lt;/head&gt; &lt;body onselectstart=&quot;return false&quot;&gt;        &lt;div class=&quot;container&quot;&gt; &lt;div id=&quot;container&quot;&gt; &lt;div class=&quot;title&quot;&gt;ВИСЕЛИЦА&lt;/div&gt; &lt;!-- Menu start --&gt; &lt;div id=&quot;menu&quot;&gt; &lt;div id=&quot;opt&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a onClick=&quot;gra();&quot; id=&quot;play&quot;&gt;PLAY&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a onClick=&quot;showInfo();&quot; id=&quot;auth&quot;&gt;INFORMATIONS&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a onClick=&quot;exit();&quot; id=&quot;exit&quot;&gt;EXIT&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;svg id=&quot;stickman&quot; onclick=&quot;jump()&quot; width=&quot;80px&quot; height=&quot;100px&quot;&gt; &lt;circle cx=&quot;40&quot; cy=&quot;20&quot; r=&quot;13&quot; stroke=&quot;black&quot; stroke-width=&quot;5&quot; fill=&quot;white&quot; /&gt; &lt;line x1=&quot;40&quot; y1=&quot;35&quot; x2=&quot;40&quot; y2=&quot;70&quot; /&gt; &lt;line x1=&quot;40&quot; y1=&quot;50&quot; x2=&quot;10&quot; y2=&quot;20&quot; /&gt; &lt;line x1=&quot;40&quot; y1=&quot;50&quot; x2=&quot;70&quot; y2=&quot;20&quot; /&gt; &lt;line x1=&quot;40&quot; y1=&quot;70&quot; x2=&quot;20&quot; y2=&quot;100&quot; /&gt; &lt;line x1=&quot;40&quot; y1=&quot;70&quot; x2=&quot;60&quot; y2=&quot;100&quot; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div id=&quot;game&quot;&gt; &lt;div id=&quot;svg&quot;&gt; &lt;svg id=&quot;t1&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;20&quot; y1=&quot;200&quot; x2=&quot;20&quot; y2=&quot;20&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t2&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;20&quot; y1=&quot;20&quot; x2=&quot;160&quot; y2=&quot;20&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t3&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;21&quot; y1=&quot;160&quot; x2=&quot;60&quot; y2=&quot;200&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t4&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;20&quot; y1=&quot;50&quot; x2=&quot;50&quot; y2=&quot;20&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t5&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;140&quot; y1=&quot;20&quot; x2=&quot;140&quot; y2=&quot;50&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t6&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;circle class=&quot;tb1&quot; cx=&quot;140&quot; cy=&quot;50&quot; r=&quot;15&quot; stroke=&quot;black&quot; stroke-width=&quot;5&quot; fill=&quot;white&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t7&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;140&quot; y1=&quot;65&quot; x2=&quot;140&quot; y2=&quot;100&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t8&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;140&quot; y1=&quot;70&quot; x2=&quot;120&quot; y2=&quot;100&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t9&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;140&quot; y1=&quot;70&quot; x2=&quot;160&quot; y2=&quot;100&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t10&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;140&quot; y1=&quot;100&quot; x2=&quot;120&quot; y2=&quot;130&quot; /&gt; &lt;/svg&gt; &lt;svg id=&quot;t11&quot; width=&quot;280px&quot; height=&quot;250px&quot; style=&quot;display:none&quot;&gt; &lt;line class=&quot;tb1&quot; x1=&quot;140&quot; y1=&quot;100&quot; x2=&quot;160&quot; y2=&quot;130&quot; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div id=&quot;pass&quot;&gt;&lt;/div&gt; &lt;div id=&quot;alphabet&quot;&gt; &lt;span id=&quot;а&quot;&gt;а&lt;/span&gt;&lt;span id=&quot;б&quot;&gt;б&lt;/span&gt; &lt;span id=&quot;в&quot;&gt;в&lt;/span&gt;&lt;span id=&quot;г&quot;&gt;г&lt;/span&gt; &lt;span id=&quot;д&quot;&gt;д&lt;/span&gt;&lt;span id=&quot;и&quot;&gt;и&lt;/span&gt; &lt;span id=&quot;к&quot;&gt;к&lt;/span&gt;&lt;span id=&quot;л&quot;&gt;л&lt;/span&gt; &lt;span id=&quot;м&quot;&gt;м&lt;/span&gt;&lt;span id=&quot;н&quot;&gt;н&lt;/span&gt; &lt;span id=&quot;о&quot;&gt;о&lt;/span&gt;&lt;span id=&quot;п&quot;&gt;п&lt;/span&gt; &lt;span id=&quot;р&quot;&gt;р&lt;/span&gt;&lt;span id=&quot;с&quot;&gt;с&lt;/span&gt; &lt;span id=&quot;т&quot;&gt;т&lt;/span&gt;&lt;span id=&quot;у&quot;&gt;у&lt;/span&gt; &lt;span id=&quot;ф&quot;&gt;ф&lt;/span&gt;&lt;span id=&quot;х&quot;&gt;х&lt;/span&gt; &lt;span id=&quot;ц&quot;&gt;ц&lt;/span&gt;&lt;span id=&quot;ш&quot;&gt;ш&lt;/span&gt; &lt;span id=&quot;щ&quot;&gt;щ&lt;/span&gt;&lt;span id=&quot;ы&quot;&gt;ы&lt;/span&gt; &lt;span id=&quot;ь&quot;&gt;ь&lt;/span&gt;&lt;span id=&quot;ъ&quot;&gt;ъ&lt;/span&gt; &lt;span id=&quot;э&quot;&gt;э&lt;/span&gt;&lt;span id=&quot;ю&quot;&gt;ю&lt;/span&gt; &lt;span id=&quot;я&quot;&gt;я&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&quot;opcje&quot;&gt; &lt;div id=&quot;opt&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a class=&quot;lock&quot; id=&quot;lang&quot;&gt;LANGUAGE&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class=&quot;lock&quot; id=&quot;sound&quot;&gt;DIFFICULTY&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class=&quot;lock&quot; id=&quot;login&quot;&gt;LOGIN&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&quot;autor&quot;&gt; &lt;div class=&quot;txt&quot;&gt; Hangman game ... &lt;br&gt; &lt;p&gt;&amp;copy;Created by&lt;br&gt;AOULI Oussama&lt;a target='_blank' href='#'&gt;&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div onClick=&quot;showMenu();&quot; id=&quot;back&quot;&gt;MENU&lt;/div&gt; &lt;/div&gt;        &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; [/html]</pre></div></div></div> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+4</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-quote"><a href="javascript:quote('Will O The Wisp', 178905)">Цитировать<span class="acchide">&nbsp;Сообщение 142</span></a></li> </ul> </div> </div> </div> <div id="p178907" class="post" data-posted="1674114379" data-user-id="7629" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p178907" onclick="return false;">Поделиться</a><strong>143</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p178907">19.01.23 10:46</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=7629" rel="nofollow">Will O The Wisp</a></li> <li class="pa-title">Участник</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/7629-1628896044.jpg" alt="Will O The Wisp" title="Will O The Wisp" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />10.12.24 18:09</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+594</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/43425.svg" alt="Изыскатель" title="Изыскатель" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p178907-content" class="post-content"> <p>Инормационная шапка для дизайна </p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;style&gt; :root { --font-main: 'Cardo', serif; --offwhite: #f0f0f0; --border: #aaa; --font-size: 92px; --ascender-height-ratio: .19; --descender-height-ratio: .06; --baseline-ratio: .36; --cap-height-ratio: .30; --x-height-ratio: .54; --active-color: #ad3f35; --annotation-offset: 280px; --annotation-top-animation: 230px; } .paper-container { display: flex; flex-direction: column; min-height: 100px; width: 100%; position: relative; align-items: center; justify-content: center; } .text-body { width: 900px; text-align: center; position: relative; padding: 0 40px; } .paper-line { font-size: var(--font-size); } .circle { border: 2px solid var(--border); height: 12px; width: 12px; border-radius: 20px; position: relative; top: -6px; left: 20px; transition: transform 0.25s ease-in-out; } .circle.circle-odd { left: 60px; } .circle:hover { border: 1px solid var(--active-color); transform: scale(1.5); } .paper-outline { height: 1px; background: transparent; width: 100%; border-bottom: 1px dashed var(--border); position: relative; transition: background 0.25s ease-in-out; } .paper-outline:hover { border-bottom: 1px dashed var(--active-color); cursor: pointer; } .paper-outline:hover .circle { transform: scale(2); border: 1px solid var(--active-color); } #ascender-height { top: calc(var(--font-size) * var(--ascender-height-ratio)); } #ascender-height:hover .annotation-tooltip { top: -55px; opacity: 1; pointer-events: auto; background: #fff; padding: 10px; transform: translateY(0px); } #descender-height { bottom: calc(var(--font-size) * var(--descender-height-ratio)); } #descender-height:hover .annotation-tooltip { top: -55px; opacity: 1; pointer-events: auto; background: #fff; padding: 10px; transform: translateY(0px); } #baseline { bottom: calc(var(--font-size) * var(--baseline-ratio)); } #overhang { bottom: calc(var(--font-size) * var(--baseline-ratio)); border: 0; padding-left: 303px; } #overhang:hover .annotation-tooltip { top: -55px; opacity: 1; pointer-events: auto; background: #fff; padding: 10px; transform: translateY(0px); } #baseline:hover .annotation-tooltip { top: -55px; opacity: 1; pointer-events: auto; background: #fff; padding: 10px; transform: translateY(0px); } #cap-height { top: calc(var(--font-size) * var(--cap-height-ratio)); } #cap-height:hover .annotation-tooltip { top: -55px; opacity: 1; pointer-events: auto; background: #fff; padding: 10px; } #x-height { top: calc(var(--font-size) * var(--x-height-ratio)); } #x-height:hover .annotation-tooltip { top: -55px; opacity: 1; pointer-events: auto; background: #fff; padding: 10px; transform: translateY(0px); } .annotation-tooltip { color: var(--active-color); font-size: 12px; width: 120px; display: block; pointer-events: none; position: absolute; top: var(--annotation-offset); left: 200px; top: -20px; opacity: 0; transition: all .55s ease-in-out; text-align: left; } .annotation-tooltip:before { bottom: -20px; content: &quot; &quot;; display: block; height: 20px; left: 0; position: absolute; width: 100%; } .annotation-tooltip h5 { font-size: 12px; text-transform: uppercase; } .annotation-tooltip p { margin-top: 4px; } .type-footer { position: fixed; bottom: 0; text-align: center; width: 100%; } @keyframes hoverLine { from { border-bottom: 1px dashed var(--border); } 6%,13% { border-bottom: 1px dashed var(--active-color); } 20% { border-bottom: 1px dashed var(--border); } to: { border-bottom: 1px dashed var(--border); } } @keyframes scaleUp { from { border: 2px solid var(--border); transform: scale(1); } 6%,11% { border: 2px solid var(--active-color); transform: scale(1.5); } 14% { border: 2px solid var(--border); transform: scale(1); } to: { border: 2px solid var(--border); transform: scale(1); } } @keyframes translateUp { from { top: var(--annotation-offset); opacity: 0; } 6%,13% { top: var(--annotation-top-animation); opacity: 1; transform: translateY(0px); } 20% { top: var(--annotation-offset); opacity: 0; } to { top: var(--annotation-offset); opacity: 0; } } &lt;/style&gt; &lt;div class=&quot;paper-container&quot;&gt; &lt;div id=&quot;ascender-tip&quot; class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;Ascender Height&lt;/h5&gt; &lt;p&gt; Some elements may extend slightly above the cap height. &lt;/p&gt; &lt;/div&gt; &lt;div id=&quot;cap-tip&quot; class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;Cap Height&lt;/h5&gt; &lt;p&gt; The distance from the baseline to the top of the capital letter determines the letter's point size. &lt;/p&gt; &lt;/div&gt; &lt;div id=&quot;x-tip&quot; class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;X-Height&lt;/h5&gt; &lt;p&gt; The height of the main body of the lowercase letter (or the height of a lowercase x), excluding its ascenders and descenders. &lt;/p&gt; &lt;/div&gt; &lt;div id=&quot;baseline-tip&quot; class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;Baseline&lt;/h5&gt; &lt;p&gt; Where all the letters sit. This is the most stable axis along a line of text, and it is a crucial edge for aligning text with images or with other text. &lt;/p&gt; &lt;/div&gt; &lt;div id=&quot;descender-tip&quot; class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;Descender Height&lt;/h5&gt; &lt;p&gt; The length of a letter's descenders contributes to its overall style and attitude. &lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;text-body&quot;&gt; &lt;div id=&quot;ascender-height&quot; class=&quot;paper-outline&quot;&gt; &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;Ascender Height&lt;/h5&gt; &lt;p&gt; Some elements may extend slightly above the cap height. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&quot;cap-height&quot; class=&quot;paper-outline&quot;&gt; &lt;div class=&quot;circle circle-odd&quot;&gt;&lt;/div&gt; &lt;div class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;Cap Height&lt;/h5&gt; &lt;p&gt; The distance from the baseline to the top of the capital letter determines the letter's point size. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&quot;x-height&quot; class=&quot;paper-outline&quot;&gt; &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;X-Height&lt;/h5&gt; &lt;p&gt; The height of the main body of the lowercase letter (or the height of a lowercase x), excluding its ascenders and descenders. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;paper-line&quot;&gt; &lt;span&gt;Прекрасное&lt;/span&gt; &lt;/div&gt; &lt;div id=&quot;baseline&quot; class=&quot;paper-outline&quot;&gt; &lt;div class=&quot;circle circle-odd&quot;&gt;&lt;/div&gt; &lt;div class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;Baseline&lt;/h5&gt; &lt;p&gt; Where all the letters sit. This is the most stable axis along a line of text, and it is a crucial edge for aligning text with images or with other text. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&quot;overhang&quot; class=&quot;paper-outline&quot;&gt; &lt;div class=&quot;circle circle-odd&quot;&gt;&lt;/div&gt; &lt;div class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;Overhang&lt;/h5&gt; &lt;p&gt; The curves at the bottom of the letters hang slightly below the baseline. Without overhang rounded letters would look smaller than their flat-footed compatriots. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&quot;descender-height&quot; class=&quot;paper-outline&quot;&gt; &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;annotation-tooltip&quot;&gt; &lt;h5&gt;Descender Height&lt;/h5&gt; &lt;p&gt; The length of a letter's descenders contributes to its overall style and attitude. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div></div> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+3</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-quote"><a href="javascript:quote('Will O The Wisp', 178907)">Цитировать<span class="acchide">&nbsp;Сообщение 143</span></a></li> </ul> </div> </div> </div> <div id="p178908" class="post altstyle" data-posted="1674117118" data-user-id="6992" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p178908" onclick="return false;">Поделиться</a><strong>144</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p178908">19.01.23 11:31</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=6992" rel="nofollow">МАЧОнаДАЧЕ</a></li> <li class="pa-title">Участник</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/6992-1655867948.gif" alt="МАЧОнаДАЧЕ" title="МАЧОнаДАЧЕ" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />09.01.25 10:58</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+338</span></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p178908-content" class="post-content"> <p><strong>Will O The Wisp</strong></p><div class="quote-box quote-main"><blockquote><p>Виселица<br />в поле для угадывания вводить свое, но маленькими буквами</p></blockquote></div><p>Такая приколюха <img src="https://forumstatic.ru/img/smilies/MyBB/universal/cool.gif" alt=":cool:" /></p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>...</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+1</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=6899#p167872" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=6899#p167872</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('МАЧОнаДАЧЕ', 178908)">Цитировать<span class="acchide">&nbsp;Сообщение 144</span></a></li> </ul> </div> </div> </div> <div id="p178909" class="post" data-posted="1674117808" data-user-id="7629" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p178909" onclick="return false;">Поделиться</a><strong>145</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p178909">19.01.23 11:43</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=7629" rel="nofollow">Will O The Wisp</a></li> <li class="pa-title">Участник</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/7629-1628896044.jpg" alt="Will O The Wisp" title="Will O The Wisp" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />10.12.24 18:09</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+594</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/43425.svg" alt="Изыскатель" title="Изыскатель" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p178909-content" class="post-content"> <p><strong>МАЧОнаДАЧЕ</strong><br />Слов только туда побольше напихать в код, сохраняя все знаки</p><div class="quote-box quote-main"><blockquote><p>word = [<br />&nbsp; &nbsp; &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;,&quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;, &quot;слово&quot;<br />&nbsp; &nbsp; ];</p></blockquote></div><p>сюда вот</p> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+3</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-quote"><a href="javascript:quote('Will O The Wisp', 178909)">Цитировать<span class="acchide">&nbsp;Сообщение 145</span></a></li> </ul> </div> </div> </div> <div id="p179433" class="post altstyle" data-posted="1674822283" data-user-id="7629" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p179433" onclick="return false;">Поделиться</a><strong>146</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p179433">27.01.23 15:24</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=7629" rel="nofollow">Will O The Wisp</a></li> <li class="pa-title">Участник</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/7629-1628896044.jpg" alt="Will O The Wisp" title="Will O The Wisp" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />10.12.24 18:09</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+594</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/43425.svg" alt="Изыскатель" title="Изыскатель" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p179433-content" class="post-content"> <p>Меню<br />вариант: оформление навигации на форуме в виде содержания <br />содержание в теме </p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>[html] &lt;style&gt; @import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC'); :root { font-size:0.625em; } /* Counters */ .menu ol { counter-reset:menu; } /* Regular menu items */ .menu-item a { display:flex; justify-content:flex-start; /*shrink towards text*/ color:currentColor; text-decoration:none; padding:0.3rem 0; /* avoid flickin' */ order:0; } .menu-item a::before { /* dots */ content:&quot;&quot;; display:block; border-bottom:1px dotted black; position:relative; top:-3px; flex:1 1 auto; margin:0 1rem; order:1; } .menu-item a::after { /* item ids */ counter-increment:menu; content:counters(menu, &quot;.&quot;); flex:0 0 auto; order:2; transform:rotate(30deg)scale(1.2); text-decoration:underline; } /* Sub menu &amp; items */ .sub-menu { font-size:1.6rem; font-weight:normal; } .sub-menu &gt; li &gt; a { text-indent:0ch; /* Chrome indentS the &quot;dots&quot; elm, i.e. it counts pseudo-elm. FF and Edge indents first non pseudo-elm. Turn it off for consistency. */ padding:0.5rem 0 0.5rem 2ch; margin:0; } /* Main menu */ .menu { width:22vw; min-width:20ch; display:flex; flex-flow:column nowrap; font:bold 2.4rem/1 'IM Fell English SC', serif; position:relative; transform:rotate(-30deg); background: #ccc; padding-right: 20px; margin: 100px; } .menu::before { content:&quot;/&quot;; align-self:center; transform:rotate(30deg); margin-bottom:1rem; } .menu::after { content:&quot;/&quot;; align-self:center; transform:rotate(30deg); margin-top:1rem; } /* Fx */ .menu { transition:transform 0.3s; } .menu:hover { transform:rotate(0); } .menu::before { transition:transform 0.5s; } .menu:hover::before { transform:rotate(0); content:&quot;__&quot;; } .menu::after { transition:transform 0.5s; } .menu:hover::after { transform:rotate(0); content:&quot;__&quot;; } .menu .menu-item a::after { transition:transform 0.3s } .menu:hover .menu-item a::after { transform:rotate(0) } .menu:hover &gt; ol &gt; .menu-item { opacity:0.3; } .menu-item:hover { transition:background-color 0.3s; background:rgba(255,255,0,0.15); opacity:1 !important; } .menu-item:hover a::after { text-decoration:none; } .menu-item:hover &gt; a::before { transition:flex-grow 0.3s; width:0; flex-grow:0; transform-origin:center bottom; } /* Collapse */ .sub-menu &gt; .menu-item { max-height:1ch; transform:scaleY(0.1); transform-origin:center top; transition:transform 0.2s, max-height 0.5s; } .menu:hover .sub-menu .menu-item { max-height:10em; transform:scaleY(1); } &lt;/style&gt; &lt;container style=&quot;height:500px;display:block&quot;&gt; &lt;nav class=&quot;menu&quot;&gt; &lt;ol&gt; &lt;li class=&quot;menu-item&quot;&gt;&lt;a href=&quot;#0&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;menu-item&quot;&gt;&lt;a href=&quot;#0&quot;&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;menu-item&quot;&gt; &lt;a href=&quot;#0&quot;&gt;Widgets&lt;/a&gt; &lt;ol class=&quot;sub-menu&quot;&gt; &lt;li class=&quot;menu-item&quot;&gt;&lt;a href=&quot;#0&quot;&gt;Big Widgets&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;menu-item&quot;&gt;&lt;a href=&quot;#0&quot;&gt;Bigger Widgets&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;menu-item&quot;&gt;&lt;a href=&quot;#0&quot;&gt;Huge Widgets&lt;/a&gt;&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;li class=&quot;menu-item&quot;&gt; &lt;a href=&quot;#0&quot;&gt;Kabobs&lt;/a&gt; &lt;ol class=&quot;sub-menu&quot;&gt; &lt;li class=&quot;menu-item&quot;&gt;&lt;a href=&quot;#0&quot;&gt;Shishkabobs&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;menu-item&quot;&gt;&lt;a href=&quot;#0&quot;&gt;BBQ kabobs&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;menu-item&quot;&gt;&lt;a href=&quot;#0&quot;&gt;Summer kabobs&lt;/a&gt;&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;li class=&quot;menu-item&quot;&gt;&lt;a href=&quot;#0&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ol&gt; &lt;/nav&gt; &lt;/container&gt; [/html]</pre></div></div></div> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+2</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-quote"><a href="javascript:quote('Will O The Wisp', 179433)">Цитировать<span class="acchide">&nbsp;Сообщение 146</span></a></li> </ul> </div> </div> </div> <div id="p179470" class="post" data-posted="1674909469" data-user-id="6822" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p179470" onclick="return false;">Поделиться</a><strong>147</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p179470">28.01.23 15:37</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=6822" rel="nofollow">Automation Baby</a></li> <li class="pa-title">Атаманша</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/6822-1718740142.jpg" alt="Automation Baby" title="Automation Baby" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />18.08.24 17:56</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+9027</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/29029.svg" alt="Амбассадор" title="Амбассадор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/24855.svg" alt="Ценитель" title="Ценитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/52250.svg" alt="Причастный" title="Причастный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/80069.svg" alt="Конкурсант" title="Конкурсант" /> <img src="https://forumstatic.ru/files/0007/e3/f7/78276.svg" alt="Вовлеченный" title="Вовлеченный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/43425.svg" alt="Изыскатель" title="Изыскатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31061.svg" alt="Теоретик" title="Теоретик" /> <img src="https://forumstatic.ru/files/0007/e3/f7/44107.svg" alt="Практикант" title="Практикант" /> <img src="https://forumstatic.ru/files/0007/e3/f7/75278.svg" alt="Экспериментатор" title="Экспериментатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71934.svg" alt="Технарь" title="Технарь" /> <img src="https://forumstatic.ru/files/0007/e3/f7/40694.svg" alt="Дэв" title="Дэв" /> <img src="https://forumstatic.ru/files/0007/e3/f7/21677.svg" alt="Пробужденный" title="Пробужденный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/59727.svg" alt="Попаданец" title="Попаданец" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p179470-content" class="post-content"> <p>Была занята реновациями в портфолио команды, но вроде закончили уже, так что возвращаюсь к публикации в каталог контента отсюда. </p> <p>Опубликовала два кода: <br /><a href="https://forumd.ru/viewtopic.php?id=7192">Игра &quot;Виселица&quot; (JS, CSS)</a><br /><a href="https://forumd.ru/viewtopic.php?id=7191">Рандомайзер цвета в виде рулетки (JS, CSS)</a></p> <p><strong>Will O The Wisp</strong><br />Спасибо!</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p><a href="https://forumd.ru/viewtopic.php?id=7924">Отвечаю на вопросы вот здесь</a> | <a href="https://forumd.ru/viewtopic.php?id=8057">Мой блог</a><br /></p><p style="text-align:left;"><span style="font-style: italic">&quot;Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы.&quot;</span> © Николай Ободников. &quot;Лиллехейм. Волчий ветер&#8204;&#8205;</p><p style="text-align:right;"><abbr title="2017 год. Альтернативная реальность. Есть СССР (в изменённом виде), ФРГ и ГДР, соответственно существует ШТАЗИ. В повседневную жизнь медленно входят роботы, учёные занимаются клонированием, IT-технологиями, вирусологией."><a href="https://nolf.mybb.ru/" rel="nofollow" target="_blank"><img class="sigimage" loading="lazy" src="https://forumstatic.ru/files/0015/1e/ae/69675.gif" alt="https://forumstatic.ru/files/0015/1e/ae/69675.gif" /></a> </abbr><abbr title="Ролевая в жанре альтернативной истории: Российская империя, 1812. Серебряный век русской магии. В центре сюжета - магия, признанная на государственном уровне. Маги - привилегированный слой общества. Только здесь - мир Толстого и чары, Наполеон и боевая магия, поэты золотого века и волшебство."><a href="https://rusmagic.mybb.ru/" rel="nofollow" target="_blank"><img class="sigimage" loading="lazy" src="https://forumstatic.ru/files/0018/3d/6c/77729.jpg" alt="https://forumstatic.ru/files/0018/3d/6c/77729.jpg" /></a></abbr></p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+2</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;esymeo#3573</span></em></li></li> <li class="pl-email social-telegram has-display-name"><a href="https://t.me/Esymeo" target="_blank">Telegram<span class="acchide">&nbsp;@Esymeo</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Automation Baby', 179470)">Цитировать<span class="acchide">&nbsp;Сообщение 147</span></a></li> </ul> </div> </div> </div> <div id="p179519" class="post altstyle" data-posted="1674989360" data-user-id="6822" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p179519" onclick="return false;">Поделиться</a><strong>148</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p179519">29.01.23 13:49</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=6822" rel="nofollow">Automation Baby</a></li> <li class="pa-title">Атаманша</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/6822-1718740142.jpg" alt="Automation Baby" title="Automation Baby" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />18.08.24 17:56</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+9027</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/29029.svg" alt="Амбассадор" title="Амбассадор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/24855.svg" alt="Ценитель" title="Ценитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/52250.svg" alt="Причастный" title="Причастный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/80069.svg" alt="Конкурсант" title="Конкурсант" /> <img src="https://forumstatic.ru/files/0007/e3/f7/78276.svg" alt="Вовлеченный" title="Вовлеченный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/43425.svg" alt="Изыскатель" title="Изыскатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31061.svg" alt="Теоретик" title="Теоретик" /> <img src="https://forumstatic.ru/files/0007/e3/f7/44107.svg" alt="Практикант" title="Практикант" /> <img src="https://forumstatic.ru/files/0007/e3/f7/75278.svg" alt="Экспериментатор" title="Экспериментатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71934.svg" alt="Технарь" title="Технарь" /> <img src="https://forumstatic.ru/files/0007/e3/f7/40694.svg" alt="Дэв" title="Дэв" /> <img src="https://forumstatic.ru/files/0007/e3/f7/21677.svg" alt="Пробужденный" title="Пробужденный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/59727.svg" alt="Попаданец" title="Попаданец" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p179519-content" class="post-content"> <p><strong>Will O The Wisp</strong><br />Добавила ещё 2 хтмл-шаблона из этой темы сюда: <br /><a href="https://forumd.ru/viewtopic.php?id=6477&amp;p=3#p179516">Подборка html-шаблонов (html, css)</a><br /><a href="https://forumd.ru/viewtopic.php?id=6477&amp;p=3#p179517">Подборка html-шаблонов (html, css)</a></p> <p>Спасибо за находки!</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p><a href="https://forumd.ru/viewtopic.php?id=7924">Отвечаю на вопросы вот здесь</a> | <a href="https://forumd.ru/viewtopic.php?id=8057">Мой блог</a><br /></p><p style="text-align:left;"><span style="font-style: italic">&quot;Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы.&quot;</span> © Николай Ободников. &quot;Лиллехейм. Волчий ветер&#8204;&#8205;</p><p style="text-align:right;"><abbr title="2017 год. Альтернативная реальность. Есть СССР (в изменённом виде), ФРГ и ГДР, соответственно существует ШТАЗИ. В повседневную жизнь медленно входят роботы, учёные занимаются клонированием, IT-технологиями, вирусологией."><a href="https://nolf.mybb.ru/" rel="nofollow" target="_blank"><img class="sigimage" loading="lazy" src="https://forumstatic.ru/files/0015/1e/ae/69675.gif" alt="https://forumstatic.ru/files/0015/1e/ae/69675.gif" /></a> </abbr><abbr title="Ролевая в жанре альтернативной истории: Российская империя, 1812. Серебряный век русской магии. В центре сюжета - магия, признанная на государственном уровне. Маги - привилегированный слой общества. Только здесь - мир Толстого и чары, Наполеон и боевая магия, поэты золотого века и волшебство."><a href="https://rusmagic.mybb.ru/" rel="nofollow" target="_blank"><img class="sigimage" loading="lazy" src="https://forumstatic.ru/files/0018/3d/6c/77729.jpg" alt="https://forumstatic.ru/files/0018/3d/6c/77729.jpg" /></a></abbr></p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+1</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;esymeo#3573</span></em></li></li> <li class="pl-email social-telegram has-display-name"><a href="https://t.me/Esymeo" target="_blank">Telegram<span class="acchide">&nbsp;@Esymeo</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Automation Baby', 179519)">Цитировать<span class="acchide">&nbsp;Сообщение 148</span></a></li> </ul> </div> </div> </div> <div id="p180045" class="post" data-posted="1675670305" data-user-id="7629" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p180045" onclick="return false;">Поделиться</a><strong>149</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p180045">06.02.23 10:58</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=7629" rel="nofollow">Will O The Wisp</a></li> <li class="pa-title">Участник</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/7629-1628896044.jpg" alt="Will O The Wisp" title="Will O The Wisp" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />10.12.24 18:09</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+594</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/43425.svg" alt="Изыскатель" title="Изыскатель" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p180045-content" class="post-content"> <p>Размещаем нужных/админов/актив прозрачными картинками с увеличением при наведении </p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>[html] &lt;style&gt; .face{ margin: 0; min-height: 200px; display: grid; place-content: center; grid-auto-flow: column; gap: 30px; background: #E0E4CC; } .face img { --s: 100px; /* image size */ --b: 2px; /* border thickness */ --c: #ae3ec9; /* border color */ --cb: #e9ecef; /* background color */ --f: 1; /* initial scale */ width: var(--s); height: 100%; aspect-ratio: 1; padding-top: calc(var(--s)/5); cursor: pointer; border-radius: 0 0 999px 999px; --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box; --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b)); outline: var(--b) solid var(--c); outline-offset: var(--_o); background: radial-gradient( circle closest-side, var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000 ) var(--_g); -webkit-mask: linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%, radial-gradient(circle closest-side,#000 99%,#0000) var(--_g); transform: scale(var(--f)); transition: .5s; } .face img:hover { --f: 1.4; /* hover scale */ } &lt;/style&gt; &lt;div class=&quot;face&quot;&gt; &lt;img src=&quot;https://freepngimg.com/save/111632-anime-render-free-hd-image/860x1083&quot; alt=&quot;User1&quot; title=&quot;User&quot;&gt; &lt;img src=&quot;https://i.pinimg.com/originals/a5/c8/55/a5c85538ed821324d2024864b22cdf60.png&quot; alt=&quot;User2&quot; title=&quot;User2&quot; style=&quot;--c:#efac27;--cb: #bbdeea&quot;&gt; &lt;img src=&quot;https://freepngimg.com/save/111247-anime-render-png-image-high-quality/1225x1447&quot; alt=&quot;User3&quot; title=&quot;User3&quot; style=&quot;--c:#255b98;--cb:#f3bf99&quot;&gt; &lt;img src=&quot;https://yuritanima.de/graphics/render/render_1021.png&quot; alt=&quot;User4&quot; title=&quot;User4&quot; style=&quot;--c:#b2b2af;--cb:#255b98&quot;&gt; &lt;/div&gt; [/html]</pre></div></div></div> <p class="lastedit">Отредактировано Will O The Wisp (06.02.23 11:04)</p> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+3</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-quote"><a href="javascript:quote('Will O The Wisp', 180045)">Цитировать<span class="acchide">&nbsp;Сообщение 149</span></a></li> </ul> </div> </div> </div> <div id="p180066" class="post altstyle endpost" data-posted="1675759163" data-user-id="7629" data-group-id="8"> <h3><span><a class="sharelink" rel="nofollow" href="#p180066" onclick="return false;">Поделиться</a><strong>150</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=15#p180066">07.02.23 11:39</a></span></h3> <div class="container"> <div class="post-author"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=7629" rel="nofollow">Will O The Wisp</a></li> <li class="pa-title">Участник</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/7629-1628896044.jpg" alt="Will O The Wisp" title="Will O The Wisp" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />10.12.24 18:09</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+594</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/43425.svg" alt="Изыскатель" title="Изыскатель" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p180066-content" class="post-content"> <p>Итак, это домик. Фиолетовый домик на фиолетовом поле под фиолетовыми облаками и белыми звездами. Его размер можно менять. Можно внести в него текст как в примере. Можно просто жить в нем. <br /><a href="https://codepen.io/gayane-gasparyan/pen/yLqjVWb" rel="nofollow ugc" target="_blank">https://codepen.io/gayane-gasparyan/pen/yLqjVWb</a></p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>[html] &lt;style&gt; :root { --min-width: 230px; --max-width: 460px; --height: 130px; --color-blue-50: #d0eefd; --color-blue-100: #9bcafa; --color-blue-dark: #494bc6; --color-blue-light: #6e7cf2; --color-purple-dark: #6d68f1; --color-purple-light: #9e9ef5; --color-pink: #f2a9c6; } .house { position: relative; min-width: var(--min-width); max-width: var(--max-width); container: house / inline-size; resize: horizontal; overflow: hidden; height: 450px; display: flex; justify-content: flex-end; flex-direction: column; } #container5 { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; margin: 0; width: 100%; height: 500px; overflow: hidden; background: linear-gradient(135deg, #c7b6f4 0%, #838df4 50%); } .rooms { background: linear-gradient( 0deg, var(--color-blue-dark) 0%, var(--color-blue-light) 70% ); height: var(--height); display: flex; justify-content: space-between; padding: 20px 28px; box-shadow: inset 0px 16px 0px 0 rgb(73 75 198 / 20%); } .roof { position: relative; } .roof-top { width: 100%; height: 45px; background: linear-gradient( 0deg, var(--color-blue-light) 0%, var(--color-blue-100) 100% ); clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); } .roof-base { width: 100%; height: 20px; background: var(--color-blue-dark); } .chimney { height: 45px; width: 30px; background: var(--color-blue-light); position: absolute; top: -45px; right: 20%; transition: right .25s; } .chimney:before { content: ''; background: var(--color-blue-100); height: 12px; width: 40px; position: absolute; transform: translateX(-50%); left: 50%; } .entrance { width: 165px; height: 260px; background: linear-gradient( -45deg, var(--color-purple-dark) 0%, var(--color-purple-light) 70% ); position: absolute; bottom: 0; transform: translateX(-50%); left: 50%; clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); display: flex; align-items: center; flex-direction: column; justify-content: flex-end; } .entrance-roof { --size: 140px; width: var(--size); height: var(--size); border: solid 20px var(--color-blue-dark); position: absolute; bottom: 100px; transform: rotate(45deg); left: calc(50% - (var(--size) / 2)); border-bottom: none; border-right: none; box-shadow: inset 20px 20px 0px -6px rgb(73 75 198 / 20%); } .shadow { position: absolute; width: 100%; transform: rotate(-45deg); bottom: -64px; height: 165px; left: 72px; box-shadow: 0 0 0px 13px rgb(73 75 198 / 20%); } .windows { display: flex; } .windows:last-child { transform: scaleX(-1); } .window { background: var(--color-pink); width: 36px; height: 54px; opacity: 0; transition: opacity, transform 0.25s; position: relative; transform: translateX(50px); } .window:before { content: ''; position: absolute; height: 10px; width: 43px; background: var(--color-blue-dark); bottom: -10px; left: 50%; transform: translateX(-50%); } .window:first-child { margin-right: 20px; } .entrance-door { height: 70px; width: 38px; background: var(--color-blue-dark); } .entrance-stairs { width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .stair { height: 10px; width: 100%; } .stair-1 { background: hsl(237deg 82% 77%); } .stair-2 { background: hsl(237deg 82% 80%); width: 80%; } .stair-3 { background: hsl(237deg 82% 83%); width: 60%; } .entrance-window { width: 54px; height: 54px; background: var(--color-blue-50); position: relative; border-radius: 50%; margin-bottom: 36px; transition: border-radius 0.25s; } .entrance-window:before { content: ''; position: absolute; width: 62px; height: 10px; background: var(--color-blue-dark); opacity: 0; bottom: -10px; left: 50%; transform: translateX(-50%); } @container house (min-width: 350px) { .chimney { right: 15%; } .window-first { opacity: 1; transform: translateX(0); } .entrance-window { border-radius: 0; height: 45px; } .entrance-window:before { opacity: 1; } } @container house (min-width: 250px) { .window-last { opacity: 1; transform: translateX(0); } } /* scene */ .ground { height: 50px; width: 100%; background: #414363; } .sun { position: fixed; width: 100px; height: 100px; top: 50px; left: 60px; background: hsl(298deg 70% 92% / 100%); border-radius: 50%; box-shadow: 0px 0px 0 10px hsl(298deg 70% 92% / 53%), 0px 0px 0 20px hsl(298deg 70% 92% / 30%); animation: sunshine 30s linear infinite; } .sun svg { scale: 2; } .sun svg path { fill: #d0bef6; } .cloud { height: 40px; border-radius: 20px; width: 360px; position: absolute; background: linear-gradient(90deg, #9499f4 0%, #989bf5 100%); opacity: 0.8; top: 80px; left: 0; animation: windBlow 30s linear infinite; z-index: 5; } .cloud-small { top: 25px; height: 20px; left: 200px; width: 500px; animation: windBlow-small 35s linear infinite; } .cloud-bottom { top: 160px; left: 600px; width: 400px; animation: windBlow-bottom 35s linear infinite; } .star { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fdfdff; top: 40px; left: 45vw; z-index: 1; animation: flicker 1.5s linear infinite; } .star:nth-child(1) { scale: 0.6; animation-delay: 0.3s; } .star:nth-child(2) { top: 96px; left: 62vw; animation-delay: 0.5s; } .star:nth-child(3) { top: 159px; left: 77vw; scale: 0.6; animation-delay: 1s; } .star:nth-child(4) { top: 359px; left: 81vw; scale: 0.7; animation-delay: 0.5s; } .star:nth-child(5) { top: 108px; left: 51vw; scale: 0.6; } .star:nth-child(6) { top: 290px; left: 20vw; scale: 0.6; animation-delay: 1s; } .star:nth-child(7) { top: 339px; left: 7vw; scale: 0.6; animation-delay: 0.3s; } body:hover .hint { display: none; } .hint { color: #abff62; position: absolute; left: calc(50vw + 125px); bottom: calc(50px - 20px); font-family: sans-serif; } .hint svg { transform: rotate(130deg) translate(7px, 0px); } @keyframes sunshine { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes windBlow { 0% { transform: translateX(100vw); } 100% { transform: translateX(-360px); } } @keyframes windBlow-small { 0% { transform: translateX(100vw); } 100% { transform: translateX(-700px); } } @keyframes windBlow-bottom { 0% { transform: translateX(100vw); } 100% { transform: translateX(-1000px); } } @keyframes flicker { 0% { opacity: 1; } 50% { opacity: 0.1; } 100% { opacity: 1; } } &lt;/style&gt; &lt;div id='container5'&gt; &lt;div class=&quot;house&quot;&gt; &lt;div class=&quot;roof&quot;&gt; &lt;div class=&quot;chimney&quot;&gt;&lt;/div&gt; &lt;div class=&quot;roof-top&quot;&gt;&lt;/div&gt; &lt;div class=&quot;roof-base&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;rooms&quot;&gt; &lt;div class=&quot;windows&quot;&gt; &lt;div class=&quot;window window-last&quot;&gt;&lt;/div&gt; &lt;div class=&quot;window window-first&quot;&gt;&lt;b style=&quot;position: absolute; margin: 70px 0px 0px -70px; display: block; width: 100px; height: 50px; overflow: auto; text-overflow: ellipsis; border: 2px solid currentColor; color: #fff; font-size: 0.8em; text-align: center; white-space: break-spaces;&quot;&gt;Добро пожаловаться Важный текст для прочтения если вам он тут так нужен&lt;/b&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;windows&quot;&gt; &lt;div class=&quot;window window-last&quot;&gt;&lt;/div&gt; &lt;div class=&quot;window window-first&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;entrance-roof hidden&quot;&gt; &lt;div class=&quot;shadow&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;entrance&quot;&gt; &lt;div class=&quot;entrance-window&quot;&gt;&lt;/div&gt; &lt;div class=&quot;entrance-door&quot;&gt;&lt;/div&gt; &lt;div class=&quot;entrance-stairs&quot;&gt; &lt;div class=&quot;stair stair-3&quot;&gt;&lt;/div&gt; &lt;div class=&quot;stair stair-2&quot;&gt;&lt;/div&gt; &lt;div class=&quot;stair stair-1&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;entrance-roof&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;hint&quot;&gt; &lt;svg width=&quot;10&quot; height=&quot;20&quot; viewBox=&quot;0 0 420 503&quot;&gt; &lt;path d=&quot;M219.5 352.844C207.887 169.969 155.867 96.0442 0 3.84404C0 3.84404 152.5 -28.656 245.5 95.344C338.5 219.344 332.5 352.844 332.5 352.844H419.5L274.5 502.344L129.5 352.844H219.5Z&quot; fill=&quot;#abff62&quot; /&gt; &lt;/svg&gt; размер &lt;/div&gt; &lt;div class=&quot;ground&quot;&gt;&lt;/div&gt; &lt;div class=&quot;sun&quot;&gt; &lt;svg width=&quot;100&quot; height=&quot;100&quot; viewBox=&quot;0 0 800 800&quot;&gt; &lt;path d=&quot;M716.712 400L794.561 300.166C799.882 293.344 801.406 284.482 798.652 276.393C795.897 268.304 789.206 261.991 780.698 259.454L656.225 222.353L657.712 97.9201C657.815 89.4149 653.589 81.3907 646.379 76.3912C639.168 71.3916 629.864 70.0359 621.421 72.7578L497.868 112.56L422.428 11.0592C417.272 4.1214 408.912 0 400 0C391.087 0 382.728 4.1214 377.571 11.0592L302.129 112.562L178.574 72.7596C170.129 70.0394 160.826 71.3933 153.616 76.3929C146.406 81.3925 142.181 89.4166 142.283 97.9218L143.772 222.355L19.2988 259.456C10.7911 261.992 4.10011 268.306 1.34671 276.395C-1.40852 284.484 0.116665 293.344 5.43832 300.168L83.287 400.002L5.43832 499.836C0.116665 506.658 -1.40669 515.52 1.34671 523.609C4.10011 531.698 10.793 538.011 19.2988 540.548L143.772 577.647L142.283 702.08C142.181 710.585 146.406 718.609 153.616 723.609C160.828 728.607 170.127 729.962 178.574 727.242L302.129 687.44L377.571 788.943C382.728 795.88 391.087 800.002 400 800.002C408.912 800.002 417.272 795.88 422.428 788.943L497.87 687.44L621.423 727.242C629.866 729.962 639.17 728.608 646.381 723.609C653.591 718.609 657.816 710.585 657.714 702.082L656.227 577.647L780.7 540.548C789.208 538.011 795.899 531.698 798.654 523.609C801.408 515.52 799.884 506.66 794.563 499.836L716.712 400ZM400 655.343C252.454 655.343 132.417 540.796 132.417 399.998C132.417 259.201 252.454 144.655 400 144.655C547.545 144.655 667.582 259.201 667.582 399.998C667.582 540.796 547.545 655.343 400 655.343Z&quot; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div class=&quot;cloud&quot;&gt;&lt;/div&gt; &lt;div class=&quot;cloud cloud-small&quot;&gt;&lt;/div&gt; &lt;div class=&quot;cloud cloud-bottom&quot;&gt;&lt;/div&gt; &lt;div class=&quot;stars&quot;&gt; &lt;div class=&quot;star&quot;&gt;&lt;/div&gt; &lt;div class=&quot;star&quot;&gt;&lt;/div&gt; &lt;div class=&quot;star&quot;&gt;&lt;/div&gt; &lt;div class=&quot;star&quot;&gt;&lt;/div&gt; &lt;div class=&quot;star&quot;&gt;&lt;/div&gt; &lt;div class=&quot;star&quot;&gt;&lt;/div&gt; &lt;div class=&quot;star&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; [/html]</pre></div></div></div> <p class="lastedit">Отредактировано Will O The Wisp (07.02.23 11:40)</p> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+5</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-quote"><a href="javascript:quote('Will O The Wisp', 180066)">Цитировать<span class="acchide">&nbsp;Сообщение 150</span></a></li> </ul> </div> </div> </div> </div> <div class="linksb"> <div class="postlink"><span><a href="https://forumd.ru/post.php?tid=7075" rel="nofollow">Ответить</a></span></div> <div class="pagelink">Страница: <a class="prev" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=14">&laquo;</a>&#160;&#160;<a href="https://forumd.ru/viewtopic.php?id=7075">1</a>&#160;<span class="ellipsis">&#8230;</span>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=13">13</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=14">14</a>&#160;<strong>15</strong>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=16">16</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=17">17</a>&#160;<span class="ellipsis">&#8230;</span>&#160;<a href="https://forumd.ru/viewtopic.php?id=7075&amp;p=21">21</a>&#160;&#160;<a class="next" href="https://forumd.ru/viewtopic.php?id=7075&amp;p=16">&raquo;</a></div> </div> <!-- topic_banner_bottom --> <div id="post-form" class="formal"> <h2><span>Быстрый ответ</span></h2> <form id="post" class="container" method="post" action="/post.php?tid=7075" onsubmit="this.submit.disabled=true;if(process_form(this)){return true;}else{this.submit.disabled=false;return false;}"> <fieldset> <legend><span>Напишите ваше сообщение и нажмите &laquo;Отправить&raquo;</span></legend> <div class="fs-box hashelp"> <div id="formkey"></div> <div id="formetc" style="display:none"></div> <input type="hidden" name="form_sent" value="1" /> <input type="hidden" name="form_user" value="Guest" /> <div id="form-buttons"></div> <div id="tags"> <script type="text/javascript"> html = '<table cellspacing="0" cellpadding="0"><tr>'; $.each(FORUM.get('editor'), function(key,value){ if (key != 'settings') { var icon = key; html += '<td id="button-'+key+'" title="'+value.name+'"><img onclick="FORUM.get(\'editor.'+key+'.onclick()\')" src="/i/blank.gif" /></td>'; } }); html += '</tr></table>'; $('#form-buttons').append(html); </script> <div class="container" id="font-area" style="display:none" onclick="changeVisibility('font-area')"></div> <script type="text/javascript"> html = ''; $.each(FORUM.get('editor.font.fonts'), function(key,value){ html += '<div style="font-family:'+value+'"><span>'+value+'</span><img onclick="bbcode(\'[font='+value+']\',\'[/font]\')" src="/i/blank.gif" /></div>'; }); $('#font-area').append(html); </script> <div class="container" id="size-area" style="display:none" onclick="changeVisibility('size-area')"></div> <script type="text/javascript"> html = ''; $.each(FORUM.get('editor.size.sizes'), function(key,value){ html += '<div style="font-size:'+value+FORUM.get('editor.size.unit')+'"><span>'+value+FORUM.get('editor.size.unit')+'</span><img onclick="bbcode(\'[size='+value+']\',\'[/size]\')" src="/i/blank.gif" /></div>'; }); $('#size-area').append(html); </script> <div class="container" id="color-area" style="display:none" onclick="changeVisibility('color-area')"></div> <script type="text/javascript"> html = '<table cellspacing="0" cellpadding="0"><tr>'; $.each(FORUM.get('editor.color.colors'), function(key,value){ html += '<td style="background-color:'+value+'"><img onclick="bbcode(\'[color='+value+']\',\'[/color]\')" src="/i/blank.gif" /></td>'; }); html += '</tr></table>'; $('#color-area').append(html); </script> <div class="container" id="table-area" style="display:none"></div> <script type="text/javascript"> html = '<table cellspacing="0" cellpadding="0">'; for (r=1; r<=FORUM.get('editor.table.rows'); r++){ html += '<tr>'; for (c=1; c<=FORUM.get('editor.table.cols'); c++){ html += '<td><img onclick="tag_table('+c+','+r+'); changeVisibility(\'table-area\')" src="/i/blank.gif" alt="'+c+'x'+r+'" title="'+c+'x'+r+'" /></td>'; } html += '</tr>'; } html += '</table>'; html += '<div><p><input id="table-layout" type="checkbox"'+(FORUM.get('editor.table.layout') == 'auto' ? '' : ' checked="checked"')+' onclick="FORUM.set(\'editor.table.layout\', ($(this).is(\':checked\') ? \'fixed\' : \'auto\'));" /><label for="table-layout">Ячейки одной ширины</label></p></div>'; $('#table-area').append(html); $('#table-area td').hover(function() { for (var x = 0; x <= $(this).index(); x++) { for (var y = 0; y <= $(this).parent().index(); y++) { $(this).parent().parent().children().eq(y).children().eq(x).addClass('selected'); } } }, function() { $('#table-area td').removeClass('selected'); }); </script> <div class="container" id="smilies-area" style="display:none" onclick="changeVisibility('smilies-area')"> <div id="smilies-block"></div> </div> <script type="text/javascript"> FORUM.set('editor.smile.dir', 'img/smilies/MyBB/universal'); FORUM.set('editor.smile.smilies', {":angry:":"angry.gif","o.O":"blink.gif",":blush:":"blush.gif",":canthearyou:":"canthearyou.gif",":confused:":"confused.gif",":cool:":"cool.gif",":crazyfun:":"crazyfun.gif",":crazy:":"crazy.gif",":'(":"cry.gif",":disappointed:":"disappointed.gif",":dontcare:":"dontcare.gif",":dontknow:":"dontknow.gif",":flag:":"flag.gif",":flirt:":"flirt.gif","8-)":"funny.gif",":glasses:":"glasses.gif","^^":"happy.gif",":hobo:":"hobo.gif",":huh:":"huh.gif",":idea:":"idea.gif",":insane:":"insane.gif",":jumping:":"jumping.gif",":D":"lol.gif",":love:":"love.gif",":mad:":"mad.gif",":music:":"music.gif",":mybb:":"mybb.gif",":|":"neutral.gif",":no:":"no.gif",":nope:":"nope.gif",":offtop:":"offtop.gif",":playful:":"playful.gif",":question:":"question.gif",":rain:":"rain.gif",":rofl:":"rofl.gif",":rolleyes:":"rolleyes.gif",":(":"sad.gif",":sceptic:":"sceptic.gif",":shine:":"shine.gif",":O":"shock.gif",":x":"sick.gif",":)":"smile.gif",":smoke:":"smoke.gif",":stupor:":"stupor.gif",":surprise:":"surprise.gif",":suspicious:":"suspicious.gif",":tired:":"tired.gif",":tomato:":"tomato.gif",":P":"tongue.gif",":unsure:":"unsure.gif","%-)":"wacko.gif",":whistle:":"whistle.gif",";)":"wink.gif",":writing:":"writing.gif",":yep:":"yep.gif"}); </script> <div class="container" id="image-area" style="display:none"> <div id="image-area-sels" style="display:block"> <div><strong>Выберите источник изображения</strong></div> <div id="image-source-list"> <a id="action-computer" class="turn_link">С компьютера</a> <a id="action-internet" class="turn_link">Из интернета</a> </div> </div> <div id="image-area-tcon-internet" style="display:none"> <div id="image-area-thd">Вставьте ссылки на изображения (по одной на строку)</div> <textarea id="image-area-tinp" rows="5"></textarea> </div> <div id="image-area-tcon-computer" style="display:none"> <table cellpadding="0" cellspacing="0"> <tr valign="top"> <td id="imageupload-left"> <div id="image_upload"><input id="image_upload_input" type="file" name="files[]" multiple /><input class="button" type="button" value="Выберите файлы" /></div> <div id="file"></div> <div id="image-width" style="display:none"></div> <div id="image-thumb-width" style="display:none"></div> <div id="upload-button-container" style="display:none"><input id="upload-button" class="button" type="button" value="Загрузить" /></div> <div id="image-insert-format" style="display:none"></div> </td> <td id="imageupload-right"> <div id="load-image-container" style="display:none"> <div id="imageQueue" style="display:none"></div> <div id="uploaded-images" style="display:none"></div> </div> <div id="insert-image-tip" style="display:none"><span>Нажмите на изображение, чтобы вставить в форму.</span></div> </td> </tr> </table> </div> <div id="image-area-actions" style="display:none"> <a id="action-insert-textarea" style="display:none">Вставить</a> <a id="action-insert-uploaded" style="display:none">Вставить все</a> <a id="action-clean-textarea" style="display:none">Очистить</a> <a id="action-clean-uploaded" style="display:none">Очистить</a> <a id="action-return">Другой источник</a> <a id="action-close">Закрыть</a> </div> </div> <div class="container" id="video-area" style="display:none"> <div id="video-area-hsel" style="display:block;" onclick="MYBB_vsi(this,arguments)"> <div><strong>Выберите видеохостинг</strong></div> <div id="video-host-list"></div> </div> <div id="video-area-tcon" style="display:none;"> <div id="video-area-thd">Вставьте ссылку или embed-код видеофайла</div> <textarea id="video-area-tinp" onclick="this.select();"></textarea> <div id="video-area-msg"></div> </div> <div id="video-area-actions" style="display:none"> <a href="#" onclick="MYBB_vsc.parse(); return false;">Вставить</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" onclick="changeVisibility('video-area'); return false;">Закрыть</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" onclick="MYBB_vsc.reInit(); return false;">Другой хостинг</a> </div> </div> <div class="container" id="spoiler-area" style="display:none"> <div id="spoiler-sels"> <div><strong>Выберите тип спойлера</strong></div> <div id="spoiler-type-list"> <a href="#" onclick="return tag_spoiler('media');">Спойлер для медиа</a> <a href="#" onclick="return tag_spoiler('spoiler');">Спойлер для текста</a> </div> </div> </div> <script type="text/javascript"> html = []; $.each(FORUM.get('editor.video.hosts'), function(key,value){ html.push('<a class="turn_link" href="#'+value+'">'+value+'</a>'); }); $('#video-host-list').append(html.join(', ')); </script> <div class="container" id="keyboard-area" style="display:none"> <span id="keyboard-span"></span> </div> <script type="text/javascript"> html = ''; $.each(FORUM.get('editor.keyboard.keys'), function(key,value){ html += value == '_NL_' ? '<br />' : '<input type="button" value="'+value+'" onclick="keyboard(\''+value+'\')" />'; }); $('#keyboard-span').append(html); </script> <div class="container" id="addition-area" style="display:none" onclick="changeVisibility('addition-area')"></div> <script type="text/javascript"> html = ''; $.each(FORUM.get('editor.addition.tags'), function(key,value){ html += '<div onclick="FORUM.get(\'editor.addition.tags.'+key+'.onclick()\')"><span>'+value.name+'</span></div>'; }); $('#addition-area').append(html); </script> </div> <p class="inputfield required"> <label for="fld1">Имя</label><br /> <span class="input"><input type="text" id="fld1" name="req_username" value="" size="25" maxlength="25" /></span> </p> <p class="areafield required"> <span class="input"><textarea id="main-reply" name="req_message" rows="13"></textarea></span> </p> <!-- WYSI - визуальный редактор сообщений © Alex_63, 2024 <style> /* Подсветка кнопок WYSI для новой формы ответа */ .fo-buttons span.wysi-highlight { color: #333; background-color: #aaa; } .fo-lists span.wysi-highlight { background-color: #ddd; } .fo-lists .colors span.wysi-highlight { outline: solid 3px #bbb; } </style> <link rel="stylesheet" type="text/css" href="https://forumstatic.ru/f/ru/bestbb/wysi.css" /> <script type="text/javascript" src="https://forumstatic.ru/f/ru/bestbb/wysi.js"></script> <style> #wysi-reply.post-content {margin-bottom: 0;} .wysi-active #tags.wysi-disabled .fo-lists .container {opacity: .5; cursor: not-allowed !important;} .wysi-active #form-buttons.wysi-disabled .fo-buttons, .wysi-active #tags.wysi-disabled .fo-lists .container *[onclick] {pointer-events: none;} </style> <script> //Доп.атрибуты для подсветки кнопок $(function() { $('.fo-butblok>span').attr('data-action', function() { return $(this).attr('onclick') ? $(this).attr('onclick').match(/\.([^\.]+)\.onclick/)[1] : $(this).attr('class').match(/\s([^-]+)-button/)[1] }); $('.fo-lists>.container').attr('data-container', function() { return $(this).attr('class').split('s container')[0] }) .find('span[style]').each(function() { var style = $(this).attr('style'); var prop = style && style.split(':')[0]; $(this).attr('data-style', prop + ':' + $(this).css(prop)); }) .end().find('span[onclick]').not('[style]').each(function() { var action = $(this).attr('onclick').replace(/^.+?\((.+)\)/, '$1').split('.')[3]; $(this).attr('data-tag', action); }); }); </script> --> <!-- BB-цитирование © Alex_63, 2024 --> <script type="text/javascript" src="https://forumstatic.ru/f/su/1bb/bbquote.js"></script> <script type="text/javascript" src="https://forumstatic.ru/f/su/1bb/bbquote.custom_quotes.js"></script> <!-- Перенос формы ответа под отвечаемое сообщение (c) 2017 --> <script type="text/javascript"> (function() { if (!$('#pun-viewtopic').length) return; var tstPrev = false, prevElem, form, cnt, cntPrev; $(window).on('click', '.fd-name a,.pl-quote a,.pl-BBquote,.pl-reply a,.fd-ava-but a', function() { form = $('#post-form'); if (!tstPrev) prevElem = form.prev(), tstPrev = true; $('script', form).remove(); form.insertAfter($(this).parents('.post')); if (!$('.button[name=cancel]', form).length) $('.button[name=preview]', form).after(' <input type="button" class="button" id="rus" name="cancel" value="Отмена" />'); if ($.trim($('#main-reply', form).val()) != cnt) cntPrev = $.trim($('#main-reply', form).val()); setTimeout(function() { cnt = $.trim($('#main-reply', form).val()); }, 10); }).on('click', '.button[name=cancel]', function() { form.insertAfter(prevElem); $('.fs-box .container[id]:visible', form).hide(); $(this).remove(); if ($.trim($('#main-reply', form).val()) == cnt) $('#main-reply', form).val(cntPrev); }); })(); </script> <!-- Кастомная форма ответа: начало --> <div id="my-fo"> <!-- кнопки начало --><div class="fo-buttons"> <div class="fo-butblok"> <span class="material-icons font-button ank-hide mobhide" title="<gg class='rus'>Шрифт</gg><gg class='eng'>Font</gg>">font_download</span> <span class="material-icons size-button ank-hide mobhide" title="<gg class='rus'>Размер</gg><gg class='eng'>Size</gg>">format_size</span> <span class="material-icons" onclick="FORUM.get('editor.bold.onclick()')" title="<gg class='rus'>Жирный</gg><gg class='eng'>Bold</gg>">format_bold</span> <span class="material-icons" onclick="FORUM.get('editor.italic.onclick()')" title="<gg class='rus'>Курсив</gg><gg class='eng'>Italic</gg>">format_italic</span> <span class="material-icons" onclick="FORUM.get('editor.underline.onclick()')" title="<gg class='rus'>Подчеркнутый</gg><gg class='eng'>Underline</gg>">format_underlined</span> <span class="material-icons" onclick="FORUM.get('editor.strike.onclick()')" title="<gg class='rus'>Зачеркнутый</gg><gg class='eng'>Strike</gg>">strikethrough_s</span> <span class="material-icons ank-hide" onclick="FORUM.get('editor.addition.tags.mark.onclick()')" title="<gg class='rus'>Маркированный</gg><gg class='eng'>Marked</gg>">format_paint</span> <span class="material-icons color-button ank-hide" title="<gg class='rus'>Цвет</gg><gg class='eng'>Color</gg>">color_lens</span> </div> <div class="sep"></div> <div class="fo-butblok"> <span class="material-icons" onclick="FORUM.get('editor.left.onclick()')" title="<gg class='rus'>Выравнивание слева</gg><gg class='eng'>Align left</gg>">format_align_left</span> <span class="material-icons" onclick="FORUM.get('editor.center.onclick()')" title="<gg class='rus'>Выравнивание по центру</gg><gg class='eng'>Align center</gg>">format_align_center</span> <span class="material-icons" onclick="FORUM.get('editor.right.onclick()')" title="<gg class='rus'>Выравнивание справа</gg><gg class='eng'>Align right</gg>">format_align_right</span> <span class="material-icons list-button" title="<gg class='rus'>Список</gg><gg class='eng'>List</gg>">list</span> <span class="material-icons ank-hide mobhide" onclick="FORUM.get('editor.table.onclick()')" title="<gg class='rus'>Таблица</gg><gg class='eng'>Table</gg>">table_view</span> </div> <div class="sep"></div> <div class="fo-butblok"> <span class="material-icons" onclick="FORUM.get('editor.link.onclick()')" title="<gg class='rus'>Ссылка</gg><gg class='eng'>Link</gg>">link</span> <span class="material-icons image-button" onclick="FORUM.get('editor.image.onclick()')" title="<gg class='rus'>Изображение</gg><gg class='eng'>Image</gg>">add_photo_alternate</span> <span class="material-icons video-button" onclick="FORUM.get('editor.video.onclick()')" title="<gg class='rus'>Видео</gg><gg class='eng'>Video</gg>">ondemand_video</span> <span class="material-icons smile-button ank-hide" onclick="FORUM.get('editor.smile.onclick()')" title="<gg class='rus'>Смайлы</gg><gg class='eng'>Smiles</gg>">mood</span> <span class="material-icons rus" onclick="FORUM.get('editor.voice.onclick()')" title="Голосовое сообщение">mic</span> </div> <div class="sep"></div> <div class="fo-butblok"> <span class="material-icons spoiler-button" onclick="FORUM.get('editor.spoiler.onclick()')" title="<gg class='rus'>Свернутый текст</gg><gg class='eng'>Spoiler</gg>">content_cut</span> <span onclick="FORUM.get('editor.hide.onclick()')" class="material-icons" title="<gg class='rus'>Скрытый текст</gg><gg class='eng'>Hidden text</gg>">lock_open</span> <span onclick="FORUM.get('editor.quote.onclick()')" class="material-icons" title="<gg class='rus'>Цитата</gg><gg class='eng'>Quote</gg>">format_quote</span> <span class="material-icons code-button" title="<gg class='rus'>Код/Текст для копирования</gg><gg class='eng'>Code/Text to copy</gg>">code</span> </div> <div class="sep"></div> <div class="fo-butblok"> <span onclick="FORUM.get('editor.addition.tags.hr.onclick()')" class="material-icons mobhide" title="<gg class='rus'>Горизонтальная линия</gg><gg class='eng'>Horizontal line</gg>">horizontal_rule</span> <span onclick="FORUM.get('editor.addition.tags.anchor.onclick()')" class="material-icons mobhide" title="<gg class='rus'>Якорь</gg><gg class='eng'>Anchor</gg>">anchor</span> <span onclick="FORUM.get('editor.addition.tags.abbr.onclick()')" class="material-icons mobhide" title="<gg class='rus'>Поясняющий текст</gg><gg class='eng'>Tooltip text</gg>">live_help</span> <span class="material-icons symbol-button ank-hide mobhide" title="<gg class='rus'>Символы</gg><gg class='eng'>Symbols</gg>">emoji_symbols</span> <span class="material-icons aditional-button ank-hide mobhide" title="<gg class='rus'>Дополнительно</gg><gg class='eng'>Additionally</gg>">library_add</span> </div> </div><!-- кнопки конец --> </div> <!-- раскрывающиеся списки --><div class="fo-lists"> <!-- списки --> <div class="lists container"> <span onclick="bbcode('[ul=disc]','[/ul]')" class="disc"><ul><li><gg class='rus'>Точками</gg><gg class='eng'>Dots</gg></li></ul></span> <span onclick="bbcode('[ul=circle]','[/ul]')" class="circle"><ul><li><gg class='rus'>Кружочками</gg><gg class='eng'>Circles</gg></li></ul></span> <span onclick="bbcode('[ul=square]','[/ul]')" class="square"><ul><li><gg class='rus'>Квадратами</gg><gg class='eng'>Squares</gg></li></ul></span> <span onclick="bbcode('[ul=decimal]','[/ul]')" class="decimal"><ul><li><gg class='rus'>Цифрами</gg><gg class='eng'>Numbers</gg></li></ul></span> <span onclick="bbcode('[ul=upper-roman]','[/ul]')" class="roman"><ul><li><gg class='rus'>Римскими цифрами</gg><gg class='eng'>Roman Numerals</gg></li></ul></span> <span onclick="bbcode('[ul=none]','[/ul]')" class="nopadding"><ul><li><gg class='rus'>Без обозначений</gg><gg class='eng'>No Markers</gg></li></ul></span> <span onclick="bbcode('[*',']')" class="nopadding"><gg class='rus'>Многострочный пункт списка</gg><gg class='eng'>Multiline List Item</gg></span> </div> <!-- коды --> <div class="codes container"> <span onclick="bbcode('[code]','[/code]')" class="disc"><ul><li><gg class='rus'>Текст</gg><gg class='eng'>Text</gg></li></ul></span> <span onclick="bbcode('[block=code-html][code]','[/code][/block]')" class="disc"><ul><li>HTML</li></ul></span> <span onclick="bbcode('[block=code-css][code]','[/code][/block]')" class="disc"><ul><li>CSS</li></ul></span> <span onclick="bbcode('[block=code-javascript][code]','[/code][/block]')" class="disc"><ul><li>Javascript</li></ul></span> </div> <!-- шрифты --> <div class="fonts container"> <span style="font-family:Bebas Neue" onclick="bbcode('[font=Bebas Neue]','[/font]')">Bebas Neue</span> <span style="font-family:Arial" onclick="bbcode('[font=Arial]','[/font]')">Arial</span> <span style="font-family:Georgia" onclick="bbcode('[font=Georgia]','[/font]')">Georgia</span> <span style="font-family:Microsoft Sans Serif" onclick="bbcode('[font=Microsoft Sans Serif]','[/font]')">Microsoft Sans Serif</span> <span style="font-family:Tahoma" onclick="bbcode('[font=Tahoma]','[/font]')">Tahoma</span> <span style="font-family:Verdana" onclick="bbcode('[font=Verdana]','[/font]')">Verdana</span> <span style="font-family:Century Gothic" onclick="bbcode('[font=Century Gothic]','[/font]')">Century Gothic</span> <span style="font-family:Palatino Linotype" onclick="bbcode('[font=Palatino Linotype]','[/font]')">Palatino Linotype</span> <span style="font-family:Times New Roman" onclick="bbcode('[font=Times New Roman]','[/font]')">Times New Roman</span> <span style="font-family:Franklin Gothic Medium" onclick="bbcode('[font=Franklin Gothic Medium]','[/font]')">Franklin Gothic Medium</span> <span style="font-family:Impact" onclick="bbcode('[font=Impact]','[/font]')">Impact</span> <span style="font-family:Arial Black" onclick="bbcode('[font=Arial Black]','[/font]')">Arial Black</span> <span style="font-family:Courier New" onclick="bbcode('[font=Courier New]','[/font]')">Courier New</span> <span style="font-family:Lucida Console" onclick="bbcode('[font=Lucida Console]','[/font]')">Lucida Console</span> <span style="font-family:Comic Sans Ms" onclick="bbcode('[font=Comic Sans Ms]','[/font]')">Comic Sans Ms</span> </div> <!-- размеры --> <div class="sizes container"> <span style="font-size:10px" onclick="bbcode('[size=10]','[/size]')">10px</span> <span style="font-size:12px" onclick="bbcode('[size=12]','[/size]')">12px</span> <span style="font-size:14px" onclick="bbcode('[size=14]','[/size]')">14px</span> <span style="font-size:16px" onclick="bbcode('[size=16]','[/size]')">16px</span> <span style="font-size:18px" onclick="bbcode('[size=18]','[/size]')">18px</span> <span style="font-size:20px" onclick="bbcode('[size=20]','[/size]')">20px</span> <span style="font-size:22px" onclick="bbcode('[size=22]','[/size]')">22px</span> </div> <!-- цвета --> <div class="colors container"> <span style="background-color: #f98561;" onclick="bbcode('[color=#f98561]','[/color]')"></span> <span style="background-color: #b80000;" onclick="bbcode('[color=#b80000]','[/color]')"></span> <span style="background-color: #e63737;" onclick="bbcode('[color=#e63737]','[/color]')"></span> <span style="background-color: #f7941d;" onclick="bbcode('[color=#f7941d]','[/color]')"></span> <span style="background-color: #e36120;" onclick="bbcode('[color=#e36120]','[/color]')"></span> <span style="background-color: #29aecb;" onclick="bbcode('[color=#29aecb]','[/color]')"></span> <span style="background-color: #00a1e4;" onclick="bbcode('[color=#00a1e4]','[/color]')"></span> <span style="background-color: #0481d9;" onclick="bbcode('[color=#0481d9]','[/color]')"></span> <span style="background-color: #0080b7;" onclick="bbcode('[color=#0080b7]','[/color]')"></span> <span style="background-color: #1c8426;" onclick="bbcode('[color=#1c8426]','[/color]')"></span> <span style="background-color: #26af33;" onclick="bbcode('[color=#26af33]','[/color]')"></span> <span style="background-color: #71218e;" onclick="bbcode('[color=#71218e]','[/color]')"></span> <span style="background-color: #a726af;" onclick="bbcode('[color=#a726af]','[/color]')"></span> <span style="background-color: #2e3e4f;" onclick="bbcode('[color=#2e3e4f]','[/color]')"></span> <span style="background-color: #2d343a;" onclick="bbcode('[color=#2d343a]','[/color]')"></span> <span style="background-color: #666666;" onclick="bbcode('[color=#666666]','[/color]')"></span> <span style="background-color: #a5a5a5;" onclick="bbcode('[color=#a5a5a5]','[/color]')"></span> <span style="background-color: #d7d7d7;" onclick="bbcode('[color=#d7d7d7]','[/color]')"></span> <span style="background-color: #000000;" onclick="bbcode('[color=#000000]','[/color]')"></span> <span style="background-color: #ffffff;" onclick="bbcode('[color=#ffffff]','[/color]')"></span> </div> <!-- символы --> <div class="symbols container"> <span onclick="keyboard('©')">©</span> <span onclick="keyboard('®')">®</span> <span onclick="keyboard('&#8482;')">&#8482;</span> <span onclick="keyboard('«')">«</span> <span onclick="keyboard('»')">»</span> <span onclick="keyboard('&#10077;')">&#10077;</span> <span onclick="keyboard('&#10078;')">&#10078;</span> <span onclick="keyboard('&#162;')">&#162;</span> <span onclick="keyboard('&#8364;')">&#8364;</span> <span onclick="keyboard('&#163;')">&#163;</span> <span onclick="keyboard('&#8381;')">&#8381;</span> <span onclick="keyboard('&#8383;')">&#8383;</span> <span onclick="keyboard('&#10008;')">&#10008;</span> <span onclick="keyboard('&#10004;')">&#10004;</span> <span onclick="keyboard('&#9746;')">&#9746;</span> <span onclick="keyboard('&#9745;')">&#9745;</span> <span onclick="keyboard('&#9744;')">&#9744;</span> <span onclick="keyboard('&#9679;')">&#9679;</span> <span onclick="keyboard('&#8226;')">&#8226;</span> <span onclick="keyboard('&#9724;')">&#9724;</span> <span onclick="keyboard('&#9706;')">&#9706;</span> <span onclick="keyboard('&#9726;')">&#9726;</span> <span onclick="keyboard('&#9673;')">&#9673;</span> <span onclick="keyboard('&#9670;')">&#9670;</span> <span onclick="keyboard('&#9684;')">&#9684;</span> <span onclick="keyboard('&#9792;')">&#9792;</span> <span onclick="keyboard('&#9794;')">&#9794;</span> <span onclick="keyboard('&#10084;')">&#10084;</span> <span onclick="keyboard('&#9835;')">&#9835;</span> <span onclick="keyboard('&#12483;')">&#12483;</span> <span onclick="keyboard('&#10052;')">&#10052;</span> <span onclick="keyboard('&#9728;')">&#9728;</span> <span onclick="keyboard('&#9729;')">&#9729;</span> <span onclick="keyboard('&#10059;')">&#10059;</span> <span onclick="keyboard('&#10047;')">&#10047;</span> <span onclick="keyboard('&#9998;')">&#9998;</span> <span onclick="keyboard('&#9986;')">&#9986;</span> <span onclick="keyboard('&#9733;')">&#9733;</span> <span onclick="keyboard('&#9734;')">&#9734;</span> <span onclick="keyboard('&#8249;')">&#8249;</span> <span onclick="keyboard('&#8250;')">&#8250;</span> <span onclick="keyboard('&#8592;')">&#8592;</span> <span onclick="keyboard('&#8593;')">&#8593;</span> <span onclick="keyboard('&#8594;')">&#8594;</span> <span onclick="keyboard('&#8595;')">&#8595;</span> <span onclick="keyboard('&#8596;')">&#8596;</span> <span onclick="keyboard('&#8597;')">&#8597;</span> <span onclick="keyboard('&#9668;')">&#9668;</span> <span onclick="keyboard('&#9650;')">&#9650;</span> <span onclick="keyboard('&#9658;')">&#9658;</span> <span onclick="keyboard('&#9660;')">&#9660;</span> <span onclick="keyboard('&#9666;')">&#9666;</span> <span onclick="keyboard('&#9652;')">&#9652;</span> <span onclick="keyboard('&#9656;')">&#9656;</span> <span onclick="keyboard('&#9662;')">&#9662;</span> <span onclick="keyboard('&#9471;')">&#9471;</span> <span onclick="keyboard('&#10102;')">&#10102;</span> <span onclick="keyboard('&#10103;')">&#10103;</span> <span onclick="keyboard('&#10104;')">&#10104;</span> <span onclick="keyboard('&#10105;')">&#10105;</span> <span onclick="keyboard('&#10106;')">&#10106;</span> <span onclick="keyboard('&#10107;')">&#10107;</span> <span onclick="keyboard('&#10108;')">&#10108;</span> <span onclick="keyboard('&#10109;')">&#10109;</span> <span onclick="keyboard('&#10110;')">&#10110;</span> <span onclick="keyboard('&#10111;')">&#10111;</span> </div> <!-- Дополнительно --> <div class="aditionals container"> <span onclick="bbcode('[size=28][font=Bebas Neue]','[/font][/size]');"><gg class='rus'>Заголовок</gg><gg class='eng'>Title</gg></span> <span onclick="bbcode('[block=prev][align=center]','[/align][/block]');"><gg class='rus'>Автосжатие больших картинок</gg><gg class='eng'>Auto-resize large images</gg></span> <span onclick="bbcode('[block=hidecode][hide]','[/hide][/block]');"><gg class='rus'>Скрыть от гостей</gg><gg class='eng'>Hide from guests</gg></span> <span class="rus" onclick="bbcode('[block=hidelink][hide][block=superlink][url=',']СКАЧАТЬ[/url][/block][/hide][/block]');">Ссылка «скачать»</span> <span class="eng" onclick="bbcode('[block=hidelink][hide][block=superlink][url=',']DOWNLOAD[/url][/block][/hide][/block]');">Download link</span> <span onclick="FORUM.get('editor.addition.tags.you.onclick()')"><gg class='rus'>Имя читателя</gg><gg class='eng'>Reader's name</gg></span> <span onclick="FORUM.get('editor.addition.tags.add.onclick()')"><gg class='rus'>Добавлено спустя&#8230;</gg><gg class='eng'>Added after...</gg></span> <span onclick="FORUM.get('editor.addition.tags.sup.onclick()')"><gg class='rus'>Надстрочный текст</gg><gg class='eng'>Superscript text</gg></span> <span onclick="FORUM.get('editor.addition.tags.sub.onclick()')"><gg class='rus'>Подстрочный текст</gg><gg class='eng'>Subscript text</gg></span> <span onclick="bbcode('[block=class]','[/block]');" class="userhide"><gg class='rus'>Блок</gg><gg class='eng'>Block</gg></span> <span onclick="bbcode('[html]','[/html]');" class="userhide">HTML</span> <span onclick="bbcode('[icon]verified','[/icon]');" class="userhide">иконка</span> </div> </div><!-- раскрывающиеся списки --> <!-- ---------------- --> <script type="text/javascript"> $('#my-fo').appendTo('#form-buttons'); $('.fo-lists').appendTo('#tags'); var buttonList = [ {button: ".code-button", list: ".codes"}, {button: ".font-button", list: ".fonts"}, {button: ".size-button", list: ".sizes"}, {button: ".color-button", list: ".colors"}, {button: ".list-button", list: ".lists"}, {button: ".symbol-button", list: ".symbols"}, {button: ".aditional-button", list: ".aditionals"} ]; buttonList.forEach(function(item) { $("#form-buttons " + item.button).click(function() { $("#tags .fo-lists " + item.list).toggleClass('show'); }); }); </script> <!-- Новая форма ответа: Конец --> <!-- Кнопка шаблона для новой формы --> <script type="text/javascript"> $(document).ready(function() { if ($('#post #addition-area div[onclick*="addition.tags.pattern"]').length) { $('#my-fo .fo-butblok').first().before('<span id="fo-shablon" class="material-icons tip" onclick="FORUM.get(\'editor.addition.tags.pattern.onclick()\')" title="Шаблон добавления материала">note_add</span><div class="sep sep-shab"></div>'); } //Скрытие кнопки шаблонов в некоторых разделах var shabforums = [5, 6, 19]; for (var i = 0; i < shabforums.length; i++) { var crumbsSelector = 'a[href="/viewforum.php?id=' + shabforums[i] + '"]'; var hideShab = document.querySelector(crumbsSelector); if (hideShab) { $("#fo-shablon").not('[onclick*="voice"]').addClass('moderator-ann2'); $(".sep-shab").addClass('moderator-ann2'); } } }); </script> <style> .fo-buttons #fo-shablon {background-color: #e63737; color: #fff;} .fo-buttons #fo-shablon:hover {background-color: #2e3e4f; color: #e63737;} </style> <!--дополнительные смайлы--> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/75411.js" defer></script> <!-- Инструментарий: Пресеты тегов для топиков портфолио --> <div id="pt-swich" class="superlink"><a class="pt-hide tip" title="убрать инструментарий спец-топиков">Скрыть инструментарий</a><a class="pt-show tip" title=" инструментарий спец-топиков">Показать инструментарий</a></div> <div id="pt-inside"> <div id="portfolio-tags"> <h4>Теги оформления специальных постов</h4> <div class="pt-row"> <div class="pt-click red tip" title="Обязательный тег для создания специального поста:<br><img src='https://i.imgur.com/sXmPgWq.jpg'>">Сделать пост специальным<span class="pttag-cont">[block="portfoliopost"]portfoliopost[/block],</span></div> <div class="pt-click tip" title="Перекрашивает специальный пост в более светлые тона">Светлый фон<span class="pttag-cont">[block="makeportfoliolight"]makeportfoliolight[/block],</span></div> <div class="pt-click tip" title="Элементы поста красного цвета:<br><img src='https://i.imgur.com/2yNshzv.jpg'>">Красный пост<span class="pttag-cont">[block="saledpost"]saledpost[/block],</span></div> <div class="pt-click tip" title="Элементы поста синего цвета:<br><img src='https://i.imgur.com/YnDb3Ar.jpg'>">Синий пост<span class="pttag-cont">[block="forsalepost"]forsalepost[/block],</span></div> <div class="pt-click tip"title="Элементы поста зеленого цвета:<br><img src='https://i.imgur.com/H4ATE6K.jpg'>">Зеленый пост<span class="pttag-cont">[block="freepost"]freepost[/block],</span></div> <br> <div class="pt-click red tip" title="Обязательный тег для создания поста в рамочке на всю ширину форума (но без профиля):<br><img src='https://i.imgur.com/7k916GZ.png'>">Пост без профиля<span class="pttag-cont">[block="no-prof"]no-prof[/block],</span></div> </div> <h4>Теги оформления картинок</h4> <p><b>Обложки: </b>Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px</p> <div class="pt-row"> <div class="pt-click tip" title="Вставить простую обложку:<br><img src='https://i.imgur.com/DpG7E19.jpg'>">Обложка<span class="pttag-cont">[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]</span></div> <div class="pt-click tip" title="Обложка с иконкой замка:<br><img src='https://i.imgur.com/akk5tJr.jpg'>">Закрыто<span class="pttag-cont">[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]</span></div> <div class="pt-click tip" title="Обложка с иконкой доллара:<br><img src='https://i.imgur.com/VtsGPlx.jpg'>">Продажа<span class="pttag-cont">[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]</span></div> <div class="pt-click tip" title="Обложка с иконкой подарка:<br><img src='https://i.imgur.com/VHGTul4.jpg'>">Подарок<span class="pttag-cont">[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]</span></div> <br> <p><b>Превью: </b>Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px</p> <div class="pt-click tip" title="Вставить блок для превью картинок:<br><img src='https://i.imgur.com/00hJCG0.jpg'>">Блок для превью<span class="pttag-cont">[block="morepics"],[/block]</span></div> <br> <p><b>Разноцветные картинки-ссылки: </b>Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)</p> <div class="pt-click tip" title="Вставляет блок для ОТОБРАЖЕНИЯ и выравнивания их по центру:<br><img src='https://i.imgur.com/tLqbv3Z.jpg'>">Блок для картинок-ссылок<span class="pttag-cont">[block="port-block"],[/block]</span></div> <div class="pt-click tip" title="Вставляет красный блок картинки-ссылки:<br><img src='https://i.imgur.com/a3D74QO.jpg'>">Красный<span class="pttag-cont">[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]</span></div> <div class="pt-click tip" title="Вставляет синий блок картинки-ссылки:<br><img src='https://i.imgur.com/m8s4vcP.jpg'>">Синий<span class="pttag-cont">[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]</span></div> <div class="pt-click tip" title="Вставляет зеленый блок картинки-ссылки:<br><img src='https://i.imgur.com/JLSrWtL.jpg'>">Зеленый<span class="pttag-cont">[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]</span></div> <div class="pt-click tip" title="Вставляет желтый блок картинки-ссылки:<br><img src='https://i.imgur.com/jOJ7EsQ.jpg'>">Желтый<span class="pttag-cont">[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]</span></div> </div> <h4>Теги оформления контента</h4> <div class="pt-row"> <div class="pt-click tip" title="Создает блок с обведенным текстом:<br><img src='https://i.imgur.com/ouNs2Hb.jpg'>">Обведенный текст<span class="pttag-cont">[block="details"] [block="det"],[/block] [/block]</span></div> <div class="pt-click tip" title="Добавить еще один внутренний блок для текста в ряд:<br><img src='https://i.imgur.com/pTAQB0C.jpg'>">Добавить еще блок<span class="pttag-cont">[block="det"],[/block]</span></div> <br> <div class="pt-click tip" title="Добавляет блок с ссылками-кнопками:<br><img src='https://i.imgur.com/PNFlJfB.jpg'>">Блок с кнопками<span class="pttag-cont">[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]</span></div> <div class="pt-click tip" title="Вставляет синюю кнопку:<br><img src='https://i.imgur.com/KblQToG.jpg'>">Синяя кнопка<span class="pttag-cont">[block="demo"][url=ссылка]текст,[/url][/block]</span></div> <div class="pt-click tip" title="Вставляет оранжевую кнопку:<br><img src='https://i.imgur.com/xmMJL1b.jpg'>">Оранжевая кнопка<span class="pttag-cont">[block="store"][url=ссылка]текст,[/url][/block]</span></div> </div> </div></div> <style> .pttag-cont, #portfolio-tags .pt-click.admin, #pt-inside, #pt-swich, #pt-swich.show .pt-show, #pt-swich .pt-hide {display:none;} .isadmin #portfolio-tags .pt-click.admin {display:inline-block;} .ismoderator #pt-swich, .gid6 #pt-swich, .gid16 #pt-swich, .ismoderator #pt-inside.show, .gid6 #pt-inside.show, .gid16 #pt-inside.show, .ismoderator #pt-swich.show .pt-hide, .gid6 #pt-swich.show .pt-hide, .gid16 #pt-swich.show .pt-hide {display:block;} #portfolio-tags {padding: 10px;} #portfolio-tags h4 {margin: 0 0 5px; font-family: 'Bebas Neue'; font-size: 20px; font-weight: normal;} #portfolio-tags p {margin:0;} #portfolio-tags .pt-row {padding-bottom: 10px;} #portfolio-tags .pt-click {cursor: pointer; display: inline-block; padding: 5px; border-radius: 5px; margin: 5px; font-size: 16px; text-transform: uppercase; background: #cacaca; color: #0080b7;} .dark #portfolio-tags .pt-click {background: #4f4f4f; color: #4eafc1;} #portfolio-tags .pt-click:hover, .dark #portfolio-tags .pt-click:hover {background: #2e3e4f; color: #e63737;} #portfolio-tags .pt-click.red, .dark #portfolio-tags .pt-click.red {background-color: #f98561; color: #fff;} #portfolio-tags .pt-click.red:hover, .dark #portfolio-tags .pt-click.red:hover {background-color: #e63737; color: #fff;} #portfolio-tags .pt-click.admin, .dark #portfolio-tags .pt-click.admin {background-color: #a726af; color: #fff;} #portfolio-tags .pt-click.admin:hover, .dark #portfolio-tags .pt-click.admin:hover {background-color: #71218e; color: #fff;} #pt-swich {margin: 10px 0 0;} #pt-swich.superlink a {cursor:pointer;} </style> <script type="text/javascript"> $("#portfolio-tags div").click(function(){ var L=$(this).find(".pttag-cont").html(); var P=L.split(','); bbcode(P[0],P[1]) return false; }); $(document).ready(function() { $(".pt-hide").click(function(){ $("#pt-inside").removeClass("show"); $("#pt-swich").removeClass("show"); }); $(".pt-show").click(function(){ $("#pt-inside").addClass("show"); $("#pt-swich").addClass("show"); }); }); </script> <!-- ------------------------------------------------------ админские инструментарии навигаторов ------------------------------------------------------ --> <!-- Пресеты тегов для навигатора по общему портфолио --> <div id="supertags2"><div id="meny-styles2" class="container"> <span class="addscript"><p>добавить работу <i>[block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block] </i> </p></span> <div class="icons"> <span class="menustylestext">Иконки:</span> <p><span class="icon material-icons">lock</span><i>[block="icon material-icons"]lock,[/block]</i></p> <p><span class="icon fa-solid fa-sack-dollar"></span><i>[block="icon fa-solid fa-sack-dollar"],[/block]</i></p> <p><span class="icon fa-solid fa-gift"></span><i>[block="icon fa-solid fa-gift"],[/block]</i></p> </div> <div class="sttags"> <span class="menustylestext">ТЕГИ</span> <span class="menustylestext2">(вставить в <b>p-out</b> через пробел)</span> <br> <div class="forumtags"> <span class="menustylestext3">Тип работы: </span> <span class="tag red"><p>под заказ<i> saled,</i></p></span> <span class="tag lightblue"><p>на продажу<i> forsale,</i></p></span> <span class="tag green"><p>бесплатно<i> free,</i></p></span> <br><br> <span class="menustylestext3">Основная категория: </span> <span class="tag"><p>Вебдизайн<i> dis,</i></p><em>(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)</em></span> <span class="tag"><p>Графика<i> graf,</i></p><em>(для графона, НЕ включающего кодинг/скрипты)</em></span> <span class="tag"><p>Скрипты/коды<i> code,</i></p><em>(для готовых разработок и работы по верстке/кодингу)</em></span> <br> <span class="menustylestext3">Мини-фильтры дизайнов: </span> <span class="tag orange"><p>адаптивные<i> mob,</i></p></span> <span class="tag blue"><p>ролевые игры<i> frpg,</i></p></span> <span class="tag yellow"><p>компьютерные игры<i> game,</i></p></span> <span class="tag orange"><p>нейтральные<i> flat,</i></p></span> </div> <div class="forumtags"> <span class="menustylestext3">Подкатегории: </span> <span class="tag"><p>Дизайн форумов/сайтов<i> fulldis,</i></p><em>(для полных работ по дизайну)</em></span> <span class="tag"><p>Макеты<i> layout,</i></p><em>(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)</em></span> <span class="tag"><p>Верстка<i> dis-code,</i></p><em>(для работ по верстке чужих дизайнов или отдельных штук)</em></span> <span class="tag"><p>Соц-сети/стримы<i> graf-s,</i></p><em>(графон для оформления соцсетей/стримов)</em></span> <span class="tag"><p>Ролевая графика/арт<i> art,</i></p><em>(для мелкой графики)</em></span> <span class="tag"><p>Javascript/CSS<i> js,</i></p><em>(для скриптов или выложенных цсс кодов)</em></span> </div> </div> </div></div> <style> #meny-styles3 i,#supertags2, #supertags3 {display: none;} #supertags2.show, #supertags3.show {display:block!important;} #supertags2 .container p, #supertags3 .container p { padding: 3px; border-radius: 3px; color: #fff; cursor:pointer; margin: 2px 0; font-size: 14px; display: inline-block; } #supertags2 .container p:hover, #supertags3 .container p:hover {background-color: #939393;} #supertags2 .container .addscript p, #supertags3 .container .addscript p {text-transform: uppercase;font-family: 'Bebas Neue', Impact;padding: 2px 10px 0;background: #f98561;border-bottom: 6px solid #e63737;border-radius: 0;font-size: 24px;} #supertags2 .container .addscript p:hover, #supertags3 .container .addscript p:hover {background: #e63737;} #supertags2 .addscript, #supertags3 .addscript {margin: 10px 10px 5px 0px; display: inline-block;} #supertags2 .icons {display: inline-block;vertical-align: bottom;} .menustylestext2 b {color: #e63737;} #supertags2 .icon.fa-gift {color: #26af33;} #supertags2 .icon.fa-sack-dollar {color: #00a1e4;} #supertags2 .icon.material-icons {color: #e63737;} .tag p {background: #1e1d1d;} .forumtags {margin-top: 6px;} .forumtags em {display: block;margin-bottom: 5px;font-size: 11px;} </style> <script type="text/javascript"> $("#supertags2").appendTo('#tags'); $("#meny-styles3 p").click(function(){ var L=$(this).find("i").html(); var P=L.split(','); bbcode(P[0],P[1]) return false; }); if(window.location.toString().indexOf('/viewtopic.php?id=7108')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178198')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178360')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178361')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178362')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178363')>0) {$("#supertags2").addClass('show');} </script> <!-- Пресеты тегов для навигатора по бесплатным дизам --> <div id="supertags3"><div id="meny-styles2" class="container"> <span class="addscript fd"><p>Бесплатный диз от FD <i>[block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block] </i> </p></span> <span class="addscript fdpay"><p>Платный диз от FD <i>[block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block] </i> </p></span> <span class="addscript norm"><p>Дизайн от юзеров <i>[block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block] </i> </p></span> <div class="sttags"> <span class="menustylestext">ТЕГИ</span> <span class="menustylestext2">(вставить в <b>p-out</b> через пробел)</span> <br> <div class="forumtags"> <span class="menustylestext3">Платформа: </span> <span class="tag blue"><p>MyBB.ru<i> mybb-ru,</i></p></span> <span class="tag red"><p>Макет (любая платформа)<i> any,</i></p></span> <br><br> <span class="menustylestext3">Параметры: </span> <span class="tag"><p>+ PSD<i> psd-in,</i></p><em>(в наличии макет помимо кодов)</em></span> <span class="tag"><p>+ адаптивка<i> mob,</i></p><em>(есть версия для мобилок)</em></span> </div> <div class="forumtags"> <span class="menustylestext3">Тематика: </span> <span class="tag orange"><p>нейтральные<i> flat,</i></p></span> <span class="tag blue"><p>ролевые игры<i> frpg,</i></p></span> <span class="tag yellow"><p>компьютерные игры<i> game,</i></p></span> <span class="tag lightblue"><p>фентези<i> fant,</i></p></span> <span class="tag red"><p>аниме<i> anime,</i></p></span> <span class="tag yellow"><p>кино/сериалы<i> kino,</i></p></span> <span class="tag green"><p>стимпанк/киберпанк<i> cyb,</i></p></span> <span class="tag yellow"><p>мультфильмы<i> kids,</i></p></span> <span class="tag orange"><p>животные<i> cats,</i></p></span> <br><br> <span class="menustylestext3">Цвета: </span> <span class="tag"><p>тёмные<i> darkst,</i></p></span> <span class="tag gray"><p>светлые<i> light,</i></p></span> <span class="tag orange"><p>яркие<i> bright,</i></p></span> </div> </div> </div></div> <style> #supertags3 .container .addscript.fd p {background: #26af33; border-bottom: 6px solid #1c8426;} #supertags3 .container .addscript.fd p:hover {background: #1c8426;} #supertags3 .container .addscript.fdpay p {background: #23afc8; border-bottom: 6px solid #0080b7;} #supertags3 .container .addscript.fdpay p:hover {background: #0080b7;} #supertags3 .container .addscript.norm p {background: #f7941d; border-bottom: 6px solid #e36120;} #supertags3 .container .addscript.norm p:hover {background: #e36120;} </style> <script type="text/javascript"> $("#supertags3").appendTo('#tags'); if(window.location.toString().indexOf('/viewtopic.php?id=7140')>0) {$("#supertags3").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178837')>0) {$("#supertags3").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178838')>0) {$("#supertags3").addClass('show');} </script> <!-- Пресеты тегов для навигатора по скриптам --> <div id="supertags"><div id="meny-styles2" class="container"> <span class="addscript"><p>добавить скрипт/код <i>[block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block] </i> </p></span> <div class="icons"> <span class="menustylestext">Иконки:</span> <p><span class="icon fa-brands fa-js"></span><i>[block="icon fa-brands fa-js"],[/block]</i></p> <p><span class="icon fa-brands fa-css3-alt"></span><i>[block="icon fa-brands fa-css3-alt"],[/block]</i></p> <p><span class="icon fa-regular fa-file-lines"></span><i>[block="icon fa-regular fa-file-lines"],[/block]</i></p> <p><span class="icon fa-solid fa-file-code"></span><i>[block="icon fa-solid fa-file-code"],[/block]</i></p> <p><span class="icon fa-solid fa-file-invoice-dollar"></span><i>[block="icon fa-solid fa-file-invoice-dollar"],[/block]</i></p> </div> <div class="sttags"> <span class="menustylestext">ТЕГИ</span> <span class="menustylestext2">(*значение в скобках вставить в SCRBLOCK через пробел)</span> <div class="maintags"> <span class="menustylestext2">Тип кода: </span> <span class="tag blue"><p>скрипт (js)<i>[block="js"]скрипт, js[/block]</i></p></span> <span class="tag lightblue"><p>css код (css)<i>[block="css"]css код, css[/block]</i></p></span> <span class="tag orange"><p>HTML/CSS шаблоны (shab)<i>[block="shab"]HTML/CSS шаблоны, shab[/block]</i></p></span> <span class="tag red"><p>Модули/Расширения (global)<i>[block="global"]Модули/Расширения, global[/block]</i></p></span> <span class="menustylestext2">Платформа: </span> <span class="tag blue"><p>MyBB.ru (mybb-ru)<i>[block="mybb-ru"]MyBB.ru, mybb-ru[/block]</i></p></span> <span class="tag red"><p>Любой движок (any)<i>[block="any"]Любой движок, any[/block]</i></p></span> </div> <div class="forumtags"> <span class="menustylestext3">Тип для форума: </span> <span class="tag orange"><p>Пользователи (users)<i>[block="users"]Пользователи, users[/block]</i></p></span> <span class="tag green"><p>Профиль (userprof)<i>[block="userprof"]Профиль, userprof[/block]</i></p></span> <span class="tag lightblue"><p>Доп. поля профиля (adfield)<i>[block="adfield"]Доп. поля профиля, adfield[/block]</i></p></span> <span class="tag yellow"><p>Аватары (avatars)<i>[block="avatars"]Аватары, avatars[/block]</i></p></span> <span class="tag lightblue"><p>Репутация (repa)<i>[block="repa"]Репутация, repa[/block]</i></p></span> <br> <span class="tag orange"><p>Группы (groups)<i>[block="groups"]Группы, groups[/block]</i></p></span> <span class="tag green"><p>Гoсти (guest)<i>[block="guest"]Гoсти, guest[/block]</i></p></span> <span class="tag red"><p>Администраторы (admins)<i>[block="admins"]Администраторы, admins[/block]</i></p></span> <span class="tag blue"><p>Модераторы (moders)<i>[block="moders"]Модераторы, moders[/block]</i></p></span> <br> <span class="tag yellow"><p>Регистрация (regis)<i>[block="regis"]Регистрация, regis[/block]</i></p></span> <span class="tag lightblue"><p>Личные сообщения (ls)<i>[block="ls"]Личные сообщения, ls[/block]</i></p></span> <span class="tag yellow"><p>Вход (login)<i>[block="login"]Вход, login[/block]</i></p></span> <span class="tag lightblue"><p>Подписки (subsc)<i>[block="subsc"]Подписки, subsc[/block]</i></p></span> <br> <span class="tag yellow"><p>Поиск (search)<i>[block="search"]Поиск, search[/block]</i></p></span> <span class="tag lightblue"><p>Цитирование (quotes)<i>[block="quotes"]Цитирование, quotes[/block]</i></p></span> <span class="tag yellow"><p>Пагинация (pagin)<i>[block="pagin"]Пагинация, pagin[/block]</i></p></span> <span class="tag green"><p>Опросы (polls)<i>[block="polls"]Опросы, polls[/block]</i></p></span> <span class="tag yellow"><p>Смайлы (smiles)<i>[block="smiles"]Смайлы, smiles[/block]</i></p></span> <br> <span class="tag lightblue"><p>Фикс скриптов QuadroBoards (qbfix)<i>[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]</i></p></span> </div> <div class="forumtags"> <span class="menustylestext3">Страница форума: </span> <span class="tag red"><p>На всех страницах (allpages)<i>[block="allpages"]На всех страницах, allpages[/block]</i></p></span> <span class="tag orange"><p>Страницы (созд. в админке) (fpages)<i>[block="fpages"]Страницы (соз. в админке), fpages[/block]</i></p></span> <br> <span class="tag orange"><p>Главная страница (mainpage)<i>[block="mainpage"]Главная страница, mainpage[/block]</i></p></span> <span class="tag yellow"><p>Объявление (announ)<i>[block="announ"]Объявление, announ[/block]</i></p></span> <span class="tag green"><p>Категории (categ)<i>[block="categ"]Категории, categ[/block]</i></p></span> <span class="tag yellow"><p>Форумы (forums)<i>[block="forums"]Форумы, forums[/block]</i></p></span> <span class="tag lightblue"><p>Статистика (stats)<i>[block="stats"]Статистика, stats[/block]</i></p></span> <br> <span class="tag orange"><p>Список тем (topiclist)<i>[block="topiclist"]Список тем, topiclist[/block]</i></p></span> <span class="tag yellow"><p>Страница профиля (profpage)<i>[block="profpage"]Страница профиля, profpage[/block]</i></p></span> <br> <span class="tag orange"><p>Тема (topics)<i>[block="topics"]Тема, topics[/block]</i></p></span> <span class="tag green"><p>Сообщения (posts)<i>[block="posts"]Сообщения, posts[/block]</i></p></span> <span class="tag yellow"><p>Контент сообщений (p-content)<i>[block="p-content"]Контент сообщений, p-content[/block]</i></p></span> <span class="tag yellow"><p>Рейтинг постов (p-repa)<i>[block="p-repa"]Рейтинг постов, p-repa[/block]</i></p></span> <span class="tag green"><p>Профиль автора поста (p-prof)<i>[block="p-prof"]Профиль автора поста, p-prof[/block]</i></p></span> <br> <span class="tag orange"><p>Форма ответа (fo)<i>[block="fo"]Форма ответа, fo[/block]</i></p></span> <span class="tag green"><p>Модификация ФО (fomod)<i>[block="fomod"]Модификация ФО, fomod[/block]</i></p></span> <span class="tag yellow"><p>Новые BB-теги (newbb)<i>[block="newbb"]Новые BB-теги, newbb[/block]</i></p></span> <span class="tag lightblue"><p>Инструментарий спец тем/постов (spesh)<i>[block="spesh"]Инструментарий спец тем/постов, spesh[/block]</i></p></span> </div> <div class="speztags"> <span class="menustylestext3">Универсальные теги: </span> <span class="tag red"><p>Дизайн/стиль (dis)<i>[block="dis"]Дизайн/стиль, dis[/block]</i></p></span> <span class="tag blue"><p>Замена элементов/атрибутов (chan)<i>[block="chan"]Замена элементов/атрибутов, chan[/block]</i></p></span> <span class="tag green"><p>Загрузка (load)<i>[block="load"]Загрузка, load[/block]</i></p></span> <span class="tag lightblue"><p>Переадресация (redir)<i>[block="redir"]Переадресация, redir[/block]</i></p></span> <span class="tag lightblue"><p>Скроллинг (scroll)<i>[block="scroll"]Скроллинг, scroll[/block]</i></p></span> <br> <span class="tag orange"><p>Виджеты (vidjet)<i>[block="vidjet"]Виджеты, vidjet[/block]</i></p></span> <span class="tag lightblue"><p>Меню (menu)<i>[block="menu"]Меню, menu[/block]</i></p></span> <span class="tag yellow"><p>Вкладки (ttabs)<i>[block="ttabs"]Вкладки, ttabs[/block]</i></p></span> <span class="tag lightblue"><p>Галереи (gall)<i>[block="gall"]Галереи, gall[/block]</i></p></span> <span class="tag green"><p>Слайдеры (sliders)<i>[block="sliders"]Слайдеры, sliders[/block]</i></p></span> <span class="tag yellow"><p>Ротаторы (rotat)<i>[block="rotat"]Ротаторы, rotat[/block]</i></p></span> <span class="tag lightblue"><p>Таймеры/даты (timers)<i>[block="timers"]Таймеры/даты, timers[/block]</i></p></span> <span class="tag green"><p>Спойлеры (spoilers)<i>[block="spoilers"]Спойлеры, spoilers[/block]</i></p></span> <br> <span class="tag green"><p>Реклама (adv)<i>[block="adv"]Реклама, adv[/block]</i></p></span> <span class="tag yellow"><p>Изображения (pics)<i>[block="pics"]Изображения, pics[/block]</i></p></span> <span class="tag lightblue"><p>Медиа (media)<i>[block="media"]Медиа, media[/block]</i></p></span> <span class="tag blue"><p>Ролевые игры (frpg)<i>[block="frpg"]Ролевые игры, frpg[/block]</i></p></span> <br> <span class="tag green"><p>Hover-эффекты (hover)<i>[block="hover"]Hover-эффекты, hover[/block]</i></p></span> <span class="tag yellow"><p>Анимация (anim)<i>[block="anim"]Анимация, anim[/block]</i></p></span> <span class="tag lightblue"><p>Украшения (decor)<i>[block="decor"]Украшения, decor[/block]</i></p></span> <span class="tag red"><p>Праздники (seleb)<i>[block="seleb"]Праздники, seleb[/block]</i></p></span> <br> <span class="tag red"><p>Ограничения/запреты (stops)<i>[block="stops"]Ограничения/запреты, stops[/block]</i></p></span> <span class="tag yellow"><p>Антикопирование (nocopy)<i>[block="nocopy"]Антикопирование, nocopy[/block]</i></p></span> <span class="tag lightblue"><p>Уведомления (notif)<i>[block="notif"]Уведомления, notif[/block]</i></p></span> </div> </div> </div></div> <style> .speztags {border-top: 2px solid #ccc; padding-top: 10px;} #pun .punbb #tags .forumtags { display: inline-block; vertical-align: top; width: 48% !important; } #pun .punbb #tags .maintags {display: block;} .maintags { margin: 10px 0; border-width: 2px 0 2px 0px; border-style: solid; border-color: #ccc; padding: 6px 0; } #supertags .container .addscript p { text-transform: uppercase; font-family: 'Bebas Neue', Impact; padding: 2px 10px 0; background: #f98561; border-bottom: 6px solid #e63737; border-radius: 0; font-size: 24px; } #supertags .addscript {margin: 10px 10px 10px 0px; display: inline-block;} #supertags .icons {display: inline-block;vertical-align: bottom;} #supertags .container .addscript p:hover {background: #e63737;} .tag.blue p {background: #0481d9;} .tag.lightblue p {background: #29aecb;} .tag.red p {background: #e63737;} .tag.orange p {background: #f98561;} .tag.gray p {background: #bbb;} .tag.green p {background: #26af33;} .tag.yellow p {background: #f7941d;} .menustylestext, .menustylestext2 {margin: 0 5px;} .menustylestext { font-size: 26px; text-transform: uppercase; font-family: 'Bebas Neue', Impact; } .menustylestext2 {font-weight: bold;} .menustylestext3 {display: block;font-weight: bold;margin-bottom: 5px;} #meny-styles2 .icon {font-size: 30px;} #meny-styles2 .icon.fa-js {color: #0481d9;} #meny-styles2 .icon.fa-css3-alt {color: #29aecb;} #meny-styles2 .icon.fa-file-lines {color: #f98561;} #meny-styles2 .icon.fa-file-code {color: #e63737;} #meny-styles2 .icon.fa-file-invoice-dollar {color: #f7941d} #meny-styles2 i,#supertags {display: none;} #supertags.show {display:block!important;} #supertags .container p { padding: 3px; border-radius: 3px; color: #fff; cursor:pointer; margin: 2px 0; font-size: 14px; display: inline-block; } #supertags .container p:hover {background-color: #939393;} </style> <script type="text/javascript"> $("#supertags").appendTo('#tags'); $("#meny-styles2 p").click(function(){ var L=$(this).find("i").html(); var P=L.split(','); bbcode(P[0],P[1]) return false; }); if(window.location.toString().indexOf('/viewtopic.php?id=7078')>0) {$("#supertags").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=176290')>0) {$("#supertags").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=176293')>0) {$("#supertags").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=176329')>0) {$("#supertags").addClass('show');} </script> </div> </fieldset> <p class="formsubmit"><input type="submit" class="button submit submit-premod" name="submit" value="Отправить на модерацию" accesskey="s" /> <input type="submit" class="button" name="preview" value="Посмотреть" accesskey="p" /></p> </form> </div> </div> <script type="text/javascript">$(document).trigger("pun_main_ready");</script> <!-- pun_stats --> <!-- banner_mini_bottom --> <!-- banner_bottom --> <div id="pun-break3" class="divider"><hr /></div> <div id="pun-crumbs2" class="section"> <p class="container crumbs"><strong>Вы здесь</strong> <em>&#187;&#160;</em><a href="https://forumd.ru/">ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов</a> <em>&#187;&#160;</em><a href="https://forumd.ru/viewforum.php?id=123">Коворкинг: обмен вдохновением и опытом</a> <em>&#187;&#160;</em>Эксперименты Will O The Wisp</p> </div> <div id="pun-break4" class="divider"><hr /></div> <div id="pun-about" class="section"> <p class="container"> </p> </div> <script type="text/javascript">$(document).trigger("pun_about_ready"); if (typeof ym == 'object') {ym(201230, 'userParams', {UserId:1, is_user:0}); ym(201230, 'params', {forum_id: 517111});}</script> <div id="html-footer" class="section"> <div class="container"><script> </script> <!-- переключение языка --> <script> if ((!window['UserID'] || 1 == UserID) && !['ru', 'ru-RU'].includes(navigator.language) && !~document.cookie.indexOf('lang=')) {document.cookie = "lang=en"; location.reload()} var i,smbCodeArr=[];var arr0=[1026,1027,8218,1107,8222,8230,8224,8225,8364,8240,1033,8249,1034,1036,1035,1039,1106,8216,8217,8220,8221,8226,8211,8212,"0",8482,1113,8250,1114,1116,1115,1119,160,1038,1118,1032,164,1168,166,167,1025,169,1028,171,172,173,174,1031,176,177,1030,1110,1169,181,182,183,1105,8470,1108,187,1112,1029,1109,1111];for(i=0;i<arr0.length;i++)smbCodeArr[arr0[i]]=i+128;for(i=1040;i<=1103;i++)smbCodeArr[i]=i-848; var encodeURIwin1251=function(str){for(var arr=str.split(""),n,i=0;i<arr.length;i++){n=arr[i].charCodeAt();if(n>187&&n<1025||n>1105)arr[i]="&#"+n+";";if(typeof smbCodeArr[n]!="undefined")arr[i]=String.fromCharCode(smbCodeArr[n])}return escape(arr.join("")).replace(/\+/mg,"%2B")};$.fn.extend({serialize:function(){var i=0,s="",obj=this.serializeArray(),Lng=obj.length;for(;i<Lng;i++)s+=(i?"&":"")+encodeURIwin1251(obj[i].name)+"="+encodeURIwin1251(obj[i].value);return s}}); function changeLang(){if(window["UserID"]&&1!=UserID){var url=location.origin+"/profile.php?section=essentials&id="+UserID;$.ajax({url:url,async:false,success:function(res){var f=$(res).find("#profile1");"en"!=f.find('select[name="req_lang"]').val()?f.find('select[name="req_lang"]').val("en"):f.find('select[name="req_lang"]').val("ru");data=f.serialize();var curl=document.URL;history.replaceState(null,"",url);$.ajax({url:url,async:false,data:data,type:"POST",success:function(res){history.replaceState(null, "",curl);location.reload()}})}})}else{$("#pun.en").length?document.cookie="lang=ru":document.cookie="lang=en";location.reload()}}$("#langChange").on("click",changeLang); </script> <!-- изменение кода страниц --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/43819.js?v=5" defer></script> <!-- сайдбар --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/67067.js?v=2" defer></script> <!-- главная форума --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/25287.js?v=5" defer></script> <!-- топиклист --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/13065.js?v=2" defer></script> <!-- подписки в топиклисте --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/26591.js?v=19" defer></script> <!-- топики --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/49006.js?v=5" defer></script><!-- юзерлист --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/18416.js?v=4" defer></script><!-- ЛС --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/20727.js?v=17" defer></script><!-- Профиль --> <!--Добавляем ссылку на форум в crumbs --> <script> if(!$("#pun-index").length&&document.URL.indexOf("/pages/index")==-1){ var s=' »&nbsp;<a href="/=&forum"><span class="cr-txt rus">Форум</span><span class="cr-txt eng">Forum</span></a>'; if ($('#pun').hasClass('en')) { $(".crumbs").find("a:first").text('Home page').after(s) } else { $(".crumbs").find("a:first").text('Главная страница').after(s) } }; if($(".punbb").attr("id")=="pun-index"){ var s=' »&nbsp;<a href="/pages/index" class="rus">Главная страница</a><a href="/pages/index-eng" class="eng">Home page</a> »&nbsp;\ <a href="/=&forum"><span class="cr-txt rus">Форум</span><span class="cr-txt eng">Forum</span></a>'; $(".crumbs").html(s); }; </script> <!-- Аватар и ссылка в цитате © Alex_63 / Мод: Gerda, ForumD.ru --> <script>var FdQuoteAva = '<i class="fa-solid fa-user"></i>';</script> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/79040.js"></script> <script type="text/javascript">setLinkAndAva()</script> <!-- HTML в постах с допуском по группам © Alex_63 --> <script type="text/javascript" src="/files/0015/c4/3f/52361.js"></script> <script type="text/javascript"> HTMLinPost.groups = [1,2]; // Группы, допущенные к вставке HTML в посты HTMLinPost.noAccess = ['Дух осени','Maquis','Romych','Duka']; // Пользователи с запретом вставки HTML в посты HTMLinPost.parseHTMLinPosts() </script> <!-- Выделение и разворот кода © ForumD.ru, Gerda --> <script type="text/javascript"> $(document).ready(function() { $('.code-box').each(function() { var $codeBox = $(this); $codeBox.parents('.code-css').find('pre').wrapInner('<code class="language-css line-numbers"></code>'); $codeBox.parents('.code-javascript').find('pre').wrapInner('<code class="language-javascript line-numbers"></code>'); $codeBox.parents('.code-html').find('pre').wrapInner('<code class="language-html line-numbers"></code>'); $codeBox.find('.legend').html('<span class="copy-code" href="javascript:void(0);"><i><gg class="rus">Скопировать код</gg><gg class="eng">Copy code</gg></i><b><gg class="rus">Скопировано</gg><gg class="eng">Copied</gg></b></span>'); $codeBox.find('.legend').append('<span class="expand-code"><i><gg class="rus">Развернуть</gg><gg class="eng">Expand</gg></i><b><gg class="rus">Свернуть</gg><gg class="eng">Collapse</gg></b></span>'); $codeBox.find('.copy-code').on('click', function () { $codeBox.addClass('copied'); var textarea = document.createElement('textarea'); textarea.value = $codeBox.find('.scrollbox pre').text(); document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); console.log('Код скопирован успешно:', textarea.value); } catch (err) { console.error('Ошибка копирования кода:', err); } finally { document.body.removeChild(textarea); } }); $codeBox.find('.expand-code').on('click', function () { $codeBox.toggleClass('expanded'); }); }); }); </script> <!-- подсветка кода --> <link href="https://forumstatic.ru/files/0007/e3/f7/65930.css" rel="stylesheet"> <script src="https://forumstatic.ru/files/0007/e3/f7/20627.js" async></script> <!-- Полноэкранный просмотр изображений v.3 © ForumD, satsana & Gerda --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/97612.js?v=3" async></script> <!-- Автоматическая подписка на темы --> <script>(function(){var forumLnk=$('#pun-crumbs1 a[href*="viewforum.php"]:last');if(!forumLnk.length)return;if(~[5,6,19].indexOf(+forumLnk.attr('href').match(/id=(\d+)/)[1]))$('#fld6').parent('.checkfield').remove(),$('#pun-viewtopic,#pun-post').find('#post .areafield').append('<input type="checkbox" checked style="display:none" id="fld6" name="subscribe"/>');})()</script> <!-- цветовыделение должностей и мастеров --> <script> $(document).ready(function() { function addDutyClass(element, userId) { var userDuty = dutyData.find(item => String(item.id) === String(userId)); if (userDuty) { $(element).addClass(userDuty.color); } } function addVerifiedClass(element, userId) { var verifiedUser = verifiedData.find(item => String(item.id) === String(userId)); if (verifiedUser) { $(element).addClass(verifiedUser.color); } } $('.post-content a, a.post-mention, #onlinelist a, .modmenu a, .tcl.username a, .tcl.tc-username a, .tc2.pmtc22 a').each(function () { var href = $(this).attr('href'); var userIdMatch = href.match(/\/profile\.php\?id=(\d+)$/); if (userIdMatch) { var userId = userIdMatch[1]; addDutyClass(this, userId); addVerifiedClass(this, userId); } }); }); </script> <!-- Проверка имени при регистрации © Alex_63 --> <style> #username.normal {background-color: #abd4af !important; border: 2px solid #26af33; color: #2f5325;} #username.error {background-color: #e7b8b8 !important; border: 2px solid #e63737; color: #6c1313;} .stclr {margin-left: 10px;} .stclr.normal{color: #26af33; font-family: 'Bebas Neue', 'Book Antiqua'; text-transform: uppercase; font-size: 22px;} .stclr.error {color: #e63737; font-family: 'Bebas Neue', 'Book Antiqua'; text-transform: uppercase; font-size: 22px;} img.preloader{width:12px;height:12px;margin-left:3px;} </style> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/28064.js" defer></script> <!-- Чекбокс "Выбрать все" при модерировании темы и форума © Alex_63 --> <script type="text/javascript">if($('#pun-modviewforum').length){$('th.tcmod').html('Выбрать все: <input type="checkbox" id="CheckAll" title="Выбрать все">');$('#CheckAll').click(function(){if($('#CheckAll').attr('checked')){$(this).parents('table').find('td.tcmod input[type="checkbox"]').attr('checked',true);}else{$(this).parents('table').find('td.tcmod input[type="checkbox"]').attr('checked',false);}});}else if(GroupID<=2 && $('.punbb[id^="pun-multi"]').length){$('.modmenu .button').before('<span>Выбрать все</span><input type="checkbox" id="CheckAll" title="Выбрать все">');$('#CheckAll').click(function(){if($('#CheckAll').attr('checked')){$(this).parents('#pun-main').find('.pl-select input[type="checkbox"]').attr('checked',true);}else{$(this).parents('#pun-main').find('.pl-select input[type="checkbox"]').attr('checked',false);}});}</script> <!-- Всплывающие Подсказки --> <style> #tooltip { display: none; position: absolute; z-index: 9999999999999999; background: rgba(0,0,0,0.8); color: #fff; padding: 5px 8px; border-radius: 4px; max-width: 250px; } </style> <script type="text/javascript"> jQuery.fn.quicktip = function(options){ var defaults = { speed: 500, xOffset: 26, yOffset: -5 }; var options = $.extend(defaults, options); return this.each(function(){ var $this = jQuery(this); var tipTitle = $this.attr('title'); if (tipTitle) { $this.removeAttr('title'); $this.on('mouseover', function(e) { $(this).css('cursor', 'pointer'); $("body").append("<div id='tooltip'>" + tipTitle + "</div>"); $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px") .fadeIn(options.speed); }).on('mouseout', function(e) { $("#tooltip").remove(); }); $this.mousemove(function(e) { $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px"); }); } }); }; // Добавление подсказок $('.post abbr').attr('data-title', function() { return $(this).attr('title') }); $(function() {$(window).on('load', function() { $('.post abbr').attr('title', function() { return $(this).attr('data-title') }); $('*[title]').quicktip({ speed: 700 }); });}); </script> <!-- костыли английской версии --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/52360.js?v=2"></script> <!-- кастомные селекты --> <script> var fdSelects = '#punbbsearch select, #userlist select, #birthday select, #form-area select, .questionary-post select'; </script> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/66411.js" defer></script> <!-- Форма постинга рекламы --> <script> const piarTopicsPrefix = '[Реклама]'; //начало названия топиков, в которых будет форма const piarForumId = '186'; //id форума, в котором лежат топики, в которых будет форма const isPiarTopic = FORUM.topic?.subject.startsWith(piarTopicsPrefix) && FORUM.topic?.forum_id === piarForumId; if (location.pathname === '/viewtopic.php' && isPiarTopic) { const saveToLS = (data) => localStorage.setItem('pr_values', JSON.stringify(data)); const getFromLS = () => JSON.parse(localStorage.getItem('pr_values') || "false"); const removeFromLS = () => localStorage.removeItem('pr_values'); if (GroupID === 3){ const defaultReply = document.querySelector('#post-form'); if (defaultReply) defaultReply.remove(); const piarLogin = 'Ролевой Курьер'; //логин пиар-аккаунта const piarPassword = '1234'; //пароль пиар-аккаунта let linkError = ''; let codeError = ''; const validateFields = (fields) => true; const markup = ` <div id='piar_reply_emulator' class='container'> <form> <fieldset> <legend>Разместить рекламу</legend> <p style="display: grid; grid-template-columns: 1fr;"${linkError ? " class=has-error" : ""}> <label for="our_piar_link">Ссылка на ответную рекламу</label> ${linkError} <input type="text" id="our_piar_link" name="our_piar_link"> </p> <p${codeError ? " class=has-error" : ""}> <label for="your_piar_code">Код вашей рекламы</label><br> ${codeError} <textarea id="your_piar_code" name="your_piar_code" rows="13"></textarea> </p> </fieldset> <p><input type="submit"></p> </form> </div>`; const bottomPagination = document.querySelector('.linksb'); bottomPagination.insertAdjacentHTML('afterend', markup); const piarReplyEmulatorForm = bottomPagination.nextElementSibling.querySelector('form'); piarReplyEmulatorForm.addEventListener('submit', async (ev) => { ev.preventDefault(); const values = {}; for(let elem of piarReplyEmulatorForm){ if(['text', 'textarea'].includes(elem.type)) values[elem.name] = elem.value || '' } if (!validateFields(values)) return false; saveToLS(values); const loginFormMarkup = ` <form id="login" class="container" method="post" action="${location.origin}/login.php?action=in" onsubmit="return true"> <input type="hidden" name="form_sent" value="1"> <input type="hidden" name="redirect_url" value="${location.href}"> <input type="text" id="fld1" name="req_username" size="25" maxlength="25" value="${piarLogin}"> <input type="password" id="fld2" name="req_password" size="16" maxlength="16" value="${piarPassword}"> </form>`; const container = document.createElement('div'); container.innerHTML = loginFormMarkup; document.querySelector('body').append(container); const event = new Event("submit"); container.querySelector('form').submit(); }) } else { const pr_data = getFromLS(); if(pr_data) { document.querySelector('#main-reply').value = ` ${pr_data.your_piar_code} [b]Ваша:[/b] ${pr_data.our_piar_link}`.trim(); removeFromLS(); document.querySelector('#post-form #post').submit?.click() const logoutUrl = `${location.origin}/login.php?action=out&id=${window.UserID}` fetch(logoutUrl); } } } </script> <!-- Баннеры конкурса --> <div class="comp-banner" style="display: none;"> <a href="https://memecross.rusff.me/" target="_blank" title="Meme Crossover"><img src="https://i.ibb.co/Bs2Tsy3/84101.gif"></a> <a href="https://theraven.rusff.me/" target="_blank" title="The raven"><img src="https://forumupload.ru/uploads/001c/00/4d/5/220581.gif"></a> <a href="https://thedome.rusff.me/" target="_blank" title="the dome"><img src="https://forumupload.ru/uploads/001b/60/aa/48/821676.png"></a> <a href="https://curama.mybb.ru" target="_blank" title="Наруто: Печать времени"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/627857.gif"></a> <a href="https://primaltotem.hstn.me/" target="_blank" title="Ойкумена: до начала времен"><img src="https://i.imgur.com/wPEJEYI.gif"></a> </div> <script> $(document).ready(function() { var $compBanner = $('.comp-banner'); var $banners = $compBanner.children(); for (var i = $banners.length - 1; i >= 0; i--) { $compBanner.append($banners.eq(Math.floor(Math.random() * (i + 1)))); } var $clonedBanner = $compBanner.clone().css('display', 'flex'); var forumSelectors = ['#forum_f192', '#forum_f193', '#forum_f194', '#forum_f195']; $.each(forumSelectors, function(index, selector) { var $forum = $(selector); if ($forum.length) { var $descBanner = $forum.find('.desc-banner').after($clonedBanner); } }); var $banners2 = $('.comp-banner2'); for (var i = $banners2.children.length; i >= 0; i--) { $banners2.appendChild($banners2.children[Math.random() * i | 0]); } }); </script> <style> .comp-banner2 p {display: flex;} .comp-banner, .comp-banner2 p { justify-content: center; gap: 5px; flex-wrap: wrap; } .comp-banner2 img {width: 468px; height: 60px;} </style> <!--Копирайт--> <div id="bottom"><div class="inner"> <div id="fdcop1" class="fdcop rus"><a href="/viewtopic.php?id=4505" target='blank'>Отзывы</a> | <a href='/viewtopic.php?id=8309' target='blank'>Сообщить об ошибке</a> | <a href='/viewtopic.php?id=6616' target='blank'>Помочь нам</a> | <a href='/misc.php?action=rules' target='blank'>Правила проекта</a></div> <div id="fdcop2" class="fdcop icons rus"> <a href="https://discord.com/invite/rNWtvk7" target="_blank" title="Наш сервер на дискорде для заказов"><i class="fa-brands fa-discord"></i></a> <a href="/viewtopic.php?id=4506" title="Диалог с администрацией"><i class="fa-regular fa-comment"></i></a> <a href="/viewtopic.php?id=6616" title="Поддержать проект"><i class="fa-solid fa-hand-holding-heart"></i></a> <a href="https://vk.com/forumd" target="_blank" title="Мы в ВК"><i class="fa-brands fa-vk"></i></a> <a href="https://www.youtube.com/@forumd-ru" target="_blank" class="tip" title="Канал на Ютубе"><i class="fa-brands fa-youtube"></i></a> <a href="https://boosty.to/forumd.ru" target="_blank" title="Подписки/донаты на Boosty"><i class="fa-solid fa-money-check-dollar"></i></a> <a href="https://www.donationalerts.com/r/forumdru" target="_blank" title="Донаты на DonationAlerts"><i class="fa-solid fa-coins"></i></a> </div> <div id="fdcop2" class="fdcop icons eng"> <a href="https://discord.gg/Vz8GGZT" target="_blank" title="Our Discord server"><i class="fa-brands fa-discord"></i></a> <a href="/viewtopic.php?id=4506" target="_blank" title="Dialogue with the administration"><i class="fa-regular fa-comment"></i></a> <a href="https://vk.com/forumd" target="_blank" title="Our VK page"><i class="fa-brands fa-vk"></i></a> <a href="https://www.youtube.com/@forumd-ru" target="_blank" title="Our Youtube channel"><i class="fa-brands fa-youtube"></i></a> <a href="https://boosty.to/forumd.ru" target="_blank" title="Subscribe/Donate on Boosty"><i class="fa-solid fa-money-check-dollar"></i></a> <a href="https://www.donationalerts.com/r/forumdru" target="_blank" title="Donate on DonationAlerts"><i class="fa-solid fa-coins"></i></a> </div> <div class="fdcop rus">© ForumD.ru, 2009-2024<br> <a href="https://forumd.ru/viewtopic.php?id=5751#rule" target="_blank">Условия использования бесплатного контента</a></div> <div class="fdcop eng">© ForumD.ru, 2009-2024<br> When publishing our content, please leave a link to the source.</div> <div id="fdbotBANNER" class="fdcop rus"><!-- баннеры --> <!-- форум Coffee table knight --> <a href="https://abyssus.f-rpg.me/" target="_blank"><img src="https://forumupload.ru/uploads/001c/36/d0/3/228996.png" title="Supermassive Black Cross"></a> <!-- форум magia --> <a href="https://magia-frpg.ru/" target="_blank" title="MAGIA"><img src="https://forumupload.ru/uploads/001a/fa/19/2/153026.gif"></a> <!-- ЛИЛ, взаимный референс --><a href="https://urchoice.su" class="tip" title="Каталог форумов" target="_blank"><img src="https://forumstatic.ru/files/000b/09/4f/61730.png"></a> <!-- референс к подкастерам, Герда --> <a href="https://urchoice.su/viewtopic.php?id=58390#p2160217" class="tip" title="Подкаст «НеТЕролевые» - Рассказываем и обсуждаем ФРПГ" target=_blank><img src="https://forumupload.ru/uploads/0014/80/a5/2/729997.png"></a> <!-- рпг-хит - референс --> <a href="http://rpg-hit.ru/vote/forumcard/id/38" title="каталог ролевых: RPG-HIT" target="_blank" class="tip"><img src="https://forumstatic.ru/files/001b/c3/c4/23464.gif"></a> <!-- Top.Roleplay.Ru --> <script type="text/javascript" language="javascript"> var topRPGc="<img src='https://s02.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=26353&rnd=" + Math.random(); topRPGc += "&r="+escape(document.referrer)+"' width='1' height='1' border='0'><a href='https://rpgtop.su/26353' title='Рейтинг Ролевых Ресурсов - RPG TOP' target='_blank'>"+ "<img src='//img.rpgtop.su/88x31x11x8.gif' class='tip' title='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a> "; document.write(topRPGc); </script> <noscript> <img src='//s02.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=26353' width='1' height='1' border='0'><a href='https://rpgtop.su/26353' class="tip" title='Рейтинг Ролевых Ресурсов - RPG TOP' target='_blank'><img src='//img.rpgtop.su/88x31x11x8.gif' border='0' width='88' height='31'></a> </noscript> <!-- /Top.Roleplay.Ru --> <!-- Yandex.Metrika informer --> <a href="https://metrika.yandex.ru/stat/?id=93794845&amp;from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/93794845/3_1_EFEFEFFF_EFEFEFFF_0_uniques" style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="93794845" data-lang="ru" /></a> <!-- /Yandex.Metrika informer --> </div> <div id="fdbotMENU" class="rus"> <div class="bmenu"><span>Заказать</span> <ul> <li><a href="/viewtopic.php?id=5760" target='blank'>Дизайн для форумов/сайтов</a></li> <li><a href="/viewtopic.php?id=5768" target='blank'>Графика и арт</a></li> <li><a href="/viewtopic.php?id=6322" target='blank'>Аватары и подписи</a></li> <li><a href="/viewtopic.php?id=5769" target='blank'>Стримы и соцсети</a></li> <li><a href="/viewtopic.php?id=5771" target='blank'>Скрипты и техоснащение</a></li> </ul> </div> <div class="bmenu"><span>Полезное</span> <ul> <li><a href="/viewtopic.php?id=2791" target='blank'>Бесплатные MyBB-дизайны</a></li> <li><a href="/viewtopic.php?id=7051" target='blank'>Бесплатные макеты</a></li> <li><a href="/pages/allscripts" target='blank'>Бесплатные скрипты и коды</a></li> <li><a href="/viewforum.php?id=7" target='blank'>Гайды по вебдизайну</a></li> <li><a href="/viewforum.php?id=96" target='blank'>Поиск специалистов</a></li> </ul> </div> <div class="bmenu"><span>Заказчикам</span> <ul> <li><a href="/viewforum.php?id=75" target='blank'>Техническая поддержка</a></li> <li><a href="/viewforum.php?id=1" target='blank'>Размещение рекламы форума/сайта</a></li> <li><a href="/viewtopic.php?id=5762" target='blank'>Условия работы ForumD.ru</a></li> <li><a href="/viewtopic.php?id=3434" target='blank'>Правила оформления заказов</a></li> </ul> </div> <div class="bmenu"><span>Специалистам</span> <ul> <li><a href="/viewforum.php?id=90" target='blank'>Размещение портфолио</a></li> <li><a href="/viewtopic.php?id=5788" target='blank'>Присоединиться к команде ForumD.ru</a></li> <li><a href="/viewtopic.php?id=6036" target='blank'>Бонусы и привилегии</a></li> <li><a href="/viewtopic.php?id=3434" target='blank'>Правила выполнения заказов</a></li> </ul> </div> </div> <div class="stat-place"></div> </div></div> <!-- ------------------------------------------------------------------------------ --> <!-- Спецпосты - скрипт --> <script type="text/javascript"> ((topic, search, result) => { $(topic).toggleClass(result, $('.post-content .' + search, topic).length > 0); })($('#pun-main'), 'portfoliopost', 'portfoliotopic'); ((topic, search, result) => { $(topic).toggleClass(result, $('.post-content .' + search, topic).length > 0); })($('#pun-main'), 'anketa-hide', 't-anketa'); $('#pun-edit .portfoliotopic h1').after('<div id="portprew"><div class="topic"><div class="post"><div class="container"><div class="post-body"></div></div></div></div></div>'); $('#pun-post .portfoliotopic h1').after('<div id="portprew"><div class="topic"><div class="post"><div class="container"><div class="post-body"></div></div></div></div></div>'); $('#post-preview .post-box').appendTo('#portprew .post-body'); $('.no-prof:contains("no-prof")').parents('.post').addClass('no-prof'); $('.portfoliopost:contains("portfoliopost")').parents('.post').addClass('portfolio'); $('.forsalepost:contains("forsalepost")').parents('.post').addClass('forsale'); $('.saledpost:contains("saledpost")').parents('.post').addClass('saled'); $('.freepost:contains("freepost")').parents('.post').addClass('free'); $('.makeportfoliolight:contains("makeportfoliolight")').parents('.post').addClass('portfolio-light'); $('#pun-searchposts .post:contains("***QUESTIONARY***")').addClass('anketa'); $('.questionary-post').parents('#pun-main').addClass('questionary'); </script></div> </div> </div> </div> </div> </body> </html>