<div class="test-container">
  <div class="test-section">
    <h3>Third-Party Cookie Test</h3>
    <button id="setThirdPartyCookie">Set Third-Party Cookie</button>
    <button id="readThirdPartyCookie">Read Third-Party Cookie</button>
    <div id="thirdPartyCookieResult"></div>
  </div>

  <div class="test-section">
    <h3>localStorage Test</h3>
    <button id="setLocalStorage">Set localStorage Item</button>
    <button id="readLocalStorage">Read localStorage Item</button>
    <div id="localStorageResult"></div>
  </div>

  <div class="test-section">
    <h3>Cross-Site Request Test</h3>
    <button id="makeCrossSiteRequest">Make Cross-Site Request</button>
    <div id="crossSiteRequestResult"></div>
  </div>
</div>

<script>
  // Third-Party Cookie Test
  document.getElementById('setThirdPartyCookie').addEventListener('click', () => {
    try {
      document.cookie = "testCookie=value; domain=.example.com; path=/";
      document.getElementById('thirdPartyCookieResult').textContent =
        "Cookie set successfully. Check Safari's developer tools to see if it was blocked.";
    } catch (e) {
      document.getElementById('thirdPartyCookieResult').textContent =
        "Error setting cookie: " + e.message;
    }
  });

  document.getElementById('readThirdPartyCookie').addEventListener('click', () => {
    const cookies = document.cookie;
    document.getElementById('thirdPartyCookieResult').textContent =
      "Current cookies: " + cookies;
  });

  // localStorage Test
  document.getElementById('setLocalStorage').addEventListener('click', () => {
    try {
      localStorage.setItem('testKey', 'testValue');
      document.getElementById('localStorageResult').textContent =
        "localStorage item set successfully";
    } catch (e) {
      document.getElementById('localStorageResult').textContent =
        "Error setting localStorage: " + e.message;
    }
  });

  document.getElementById('readLocalStorage').addEventListener('click', () => {
    try {
      const value = localStorage.getItem('testKey');
      document.getElementById('localStorageResult').textContent =
        "localStorage value: " + value;
    } catch (e) {
      document.getElementById('localStorageResult').textContent =
        "Error reading localStorage: " + e.message;
    }
  });

  // Cross-Site Request Test
  document.getElementById('makeCrossSiteRequest').addEventListener('click', async () => {
    try {
      const response = await fetch('https://api.example.com/test', {
        credentials: 'include'
      });
      const data = await response.json();
      document.getElementById('crossSiteRequestResult').textContent =
        "Request successful. Check Network tab for details.";
    } catch (e) {
      document.getElementById('crossSiteRequestResult').textContent =
        "Error making request: " + e.message;
    }
  });
</script>

<style>
  .test-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .test-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  button {
    margin: 5px;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
  #thirdPartyCookieResult,
  #localStorageResult,
  #crossSiteRequestResult {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
  }
</style>