Hugging Face's logo

Spaces:
Shinhati2023
/
MHA_OS_SIM
Running

App Files Community
Shinhati2023 commited on
Commit
86a60e4
·
verified ·
1 Parent(s): 87b5006

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +245 -18
index.html CHANGED
@@ -1,19 +1,246 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Phone OS - Custom Edition</title>
7
+ <!-- Link to your style.css -->
8
+ <link rel="stylesheet" href="style.css">
9
+ <!-- FontAwesome for Icons -->
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ </head>
12
+ <body>
13
+
14
+ <div class="phone">
15
+ <div class="notch"></div>
16
+
17
+ <!-- WALLPAPER: Applied directly via inline style -->
18
+ <div class="screen" style="background: url('https://jsktrsim.tiiny.site/IMG_6578.jpeg') no-repeat center center/cover;">
19
+
20
+ <!-- Header Info -->
21
+ <div class="status-bar">
22
+ <span id="clock">12:00</span>
23
+ <span><i class="fas fa-signal"></i> 5G <i class="fas fa-battery-three-quarters"></i></span>
24
+ </div>
25
+
26
+ <!-- Home Screen Apps -->
27
+ <div class="app-grid">
28
+ <div class="app-icon" onclick="openApp('browser')">
29
+ <div class="icon-box icon-browser"><i class="fas fa-globe"></i></div>
30
+ <span class="app-name">Browser</span>
31
+ </div>
32
+
33
+ <div class="app-icon" onclick="openApp('gallery')">
34
+ <div class="icon-box icon-gallery"><i class="fas fa-photo-video"></i></div>
35
+ <span class="app-name">Gallery</span>
36
+ </div>
37
+
38
+ <div class="app-icon" onclick="openApp('files')">
39
+ <div class="icon-box icon-files"><i class="fas fa-folder-open"></i></div>
40
+ <span class="app-name">Files</span>
41
+ </div>
42
+
43
+ <div class="app-icon" onclick="openApp('settings')">
44
+ <div class="icon-box icon-settings"><i class="fas fa-sliders-h"></i></div>
45
+ <span class="app-name">Settings</span>
46
+ </div>
47
+
48
+ <!-- Terminal -->
49
+ <div class="app-icon" onclick="openApp('terminal')">
50
+ <div class="icon-box icon-code"><i class="fas fa-terminal"></i></div>
51
+ <span class="app-name">C++ Shell</span>
52
+ </div>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- === IMAGE VIEWER MODAL (Full Screen) === -->
57
+ <div id="image-viewer" class="image-modal">
58
+ <div class="close-modal" onclick="closeImageViewer()"><i class="fas fa-times"></i></div>
59
+ <img id="full-image" src="" alt="Full View">
60
+ </div>
61
+
62
+ <!-- === APPS === -->
63
+
64
+ <!-- BROWSER -->
65
+ <div id="app-browser" class="app-window">
66
+ <div class="app-header">
67
+ <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()"></i>
68
+ <span class="app-title">Web Browser</span>
69
+ </div>
70
+ <div class="app-content">
71
+ <div style="background:#333; padding:10px; border-radius:10px; text-align:center; color:#888; margin-bottom:20px; font-size:12px;">
72
+ <i class="fas fa-lock"></i> mha-fanclub.jp
73
+ </div>
74
+ <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; height:60%; color:#555;">
75
+ <i class="fas fa-dizzy" style="font-size: 40px; margin-bottom:15px;"></i>
76
+ <p>404 Not Found</p>
77
+ <p style="font-size:10px;">The server is refusing the connection.</p>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- GALLERY -->
83
+ <div id="app-gallery" class="app-window">
84
+ <div class="app-header">
85
+ <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()"></i>
86
+ <span class="app-title">Gallery</span>
87
+ </div>
88
+ <div class="app-content">
89
+ <div class="gallery-grid" id="gallery-container">
90
+ <!-- Images injected via JS -->
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- FILES -->
96
+ <div id="app-files" class="app-window">
97
+ <div class="app-header">
98
+ <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()"></i>
99
+ <span class="app-title">My Files</span>
100
+ </div>
101
+ <div class="app-content">
102
+ <div class="file-item">
103
+ <div class="file-left"><i class="fas fa-file-pdf" style="color: #e74c3c;"></i>
104
+ <div class="file-details"><span class="file-name">Hero_License.pdf</span><span class="file-size">2.4 MB</span></div></div>
105
+ </div>
106
+ <div class="file-item">
107
+ <div class="file-left"><i class="fas fa-file-code" style="color: #3498db;"></i>
108
+ <div class="file-details"><span class="file-name">smash.cpp</span><span class="file-size">14 KB</span></div></div>
109
+ </div>
110
+ <div class="file-item">
111
+ <div class="file-left"><i class="fas fa-file-image" style="color: #f1c40f;"></i>
112
+ <div class="file-details"><span class="file-name">UA_High.jpg</span><span class="file-size">4.2 MB</span></div></div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- SETTINGS -->
118
+ <div id="app-settings" class="app-window">
119
+ <div class="app-header">
120
+ <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()"></i>
121
+ <span class="app-title">Settings</span>
122
+ </div>
123
+ <div class="app-content">
124
+ <div class="setting-row"><span>Airplane Mode</span><div class="toggle"></div></div>
125
+ <div class="setting-row"><span>Wi-Fi</span><div class="toggle active"></div></div>
126
+ <div class="setting-row"><span>One For All</span><div class="toggle active"></div></div>
127
+ <div class="setting-row"><span>Notifications</span><div class="toggle"></div></div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- TERMINAL (C++) -->
132
+ <div id="app-terminal" class="app-window terminal-window">
133
+ <div class="app-header" style="background:#000; border-bottom:1px solid #333; color:#0f0;">
134
+ <i class="fas fa-chevron-left back-btn" onclick="closeAllApps()" style="color:#0f0;"></i>
135
+ <span class="app-title">root@hero_os:~</span>
136
+ </div>
137
+ <div class="app-content terminal-text">
138
+ <div id="terminal-content"></div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- HOME BAR -->
143
+ <div class="home-bar" onclick="closeAllApps()"></div>
144
+ </div>
145
+
146
+ <script>
147
+ // 1. Clock Logic
148
+ function updateClock() {
149
+ const now = new Date();
150
+ const hours = String(now.getHours()).padStart(2, '0');
151
+ const minutes = String(now.getMinutes()).padStart(2, '0');
152
+ document.getElementById('clock').textContent = `${hours}:${minutes}`;
153
+ }
154
+ setInterval(updateClock, 1000);
155
+ updateClock();
156
+
157
+ // 2. Navigation Logic
158
+ function openApp(appName) {
159
+ closeAllApps();
160
+ const app = document.getElementById(`app-${appName}`);
161
+ if (app) {
162
+ app.classList.add('open');
163
+ }
164
+ if (appName === 'terminal') {
165
+ runCppSimulation();
166
+ }
167
+ }
168
+
169
+ function closeAllApps() {
170
+ const apps = document.querySelectorAll('.app-window');
171
+ apps.forEach(app => app.classList.remove('open'));
172
+ closeImageViewer();
173
+ }
174
+
175
+ // 3. Image Viewer Logic
176
+ function openImageViewer(src) {
177
+ const modal = document.getElementById('image-viewer');
178
+ const img = document.getElementById('full-image');
179
+ img.src = src;
180
+ modal.classList.add('active');
181
+ }
182
+
183
+ function closeImageViewer() {
184
+ document.getElementById('image-viewer').classList.remove('active');
185
+ }
186
+
187
+ // 4. Populate Gallery with REAL Anime Photos
188
+ const galleryContainer = document.getElementById('gallery-container');
189
+
190
+ const animeImages = [
191
+ 'https://images4.alphacoders.com/610/610668.jpg', // Naruto
192
+ 'https://images2.alphacoders.com/694/694038.png', // Bleach (Ichigo)
193
+ 'https://images5.alphacoders.com/105/1054363.jpg', // MHA (Deku)
194
+ 'https://images3.alphacoders.com/133/1339965.jpeg', // Naruto Team 7
195
+ 'https://images3.alphacoders.com/116/1161205.jpg', // Bleach Captains
196
+ 'https://images3.alphacoders.com/878/878342.jpg' // All Might
197
+ ];
198
+
199
+ animeImages.forEach(url => {
200
+ const div = document.createElement('div');
201
+ div.className = 'gallery-item';
202
+ div.style.backgroundImage = `url(${url})`;
203
+ div.onclick = () => openImageViewer(url);
204
+ galleryContainer.appendChild(div);
205
+ });
206
+
207
+ // 5. C++ Simulation
208
+ function runCppSimulation() {
209
+ const terminal = document.getElementById('terminal-content');
210
+ terminal.innerHTML = "";
211
+
212
+ const cppCode = `
213
+ #include <iostream>
214
+ using namespace std;
215
+
216
+ // HERO OS KERNEL V.PLUS.ULTRA
217
+
218
+ int main() {
219
+ cout << "Initializing Quirk Factors..." << endl;
220
+ cout << "One For All: [ONLINE]" << endl;
221
+ cout << "Compiling Smash.cpp..." << endl;
222
+
223
+ for(int i=0; i<100; i++) {
224
+ // Optimizing Power Output
225
+ }
226
+
227
+ cout << "PLUS ULTRA!!" << endl;
228
+ return 0;
229
+ }
230
+ `;
231
+
232
+ let i = 0;
233
+ const typeWriter = () => {
234
+ if (i < cppCode.length) {
235
+ terminal.textContent += cppCode.charAt(i);
236
+ i++;
237
+ setTimeout(typeWriter, 10);
238
+ }
239
+ };
240
+ typeWriter();
241
+ }
242
+ </script>
243
+ </body>
244
  </html>
245
+
246
+