Архивы WEB - Страница 3 из 53

Затененный задний фон для модального окна

28.03.2024 Павел Грибов WEB

Довольно часто встречающаяся задача: затененный задний фон модального окна или элемента веб страницы.Решается задача довольно просто, с использованием псевдоэлементов :before и :after. Обращаю внимание, что их можно использовать только в парных тегах вида <div></div>, и соответственно нельзя в тегах вида input (т.е. не парных). Еще одним нюансом является то, что значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.

Например задача получить страницу вида:

Решается примерно так: сначала определим стили CSS:

.application:before {
   content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;
  background-size: cover;
    filter: blur(2px);
}

.application:after {
  content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}
.select_area_color_lent_tag{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background-color: white;
  border: 1px solid black;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  z-index: 20;    
}

.application:before {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;

background-size: cover;

filter: blur(2px);

}

.application:after {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,.5);

}

.select_area_color_lent_tag{

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 250px;

height: 250px;

background-color: white;

border: 1px solid black;

padding: 20px;

display: flex;

flex-wrap: wrap;

text-align: center;

justify-content: space-around;

z-index: 20;

}

HTML для этих стилей может выглядеть таким:

        <div class="application" style="display: none">            <div class="select_area_color_lent_tag">            </div>        </div>

1	<div class="application" style="display: none"> <div class="select_area_color_lent_tag"> </div> </div>

В нужный момент достаточно показать блок application, и получим картинку как на скриншоте выше,а именно затененный задний фон модального окна:

$(".application").show()

1	$(".application").show()

А здесь можно посмотреть еще много советов по работе с CSS

Оставить комментарий css, html, затененный задний фон

WordPress: Плагин для комментирования записей при помощи vk

14.02.2024 Павел Грибов WEB

Много лет пользовался плагином Social API. Да много лет заброшен и не поддерживается, но работало. Но тут случился переезд сайта с PHP 7.4 на PHP 8.2. И плагин отвалился., Поискал актуальные рабочие плагины — аналоги. Не нашел. Заброшены все. Пришлось закатать рукава и один из самых простых заброшенных плагинов довести до рабочего состояния. Результат выложен тут. Возможно дойдут руки и для того чтобы выложить в репозитарии WordPress.

Оставить комментарий php, plugin, vkontakte, wordpress, комментарии, плагин

Ubuntu: устранение уязвимости OpenSSH cve-2023-48795

26.01.2024 Павел Грибов WEB

Вообще, если дистрибутив LTS, то просто выполнив:

apt upgrade
service sshd restart

1 2	apt upgrade service sshd restart

Уязвимость уже будет теоретически будет устранена, НО! дополнительно можно (на будущее) отключить вообще протоколы ChaCha20-Poly1305 и Encrypt-then-MAC в ssh, которые собственно и эксплуатируются для этой уязвимости:

echo 'Ciphers -chacha20-poly1305@openssh.com' > /etc/ssh/sshd_config.d/anti-terrapin-attack_1.conf
echo 'Ciphers -encrypt-then-mac@openssh.com' > /etc/ssh/ssh_config.d/anti-terrapin-attack.conf

service restart sshd

echo 'Ciphers -chacha20-poly1305@openssh.com' > /etc/ssh/sshd_config.d/anti-terrapin-attack_1.conf

echo 'Ciphers -encrypt-then-mac@openssh.com' > /etc/ssh/ssh_config.d/anti-terrapin-attack.conf

service restart sshd

Теперь если выполнить:

nmap --script ssh2-enum-algos -sV -p 22 localhost

1	nmap --script ssh2-enum-algos -sV -p 22 localhost

Можно увидеть список используемых алгоритмов для соединения, и соотвественно узнать, что эти протоколы исчезли из списка доступных

Оставить комментарий cve-2023-48795, ssh

Grafana: Аннотации

22.01.2024 Павел Грибов WEB

Продолжаю попытки нормально пометить на графике дневное и ночное время. Описание предыдущих попыток можно почитать здесь. На этот раз, попробуем при помощи аннотаций. Основная идея: при помощи аннтотаций, на графике возможно помечать и подписывать определенные промежутки данных на графике. Аннотации можно добавлять из вне при помощи специального API.

Создадим ключ API:

Далее, необходимо узнать id дашборда (гаходится как orgId в url) и id панели дашборда, чтобы таргетировать аннотацию.

