Spaces:

Shinhati2023
/

MHA_OS_SIM

Running

App Files Files Community

Shinhati2023 commited on Nov 28, 2025

Commit

5eabc40

verified ·

1 Parent(s): 2a13748

Update index.html

Browse files

Files changed (1) hide show

index.html +114 -44

index.html CHANGED Viewed

@@ -4,9 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Phone OS - Hero Edition</title>
-    <!-- Link to your style.css -->
     <link rel="stylesheet" href="style.css">
-    <!-- FontAwesome for Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
@@ -53,10 +51,11 @@
             </div>
         </div>
-        <!-- === IMAGE VIEWER MODAL (Full Screen) === -->
         <div id="image-viewer" class="image-modal">
             <div class="close-modal" onclick="closeImageViewer()"><i class="fas fa-times"></i></div>
             <img id="full-image" src="" alt="Full View">
         </div>
         <!-- === APPS === -->
@@ -79,17 +78,21 @@
             </div>
         </div>
-        <!-- GALLERY -->
         <div id="app-gallery" class="app-window">
             <div class="app-header">
                 <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()"></i>
                 <span class="app-title">Gallery</span>
             </div>
             <div class="app-content">
                 <div class="gallery-grid" id="gallery-container">
                     <!-- Images injected via JS -->
                 </div>
             </div>
         </div>
         <!-- FILES -->
@@ -125,6 +128,7 @@
                 <div class="setting-row"><span>Wi-Fi</span><div class="toggle active"></div></div>
                 <div class="setting-row"><span>One For All</span><div class="toggle active"></div></div>
                 <div class="setting-row"><span>Notifications</span><div class="toggle"></div></div>
             </div>
         </div>
@@ -144,7 +148,7 @@
     </div>
     <script>
-        // 1. Clock Logic
         function updateClock() {
             const now = new Date();
             const hours = String(now.getHours()).padStart(2, '0');
@@ -154,16 +158,12 @@
         setInterval(updateClock, 1000);
         updateClock();
-        // 2. Navigation Logic
         function openApp(appName) {
             closeAllApps();
             const app = document.getElementById(`app-${appName}`);
-            if (app) {
-                app.classList.add('open');
-            }
-            if (appName === 'terminal') {
-                runCppSimulation();
-            }
         }
         function closeAllApps() {
@@ -172,11 +172,107 @@
             closeImageViewer();
         }
-        // 3. Image Viewer Logic
-        function openImageViewer(src) {
             const modal = document.getElementById('image-viewer');
             const img = document.getElementById('full-image');
             img.src = src;
             modal.classList.add('active');
         }
@@ -184,38 +280,10 @@
             document.getElementById('image-viewer').classList.remove('active');
         }
-        // 4. Populate Gallery
-        const galleryContainer = document.getElementById('gallery-container');
-        const animeImages = [
-            // 1. Deku (UPDATED)
-            'https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/users/7RMKGJwkwm1oP/upngQl8xGxoX23E_1764351993.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6588.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T190811Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=1a43e069fa66c1712ee04bd515d741dab0a652254cbe652fcd8b267a62e2c234',
-            // 2. Bakugo (UPDATED)
-            'https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/users/7RMKGJwkwm1oP/NF3kWJlONBmeNmT_1764357029.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6587.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T191052Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=6950d847664cbd1ac0681e56aaed71e5ebb2ba84b56dc7d23f798c950bf3b009',
-            // 3. Lemillion
-            'https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/anonymous/24hVBYnR0sej5YO_1764352426.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6589.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T175357Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=ea6c28b4ce1b8aaa133028520a58ba227181619a67eb31fef8b2f4b0fb393d94',
-            // 4. Endeavor
-            'https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/anonymous/YU0KZoE6AJAh7Cr_1764352615.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6591.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T175708Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=25de618665bcf322783abd21c80e0e5ce4d110ff2bd8fe3a283175ddafa229eb',
-            // 5. Aizawa
-            'https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/users/7RMKGJwkwm1oP/y9t8U09Eay1TR5q_1764352783.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6593.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T175954Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=f762d0f7c4e9101f60def05f199e57faf827419e5e2e3271dc9cd3c426e54c13',
-            // 6. Star and Stripes
-            'https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/users/7RMKGJwkwm1oP/iq41Z54egsDcuRy_1764352905.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6229.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T180200Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=c161b9af91c01714475774139de440e466fd4954e871d2e92fef7b2733fe7f36'
-        ];
-        animeImages.forEach(url => {
-            const div = document.createElement('div');
-            div.className = 'gallery-item';
-            // We use quotes inside url() because these links contain complex characters
-            div.style.backgroundImage = `url('${url}')`;
-            div.onclick = () => openImageViewer(url);
-            galleryContainer.appendChild(div);
-        });
-        // 5. C++ Simulation
         function runCppSimulation() {
             const terminal = document.getElementById('terminal-content');
             terminal.innerHTML = "";
             const cppCode = `
 #include <iostream>
 using namespace std;
@@ -235,7 +303,6 @@ int main() {
     return 0;
 }
             `;
             let i = 0;
             const typeWriter = () => {
                 if (i < cppCode.length) {
@@ -246,6 +313,9 @@ int main() {
             };
             typeWriter();
         }
     </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Phone OS - Hero Edition</title>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
             </div>
         </div>
+        <!-- === IMAGE VIEWER MODAL === -->
         <div id="image-viewer" class="image-modal">
             <div class="close-modal" onclick="closeImageViewer()"><i class="fas fa-times"></i></div>
             <img id="full-image" src="" alt="Full View">
+            <div id="image-caption" style="position:absolute; bottom:30px; color:white; background:rgba(0,0,0,0.5); padding:5px 10px; border-radius:10px;"></div>
         </div>
         <!-- === APPS === -->
             </div>
         </div>
+        <!-- GALLERY APP (UPDATED WITH UPLOAD) -->
         <div id="app-gallery" class="app-window">
             <div class="app-header">
                 <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()"></i>
                 <span class="app-title">Gallery</span>
+                <!-- UPLOAD BUTTON -->
+                <i class="fas fa-plus" onclick="triggerUpload()" style="color:#007AFF; cursor:pointer; font-size:20px;"></i>
             </div>
             <div class="app-content">
                 <div class="gallery-grid" id="gallery-container">
                     <!-- Images injected via JS -->
                 </div>
             </div>
+            <!-- Hidden File Input -->
+            <input type="file" id="file-upload" accept="image/*" style="display:none" onchange="handleFileUpload(event)">
         </div>
         <!-- FILES -->
                 <div class="setting-row"><span>Wi-Fi</span><div class="toggle active"></div></div>
                 <div class="setting-row"><span>One For All</span><div class="toggle active"></div></div>
                 <div class="setting-row"><span>Notifications</span><div class="toggle"></div></div>
+                <div class="setting-row" onclick="clearLocalData()" style="color:#ff3b30; cursor:pointer; justify-content:center;">Reset Gallery Data</div>
             </div>
         </div>
     </div>
     <script>
+        /* --- 1. SYSTEM LOGIC --- */
         function updateClock() {
             const now = new Date();
             const hours = String(now.getHours()).padStart(2, '0');
         setInterval(updateClock, 1000);
         updateClock();
         function openApp(appName) {
             closeAllApps();
             const app = document.getElementById(`app-${appName}`);
+            if (app) app.classList.add('open');
+            if (appName === 'terminal') runCppSimulation();
+            if (appName === 'gallery') renderGallery(); // Refresh gallery on open
         }
         function closeAllApps() {
             closeImageViewer();
         }
+        /* --- 2. GALLERY & UPLOAD LOGIC --- */
+        // Initial Data (The Provided Links)
+        const defaultCharacters = [
+            { name: "Deku", url: "https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/users/7RMKGJwkwm1oP/upngQl8xGxoX23E_1764351993.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6588.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T190811Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=1a43e069fa66c1712ee04bd515d741dab0a652254cbe652fcd8b267a62e2c234" },
+            { name: "Bakugo", url: "https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/users/7RMKGJwkwm1oP/NF3kWJlONBmeNmT_1764357029.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6587.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T191052Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=6950d847664cbd1ac0681e56aaed71e5ebb2ba84b56dc7d23f798c950bf3b009" },
+            { name: "Lemillion", url: "https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/anonymous/24hVBYnR0sej5YO_1764352426.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6589.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T175357Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=ea6c28b4ce1b8aaa133028520a58ba227181619a67eb31fef8b2f4b0fb393d94" },
+            { name: "Endeavor", url: "https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/anonymous/YU0KZoE6AJAh7Cr_1764352615.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6591.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T175708Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=25de618665bcf322783abd21c80e0e5ce4d110ff2bd8fe3a283175ddafa229eb" },
+            { name: "Aizawa", url: "https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/users/7RMKGJwkwm1oP/y9t8U09Eay1TR5q_1764352783.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6593.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T175954Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=f762d0f7c4e9101f60def05f199e57faf827419e5e2e3271dc9cd3c426e54c13" },
+            { name: "Star and Stripes", url: "https://zippyshare.c505c4ada4c6e4e79e0c43ae377c115c.r2.cloudflarestorage.com/users/7RMKGJwkwm1oP/iq41Z54egsDcuRy_1764352905.jpeg?response-content-disposition=attachment%3B%20filename%3D%22IMG_6229.jpeg%22&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=aeed1e70264ea81f25dbe24821aae76e%2F20251128%2Fapac%2Fs3%2Faws4_request&X-Amz-Date=20251128T180200Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=c161b9af91c01714475774139de440e466fd4954e871d2e92fef7b2733fe7f36" }
+        ];
+        // 1. RENDER FUNCTION
+        function renderGallery() {
+            const container = document.getElementById('gallery-container');
+            container.innerHTML = ''; // Clear
+            // Merge default data with LocalStorage data
+            const savedData = JSON.parse(localStorage.getItem('heroGallery')) || {};
+            // Create a working list based on defaults
+            let displayList = [...defaultCharacters];
+            // Check if user has uploaded a custom override for any character
+            displayList = displayList.map(char => {
+                if (savedData[char.name]) {
+                    return { name: char.name, url: savedData[char.name] }; // Use uploaded image
+                }
+                return char;
+            });
+            // Add any NEW characters the user uploaded (that weren't in defaults)
+            Object.keys(savedData).forEach(key => {
+                // If this key is NOT in the default list, add it
+                if (!displayList.find(c => c.name === key)) {
+                    displayList.push({ name: key, url: savedData[key] });
+                }
+            });
+            // Draw to screen
+            displayList.forEach(item => {
+                const div = document.createElement('div');
+                div.className = 'gallery-item';
+                div.style.backgroundImage = `url('${item.url}')`;
+                div.onclick = () => openImageViewer(item.url, item.name);
+                // Optional: Add name label
+                /*
+                const label = document.createElement('div');
+                label.innerText = item.name;
+                label.style.cssText = "position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.7); color:white; font-size:9px; padding:2px; text-align:center;";
+                div.appendChild(label);
+                */
+                container.appendChild(div);
+            });
+        }
+        // 2. UPLOAD HANDLER
+        function triggerUpload() {
+            document.getElementById('file-upload').click();
+        }
+        function handleFileUpload(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            // Ask for Name Mapping
+            const charName = prompt("Who is this character? (e.g., 'Aizawa', 'Deku')");
+            if (!charName) return;
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const base64Image = e.target.result;
+                // Save to Local Storage (Key = Name, Value = Base64 Data)
+                const savedData = JSON.parse(localStorage.getItem('heroGallery')) || {};
+                savedData[charName] = base64Image;
+                localStorage.setItem('heroGallery', JSON.stringify(savedData));
+                // Re-render
+                renderGallery();
+                alert(`Updated image for: ${charName}`);
+            };
+            reader.readAsDataURL(file);
+        }
+        function clearLocalData() {
+            if(confirm("Reset all uploaded gallery photos?")) {
+                localStorage.removeItem('heroGallery');
+                renderGallery();
+            }
+        }
+        // 3. VIEWER
+        function openImageViewer(src, caption) {
             const modal = document.getElementById('image-viewer');
             const img = document.getElementById('full-image');
+            const cap = document.getElementById('image-caption');
             img.src = src;
+            cap.innerText = caption || "";
             modal.classList.add('active');
         }
             document.getElementById('image-viewer').classList.remove('active');
         }
+        /* --- 3. C++ SIMULATION --- */
         function runCppSimulation() {
             const terminal = document.getElementById('terminal-content');
             terminal.innerHTML = "";
             const cppCode = `
 #include <iostream>
 using namespace std;
     return 0;
 }
             `;
             let i = 0;
             const typeWriter = () => {
                 if (i < cppCode.length) {
             };
             typeWriter();
         }
+        // Initialize Gallery on Load
+        renderGallery();
     </script>
 </body>
 </html>