My CSS & JS with weather for OpenWeatherMap or Prevision-meteo.ch

[Ptifredy]

Weather icons copy to folder /www/icons/icons-weather
icons-weather.zip

CSS config-buttons from #1428
JS Weather based on #1281

JS for OpenWeatherMap (need API KEY) OR prevision-meteo.ch -> locality in Switzerland, France and Belgium only
Possible change Title & Favicon (JS)

// CSS //

@import url('https://fonts.cdnfonts.com/css/neo-sans-std-tr');
html {
  font-family : 'Neo Sans Std Medium TR' !important;
}

.userlist {
  font-size: 20px;
}

.userlist #password {
  color: #2f313a;
  margin: 15px 15px;
  padding: 5px 5px;
  width: auto;
  border-radius: 5px
}

.userlist .user {
  flex-direction: row;
  border: 4px solid hsla(47, 99%, 46%);
}

textarea {
  font-family: monospace, monospace !important;
  font-size: 10px;
}

.taglist {
  padding-top: 15px;
}

/* Config button style */
#config-buttons {
  z-index: 1;
  position: fixed;
  bottom: 50%;
  transform: translateY(50%);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: var(--button-shadow, rgba(0, 0, 0, 0.3)) -1px 0 20px 5px;
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.6), rgba(20, 20, 20, 0.4));
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
  
#config-buttons a {
  background: none;
  outline: none;
}
  
#config-buttons a:focus {
  outline: 2px dashed rgba(255, 255, 255, 0.8);
  outline-offset: 4px;
}
  
#config-buttons a svg {
  transition: all 0.1s ease-in-out;
  color: rgba(255, 255, 255, 0.5);
}
  
#config-buttons a:hover svg {
  transform: scale(1.15) rotate(10deg);
  color: rgba(255, 255, 255, 0.95);
}
  

.searchform {
  margin: 14px auto;
  padding: 10px;
  border-radius: 10px;
}

#sortable.tags {
  padding: 5px !important;
}

#app {
  background-attachment: fixed;
}

#app #sortable.categories .category {
  margin: 5px;
}

#app #sortable.categories .category>.title a {
  color: #f5f5dc;
  /* font-family : Neo Sans Std Medium TR; */
  font-size: 19pt;
  text-shadow: #000 1px 1px, #000 -1px 1px, #000 -1px -1px, #000 1px -1px;
}

.app-icon-container {
  margin-right: 5px;
}

.app-icon {
  filter: drop-shadow(0px 0px 3px #2E2E2E);
}

.details > .title {
  font-weight : 375 ;
  font-size : 1.1em !important ;
  font-family : Neo Sans Std Medium TR;
  text-shadow : rgba(10, 0, 60, 0.25) 1px 0 5px ;
  transition : all 0.25s ease-in-out ;
}
.item :hover .details > .title {
  border-shadow : -1px -1px 1px rgba(100,175, 250, 0.1), 1px 1px 5px rgba(10, 0, 60, 0.2) ;
}

.item {
  border: 3px solid #EDBA01;
  background-image: linear-gradient(270deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .25)) !important;
  width: 360px;
  margin: 10px;
}

.item:hover {
  filter: drop-shadow(0 0 0.75rem crimson);
  background-color: #191970 !important;
  transition-duration:0.5s;
  color: #000 !important;
}

.item:after {
  height: 84px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
  border-radius: 0px;
}

.livestats-container .livestats strong {
  font-family : Neo Sans Std Medium TR;
}

.tooltip {
  background: rgb(30 0 108 / 78%);
  padding: 15px;
  bottom: 100px;
}


/* Header style */
.headerInfos {
  visibility: hidden;
  z-index: 100;
  margin: 0;
  background-color:rgba(19, 19, 57, 0.8);
  height: 30px;
  left: 0;
  right: 0;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
}

.divDate {
  z-index: 100;
  order: 1;
  display: flex;
  align-items: center;
}

.divDate, .meteo {
  padding: 3px 5px;
}

.horloge, .ladate {
  display: inline-block;
  margin-right: 10px;
  font-size: 1.4em;
}

