Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » Как адаптировать парсер погоды?

Как адаптировать парсер погоды?

     29.09.2016    Все вопросы » Шаблоны (TPL)    3398

вопрос
Всем привет, нашел в сети рабочий парсер Яндекс погоды. Отдельно скрипт рабочий, но адаптировать к dle мне никак не удается. Я почитал все ответы по тематике "Добавить свои теги в шаблон" и так же прочел онлайн документацию на оф. сайте модуля, но я не увидел ничего для меня подходящего.
Ниже весь код парсера.

<?php
$city = "28051";                                                       //  GeoId города (11310 - Минусинск)
$img_folder = "https://yastatic.net/weather/i/icons/islands/32/";      //  Папка с файлами изображений (https://yastatic.net/weather/i/icons/islands/32/)
$img_ext = "png";                                                      //  Расширение файлов картинок (svg / png)
  
//  Формируем запрос
$timestamp = time();
$token = md5('eternalsun'.$timestamp);
$uuid = "8211637137c4408898aceb1097921872";
$deviceid = "315f0e802b0b49eb8404ea8056abeaaf";
$opts = array(
  'http'=>array(
    'method'=>"GET",
    'header'=>"User-Agent: yandex-weather-android/4.2.1 \n" .
               "X-Yandex-Weather-Client: YandexWeatherAndroid/4.2.1 \n" .
               "X-Yandex-Weather-Device: os=null;os_version=21;manufacturer=chromium;model=App Runtime for Chrome Dev;device_id=$deviceid;uuid=$uuid; \n" .
               "X-Yandex-Weather-Token: $token \n" .
               "X-Yandex-Weather-Timestamp: $timestamp \n" .
               "X-Yandex-Weather-UUID: $uuid \n" .
               "X-Yandex-Weather-Device-ID: $deviceid \n" .
               "Accept-Encoding: gzip, deflate \n" .
               "Host: api.weather.yandex.ru \n" .
               "Connection: Keep-Alive \n"
  )
);
  
$context = stream_context_create($opts);
  
//  Отправляем запрос
$file = @file_get_contents('https://api.weather.yandex.ru/v1/forecast?geoid='. $city. '&lang=ru', false, $context);
  
