octospacc
/
OctoSpaccHub
mirror of https://gitlab.com/octospacc/octospacc.gitlab.io
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
OctoSpaccHub/source/SpiderADB/index.html

189 lines
9.3 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta property="og:title" content="🕷️ SpiderADB"/>
<meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/SpiderADB/"/>
<meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone',"/>
<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>
<script src="../../shared/OctoHub-Global.js"></script>
<style>
.floatRight { float: right; }
body { overflow-x: hidden; padding-bottom: 0; overflow-wrap: break-word; }
ul.holo-list li input[type="checkbox"].floatRight { margin-top: 0; }
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"] {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
resize: none;
}
</style>
</head>
<body>
<header class="holo-actionBar">
<button class="holo-title holo-menu" data-action-sidebar="sidebar">
🕷️ SpiderADB <small>(WIP)</small>
</button>
<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>
</header>
<section class="holo-sideBar" data-sidebar="sidebar">
<ul class="holo-list">
<li><button data-action-section="devices">
📱️ Devices
</button></li>
<li><button data-action-section="terminal">
⌨️ Terminal
</button></li>
<!-- <li><button data-action-section="files">
📄 Files
</button></li> -->
<li><button data-action-section="packages">
📦 Packages <small>(WIP)</small>
</button></li>
<li><button data-action-section="about">
❓️ About
</button></li>
<li>
<i>More features coming soon!</i>
</li>
</ul>
</section>
<section class="holo-body">
<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">
You must <a data-action-section="devices">connect and authorize a device</a> first.
</p>
<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>
<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>
<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>
<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>
<h3>Changelog</h3>
<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>
<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>
<h4>2024-04-16</h4><ul>
<li>Introduce the basic Terminal.</li>
<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>
<li>Introduce sections: Devices, About.</li>
</ul>
</section>
<section class="holo-section" data-section="devices" data-open="open">
<div name="browserWarning"><p></p></div>
<p name="deviceStatus"></p>
<select name="deviceSelect" disabled="true"></select>
<button name="deviceConnect" disabled="true">
Connect New Device
</button>
<!-- <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>
<!-- <li name="androidNickname"></li> -->
<li name="androidBuildDate"></li>
<li name="androidBuildFingerprint"></li>
<li name="deviceCpuAbis"></li>
</div>
</ul>
</section>
</section>
<section class="holo-section" data-section="terminal">
<textarea name="terminalOutput" readonly="true" disabled="true" placeholder="Terminal output will be displayed here."></textarea>
<input name="terminalInput" type="text" disabled="true" placeholder="&gt; Input any command..."/>
</section>
<section class="holo-section" data-section="packages">
<ul class="holo-list" name="packageList"></ul>
<!-- <section class="holo-subsection" name="packageInfo"></section> -->
</section>
</section>
<script src="./bundle.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink