Spaces:
Running
Running
| <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> | |