if ($file){
//  Разархивируем ответ
$yandex = gzdecode($file);
  
$data_fact = (array) json_decode($yandex)->fact;    
$temp_current = $data_fact['temp'];                     //  Текущая температура
$icon_fact = $data_fact['icon'];                        //  Иконка текущей температуры
$icon_fact = preg_replace('/_/i','-',$icon_fact);       //  Заменяем символ "_" на символ "-"
$icon_fact = preg_replace('/--/i','-',$icon_fact);      //  Заменяем символы "--" на символ "-"
$wind_speed = $data_fact['wind_speed'];                 //  Скорость ветра
$humidity = $data_fact['humidity'];                     //  Влажность (%)
$pressure_mm = $data_fact['pressure_mm'];               //  Атмосферное давление (мм рт. ст.)
  
$data_forecasts0 = (array) json_decode($yandex)->forecasts[0];
$sunrise = $data_forecasts0['sunrise'];                 //  Рассвет
$sunset = $data_forecasts0['sunset'];                   //  Закат
  
//  Находим температуру на каждый час за сутки
for ($h = 0; $h<24; $h++) {
        $hour_array1[$h] = (int) json_decode($yandex)->forecasts[0]->hours[$h]->temp;
    }
$min_hour = min($hour_array1);                          //  Находим из них минимальную
$max_hour = max($hour_array1);                          //  И максимальную температуру
  
//  Находим температуру на каждый час за следующие сутки
for ($h = 0; $h<24; $h++) {
        $hour_array2[$h] = (int) json_decode($yandex)->forecasts[1]->hours[$h]->temp;
    }
$min_hour_t = min($hour_array2);                        //  Находим из них минимальную
$max_hour_t = max($hour_array2);                        //  И максимальную температуру
  
$data_forecasts2 = (array) json_decode($yandex)->forecasts[0]->parts->day;
$avg_day = $data_forecasts2['temp_avg'];                //  Находим среднюю температуру днем
$icon_day = $data_forecasts2['icon'];                   //  Иконка средней температуры днем
$icon_day = preg_replace('/_/i','-',$icon_day);         //  Заменяем символ "_" на символ "-"
$icon_day = preg_replace('/--/i','-',$icon_day);        //  Заменяем символы "--" на символ "-"
  
$data_forecasts3 = (array) json_decode($yandex)->forecasts[0]->parts->night;
$avg_night = $data_forecasts3['temp_avg'];              //  Находим среднюю температуру ночью
$icon_night = $data_forecasts3['icon'];                 //  Иконка средней температуры ночью
$icon_night = preg_replace('/_/i','-',$icon_night);     //  Заменяем символ "_" на символ "-"
$icon_night = preg_replace('/--/i','-',$icon_night);    //  Заменяем символы "--" на символ "-"
  
$data_forecasts4 = (array) json_decode($yandex)->forecasts[1]->parts->day;
$avg_day_t = $data_forecasts4['temp_avg'];              //  Находим среднюю температуру завтра днем
$icon_day_t = $data_forecasts4['icon'];                 //  Иконка средней температуры завтра днем
$icon_day_t = preg_replace('/_/i','-',$icon_day_t);     //  Заменяем символ "_" на символ "-"
$icon_day_t = preg_replace('/--/i','-',$icon_day_t);    //  Заменяем символы "--" на символ "-"
  
  
$data_forecasts5 = (array) json_decode($yandex)->forecasts[1]->parts->night;
$avg_night_t = $data_forecasts5['temp_avg'];            //  Находим среднюю температуру завтра ночью
$icon_night_t = $data_forecasts5['icon'];               //  Иконка средней температуры завтра ночью
$icon_night_t = preg_replace('/_/i','-',$icon_night_t); //  Заменяем символ "_" на символ "-"
$icon_night_t = preg_replace('/--/i','-',$icon_night_t);//  Заменяем символы "--" на символ "-"
  
//  Если значение температуры положительно, для наглядности добавляем "+"
if ($temp_current>0) {$temp_current='+'.$temp_current;}
if ($min_hour>0) {$min_hour='+'.$min_hour;}
if ($max_hour>0) {$max_hour='+'.$max_hour;}
if ($min_hour_t>0) {$min_hour_t='+'.$min_hour_t;}
if ($max_hour_t>0) {$max_hour_t='+'.$max_hour_t;}
if ($avg_day>0) {$avg_day='+'.$avg_day;}
if ($avg_night>0) {$avg_night='+'.$avg_night;}
if ($avg_day_t>0) {$avg_day_t='+'.$avg_day_t;}
if ($avg_night_t>0) {$avg_night_t='+'.$avg_night_t;}
}
?>
  <table class="pogoda_table" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8f8f8">
    <tr>
      <td class="td1" title="« Текущая температура »"><b>Сейчас:</b></td>
      <td class="td2" title="« Текущая температура »">
        <?php echo $temp_current; ?> <sup>o</sup>C
        <?php echo ("<img src=\"".$img_folder.$icon_fact ."." . $img_ext . "\" style=\"vertical-align: -7px;\" width=\"24px\" height=\"24px\"/>"); ?>
      </td>
    </tr>
    <tr>
      <td class="td1" title="« Скорость ветра »">Ветер:
        <?php echo $wind_speed; ?> м/с</td>
      <td class="td2" title="« Влажность воздуха »">Влажность:
        <?php echo $humidity; ?>%</td>
    </tr>
    <tr>
      <td class="td1" title="« Атмосферное давление »">Давление:</td>
      <td class="td2" title="« Атмосферное давление »">
        <?php echo $pressure_mm; ?> мм рт. ст.</td>
    </tr>
    <tr>
      <td class="td1" title="« Время восхода солнца »">Восход:
        <?php echo $sunrise; ?>
      </td>
      <td class="td2" title="« Время заката солнца »">Закат:
        <?php echo $sunset; ?>
      </td>
    </tr>
    <tr>
      <td class="td1" title="« Минимальная и максимальная температура сегодня »"><b>Сегодня:</b></td>
      <td class="td2" title="« Минимальная и максимальная температура сегодня »">от
        <?php echo $min_hour; ?> до
        <?php echo $max_hour; ?> <sup>o</sup>C</td>
    </tr>
    <tr>
      <td class="td1" title="« Средняя температура сегодня днем »">Днём:
        <?php echo $avg_day; ?>
        <?php echo ("<img src=\"".$img_folder. $icon_day ."." . $img_ext . "\" style=\"vertical-align: -7px;\" width=\"24px\" height=\"24px\"/>"); ?>
      </td>
      <td class="td2" title="« Средняя температура сегодня ночью »">Ночью:
        <?php echo $avg_night; ?>
        <?php echo ("<img src=\"".$img_folder.$icon_night ."." . $img_ext . "\" style=\"vertical-align: -7px;\" width=\"24px\" height=\"24px\"/>"); ?>
      </td>
    </tr>
    <tr>
      <td class="td1" title="« Минимальная и максимальная температура завтра »"><b>Завтра:</b></td>
      <td class="td2" title="« Минимальная и максимальная температура завтра »">от
        <?php echo $min_hour_t; ?> до
        <?php echo $max_hour_t; ?> <sup>o</sup>C</td>
    </tr>
    <tr>
      <td class="td1" title="« Средняя температура завтра днем »">Днём:
        <?php echo $avg_day_t; ?>
        <?php echo ("<img src=\"".$img_folder.$icon_day_t ."." . $img_ext . "\" style=\"vertical-align: -7px;\" width=\"24px\" height=\"24px\"/>"); ?>
      </td>
      <td class="td2" title="« Средняя температура завтра ночью »">Ночью:
        <?php echo $avg_night_t; ?>
        <?php echo ("<img src=\"".$img_folder.$icon_night_t ."." . $img_ext . "\" style=\"vertical-align: -7px;\" width=\"24px\" height=\"24px\"/>"); ?>
      </td>
    </tr>
    <tr>
      <td class="td3" title="« Перейти на сайт яндекса »" colspan="2">
        <a href="https://pogoda.yandex.ru/<?php echo $city ?>" target="_blank">Прогноз на неделю</a>
      </td>
    </tr>
  </table>
