Design minimaliste mono page pour afficheur horloge / température - Marche à suivre?

Zygo · Janvier 6, 2024, 9:02

Bonjour à tous.

L’origine du besoin est ma frustration de ne pas trouver sur le marché d’afficheur de température intérieure et extérieure que je trouve beau et lisible à 3 à 4m de distance.
Possédant une station NETATAMO et plusieurs sondes, je ne comprends pas pourquoi ils n’ont pas proposé un afficheur en option, je suis convaincu que ça se vendrait.

But : connaitre l’heure et les températures intérieures et extérieures à tout moment depuis des emplacements stratégiques de mon domicile (Canapé, Cuisine, entrée, chambre, Salle d’eau).

Pour y parvenir, je dois travailler sur le design (objectif de ce post) et sur le hardware (pour l’instant réutilisation de vieux smartphones android) mais pourquoi pas plus tard utiliser des écrans E-Link pour les zones éclairées en permanence et petit écran ultra large type monitoring de PC Gamer (mais je n’en suis pas du tout à ce stade)

Pour mon design, je viens de me manger des tutos Widget/Design, j’ai installé des plugins, mais là je suis à un stade où je me sens perdu. Je dois un peu saturer, je mélange un peu tout et ai l’impression de ne plus rien comprendre (pas sûr d’ailleurs que ce ne soit qu’une impression).
Les plugins ou pack de widget sont très bien, il y a eu un gros travail de fait, mais je ne parviens pas à les mettre à ma main. Sur l’excellent « Pimp My Jeedom » de @Salvialf, sur la partie horloge je n’arrive pas enlever l’année (je préfèrerais du ddd XX mmm).
J’ai essayé directement depuis le design en récupérant un widget de virtuel, mais il n’est pas possible de changer la police.

Donc dans un 1er temps, je me suis concentrer sur le visuel que je souhaite obtenir.
Ensuite j’imagine qu’il faudra coder 4 widgets (Date, Heure, Temp Int, Temp Ext) et enfin les agencer dans un joli design fond noir à la taille de l’écran cible.
Bon j’ai déjà le design cible et un début de premier widget sans mise en forme (virtuel que j’ai créer à partir de mon équipement et pour lequel j’ai déjà galérer pour conserver le zéro après le point).

Je ne sais donc pas par quel bout m’y prendre pour designer ce 1er Widget (Temp_Int) sachant que J’ai 4 critères spécifiques :

2 polices spéciales (celle des chiffres « square deal regular » n’affiche pas les majuscules ni les caractères spéciaux) donc utilisation en plus de « Agency FB »)
Taille différente pour la partie post décimale de la variable (ça implique donc de décomposer la variable)
3 couleurs différentes

Mon widget pour l’instant ressemble à ça :

Donc il y a encore du boulot

Si quelqu’un passe par ici avec une boussole, une carte routière voire un GPS, je suis preneur

Furaxworld · Janvier 6, 2024, 10:52

Pour l’horloge avec le plugin-htmldisplay

 <html>
 <head>
 <style type="text/css"> html { font-family: 'Open Sans', Arial, sans-serif; } a { text-decoration: none; color: #000; } div.clock { cursor: pointer; width: 100%; text-align: center; } div.clock a { color: #333; font-size: 18px; font-weight: bold; text-decoration: none; } div.clock.small a { } div.clock.medium a { } div.clock.large a { } div.clock a:hover { text-decoration: underline; } div.clock div.date { color: #777; margin: 0 0 10px 0; } div.clock.small div.date { font-size: 1.0em; } div.clock.medium div.date { font-size: 1.25em; } div.clock.large div.date { font-size: 1.5em; } div.clock div.time { font-weight: 200; } div.clock.small div.time { font-size: 1.5em; } div.clock.medium div.time { font-size: 2.25em; } div.clock.large div.time { font-size: 3em; } div.clock div.time span { border-radius: 5px; padding: 1px 4px 3px 4px; color: #fff; /* fallback */ background: #000; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#000)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #555, #000); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #555, #000); /* IE 10 */ background: -ms-linear-gradient(top, #555, #000); /* Opera 11.10+ */ background: -o-linear-gradient(top, #555, #000); } div.clock div.time span:nth-child(3) { color: #333; /* fallback */ background: #ddd; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #eee, #ccc); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #eee, #ccc); /* IE 10 */ background: -ms-linear-gradient(top, #eee, #ccc); /* Opera 11.10+ */ background: -o-linear-gradient(top, #eee, #ccc); } div.clock div.time strong { color: #666; font-weight: 100; font-size: 0.8em; margin-left: 5px; } div.clock.small div.time strong { } div.clock.medium div.time strong { } div.clock.large div.time strong { } </style>
 </head>
 <body>
 <div class="clock large" id="clock"> <div class="time"><span class="hour">16</span>:<span class="minute">40</span></div> </div>  
 <script type="text/javascript"> $(document).ready(function() { $("div#clock").simpleClock(1); }); (function ($) { $.fn.simpleClock = function ( utc_offset ) { 
     var language = "fr"; switch (language) { case "de": var weekdays = ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."]; var months = ["Jan.", "Feb.", "Mär.", "Apr.", "Mai", "Juni", "Juli", "Aug.", "Sep.", "Okt.", "Nov.", "Dez."]; break; case "es": var weekdays = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"]; var months = ["Ene", "Feb", "Mar", "Abr", "Mayo", "Jun", "Jul", "Ago", "Sept", "Oct", "Nov", "Dic"]; break; case "fr": var weekdays = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"]; var months = ["Jan", "Fév", "Mars", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov", "Déc"]; break; default: var weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; var months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; break; } var clock = this; function getTime() { 
       var date = new Date();
  		date.setTime((new Date).getTime() + ((new Date).getTimezoneOffset() + jeeFrontEnd.serverTZoffsetMin) * 60000 + jeeFrontEnd.clientServerDiffDatetime)
        var nowUTC = date; var hour = date.getHours(); if ( language == "en" ) { suffix = (hour >= 12)? 'p.m.' : 'a.m.'; hour = (hour > 12)? hour -12 : hour; hour = (hour == '00')? 12 : hour; } return { day: weekdays[date.getDay()], date: date.getDate(), month: months[date.getMonth()], year: date.getFullYear(), hour: appendZero(hour), minute: appendZero(date.getMinutes()), second: appendZero(date.getSeconds()) }; } function appendZero(num) { if (num < 10) { return "0" + num; } return num; } function refreshTime(clock_id) { var now = getTime(); clock = $.find('#'+clock_id); $(clock).find('.date').html(now.day + ', ' + now.date + '. ' + now.month + ' ' + now.year); $(clock).find('.time').html("<span class='hour'>" + now.hour + "</span>:<span class='minute'>" + now.minute + "</span>"); if ( typeof(suffix) != "undefined") { $(clock).find('.time').append('<strong>'+ suffix +'</strong>'); } } var clock_id = $(this).attr('id'); refreshTime(clock_id); setInterval( function() { refreshTime(clock_id) }, 1000); }; })(jQuery); </script>
 </body>
 </html>

Zygo · Janvier 7, 2024, 10:15

Merci pour ton exemple.
J’ai pu voir que j’avais mal rédigé mon post et que mes screens shots n’apparaissaient pas.
Si ton design ne correspond pas vraiment à ce que je veux faire, il reste néanmoins relativement sobre et dans l’esprit de ce que je veux faire.
La partie la plus intéressante pour moi est le fait que tu m’ais parlé du plugin « HTMLdisplay »
J’ai essayé avec ton code et ça a fonctionné.

J’ai essayé de modifier certains paramètres (font, taille de fonte,…) et là je ne vois pas de changements apparaitre. Je pense que ce code est trop compliqué pour moi à ce jour. Je suis un vrai noob en dev.

Je suis donc en pleine conversation avec mon copain Chat-GPT qui m’explique pas à pas comment coder en html. Je commence avec l’horloge et pour l’instant le code est plutôt « simple ».

Merci encore pour cette orientation

