Spaces:

Shinhati2023
/

MHA_OS_SIM

Running

File size: 16,510 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <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 class="phone">
        <div class="notch"></div>
        
        <!-- WALLPAPER -->
        <div class="screen" style="background: url('https://jsktrsim.tiiny.site/IMG_6578.jpeg') no-repeat center center/cover;">
            
            <!-- Header Info -->
            <div class="status-bar">
                <span id="clock">12:00</span>
                <span><i class="fas fa-signal"></i> 5G <i class="fas fa-battery-three-quarters"></i></span>
            </div>

            <!-- Home Screen Apps -->
            <div class="app-grid">
                <div class="app-icon" onclick="openApp('browser')">
                    <div class="icon-box icon-browser"><i class="fas fa-globe"></i></div>
                    <span class="app-name">Browser</span>
                </div>
                
                <div class="app-icon" onclick="openApp('gallery')">
                    <div class="icon-box icon-gallery"><i class="fas fa-photo-video"></i></div>
                    <span class="app-name">Gallery</span>
                </div>
                
                <div class="app-icon" onclick="openApp('files')">
                    <div class="icon-box icon-files"><i class="fas fa-folder-open"></i></div>
                    <span class="app-name">Files</span>
                </div>
                
                <div class="app-icon" onclick="openApp('settings')">
                    <div class="icon-box icon-settings"><i class="fas fa-sliders-h"></i></div>
                    <span class="app-name">Settings</span>
                </div>

                 <!-- Terminal -->
                 <div class="app-icon" onclick="openApp('terminal')">
                    <div class="icon-box icon-code"><i class="fas fa-terminal"></i></div>
                    <span class="app-name">C++ Shell</span>
                </div>
            </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 === -->

        <!-- BROWSER -->
        <div id="app-browser" class="app-window">
            <div class="app-header">
                <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()"></i>
                <span class="app-title">Web Browser</span>
            </div>
            <div class="app-content">
                <div style="background:#333; padding:10px; border-radius:10px; text-align:center; color:#888; margin-bottom:20px; font-size:12px;">
                    <i class="fas fa-lock"></i> hero-net.jp
                </div>
                <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; height:60%; color:#555;">
                    <i class="fas fa-dizzy" style="font-size: 40px; margin-bottom:15px;"></i>
                    <p>404 Not Found</p>
                    <p style="font-size:10px;">The server is refusing the connection.</p>
                </div>
            </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 id="app-files" class="app-window">
            <div class="app-header">
                <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()"></i>
                <span class="app-title">My Files</span>
            </div>
            <div class="app-content">
                <div class="file-item">
                    <div class="file-left"><i class="fas fa-file-pdf" style="color: #e74c3c;"></i>
                    <div class="file-details"><span class="file-name">Hero_License.pdf</span><span class="file-size">2.4 MB</span></div></div>
                </div>
                <div class="file-item">
                    <div class="file-left"><i class="fas fa-file-code" style="color: #3498db;"></i>
                    <div class="file-details"><span class="file-name">smash.cpp</span><span class="file-size">14 KB</span></div></div>
                </div>
                <div class="file-item">
                    <div class="file-left"><i class="fas fa-file-image" style="color: #f1c40f;"></i>
                    <div class="file-details"><span class="file-name">UA_High.jpg</span><span class="file-size">4.2 MB</span></div></div>
                </div>
            </div>
        </div>

        <!-- SETTINGS -->
        <div id="app-settings" class="app-window">
            <div class="app-header">
                <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()"></i>
                <span class="app-title">Settings</span>
            </div>
            <div class="app-content">
                <div class="setting-row"><span>Airplane Mode</span><div class="toggle"></div></div>
                <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>

        <!-- TERMINAL (C++) -->
        <div id="app-terminal" class="app-window terminal-window">
            <div class="app-header" style="background:#000; border-bottom:1px solid #333; color:#0f0;">
                <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()" style="color:#0f0;"></i>
                <span class="app-title">root@hero_os:~</span>
            </div>
            <div class="app-content terminal-text">
                <div id="terminal-content"></div>
            </div>
        </div>

        <!-- HOME BAR -->
        <div class="home-bar" onclick="closeAllApps()"></div>
    </div>

    <script>
        /* --- 1. SYSTEM LOGIC --- */
        function updateClock() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            document.getElementById('clock').textContent = `${hours}:${minutes}`;
        }
        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() {
            const apps = document.querySelectorAll('.app-window');
            apps.forEach(app => app.classList.remove('open'));
            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');
        }

        function closeImageViewer() {
            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;

// HERO OS KERNEL V.PLUS.ULTRA

int main() {
    cout << "Initializing Quirk Factors..." << endl;
    cout << "One For All: [ONLINE]" << endl;
    cout << "Compiling Smash.cpp..." << endl;
    
    for(int i=0; i<100; i++) {
        // Optimizing Power Output
    }
    
    cout << "PLUS ULTRA!!" << endl;
    return 0;
}
            `;
            let i = 0;
            const typeWriter = () => {
                if (i < cppCode.length) {
                    terminal.textContent += cppCode.charAt(i);
                    i++;
                    setTimeout(typeWriter, 10);
                }
            };
            typeWriter();
        }

        // Initialize Gallery on Load
        renderGallery();
    </script>
</body>
</html>