How to make a panel with images?

Technical Support
7

I’m not getting any errors but I made some changes, migrated part of the code to CSS.
this is what the CSS looked like:

/* Styles for the panel */
#my-custom-panel {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(101, 78, 163, 1);
     color: white;
     padding: 20px;
     display: none; /* Initially hidden */
     z-index: 9999;
     overflow-y: auto;
}

#my-custom-panel div {
     margin: 5%;
     height: 90%;
}

#my-custom-panel h2 {
     text-align: center;
}

#my-custom-panel img {
     max-width: calc(100% - 40px);
     height: auto;
     display: block;
     margin: 10px auto;
}

#my-custom-panel p {
     text-align: center;
}

/* Styles for the button */
.custom-button {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 10000;
     transition: transform 0.3s;
}

.custom-button:hover {
     transform: scale(1.1);
}

this is how the JS looked:

import './css.css'

AFRAME.registerComponent('custom-panel', {
   init: function () {
     // Create the panel
     this.panel = document.createElement('div');
     this.panel.id = 'my-custom-panel';
     this.panel.innerHTML = `
       <div>
         <h2>Gallery</h2>
         <div style="margin-bottom: 20px;">
           <img src="./assets/tesla-mini.jpg" alt="Tesla">
           <p>Retractable Sofa</p>
         </div>
         <div style="margin-bottom: 20px;">
           <img src="./assets/tesla-mini.jpg" alt="Retractable Sofa">
           <p>Retractable Sofa</p>
         </div>
         <!-- More images and descriptions as needed -->
       </div>
     `;

     // Create the button
     var button = document.createElement('button');
     button.innerText = 'What are Retractable Sofas?';
     button.className = 'custom-button';

     // Add the button to the body
     document.body.appendChild(button);

     // Add the panel to the body
     document.body.appendChild(this.panel);

     // Button click event to show/hide the panel
     button.addEventListener('click', () => {
       if (this.panel.style.display === 'none') {
         this.panel.style.display = 'block';
         button.innerText = 'Back to AR experience!';
       } else {
         this.panel.style.display = 'none';
         button.innerText = 'What are Retractable Sofas?';
       }
     });
   }
});