trycua--cua/libs/cua-bench/datasets/cua-bench-basic/click-icon/gui/index.html

<main class="flex flex-col h-full w-full p-6" role="main" aria-label="Icon selection interface">
  <div class="max-w-2xl mx-auto w-full">
    <h1 class="text-xl font-semibold text-gray-900 mb-6">Click the icon</h1>

    <!-- Icon Grid -->
    <div class="grid grid-cols-3 gap-4">
      <!-- Home Icon -->
      <button
        id="icon-Home"
        class="icon-btn flex items-center justify-center p-6 border-2 border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
        aria-label="Home icon"
        data-icon-name="Home"
      >
        <iconify-icon icon="mdi:home" class="text-gray-700" style="font-size: 3rem"></iconify-icon>
      </button>

      <!-- Settings Icon -->
      <button
        id="icon-Settings"
        class="icon-btn flex items-center justify-center p-6 border-2 border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
        aria-label="Settings icon"
        data-icon-name="Settings"
      >
        <iconify-icon
          icon="mdi:settings"
          class="text-gray-700"
          style="font-size: 3rem"
        ></iconify-icon>
      </button>

      <!-- Profile Icon -->
      <button
        id="icon-Profile"
        class="icon-btn flex items-center justify-center p-6 border-2 border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
        aria-label="Profile icon"
        data-icon-name="Profile"
      >
        <iconify-icon
          icon="mdi:account"
          class="text-gray-700"
          style="font-size: 3rem"
        ></iconify-icon>
      </button>

      <!-- Notifications Icon -->
      <button
        id="icon-Notifications"
        class="icon-btn flex items-center justify-center p-6 border-2 border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
        aria-label="Notifications icon"
        data-icon-name="Notifications"
      >
        <iconify-icon icon="mdi:bell" class="text-gray-700" style="font-size: 3rem"></iconify-icon>
      </button>

      <!-- Messages Icon -->
      <button
        id="icon-Messages"
        class="icon-btn flex items-center justify-center p-6 border-2 border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
        aria-label="Messages icon"
        data-icon-name="Messages"
      >
        <iconify-icon icon="mdi:email" class="text-gray-700" style="font-size: 3rem"></iconify-icon>
      </button>

      <!-- Favorites Icon -->
      <button
        id="icon-Favorites"
        class="icon-btn flex items-center justify-center p-6 border-2 border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
        aria-label="Favorites icon"
        data-icon-name="Favorites"
      >
        <iconify-icon icon="mdi:star" class="text-gray-700" style="font-size: 3rem"></iconify-icon>
      </button>
    </div>

    <div class="mt-6 p-3 bg-blue-50 border border-blue-200 rounded">
      <p class="text-sm text-blue-800">
        <iconify-icon icon="mdi:information" class="text-blue-600"></iconify-icon>
        Click the specified icon to complete the task
      </p>
    </div>

    <!-- Success Message -->
    <div id="success-message" class="hidden mt-4 p-4 bg-green-100 border border-green-400 rounded">
      <div class="flex items-center gap-2">
        <iconify-icon
          icon="mdi:check-circle"
          class="text-green-600"
          style="font-size: 1.5rem"
        ></iconify-icon>
        <p class="text-green-800 font-medium">Correct icon clicked!</p>
      </div>
    </div>
  </div>

  <script>
    // Store clicked icon globally for evaluation
    window.__clickedIcon = null;

    // Add click handlers to all icon buttons
    const iconButtons = document.querySelectorAll('.icon-btn');
    iconButtons.forEach((button) => {
      button.addEventListener('click', function () {
        const iconName = this.getAttribute('data-icon-name');
        window.__clickedIcon = iconName;

        // Visual feedback
        iconButtons.forEach((btn) => {
          btn.classList.remove('border-green-500', 'bg-green-50');
          btn.classList.add('border-gray-300');
        });

        this.classList.remove('border-gray-300');
        this.classList.add('border-green-500', 'bg-green-50');

        // Show success message
        document.getElementById('success-message').classList.remove('hidden');
      });
    });
  </script>
</main>