plugnz (PDF)

Публикации

Пользователи

Хабы

Компании

Песочница

Написать

TyomAKingAloe не публиковался

Пишем полезные плагины для сайтов
CSS, CMS
Черновик

Небольшое вступление
Недавно я писал свою соц сеть и мне приходилось вручную создавать многие плагины, и что бы вы н
занимались этим долгим делом я подготовил уже готовые. Естественно если вы уже серьёзный вебразработчик, то вам я думаю это не нужно. Статья посвещается различным уже готовым кодам, котор
сэкономят время для начинающих веб-ваятелей.

проматывать)

Как пришла идея писать сайты? (Краткая предыстория, можете смел

Незадолго до создания своего движка, я просто занимался программированием ерундой (всякие реверс-инжиниринги андроид приложе
дизассембилирование и всякое такое). И вот как-то раз скачивая очередной компилятор с сайта, я увидел, что сервис не отвечает на мои
запросы. Я поинтересовался у админов и они сказали, что на них проведена DOS-атака. После недолгих поисков причины я понял, что это
уязвимость, которая позволяет провести DOS-атаку на сайт-блог, с помощью файла wp-trackback.php (обычно такие уязвимости проявляю
Word Press). Используя специальный скрипт злоумышленник может провести DOS-атаку. В результате чего сайт перестанет отвечать на
запросы пользователей. Кстати для того, чтобы обезопасить блог от данной атаки необходимо добавить следующие строчки в файл
functions.php в папке шаблона блога:

function ft_stop_trackback_dos_attacks(){
global $pagenow;
if ( 'wp-trackback.php' == $pagenow ){
// DoS attack fix.
if ( isset($_POST['charset']) ){
$charset = $_POST['charset'];
if ( strlen($charset) > 50 ) {
}
}
}
add_action('init','ft_stop_trackback_dos_attacks');

die; }

Затем углубляясь в это всё больше и больше, я понял что могу написать свою cms. Нужно добавить, то что паралельно с этим я давно уже
думал о создание своего движка или соц сети, но вот руки всё никак не доходили, а тут вдруг представилась хорошая возможность.
Мой новый сайт должен был стать некой платформой для добавления пользователями статей, новостей, сайтов, плагинов, cms и прочего
вот как-то так я и начал заниматься веб-разработкой. Ну а теперь вернёмся к плагинам.

Уведомление cookie
Первым плагином станет предупреждение посетителя вашего сайта о использование куки. Плагин достаточно простой, но я думаю полез

<p>
<script>// <![CDATA[
(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter22958884 = new Ya.Metrika({ id:22958884, //мо
воспользоваться этим или завести свой
clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagN
("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascr
t"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener
OMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");
// ]]></script>
</p>
<noscript><div><img src="https://mc.yandex.ru/watch/22958884" style="position:absolute; left:-9998px;" alt="" /></div></no
ipt><!-- /Yandex.Metrika counter -->
<p>

<script>// <![CDATA[
var cnArgs = {"ajaxurl":"https:\/\/ваш сайт\/wp-admin\/admin-ajax.php","hideEffect":"fade","onScroll":"no","onScrollOffset
"100","cookieName":"cookie_notice_accepted","cookieValue":"TRUE","cookieTime":"2596000000","cookiePath":"\/","cookieDomain
"","redirection":"","cache":""};
// ]]></script>
<script>!function(o){o.fn.setCookieNotice=function(e){"yes"===cnArgs.onScroll&&o(window).off("scroll",cnHandleScroll);var
ew Date,i=new Date,n=o("#cookie-notice"),t=this;if(i.setTime(parseInt(c.getTime())+1e3*parseInt(cnArgs.cookieTime)),e="acc
t"===e,document.cookie=cnArgs.cookieName+"="+e+";expires="+i.toGMTString()+";"+(void 0!==cnArgs.cookieDomain&&""!==cnArgs.
kieDomain?"domain="+cnArgs.cookieDomain+";":"")+(void 0!==cnArgs.cookiePath&&""!==cnArgs.cookiePath?"path="+cnArgs.cookieP
+";":""),o.event.trigger({type:"setCookieNotice",value:e,time:c,expires:i}),"fade"===cnArgs.hideEffect?n.fadeOut(300,funct
(){t.removeCookieNotice()}):"slide"===cnArgs.hideEffect?n.slideUp(300,function(){t.removeCookieNotice()}):t.removeCookieNo
e(),e&&"1"===cnArgs.redirection){var r=window.location.protocol+"//",a=window.location.host+"/"+window.location.pathname;"
==cnArgs.cache?(r=r+a.replace("//","/")+(""===window.location.search?"?":window.location.search+"&")+"cn-reloaded=1"+windo
ocation.hash,window.location.href=r):(r=r+a.replace("//","/")+window.location.search+window.location.hash,window.location.
oad(!0))}else;},o.fn.removeCookieNotice=function(e){o("#cookie-notice").remove(),o("body").removeClass("cookies-not-accept
)},o(document).ready(function(){var e=o("#cookie-notice");"yes"===cnArgs.onScroll&&(cnHandleScroll=function(){var e=o(this
e.scrollTop()>parseInt(cnArgs.onScrollOffset)&&(e.setCookieNotice("accept"),e.off("scroll",cnHandleScroll))}),o(document).
"click",".cn-set-cookie",function(e){e.preventDefault(),o(this).setCookieNotice(o(this).data("cookie-set"))}),-1===documen
ookie.indexOf("cookie_notice_accepted")?("yes"===cnArgs.onScroll&&o(window).on("scroll",cnHandleScroll),"fade"===cnArgs.hi
ffect?e.fadeIn(300):"slide"===cnArgs.hideEffect?e.slideDown(300):e.show(),o("body").addClass("cookies-not-accepted")):e.re
eCookieNotice()})}(jQuery);</script></p>

<div class="fixed1">
<div id="cookie-notice" role="banner" class="cn-bottom bootstrap" style="color: #fff; background-color: #000;">
<div class="cookie-notice-container" align="center"><span id="cn-notice-text">Мы используем cookie на нашем Сайте.</span>
iv class="cookie-notice-container" align="center"><span id="cn-notice-text">Это увеличивает скорость работы сервиса.</span
div><a href="#" id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie button bootstrap" align="center">ПРОДО
ТЬ</a></div></div></div>

И css стиль для него

.fixed1{
position:fixed;
right: 20px;
left: 20px;
bottom:8px;
filter:alpha(opacity=50);
-moz-opacity:0.84;
opacity: 0.85;
border-radius: 7px;
z-index:2000;
}

Результат:

Хостинг для изображения
Я думаю что он подойдет тем кто делает что-то вроде форума. Код так же есть вот здесь.

<?php
// Папка для сохранения файла
$path = 'image/'; //Папка для загрузки изображений
$tmp_path = 'time/'; //Временные изображения
$types = array('image/gif', 'image/png', 'image/jpeg');
$size = 1033020;
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (!in_array($_FILES['picture']['type'], $types))

die('Неверный тип файла. <a href="?">Попробовать другой?</a>');
if ($_FILES['picture']['size'] > $size)
die('Слишком большой размер файла. <a href="?">Попробовать другой?</a>');
if (!@copy($_FILES['picture']['tmp_name'], $path . $_FILES['picture']['name']))
echo 'Ошибка';
else
echo 'Загрузка удачна <a href="' . $path . $_FILES['picture']['name'] . '">Посмотреть готовое изображение</a> ' ;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Хостинг изображения</h1>
<form method="post" enctype="multipart/form-data">
<input type="file" name="picture">
<input type="submit" value="Загрузить">
</form>
</body>
</html>

Расширенная палитра цветов html
Данный код подойдёт хорошо для админ панели, когда вы будите писать какой-нибудь css или html элемент в своём блоге.

<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
(function(h,k,j){function r(a){if(h.event&&h.event.contentOverflow!==j)return{x:h.event.offsetX,y:h.event.offsetY};if(a.of
tX!==j&&a.offsetY!==j)return{x:a.offsetX,y:a.offsetY};var b=a.target.parentNode.parentNode;return{x:a.layerX-b.offsetLeft,
a.layerY-b.offsetTop}}function e(a,b,c){a=k.createElementNS(v,a);for(var d in b)a.setAttribute(d,b[d]);if(Object.prototype
String.call(c)!="[object Array]")c=[c];b=0;for(d=c[0]&&c.length||0;b<d;b++)a.appendChild(c[b]);return a}function l(a,b,c){
d,
f,g;a=a%360/60;g=c*b;f=g*(1-Math.abs(a%2-1));d=b=c-=g;a=~~a;d+=[g,f,0,0,f,g][a];b+=[f,g,g,f,0,0][a];c+=[0,0,f,g,g,f][a];a=
55;b*=255;c*=255;return{r:a,g:b,b:c,hex:"#"+(16777216|c|b<<8|a<<16).toString(16).slice(1)}}function s(a,b,c){if(a>1||b>1||
){a/=255;b/=255;c/=255}var d,f;d=Math.max(a,b,c);f=d-Math.min(a,b,c);return{h:(f==0?null:d==a?(b-c)/f:d==b?(c-a)/f+2:(a-b)
4)%6*60,s:f==0?0:f/d,v:d}}function t(a,b,c){return function(d){d=d||h.event;d=r(d);a.h=d.y/b.offsetHeight*360+o;var f=l(a.
,
1);c.style.backgroundColor=f.hex;a.callback&&a.callback(f.hex,{h:a.h-o,s:a.s,v:a.v},{r:f.r,g:f.g,b:f.b},j,d)}}function u(a
{return function(c){c=c||h.event;c=r(c);var d=b.offsetHeight;a.s=c.x/b.offsetWidth;a.v=(d-c.y)/d;d=l(a.h,a.s,a.v);a.callba
&a.callback(d.hex,{h:a.h-o,s:a.s,v:a.v},{r:d.r,g:d.g,b:d.b},c)}}function i(a,b,c){if(!(this instanceof i))return new i(a,b
c);this.callback=c;this.h=0;this.v=this.s=1;this.pickerElement=b;this.slideElement=a;if(p=="SVG"){a.appendChild(m.cloneNod
rue));
b.appendChild(n.cloneNode(true))}else{a.innerHTML=m;b.innerHTML=n}if(a.attachEvent){a.attachEvent("onclick",t(this,a,b));b
tachEvent("onclick",u(this,b))}else if(a.addEventListener){a.addEventListener("click",t(this,a,b),false);b.addEventListene
"click",u(this,b),false)}}function q(a,b,c,d){a.h=b.h%360;a.s=b.s;a.v=b.v;b=l(a.h,a.s,a.v);var f={y:a.h*a.slideElement.off
Height/360,x:0},g=a.pickerElement.offsetHeight;g={x:a.s*a.pickerElement.offsetWidth,y:g-a.v*g};a.pickerElement.style.backg
ndColor=
l(a.h,1,1).hex;a.callback&&a.callback(d||b.hex,{h:a.h,s:a.s,v:a.v},c||{r:b.r,g:b.g,b:b.b},g,f)}var p=h.SVGAngle||k.impleme
tion.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML",n,m,o=15,v="http://www.w3.org/2000/
g";if(p=="SVG"){m=e("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[e("defs",{},e("li
rGradient",{id:"gradient-hsv",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[e("stop",{offset:"0%","stop-color":"#FF0000","stop-opaci
:"1"}),
e("stop",{offset:"13%","stop-color":"#FF00FF","stop-opacity":"1"}),e("stop",{offset:"25%","stop-color":"#8000FF","stop-opa
y":"1"}),e("stop",{offset:"38%","stop-color":"#0040FF","stop-opacity":"1"}),e("stop",{offset:"50%","stop-color":"#00FFFF",
op-opacity":"1"}),e("stop",{offset:"63%","stop-color":"#00FF40","stop-opacity":"1"}),e("stop",{offset:"75%","stop-color":"
ED00","stop-opacity":"1"}),e("stop",{offset:"88%","stop-color":"#FFFF00","stop-opacity":"1"}),e("stop",{offset:"100%","sto
olor":"#FF0000",
"stop-opacity":"1"})])),e("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-hsv)"})]);n=e("svg",{xmlns:"h
p://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[e("defs",{},[e("linearGradient",{id:"gradient-black",x
"0%",y1:"100%",x2:"0%",y2:"0%"},[e("stop",{offset:"0%","stop-color":"#000000","stop-opacity":"1"}),e("stop",{offset:"100%"
top-color":"#CC9A81","stop-opacity":"0"})]),e("linearGradient",{id:"gradient-white",x1:"0%",y1:"100%",x2:"100%",y2:"100%"}
("stop",
{offset:"0%","stop-color":"#FFFFFF","stop-opacity":"1"}),e("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"
})])]),e("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-white)"}),e("rect",{x:"0",y:"0",width:"100%",h
ht:"100%",fill:"url(#gradient-black)"})])}else if(p=="VML"){m='<DIV style="position: relative; width: 100%; height: 100%">

rect style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" stroked="f" filled="t"><v:fill type="gradient"
thod="none" angle="0" color="red" color2="red" colors="8519f fuchsia;.25 #8000ff;24903f #0040ff;.5 aqua;41287f #00ff40;.75
bed00;57671f yellow"></v:fill></v:rect></DIV>';
n='<DIV style="position: relative; width: 100%; height: 100%"><v:rect style="position: absolute; left: -1px; top: -1px; wi
h: 101%; height: 101%" stroked="f" filled="t"><v:fill type="gradient" method="none" angle="270" color="#FFFFFF" opacity="1
0%" color2="#CC9A81" o:opacity2="0%"></v:fill></v:rect><v:rect style="position: absolute; left: 0px; top: 0px; width: 100%
eight: 101%" stroked="f" filled="t"><v:fill type="gradient" method="none" angle="0" color="#000000" opacity="100%" color2=
C9A81" o:opacity2="0%"></v:fill></v:rect></DIV>';
k.namespaces.v||k.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML")}i.prototype.setHsv=function(a){q(this
a)};i.prototype.setRgb=function(a){q(this,s(a.r,a.g,a.b),a)};i.prototype.setHex=function(a){q(this,s(parseInt(a.substr(1,2
6),parseInt(a.substr(3,2),16),parseInt(a.substr(5,2),16)),j,a)};i.positionIndicators=function(a,b,c,d){if(c){b.style.left=
to";b.style.right="0px";b.style.top="0px";a.style.top=c.y-a.offsetHeight/2+"px"}if(d){b.style.top=d.y-b.offsetHeight/2+"px
b.style.left=
d.x-b.offsetWidth/2+"px"}};h.ColorPicker=i})(window,window.document);
</script>
<style>
html {
min-height: 100%
}
body {
min-height: 100%;
margin:0;
padding:0;
font: 15px Tahoma;
color:#555;
}
#top{
width:100%;
background: #222;
text-align:center;
height:35px;
line-height:35px;
}
#top a{color:#00FF00;text-decoration:none;}
.logo{
width:200px;
font: 22px/125% Tahoma;
float:left;
line-height:35px;
}
.logo span{font: 12px/125% Tahoma;}
#color-picker{
margin:25px auto;
width:450px;
}
#color-values{
display:block;
list-style:none;
color:#222;
float:left;
margin:0 0 0 15px;
padding: 5px;
text-align:left;
}
#pcr_bg{
height:135px;
}