.IconMeteo {
  height: 44px;
  margin-top: -9px;
  filter: drop-shadow(0px 0px 3px #FFFFFF);
  transition-property: all;
  transition-duration: 2s;
  transition-delay: 1s;
}

.meteo {
  order: 2;
  display: flex;
  justify-content: space-between;
  font-size: 1.1em;
  margin-top: -2px;
}

.horloge, .ladate, .meteo {
  color: beige;
  text-shadow: #5C5C5C 1px 1px, #5C5C5C -1px 1px, #5C5C5C -1px -1px, #5C5C5C 1px -1px;
}

.TooltipWeather {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 100%;
  text-shadow: 1px 1px 1px #000;
  text-align: justify;
}

.TooltipWeather span {
  visibility: hidden;
  transition:visibility 0.5s linear,opacity 0.5s linear;
  position: fixed;
  top: 30px;
  right: 3px;
  z-index: 0;
  padding: 5px;
  border: 2px solid #5C6962;
  background: rgb(9,9,121);
  background: linear-gradient(220deg, rgba(9,9,121,1) 30%, rgba(0,212,255,1) 100%);
  border-radius: 5px;
  opacity: 0;
}

.TooltipWeather:hover span {
  visibility: visible;
  opacity: 0.97;
  transition: opacity 1s;
}

.TooltipWeatherTD {
  color: #fff;
  font-size: 1.1em;
  text-shadow: #000 1px 1px, #000 -1px 1px, #000 -1px -1px, #000 1px -1px;
  font-weight: bold;
}

.TooltipWeatherImg {
  margin-top: -9px;
  margin-right: -10px;
  margin-left: 0;
  filter: drop-shadow(0 0 5px #000);
}

---

// JS for OpenWeatherMap //

const Link = window.location.origin;

// Change Title
// document.title = "My Apps"; 

// Change favicon
// document.querySelectorAll("link[rel='icon']")[0].setAttribute("href", `${Link}/storage/icons/favicon/favicon-192x192.png`);
// document.querySelectorAll("link[rel='icon']")[1].setAttribute("href", `${Link}//storage/icons/favicon/favicon-32x32.png`);
// document.querySelectorAll("link[rel='icon']")[2].setAttribute("href", `${Link}//storage/icons/favicon/favicon-96x96.png`);
// document.querySelectorAll("link[rel='icon']")[3].setAttribute("href", `${Link}//storage/icons/favicon/favicon-16x16.png`);

const sortableElement = document.querySelector('.appheader');

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function createAndInsertDiv(className, referenceNode) {
  var newDiv = document.createElement("div");
  newDiv.classList.add(className);
  referenceNode.appendChild(newDiv);
  return newDiv;
}

function mps_to_kmph(mps) 
{  
  return Math.round(3.6 * mps) ; 
} 
  
if (sortableElement) {
  // Création de la div parente 'headerInfos'
  var headerInfos = document.createElement('div');
  headerInfos.classList.add('headerInfos');
  insertAfter(sortableElement, headerInfos);

  // Création de la div 'divDate' à l'intérieur de 'headerInfos'
  var divDate = createAndInsertDiv('divDate', headerInfos);

  // Création des éléments <div> pour la date et l'heure à l'intérieur de 'divDate'
  var timeDiv = createAndInsertDiv('horloge', divDate);
  var dateDiv = createAndInsertDiv('ladate', divDate);

  // Création de la div 'meteo' à l'intérieur de 'headerInfos'
  var meteoDiv = createAndInsertDiv('meteo', headerInfos);

  function afficherDateHeure() {
    const maintenant = new Date();

    const optionsJour = {
      weekday: 'long'
    };

    const optionsHeure = {
      hour: 'numeric',
      minute: 'numeric'
    };

    const optionsDate = {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    };

    const jourFormatted = maintenant.toLocaleDateString(undefined, optionsJour);
    const dateFormatted = maintenant.toLocaleDateString(undefined, optionsDate);
    const heureFormatted = maintenant.toLocaleTimeString(undefined, optionsHeure);

    // Effacer le contenu des éléments pour éviter l'accumulation des éléments
    dateDiv.innerHTML = '';

    // Insérer le jour de la semaine dans la balise <span> de la classe '.ladate'
    var spanJourSemaine = document.createElement('span');
    spanJourSemaine.textContent = jourFormatted;
    // dateDiv.appendChild(spanJourSemaine);

    // Insérer l'heure sans les secondes dans '.horloge'
    timeDiv.textContent = heureFormatted;

    // Insérer le reste de la date en dehors de la balise <span>
    dateDiv.appendChild(document.createTextNode(dateFormatted));
  }

  function afficherMeteo() {
    // Obtenir la géolocalisation de l'utilisateur (exemple ici avec une valeur statique)
    const latitude = 48.853; // Latitude de la ville (exemple pour Paris)
    const longitude = 2.349; // Longitude de la ville (exemple pour Paris)
    const apiKey = 'YOUR API KEY HERE'; // Remplacez ceci par votre clé API OpenWeatherMap
    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric&lang=fr`)
      .then(response => response.json())
      .then(data => {
        const temperature = Math.round(data.main.temp); // Arrondir la température à l'entier le plus proche
      	const ville = data.name;
        const icon = data.weather[0].icon;
        var description = data.weather[0].description;
        description = description.charAt(0).toUpperCase() + description.slice(1);

	let compassSector = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSO", "SO", "OSO", "O", "OO", "NO", "NNO", "N"];
	WindDirection = compassSector[(data.wind.deg / 22.5).toFixed(0)];

        // Affichage de la météo dans la div 'meteo'
        // Icons from https://github.com/basmilius/weather-icons
        console.log(description)
        meteoDiv.innerHTML = `<a class="TooltipWeather"><span id="TooltipWeather"></span><div class="meteo"><img class="IconMeteo" src="${Link}/storage/icons/icons-weather/${icon}.svg">${ville} ${temperature}°C - ${description}</div></a>`; document.getElementById("TooltipWeather").innerHTML = `<table cellpadding="0" cellspacing="0" style="width: 300px;"><tr><td rowspan="3" style="text-align: center"><img class="TooltipWeatherImg" style="margin-bottom: -10px;height: 75px;" src="${Link}/storage/icons/icons-weather/${icon}.svg"></td><td style="text-align: center;height: 20px;"><img class="TooltipWeatherImg" style="margin-bottom: -12px;height: 170%" src="${Link}/storage/icons/icons-weather/humidity.svg"></td><td class="TooltipWeatherTD">${data.main.humidity} %</td></tr><tr><td style="text-align: center; height: 20px;"><img class="TooltipWeatherImg" style="margin-bottom: -6px;height: 130%" src="${Link}/storage/icons/icons-weather/wind.svg"></td><td class="TooltipWeatherTD">${WindDirection} à ${mps_to_kmph(data.wind.speed)} Km/h</td></tr><tr><td style="text-align: center; height: 20px;"><img class="TooltipWeatherImg" style="margin-bottom: -7px;height: 130%" src="${Link}/storage/icons/icons-weather/barometer.svg"></td><td class="TooltipWeatherTD">${data.main.pressure} hPa</td></tr></table>`;
      })
      .catch(error => {
        console.error('Erreur lors de la récupération des données météo', error);
        meteoDiv.textContent = '⚠️';
      });
  }

  // Appel initial pour afficher la date, l'heure et la météo
  if (window.location.pathname != '/login') {
      document.getElementsByClassName("headerInfos")[0].style.visibility = "visible";
      afficherDateHeure();
      afficherMeteo();
  }

  // Mettre à jour l'heure toutes les secondes
  if (window.location.pathname != '/login') {
      setInterval(afficherDateHeure, 1000);
      setInterval(afficherMeteo, 3600000);
  }
}

// Optimize textare CSS & JS
if (window.location.pathname === '/settings/edit/10' || window.location.pathname === '/settings/edit/11') {
     document.getElementsByClassName("form-control")[0].cols = "61";
     document.getElementsByClassName("form-control")[0].rows = "20";
}

---

OR

// JS for prevision-meteo.ch -> locality in Switzerland, France and Belgium only //

const Link = window.location.origin;

// Change Title
// document.title = "My Apps"; 

// Change favicon
// document.querySelectorAll("link[rel='icon']")[0].setAttribute("href", `${Link}/storage/icons/favicon/favicon-192x192.png`);
// document.querySelectorAll("link[rel='icon']")[1].setAttribute("href", `${Link}//storage/icons/favicon/favicon-32x32.png`);
// document.querySelectorAll("link[rel='icon']")[2].setAttribute("href", `${Link}//storage/icons/favicon/favicon-96x96.png`);
// document.querySelectorAll("link[rel='icon']")[3].setAttribute("href", `${Link}//storage/icons/favicon/favicon-16x16.png`);

// Icons from https://github.com/basmilius/weather-icons
const sortableElement = document.querySelector('.appheader');

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function createAndInsertDiv(className, referenceNode) {
  var newDiv = document.createElement("div");
  newDiv.classList.add(className);
  referenceNode.appendChild(newDiv);
  return newDiv;
}

if (sortableElement) {
  // Création de la div parente 'headerInfos'
  var headerInfos = document.createElement('div');
  headerInfos.classList.add('headerInfos');
  insertAfter(sortableElement, headerInfos);

  // Création de la div 'divDate' à l'intérieur de 'headerInfos'
  var divDate = createAndInsertDiv('divDate', headerInfos);

  // Création des éléments <div> pour la date et l'heure à l'intérieur de 'divDate'
  var timeDiv = createAndInsertDiv('horloge', divDate);
  var dateDiv = createAndInsertDiv('ladate', divDate);

  // Création de la div 'meteo' à l'intérieur de 'headerInfos'
  var meteoDiv = createAndInsertDiv('meteo', headerInfos);

  function afficherDateHeure() {
    const maintenant = new Date();

    const optionsJour = {
      weekday: 'long'
    };

    const optionsHeure = {
      hour: 'numeric',
      minute: 'numeric'
    };

    const optionsDate = {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    };

    const jourFormatted = maintenant.toLocaleDateString(undefined, optionsJour);
    const dateFormatted = maintenant.toLocaleDateString(undefined, optionsDate);
    const heureFormatted = maintenant.toLocaleTimeString(undefined, optionsHeure);

    // Effacer le contenu des éléments pour éviter l'accumulation des éléments
    dateDiv.innerHTML = '';

    // Insérer le jour de la semaine dans la balise <span> de la classe '.ladate'
    var spanJourSemaine = document.createElement('span');
    spanJourSemaine.textContent = jourFormatted;
    // dateDiv.appendChild(spanJourSemaine);

    // Insérer l'heure sans les secondes dans '.horloge'
    timeDiv.textContent = heureFormatted;

    // Insérer le reste de la date en dehors de la balise <span>
    dateDiv.appendChild(document.createTextNode(dateFormatted));
  }

  function afficherMeteo() {
    const location = 'paris';
    fetch(`https://www.prevision-meteo.ch/services/json/${location}`)
      .then(response => response.json())
      .then(data => {
      	const Ville = data.city_info.name;
        const Temperature = data.current_condition.tmp;
        const Icon = data.current_condition.condition_key;
        const Condition = data.current_condition.condition;
        const WindDirection = data.current_condition.wnd_dir;
        const WindSpeed = data.current_condition.wnd_spd;
        const Humidity = data.current_condition.humidity;
        const Pressure = data.current_condition.pressure;
        const Sunrise = data.city_info.sunrise;
        const Sunset = data.city_info.sunset;

        // Affichage de la météo dans la div 'meteo'
        console.log(Condition)
        meteoDiv.innerHTML = `<a class="TooltipWeather"><span id="TooltipWeather"></span><div class="meteo"><img class="IconMeteo" src="${Link}/storage/icons/icons-weather/${Icon}.svg">${Ville} ${Temperature}°C - ${Condition}</div></a>`;
 		document.getElementById("TooltipWeather").innerHTML = `<table cellpadding="0" cellspacing="0" style="width: 350px;"><tr><td rowspan="5" style="width: 80px; text-align: center"><img class="TooltipWeatherImg" style="margin-right: -1px; margin-bottom: -15px;height: 120px;" src="${Link}/storage/icons/icons-weather/${Icon}.svg"></td><td style="text-align: center;height: 20px;"><img class="TooltipWeatherImg" style="margin-bottom: -12px;height: 170%" src="${Link}/storage/icons/icons-weather/humidity.svg"></td><td class="TooltipWeatherTD">${Humidity} %</td></tr><tr><td style="text-align: center; height: 20px;"><img class="TooltipWeatherImg" style="margin-bottom: -6px;height: 130%" src="${Link}/storage/icons/icons-weather/wind.svg"></td><td class="TooltipWeatherTD">${WindDirection} à ${WindSpeed} Km/h</td></tr><tr><td style="text-align: center; height: 20px;"><img class="TooltipWeatherImg" style="margin-bottom: -6px;height: 130%" src="${Link}/storage/icons/icons-weather/barometer.svg"></td><td class="TooltipWeatherTD">${Pressure} hPa</td></tr><tr><td style="text-align: center; height: 20px;"><img class="TooltipWeatherImg" style="margin-bottom: -9px;height: 130%" src="${Link}/storage/icons/icons-weather/sunrise.svg"></td><td class="TooltipWeatherTD">${Sunrise}</td></tr><tr><td style="text-align: center; height: 20px;"><img class="TooltipWeatherImg" style="margin-bottom: -9px;height: 130%" src="${Link}/storage/icons/icons-weather/moonrise.svg"></td><td class="TooltipWeatherTD">${Sunset}</td></tr></table>`;
      })
      .catch(error => {
        console.error('Erreur lors de la récupération des données météo', error);
        meteoDiv.textContent = '⚠️';
      });
  }

  // Appel initial pour afficher la date, l'heure et la météo
  if (window.location.pathname != '/login') {
      document.getElementsByClassName("headerInfos")[0].style.visibility = "visible";
      afficherDateHeure();
      afficherMeteo();
  }

  // Mettre à jour l'heure toutes les secondes
  setInterval(afficherDateHeure, 1000);
  setInterval(afficherMeteo, 3600000);
}

if (window.location.pathname === '/settings/edit/10' || window.location.pathname === '/settings/edit/11') {
     document.getElementsByClassName("form-control")[0].cols = "61";
     document.getElementsByClassName("form-control")[0].rows = "20";
}