r03ert0/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Researcher Publications</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
        }
        .publication {
            margin-bottom: 20px;
        }
        .publication .title {
            font-weight: bold;
        }
        .publication .citation {
            margin-top: 10px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>Researcher Publications</h1>

    <div id="publications"></div>

    <script>
        function fetchPublications() {
            var orcidId = "0000-0002-6671-858X";
            var orcidEndpoint = "https://pub.orcid.org/v3.0/" + orcidId + "/works";
            var headers = new Headers({
                "Accept": "application/json"
            });

            fetch(orcidEndpoint, { headers: headers })
                .then(response => response.json())
                .then(data => {
                    var publications = data["group"];
                    var publicationList = document.getElementById("publications");

                    publications.forEach(publication => {
                        var title = publication["work-summary"][0]["title"]["title"]["value"];
                        var workType = publication["work-summary"][0]["type"];
                        var doi = publication["external-ids"]["external-id"][0]["external-id-value"];
                        var crossciteEndpoint = "https://citation.crosscite.org/format?doi=" + encodeURIComponent(doi) + "&style=apa&lang=en-US";

                        fetch(crossciteEndpoint)
                            .then(response => response.text())
                            .then(citation => {
                                var publicationDiv = document.createElement("div");
                                publicationDiv.className = "publication";

                                var citationDiv = document.createElement("div");
                                citationDiv.className = "citation";
                                citationDiv.innerHTML = `${title} (${workType})<br />${citation}`;
                                publicationDiv.appendChild(citationDiv);

                                publicationList.appendChild(publicationDiv);
                            });
                    });
                });
        }

        fetchPublications();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Researcher Publications</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	}
	h1 {
	text-align: center;
	}
	.publication {
	margin-bottom: 20px;
	}
	.publication .title {
	font-weight: bold;
	}
	.publication .citation {
	margin-top: 10px;
	font-style: italic;
	}
	</style>
	</head>
	<body>
	<h1>Researcher Publications</h1>

	<div id="publications"></div>

	<script>
	function fetchPublications() {
	var orcidId = "0000-0002-6671-858X";
	var orcidEndpoint = "https://pub.orcid.org/v3.0/" + orcidId + "/works";
	var headers = new Headers({
	"Accept": "application/json"
	});

	fetch(orcidEndpoint, { headers: headers })
	.then(response => response.json())
	.then(data => {
	var publications = data["group"];
	var publicationList = document.getElementById("publications");

	publications.forEach(publication => {
	var title = publication["work-summary"][0]["title"]["title"]["value"];
	var workType = publication["work-summary"][0]["type"];
	var doi = publication["external-ids"]["external-id"][0]["external-id-value"];
	var crossciteEndpoint = "https://citation.crosscite.org/format?doi=" + encodeURIComponent(doi) + "&style=apa&lang=en-US";

	fetch(crossciteEndpoint)
	.then(response => response.text())
	.then(citation => {
	var publicationDiv = document.createElement("div");
	publicationDiv.className = "publication";

	var citationDiv = document.createElement("div");
	citationDiv.className = "citation";
	citationDiv.innerHTML = `${title} (${workType})<br />${citation}`;
	publicationDiv.appendChild(citationDiv);

	publicationList.appendChild(publicationDiv);
	});
	});
	});
	}

	fetchPublications();
	</script>
	</body>
	</html>