/* Common stuff */
.picker-wrapper,
.pcr-wrapper {
position: relative;
float: left;
}
.picker-indicator,
.pcr-indicator {
position: absolute;
left: 0;
top: 0;
}
.picker,
.pcr {
cursor: crosshair;

float: left;
}

/* Default skin */
.cp-default .picker {
width: 200px;
height: 200px;
}
.cp-default .pcr {
width: 30px;
height: 200px;
}
.cp-default .pcr-wrapper {
margin-left: 10px;
}
.cp-default .picker-indicator {
width: 5px;
height: 5px;
border: 2px solid darkblue;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: alpha(opacity=50);
background-color: white;
}
.cp-default .pcr-indicator {
width: 100%;
height: 10px;
left: -4px;
opacity: .6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
filter: alpha(opacity=60);
border: 4px solid lightblue;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: white;
}
.box{
box-shadow:5px -11px 35px 5px rgba(0,0,0,0.42);
-webkit-box-shadow:5px -11px 35px 5px rgba(0,0,0,0.42);
-moz-box-shadow:5px -11px 35px 5px rgba(0,0,0,0.42);
}
</style>
</head>
<body>
<div id="top">
<div class="logo"></div>
</a></div>
<br>
<br>
<br>
<center>
<div class="box">
<h1>Палитра штмл</h1>
<div id="color-picker" class="cp-default">
<div class="picker-wrapper">
<div id="picker" class="picker"></div>
<div id="picker-indicator" class="picker-indicator"></div>
</div>
<div class="pcr-wrapper">
<div id="pcr" class="pcr"></div>
<div id="pcr-indicator" class="pcr-indicator"></div>
</div>
<ul id="color-values">

