Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>⚡ Lightning Fast App Compiler + Live Stream</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap'); | |
| body { font-family: 'Poppins', sans-serif; background: #0b0c10; color: #c5c6c7; margin: 0; padding: 30px; display: flex; justify-content: center;} | |
| .main-container { width: 95%; max-width: 1200px; display: flex; gap: 40px; flex-wrap: wrap; } | |
| .control-panel, .emulator-panel { background: #1f2833; padding: 40px; border-radius: 20px; box-shadow: 0px 8px 30px rgba(0,0,0,0.4); flex: 1; text-align: center; border: 1px solid #45a29e;} | |
| h2 { color: #66fcf1; margin-bottom: 5px; font-weight: 700; } | |
| p.subtitle { color: #8e959d; font-size: 0.9em; margin-bottom: 30px;} | |
| .upload-area { background: #0b0c10; border: 2px dashed #45a29e; border-radius: 12px; padding: 40px; transition: 0.3s; cursor: pointer;} | |
| .upload-area:hover { background: rgba(102, 252, 241, 0.05); } | |
| .upload-area i { font-size: 2em; margin-bottom: 15px; color:#66fcf1;} | |
| .file-label { font-size: 1.1em; color: #fff; cursor:pointer;} | |
| input[type="file"] { display: none; } | |
| button { background-color: #45a29e; background-image: linear-gradient(145deg, #66fcf1 0%, #45a29e 100%); color: #000; border: none; padding: 12px 30px; border-radius: 25px; margin-top: 20px; cursor: pointer; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; box-shadow: 0px 0px 10px rgba(102,252,241, 0.2); pointer-events: none;} | |
| button.active { pointer-events: auto; background-image: linear-gradient(145deg, #45a29e 0%, #2f6966 100%);} | |
| #progress { margin-top: 20px; display: none; align-items:center; flex-direction: column; justify-content:center; } | |
| .spinner { border: 4px solid #1f2833; border-top: 4px solid #66fcf1; border-radius: 50%; width: 40px; height: 40px; animation: spin 0.8s linear infinite;} | |
| .status-txt { margin-top:10px; color:#45a29e; font-weight:600;} | |
| @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |
| /* Mobile Cover Framing */ | |
| .emulator-container { margin:auto; width: 330px; height: 710px; background:#0b0c10; border-radius:36px; padding: 10px; border:4px solid #45a29e; box-shadow:0 15px 35px rgba(0,0,0,0.5); position:relative;} | |
| .emulator-screen { background:#111; border-radius:30px; width: 100%; height:100%; overflow:hidden; border:2px solid #232323;} | |
| .mobile-iframe { width:100%; height:100%; border:0; pointer-events:auto; } | |
| .device-notch { position:absolute; top: 15px; left:50%; transform:translateX(-50%); width:40%; height: 20px; background: #0b0c10; border-radius:0 0 15px 15px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="main-container"> | |
| <!-- Code Input Panel --> | |
| <div class="control-panel"> | |
| <h2>🛠 Cloud Compile System</h2> | |
| <p class="subtitle">Drop ZIP with Gradlew root files to deploy.</p> | |
| <div class="upload-area" id="upbox" onclick="document.getElementById('fileup').click()"> | |
| <h1 style="color:#66fcf1;margin:0;">📦</h1> | |
| <label class="file-label">Click / Browse to Pick Project Zip.</label> | |
| <input type="file" id="fileup" accept=".zip" onchange="fileSelected()"> | |
| </div> | |
| <h5 id="fname" style="color:white;">- Waiting input... -</h5> | |
| <button id="upload-btn" onclick="startExecution()">Build & Run App ⚡</button> | |
| <!-- Live Loading Spinner --> | |
| <div id="progress"> | |
| <div class="spinner"></div> | |
| <p class="status-txt" id="sys-message">Compiling App on Cloud Server...<br>Please wait a moment ☁️..</p> | |
| </div> | |
| </div> | |
| <!-- Mobile View Emulator Panel --> | |
| <div class="emulator-panel"> | |
| <h2>📱 Live Web Mobile Preview</h2> | |
| <p class="subtitle">App will launch here immediately after compile.</p> | |
| <div class="emulator-container"> | |
| <div class="device-notch"></div> | |
| <div class="emulator-screen" id="emulator_box"> | |
| <h4 style="margin-top:200px; color:#45a29e; animation: pulse 2s infinite alternate;">No active Live signal</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let myFile = null; | |
| function fileSelected(){ | |
| myFile = document.getElementById('fileup').files[0]; | |
| if(myFile){ | |
| document.getElementById('fname').innerHTML = "Selected: " + myFile.name; | |
| document.getElementById('upload-btn').className = "active"; | |
| } | |
| } | |
| function startExecution() { | |
| if(!myFile) return alert("Select standard ZIP first!"); | |
| document.getElementById('upload-btn').style.display = 'none'; | |
| document.getElementById('upbox').style.display = 'none'; | |
| document.getElementById('progress').style.display = 'flex'; | |
| const fd = new FormData(); | |
| fd.append('file', myFile); | |
| // Calls Python Backend on Space | |
| fetch('/upload_project', { | |
| method: 'POST', body: fd | |
| }) | |
| .then(rsp => rsp.json()) | |
| .then(result => { | |
| document.getElementById('progress').style.display = 'none'; | |
| document.getElementById('upload-btn').style.display = 'inline-block'; | |
| document.getElementById('upbox').style.display = 'block'; | |
| if(result.success === true) { | |
| document.getElementById('sys-message').innerText = "Running!"; | |
| // Add exact Live link directly into UI HTML iframe viewer | |
| document.getElementById('emulator_box').innerHTML = ` | |
| <iframe class="mobile-iframe" | |
| src="${result.preview_url}" | |
| scrolling="no" allow="autoplay;fullscreen" | |
| ></iframe>`; | |
| } else { | |
| alert("Compilation Failed!\n" + result.message); | |
| } | |
| }) | |
| .catch(err => { | |
| document.getElementById('progress').style.display = 'none'; | |
| alert("System Connection Error! Check your server status."); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |