Home Archive

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/rove7x35.js/"></script>

Code to track movies

tracks movies

Castroph Shindier

<10

Code Preview

Comments

html


	`<!DOCTYPE html>`
	`<html lang="en">`
	`<head>`
	`<meta charset="UTF-8" />`
	`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
	`<title>Anime Release Tracker</title>`
	`<style>`
	`body {`
	`font-family: Arial, sans-serif;`
	`background: #0d1117;`
	`color: #c9d1d9;`
	`padding: 20px;`
	`}`
	`.anime-card {`
	`border: 1px solid #30363d;`
	`background-color: #161b22;`
	`padding: 20px;`
	`margin-bottom: 20px;`
	`border-radius: 12px;`
	`display: flex;`
	`gap: 20px;`
	`align-items: center;`
	`}`
	`.anime-card img {`
	`max-width: 150px;`
	`border-radius: 8px;`
	`}`
	`.anime-info {`
	`flex: 1;`
	`}`
	`.anime-info h2 {`
	`margin: 0 0 10px;`
	`}`
	`.countdown {`
	`font-weight: bold;`
	`color: #58a6ff;`
	`margin-top: 8px;`
	`}`
	`a {`
	`color: #58a6ff;`
	`text-decoration: none;`
	`}`
	`a:hover {`
	`text-decoration: underline;`
	`}`
	`</style>`
	`</head>`
	`<body>`
	`<h1>Upcoming Anime Releases</h1>`
	`<div id="anime-container">Loading...</div>`

	`<script>`
	`const container = document.getElementById("anime-container");`

	`async function fetchAnime() {`
	const query = `
	`query {`
	`Page(perPage: 10) {`
	`media(type: ANIME, status: NOT_YET_RELEASED, sort: START_DATE) {`
	`id`
	`title {`
	`romaji`
	`}`
	`coverImage {`
	`large`
	`}`
	`startDate {`
	`year`
	`month`
	`day`
	`}`
	`siteUrl`
	`}`
	`}`
	`}`
	`;

	`try {`
	`const response = await fetch("https://graphql.anilist.co", {`
	`method: "POST",`
	`headers: { "Content-Type": "application/json" },`
	`body: JSON.stringify({ query })`
	`});`

	`const result = await response.json();`
	`const animeList = result.data?.Page?.media \|\| [];`
	`displayAnime(animeList);`
	`} catch (error) {`
	`container.innerHTML = "<p>Error loading anime data.</p>";`
	`console.error("Fetch error:", error);`
	`}`
	`}`

	`function displayAnime(animeList) {`
	`container.innerHTML = ""; // Clear placeholder`

	`// ❗️OPTIONAL: Curate by specific IDs`
	`const curatedIDs = [16498, 14345]; // Add or remove IDs here`
	`const curated = animeList.filter(anime => curatedIDs.includes(anime.id));`

	`if (curated.length === 0) {`
	`container.innerHTML = "<p>No curated anime selected yet.</p>";`
	`return;`
	`}`

	`curated.forEach(anime => {`
	`const { id, title, coverImage, startDate, siteUrl } = anime;`
	`const { year, month, day } = startDate;`

	`// Fallback if date is incomplete`
	`if (!year \|\| !month \|\| !day) return;`

	`const releaseDate = new Date(Date.UTC(year, month - 1, day));`

	`const card = document.createElement("div");`
	`card.className = "anime-card";`

	card.innerHTML = `
	`<img src="${coverImage.large}" alt="${title.romaji}" />`
	`<div class="anime-info">`
	`<h2><a href="${siteUrl}" target="_blank">${title.romaji}</a></h2>`
	`<p>Release Date: ${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}</p>`
	`<p class="countdown" id="countdown-${id}">Loading countdown...</p>`
	`</div>`
	`;

	`container.appendChild(card);`
	startCountdown(releaseDate, `countdown-${id}`);
	`});`
	`}`

	`function startCountdown(date, elementId) {`
	`function update() {`
	`const now = new Date();`
	`const diff = date - now;`

	`const element = document.getElementById(elementId);`
	`if (!element) return;`

	`if (diff <= 0) {`
	`element.textContent = "Released!";`
	`return;`
	`}`

	`const days = Math.floor(diff / (1000 * 60 * 60 * 24));`
	`const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);`
	`const minutes = Math.floor((diff / (1000 * 60)) % 60);`

	element.textContent = `${days}d ${hours}h ${minutes}m left`;
	`}`

	`update();`
	`setInterval(update, 60000); // Update every minute`
	`}`

	`fetchAnime();`
	`</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>Anime Release Tracker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #0d1117;
      color: #c9d1d9;
      padding: 20px;
    }
    .anime-card {
      border: 1px solid #30363d;
      background-color: #161b22;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 12px;
      display: flex;
      gap: 20px;
      align-items: center;
    }
    .anime-card img {
      max-width: 150px;
      border-radius: 8px;
    }
    .anime-info {
      flex: 1;
    }
    .anime-info h2 {
      margin: 0 0 10px;
    }
    .countdown {
      font-weight: bold;
      color: #58a6ff;
      margin-top: 8px;
    }
    a {
      color: #58a6ff;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>Upcoming Anime Releases</h1>
  <div id="anime-container">Loading...</div>

  <script>
    const container = document.getElementById("anime-container");

    async function fetchAnime() {
      const query = `
        query {
          Page(perPage: 10) {
            media(type: ANIME, status: NOT_YET_RELEASED, sort: START_DATE) {
              id
              title {
                romaji
              }
              coverImage {
                large
              }
              startDate {
                year
                month
                day
              }
              siteUrl
            }
          }
        }
      `;

      try {
        const response = await fetch("https://graphql.anilist.co", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ query })
        });

        const result = await response.json();
        const animeList = result.data?.Page?.media || [];
        displayAnime(animeList);
      } catch (error) {
        container.innerHTML = "<p>Error loading anime data.</p>";
        console.error("Fetch error:", error);
      }
    }

    function displayAnime(animeList) {
      container.innerHTML = ""; // Clear placeholder

      // ❗️OPTIONAL: Curate by specific IDs
      const curatedIDs = [16498, 14345]; // Add or remove IDs here
      const curated = animeList.filter(anime => curatedIDs.includes(anime.id));

      if (curated.length === 0) {
        container.innerHTML = "<p>No curated anime selected yet.</p>";
        return;
      }

      curated.forEach(anime => {
        const { id, title, coverImage, startDate, siteUrl } = anime;
        const { year, month, day } = startDate;

        // Fallback if date is incomplete
        if (!year || !month || !day) return;

        const releaseDate = new Date(Date.UTC(year, month - 1, day));

        const card = document.createElement("div");
        card.className = "anime-card";

        card.innerHTML = `
          <img src="${coverImage.large}" alt="${title.romaji}" />
          <div class="anime-info">
            <h2><a href="${siteUrl}" target="_blank">${title.romaji}</a></h2>
            <p>Release Date: ${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}</p>
            <p class="countdown" id="countdown-${id}">Loading countdown...</p>
          </div>
        `;

        container.appendChild(card);
        startCountdown(releaseDate, `countdown-${id}`);
      });
    }

    function startCountdown(date, elementId) {
      function update() {
        const now = new Date();
        const diff = date - now;

        const element = document.getElementById(elementId);
        if (!element) return;

        if (diff <= 0) {
          element.textContent = "Released!";
          return;
        }

        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((diff / (1000 * 60)) % 60);

        element.textContent = `${days}d ${hours}h ${minutes}m left`;
      }

      update();
      setInterval(update, 60000); // Update every minute
    }

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

Embed Snippet on Your Site

Code to track movies

Comments

Add a Comment Cancel Reply