Furaxworld · Janvier 7, 2024, 10:20

 <html>
 <head>
 <style type="text/css"> html { font-family: 'Open Sans', Arial, sans-serif; } a { text-decoration: none; color: #000; } div.clock { cursor: pointer; width: 100%; text-align: center; } div.clock a { color: #333; font-size: 18px; font-weight: bold; text-decoration: none; } div.clock.small a { } div.clock.medium a { } div.clock.large a { } div.clock a:hover { text-decoration: underline; } div.clock div.date { color: #777; margin: 0 0 10px 0; } div.clock.small div.date { font-size: 1.0em; } div.clock.medium div.date { font-size: 1.25em; } div.clock.large div.date { font-size: 1.5em; } div.clock div.time { font-weight: 200; } div.clock.small div.time { font-size: 1.5em; } div.clock.medium div.time { font-size: 2.25em; } div.clock.large div.time { font-size: 3em; } div.clock div.time span { border-radius: 5px; padding: 1px 4px 3px 4px; color: #fff; /* fallback */ background: #000; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#000)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #555, #000); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #555, #000); /* IE 10 */ background: -ms-linear-gradient(top, #555, #000); /* Opera 11.10+ */ background: -o-linear-gradient(top, #555, #000); } div.clock div.time span:nth-child(3) { color: #333; /* fallback */ background: #ddd; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #eee, #ccc); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #eee, #ccc); /* IE 10 */ background: -ms-linear-gradient(top, #eee, #ccc); /* Opera 11.10+ */ background: -o-linear-gradient(top, #eee, #ccc); } div.clock div.time strong { color: #666; font-weight: 100; font-size: 0.8em; margin-left: 5px; } div.clock.small div.time strong { } div.clock.medium div.time strong { } div.clock.large div.time strong { } </style>
 </head>
 <body>
 <div class="clock large" id="clock"> <div class="date">Jeu, 1. Déc 2022</div> <div class="time"><span class="hour">16</span>:<span class="minute">40</span></div> </div>
 <script type="text/javascript"> $(document).ready(function() { $("div#clock").simpleClock(1); }); (function ($) { $.fn.simpleClock = function ( utc_offset ) { var language = "fr"; switch (language) { case "de": var weekdays = ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."]; var months = ["Jan.", "Feb.", "Mär.", "Apr.", "Mai", "Juni", "Juli", "Aug.", "Sep.", "Okt.", "Nov.", "Dez."]; break; case "es": var weekdays = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"]; var months = ["Ene", "Feb", "Mar", "Abr", "Mayo", "Jun", "Jul", "Ago", "Sept", "Oct", "Nov", "Dic"]; break; case "fr": var weekdays = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"]; var months = ["Jan", "Fév", "Mars", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov", "Déc"]; break; default: var weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; var months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; break; } var clock = this; function getTime() { var date = new Date(); var nowUTC = date.getTime() + date.getTimezoneOffset()*60*1000; date.setTime( nowUTC + (utc_offset*60*60*1000) ); var hour = date.getHours(); if ( language == "en" ) { suffix = (hour >= 12)? 'p.m.' : 'a.m.'; hour = (hour > 12)? hour -12 : hour; hour = (hour == '00')? 12 : hour; } return { day: weekdays[date.getDay()], date: date.getDate(), month: months[date.getMonth()], year: date.getFullYear(), hour: appendZero(hour), minute: appendZero(date.getMinutes()), second: appendZero(date.getSeconds()) }; } function appendZero(num) { if (num < 10) { return "0" + num; } return num; } function refreshTime(clock_id) { var now = getTime(); clock = $.find('#'+clock_id); $(clock).find('.date').html(now.day + ', ' + now.date + '. ' + now.month + ' ' + now.year); $(clock).find('.time').html("<span class='hour'>" + now.hour + "</span>:<span class='minute'>" + now.minute + "</span>"); if ( typeof(suffix) != "undefined") { $(clock).find('.time').append('<strong>'+ suffix +'</strong>'); } } var clock_id = $(this).attr('id'); refreshTime(clock_id); setInterval( function() { refreshTime(clock_id) }, 1000); }; })(jQuery); </script>
 </body>
 </html>

Zygo · Janvier 7, 2024, 3:03

Pour l’instant je pense que dans mon cas, il faut travailler bloc par bloc.
ça me permet de comprendre petit à petit comment fonctionne le code.

voici donc où j’en suis avec une simple horloge :

<!DOCTYPE html>
<html>
<head>
    <style>
        #rectangle {
            width: 200px;
            height: 100px;
            background-color: black;
            color: white;
            font-family: 'square deal';
            font-size: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="rectangle"></div>

    <script>
        function updateTime() {
            var date = new Date();
            <!-- la fonction <padStart(2, '0')> permet de rajouter un 0 devant le chiffre lorsque le nombre d'heures ou minutes est <10 --> 
            var hours = String(date.getHours()).padStart(2, '0');
            var minutes = String(date.getMinutes()).padStart(2, '0');
            <!-- <var time = hours + ":" + minutes;> = recomposition de la trame avec insertion de ":" entres les H et les Min  -->
            var time = hours + ":" + minutes;
            document.getElementById('rectangle').innerHTML = time;
        }
        setInterval(updateTime, 1000);

Et ça donne donc ça :

La police « Square deal » ne passe pas sous jeedom alors qu’elle est bien installée sur mon PC et que mon code fonctionne sur l’editeur HTML que j’utilse. J’imagine que c’est parceque cette police n’est pas installée sous Jeedom.
Chose interessante c’est qu’elle a été remplacée par une autre sans que j’ai eu à le coder.
J’ai tester avec la « Agency FB » que j’avais utilisé pour la partie alphabétique sur le 1er visuel en intro de mon topic. Visiblement cette dernière est reconnue sous Jeedom.

