Add recently watched anime

index.html

@@ -6,6 +6,8 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="style.css">
 	<title>Elnu's Homepage</title>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
+	<script src="script.js"></script>
 	<script>
 		var _paq = window._paq = window._paq || [];
 		_paq.push(['trackPageView']);
@@ -41,6 +43,10 @@
 				<small>More coming soon™! (*￣▽￣)b</small>
 			</div>
 		</div>
+		<h3>Recently watched anime from <a href="https://anilist.co/user/Elnu/">AniList</a></h3>
+		<div class="activities">
+			Loading recent anime activity...
+		</div>
 		<br>
 		<div class="socials">
 			<a href="https://anilist.co/user/Elnu/" title="AniList" target="_blank"><img src="anilist.svg" alt="AniList"></a>

script.js

@@ -0,0 +1,82 @@
+const query = `
+{
+	Page {
+		activities(userId: 5329808, sort: ID_DESC, type: ANIME_LIST) {
+			... on ListActivity {
+				siteUrl
+				progress
+				status
+				createdAt
+				media {
+					id
+					title {
+						english
+						native
+					}
+					coverImage {
+						medium
+					}
+					description
+					siteUrl
+				}
+			}
+		}
+	}
+}`;
+const url = "https://graphql.anilist.co";
+const options = {
+	method: 'POST',
+	headers: {
+		'Content-Type': 'application/json',
+		'Accept': 'application/json',
+	},
+	body: JSON.stringify({ query })
+};
+fetch("https://graphql.anilist.co", options)
+	.then(response => {
+		return response.json().then(function (json) {
+			return response.ok ? json : Promise.reject(json);
+		});
+	})
+	.then(data => {
+		const container = document.querySelector(".activities");
+		container.innerHTML = "";
+		const activities = data.data.Page.activities;
+		let displayedIds = [];
+		let count = 0;
+		for (let i = 0; i < activities.length && count < 6; i++) {
+			const a = activities[i];
+			
+			if (["plans to watch", "dropped"].includes(a.status) || displayedIds.includes(a.media.id)) {
+				continue;
+			}
+
+			const element = document.createElement("div");
+
+			const thumbnailLink = document.createElement("a");
+			thumbnailLink.href = a.media.siteUrl;
+			thumbnailLink.title = a.media.title.english;
+			thumbnailLink.target = "_blank";
+
+			const thumbnail = document.createElement("img");
+			thumbnail.src = a.media.coverImage.medium;
+			thumbnail.alt = a.media.title.native;
+			thumbnailLink.appendChild(thumbnail);
+
+			element.appendChild(thumbnailLink);
+
+			const description = document.createElement("div");
+			description.classList.add("description");
+			description.innerHTML = `<p><b>${moment(new Date(a.createdAt * 1000)).fromNow()}</b> ${a.status} ${a.progress == null ? "" : `<b>${a.progress}</b> of`} <b><a href="${a.media.siteUrl}" title="${a.media.title.english}" target="_blank">${a.media.title.native}</a></b></p><p><b>Synopsis:</b> ${a.media.description.replaceAll("<br>", "").replaceAll("\n\n", "</p><p>")}</p>`;
+			element.appendChild(description);
+
+			container.appendChild(element);
+
+			displayedIds.push(a.media.id);
+			count++;
+		}
+	})
+	.catch(error => {
+		document.querySelector(".activities").innerHTML = "Failed to load!";
+		console.error(error);
+	});

style.css

@@ -9,7 +9,6 @@ body {
     margin-top: 4em;
     background: #3b4252;
     padding: 1em;
-    border-radius: 4px;
 }
 
 * {
@@ -31,10 +30,18 @@ h1 {
     display: block;
     text-decoration: none;
     width: 100%;
-    border-radius: 4px;
     color: white;
     padding: 1em;
     margin-bottom: 0.25em;
+}
+
+.activities {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75em;
+}
+
+.card, .activities > div {
     transition: 0.25s;
 }
 
@@ -92,17 +99,14 @@ h1 {
     transition: 0.25s;
 }
 
-#content, .socials > *, .card {
+#content, .socials > *, .card, .activities > div {
     box-shadow: 0 4px rgba(0, 0, 0, 0.06125);
 }
 
-.socials > *:hover {
+.socials > *:hover, .activities > div:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px rgba(0, 0, 0, 0.030625);
-}
+    z-index: 1;
-
-p:first-child {
-    margin-top: 0;
 }
 
 footer {
@@ -110,4 +114,53 @@ footer {
     color: rgba(255, 255, 255, 0.25);
     text-align: center;
     font-size: 0.825em;
+}
+
+#content, .card, .activities > div {
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.activities > div, .description, .activities > div > a img {
+    height: 8em;
+}
+
+.activities > div {
+    display: flex;
+    background: #434c5e;
+    font-size: 0.78125em;
+}
+
+.description {
+    overflow-y: scroll;
+    padding: 0.5em;
+}
+
+.media-description * {
+    color: #d8dee9 !important;
+}
+
+p:first-child {
+    margin-top: 0;
+}
+
+p:last-child {
+    margin-bottom: 0;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #2e3440; 
+}
+
+::-webkit-scrollbar-thumb {
+    background: #4c566a;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #5e81ac;
 }