Promote version baa725e to main

Promoted commit baa725ecb9e2db2ed9bbc26968aea929309f1798 to main branch

index.html

@@ -44,6 +44,7 @@
             transition: transform 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
             transform-origin: center center;
         }
+
         /* Landscape Mode Simulation for Fullscreen Image */
         .smartphone-container.landscape-mode {
             width: 667px; /* Swap width/height */
@@ -52,34 +53,7 @@
             box-shadow: 0 0 80px rgba(57, 255, 20, 0.7), 0 0 30px rgba(0, 0, 0, 0.9) inset;
         }
 
-        /* Fullscreen image with zoom capability */
-        .fullscreen-image-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: var(--dark-bg);
-            z-index: 60;
-            display: none;
-            overflow: auto;
-            cursor: zoom-in;
-        }
-
-        .fullscreen-image-container.zoomed {
-            cursor: zoom-out;
-        }
-
-        .fullscreen-image {
-            width: 100%;
-            height: auto;
-            transition: transform 0.3s ease;
-        }
-
-        .fullscreen-image.zoomed {
-            transform: scale(2);
-        }
-/* Glassmorphism Effect */
+        /* Glassmorphism Effect */
         .glass-card {
             background-color: var(--glass-bg);
             backdrop-filter: blur(8px);
@@ -188,11 +162,16 @@
             </div>
             <button id="close-menu-btn" class="mt-8 px-4 py-2 bg-neon text-black rounded-xl font-bold w-full btn-futuristic">SCHLIESSEN</button>
         </div>
+
         <!-- FULLSCREEN IMAGE MODAL (for the utility chart on NFT screen) -->
-        <div id="fullscreen-image-modal" class="fullscreen-image-container">
-            <img id="fullscreen-image" src="" alt="NODeSIM Utility Chart" class="fullscreen-image">
+        <div id="fullscreen-image-modal" class="hidden justify-center items-center">
+            <button id="close-image-modal-btn" class="absolute top-2 right-4 text-neon text-3xl font-bold z-10 p-2 glass-card rounded-full hover:shadow-neon transition duration-300">
+                <ph-x-bold size="24"></ph-x-bold>
+            </button>
+            <img id="fullscreen-image" src="" alt="NODeSIM Utility Chart" class="max-w-full max-h-full object-contain">
         </div>
-<!-- APP SCREENS -->
+
+        <!-- APP SCREENS -->
 
         <!-- 1. Home Screen -->
         <div id="home-screen" class="app-screen block space-y-4">
@@ -304,16 +283,18 @@
             <button class="bg-neon text-black p-3 rounded-xl font-bold w-full btn-futuristic">
                 <ph-plus-circle-bold size="20" class="inline-block mr-1"></ph-plus-circle-bold> NEUES NFT MINTEN
             </button>
-            <!-- Interactive Utility Chart Image -->
+
+            <!-- Interactive Utility Chart Image (Mock Image) -->
             <h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">NFT Utility Schema</h2>
             <div class="glass-card p-2 rounded-xl cursor-pointer hover:shadow-neon/50 transition duration-300" id="utility-chart-preview">
+                 <!-- Image Placeholder URL is used here -->
                 <img src="https://huggingface.co/spaces/Uschi1000/nodesim-nft-gallery-fixer/resolve/main/images/NODeSIM%20eSIM-NFT%20Utility.png" 
                      alt="Klicken zum Vergrößern" 
                      data-full-src="https://huggingface.co/spaces/Uschi1000/nodesim-nft-gallery-fixer/resolve/main/images/NODeSIM%20eSIM-NFT%20Utility.png" 
                      class="w-full h-auto rounded-lg object-cover">
-                <p class="text-xs text-white/50 text-center mt-1">Klicken für Querformat-Ansicht / Detaillierte Utility</p>
+<p class="text-xs text-white/50 text-center mt-1">Klicken für Querformat-Ansicht / Detaillierte Utility</p>
             </div>
-</div>
+        </div>
 
         <!-- 4. DAO Screen -->
         <div id="dao-screen" class="app-screen space-y-4">
@@ -934,8 +915,9 @@
             document.getElementById('close-nft-modal-btn').addEventListener('click', () => {
                 document.getElementById('nft-detail-modal').style.display = 'none';
             });
+
             // ZURÜCK Button im NFT Modal
-            document.querySelector('#nft-detail-modal button').addEventListener('click', () => {
+            document.querySelector('#nft-detail-modal .modal button').addEventListener('click', () => {
                 document.getElementById('nft-detail-modal').style.display = 'none';
             });
 // --- Fullscreen Image / Rotation Logic ---