2024-04-15 01:30:58 +02:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2024-07-30 23:29:01 +02:00
< meta property = "og:title" content = "SpiderADB" / >
2024-04-21 00:58:00 +02:00
< meta OctoSpaccHubSdk = "Url" content = "https://hub.octt.eu.org/SpiderADB/" / >
2024-04-27 20:29:04 +02:00
< meta OctoSpaccHubSdk = "WebManifestExtra" content = "'display':'standalone', 'icons':[{ 'src':'./icon.png', 'type':'image/png', 'sizes':'512x512' }]," / >
< link rel = "apple-touch-icon" href = "./icon.png" / >
2024-04-15 01:30:58 +02:00
< link rel = "stylesheet" href = "./holo-web/holo-base-elements.css" / >
< link rel = "stylesheet" href = "./holo-web/holo-base-widgets.css" / >
< link rel = "stylesheet" href = "./holo-web/holo-ics-dark-elements.css" / >
< link rel = "stylesheet" href = "./holo-web/holo-ics-dark-widgets.css" / >
< link rel = "stylesheet" href = "./holo-web/holo-extra-octt.css" / >
< script src = "./util.js" > < / script >
< script src = "./holo-web/holo-extra-octt.js" > < / script >
< script src = "./holo-web/holo-touch.js" > < / script >
< style >
.floatRight { float: right; }
2024-04-21 00:58:00 +02:00
body { overflow-x: hidden; padding-bottom: 0; overflow-wrap: break-word; }
2024-04-19 00:34:22 +02:00
ul.holo-list li input[type="checkbox"].floatRight { margin-top: 0; }
2024-04-21 00:58:00 +02:00
p[name="popupBox"] { box-sizing: border-box; position: fixed; top: 25%; left: 0; width: 100%; min-height: 20%; padding: 1em; background: rgba(0, 0, 0, 0.95); }
p[name="popupBox"] > button { float: right; }
input[name="terminalInput"], textarea[name="terminalOutput"] {
2024-04-19 00:34:22 +02:00
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
resize: none;
}
2024-04-15 01:30:58 +02:00
< / style >
< / head >
< body >
< header class = "holo-actionBar" >
< button class = "holo-title holo-menu" data-action-sidebar = "sidebar" >
🕷️ SpiderADB < small > (WIP)< / small >
< / button >
2024-04-21 00:58:00 +02:00
< ul class = "holo-list" >
<!-- <div data - display - sections="terminal">
< li > < button name = "clearTerminal" disabled = "true" >
Clear
< / button > < / li >
< li > < button name = "wrapTerminal" >
Wrap
< / button > < / li >
< / div >
< div data-display-sections = "packages" >
< li > < button name = "packagesInvertSelect" disabled = "true" >
Invert selection
< / button > < / li >
< li > < button name = "apkInstall" disabled = "true" >
< input type = "file" hidden = "true" multiple = "true" accept = ".apk, application/vnd.android.package-archive" / >
Install APK(s)
< / button > < / li >
< / div > -->
< li data-display-sections = "terminal" > < button name = "wrapTerminal" >
Wrap
< / button > < / li >
< li data-display-sections = "terminal" > < button name = "clearTerminal" disabled = "true" >
Clear
< / button > < / li >
< li data-display-sections = "packages" > < button name = "packagesInvertSelect" disabled = "true" >
Invert selection
< / button > < / li >
< li data-display-sections = "packages" > < button name = "packagesUninstall" disabled = "true" >
Uninstall selected
< / button > < / li >
< li data-display-sections = "packages" > < button name = "apkInstall" disabled = "true" >
< input type = "file" hidden = "true" multiple = "true" accept = ".apk, application/vnd.android.package-archive" / >
Install APK(s)
< / button > < / li >
< li data-collapser > < button >
< b > ···< / b >
< / button > < / li >
< / ul >
2024-04-15 01:30:58 +02:00
< / header >
< section class = "holo-sideBar" data-sidebar = "sidebar" >
< ul class = "holo-list" >
< li > < button data-action-section = "devices" >
📱️ Devices
< / button > < / li >
2024-04-17 01:30:25 +02:00
< li > < button data-action-section = "terminal" >
2024-04-15 01:30:58 +02:00
⌨️ Terminal
2024-04-17 01:30:25 +02:00
< / button > < / li >
<!-- <li><button data - action - section="files">
📄 Files
< / button > < / li > -->
2024-04-19 00:34:22 +02:00
< li > < button data-action-section = "packages" >
📦 Packages < small > (WIP)< / small >
< / button > < / li >
2024-04-15 01:30:58 +02:00
< li > < button data-action-section = "about" >
❓️ About
< / button > < / li >
< li >
2024-04-17 01:30:25 +02:00
< i > More features coming soon!< / i >
2024-04-15 01:30:58 +02:00
< / li >
< / ul >
< / section >
< section class = "holo-body" >
2024-04-21 00:58:00 +02:00
< p name = "javascriptWarning" style = "font-size: xx-large; font-weight: bold;" > You need to enable JavaScript to run this app!< / p >
< p name = "connectReminder" data-display-sections = "terminal packages" hidden = "true" >
2024-04-15 01:30:58 +02:00
You must < a data-action-section = "devices" > connect and authorize a device< / a > first.
< / p >
2024-04-21 00:58:00 +02:00
< p name = "popupBox" hidden = "true" > < / p >
< section class = "holo-section" data-section = "about" style = "display: block !important;" >
< p >
< b > SpiderADB< / b > is an user-friendly webapp for connecting to devices via the Android Debug Bridge, straight from a browser.
The aim of this is to be kind of a swiss army knife that can be used from any platform, with minimal hassle,
to do a number of advanced administration and debugging task on Android devices. These are the current features:
< / p > < ul >
< li > < b > Devices< / b > : Allows connecting new devices, shows a list of the paired ones, and lists basic useful information about various parts of the system.< / li >
< li > < b > Terminal< / b > : Provides a basic terminal shell for inputting commands and reading their output. (Currently doesn't support any teletype features, so only basic commands can be run properly.)< / li >
< li > < b > Packages< / b > : Displays a list of the currently installed packages, allowing for multiple to be uninstalled, and also allows uploading APK files for installation.< / li >
< / ul >
2024-04-19 00:34:22 +02:00
< p > Here are some additional tips and tricks you might find useful to make the most out of this app:< / p > < ul >
< li > < a target = "_blank" href = "https://dev.to/larsonzhong/most-complete-adb-commands-4pcg" > Most complete ADB command manual< / a > < / li >
< / ul >
2024-04-21 00:58:00 +02:00
< h3 > Open-Source and Licensing< / h3 > < p >
This app is open-source and made with mostly-vanilla web technologies.
You can find the full source code on my Git repo:
< a href = "https://gitlab.com/octospacc/octospacc.gitlab.io/-/tree/master/source/SpiderADB/" > https://gitlab.com/octospacc/octospacc.gitlab.io/-/tree/master/source/SpiderADB/< / a > .
< / p > < p > Copyright (C) 2024, OctoSpacc
< br / > This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
< br / > This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
< br / > You should have received a copy of the GNU Affero General Public License along with this program. If not, see < a target = "_blank" href = "https://www.gnu.org/licenses/" > https://www.gnu.org/licenses/< / a > .
< / p >
< h3 > Third-Parties and Credits< / h3 > < p >
This app wouldn't have been possible without these third-party components, of which the license is specified in brackets:
< / p > < ul >
2024-04-19 00:34:22 +02:00
< li > < a target = "_blank" href = "https://github.com/yume-chan/ya-webadb" > Tango< / a > [MIT]: ADB port for the web< / li >
< li > < a target = "_blank" href = "https://github.com/tango-adb/old-demo" > Tango Demo (Old)< / a > [MIT]: the previous official Tango demo webapp, helpful for writing my app since the Tango documentation is pretty lacking< / li >
< li > < a target = "_blank" href = "https://github.com/zmyaro/holo-web" > Holo Web< / a > [MIT]: stylesheets for recreating the Android Holo theme on the web< / li >
< / ul >
2024-04-17 01:30:25 +02:00
< h3 > Changelog< / h3 >
2024-04-21 00:58:00 +02:00
< h4 > 2024-04-20< / h4 > < ul >
< li > Add feature descriptions to About section, and licensing info.< / li >
< li > Update UI engine, adding auto-collapsible option menu.< / li >
< li > Add selection boxes in Packages menu, and allow uninstalling (user) packages.< / li >
< li > Fix design for no-JS user agents: add warning and make the About page the visible content.< / li >
< / ul >
2024-04-19 00:34:22 +02:00
< h4 > 2024-04-18< / h4 > < ul >
< li > Improve Terminal logic, which now also shows stdout, scaling, and add a Clear feature.< / li >
< li > Introduce Packages menu, listing all installed packages' names, and allow installing (multiple) APKs files.< / li >
< / ul >
2024-04-17 01:30:25 +02:00
< h4 > 2024-04-16< / h4 > < ul >
2024-04-19 00:34:22 +02:00
< li > Introduce the basic Terminal.< / li >
2024-04-17 01:30:25 +02:00
< li > Slight improvements to the user experience with better error handling.< / li >
< / ul >
< h4 > 2024-04-14< / h4 > < ul >
< li > First WIP version, with Android ICS Holo UI, allows simply connecting to devices and shows basic info.< / li >
2024-04-19 00:34:22 +02:00
< li > Introduce sections: Devices, About.< / li >
2024-04-17 01:30:25 +02:00
< / ul >
< / section >
2024-04-15 01:30:58 +02:00
< section class = "holo-section" data-section = "devices" data-open = "open" >
< div name = "browserWarning" > < p > < / p > < / div >
2024-04-17 01:30:25 +02:00
< p name = "deviceStatus" > < / p >
2024-04-15 01:30:58 +02:00
< select name = "deviceSelect" disabled = "true" > < / select >
< button name = "deviceConnect" disabled = "true" >
Connect New Device
< / button >
2024-04-17 01:30:25 +02:00
<!-- <button>Connect via Network</button> -->
< section name = "deviceInfo" hidden = "true" >
< ul >
< li name = "deviceOem" > < / li >
< li name = "deviceModel" > < / li >
< li name = "deviceSerial" > < / li >
< div name = "androidInfo" hidden = "true" >
< li name = "androidVersion" > < / li >
< li name = "androidApi" > < / li >
2024-04-19 00:34:22 +02:00
<!-- <li name="androidNickname"></li> -->
< li name = "androidBuildDate" > < / li >
< li name = "androidBuildFingerprint" > < / li >
< li name = "deviceCpuAbis" > < / li >
2024-04-17 01:30:25 +02:00
< / div >
< / ul >
< / section >
2024-04-15 01:30:58 +02:00
< / section >
< section class = "holo-section" data-section = "terminal" >
2024-04-19 00:34:22 +02:00
< textarea name = "terminalOutput" readonly = "true" disabled = "true" placeholder = "Terminal output will be displayed here." > < / textarea >
< input name = "terminalInput" type = "text" disabled = "true" placeholder = "> Input any command..." / >
2024-04-15 01:30:58 +02:00
< / section >
2024-04-17 01:30:25 +02:00
< section class = "holo-section" data-section = "packages" >
2024-04-21 00:58:00 +02:00
< ul class = "holo-list" name = "packageList" > < / ul >
<!-- <section class="holo - subsection" name="packageInfo"></section> -->
2024-04-15 01:30:58 +02:00
< / section >
< / section >
< script src = "./bundle.js" > < / script >
< / body >
< / html >
