Dash
Items
public
Switch User
Angepasstes CSS
Speichern
Abbrechen
.item { background-color: rgba(0,0,0,0.4) !important; border: 1px solid rgba(180, 180, 180, 0.8); border-radius: 0px; } .item:after{ box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5) !important; border-radius: 0px !important; } .headerInfos { display: flex; justify-content: space-between; /* Pour espacer les éléments */ margin: 20px; } .divDate { order: 1; display: flex; /* Utilisation de flexbox pour aligner les éléments verticalement */ align-items: center; /* Alignement vertical au centre */ } .divDate, .meteo { background-color: rgba(23, 42, 75, 0.1); border-radius: 10px; /* Coins arrondis */ box-shadow: inset 0 1px 2px 0 rgba(0,0,0,.2); padding: 10px 20px; /* Padding de 10px à gauche et à droite */ } .horloge, .ladate { display: inline-block; /* Affichage en ligne pour positionner les éléments côte à côte */ margin-right: 10px; /* Marge entre les éléments */ } .ladate span { display: block; /* Affichage en bloc pour le span contenant le nom du jour */ /* Supprimer la marge entre le span et le reste du texte */ margin-bottom: 0; /* Ajustement pour supprimer l'espacement */ } .horloge { font-size: 3em; } .temperature { font-size: 2.5em; } .horloge, .ladate,.temperature { font-weight: bold; } .meteo { order: 2; display: flex; flex-direction: column; } .ville-temp-container { display: flex; justify-content: space-between; } .temperature { padding-right: 50px; } .icon { margin-top: 5px; } .horloge, .ladate, .temperature, .ville, .description { color: white; } span.ville { padding-right: 50px; } Angepasstes JavaScript 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); 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)); } afficherDateHeure(); setInterval(afficherDateHeure, 1000); } Home Dashboard Nutzer Anwendungsliste Tags Liste Einstellungen
Home Dashboard
Anwendungsliste
Tags Liste
Einstellungen