SpiderADB WIP
This commit is contained in:
parent
bbcfa01659
commit
aced3385f1
|
|
@ -6,19 +6,7 @@ before_script: |
|
|||
|
||||
pages:
|
||||
stage: deploy
|
||||
script: |
|
||||
for App in WuppiMini
|
||||
do
|
||||
mkdir ./public/${App}
|
||||
cd ./src/${App}
|
||||
npm update
|
||||
npm install
|
||||
node ./index.js html
|
||||
cp ./index.js ./index.html ./node_modules/SpaccDotWeb/SpaccDotWeb.Server.js ../../public/${App}/
|
||||
cd ../..
|
||||
done
|
||||
cd ./public
|
||||
node ../WriteRedirectPages.js
|
||||
script: sh ./Build.sh
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
#!/bin/sh
|
||||
for App in WuppiMini
|
||||
do
|
||||
mkdir -p ./public/${App}
|
||||
cd ./src/${App}
|
||||
npm update
|
||||
npm install
|
||||
node ./index.js html
|
||||
cp ./index.js ./index.html ./node_modules/SpaccDotWeb/SpaccDotWeb.Server.js ../../public/${App}/
|
||||
cd ../..
|
||||
done
|
||||
for App in SpiderADB
|
||||
do
|
||||
mkdir -p ./public/${App}
|
||||
cd ./src/${App}
|
||||
sh ./Prepare.sh
|
||||
cp -r $(sh ./Build.sh) ../../public/${App}/
|
||||
cd ../..
|
||||
done
|
||||
cd ./public
|
||||
node ../WriteRedirectPages.js
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -69,7 +69,8 @@
|
|||
<h4><a href="https://octospacc.gitlab.io/FumoPrisms">🔺️ Fumo Prisms (!)</a></h4>
|
||||
<h4><a href="./Collections/">🎀 My Collections</a> <small>(of posts/pages)</small></h4>
|
||||
<h4><a href="./Userscripts/">⚙️ My Userscripts</a></h4>
|
||||
<h4>Some <a href="https://addons.mozilla.org/firefox/collections/18049170/octollection/">🦊 Firefox Add-ons</a> <small>(mine + suggestions)</small></h4>
|
||||
<h4>Nice <a href="https://addons.mozilla.org/firefox/collections/18049170/octollection/">🦊 Firefox Add-ons</a>
|
||||
<small>(<a href="https://addons.mozilla.org/firefox/user/18049170/">mine</a> + suggestions)</small></h4>
|
||||
</div></div>
|
||||
<br/><br/><br/>
|
||||
<div id="OcttAgeView">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/bundle.js
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
#!/bin/sh
|
||||
npx esbuild ./SpiderADB.js --bundle --minify --outfile=bundle.js > /dev/null
|
||||
echo index.html util.js bundle.js holo-web
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
#!/bin/sh
|
||||
npm update
|
||||
npm install
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import * as Adb from "../../node_modules/@yume-chan/adb/esm/index.js";
|
||||
import * as AdbDaemonWebUsb from "../../node_modules/@yume-chan/adb-daemon-webusb/esm/index.js";
|
||||
import AdbWebCredentialStore from "../../node_modules/@yume-chan/adb-credential-web/esm/index.js";
|
||||
//window.WebADB = { Adb, AdbDaemonWebUsb, AdbWebCredentialStore };
|
||||
|
||||
(async function(){
|
||||
|
||||
const deviceSelect = $('select$deviceSelect$');
|
||||
const deviceConnect = $('button$deviceConnect$');
|
||||
|
||||
const CredentialStore = new AdbWebCredentialStore();
|
||||
|
||||
const UsbManager = AdbDaemonWebUsb.AdbDaemonWebUsbDeviceManager.BROWSER;
|
||||
if (!UsbManager) {
|
||||
$('div$browserWarning$').innerHTML = `<p>
|
||||
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/USB#browser_compatibility">WebUSB is not supported</a> in this browser, so the app cannot work.
|
||||
Consider using an <a target="_blank" href="https://chromium.woolyss.com">up-to-date Chromium-based</a> one.
|
||||
</p><p>
|
||||
Alternatively, these alternative ADB solutions might work for you:
|
||||
</p><ul>
|
||||
<li><a target="_blank" href="https://www.makeuseof.com/use-adb-over-wifi-android/">
|
||||
How to Set Up and Use ADB Wirelessly With Android
|
||||
</a></li>
|
||||
<li><a target="_blank" href="https://play.google.com/store/apps/details?id=com.htetznaing.adbotg">
|
||||
ADB⚡OTG - Android Debug Bridge
|
||||
</a></li>
|
||||
<li><a target="_blank" href="https://play.google.com/store/apps/details?id=com.draco.ladb">
|
||||
LADB — Local ADB Shell
|
||||
</a></li>
|
||||
</ul>`;
|
||||
return;
|
||||
}
|
||||
|
||||
new AdbDaemonWebUsb.AdbDaemonWebUsbDeviceWatcher(refreshDeviceSection, navigator.usb);
|
||||
|
||||
async function connectAuthorizeDevice () {
|
||||
const devices = await UsbManager.getDevices();
|
||||
const connection = await devices[deviceSelect.selectedIndex - 1].connect();
|
||||
const transport = await Adb.AdbDaemonTransport.authenticate({ connection, credentialStore: CredentialStore });
|
||||
const adb = new Adb.Adb(transport);
|
||||
$('$androidVersion$').innerHTML = `<b>Android version</b>: ${await adb.getProp("ro.build.version.release")}`;
|
||||
}
|
||||
|
||||
async function refreshDeviceSelect () {
|
||||
deviceSelect.disabled = true;
|
||||
deviceSelect.innerHTML = null;
|
||||
const devices = await UsbManager.getDevices();
|
||||
if (devices.length) {
|
||||
deviceSelect.innerHTML = '<option>[📲️ Select a connected device]</option>';
|
||||
devices.forEach(function(device, index){
|
||||
var deviceOption = document.createElement('option');
|
||||
deviceOption.textContent = `${device.raw.productName} [${device.raw.serialNumber}]`;
|
||||
deviceSelect.appendChild(deviceOption);
|
||||
});
|
||||
deviceSelect.onchange = refreshDeviceInfo;
|
||||
deviceSelect.disabled = false;
|
||||
} else {
|
||||
deviceSelect.innerHTML = '<option>[📵️ No connected devices]</option>';
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshDeviceInfo () {
|
||||
if (deviceSelect.selectedIndex > 0) {
|
||||
const devices = await UsbManager.getDevices();
|
||||
const device = devices[deviceSelect.selectedIndex - 1];
|
||||
$('$deviceOem$').innerHTML = `<b>Brand</b>: ${device.raw.manufacturerName}`;
|
||||
$('$deviceModel$').innerHTML = `<b>Model</b>: ${device.raw.productName}`;
|
||||
$('$deviceSerial$').innerHTML = `<b>Serial number</b>: ${device.raw.serialNumber}`;
|
||||
//$('[name="deviceStatus"]').innerHTML = 'Connected to device.';
|
||||
$('$deviceInfo$').hidden = false;
|
||||
} else {
|
||||
//$('[name="deviceStatus"]').innerHTML = null;
|
||||
$('$deviceInfo$').hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshDeviceSection () {
|
||||
await refreshDeviceSelect();
|
||||
await refreshDeviceInfo();
|
||||
}
|
||||
refreshDeviceSection();
|
||||
|
||||
deviceConnect.onclick = (async function(){
|
||||
const device = await UsbManager.requestDevice();
|
||||
if (!device) {
|
||||
return;
|
||||
}
|
||||
await refreshDeviceSection();
|
||||
deviceSelect.selectedIndex = (deviceSelect.children.length - 1);
|
||||
deviceSelect.onchange();
|
||||
await connectAuthorizeDevice();
|
||||
});
|
||||
deviceConnect.disabled = false;
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
/* Base Holo styles for elements
|
||||
* Part of the Holo Web CSS library
|
||||
*
|
||||
* Copyright 2012-2015 Zachary Yaro
|
||||
* Released under the MIT license
|
||||
* http://holo.zmyaro.com/LICENSE.txt
|
||||
*/
|
||||
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic);
|
||||
|
||||
::selection {
|
||||
background-color: #33B5E5;
|
||||
background-color: rgba(51, 181, 229, 0.5);
|
||||
}
|
||||
::-moz-selection {
|
||||
background-color: #33B5E5;
|
||||
background-color: rgba(51, 181, 229, 0.5);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, "Droid Sans", sans-serif;
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
}
|
||||
body:before { /* This is used for the background gradient */
|
||||
z-index: -1000;
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #33B5E5;
|
||||
}
|
||||
|
||||
button, *[role="button"], input, select {
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
input[type="radio"], input[type="checkbox"], select:not([size]), select[size="1"],
|
||||
input[type="range"], input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-o-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
button, *[role="button"],
|
||||
input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"] {
|
||||
outline-style: none;
|
||||
outline-width: 0px;
|
||||
}
|
||||
button, *[role="button"],
|
||||
input[type="button"], input[type="submit"], input[type="reset"],
|
||||
select:not([size]), select[size="1"] {
|
||||
margin: 6px;
|
||||
padding: 4px 12px;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
-webkit-border-radius: 1px;
|
||||
-moz-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
outline-style: none;
|
||||
outline-width: 0px;
|
||||
|
||||
font: inherit;
|
||||
}
|
||||
button, *[role="button"],
|
||||
input[type="button"], input[type="submit"], input[type="reset"] {
|
||||
display: inline-block;
|
||||
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
/* The “active” class is used to force the appearance of the active/pressed state */
|
||||
button:enabled:active, *[role="button"]:active,
|
||||
input[type="button"]:enabled:active, input[type="submit"]:enabled:active, input[type="reset"]:enabled:active,
|
||||
select:active, select[size="1"]:active,
|
||||
button:enabled.active, *[role="button"].active,
|
||||
input[type="button"]:enabled.active, input[type="submit"]:enabled.active, input[type="reset"]:enabled.active,
|
||||
select.active, select[size="1"].active {
|
||||
-webkit-box-shadow: 0px 0px 0px 4px rgba(51, 181, 229, 0.4);
|
||||
-moz-box-shadow: 0px 0px 0px 4px rgba(51, 181, 229, 0.4);
|
||||
box-shadow: 0px 0px 0px 4px rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
|
||||
select:not([size]), select[size="1"] {
|
||||
background-color: transparent;
|
||||
border-width: 0 0 1px 0;
|
||||
}
|
||||
select::-ms-expand { /* Drop-down arrow in IE */
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
margin: 10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
input[type="radio"]::-ms-check, input[type="checkbox"]::-ms-check {
|
||||
display: none;
|
||||
}
|
||||
input[type="radio"] {
|
||||
-webkit-border-radius: 26px;
|
||||
-moz-border-radius: 26px;
|
||||
border-radius: 26px;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
-webkit-border-radius: 1px;
|
||||
-moz-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
background-position: left bottom;
|
||||
}
|
||||
|
||||
input[type="range"], progress {
|
||||
height: 2px;
|
||||
margin: 8px 6px;
|
||||
border-style: none;
|
||||
border-width: 0;
|
||||
outline-style: none;
|
||||
outline-width: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
input[type="range"] *, input[type="range"] {
|
||||
overflow: visible;
|
||||
}
|
||||
input[type="range"]::-moz-range-track {
|
||||
border-style: none;
|
||||
border-width: 0;
|
||||
}
|
||||
input[type="range"]::-ms-track {
|
||||
overflow: visible;
|
||||
border-style: none;
|
||||
border-width: 0;
|
||||
}
|
||||
input[type="range"]::-ms-ticks-before, input[type="range"]::-ms-ticks-after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 2px solid transparent;
|
||||
-webkit-border-radius: 14px;
|
||||
-moz-border-radius: 14px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 2px solid transparent;
|
||||
-moz-border-radius: 14px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
input[type="range"]::-ms-thumb {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 14px;
|
||||
}
|
||||
input[type="range"]:focus::-webkit-slider-thumb, input[type="range"]:disabled::-webkit-slider-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
-webkit-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
input[type="range"]:focus:not(:active)::-moz-range-thumb, input[type="range"]:disabled::-moz-range-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
-moz-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
input[type="range"]:focus::-ms-thumb, input[type="range"]:disabled::-ms-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar-value, progress::-webkit-progress-value {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
progress::-moz-progress-bar {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
progress::-ms-fill {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
progress::-webkit-progress-bar-value:after, progress::-webkit-progress-value:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
}
|
||||
progress::-moz-progress-bar:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
}
|
||||
progress::-ms-fill {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
*:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
/* Base Holo styles for widgets
|
||||
* Part of the Holo Web CSS library
|
||||
*
|
||||
* Copyright 2012-2015 Zachary Yaro
|
||||
* Released under the MIT license
|
||||
* http://holo.zmyaro.com/LICENSE.txt
|
||||
*/
|
||||
|
||||
body {
|
||||
padding-top: 46px;
|
||||
padding-bottom: 46px;
|
||||
}
|
||||
|
||||
.actionBar, .holo-actionBar { /* the top action bar should be a <header> element */
|
||||
display: block;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 48px;
|
||||
|
||||
border-style: solid none;
|
||||
border-width: 1px 0 2px;
|
||||
border-color: transparent;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
footer.actionBar, footer.holo-actionBar { /* a bottom action bar must be a <footer> element */
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
|
||||
border-width: 1px 0 0;
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.actionBar > *, .holo-actionBar > * {
|
||||
margin: -1px 0 -2px;
|
||||
}
|
||||
|
||||
.actionBar span, .holo-actionBar span { /* use this for text in action bars */
|
||||
display: inline-block;
|
||||
padding: 13px 0 14px;
|
||||
}
|
||||
|
||||
.actionBar button, .holo-actionBar button,
|
||||
.actionBar *[role="button"], .holo-actionBar *[role="button"] {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 100%;
|
||||
margin: -1px 0 -2px 0;
|
||||
padding: 1px 10px 2px;
|
||||
vertical-align: top;
|
||||
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
border-style: none;
|
||||
border-width: 0px;
|
||||
outline-style: solid;
|
||||
outline-width: 2px;
|
||||
outline-color: transparent;
|
||||
outline-offset: -2px;
|
||||
-webkit-border-radius: 0px;
|
||||
-moz-border-radius: 0px;
|
||||
border-radius: 0px;
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
font-size: 75%;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
footer.actionBar button, footer.holo-actionBar button,
|
||||
footer.actionBar *[role="button"], footer.holo-actionBar *[role="button"] {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.actionBar button:focus, .holo-actionBar button:focus,
|
||||
.actionBar *[role="button"]:focus, .holo-actionBar *[role="button"]:focus {
|
||||
background-color: rgba(51, 181, 229, 0.3);
|
||||
|
||||
outline-color: #32A5CF;
|
||||
outline-color: rgba(51, 181, 229, 0.9);
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.actionBar button:enabled:active, .holo-actionBar button:enabled:active,
|
||||
.actionBar *[role="button"]:active, .holo-actionBar *[role="button"]:active,
|
||||
.actionBar button:enabled.active, .holo-actionBar button:enabled.active,
|
||||
.actionBar *[role="button"].active, .holo-actionBar *[role="button"].active {
|
||||
background-color: rgba(51, 181, 229, 0.75);
|
||||
|
||||
outline: none;
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.actionBar .holo-title, .holo-actionBar .holo-title {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
text-transform: inherit;
|
||||
height: auto;
|
||||
padding: 13px 10px 14px 16px;
|
||||
}
|
||||
|
||||
.actionBar .holo-title.holo-up, .holo-actionBar .holo-title.holo-up {
|
||||
background-position: 0 16px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.actionBar img, .holo-actionBar img {
|
||||
height: 32px;
|
||||
padding: 8px 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.actionBar button img, .holo-actionBar button img,
|
||||
.actionBar *[role="button"] img, .holo-actionBar *[role="button"] img {
|
||||
margin: -16px 0 -16px;
|
||||
}
|
||||
.actionBar span img, .actionBar .holo-title img, .holo-actionBar span img, .holo-actionBar .holo-title img {
|
||||
margin: -13px 0 -14px;
|
||||
}
|
||||
.actionBar .holo-title img, .holo-actionBar .holo-title img {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.holo-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.holo-list li {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
}
|
||||
.holo-list li:last-child {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.holo-list li button,
|
||||
.holo-list li *[role="button"] {
|
||||
display: block;
|
||||
margin: -16px;
|
||||
padding: 16px;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
text-align: left;
|
||||
|
||||
border: 0 none;
|
||||
-wekbit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
background: transparent none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.holo-list li button:enabled:active,
|
||||
.holo-list li *[role="button"]:active,
|
||||
.holo-list li button:enabled.active,
|
||||
.holo-list li *[role="button"].active {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
a[data-action-section] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.holo-body {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.holo-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.holo-section[data-open="open"] {
|
||||
display: revert;
|
||||
}
|
||||
|
||||
.holo-sidebar, .holo-sideBar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
/* width: 60%; */
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.holo-sidebar[data-open="open"], .holo-sideBar[data-open="open"] {
|
||||
display: revert;
|
||||
}
|
||||
|
||||
.holo-sidebar .holo-list, .holo-sideBar .holo-list {
|
||||
width: 60%;
|
||||
height: 100vh;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.actionBar .holo-title.holo-menu, .holo-actionBar .holo-title.holo-menu {
|
||||
background-position: 0 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(./holo-menu.png);
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.holo-list li button, .holo-list li [role="button"] {
|
||||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* https://github.com/ZMYaro/holo-web/issues/1#issuecomment-12778881 */
|
||||
input[type="text"] {
|
||||
background: transparent;
|
||||
border-width: 0 0 1px;
|
||||
border-color: #7F7F7F;
|
||||
border-style: solid;
|
||||
line-height: 36px;
|
||||
padding: 0px 4px;
|
||||
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 32px;
|
||||
margin: 6px;
|
||||
}
|
||||
textarea {
|
||||
background: transparent;
|
||||
border-width: 0 0 1px;
|
||||
border-color: #7F7F7F;
|
||||
border-style: solid;
|
||||
padding: 4px 4px;
|
||||
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
margin: 6px;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
window.addEventListener('load', (function() {
|
||||
|
||||
$('::[data-action-sidebar]').forEach(function(actionSidebarElem){
|
||||
var sidebarElem = $('[data-sidebar="' + actionSidebarElem.dataset.actionSidebar + '"]');
|
||||
actionSidebarElem.onclick = sidebarElem.onclick = (function(){
|
||||
sidebarElem.dataset.open = (sidebarElem.dataset.open !== 'open' ? 'open' : false);
|
||||
});
|
||||
sidebarElem.querySelector('.holo-list').onclick = (function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
arrayFrom(sidebarElem.querySelectorAll('.holo-list li button, .holo-list li [role="button"]')).forEach(function(buttonElem){
|
||||
buttonElem.addEventListener('click', (function(){
|
||||
sidebarElem.dataset.open = false;
|
||||
}));
|
||||
})
|
||||
});
|
||||
|
||||
$('::[data-action-section]').forEach(function(actionSectionElem){
|
||||
var sectionElems = $('::[data-section]');
|
||||
var sectionTargetName = actionSectionElem.dataset.actionSection;
|
||||
var sectionTargetElem = $('[data-section="' + sectionTargetName + '"]');
|
||||
actionSectionElem.addEventListener('click', (function(event){
|
||||
sectionElems.forEach(function(sectionElem){
|
||||
sectionElem.dataset.open = false;
|
||||
});
|
||||
sectionTargetElem.dataset.open = 'open';
|
||||
refreshDisplaySections(sectionTargetName);
|
||||
}));
|
||||
});
|
||||
|
||||
function refreshDisplaySections (sectionTargetName) {
|
||||
$('::[data-display-sections]').forEach(function(displaySectionsElem){
|
||||
if (displaySectionsElem.dataset.displaySections.split(' ').includes(sectionTargetName)) {
|
||||
displaySectionsElem.style.display = null;
|
||||
} else {
|
||||
displaySectionsElem.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
refreshDisplaySections();
|
||||
|
||||
}));
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
/* Ice Cream Sandwich Holo Dark styles for elements
|
||||
* Part of the Holo Web CSS library
|
||||
*
|
||||
* Copyright 2012-2015 Zachary Yaro
|
||||
* Released under the MIT license
|
||||
* http://holo.zmyaro.com/LICENSE.txt
|
||||
*/
|
||||
|
||||
/* ICS blue = #33B5E5 = rgb(51, 181, 229) */
|
||||
|
||||
body {
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
}
|
||||
body:before {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#272D33');
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#272D33')";
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#272D33));
|
||||
background-image: -webkit-linear-gradient(#000000, #272D33);
|
||||
background-image: -moz-linear-gradient(#000000, #272D33);
|
||||
background-image: -ms-linear-gradient(#000000, #272D33);
|
||||
background-image: -o-linear-gradient(#000000, #272D33);
|
||||
background-image: linear-gradient(#000000, #272D33);
|
||||
}
|
||||
|
||||
button, *[role="button"],
|
||||
input[type="button"], input[type="submit"], input[type="reset"] {
|
||||
background-color: #3D3D3D;
|
||||
background-color: rgba(153, 153, 153, 0.4);
|
||||
|
||||
border-left-color: #3B3B3B;
|
||||
border-left-color: rgba(0, 0, 0, 0.04);
|
||||
border-right-color: #3B3B3B;
|
||||
border-right-color: rgba(0, 0, 0, 0.04);
|
||||
border-top-color: #656565;
|
||||
border-top-color: rgba(193, 193, 193, 0.31);
|
||||
border-bottom-color: #2E2E2E;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.24);
|
||||
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
|
||||
-moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
button:focus, *[role="button"]:focus,
|
||||
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
|
||||
background-color: #14485B;
|
||||
background-color: rgba(51, 181, 229, 0.41);
|
||||
|
||||
border-color: #007AA3;
|
||||
border-color: rgba(0, 153, 204, 0.62);
|
||||
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 153, 204, 0.62);
|
||||
-moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 153, 204, 0.62);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 153, 204, 0.62);
|
||||
}
|
||||
/* The “active” class is used to force the appearance of the active/pressed state */
|
||||
button:enabled:active, *[role="button"]:active,
|
||||
input[type="button"]:enabled:active, input[type="submit"]:enabled:active, input[type="reset"]:enabled:active,
|
||||
button:enabled.active, *[role="button"].active,
|
||||
input[type="button"]:enabled.active, input[type="submit"]:enabled.active, input[type="reset"]:enabled.active {
|
||||
background-color: #2D9FC9;
|
||||
background-color: rgba(51, 181, 229, 0.88);
|
||||
|
||||
border-left-color: #2C9CC6;
|
||||
border-left-color: rgba(0, 0, 0, 0.017);
|
||||
border-right-color: #2C9CC6;
|
||||
border-right-color: rgba(0, 0, 0, 0.017);
|
||||
border-top-color: #50AFD2;
|
||||
border-top-color: rgba(89, 195, 234, 0.51);
|
||||
border-bottom-color: #278BB1;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.12);
|
||||
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(51, 181, 229, 0.4);
|
||||
-moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(51, 181, 229, 0.4);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
|
||||
select:not([size]), select[size="1"] {
|
||||
background: -webkit-linear-gradient(135deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
||||
background: -moz-linear-gradient(135deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
||||
background: -ms-linear-gradient(135deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
||||
background: -o-linear-gradient(135deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
||||
background: linear-gradient(315deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
||||
|
||||
border-bottom-color: #4B4B4B;
|
||||
border-bottom-color: rgba(204, 204, 204, 0.37);
|
||||
|
||||
color: white;
|
||||
}
|
||||
select:not([size]):focus, select[size="1"]:focus {
|
||||
background-color: #0F3645;
|
||||
background-color: rgba(51, 181, 229, 0.3);
|
||||
background: -webkit-linear-gradient(135deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
||||
background: -moz-linear-gradient(135deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
||||
background: -ms-linear-gradient(135deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
||||
background: -o-linear-gradient(135deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
||||
background: linear-gradient(315deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
||||
|
||||
border-bottom-color: #48646D;
|
||||
border-bottom-color: rgba(141, 195, 214, 0.51);
|
||||
|
||||
-webkit-box-shadow: 0 0 0 2px rgba(51, 181, 229, 0.6);
|
||||
-moz-box-shadow: 0 0 0 2px rgba(51, 181, 229, 0.6);
|
||||
box-shadow: 0 0 0 2px rgba(51, 181, 229, 0.6);
|
||||
}
|
||||
/* The “active” class is used to force the appearance of the active/pressed state */
|
||||
select:not([size]):active, select[size="1"]:active,
|
||||
select:not([size]).active, select[size="1"].active {
|
||||
background-color: #1F6D89;
|
||||
background-color: rgba(51, 181, 229, 0.6);
|
||||
background: -webkit-linear-gradient(135deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
||||
background: -moz-linear-gradient(135deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
||||
background: -ms-linear-gradient(135deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
||||
background: -o-linear-gradient(135deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
||||
background: linear-gradient(315deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
||||
|
||||
border-bottom-color: #5E90A3;
|
||||
border-bottom-color: rgba(249, 249, 249, 0.25);
|
||||
|
||||
-webkit-box-shadow: 0 0 0 4px rgba(51, 181, 229, 0.6);
|
||||
-moz-box-shadow: 0 0 0 4px rgba(51, 181, 229, 0.6);
|
||||
box-shadow: 0 0 0 4px rgba(51, 181, 229, 0.6);
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: #282828;
|
||||
color: white;
|
||||
border-top: 1px solid #3E3E3E;
|
||||
}
|
||||
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
border-color: #3C3C3C;
|
||||
border-color: rgba(204, 204, 204, 0.4);
|
||||
}
|
||||
input[type="radio"]:focus, input[type="checkbox"]:focus {
|
||||
-webkit-box-shadow: 0px 0px 0px 2px rgba(51, 181, 229, 0.9);
|
||||
-moz-box-shadow: 0px 0px 0px 2px rgba(51, 181, 229, 0.9);
|
||||
box-shadow: 0px 0px 0px 2px rgba(51, 181, 229, 0.9);
|
||||
}
|
||||
input[type="radio"]:enabled:active, input[type="checkbox"]:enabled:active,
|
||||
input[type="radio"]:enabled.active, input[type="checkbox"]:enabled.active {
|
||||
-webkit-box-shadow: 0px 0px 0px 6px rgba(51, 181, 229, 0.4);
|
||||
-moz-box-shadow: 0px 0px 0px 6px rgba(51, 181, 229, 0.4);
|
||||
box-shadow: 0px 0px 0px 6px rgba(51, 181, 229, 0.4);
|
||||
background-color: #33B5E5;
|
||||
background-color: rgba(51, 181, 229, 0.5);
|
||||
}
|
||||
input[type="radio"]:enabled:active,
|
||||
input[type="radio"]:enabled.active {
|
||||
background: -webkit-radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
||||
background: -moz-radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
||||
background: -ms-radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
||||
background: -o-radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
||||
background: radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
||||
}
|
||||
|
||||
input[type="radio"]:checked {
|
||||
background-color: #0099CC;
|
||||
background: -webkit-radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
||||
background: -moz-radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
||||
background: -ms-radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
||||
background: -o-radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
||||
background: radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
||||
}
|
||||
input[type="checkbox"]:checked {
|
||||
/*background-image: url(check-dark.png);*/
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAMAAAAIRmf1AAAAAXNSR0IArs4c6QAAAmdQTFRFM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7PjKpW9MazaM7XlzMzMzMzMzMzMy8zMxsvNucnPpcbSjMLWdr/aZ73dUbrgM7TkLYKiTI+nOH6YMKrXM7XlzMzMy8zMyszMyszMyczMx8vNwsvNu8nPsMjQpMbTmcTUfcDYLYqsR5u6TLvjTKrNMnuXMKvYM7Xlx8vNM7XlM7XlM7TkLo6yRpu6RLjjObTiLoutJIGjM7XlvcrOxsvNM7XlM7XlM7XlLpC0Rpq5MrLhKpa9IXSSMa3bM7Xls8jQwcrOM7XlM7XlM7XlM7XlM7XlLpK3KpW9InmZMa7dqsfSvcrOMrPiLIGgLYmrM7TkM7XlM7XlM7XlL5S6RZm4RLjiKpW9I3ydMrDeM7XlM7Xlo8bTucnPMrPjLH2bT5y5TZu3Lo+zM7XlM7XlL5i+RZm4I36fMrDfM7Xln8XTtsnQJX6eQZi4RLnjRbjjRZq5L5i/L5rCRJm4RLjiMrHhI36fWrfaQLfjnsXTtcnQM7XlIXKQLZa9M7LhR5q4Rpi3KpW8JH6fMrDflMPVYLzeocbTt8nQMKzZIXWUKpa+QbjkJH6gMrHgM7XloMXTcL7bp8bSusnPMa7cInqaKpe+JH6grMfRhcHYr8jRvsrOM7XlMa/dI3ucKpW8I32fMrHguMnPncXUucrPw8vNMa/dInmZKpS7KZO6InqbMrDfxMvNx8zNM7XlMa3bIHKQIXSSMa/ew8vNM7XlM7XlM7XlzMzMyMzMv8rOyMzNv8rOusrOt8nPNLXlM7XlT49zIwAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAACxMAAAsTAQCanBgAAABmSURBVBjTY2AgCBQwhQyNjNGFbGxP29mjCnnYnvb0whQKQxVKTjntmQrj5OWDyBJkoeqa2joGhsam081wIYbuntMpvX1AoX4kg2Z4np45E1WIgWGx55kzaEIgweY1GH7auo2BSgAALNIh9xzOtlkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked:enabled:active,
|
||||
input[type="radio"]:checked:enabled.active {
|
||||
background-color: #FFFFFF;
|
||||
background: -webkit-radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
||||
background: -moz-radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
||||
background: -ms-radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
||||
background: -o-radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
||||
background: radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
||||
}
|
||||
input[type="checkbox"]:checked:enabled:active,
|
||||
input[type="checkbox"]:checked:enabled.active {
|
||||
/*background-image: url(check-active-dark.png);*/
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZlJREFUOMvd001LAkEYB/ARkwixg+EHsIKOdY6OfQgxjC5ZURF0CqK3rxCBgdcOWVEdIqOy0C22F22NoLItTah0HF3c1dx1d2e3Q1lLCKVeov99fvPwn2cA+AuZCGWWPbGcr5eA3TVBM2FmM56XXiSsSATkgw4CdlYFzYaZ7XheSirqewRZEeZvspsVQ9NhZvcxJ8ESJCmqHEjylIOAXRVBUxRzEM1JqS9IkQnIXw2QqaWKoMkLxv/ASUgLBSB/PXSCVsseGD9P71GZ4tPCLRu0E7AVAAB6CNgxSTHH95yY/oSwIvuThcjgCdr4btQBAMDoKfIOtzW2W00Gi9VU19Sg162bz9KspV5fb7caW5pNBrMOACArKj5CQtQTy9OqDrjKTjV3yRxmi/j143KVFbGwFs/TNCcy2okOEvz9AIm8P/ayGGHPWRHz6lcvWANhX6Lw4CTR1q9KtgWg0X3HXWhBDRR1kmi7olezE7DFTXNUCRSxIu+/FKL9JFqpasNtfmh0RdgQEuTcznOB7jtOjdT8kcfO0j7wb/IGCSVN6j2UdLQAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
input[type="range"], progress {
|
||||
background-color: #292929;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
input[type="range"]::-moz-range-track {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
input[type="range"]::-ms-track {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
background-color: rgba(51, 181, 229, 0.6);
|
||||
background: -webkit-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
||||
}
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
background-color: rgba(51, 181, 229, 0.6);
|
||||
background: -moz-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
||||
}
|
||||
input[type="range"]::-ms-thumb {
|
||||
background-color: rgba(51, 181, 229, 0.6);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
||||
}
|
||||
input[type="range"]:focus::-webkit-slider-thumb {
|
||||
background-color: rgba(51, 181, 229, 0.3);
|
||||
background: -webkit-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
||||
}
|
||||
input[type="range"]:focus::-moz-range-thumb {
|
||||
background-color: rgba(51, 181, 229, 0.3);
|
||||
background: -moz-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
||||
}
|
||||
input[type="range"]:focus::-ms-thumb {
|
||||
background-color: rgba(51, 181, 229, 0.3);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
||||
}
|
||||
input[type="range"]:enabled:active::-webkit-slider-thumb,
|
||||
input[type="range"]:enabled.active::-webkit-slider-thumb {
|
||||
background-color: rgba(51, 181, 229, 0.4);
|
||||
background: -webkit-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
||||
border-color: #33B5E5;
|
||||
}
|
||||
input[type="range"]:enalbed:active::-moz-range-thumb,
|
||||
input[type="range"]:enabled.active::-moz-range-thumb {
|
||||
background-color: rgba(51, 181, 229, 0.4);
|
||||
background: -moz-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
||||
border-color: #33B5E5;
|
||||
}
|
||||
input[type="range"]:active::-ms-thumb, input[type="range"]:enabled.active::-ms-thumb {
|
||||
background-color: rgba(51, 181, 229, 0.4);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
||||
border-color: #33B5E5;
|
||||
}
|
||||
input[type="range"]:disabled::-webkit-slider-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: -webkit-radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
||||
}
|
||||
input[type="range"]:disabled::-moz-range-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: -moz-radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
||||
}
|
||||
input[type="range"]:disabled::-ms-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar-value, progress::-webkit-progress-value {
|
||||
background-color: #0690BE;
|
||||
}
|
||||
progress::-moz-progress-bar {
|
||||
background-color: #0690BE;
|
||||
}
|
||||
input[type="range"]::-ms-fill-lower, progress::-ms-fill {
|
||||
background-color: #0690BE;
|
||||
}
|
||||
progress::-webkit-progress-bar-value:after, progress::-webkit-progress-value:after {
|
||||
-webkit-box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
||||
box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
||||
}
|
||||
progress::-moz-progress-bar:after {
|
||||
-moz-box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
||||
box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
||||
}
|
||||
progress::-ms-fill {
|
||||
box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/* Ice Cream Sandwich Holo Dark styles for widgets
|
||||
* Part of the Holo Web CSS library
|
||||
*
|
||||
* Copyright 2012-2015 Zachary Yaro
|
||||
* Released under the MIT license
|
||||
* http://holo.zmyaro.com/LICENSE.txt
|
||||
*/
|
||||
|
||||
.actionBar, .holo-actionBar {
|
||||
background-color: #010101;
|
||||
|
||||
border-top-color: #0F0F0F;
|
||||
border-bottom-color: #33B5E5;
|
||||
}
|
||||
footer.actionBar, footer.holo-actionBar {
|
||||
background-color: #262B31;
|
||||
|
||||
border-top-color: #505359;
|
||||
}
|
||||
|
||||
.actionBar .holo-title.holo-up, .holo-actionBar .holo-title.holo-up {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAABAAAAAQAFzGrcMAAADaSURBVCjPddG9SkNBFATgb5drCAhiYRUs7BQsRDCtQfIevppP4k/KgIUgiJYWEQtLxT/uXYu9N9lIMtVh9pyZYTZokbqhJ4q+1QRUFgiSbee2vLroyKq4D5JTu2pTtRgaiMVzY+BY7cG9oMmmUYkzfZ8uSyrmY0Gy70Bw60WUcsSFRRKM9LyZZCKUCiKG9vy68pHvlyzaKZR1LC80mHq2YWxTM9f/F/LGjx2jTKRyoQ356ElyYpA1VvVw7UvfeFUPJNHMncqhI0kMpULoGp+YeTdUdVXP86777j8ScUEXuCRR/QAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMS0wNy0wMVQxMzoxMDoyNS0wNzowMDPfgNMAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTEtMDctMDFUMTM6MTA6MjUtMDc6MDBCgjhvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.holo-list li {
|
||||
border-color: #262626;
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.holo-list li button:focus,
|
||||
.holo-list li *[role="button"]:focus{
|
||||
background-color: #0F3645;
|
||||
background-color: rgba(51, 181, 229, 0.31);
|
||||
-webkit-box-shadow: inset 0 0 0 2px rgba(51, 181, 229, 0.42);
|
||||
-moz-box-shadow: inset 0 0 0 2px rgba(51, 181, 229, 0.42);
|
||||
box-shadow: inset 0 0 0 2px rgba(51, 181, 229, 0.42);
|
||||
}
|
||||
.holo-list li button:enabled:active,
|
||||
.holo-list li *[role="button"]:active,
|
||||
.holo-list li button:enabled.active,
|
||||
.holo-list li *[role="button"].active {
|
||||
background-color: #1E6C89;
|
||||
background-color: rgba(51, 181, 229, 0.6);
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 98 B |
|
|
@ -0,0 +1,70 @@
|
|||
/* Script for triggering element active states when touched
|
||||
* Supplement to the Holo Web CSS library
|
||||
*
|
||||
* Copyright 2012-2015 Zachary Yaro
|
||||
* Released under the MIT license
|
||||
* http://holo.zmyaro.com/LICENSE.txt
|
||||
*/
|
||||
|
||||
window.addEventListener("load", function(e) {
|
||||
// Do not run the script on Chrome 32 or higher.
|
||||
/*if(/Chrome\/[3-9][2-9]/.test(navigator.userAgent)) {
|
||||
return;
|
||||
}*/
|
||||
|
||||
// Create an array of all input elements.
|
||||
var inputElems = Array.prototype.slice.call(document.getElementsByTagName("button")).concat(
|
||||
Array.prototype.slice.call(document.getElementsByTagName("select"))).concat(
|
||||
Array.prototype.slice.call(document.getElementsByTagName("input")));
|
||||
|
||||
// If they can be found, identify all elements with role="button".
|
||||
if(document.querySelectorAll) {
|
||||
inputElems = inputElems.concat(
|
||||
Array.prototype.slice.call(document.querySelectorAll("*[role=\"button\"]")));
|
||||
}
|
||||
|
||||
var elemTypes = ["button", "select"];
|
||||
var inputTypes = ["button", "checkbox", "radio", "range", "reset", "submit"];
|
||||
|
||||
for(var i = 0; i < inputElems.length; i++) {
|
||||
// If the element is a supported form element,
|
||||
if(elemTypes.indexOf(inputElems[i].tagName.toLowerCase()) !== -1 ||
|
||||
// Or the element is a supported <input> type,
|
||||
inputTypes.indexOf(inputElems[i].type.toLowerCase()) !== -1 ||
|
||||
// Or the element has role="button",
|
||||
(inputElems[i].getAttribute("role") && inputElems[i].getAttribute("role").toLowerCase() === "button")) {
|
||||
// Add the touch event listeners.
|
||||
inputElems[i].addEventListener("touchstart", makeActive, false);
|
||||
inputElems[i].addEventListener("touchend", makeInactive, false);
|
||||
inputElems[i].addEventListener("touchcancel", makeInactive, false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Adds the “active” class to the touched element
|
||||
* @param {TouchEvent} e
|
||||
*/
|
||||
function makeActive(e) {
|
||||
if(!!e.srcElement.classList) { // use classList API if available
|
||||
e.srcElement.classList.add("active");
|
||||
} else {
|
||||
e.srcElement.className += " active";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the “active” class from the touched element
|
||||
* @param {TouchEvent} e
|
||||
*/
|
||||
function makeInactive(e) {
|
||||
if(!!e.srcElement.classList) { // use classList API if available
|
||||
e.srcElement.classList.remove("active");
|
||||
} else {
|
||||
e.srcElement.className = e.srcElement.className.replace(/\s*active/g, "");
|
||||
}
|
||||
|
||||
}
|
||||
}, false);
|
||||
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>🕷️ SpiderADB</title>
|
||||
<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="../Assets/JS/Global.js"></script>
|
||||
<style>
|
||||
.floatRight { float: right; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="holo-actionBar">
|
||||
<button class="holo-title holo-menu" data-action-sidebar="sidebar">
|
||||
🕷️ SpiderADB <small>(WIP)</small>
|
||||
</button>
|
||||
<!-- <button class="floatRight" data-display-sections="terminal">
|
||||
Tabs
|
||||
</button> -->
|
||||
</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="about">
|
||||
❓️ About
|
||||
</button></li>
|
||||
<li>
|
||||
<i><!--More-->Actual features coming soon!</i>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="holo-body">
|
||||
<p name="connectReminder" data-display-sections="terminal">
|
||||
You must <a data-action-section="devices">connect and authorize a device</a> first.
|
||||
</p>
|
||||
<section class="holo-section" data-section="devices" data-open="open">
|
||||
<div name="browserWarning"><p></p></div>
|
||||
<select name="deviceSelect" disabled="true"></select>
|
||||
<button name="deviceConnect" disabled="true">
|
||||
Connect New Device
|
||||
</button>
|
||||
<p name="deviceStatus"></p>
|
||||
<ul name="deviceInfo" hidden="true">
|
||||
<li name="deviceOem"></li>
|
||||
<li name="deviceModel"></li>
|
||||
<li name="deviceSerial"></li>
|
||||
<li name="androidVersion"></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="holo-section" data-section="terminal">
|
||||
<textarea readonly="true" disabled="true" style="width: 100%; margin-left: 0; margin-right: 0;"></textarea>
|
||||
<input type="text" disabled="true" style="width: 100%; margin-left: 0; margin-right: 0;"/>
|
||||
</section>
|
||||
<section class="holo-section" data-section="about">
|
||||
<p>SpiderADB is an user-friendly webapp for connecting to devices via the Android Debug Bridge, straight from a browser. More infos coming soon.</p>
|
||||
<h3>Changelog</h3>
|
||||
<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>Introduced sections: Devices, About.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
<script src="./bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
{
|
||||
"name": "SpiderADB",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@yume-chan/adb": "^0.0.23",
|
||||
"@yume-chan/adb-credential-web": "^0.0.23",
|
||||
"@yume-chan/adb-daemon-webusb": "^0.0.23"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/w3c-web-usb": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/w3c-web-usb/-/w3c-web-usb-1.0.10.tgz",
|
||||
"integrity": "sha512-CHgUI5kTc/QLMP8hODUHhge0D4vx+9UiAwIGiT0sTy/B2XpdX1U5rJt6JSISgr6ikRT7vxV9EVAFeYZqUnl1gQ=="
|
||||
},
|
||||
"node_modules/@yume-chan/adb": {
|
||||
"version": "0.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@yume-chan/adb/-/adb-0.0.23.tgz",
|
||||
"integrity": "sha512-RMX+GEzxYrnxMOeRG1Qc2ibTp/8ykShSnnPUAya/JfRMn717AP11T7wLovnzqnNbLG49EpnD4AxwrcOusddybw==",
|
||||
"dependencies": {
|
||||
"@yume-chan/async": "^2.2.0",
|
||||
"@yume-chan/dataview-bigint-polyfill": "^0.0.23",
|
||||
"@yume-chan/event": "^0.0.23",
|
||||
"@yume-chan/stream-extra": "^0.0.23",
|
||||
"@yume-chan/struct": "^0.0.23",
|
||||
"tslib": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@yume-chan/adb-credential-web": {
|
||||
"version": "0.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@yume-chan/adb-credential-web/-/adb-credential-web-0.0.23.tgz",
|
||||
"integrity": "sha512-2KcYjTqj2opKt59fuSL9R8jiQBylff3Vn7QUXcoOgNxil9UX3WZCjnO3Cvlm5sACPDsLBYmspuYq+3Ex0PnRsw==",
|
||||
"dependencies": {
|
||||
"@yume-chan/adb": "^0.0.23",
|
||||
"tslib": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@yume-chan/adb-daemon-webusb": {
|
||||
"version": "0.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@yume-chan/adb-daemon-webusb/-/adb-daemon-webusb-0.0.23.tgz",
|
||||
"integrity": "sha512-i7j5ehOwvlaedYR2a4hbd6t0esRLHelvxdRRnyV37nn896p7+AgG6FIfWiXhd7w6VkC20NepAZTFHB0b0eIm5g==",
|
||||
"dependencies": {
|
||||
"@types/w3c-web-usb": "^1.0.10",
|
||||
"@yume-chan/adb": "^0.0.23",
|
||||
"@yume-chan/stream-extra": "^0.0.23",
|
||||
"@yume-chan/struct": "^0.0.23",
|
||||
"tslib": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@yume-chan/async": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@yume-chan/async/-/async-2.2.0.tgz",
|
||||
"integrity": "sha512-jatCtX1/3DsR9Vt3EB8CGFy0MNrXP5f+eNiRGHLH+LkYz7MPLzpqL/DnvXSip+Z0EKBCDnzuNuELjsKEEzcdQA==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@yume-chan/dataview-bigint-polyfill": {
|
||||
"version": "0.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@yume-chan/dataview-bigint-polyfill/-/dataview-bigint-polyfill-0.0.23.tgz",
|
||||
"integrity": "sha512-ZlE0xrG5xmStZYlrWLSLXprvIwcAmUTyU/YsAJLsNel1j27RlzeherAfPSLthTwV2jlFwUfMJ3IqtVMjk2XA5A==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@yume-chan/event": {
|
||||
"version": "0.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@yume-chan/event/-/event-0.0.23.tgz",
|
||||
"integrity": "sha512-WgljyzEzd5ice5Logp2lkMegvxHKWjQpg8crXPx9CqBPxwT4f2dz4ORUceQUZ6B0CxppLBXp6CJf3D3wfRJbEQ==",
|
||||
"dependencies": {
|
||||
"@yume-chan/async": "^2.2.0",
|
||||
"tslib": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@yume-chan/stream-extra": {
|
||||
"version": "0.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@yume-chan/stream-extra/-/stream-extra-0.0.23.tgz",
|
||||
"integrity": "sha512-Q48X6mot5ORGscDvJhwNB0jjwRGpd/Rezpms5/0bVDtrwI7oFlWBNU2SKLXfeV1Qjxc5r5yUued09InEfMU5AA==",
|
||||
"dependencies": {
|
||||
"@yume-chan/async": "^2.2.0",
|
||||
"@yume-chan/struct": "^0.0.23",
|
||||
"tslib": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@yume-chan/struct": {
|
||||
"version": "0.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@yume-chan/struct/-/struct-0.0.23.tgz",
|
||||
"integrity": "sha512-yGzeXfpmVwhO8jnrrZBPiNTF4kGk4127/3wUQ0hhH7CLj+eRroCYOQyMl4pvGKhChOHIQioU4NmhDlBgCPYEFQ==",
|
||||
"dependencies": {
|
||||
"@yume-chan/dataview-bigint-polyfill": "^0.0.23",
|
||||
"tslib": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@yume-chan/adb": "^0.0.23",
|
||||
"@yume-chan/adb-credential-web": "^0.0.23",
|
||||
"@yume-chan/adb-daemon-webusb": "^0.0.23"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
(function(){
|
||||
|
||||
function arrayFrom (items) {
|
||||
var itemsArray = [];
|
||||
for (var i=0; i<items.length; i++) {
|
||||
itemsArray.push(items[i]);
|
||||
}
|
||||
return itemsArray;
|
||||
}
|
||||
|
||||
function domSelector (query, tree=document) {
|
||||
query = query.trim();
|
||||
return (query.startsWith('::')
|
||||
? arrayFrom(tree.querySelectorAll(domSpecialQuery(query.slice(2).trim())))
|
||||
: tree.querySelector(domSpecialQuery(query))
|
||||
);
|
||||
}
|
||||
|
||||
function domSpecialQuery (query) {
|
||||
query = query.trim();
|
||||
if (query.endsWith('$')) {
|
||||
query = query.split('$');
|
||||
return `${query.slice(0, -2).join('$')}[name="${query.slice(-2)[0]}"]`;
|
||||
} else {
|
||||
return query;
|
||||
}
|
||||
}
|
||||
|
||||
window.arrayFrom = arrayFrom;
|
||||
window.$ = domSelector;
|
||||
|
||||
})();
|
||||
Loading…
Reference in New Issue