Il va donc falloir que je me penche sur la méthode pour rajouter une police dans Jeedom.
Via le site web Font Squirrel qui propose de générer des polices WebFont , j’ai pu faire un CSS avec cette police, mais à cette heure, je ne sais pas quoi faire. Je vais donc continuer mes explorations

anon53349806 · Janvier 7, 2024, 3:09

Ce que tu souhaites c’est ca :

Zygo · Janvier 7, 2024, 3:12

Oui, je voudrais faire qulque chose qui ressemble à ça.
Il s’agit d’un visuel que j’ai fait hier via powerpoint.

Pour l’instant je décompose, ça me permet de comprendre un peu et j’attaque par ce qui me semble le plus facile : l’heure (pas de variable à aller chercher sur Jeedom), après ça risque de se compliquer

Furaxworld · Janvier 7, 2024, 4:02

@anon53349806 va te sortir un beau code tout propre

anon53349806 · Janvier 7, 2024, 5:29

Moqueur. Je suis incapable de coder ca.
Lol

Zygo · Janvier 7, 2024, 10:43

Bon ça avance un petit peu

<!DOCTYPE html>
<html>
<head>
    <style>
        #rectangle {
            width: 200px;
            height: 100px;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .time {
            font-family: 'Agency FB';
            font-size: 60px;
        }
        .hours {
            color: white;
        }
        .minutes {
            color: grey;
        }
    </style>
</head>
<body>
    <div id="rectangle">
        <span id="hours" class="time hours"></span>
        <span id="minutes" class="time minutes"></span>
    </div>

    <script>
        function updateTime() {
            var date = new Date();
            var hours = String(date.getHours()).padStart(2, '0');
            var minutes = String(date.getMinutes()).padStart(2, '0');
            document.getElementById('hours').innerHTML = hours;
            document.getElementById('minutes').innerHTML = minutes;
        }
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

Par contre je n’ai pas réussi à changer la police pour passer sur ma « square deal » qui fonctionne bien sur mon PC lorsque je teste le code dans mon éditeur HTML

