Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Android Tablet Control Center</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #4285f4; | |
| --secondary: #34a853; | |
| --danger: #ea4335; | |
| --warning: #fbbc05; | |
| --dark: #202124; | |
| --light: #f8f9fa; | |
| --gray: #dadce0; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Roboto', Arial, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f5f5; | |
| color: var(--dark); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 0; | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid var(--gray); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| } | |
| .logo h1 { | |
| font-size: 1.8rem; | |
| font-weight: 500; | |
| } | |
| .devices { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .device-chip { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 20px; | |
| } | |
| .sidebar { | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05); | |
| padding: 15px; | |
| } | |
| .sidebar-menu { | |
| list-style: none; | |
| } | |
| .sidebar-menu li { | |
| margin-bottom: 5px; | |
| } | |
| .sidebar-menu a { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 15px; | |
| border-radius: 8px; | |
| color: var(--dark); | |
| text-decoration: none; | |
| transition: all 0.2s; | |
| } | |
| .sidebar-menu a:hover { | |
| background-color: var(--gray); | |
| } | |
| .sidebar-menu a.active { | |
| background-color: #e8f0fe; | |
| color: var(--primary); | |
| font-weight: 500; | |
| } | |
| .sidebar-menu a i { | |
| width: 24px; | |
| text-align: center; | |
| } | |
| .content-area { | |
| display: grid; | |
| grid-template-rows: auto 1fr; | |
| gap: 20px; | |
| } | |
| .card { | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--gray); | |
| } | |
| .card-title { | |
| font-size: 1.2rem; | |
| font-weight: 500; | |
| } | |
| .tabs { | |
| display: flex; | |
| border-bottom: 1px solid var(--gray); | |
| margin-bottom: 20px; | |
| } | |
| .tab { | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| border-bottom: 3px solid transparent; | |
| transition: all 0.2s; | |
| } | |
| .tab.active { | |
| border-bottom: 3px solid var(--primary); | |
| color: var(--primary); | |
| font-weight: 500; | |
| } | |
| .tab:hover:not(.active) { | |
| background-color: rgba(0,0,0,0.02); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: 500; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 10px 15px; | |
| border: 1px solid var(--gray); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| transition: border 0.2s; | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .btn { | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| border: none; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #3367d6; | |
| } | |
| .btn-secondary { | |
| background-color: var(--secondary); | |
| color: white; | |
| } | |
| .btn-secondary:hover { | |
| background-color: #2d9249; | |
| } | |
| .btn-danger { | |
| background-color: var(--danger); | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background-color: #d33426; | |
| } | |
| .btn-block { | |
| display: block; | |
| width: 100%; | |
| } | |
| .drag-drop-area { | |
| border: 2px dashed var(--gray); | |
| border-radius: 8px; | |
| padding: 30px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| margin-bottom: 15px; | |
| } | |
| .drag-drop-area:hover { | |
| border-color: var(--primary); | |
| } | |
| .drag-drop-area i { | |
| font-size: 3rem; | |
| color: var(--primary); | |
| margin-bottom: 10px; | |
| } | |
| .drag-drop-area p { | |
| color: #666; | |
| } | |
| .file-list { | |
| list-style: none; | |
| } | |
| .file-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px; | |
| border-bottom: 1px solid var(--gray); | |
| } | |
| .file-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .file-icon { | |
| color: var(--primary); | |
| } | |
| .file-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .file-action { | |
| background: none; | |
| border: none; | |
| color: var(--dark); | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .file-action.delete { | |
| color: var(--danger); | |
| } | |
| .commands-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 15px; | |
| } | |
| .command-card { | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
| padding: 15px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| border: 1px solid var(--gray); | |
| text-align: center; | |
| } | |
| .command-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| border-color: var(--primary); | |
| } | |
| .command-card i { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| margin-bottom: 10px; | |
| } | |
| .command-card h3 { | |
| font-size: 1rem; | |
| font-weight: 500; | |
| margin-bottom: 5px; | |
| } | |
| .command-card p { | |
| font-size: 0.8rem; | |
| color: #666; | |
| } | |
| .device-status { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 15px; | |
| } | |
| .status-card { | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
| padding: 15px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| border-left: 4px solid var(--primary); | |
| } | |
| .status-card.battery { | |
| border-left-color: var(--secondary); | |
| } | |
| .status-card.storage { | |
| border-left-color: var(--warning); | |
| } | |
| .status-card.cpu { | |
| border-left-color: var(--danger); | |
| } | |
| .status-title { | |
| font-size: 0.9rem; | |
| color: #666; | |
| margin-bottom: 10px; | |
| } | |
| .status-value { | |
| font-size: 1.5rem; | |
| font-weight: 500; | |
| } | |
| .log-container { | |
| height: 300px; | |
| overflow-y: auto; | |
| background-color: #f8f9fa; | |
| border: 1px solid var(--gray); | |
| border-radius: 8px; | |
| padding: 15px; | |
| font-family: monospace; | |
| font-size: 0.9rem; | |
| } | |
| .log-entry { | |
| margin-bottom: 5px; | |
| padding-bottom: 5px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .log-time { | |
| color: #666; | |
| margin-right: 10px; | |
| } | |
| .log-message.success { | |
| color: var(--secondary); | |
| } | |
| .log-message.error { | |
| color: var(--danger); | |
| } | |
| .log-message.info { | |
| color: var(--primary); | |
| } | |
| @media (max-width: 768px) { | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .device-status { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-tablet-alt"></i> | |
| <h1>Android Control Center</h1> | |
| </div> | |
| <div class="devices"> | |
| <div class="device-chip"> | |
| <i class="fas fa-circle" style="font-size: 0.7rem; color: #4caf50;"></i> | |
| <span>Tablet-001</span> | |
| <i class="fas fa-chevron-down" style="font-size: 0.8rem;"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="main-content"> | |
| <div class="sidebar"> | |
| <ul class="sidebar-menu"> | |
| <li><a href="#" class="active" data-tab="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li> | |
| <li><a href="#" data-tab="file-transfer"><i class="fas fa-file-upload"></i> File Transfer</a></li> | |
| <li><a href="#" data-tab="commands"><i class="fas fa-terminal"></i> Commands</a></li> | |
| <li><a href="#" data-tab="browser"><i class="fas fa-globe"></i> Remote Browser</a></li> | |
| <li><a href="#" data-tab="screenshare"><i class="fas fa-desktop"></i> Screen Share</a></li> | |
| <li><a href="#" data-tab="settings"><i class="fas fa-cog"></i> Settings</a></li> | |
| </ul> | |
| </div> | |
| <div class="content-area"> | |
| <div class="tabs"> | |
| <div class="tab active" data-tab="dashboard">Dashboard</div> | |
| <div class="tab" data-tab="file-transfer">File Transfer</div> | |
| <div class="tab" data-tab="commands">Commands</div> | |
| <div class="tab" data-tab="browser">Remote Browser</div> | |
| <div class="tab" data-tab="screenshare">Screen Share</div> | |
| </div> | |
| <div class="tab-content active" id="dashboard-tab"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Device Status</h2> | |
| </div> | |
| <div class="device-status"> | |
| <div class="status-card"> | |
| <div class="status-title">Connected Device</div> | |
| <div class="status-value">Tablet-001</div> | |
| </div> | |
| <div class="status-card battery"> | |
| <div class="status-title">Battery Level</div> | |
| <div class="status-value">87%</div> | |
| </div> | |
| <div class="status-card storage"> | |
| <div class="status-title">Storage Available</div> | |
| <div class="status-value">32.4 GB</div> | |
| </div> | |
| <div class="status-card cpu"> | |
| <div class="status-title">CPU Usage</div> | |
| <div class="status-value">24%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Quick Actions</h2> | |
| </div> | |
| <div class="commands-grid"> | |
| <div class="command-card" data-command="screenshot"> | |
| <i class="fas fa-camera"></i> | |
| <h3>Take Screenshot</h3> | |
| <p>Capture current screen</p> | |
| </div> | |
| <div class="command-card" data-command="lock"> | |
| <i class="fas fa-lock"></i> | |
| <h3>Lock Device</h3> | |
| <p>Lock the tablet</p> | |
| </div> | |
| <div class="command-card" data-command="reboot"> | |
| <i class="fas fa-power-off"></i> | |
| <h3>Reboot</h3> | |
| <p>Restart the device</p> | |
| </div> | |
| <div class="command-card" data-command="volume-up"> | |
| <i class="fas fa-volume-up"></i> | |
| <h3>Volume Up</h3> | |
| <p>Increase volume</p> | |
| </div> | |
| <div class="command-card" data-command="volume-down"> | |
| <i class="fas fa-volume-down"></i> | |
| <h3>Volume Down</h3> | |
| <p>Decrease volume</p> | |
| </div> | |
| <div class="command-card" data-command="mute"> | |
| <i class="fas fa-volume-mute"></i> | |
| <h3>Mute</h3> | |
| <p>Silence the device</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Activity Log</h2> | |
| <button class="btn btn-secondary" id="clear-logs"> | |
| <i class="fas fa-trash"></i> Clear | |
| </button> | |
| </div> | |
| <div class="log-container" id="activity-log"> | |
| <div class="log-entry"> | |
| <span class="log-time">10:23:45</span> | |
| <span class="log-message info">Connected to Tablet-001</span> | |
| </div> | |
| <div class="log-entry"> | |
| <span class="log-time">10:24:12</span> | |
| <span class="log-message success">File "presentation.pdf" transferred successfully</span> | |
| </div> | |
| <div class="log-entry"> | |
| <span class="log-time">10:25:03</span> | |
| <span class="log-message info">Opened URL: https://example.com</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="file-transfer-tab"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Transfer Files</h2> | |
| </div> | |
| <div class="drag-drop-area" id="drop-area"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <p>Drag & drop files here or click to browse</p> | |
| <input type="file" id="file-input" style="display: none;" multiple> | |
| </div> | |
| <div class="form-group"> | |
| <label for="destination-path">Destination Folder</label> | |
| <input type="text" class="form-control" id="destination-path" value="/sdcard/Downloads/"> | |
| </div> | |
| <button class="btn btn-primary btn-block" id="upload-btn"> | |
| <i class="fas fa-upload"></i> Upload Files | |
| </button> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">File Queue</h2> | |
| </div> | |
| <ul class="file-list" id="file-queue"> | |
| <li class="file-item"> | |
| <div class="file-info"> | |
| <i class="fas fa-file-pdf file-icon"></i> | |
| <div> | |
| <div class="file-name">presentation.pdf</div> | |
| <div class="file-size">2.4 MB</div> | |
| </div> | |
| </div> | |
| <div class="file-actions"> | |
| <button class="file-action delete"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </li> | |
| <li class="file-item"> | |
| <div class="file-info"> | |
| <i class="fas fa-file-image file-icon"></i> | |
| <div> | |
| <div class="file-name">screenshot.png</div> | |
| <div class="file-size">450 KB</div> | |
| </div> | |
| </div> | |
| <div class="file-actions"> | |
| <button class="file-action delete"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="commands-tab"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Execute Command</h2> | |
| </div> | |
| <div class="form-group"> | |
| <label for="command-input">ADB Command</label> | |
| <input type="text" class="form-control" id="command-input" placeholder="e.g., pm list packages"> | |
| </div> | |
| <button class="btn btn-primary" id="execute-btn"> | |
| <i class="fas fa-play"></i> Execute | |
| </button> | |
| <button class="btn btn-secondary" id="clear-cmd"> | |
| <i class="fas fa-broom"></i> Clear | |
| </button> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Command Output</h2> | |
| </div> | |
| <div class="form-group"> | |
| <textarea class="form-control" id="command-output" rows="8" readonly></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="browser-tab"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Remote Browser</h2> | |
| </div> | |
| <div class="form-group"> | |
| <label for="url-input">URL to Open</label> | |
| <input type="url" class="form-control" id="url-input" placeholder="https://example.com"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="browser-package">Browser Package</label> | |
| <select class="form-control" id="browser-package"> | |
| <option value="com.android.chrome">Chrome</option> | |
| <option value="com.brave.browser">Brave</option> | |
| <option value="org.mozilla.firefox">Firefox</option> | |
| <option value="com.opera.browser">Opera</option> | |
| <option value="custom">Custom...</option> | |
| </select> | |
| </div> | |
| <div class="form-group" id="custom-package-container" style="display: none;"> | |
| <label for="custom-package">Custom Package Name</label> | |
| <input type="text" class="form-control" id="custom-package" placeholder="com.example.browser"> | |
| </div> | |
| <button class="btn btn-primary" id="open-url-btn"> | |
| <i class="fas fa-external-link-alt"></i> Open URL | |
| </button> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Browser Shortcuts</h2> | |
| </div> | |
| <div class="commands-grid"> | |
| <div class="command-card" data-browser-action="back"> | |
| <i class="fas fa-arrow-left"></i> | |
| <h3>Go Back</h3> | |
| <p>Browser back navigation</p> | |
| </div> | |
| <div class="command-card" data-browser-action="forward"> | |
| <i class="fas fa-arrow-right"></i> | |
| <h3>Go Forward</h3> | |
| <p>Browser forward navigation</p> | |
| </div> | |
| <div class="command-card" data-browser-action="refresh"> | |
| <i class="fas fa-sync-alt"></i> | |
| <h3>Refresh</h3> | |
| <p>Reload current page</p> | |
| </div> | |
| <div class="command-card" data-browser-action="home"> | |
| <i class="fas fa-home"></i> | |
| <h3>Home</h3> | |
| <p>Open browser homepage</p> | |
| </div> | |
| <div class="command-card" data-browser-action="zoom-in"> | |
| <i class="fas fa-search-plus"></i> | |
| <h3>Zoom In</h3> | |
| <p>Increase page zoom</p> | |
| </div> | |
| <div class="command-card" data-browser-action="zoom-out"> | |
| <i class="fas fa-search-minus"></i> | |
| <h3>Zoom Out</h3> | |
| <p>Decrease page zoom</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="screenshare-tab"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Screen Sharing</h2> | |
| <div> | |
| <button class="btn btn-primary" id="start-stream-btn"> | |
| <i class="fas fa-play"></i> Start Stream | |
| </button> | |
| <button class="btn btn-danger" id="stop-stream-btn" disabled> | |
| <i class="fas fa-stop"></i> Stop Stream | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="stream-quality">Stream Quality</label> | |
| <select class="form-control" id="stream-quality"> | |
| <option value="low">Low (640x480)</option> | |
| <option value="medium" selected>Medium (1280x720)</option> | |
| <option value="high">High (1920x1080)</option> | |
| </select> | |
| </div> | |
| <div class="screenshare-container" style="background-color: #222; border-radius: 8px; padding: 20px; text-align: center;"> | |
| <div id="stream-placeholder" style="color: #666; font-size: 1.2rem;"> | |
| <i class="fas fa-desktop" style="font-size: 3rem; margin-bottom: 10px;"></i> | |
| <p>Screen sharing not active</p> | |
| </div> | |
| <canvas id="stream-canvas" style="display: none; max-width: 100%;"></canvas> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Remote Control</h2> | |
| </div> | |
| <div style="text-align: center;"> | |
| <div style="display: inline-block; margin-bottom: 15px;"> | |
| <button class="btn btn-secondary" id="remote-up"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <div style="margin: 5px 0;"> | |
| <button class="btn btn-secondary" id="remote-left"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <button class="btn btn-primary" style="width: 60px; margin: 0 5px;"> | |
| <i class="fas fa-hand-pointer"></i> | |
| </button> | |
| <button class="btn btn-secondary" id="remote-right"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| <button class="btn btn-secondary" id="remote-down"> | |
| <i class="fas fa-arrow-down"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <button class="btn btn-secondary" id="remote-back"> | |
| <i class="fas fa-step-backward"></i> Back | |
| </button> | |
| <button class="btn btn-secondary" id="remote-home"> | |
| <i class="fas fa-home"></i> Home | |
| </button> | |
| <button class="btn btn-secondary" id="remote-recents"> | |
| <i class="fas fa-window-restore"></i> Recents | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Tab navigation | |
| const tabs = document.querySelectorAll('.tab'); | |
| const sidebarLinks = document.querySelectorAll('.sidebar-menu a'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| function switchTab(tabId) { | |
| // Update tabs | |
| tabs.forEach(tab => { | |
| if (tab.dataset.tab === tabId) { | |
| tab.classList.add('active'); | |
| } else { | |
| tab.classList.remove('active'); | |
| } | |
| }); | |
| // Update content | |
| tabContents.forEach(content => { | |
| if (content.id === `${tabId}-tab`) { | |
| content.classList.add('active'); | |
| } else { | |
| content.classList.remove('active'); | |
| } | |
| }); | |
| // Update sidebar | |
| sidebarLinks.forEach(link => { | |
| if (link.dataset.tab === tabId) { | |
| link.classList.add('active'); | |
| } else { | |
| link.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| switchTab(tab.dataset.tab); | |
| }); | |
| }); | |
| sidebarLinks.forEach(link => { | |
| link.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| switchTab(link.dataset.tab); | |
| }); | |
| }); | |
| // File transfer functionality | |
| const dropArea = document.getElementById('drop-area'); | |
| const fileInput = document.getElementById('file-input'); | |
| const fileQueue = document.getElementById('file-queue'); | |
| dropArea.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', handleFiles); | |
| // Prevent default drag behaviors | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| // Highlight drop area when item is dragged over it | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropArea.style.borderColor = '#4285f4'; | |
| dropArea.style.backgroundColor = '#f0f7ff'; | |
| } | |
| function unhighlight() { | |
| dropArea.style.borderColor = '#dadce0'; | |
| dropArea.style.backgroundColor = 'transparent'; | |
| } | |
| // Handle dropped files | |
| dropArea.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles(files); | |
| } | |
| function handleFiles(files) { | |
| for (let i = 0; i < files.length; i++) { | |
| const file = files[i]; | |
| addFileToQueue(file); | |
| } | |
| } | |
| function addFileToQueue(file) { | |
| const fileItem = document.createElement('li'); | |
| fileItem.className = 'file-item'; | |
| const fileIcon = document.createElement('i'); | |
| fileIcon.className = 'fas file-icon'; | |
| // Set icon based on file type | |
| if (file.type.match('image.*')) { | |
| fileIcon.classList.add('fa-file-image'); | |
| } else if (file.type.match('application/pdf')) { | |
| fileIcon.classList.add('fa-file-pdf'); | |
| } else if (file.type.match('text.*')) { | |
| fileIcon.classList.add('fa-file-alt'); | |
| } else if (file.type.match('video.*')) { | |
| fileIcon.classList.add('fa-file-video'); | |
| } else if (file.type.match('audio.*')) { | |
| fileIcon.classList.add('fa-file-audio'); | |
| } else if (file.type.match('application/zip') || | |
| file.type.match('application/x-rar-compressed') || | |
| file.type.match('application/x-7z-compressed')) { | |
| fileIcon.classList.add('fa-file-archive'); | |
| } else { | |
| fileIcon.classList.add('fa-file'); | |
| } | |
| const fileSize = formatFileSize(file.size); | |
| fileItem.innerHTML = ` | |
| <div class="file-info"> | |
| ${fileIcon.outerHTML} | |
| <div> | |
| <div class="file-name">${file.name}</div> | |
| <div class="file-size">${fileSize}</div> | |
| </div> | |
| </div> | |
| <div class="file-actions"> | |
| <button class="file-action delete"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| fileQueue.appendChild(fileItem); | |
| // Add event listener for delete button | |
| fileItem.querySelector('.file-action.delete').addEventListener('click', () => { | |
| fileItem.remove(); | |
| }); | |
| } | |
| function formatFileSize(bytes) { | |
| if (bytes === 0) return '0 Bytes'; | |
| const k = 1024; | |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; | |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); | |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; | |
| } | |
| // Upload button functionality | |
| const uploadBtn = document.getElementById('upload-btn'); | |
| uploadBtn.addEventListener('click', () => { | |
| const files = fileInput.files; | |
| if (files.length === 0 && fileQueue.children.length === 0) { | |
| alert('Please add files to transfer first'); | |
| return; | |
| } | |
| const destination = document.getElementById('destination-path').value.trim(); | |
| if (!destination) { | |
| alert('Please specify a destination folder'); | |
| return; | |
| } | |
| // Simulate file transfer | |
| const logContainer = document.getElementById('activity-log'); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-entry'; | |
| logEntry.innerHTML = ` | |
| <span class="log-time">${new Date().toLocaleTimeString()}</span> | |
| <span class="log-message success">Files transferred successfully to ${destination}</span> | |
| `; | |
| logContainer.insertBefore(logEntry, logContainer.firstChild); | |
| // Clear the queue (in a real app, this would happen after successful transfer) | |
| fileQueue.innerHTML = ''; | |
| fileInput.value = ''; | |
| alert('Files transferred successfully!'); | |
| }); | |
| // Command execution functionality | |
| const commandInput = document.getElementById('command-input'); | |
| const executeBtn = document.getElementById('execute-btn'); | |
| const commandOutput = document.getElementById('command-output'); | |
| const clearCmdBtn = document.getElementById('clear-cmd'); | |
| executeBtn.addEventListener('click', () => { | |
| const command = commandInput.value.trim(); | |
| if (!command) { | |
| alert('Please enter a command'); | |
| return; | |
| } | |
| // Simulate command execution | |
| const output = `$ ${command}\n`; | |
| if (command === 'pm list packages') { | |
| commandOutput.value = output + ` | |
| package:com.android.vending | |
| package:com.google.android.gms | |
| package:com.android.chrome | |
| package:org.mozilla.firefox | |
| package:com.example.myapp`; | |
| } else if (command === 'ip addr') { | |
| commandOutput.value = output + ` | |
| 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN | |
| link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 | |
| inet 127.0.0.1/8 scope host lo | |
| valid_lft forever preferred_lft forever | |
| 2: wlan0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP qlen 1000 | |
| link/ether 12:34:56:78:90:ab brd ff:ff:ff:ff:ff:ff | |
| inet 192.168.1.101/24 brd 192.168.1.255 scope global wlan0 | |
| valid_lft forever preferred_lft forever`; | |
| } else if (command === 'adb devices') { | |
| commandOutput.value = output + ` | |
| List of devices attached | |
| emulator-5554 device | |
| ABCD123456 device`; | |
| } else { | |
| commandOutput.value = output + `Command executed successfully!`; | |
| } | |
| // Add to activity log | |
| const logContainer = document.getElementById('activity-log'); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-entry'; | |
| logEntry.innerHTML = ` | |
| <span class="log-time">${new Date().toLocaleTimeString()}</span> | |
| <span class="log-message info">Executed command: ${command}</span> | |
| `; | |
| logContainer.insertBefore(logEntry, logContainer.firstChild); | |
| }); | |
| clearCmdBtn.addEventListener('click', () => { | |
| commandInput.value = ''; | |
| commandOutput.value = ''; | |
| }); | |
| // Browser package selection | |
| const browserPackageSelect = document.getElementById('browser-package'); | |
| const customPackageContainer = document.getElementById('custom-package-container'); | |
| browserPackageSelect.addEventListener('change', () => { | |
| if (browserPackageSelect.value === 'custom') { | |
| customPackageContainer.style.display = 'block'; | |
| } else { | |
| customPackageContainer.style.display = 'none'; | |
| } | |
| }); | |
| // Open URL functionality | |
| const openUrlBtn = document.getElementById('open-url-btn'); | |
| const urlInput = document.getElementById('url-input'); | |
| openUrlBtn.addEventListener('click', () => { | |
| const url = urlInput.value.trim(); | |
| if (!url) { | |
| alert('Please enter a URL'); | |
| return; | |
| } | |
| // Validate URL | |
| try { | |
| new URL(url); | |
| } catch (e) { | |
| alert('Please enter a valid URL'); | |
| return; | |
| } | |
| const packageName = browserPackageSelect.value === 'custom' | |
| ? document.getElementById('custom-package').value.trim() | |
| : browserPackageSelect.value; | |
| if (!packageName) { | |
| alert('Please select or enter a browser package name'); | |
| return; | |
| } | |
| // Add to activity log | |
| const logContainer = document.getElementById('activity-log'); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-entry'; | |
| logEntry.innerHTML = ` | |
| <span class="log-time">${new Date().toLocaleTimeString()}</span> | |
| <span class="log-message info">Opened URL ${url} in ${packageName}</span> | |
| `; | |
| logContainer.insertBefore(logEntry, logContainer.firstChild); | |
| alert(`Opening ${url} in ${packageName}`); | |
| }); | |
| // Screen sharing functionality | |
| const startStreamBtn = document.getElementById('start-stream-btn'); | |
| const stopStreamBtn = document.getElementById('stop-stream-btn'); | |
| const streamPlaceholder = document.getElementById('stream-placeholder'); | |
| const streamCanvas = document.getElementById('stream-canvas'); | |
| startStreamBtn.addEventListener('click', () => { | |
| startStreamBtn.disabled = true; | |
| stopStreamBtn.disabled = false; | |
| streamPlaceholder.style.display = 'none'; | |
| streamCanvas.style.display = 'block'; | |
| // Simulate stream starting (in a real app, you'd connect to a WebSocket or similar) | |
| const ctx = streamCanvas.getContext('2d'); | |
| ctx.fillStyle = '#333'; | |
| ctx.fillRect(0, 0, streamCanvas.width, streamCanvas.height); | |
| ctx.fillStyle = '#fff'; | |
| ctx.font = '20px Arial'; | |
| ctx.fillText('Connected to tablet screen', 20, 50); | |
| // Add to activity log | |
| const logContainer = document.getElementById('activity-log'); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-entry'; | |
| logEntry.innerHTML = ` | |
| <span class="log-time">${new Date().toLocaleTimeString()}</span> | |
| <span class="log-message success">Started screen sharing</span> | |
| `; | |
| logContainer.insertBefore(logEntry, logContainer.firstChild); | |
| }); | |
| stopStreamBtn.addEventListener('click', () => { | |
| startStreamBtn.disabled = false; | |
| stopStreamBtn.disabled = true; | |
| streamPlaceholder.style.display = 'block'; | |
| streamCanvas.style.display = 'none'; | |
| // Add to activity log | |
| const logContainer = document.getElementById('activity-log'); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-entry'; | |
| logEntry.innerHTML = ` | |
| <span class="log-time">${new Date().toLocaleTimeString()}</span> | |
| <span class="log-message info">Stopped screen sharing</span> | |
| `; | |
| logContainer.insertBefore(logEntry, logContainer.firstChild); | |
| }); | |
| // Clear logs button | |
| const clearLogsBtn = document.getElementById('clear-logs'); | |
| clearLogsBtn.addEventListener('click', () => { | |
| document.getElementById('activity-log').innerHTML = ''; | |
| }); | |
| // Quick command buttons | |
| const commandCards = document.querySelectorAll('.command-card[data-command]'); | |
| commandCards.forEach(card => { | |
| card.addEventListener('click', () => { | |
| const command = card.dataset.command; | |
| // Add to activity log | |
| const logContainer = document.getElementById('activity-log'); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-entry'; | |
| logEntry.innerHTML = ` | |
| <span class="log-time">${new Date().toLocaleTimeString()}</span> | |
| <span class="log-message success">Executed command: ${command}</span> | |
| `; | |
| logContainer.insertBefore(logEntry, logContainer.firstChild); | |
| alert(`Command executed: ${command}`); | |
| }); | |
| }); | |
| // Browser action buttons | |
| const browserActionCards = document.querySelectorAll('.command-card[data-browser-action]'); | |
| browserActionCards.forEach(card => { | |
| card.addEventListener('click', () => { | |
| const action = card.dataset.browserAction; | |
| // Add to activity log | |
| const logContainer = document.getElementById('activity-log'); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-entry'; | |
| logEntry.innerHTML = ` | |
| <span class="log-time">${new Date().toLocaleTimeString()}</span> | |
| <span class="log-message info">Browser action: ${action}</span> | |
| `; | |
| logContainer.insertBefore(logEntry, logContainer.firstChild); | |
| alert(`Browser action: ${action}`); | |
| }); | |
| }); | |
| // Remote control buttons | |
| const remoteBtns = ['up', 'down', 'left', 'right', 'back', 'home', 'recents']; | |
| remoteBtns.forEach(btn => { | |
| const element = document.getElementById(`remote-${btn}`); | |
| element.addEventListener('click', () => { | |
| // Add to activity log | |
| const logContainer = document.getElementById('activity-log'); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-entry'; | |
| logEntry.innerHTML = ` | |
| <span class="log-time">${new Date().toLocaleTimeString()}</span> | |
| <span class="log-message info">Remote control: ${btn}</span> | |
| `; | |
| logContainer.insertBefore(logEntry, logContainer.firstChild); | |
| alert(`Remote control: ${btn}`); | |
| }); | |
| }); | |
| // Initialize stream canvas size | |
| function resizeCanvas() { | |
| const container = document.querySelector('.screenshare-container'); | |
| streamCanvas.width = container.clientWidth - 40; | |
| streamCanvas.height = streamCanvas.width * (9 / 16); | |
| } | |
| window.addEventListener('resize', resizeCanvas); | |
| resizeCanvas(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |