HTML, dynamic NFTs preview

Product Questions & Discussion
1

GM.

recently i created a new dynamic NFT and i notice that on the claim page my NFT has an annoying white border even i checked my last drops which i used the same HTML code also has this problem.
you can check it here

i would be really glad if you can fix this problem or help me to update the HTML code so i dont have this problem thank you very much LFG!

2

You need to clear the browser’s default styling. The white border is coming from margin set on the body tag.

Set this css in your html’s <head> tag.

<style>
html, body {
  margin: 0;
  padding: 0;
}
</style>

After making the change load the file locally in your browser and verify it works before doing another transaction.

3

gm fren, thank you so much for ur reply i updated the HTML but in the browser it work good but i cant test it on manifold claim page. i notice that there is no option to test claim page on test network :frowning:

i use chat-gpt to create the HTML code i have no idea about the coding :))) but i added the those on the HTML and it seems that work good on browser just need to test it on claim page

4 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Day and Night Image Switcher</title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
      }
      
      .artwork-container {
        position: relative;
        width: 100%;
        height: 100%;
      }
      
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 1s ease;
        cursor: pointer;
        max-width: 100%;
        max-height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="artwork-container">
      <img id="dayImage" src="https://75qud2rnl6eyt6pu63yj7dogesvsh5xc2zx6qxdshh625cz5e63q.arweave.net/_2FB6i1fiYn59Pbwn43GJKsj9uLWb-hccjn9ros9J7c" alt="Day image">
      <img id="nightImage" src="https://2k524qxuw2houavrhldkgjy3dc6v7tet7nyfhpk6akepf7lpoosq.arweave.net/0ruuQvS2juoCsTrGoycbGL1fzJP7cFO9XgKI8v1vc6U" alt="Night image">
    </div>
    
    <script>
      const dayImage = document.getElementById('dayImage');
      const nightImage = document.getElementById('nightImage');
      const currentHour = new Date().getHours();
      let currentImage = currentHour >= 6 && currentHour < 18 ? 'day' : 'night';
      
      function switchImage() {
        if (currentImage === 'day') {
          dayImage.style.opacity = 0;
          nightImage.style.opacity = 1;
          currentImage = 'night';
        } else {
          nightImage.style.opacity = 0;
          dayImage.style.opacity = 1;
          currentImage = 'day';
        }
      }
      
      if (currentImage === 'day') {
        dayImage.style.opacity = 1;
      } else {
        nightImage.style.opacity = 1;
      }
      
      dayImage.addEventListener('click', switchImage);
      nightImage.addEventListener('click', switchImage);
    </script>
  </body>
</html>```
5

this is my updated code. its just suppose to change every 12h beetwen the two artworks and then wen user click on the artwork it changes. but i just wanted to be like the normal artworks wen i open the claim page

6

Late to respond but looks like you sorted it out. Looks great.