plugnz .pdf

File information


Original filename: plugnz.pdf

This PDF 1.4 document has been generated by Mozilla/5.0 (Linux; Android 5.1; TIT-L01 Build/HONORTIT-L01) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 YaBrowser/18.1.2.70.00 Mobile Safari/537.36 / Skia/PDF m63, and has been sent on pdf-archive.com on 01/05/2018 at 10:50, from IP address 5.143.x.x. The current document download page has been viewed 769 times.
File size: 879 KB (18 pages).
Privacy: public file


Download original PDF file


plugnz.pdf (PDF, 879 KB)


Share on social networks



Link to this file download page



Document preview


Публикации

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

Хабы

Компании

Песочница

Написать

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 предлагает много различных скриптов для установки
редактора.
У меня получилось так:


Related documents


plugnz
cms
snov od nsav
texmacs manual
computer application in business
deff

Link to this page


Permanent link

Use the permanent link to the download page to share your document on Facebook, Twitter, LinkedIn, or directly with a contact by e-Mail, Messenger, Whatsapp, Line..

Short link

Use the short link to share your document on Twitter or by text message (SMS)

HTML Code

Copy the following HTML code to share your document on a Website or Blog

QR Code

QR Code link to PDF file plugnz.pdf