<li><label>RGB:</label><span id="rgb"></span></li>
<li><label>HSV:</label><span id="hsv"></span></li>
<li><label>HTML:</label><span id="hex"></span></li>
<li><div id="pcr_bg"></div></li>
</ul>
</div>
</center>
<script type="text/javascript">
cp = ColorPicker(document.getElementById('pcr'), document.getElementById('picker'),
function(hex, hsv, rgb, mousePicker, mousepcr) {
currentColor = hex;
ColorPicker.positionIndicators(
document.getElementById('pcr-indicator'),
document.getElementById('picker-indicator'),
mousepcr, mousePicker);
document.getElementById('hex').innerHTML = hex;
document.getElementById('rgb').innerHTML = 'rgb(' + rgb.r.toFixed() + ',' + rgb.g.toFixed() + ',' + rgb.b.toFixed() +
;
document.getElementById('hsv').innerHTML = 'hsv(' + hsv.h.toFixed() + ',' + hsv.s.toFixed(2) + ',' + hsv.v.toFixed(2)
')';
document.getElementById('pcr_bg').style.backgroundColor = hex;
});
cp.setHex('#D4EDFB');
</script>
</body>
</html>

Вот что получилось:

Готовый css редактор теней на блоках
Принцип работы взят отсюда.Очень полезная вещь для сайта. С ней можно спокойно делать в два раза быстрее многие элементы(блоки
страницы). Выглядит это всё как-то так:

