<div class="container mx-auto px-4 py-8">
    <!-- 標題區(qū)域 -->
    <header class="mb-8 text-center">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-2">隨機位置鼠標點擊檢測</h1>
        <p class="text-gray-600 max-w-2xl mx-auto">點擊頁面上的任意位置，系統(tǒng)會記錄并顯示你的點擊坐標</p>
    </header>

    <!-- 信息面板 -->
    <div id="info-panel" class="bg-white rounded-xl shadow-md p-6 mb-6 max-w-2xl mx-auto">
        <!-- 信息面板內(nèi)容 -->
    </div>

    <!-- 點擊區(qū)域 -->
    <div id="click-area" class="bg-white rounded-xl shadow-lg h-[50vh] w-full relative overflow-hidden">
        <div class="absolute inset-0 flex items-center justify-center text-gray-300">
            <p>在此區(qū)域內(nèi)任意位置點擊</p>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-gray-50 p-4 rounded-lg">
        <p class="text-gray-600 text-sm mb-1">最后點擊 X 坐標</p>
        <p id="last-x" class="text-2xl font-bold text-primary">0</p>
    </div>
    <div class="bg-gray-50 p-4 rounded-lg">
        <p class="text-gray-600 text-sm mb-1">最后點擊 Y 坐標</p>
        <p id="last-y" class="text-2xl font-bold text-primary">0</p>
    </div>
    <div class="bg-gray-50 p-4 rounded-lg md:col-span-2">
        <p class="text-gray-600 text-sm mb-1">點擊歷史</p>
        <div id="click-history" class="h-32 overflow-y-auto text-sm text-gray-700 space-y-1">
            <p class="text-gray-400 italic">尚未有點擊</p>
        </div>
    </div>
</div>

#click-area {
    position: relative;
}

.click-marker {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #8B5CF6;
    border-radius: 50%;
}

tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: '#3B82F6',
                secondary: '#10B981',
                accent: '#8B5CF6',
            },
            fontFamily: {
                inter: ['Inter', 'sans-serif'],
            },
        }
    }
}

// 獲取DOM元素
const clickArea = document.getElementById('click-area');
const lastXElement = document.getElementById('last-x');
const lastYElement = document.getElementById('last-y');
const clickHistory = document.getElementById('click-history');

// 記錄點擊次數(shù)
let clickCount = 0;

function handleClick(event) {
    // 獲取相對于點擊區(qū)域的坐標
    const rect = clickArea.getBoundingClientRect();
    const x = Math.round(event.clientX - rect.left);
    const y = Math.round(event.clientY - rect.top);

    // 更新最后點擊坐標顯示
    lastXElement.textContent = x;
    lastYElement.textContent = y;

    // 增加點擊計數(shù)
    clickCount++;

    // 添加到歷史記錄
    addToHistory(x, y);

    // 創(chuàng)建點擊標記
    createClickMarker(x, y);

    // 在控制臺輸出坐標
    console.log(`點擊位置: X=${x}, Y=${y}`);
}

function addToHistory(x, y) {
    // 清除"尚未有點擊"提示
    if (clickCount === 1) {
        clickHistory.innerHTML = '';
    }

    const historyItem = document.createElement('p');
    historyItem.className = 'flex justify-between items-center';
    historyItem.innerHTML = `
        <span>第 ${clickCount} 次點擊</span>
        <span class="font-medium">X: ${x}, Y: ${y}</span>
    `;

    // 添加到歷史記錄頂部
    clickHistory.insertBefore(historyItem, clickHistory.firstChild);
}

function createClickMarker(x, y) {
    const marker = document.createElement('div');
    marker.className = 'click-marker';
    marker.style.left = `${x}px`;
    marker.style.top = `${y}px`;

    // 添加到點擊區(qū)域
    clickArea.appendChild(marker);

    // 2秒后移除標記
    setTimeout(() => {
        setTimeout(() => {
            marker.remove();
        }, 300);
    }, 2000);
}

// 為整個點擊區(qū)域添加點擊事件監(jiān)聽
clickArea.addEventListener('click', handleClick);