Promote version c488bc7 to main

Promoted commit c488bc72de506137a97a6d61f85465a265fe5db1 to main branch

index.html

@@ -291,10 +291,10 @@
                 <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 utility-image">
-<p class="text-xs text-white/50 text-center mt-1">Klicken für Vollbild-Ansicht / Detaillierte Utility</p>
+                     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>
             </div>
-</div>
+        </div>
 
         <!-- 4. DAO Screen -->
         <div id="dao-screen" class="app-screen space-y-4">
@@ -663,23 +663,29 @@
                 }
             ]
         };
-        // Firebase/Auth Setup (Commented out for now to prevent errors)
-        // import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
-        // import { getAuth, signInAnonymously, signInWithCustomToken } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
-        // import { getFirestore } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
+
+        // --- Firebase/Auth Setup (For Compliance) ---
+        // This is necessary for the Canvas environment but is not used to fetch mock data.
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
+        import { getAuth, signInAnonymously, signInWithCustomToken } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
+        import { getFirestore } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
         
-        // const app = Object.keys(firebaseConfig).length > 0 ? initializeApp(firebaseConfig) : null;
-        // const db = app ? getFirestore(app) : null;
-        // const auth = app ? getAuth(app) : null;
-
-        // if (auth) {
-        //     const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;
-        // if (initialAuthToken) {
-        //     signInWithCustomToken(auth, initialAuthToken).catch(console.error);
-        // } else {
-        //     signInAnonymously(auth).catch(console.error);
-        // }
-let simcoinChartInstance = null;
+        const app = Object.keys(firebaseConfig).length > 0 ? initializeApp(firebaseConfig) : null;
+        const db = app ? getFirestore(app) : null;
+        const auth = app ? getAuth(app) : null;
+
+        if (auth) {
+            const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;
+            if (initialAuthToken) {
+                signInWithCustomToken(auth, initialAuthToken).catch(console.error);
+            } else {
+                signInAnonymously(auth).catch(console.error);
+            }
+        }
+        // ---------------------------------------------
+
+
+        let simcoinChartInstance = null;
         let nftChartInstance = null;
 
         /**
@@ -914,32 +920,46 @@ let simcoinChartInstance = null;
             document.querySelector('#nft-detail-modal .modal button').addEventListener('click', () => {
                 document.getElementById('nft-detail-modal').style.display = 'none';
             });
-            // --- Fullscreen Image Logic ---
+// --- Fullscreen Image / Rotation Logic ---
+            const smartphoneContainer = document.getElementById('smartphone-container');
             const utilityChartPreview = document.getElementById('utility-chart-preview');
-            const utilityImage = utilityChartPreview.querySelector('.utility-image');
             const fullscreenImageModal = document.getElementById('fullscreen-image-modal');
             const fullscreenImage = document.getElementById('fullscreen-image');
             const closeImageModalBtn = document.getElementById('close-image-modal-btn');
 
-            utilityChartPreview.addEventListener('click', (e) => {
-                e.stopPropagation();
-                fullscreenImage.src = utilityImage.getAttribute('data-full-src');
-                fullscreenImageModal.classList.remove('hidden');
+            utilityChartPreview.addEventListener('click', () => {
+                const imgSrc = utilityChartPreview.querySelector('img').getAttribute('data-full-src');
+                fullscreenImage.src = imgSrc;
+                
+                // 1. Smartphone-Container in den Landscape-Modus versetzen
+                smartphoneContainer.classList.add('landscape-mode');
+                
+                // 2. Fullscreen Modal anzeigen
                 fullscreenImageModal.style.display = 'flex';
+                
+                // 3. Andere App-Screens ausblenden, um den Fokus auf das Bild zu legen
+                document.querySelectorAll('.app-screen').forEach(screen => screen.style.display = 'none');
+                
+                // 4. Nav Bar ausblenden, um das immersive Erlebnis zu simulieren
+                document.querySelector('nav').style.display = 'none';
+                document.querySelector('.h-10').style.display = 'none'; // Top bar ausblenden
             });
 
             closeImageModalBtn.addEventListener('click', () => {
+                // 1. Fullscreen Modal ausblenden
                 fullscreenImageModal.style.display = 'none';
-                fullscreenImageModal.classList.add('hidden');
-            });
-
-            // Close modal when clicking outside the image
-            fullscreenImageModal.addEventListener('click', (e) => {
-                if (e.target === fullscreenImageModal) {
-                    fullscreenImageModal.style.display = 'none';
-                    fullscreenImageModal.classList.add('hidden');
+                
+                // 2. Smartphone-Container in den Portrait-Modus zurückversetzen
+                smartphoneContainer.classList.remove('landscape-mode');
+                
+                // 3. Nav Bar und Top Bar wieder einblenden
+                document.querySelector('nav').style.display = 'flex';
+                document.querySelector('.h-10').style.display = 'flex';
+                
+                // 4. Zurück zum NFT-Screen navigieren
+                showScreen('nfts');
             });
-});
+        });
 
     </script>
 </body>