</body>
</html>

Я создал файл /engine/modules/weather.php
Убрал всю html часть и попробовал добавить
<?php echo $temp_current; ?>

В виде тега шаблона:
$echo .= " <php $temp_current; ?>";
$tpl->set( "{temp_current}", $echo );

Но на сайте появляется просто текст {temp_current}
Хотелось бы увидеть пример добавления тега именно по этому скрипту. Остальное я постараюсь сделать сам (по рабочему примеру)
Заранее спасибо :)

Ответил: Pringles

<?php

if (!defined('DATALIFEENGINE')) {
    die("Hacking attempt!");
}

$city = "28051"; //  GeoId города (11310 - Минусинск)
$img_folder = "https://yastatic.net/weather/i/icons/islands/32/"; //  Папка с файлами изображений (https://yastatic.net/weather/i/icons/islands/32/)
$img_ext = "png";

//  Расширение файлов картинок (svg / png)

//  Формируем запрос
$timestamp = time();
$token = md5('eternalsun' . $timestamp);
$uuid = "8211637137c4408898aceb1097921872";
$deviceid = "315f0e802b0b49eb8404ea8056abeaaf";
$opts = [
    'http' => [
        'method' => "GET",
        'header' => "User-Agent: yandex-weather-android/4.2.1 \n" .
        "X-Yandex-Weather-Client: YandexWeatherAndroid/4.2.1 \n" .
        "X-Yandex-Weather-Device: os=null;os_version=21;manufacturer=chromium;model=App Runtime for Chrome Dev;device_id=$deviceid;uuid=$uuid; \n" .
        "X-Yandex-Weather-Token: $token \n" .
        "X-Yandex-Weather-Timestamp: $timestamp \n" .
        "X-Yandex-Weather-UUID: $uuid \n" .
        "X-Yandex-Weather-Device-ID: $deviceid \n" .
        "Accept-Encoding: gzip, deflate \n" .
        "Host: api.weather.yandex.ru \n" .
        "Connection: Keep-Alive \n"
    ]
];