A код вот:
<html>
<head>
<style>
.box{
box-shadow: 0px 0px 59px 5px #000000;
background-color:#E0FFFF;

border-radius: 12px;
}
</style>
<style>
h2{
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
</head>
<body>
<h2 align="center">Генератор теней CSS</h2>
<div class="box">
<table class="generator">
<tr><td><td><input type="range" min="-100" max="100" oninput="boxShadow()" title="смещение влево/вправо"/><td rowspan="6">
yle contenteditable>box-shadow: none;</style>
<tr><td><td><input type="range" min="-100" max="100" oninput="boxShadow()" title="смещение вверх/вниз"/>
<tr><td>●<td><input type="range" max="100" value="0" oninput="boxShadow()" title="размытие"/>
<tr><td><span>●</span><td><input type="range" min="-100" max="100" value="0" oninput="boxShadow()" title="ширина"/>
<tr><td><td><input type="color" onchange="boxShadow()" placeholder="цвет, например, #000"/>
<tr><td><td><label title="при его наличии тень будет во внутрь"><input type="checkbox" onclick="boxShadow()"/> inset</labe
</table>
<style>
.generator {
width: 100%;
table-layout: fixed;
border-spacing: 0;
text-align: center;
}
.generator td:nth-child(1) {
width: 1em;
padding-left: 7px;
font-size: 150%;
color: #dad871;
vertical-align: top;
background: red;
}
.generator label {
color: #dad871;
}
.generator tr:nth-child(3) td:nth-child(1) {
text-shadow: #dad871 0 0 5px;
color: rgba(0, 0, 0, 0);
}
.generator tr:nth-child(4) td:nth-child(1) span {
transform: scale(1.5, 1.5);
}
.generator tr:nth-child(5) td:nth-child(1) {
background-image: repeating-radial-gradient(circle closest-side, blue, red, yellow, green 40%, green 150%)
}
.generator tr:nth-child(-n+5) td:nth-child(2) input {
width: 100%;
margin: 0;
padding: 0;
-moz-box-sizing: border-box; box-sizing: border-box;
}
.generator td:nth-child(2) {
width: 160px;
padding-right: 7px;
background: green;
}
.generator tr:nth-child(6) td:nth-child(1), .generator tr:nth-child(6) td:nth-child(2) {
padding-bottom: 7px;

}
.generator tr:nth-child(1) td:nth-child(1), .generator tr:nth-child(1) td:nth-child(2) {
padding-top: 7px;
}
.generator td:nth-child(3) {
vertical-align: middle;
}
.generator [contenteditable] {
display: inline-block;
width: auto;
margin: 0;
padding: 20px;
border: none;
color: #3f0309;
font: 90% normal helvetica, sans-serif;
background: #f1f1f1;
white-space: pre-wrap;
text-align: left;
}
[contenteditable]:focus {
border: none;
background: #f1f1f1;
}
</style>
<script>
function boxShadow() {
document.querySelector('.generator style').innerHTML = '.generator style {\n box-shadow: ' + document.querySelector('.gen
tor tr:nth-child(1) input').value + 'px ' + document.querySelector('.generator tr:nth-child(2) input').value + 'px ' + doc
nt.querySelector('.generator tr:nth-child(3) input').value + 'px ' + document.querySelector('.generator tr:nth-child(4) in
t').value + 'px ' + document.querySelector('.generator tr:nth-child(5) input').value + ';\n}';
if (document.querySelector('.generator tr:nth-child(6) input').checked) {
document.querySelector('.generator style').innerHTML = '.generator style {\n box-shadow: ' + document.querySelector('.gen
tor tr:nth-child(1) input').value + 'px ' + document.querySelector('.generator tr:nth-child(2) input').value + 'px ' + doc
nt.querySelector('.generator tr:nth-child(3) input').value + 'px ' + document.querySelector('.generator tr:nth-child(4) in
t').value + 'px ' + document.querySelector('.generator tr:nth-child(5) input').value + ' inset;\n}';
}
}
</script>
</div>
</body>

Красивая страница ошибки 404

Например такая:

Ребят вы не поверите, но кому-то лень писать эту страницу, поэтому я решил сделать её подстраивающаяся под мобильный дизайн и
содержащая svg анимацию. Т.к создавать svg мне лень, то я украл позаимствовал svg из этого сайта. Если вы такие же ленивые как и я, в
можете сделать тоже самое, а именно:
1. Зайти на 404 страницу сайта
2. Найти на странице тег iframe (там и будет svg)
Ещё примечательно то что при обновление страницы на этом сайте, svg постоянно меняется.
А, чуть не забыл, вот код:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.sup {
box-shadow: 0px 0px 70px 0px #000000;
border-radius:12px;
}
h3{
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0
0
0
0

3px 5px rgba(0,0,0,.2),
5px 10px rgba(0,0,0,.25),
10px 10px rgba(0,0,0,.2),
20px 20px rgba(0,0,0,.15);

}
h2{
color:red;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
</head>
<div class="sup">
<h2 align="center">Небольшая ошибочка!</h2>
<div align="center">
<iframe src="https://s.codepen.io/team/codepen/debug/cc6438add208d13d71bda1e65f6616fb" scrolling="no" ></iframe>
<h3>Страница не найдена!</h3>
<h3>Возможно, она была удалена.</h3>
</div>
</body>

Визуальный HTML редактор

Если вам нужно быстро и просто установить HTML редактор, то сервис Ckeditor предлагает много различных скриптов для установки
редактора.
У меня получилось так: