@@ -415,4 +415,87 @@ async function updateChart() {
415415// Call all functions when the page loads
416416displayMusicStats ( ) ;
417417displayRandomRecommendation ( ) ;
418- updateChart ( ) ;
418+ updateChart ( ) ;
419+
420+ // ASCII Clock implementation - exact working code
421+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
422+ const digits = [
423+ [ " 000 " , "0 0" , "0 0" , "0 0" , " 000 " ] ,
424+ [ " 1 " , " 11 " , " 1 " , " 1 " , " 111 " ] ,
425+ [ " 222 " , "2 2" , " 22 " , " 2 " , " 2222" ] ,
426+ [ " 333 " , " 3" , " 33 " , " 3" , " 333 " ] ,
427+ [ " 4 4" , "4 4 " , " 4444" , " 4" , " 4" ] ,
428+ [ " 5555" , " 5 " , " 555 " , " 5" , " 555 " ] ,
429+ [ " 666 " , " 6 " , " 666 " , " 6 6" , " 666 " ] ,
430+ [ " 7777" , " 7" , " 7 " , " 7 " , " 7 " ] ,
431+ [ " 888 " , "8 8" , " 888 " , "8 8" , " 888 " ] ,
432+ [ " 999 " , "9 9" , " 999 " , " 9" , " 999 " ] ,
433+ [ " " , " * " , " " , " * " , " " ] // Colon
434+ ] ;
435+
436+ function getAsciiTime ( ) {
437+ // Create date for Berlin timezone (CEST)
438+ const now = new Date ( ) ;
439+ const berlinTime = new Date ( now . toLocaleString ( 'en-US' , { timeZone : 'Europe/Berlin' } ) ) ;
440+
441+ const h = berlinTime . getHours ( ) . toString ( ) . padStart ( 2 , '0' ) ;
442+ const m = berlinTime . getMinutes ( ) . toString ( ) . padStart ( 2 , '0' ) ;
443+ const s = berlinTime . getSeconds ( ) . toString ( ) . padStart ( 2 , '0' ) ;
444+ const timeStr = h + ':' + m + ':' + s ;
445+ let asciiTime = "" ;
446+
447+ for ( let row = 0 ; row < 5 ; row ++ ) {
448+ for ( let char of timeStr ) {
449+ asciiTime += digits [ char === ':' ? 10 : parseInt ( char ) ] [ row ] + " " ;
450+ }
451+ asciiTime += "\n" ;
452+ }
453+
454+ return asciiTime ;
455+ }
456+
457+ function updateClock ( ) {
458+ const clockElement = document . getElementById ( 'ascii-clock' ) ;
459+ if ( clockElement ) {
460+ clockElement . textContent = getAsciiTime ( ) ;
461+ }
462+ }
463+
464+ // Update every second
465+ setInterval ( updateClock , 1000 ) ;
466+ updateClock ( ) ;
467+
468+ // Add hover information for the timezone
469+ const clockElement = document . getElementById ( 'ascii-clock' ) ;
470+ clockElement . setAttribute ( 'data-timezone' , 'CEST / BERLIN' ) ;
471+ clockElement . classList . add ( 'has-info' ) ;
472+
473+ console . log ( 'ASCII clock initialized with Berlin time' ) ;
474+ } ) ;
475+
476+ // Update cursor for clock hover with random city
477+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
478+ const cestCities = [
479+ "BERLIN" , "PARIS" , "ROME" , "MADRID" , "VIENNA" ,
480+ "AMSTERDAM" , "BRUSSELS" , "COPENHAGEN" , "WARSAW" , "PRAGUE" ,
481+ "BUDAPEST" , "MUNICH" , "MILAN" , "BARCELONA" , "ZURICH" ,
482+ "GENEVA" , "FRANKFURT" , "HAMBURG" , "LYON" , "STOCKHOLM" ,
483+ "OSLO" , "VIENNA" , "ZAGREB" , "LJUBLJANA" , "BRATISLAVA" ,
484+ "BELGRADE" , "BERN" , "LUXEMBOURG" , "MONACO" , "VADUZ"
485+ ] ;
486+
487+ const clockElement = document . querySelector ( '#ascii-clock' ) ;
488+ if ( clockElement ) {
489+ clockElement . addEventListener ( 'mouseenter' , ( ) => {
490+ // Get random city
491+ const randomCity = cestCities [ Math . floor ( Math . random ( ) * cestCities . length ) ] ;
492+ cursor . classList . add ( 'active' , 'clock-hover' ) ;
493+ cursor . innerHTML = `CEST / ${ randomCity } ;
494+ } ) ;
495+
496+ clockElement . addEventListener ( 'mouseleave' , ( ) => {
497+ cursor . classList . remove ( 'active' , 'clock-hover' ) ;
498+ cursor . innerHTML = '' ;
499+ } ) ;
500+ }
501+ } ) ;
0 commit comments