$context = stream_context_create($opts);

//  Отправляем запрос
$file = @file_get_contents('https://api.weather.yandex.ru/v1/forecast?geoid=' . $city . '&lang=ru', false, $context);

if ($file) {
//  Разархивируем ответ
    $yandex = gzdecode($file);

    $data_fact = (array)json_decode($yandex)->fact;
    $temp_current = $data_fact['temp']; //  Текущая температура
    $icon_fact = $data_fact['icon']; //  Иконка текущей температуры
    $icon_fact = preg_replace('/_/i', '-', $icon_fact); //  Заменяем символ "_" на символ "-"
    $icon_fact = preg_replace('/--/i', '-', $icon_fact); //  Заменяем символы "--" на символ "-"
    $wind_speed = $data_fact['wind_speed']; //  Скорость ветра
    $humidity = $data_fact['humidity']; //  Влажность (%)
    $pressure_mm = $data_fact['pressure_mm']; //  Атмосферное давление (мм рт. ст.)

    $data_forecasts0 = (array)json_decode($yandex)->forecasts[0];
    $sunrise = $data_forecasts0['sunrise']; //  Рассвет
    $sunset = $data_forecasts0['sunset'];

//  Закат

//  Находим температуру на каждый час за сутки
    for ($h = 0; $h < 24; $h++) {
        $hour_array1[$h] = (int)json_decode($yandex)->forecasts[0]->hours[$h]->temp;
    }

    $min_hour = min($hour_array1); //  Находим из них минимальную
    $max_hour = max($hour_array1);

//  И максимальную температуру

//  Находим температуру на каждый час за следующие сутки
    for ($h = 0; $h < 24; $h++) {
        $hour_array2[$h] = (int)json_decode($yandex)->forecasts[1]->hours[$h]->temp;
    }

    $min_hour_t = min($hour_array2); //  Находим из них минимальную
    $max_hour_t = max($hour_array2); //  И максимальную температуру

    $data_forecasts2 = (array)json_decode($yandex)->forecasts[0]->parts->day;
    $avg_day = $data_forecasts2['temp_avg']; //  Находим среднюю температуру днем
    $icon_day = $data_forecasts2['icon']; //  Иконка средней температуры днем
    $icon_day = preg_replace('/_/i', '-', $icon_day); //  Заменяем символ "_" на символ "-"
    $icon_day = preg_replace('/--/i', '-', $icon_day); //  Заменяем символы "--" на символ "-"

    $data_forecasts3 = (array)json_decode($yandex)->forecasts[0]->parts->night;
    $avg_night = $data_forecasts3['temp_avg']; //  Находим среднюю температуру ночью
    $icon_night = $data_forecasts3['icon']; //  Иконка средней температуры ночью
    $icon_night = preg_replace('/_/i', '-', $icon_night); //  Заменяем символ "_" на символ "-"
    $icon_night = preg_replace('/--/i', '-', $icon_night); //  Заменяем символы "--" на символ "-"

    $data_forecasts4 = (array)json_decode($yandex)->forecasts[1]->parts->day;
    $avg_day_t = $data_forecasts4['temp_avg']; //  Находим среднюю температуру завтра днем
    $icon_day_t = $data_forecasts4['icon']; //  Иконка средней температуры завтра днем
    $icon_day_t = preg_replace('/_/i', '-', $icon_day_t); //  Заменяем символ "_" на символ "-"
    $icon_day_t = preg_replace('/--/i', '-', $icon_day_t); //  Заменяем символы "--" на символ "-"

    $data_forecasts5 = (array)json_decode($yandex)->forecasts[1]->parts->night;
    $avg_night_t = $data_forecasts5['temp_avg']; //  Находим среднюю температуру завтра ночью
    $icon_night_t = $data_forecasts5['icon']; //  Иконка средней температуры завтра ночью
    $icon_night_t = preg_replace('/_/i', '-', $icon_night_t); //  Заменяем символ "_" на символ "-"
    $icon_night_t = preg_replace('/--/i', '-', $icon_night_t);

//  Заменяем символы "--" на символ "-"

//  Если значение температуры положительно, для наглядности добавляем "+"
    if ($temp_current > 0) {
    $temp_current = '+' . $temp_current;
  }

    if ($min_hour > 0) {
    $min_hour = '+' . $min_hour;
  }

    if ($max_hour > 0) {
    $max_hour = '+' . $max_hour;
  }

    if ($min_hour_t > 0) {
    $min_hour_t = '+' . $min_hour_t;
  }

    if ($max_hour_t > 0) {
    $max_hour_t = '+' . $max_hour_t;
  }

    if ($avg_day > 0) {
    $avg_day = '+' . $avg_day;
  }

    if ($avg_night > 0) {
    $avg_night = '+' . $avg_night;
  }

    if ($avg_day_t > 0) {
    $avg_day_t = '+' . $avg_day_t;
  }

    if ($avg_night_t > 0) {
    $avg_night_t = '+' . $avg_night_t;
  }
}

