Hugging Face's logo

Spaces:
Sachin5112
/
Android
Running

App Files Community
Sahil commited on
Commit
71e4f13
·
verified ·
1 Parent(s): 8e6e1ff

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +54 -48
index.html CHANGED
@@ -1,99 +1,105 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <meta charset="utf-8">
5
- <title>Android Emulator in Browser</title>
6
  <script src="https://copy.sh/v86/build/libv86.js"></script>
7
  <style>
8
  body {
9
- margin: 0;
10
- background: #000;
11
- color: #fff;
12
  display: flex;
13
  flex-direction: column;
14
  align-items: center;
15
  justify-content: center;
16
  height: 100vh;
17
- font-family: sans-serif;
18
  }
19
  #screen {
20
- width: 360px;
21
- height: 720px;
22
- border: 12px solid #111;
23
- border-radius: 24px;
 
24
  overflow: hidden;
25
- background: #000;
26
- }
27
- canvas {
28
- width: 100%;
29
- height: 100%;
30
  }
31
  #loading {
32
- position: absolute;
33
- top: 50%;
34
- transform: translateY(-50%);
35
- width: 80%;
36
- max-width: 300px;
37
- height: 20px;
38
- border: 2px solid #444;
 
39
  border-radius: 10px;
40
  overflow: hidden;
41
- background: #111;
42
  }
43
- #progress {
44
- height: 100%;
45
  width: 0%;
46
- background: linear-gradient(90deg, #03a9f4, #00e5ff);
47
- transition: width 0.3s ease;
 
48
  }
49
  #statusText {
50
  margin-top: 10px;
51
- color: #aaa;
52
  font-size: 14px;
53
- text-align: center;
54
  }
55
  </style>
56
  </head>
57
  <body>
58
- <div id="screen"><canvas id="screen-canvas"></canvas></div>
59
- <div id="loading"><div id="progress"></div></div>
60
- <div id="statusText">Loading Android system...</div>
 
 
 
 
 
61
 
62
  <script>
63
- const progressBar = document.getElementById("progress");
64
  const statusText = document.getElementById("statusText");
65
  const loading = document.getElementById("loading");
66
 
 
 
 
67
  const emulator = new V86({
68
  wasm_path: "https://copy.sh/v86/build/v86.wasm",
69
  memory_size: 512 * 1024 * 1024,
70
  vga_memory_size: 8 * 1024 * 1024,
71
- cdrom: {
72
- // Smaller ISO → faster boot (Android 5.1)
73
- url: "https://archive.org/download/android-x86_64-5.1-r1/android-x86_64-5.1-r1.iso"
74
- },
75
  screen_container: document.getElementById("screen"),
 
76
  autostart: true,
77
  });
78
 
79
- // Show loading progress
80
- emulator.add_listener("download-progress", function(e) {
81
  if (e.total && e.loaded) {
82
  const percent = Math.floor((e.loaded / e.total) * 100);
 
 
83
  progressBar.style.width = percent + "%";
84
- statusText.textContent = "Downloading Android (" + percent + "%)";
 
 
85
  }
86
  });
87
 
88
- // Once emulator ready
89
- emulator.add_listener("emulator-ready", function() {
90
- statusText.textContent = "Booting Android...";
 
 
 
91
  });
92
 
93
- // When screen output begins → hide loading UI
94
- emulator.add_listener("screen-set-mode", function() {
95
- loading.remove();
96
- statusText.remove();
97
  });
98
  </script>
99
  </body>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <title>Free Android Emulator</title>
6
  <script src="https://copy.sh/v86/build/libv86.js"></script>
7
  <style>
8
  body {
9
+ font-family: sans-serif;
10
+ background: #0d1117;
11
+ color: white;
12
  display: flex;
13
  flex-direction: column;
14
  align-items: center;
15
  justify-content: center;
16
  height: 100vh;
17
+ margin: 0;
18
  }
19
  #screen {
20
+ width: 800px;
21
+ height: 600px;
22
+ background: black;
23
+ border: 3px solid #444;
24
+ border-radius: 12px;
25
  overflow: hidden;
 
 
 
 
 
26
  }
27
  #loading {
28
+ width: 800px;
29
+ margin-top: 20px;
30
+ text-align: center;
31
+ }
32
+ #progress-container {
33
+ width: 100%;
34
+ height: 18px;
35
+ background: #333;
36
  border-radius: 10px;
37
  overflow: hidden;
38
+ margin-top: 5px;
39
  }
40
+ #progress-bar {
 
41
  width: 0%;
42
+ height: 100%;
43
+ background: linear-gradient(90deg, #00ff9d, #0077ff);
44
+ transition: width 0.2s;
45
  }
46
  #statusText {
47
  margin-top: 10px;
 
48
  font-size: 14px;
49
+ color: #aaa;
50
  }
51
  </style>
52
  </head>
53
  <body>
54
+ <h2>Android Emulator (WebAssembly)</h2>
55
+ <div id="screen"></div>
56
+ <div id="loading">
57
+ <div id="progress-container">
58
+ <div id="progress-bar"></div>
59
+ </div>
60
+ <div id="statusText">Starting emulator...</div>
61
+ </div>
62
 
63
  <script>
64
+ const progressBar = document.getElementById("progress-bar");
65
  const statusText = document.getElementById("statusText");
66
  const loading = document.getElementById("loading");
67
 
68
+ // ✅ Lightweight ISO (fast mirror)
69
+ const ANDROID_ISO = "https://dl.linuxvmimages.com/android-x86/android-x86-5.1.iso";
70
+
71
  const emulator = new V86({
72
  wasm_path: "https://copy.sh/v86/build/v86.wasm",
73
  memory_size: 512 * 1024 * 1024,
74
  vga_memory_size: 8 * 1024 * 1024,
 
 
 
 
75
  screen_container: document.getElementById("screen"),
76
+ cdrom: { url: ANDROID_ISO },
77
  autostart: true,
78
  });
79
 
80
+ emulator.add_listener("download-progress", (e) => {
 
81
  if (e.total && e.loaded) {
82
  const percent = Math.floor((e.loaded / e.total) * 100);
83
+ const mbLoaded = (e.loaded / (1024 * 1024)).toFixed(1);
84
+ const mbTotal = (e.total / (1024 * 1024)).toFixed(1);
85
  progressBar.style.width = percent + "%";
86
+ statusText.textContent = `Downloading Android system: ${mbLoaded} / ${mbTotal} MB (${percent}%)`;
87
+ } else {
88
+ statusText.textContent = "Preparing Android system...";
89
  }
90
  });
91
 
92
+ emulator.add_listener("emulator-ready", () => {
93
+ statusText.textContent = "Booting Android system...";
94
+ });
95
+
96
+ emulator.add_listener("screen-set-mode", () => {
97
+ loading.style.display = "none";
98
  });
99
 
100
+ emulator.add_listener("download-error", (err) => {
101
+ statusText.textContent = "❌ Download failed. Check internet connection.";
102
+ console.error(err);
 
103
  });
104
  </script>
105
  </body>