Далее наваяем небольшой скрипт на PHP, который положим в крон и будем выполнять ночью:

#!/usr/bin/php
<?php
    $geo=21; // Код можно узнать здесь: https://xn--90acbu5aj5f.xn--p1ai/?page_id=6661
    $api_key_grafana="Bearer eyJrIwedwediLCJpZCI6MX0=";
    $api_grafana_url="https://qwedqweai/api/annotations";
    $dash_id=1;
    $panel_id=30;
    $offset=3*60*60; // смещение времени

    $ch = curl_init("https://yandex.ru/time/sync.json?geo=21");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $res=curl_exec($ch);
    curl_close($ch);

    $js=json_decode($res);

    if ($js==null){die("Не удалось получить данные для обработки");};
    $DayFrom=$js->clocks->$geo->sunrise;
    $DayTo=$js->clocks->$geo->sunset;

    $dt=Date("Y-m-d");
    echo "День $dt с $DayFrom по $DayTo\n";
    $dtStart=(strtotime($dt." ".$DayFrom.":00")-$offset)."000";
    $dtEnd=(strtotime($dt." ".$DayTo.":00")-$offset)."000";


    $ch = curl_init($api_grafana_url);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        "Authorization: $api_key_grafana",
        "Content-Type: application/json"
    ));
    curl_setopt($ch, CURLOPT_POST, 1);

    $postd=[];
    $postd["text"]="Дневное время";
    $postd["dashboardId"]=$dash_id;
    $postd["panelId"]=$panel_id;
    $postd["time"]=$dtStart+0;
    $postd["timeEnd"]=$dtEnd+0;
    $postd["tags"]=["daytime"];


    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($postd));
    $res=curl_exec($ch);
    var_dump($res);

?>

#!/usr/bin/php

<?php

$geo=21; // Код можно узнать здесь: https://xn--90acbu5aj5f.xn--p1ai/?page_id=6661

$api_key_grafana="Bearer eyJrIwedwediLCJpZCI6MX0=";

$api_grafana_url="https://qwedqweai/api/annotations";

$dash_id=1;

$panel_id=30;

$offset=3*60*60; // смещение времени

$ch = curl_init("https://yandex.ru/time/sync.json?geo=21");

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$res=curl_exec($ch);

curl_close($ch);

$js=json_decode($res);

if ($js==null){die("Не удалось получить данные для обработки");};

$DayFrom=$js->clocks->$geo->sunrise;

$DayTo=$js->clocks->$geo->sunset;

$dt=Date("Y-m-d");

echo "День $dt с $DayFrom по $DayTo\n";

$dtStart=(strtotime($dt." ".$DayFrom.":00")-$offset)."000";

$dtEnd=(strtotime($dt." ".$DayTo.":00")-$offset)."000";

$ch = curl_init($api_grafana_url);

curl_setopt($ch, CURLOPT_HTTPHEADER, array(

"Authorization: $api_key_grafana",

"Content-Type: application/json"

));

curl_setopt($ch, CURLOPT_POST, 1);

$postd=[];

$postd["text"]="Дневное время";

$postd["dashboardId"]=$dash_id;

$postd["panelId"]=$panel_id;

$postd["time"]=$dtStart+0;

$postd["timeEnd"]=$dtEnd+0;

$postd["tags"]=["daytime"];

curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($postd));

$res=curl_exec($ch);

var_dump($res);

В результате на графике получим нечто подобное:

Оставить комментарий grafana, аннотации

Получение времени захода и восхода солнца

22.01.2024 Павел Грибов WEB

Задача: получить время захода и восхода солнца в текущую дату..

Решение:

Яндекс предоставляет эту информацию в формате json по ссылке вида https://yandex.ru/time/sync.json?geo=21, где 21 — код города в сервисах Яндекса. Список на всякий случай здесь. Один нюанс — нет возможности получить данные на определённую дату.. Да и зависеть от Яндекса, так себе идея. Сегодня сервис работает, через год нет.

Второй вариант: по ссылке вида https://api.sunrise-sunset.org/json?lat=36.7201600&lng=-4.4203400&date=2024-01-22, мы можем получить восход/заход в любую указанную дату. А так как дней всего у нас 365 в году, то вполне возможно просто выкачать эти данные и разместить их у себя например в формате <день_года>.json

Оставить комментарий восход, заход, солнце

« 1 2 3 4 5 … 53 »

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30