$template = <<<HTML
<table class="pogoda_table" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8f8f8">
    <tr>
      <td class="td1" title="« Текущая температура »"><b>Сейчас:</b></td>
      <td class="td2" title="« Текущая температура »">
        {$temp_current} <sup>o</sup>C
        <img src="{$img_folder}{$icon_fac}.{$img_ext}" style="vertical-align: -7px;" width="24px" height="24px">
      </td>
    </tr>
    <tr>
      <td class="td1" title="« Скорость ветра »">Ветер:
        {$wind_speed} м/с</td>
      <td class="td2" title="« Влажность воздуха »">Влажность:
        {$humidity}%</td>
    </tr>
    <tr>
      <td class="td1" title="« Атмосферное давление »">Давление:</td>
      <td class="td2" title="« Атмосферное давление »">
        {$pressure_mm} мм рт. ст.</td>
    </tr>
    <tr>
      <td class="td1" title="« Время восхода солнца »">Восход:
        {$sunrise}
      </td>
      <td class="td2" title="« Время заката солнца »">Закат:
        {$sunset}
      </td>
    </tr>
    <tr>
      <td class="td1" title="« Минимальная и максимальная температура сегодня »"><b>Сегодня:</b></td>
      <td class="td2" title="« Минимальная и максимальная температура сегодня »">от
        {$min_hour} до
        {$max_hour} <sup>o</sup>C</td>
    </tr>
    <tr>
      <td class="td1" title="« Средняя температура сегодня днем »">Днём:
        {$avg_day}
        <img src="{$img_folder}{$icon_day}.{$img_ext}" style="vertical-align: -7px;" width="24px" height="24px">
      </td>
      <td class="td2" title="« Средняя температура сегодня ночью »">Ночью:
        {$avg_night}
        <img src="{$img_folder}{$icon_night}.{$img_ext}" style="vertical-align: -7px;" width="24px" height="24px">
      </td>
    </tr>
    <tr>
      <td class="td1" title="« Минимальная и максимальная температура завтра »"><b>Завтра:</b></td>
      <td class="td2" title="« Минимальная и максимальная температура завтра »">от
        {$min_hour_t} до
        {$max_hour_t} <sup>o</sup>C</td>
    </tr>
    <tr>
      <td class="td1" title="« Средняя температура завтра днем »">Днём:
        {$avg_day_t}
        <img src="{$img_folder}{$icon_day_t}.{$img_ext}" style="vertical-align: -7px;" width="24px" height="24px">
      </td>
      <td class="td2" title="« Средняя температура завтра ночью »">Ночью:
        {$avg_night_t}
        <img src="{$img_folder}{$icon_night_t}.{$img_ext}" style="vertical-align: -7px;" width="24px" height="24px">
      </td>
    </tr>
    <tr>
      <td class="td3" title="« Перейти на сайт яндекса »" colspan="2">
        <a href="https://pogoda.yandex.ru/{$city}" target="_blank">Прогноз на неделю</a>
      </td>
    </tr>
  </table>
