Javascript-форум - Показать сообщение отдельно

laimas · #1 (**permalink**) 26.09.2020, 03:49

Некогда здесь были предложения по форуму, и об новом "фейсе", и многом другом. Где-то и сейчас они "в загашнике", не стал искать, ибо были, а результатов ноль. А ведь пора одному из постояльцев форума, рони, выдавать молоко за вредность за счет форума - практически постоянно изо дня в день напоминать и давать ссылку на оформление кода в темах, это утомительно. К примеру я нифига не помню где это, а часто бывает и надо посмотреть, а найти кнопку на форуме, чтобы перейти туда, нет. У самой формы и то ее нет! Нонсенс!

Давайте по принципу "фотожаб" поместим сюда свои предложения по данному вопросу. Скажем так - "мягкой критикой" форума заставим в конце концов хоть что-то из предложений и намерений сделать. Это моя "жаба":

<html>
<head>
<meta charset="utf-8">
<style>
body{font:14px sans-serif}h1{font-size:20px}h2{font-size:16px}h3{font-size:14px;color:#BC0101}#help,#helper,#warning{width:536px;margin:0 auto;display:none}#helper{height:300px;overflow-y:auto;margin-bottom:10px;background-color:#F7F7DC}.show{height:300px!important}#read{float:right;padding:8px 20px;background-color:#da150c;color:#fff;border:0;border-radius:6px}.pamphlet{text-align:right;margin:0}
</style>
</head>
<body>
<table class="tborder" cellpadding="4" cellspacing="0" border="0" width="100%" align="center" style="border-top-width: 0;">
<tbody>
<tr>
<td>
<div id="warning">
<img src="https://s8.hostingkartinok.com/uploads/images/2020/09/e02f9803af6f0113b5e6ee579f29272a.jpg" style="float: left;">
<p class="pamphlet">Ты достаешь из извилин своих</p>
<p class="pamphlet">Кода своего писанину?!</p>
<p class="pamphlet">Хочешь, чтобы выглядел он</p>
<p class="pamphlet">Не похожим на рванину?</p>
<br>
<p class="pamphlet">Ты сделаешь это в один присест,</p>
<p class="pamphlet">Если не раб лени.</p>
<p class="pamphlet">Жмахай кнопку ПРОЧЕСТЬ,</p>
<p class="pamphlet">И прочти Манифест</p>
<p class="pamphlet">Кодеров всех поколений!</p>
<br>
<br>
<button id="read">ПРОЧЕСТЬ</button>        
</div>
<h3 id="help">Оформляй код правильно! Показать как »»</h3>
<div id="helper">
<h1>Оформление и запуск кода</h1>
<p>На сайте есть богатые возможности по форматированию, многие из которых уникальны. Например, можно вставлять запускаемый javascript/html. Здесь представлен их список и подробное описание.</p>
<h2>Подсветка кода</h2>
<p>Подсветка кода осуществляется разметкой в квадратных скобках. Например:</p>
<pre>[js]
var hi = "Привет"
function sayHi() {
  alert(hi)
}
 
$(sayHi)
[/js]</pre>
<p>Список языков:</p>
<pre>[js] - javascript
[css] - css
[html] - html
[xml] - xml
[java] - java
[py] - python
[php] - php
[txt] - просто текст
</pre>
<h2>Запускаемый код</h2>
<p>Маркеры [js] и [html] позволяют вставлять в сообщения ЗАПУСКАЕМЫЙ javascript-код Или просматриваемый HTML. Для этого нужно указать дополнительный атрибут run. Этот атрибут даст возможность его запускать/просматривать отформатированный код. Например:</p>        
<pre>[js run]
alert('123')
[/js]</pre>
<h2>Важный строковой участок кода</h2>
<p>Можно выделить не блок, а часть строки. Для этого выделяющие маркеры *!* ... */!* должны быть на одной строке. Например, код</p>
<pre>
var id = *!* a+b */!*
if (!id) {
  alert("нет id")
} else {
  sayHi(*!* id */!*)
}
</pre>
<p>bla bla bla bla bla bla bla bla bla bla bla .....</p>
<p id="aware"><input type="checkbox"> С толмачем ознакомлен и впредь буду использовать его аки святое писание для просветления своей души и разума.</p>
</div>
<div class="panel">	
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tbody><tr>
<td align="left">Сообщение:</td>
</tr>
<tr>
<td align="left">
<div>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody><tr>
<td><div><img src="https://javascript.ru/forum/images/editor/bold.gif"></div></td>
<td><div><img src="https://javascript.ru/forum/images/editor/italic.gif"></div></td>
<td><div><img src="https://javascript.ru/forum/images/editor/underline.gif"></div></td>
<td><div><img src="https://javascript.ru/forum/images/editor/strikethrough.gif"></div></td>
<td><img src="https://javascript.ru/forum/images/editor/separator.gif"></td>
<td><div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td><img src="https://javascript.ru/forum/images/editor/color.gif"><br>
<img src="https://javascript.ru/forum/clear.gif" style="background-color:black"></td>
<td><img src="https://javascript.ru/forum/images/editor/menupop.gif"></td>
</tr>
</tbody></table>
</div></td>
<td><img src="https://javascript.ru/forum/images/editor/separator.gif"></td>
<td><div><img src="https://javascript.ru/forum/images/editor/js2.gif"></div></td>
<td><div><img src="https://javascript.ru/forum/images/editor/html.gif"></div></td>
<td><div><img src="https://javascript.ru/forum/images/editor/css.png"></div></td>
<td><img src="https://javascript.ru/forum/images/editor/separator.gif"></td>
<td><div><img src="https://javascript.ru/forum/images/editor/createlink.gif"></div></td>
<td><div><img src="https://javascript.ru/forum/images/editor/insertimage.gif"></div></td>
<td><img src="https://javascript.ru/forum/images/editor/separator.gif"></td>
<td><div><img src="https://javascript.ru/forum/images/editor/quote.gif"></div></td>
<td><img src="https://javascript.ru/forum/images/editor/separator.gif"></td>
<td>
<div style="position:relative">
<div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td><img src="https://javascript.ru/forum/images/editor/smilie.gif">
</td>
<td><img src="https://javascript.ru/forum/images/editor/menupop.gif">
</td>
</tr>
</tbody></table>
</div>
<div style="position:absolute;top:20px;left:-30px;display:none">
<table cellpadding="4" cellspacing="0" border="0" align="center">
<tbody><tr align="center" valign="bottom">
<td><img src="https://javascript.ru/forum/images/smilies/smile.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/dance3.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/stop.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/angry.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/no.gif"></td>
</tr>
<tr align="center" valign="bottom">
<td><img src="https://javascript.ru/forum/images/smilies/write.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/tongue.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/help.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/unsure.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/cray.gif"></td>
</tr>
<tr align="center" valign="bottom">
<td><img src="https://javascript.ru/forum/images/smilies/sad.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/agree.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/lol.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/yes4.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/wink.gif"></td>
</tr>
<tr align="center" valign="bottom">
<td><img src="https://javascript.ru/forum/images/smilies/haha.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/thank_you2.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/blink.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/nono.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/mad.gif"></td>
</tr>
<tr align="center" valign="bottom">
<td><img src="https://javascript.ru/forum/images/smilies/laugh.gif"></td>
<td><img src="https://javascript.ru/forum/images/smilies/victory.gif"></td>	
<td colspan="3">&nbsp;</td>
</tr>
</tbody></table>
</div>
</div>
</td>
<td width="100%">&nbsp;</td>
<td>
<div><img src="https://javascript.ru/forum/images/editor/resize_0.gif"></div>
<div><img src="https://javascript.ru/forum/images/editor/resize_1.gif"></div>
</td>
</tr>
</tbody></table>
</div>
<div class="controlbar">
<textarea rows="10" cols="60" style="width:530px; height:100px"></textarea>
</div>
</td>
</tr>
</tbody></table>
</div>	
</td>
</tr>
</tbody>
</table>
<script>
var warning = document.getElementById('warning'), 
    help = document.getElementById('help'),
    helper = document.getElementById('helper'), 
    form = [...document.querySelectorAll('.panel')],
    aware = document.getElementById('aware');
if(!localStorage['read']) {
    warning.style.display = 'block';
    form.forEach((e)=>e.style.display = 'none');
    document.getElementById('read').addEventListener('click', _=> {
        warning.style.display = 'none';
        helper.style.display = 'block';
        aware.getElementsByTagName('input')[0].addEventListener('change', _=> {
            localStorage['read'] = 1;
            show();
        })
    })
} else show();
function show() {
    form.forEach((e)=>e.style.display = 'block');
    helper.removeChild(aware);
    helper.style.display = 'block';
    helper.scrollTop = 0;
    helper.style.height = 0;
    help.style.display = 'block';
    help.addEventListener('click', _=> helper.classList.toggle('show'))
}  
</script>
</body>
</html>