oazabir/HagueGroup.html

## HagueGroup.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hague Group - Template Letters</title>
    <style>
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f5f5f5;
      }
      .template-letter {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
        white-space: pre-wrap;
      }
      .country-section {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .btn {
        padding: 10px 20px;
        margin: 5px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 500;
        transition: background-color 0.3s;
      }
      .copy-btn {
        background-color: #4caf50;
        color: white;
      }
      .email-btn {
        background-color: #2196f3;
        color: white;
      }
      .btn:hover {
        opacity: 0.9;
      }
      h1,
      h2 {
        color: #333;
      }
      .success-message {
        display: none;
        color: #4caf50;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Hague Group - Template Letters</h1>

    <pre class="template-letter" id="template-letter">
      Dear Ambassador (name) of (country),

      Thank you for your solemn commitment to an international order based on the rule of law and international law, as per the inaugural joint statement of the Hague Group of 31 January 2025.

      Your commitment to the Palestinian people and your leadership in striving to ensure their rights has been inspiring and commendable, and in a world where principle seems to have been abandoned by the majority, it is States like yours that keep hope going.

      As you know, it has now been over 18 months since Israel launched its brutal genocide against the Palestinian civilian population of Gaza. As concerned people of conscience throughout the world, we look to you to take the further step needed to put an end to these atrocities.

      You along with the other founding members of the Hague Group, have the power to establish an international protective force to be deployed urgently to Palestine to stop the genocide, protect civilians, ensure unhindered humanitarian aid, and guarantee the right to self-determination for the Palestinian people.

      Around the world, millions of people in all countries will rise in support of your efforts in this regard, and future generations will always remember which countries stood up for what is principled and right.
    </pre>

    <div id="countries-container">
      <!-- Countries will be populated by JavaScript -->
    </div>

    <script>
      const countries = [
        {
          name: "Bolivia",
          emails: ["contact@mission-bolivia.ch", "missionboliviaun@gmail.com"],
        },
        {
          name: "Malaysia",
          emails: ["mwgeneva@kln.gov.my", "mwnewyorkun@kln.gov.my"],
        },
        {
          name: "Cuba",
          emails: ["embacuba@ch.embacuba.cu", "cuba_onu@cubanmission.com"],
        },
        {
          name: "Colombia",
          emails: ["colombia@colombiaun.org"],
        },
        {
          name: "Senegal",
          emails: [
            "mission.senegal.gva@bluewin.ch",
            "senegal.mission@yahoo.fr",
          ],
        },
        {
          name: "Namibia",
          emails: ["info@missionofnamibia.ch", "info@namibiaunmission.org"],
        },
        {
          name: "South Africa",
          emails: ["mission@safricaun.ch", "pmun.newyork@dirco.gov.za"],
        },
        {
          name: "Honduras",
          emails: ["mission@hondurasginebra.ch", "Ny.honduras@hnun.org"],
        },
      ];

      function getCustomizedLetter(country) {
        const template = document.getElementById("template-letter").textContent;
        return template.replace("(country)", country).replace("(name)", "");
      }

      function copyToClipboard(text, buttonElement) {
        navigator.clipboard.writeText(text).then(() => {
          const successMsg = buttonElement.nextElementSibling;
          successMsg.style.display = "inline";
          setTimeout(() => {
            successMsg.style.display = "none";
          }, 2000);
        });
      }

      function createEmailLink(country, emails) {
        const subject = encodeURIComponent(
          `Letter to Ambassador of ${country} - Hague Group`
        );
        const body = encodeURIComponent(getCustomizedLetter(country));
        return `mailto:${emails.join(",")}?subject=${subject}&body=${body}`;
      }

      const container = document.getElementById("countries-container");

      countries.forEach((country) => {
        const countrySection = document.createElement("div");
        countrySection.className = "country-section";

        const countryName = document.createElement("h2");
        countryName.textContent = country.name;

        const copyBtn = document.createElement("button");
        copyBtn.className = "btn copy-btn";
        copyBtn.textContent = `Copy letter content`;
        copyBtn.onclick = () =>
          copyToClipboard(getCustomizedLetter(country.name), copyBtn);

        const successMsg = document.createElement("span");
        successMsg.className = "success-message";
        successMsg.textContent = "Copied!";

        const emailBtn = document.createElement("button");
        emailBtn.className = "btn email-btn";
        emailBtn.textContent = `Email Letter`;
        emailBtn.onclick = () =>
          (window.location.href = createEmailLink(
            country.name,
            country.emails
          ));

        countrySection.appendChild(countryName);
        countrySection.appendChild(copyBtn);
        countrySection.appendChild(successMsg);
        countrySection.appendChild(emailBtn);

        container.appendChild(countrySection);
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Hague Group - Template Letters</title>
	<style>
	body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: #f5f5f5;
	}
	.template-letter {
	background-color: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;
	white-space: pre-wrap;
	}
	.country-section {
	background-color: white;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.btn {
	padding: 10px 20px;
	margin: 5px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 500;
	transition: background-color 0.3s;
	}
	.copy-btn {
	background-color: #4caf50;
	color: white;
	}
	.email-btn {
	background-color: #2196f3;
	color: white;
	}
	.btn:hover {
	opacity: 0.9;
	}
	h1,
	h2 {
	color: #333;
	}
	.success-message {
	display: none;
	color: #4caf50;
	margin-left: 10px;
	}
	</style>
	</head>
	<body>
	<h1>Hague Group - Template Letters</h1>

	<pre class="template-letter" id="template-letter">
	Dear Ambassador (name) of (country),

	Thank you for your solemn commitment to an international order based on the rule of law and international law, as per the inaugural joint statement of the Hague Group of 31 January 2025.

	Your commitment to the Palestinian people and your leadership in striving to ensure their rights has been inspiring and commendable, and in a world where principle seems to have been abandoned by the majority, it is States like yours that keep hope going.

	As you know, it has now been over 18 months since Israel launched its brutal genocide against the Palestinian civilian population of Gaza. As concerned people of conscience throughout the world, we look to you to take the further step needed to put an end to these atrocities.

	You along with the other founding members of the Hague Group, have the power to establish an international protective force to be deployed urgently to Palestine to stop the genocide, protect civilians, ensure unhindered humanitarian aid, and guarantee the right to self-determination for the Palestinian people.

	Around the world, millions of people in all countries will rise in support of your efforts in this regard, and future generations will always remember which countries stood up for what is principled and right.
	</pre>

	<div id="countries-container">
	<!-- Countries will be populated by JavaScript -->
	</div>

	<script>
	const countries = [
	{
	name: "Bolivia",
	emails: ["contact@mission-bolivia.ch", "missionboliviaun@gmail.com"],
	},
	{
	name: "Malaysia",
	emails: ["mwgeneva@kln.gov.my", "mwnewyorkun@kln.gov.my"],
	},
	{
	name: "Cuba",
	emails: ["embacuba@ch.embacuba.cu", "cuba_onu@cubanmission.com"],
	},
	{
	name: "Colombia",
	emails: ["colombia@colombiaun.org"],
	},
	{
	name: "Senegal",
	emails: [
	"mission.senegal.gva@bluewin.ch",
	"senegal.mission@yahoo.fr",
	],
	},
	{
	name: "Namibia",
	emails: ["info@missionofnamibia.ch", "info@namibiaunmission.org"],
	},
	{
	name: "South Africa",
	emails: ["mission@safricaun.ch", "pmun.newyork@dirco.gov.za"],
	},
	{
	name: "Honduras",
	emails: ["mission@hondurasginebra.ch", "Ny.honduras@hnun.org"],
	},
	];

	function getCustomizedLetter(country) {
	const template = document.getElementById("template-letter").textContent;
	return template.replace("(country)", country).replace("(name)", "");
	}

	function copyToClipboard(text, buttonElement) {
	navigator.clipboard.writeText(text).then(() => {
	const successMsg = buttonElement.nextElementSibling;
	successMsg.style.display = "inline";
	setTimeout(() => {
	successMsg.style.display = "none";
	}, 2000);
	});
	}

	function createEmailLink(country, emails) {
	const subject = encodeURIComponent(
	`Letter to Ambassador of ${country} - Hague Group`
	);
	const body = encodeURIComponent(getCustomizedLetter(country));
	return `mailto:${emails.join(",")}?subject=${subject}&body=${body}`;
	}

	const container = document.getElementById("countries-container");

	countries.forEach((country) => {
	const countrySection = document.createElement("div");
	countrySection.className = "country-section";

	const countryName = document.createElement("h2");
	countryName.textContent = country.name;

	const copyBtn = document.createElement("button");
	copyBtn.className = "btn copy-btn";
	copyBtn.textContent = `Copy letter content`;
	copyBtn.onclick = () =>
	copyToClipboard(getCustomizedLetter(country.name), copyBtn);

	const successMsg = document.createElement("span");
	successMsg.className = "success-message";
	successMsg.textContent = "Copied!";

	const emailBtn = document.createElement("button");
	emailBtn.className = "btn email-btn";
	emailBtn.textContent = `Email Letter`;
	emailBtn.onclick = () =>
	(window.location.href = createEmailLink(
	country.name,
	country.emails
	));

	countrySection.appendChild(countryName);
	countrySection.appendChild(copyBtn);
	countrySection.appendChild(successMsg);
	countrySection.appendChild(emailBtn);

	container.appendChild(countrySection);
	});
	</script>
	</body>
	</html>