</body>
</html>
HTML;

echo $template;

?>

И в шаблон для вывода:
{include file="engine/modules/weather.php"}

7 комментариев

nurbekov
Юзер

nurbekov - 29 сентября 2016 22:16 -

Однозначно лайк, попросил пример - сделал всю работу :) Спасибо большое.
salam
Юзер

salam - 4 апреля 2017 13:15 -

К сожалению не работает. Выдает ошибку Parse error: syntax error, unexpected '[' in /data/storage/test/engine/modules/weather.php on line 18
Pringles
Юзер

Pringles - 4 апреля 2017 13:30 -

Версия рhp 5.4+
salam
Юзер

salam - 4 апреля 2017 13:51 -

Pringles, спасибо!
А можно как-то вывести прогноз на 3-5 дней?
Pringles
Юзер

Pringles - 4 апреля 2017 18:30 -

Мне некогда с ним возиться, если нужно сделать под Вас лично, пишите, за плату реализую.
А так, привел в норм вид код.
Pringles
Юзер

Pringles - 4 апреля 2017 18:31 -

 weather.php
Pringles
Юзер

Pringles - 4 апреля 2017 18:33 -

 weather.tpl


И в шаблон для вывода:
{include file="engine/modules/weather.php?city=28051&img_ext=png&lang=ru"}

