Weather Informer

26 окт 2022, 11:24
Добавил: ScriptLife
20
0
Данный материал предоставлен сайтом ScriptLife.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
  • Описание
    • Версия DLE: 13.x
    • Модификация: TeraMoune
    • Автор: Ticcix

Регистрируемся на сайте https://openweathermap.org/ для получения ключа.
Страница генерации ключей https://home.openweathermap.org/api_keys

Код с оформлением (BB-коды):
[Weather-block city="..."] ... [/weather-block] - определяет блок информера.
В параметре city введите название города на английском языке.

В каждом блоке для каждой страны применяются следующие теги:
{weather-temp} - Температура
{Weather-value} - погода
{weather-icon} - [{THEME}/weather/icons/{weather-icon}.png]
{weather-country} - двухсимвольный код страны
{weather-humidity} - влажность
{weather-pressure} - давление
{weather-wind} - скорость ветра
{weather-clouds} - облачность
  • Установить модуль через систему установки плагинов.
  • Там же выбрать плагин Weather Informer и в его коде найти строку:
      	$api_key = '3eacddd82cb9fcaa8a280e69b31059ee'; 
    Заменить api_key на свой.
  • В шаблоне main.tpl найти:
    </head>
    Добавить выше:
    <link rel="stylesheet" href="{THEME}/weather/icons/icons.css">
     <style>
        .weather {
                background-color: #ffffff;
                border-radius: 20px;
                margin-top: 20px;
                color: #6f707d;
                border:solid 1px #0cc652;
                box-shadow:5px 20px 39px 0 rgba(0,0,0,0.51);
                transition:ease-in-out .3s
            }
    
            #heading{
                font-size: 55px;    
                color: #2b304d;
            }
    
            .temp{
                place-items: center;
            }
    
            .temp-details > p >span, .grey{
                color: #a3acc1;
                font-size: 12px;
            }
    
            .fa{
                color: #a5a5b1
            }
    
             *:focus{
                outline: none;
            }
    </style>
    
    <script>
       var timeNode = document.getElementById('time-node');
    
       function getCurrentTimeString() {
          return new Date().toTimeString().replace(/ .*/, '');
       }
    
       setInterval(
          () => timeNode.innerHTML = getCurrentTimeString(),
          1000
       );
    </script>
  • В нужное место шаблона добавить:
    [weather-block city="Batumi"] 
    <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-12 col-md-4 col-sm-12 col-xs-12"> 
                       <div class="weather p-4">    
    
                           <div class="d-flex">
                               <h6 class="flex-grow-1">{weather-city} / {weather-country}</h6>
                               <h6 class="small grey"><div id="time-node"></div></h6>
                           </div>
    
                           <div class="d-flex flex-column temp mt-5 mb-3">
                               <h1 class="mb-0 font-weight-bold" id="heading">{weather-temp}  </h1>
                               <span class="small grey">{weather-value}</span>
                           </div>
    
                           <div class="d-flex">
                               <div class="temp-details flex-grow-1">
                                    <p class="my-1">
                                     <i class="uil-tear mr-2" aria-hidden="true"></i>
                                       <span> {weather-humidity} </span> 
                                    </p>
    
                                    <p class="my-1"> 
                                       <i class="uil-temperature-empty mr-2" aria-hidden="true"></i>
                                       <span> {weather-pressure} </span> 
                                    </p>
    
                                    <p class="my-1"> 
                                        <i class="uil-wind mr-2" aria-hidden="true"></i>
                                       <span> {weather-wind} </span>
                                    </p>
                                    <p class="my-1"> 
                                        <i class="uil-clouds mr-2" aria-hidden="true"></i>
                                       <span> {weather-clouds} </span> 
                                    </p>
                               </div>
    
                               <div>
                                   <img src="{THEME}/weather/icons/{weather-icon}.png" width="100px">
                               </div>
                           </div>
    
                        </div> </div></div></div>
    [/weather-block] 

Поддержать сайт!

Все собранные средства пойдут на развитие сайта.

Ctrl
Enter
Заметили ошЫбку?
Выделите текст и нажмите Ctrl+Enter
Мы в

Комментарии

Минимальная длина комментария - 50 знаков. комментарии модерируются
  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги
Комментариев еще нет. Вы можете стать первым!

Политика конфиденциальности

Сайт использует идентификационные файлы cookies для хранения информации. «Cookies» представляют собой файлы, которые могут использоваться сайтом для идентификации посетителей... Больше информации