Pourtant j’ai bien rajouter les polices dans l’editeur de fichiers de Jeedom, que ce soit en rajoutant le fichier ttf directement à la racine du dossier data/fonts/ ou en enregistrant directement le dossier dézippé de la police lorsque je l’ai récupéré (j’ai lu ici ces 2 procédures sur des posts de @Salvialf

J’ai essayé en appelant ma police ‹ square deal › (c’est ainsi que je l’appelle sur mon editeur html avec le même fichier ttf enregistré sur mon PC win 11). J’ai aussi essayé avec ‹ square-deal › ; ‹ square-deal-regular › ; avec et sans tiret et ça ne change rien.

Si quelqu’un a une idée, je suis preneur.

Furaxworld · Janvier 8, 2024, 7:17

<!DOCTYPE html>
<html>
<head>
    <style>
          @font-face {
      font-family: "square";
      src: url("data/fonts/square-deal.ttf") format("truetype");
    }
      
        #rectangle {
            width: 200px;
            height: 100px;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .time {
            font-family: 'square';
            font-size: 60px;
        }
        .hours {
            color: white;
        }
        .minutes {
            color: grey;
        }
    </style>
</head>
<body>
    <div id="rectangle">
        <span id="hours" class="time hours"></span>
        <span id="minutes" class="time minutes"></span>
    </div>

    <script>
        function updateTime() {
            var date = new Date();
            var hours = String(date.getHours()).padStart(2, '0');
            var minutes = String(date.getMinutes()).padStart(2, '0');
            document.getElementById('hours').innerHTML = hours;
            document.getElementById('minutes').innerHTML = minutes;
        }
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

Zygo · Janvier 8, 2024, 8:49

Merci ça fonctionne.
J’ai fait un peu de menage dans data/fonts en enlevant le dossier et en ne laissant que le fichier ttf que j’avais déposé (ainsi qu’un autre fichier qui est contenu d’origine).

Au début ça n’a pas fonctionné en rajoutant juste la procédure pour aller chercher la police et en remplaçant le Agency FB par square, même apres réactualisation de la page.

J’ai donc créé un 3e Widget test dans lequel j’ai copier coller entièrement ton code. Après sauvegarde et réactualisation de la page, il n’y a pas d’heure qui apparait sur la page mais, Ô miracle, le widget que j’vais modifié juste avant s’est mis à afficher la police WTF ???
Et chose encore plus hallucinante, la police du 1er Widget que tu m’as envoyé s’est transformer toute seule, sans que je ne modifie ton code. J’ai d’ailleurs refait un copier/coller pour m’assurer que je ne l’avais pas altéré par inadvertance.

Bon je ne vais pas trop m’attarder sur chaque phénomène dont je n’ai pas l’explication et essayer de rester focus sur l’objectif.

Merci encore

Zygo · Janvier 8, 2024, 9:45

On pourrait considérer que ma 1ère brique « Horloge » est maintenant terminée.
Mon idée étant d’intégrer chacun des widgets dans mon design, je viens d’essayer avec ce premier (W_Test_Horloge2) pour vérifier que ça fonctionne bien.

Et bien ça fonctionne un peu mais pas totalement :

Le widget passe bien (importé en tant qu’équipement dans le design) mais la police ne passe pas même après rafraichissement et sortie du mode edition.

Par contre en essayant d’importer le W_Test_Hologe3 avec le code entier de @Furaxworld (qui n’affiche rien dans le widget et c’est incompréhensible), je vois que mon widget s’est réactualisé avec la bonne police. Yessss !!!

Malheureusement dès que je supprime le v3, la police revient comme sur le 1er screenshot

pommedapi · Janvier 9, 2024, 12:33

Je n’ai pas fait de HTML/CSS depuis un temps inavouable, mais à vue de nez, il me semble que c’est une histoire d’importation des polices.

Le code de Furaxworld importe la police square-deal.ttf

Ton code… ? Si la réponse est non, ben… dès que le code de Furaxworld disparaît, la police qu’il importe disparaît également.

Zygo · Janvier 14, 2024, 8:57

En fait le widget « W-Test_Horloge2 » (W2) est celui avec mon code (fait grâce aux infos qui m’ont été données ici) dans lequel j’ai intégré la ligne de @Furaxworld qui permet d’aller chercher la police.

Le comportement est assez bizarre puisque ça n’a pas fonctionner de suite, mais uniquement lorsque j’ai fait un copier/coller intégrale du code de @Furaxworld dans le « W-Test_Horloge3 »(W3). Ce W3 est vide ??? et le W2 affiche maintenant la bonne police ???. Soit…

Mais lorsque je décide d’intégrer les widgets dans mon design, alors si je mets uniquement le W2, j’ai une police de remplacement et lorsque je rajoute le W3 alors le W2 passe avec la bonne police et le W3 reste vide.

Le code du W2:

<!DOCTYPE html>
<html>
<head>
    <style>
        <!-- Bloc permettant de declarer la police non incluse, prealablement copiée dans le dossier data/fonts/ via l'éditeur de fichiers  -->
      	@font-face {
      		<!-- Nom donné à la police pour qu'elle puiise être rappelée dans la suite du code -->
          	font-family: "square";
      		src: url("data/fonts/square-deal.ttf") format("truetype");
    	}
      	#rectangle {
            width: 200px;
            height: 100px;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .time {
            font-family: 'square';
            font-size: 60px;
        }
        .hours {
            color: white;
        }
        .minutes {
            color: grey;
        }
    </style>
</head>
<body>
    <div id="rectangle">
        <span id="hours" class="time hours"></span>
        <span id="minutes" class="time minutes"></span>
    </div>

    <script>
        function updateTime() {
            var date = new Date();
            var hours = String(date.getHours()).padStart(2, '0');
            var minutes = String(date.getMinutes()).padStart(2, '0');
            document.getElementById('hours').innerHTML = hours;
            document.getElementById('minutes').innerHTML = minutes;
        }
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

Le code du W3 :

<!DOCTYPE html>
<html>
<head>
    <style>
          @font-face {
      font-family: "square";
      src: url("data/fonts/square-deal.ttf") format("truetype");
    }
      
        #rectangle {
            width: 200px;
            height: 100px;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .time {
            font-family: 'square';
            font-size: 60px;
        }
        .hours {
            color: white;
        }
        .minutes {
            color: grey;
        }
    </style>
</head>
<body>
    <div id="rectangle">
        <span id="hours" class="time hours"></span>
        <span id="minutes" class="time minutes"></span>
    </div>

    <script>
        function updateTime() {
            var date = new Date();
            var hours = String(date.getHours()).padStart(2, '0');
            var minutes = String(date.getMinutes()).padStart(2, '0');
            document.getElementById('hours').innerHTML = hours;
            document.getElementById('minutes').innerHTML = minutes;
        }
        setInterval(updateTime, 1000);
    </script>
</body>
</html>