city = 28051 - GeoId города
img_ext = png - Расширение файлов картинок (svg / png)
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 17.03.2013 websot  Шаблоны (TPL)
 15.12.2013 deffos  Общие вопросы, Шаблоны (TPL), Ламерские вопросы
 15.09.2014 G-3p  Шаблоны (TPL)
 07.10.2014 Саня  Шаблоны (TPL)
 17.02.2015 serg91100  Шаблоны (TPL), jQuery
 24.02.2015 akafaus  Шаблоны (TPL)
 23.03.2015 Kaleb  Шаблоны (TPL), jQuery
 02.05.2016 Michigan  Шаблоны (TPL), Стили (CSS)
 26.06.2016 Leks31region  Шаблоны (TPL)
 05.07.2016 Kraupin  Общие вопросы, Шаблоны (TPL), Ламерские вопросы
  • New-dev.ru | Создание простого сайта отзывов (рейтинг ... 4
    Фото New-dev.ru
    New-dev.ru
    Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
    Вчера, 14:14
    А что там на фронте на скрине или демо смотреть? Там в стандартную форму добавления комментария просто добавляется рейтинг, например, звездный.
  • TeraMoune | Сделать модуль опросы 3
    Фото TeraMoune
    TeraMoune
    Сделать модуль опросы
    22-04-2024, 13:32
    Конечно. Пишите в телеграм.
  • Nimax | Сделать модуль опросы 3
    Фото Nimax
    Nimax
    Сделать модуль опросы
    22-04-2024, 13:17
    Да в том и дело =) так и думал можете сделать? сколько будет по стоимости?
  • TeraMoune | Сделать модуль опросы 3
    Фото TeraMoune
    TeraMoune
    Сделать модуль опросы
    22-04-2024, 12:56
    Зачем же для этого модуль ? Есть стандартные опросы, достаточно добавить одну правку на обработку тега в описании новости от стандартного тега poll.
  • Nimax | Создание простого сайта отзывов (рейтинг ... 4
    Фото Nimax
    Nimax
    Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
    22-04-2024, 12:14
    А есть скрины или демо как это на фронте выглядит?
  • New-dev.ru | Создание простого сайта отзывов (рейтинг ... 4
    Фото New-dev.ru
    New-dev.ru
    Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
    21-04-2024, 18:25
    Эта старая публикация, за несколько месяцев цена выросла, а тут забыл исправить цену, сожалею. Сейчас поставил актуальную цену.
  • Nimax | Создание простого сайта отзывов (рейтинг ... 4
    Фото Nimax
    Nimax
    Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
    21-04-2024, 13:18
    Как преобрести за 9$? на сайте цена другая
  • Jigurda | Как в description вставить значение доп. ... 2
    Фото Jigurda
    Jigurda
    Как в description вставить значение доп.поля?
    19-04-2024, 10:54
    Немного не то. Нужно не заменить, а добавить к уже имеющемуся description свой текст с доп.полями
  • lutskboy | Как в description вставить значение доп. ... 2
    Фото lutskboy
    lutskboy
    Как в description вставить значение доп.поля?
    18-04-2024, 21:51
    https://sandev.pro/web/159-fullstory-metatags-by-sander.html
  • derebas | Как реализовать кнопку "Поделиться" как ... 1
    Фото derebas
    derebas
    Как реализовать кнопку "Поделиться" как на Плей Маркете?
    18-04-2024, 09:39
    Ну если на скорую руку то примерно так
    <style>
.sociallinks {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.sociallinks-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.social-container {
    display: flex;
    align-items: center;
}
.social-container > div {
    margin-left: 10px;
}

h2, p {
    margin: 5px 0;
}
.social {
  padding-top: 20px;
}
.social img {
  margin: 10px;
}
.sharebtn {
  padding-top: 20px;
  width: 100%;
}
.sharebtn_area {
  border: 1px solid black;
  height: 40px;
}
.sharebtn input[type="text"] {
  width: 70%;
  border: none;
  height: 95%;
}
.sharebtn button {
  width: 25%;
  height: 95%;
  border: none;
  background-color: #fff;
}
</style>
<button id="opensociallinksBtn">Поделиться</button>

<div id="mysociallinks" class="sociallinks">
  <div class="sociallinks-content">
    <span class="close">×</span>
    <div class="social-container">
        <img src="{image-1}" alt="Icon" width="30" height="30">
        <div>
            <h2>{title}</h2> 
            <p>Поделиться</p> 
        </div>
    </div>
    <div class="social">
        <a href="https://api.whatsapp.com/send/?text={full-link}"><img src="whatsapp.png" alt="WhatsApp" width="30" height="30"></a>
        <a href="https://www.facebook.com/sharer/sharer.php?u={full-link}"><img src="facebook.png" alt="Facebook" width="30" height="30"></a>
        <a href="https://twitter.com/intent/post?url={full-link}"><img src="twitter.png" alt="Twitter" width="30" height="30"></a>
        <a href="https://www.instagram.com/share?url={full-link}"><img src="instagram.png" alt="Instagram" width="30" height="30"></a>
    </div>
    <div class="sharebtn">
      <div class="sharebtn_area">
        <input type="text" id="inputText" value="{full-link}" readonly="true">
        <button id="copyBtn">Поделиться <img src="share.png" width="10px" alt="Share Icon"></button>
      </div>
    </div>
  </div>
</div>

<script>
var sociallinks = document.getElementById("mysociallinks");
var opensociallinksBtn = document.getElementById("opensociallinksBtn");
var closeBtn = document.getElementsByClassName("close")[0];
var copyBtn = document.getElementById("copyBtn");
var inputText = document.getElementById("inputText");

opensociallinksBtn.onclick = function() {
  sociallinks.style.display = "block";
}

closeBtn.onclick = function() {
  sociallinks.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == sociallinks) {
    sociallinks.style.display = "none";
  }
}

copyBtn.onclick = function() {
  inputText.select();
  document.execCommand("copy");
}
</script>
наверх