BangleApps/index.html

132 lines
5.1 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/spectre.min.css">
<link rel="stylesheet" href="css/spectre-exp.min.css">
<link rel="stylesheet" href="css/spectre-icons.min.css">
<title>Bangle.js App Loader</title>
<style>
.navbar { background-color: #5755d9; padding: 0.5em 1em 0.5em 1em; }
.navbar .navbar-brand {
color: #fff;
font-weight: bold;
}
.avatar img {
border-radius: 5px 5px 5px 5px;
background: #ddd;
}
#toastcontainer {
position:fixed;
bottom:8px;left:0px;right:0px;
z-index: 100;
}
.hero {
padding-bottom: 1rem;
padding-top: 1rem;
text-align:center;
}
.chip {
cursor: pointer;
}
</style>
</head>
<body>
<header class="navbar-primary navbar">
<section class="navbar-section">
<a href="https://banglejs.com" class="navbar-brand mr-2"><img src="img/banglejs-logo-sml.png" alt="Bangle.js">&nbsp;&nbsp;App Loader</a>
<!-- <a href="#" class="btn btn-link">...</a> -->
</section>
<section class="navbar-section">
<button class="btn" id="connectmydevice">Connect</button>
</section>
<!--<section class="navbar-section">
<div class="input-group input-inline">
<input class="form-input" type="text" placeholder="search">
<button class="btn btn-primary input-group-btn">Search</button>
</div>
</section>-->
</header>
<div class="container" style="padding-top:4px">
<p><span class="label label-error">App Loader is incompatible with 'old' Bangle.js firmwares</span>
<a href="https://www.espruino.com/Bangle.js#firmware-updates" target="_blank">(<a href="http://forum.espruino.com/conversations/344251/" target="_blank">more info</a>) Please update to the <a href="https://www.espruino.com/Bangle.js#firmware-updates">latest firmware</a> or
<a href="https://banglejs.com/oldapps/">use the legacy apps</a>.
</p>
</div>
<ul class="tab tab-block" id="tab-navigate">
<li class="tab-item active" id="tab-librarycontainer">
<a href="javascript:showTab('librarycontainer')">Library</a>
</li>
<li class="tab-item" id="tab-myappscontainer">
<a href="javascript:showTab('myappscontainer')">My Apps</a>
</li>
<li class="tab-item" id="tab-aboutcontainer">
<a href="javascript:showTab('aboutcontainer')">About</a>
</li>
</ul>
<div class="container" id="toastcontainer">
</div>
<div class="container bangle-tab" id="librarycontainer">
<div class="filter-nav">
<label class="chip active" filterid="">All</label>
<label class="chip" filterid="clock">Clocks</label>
<label class="chip" filterid="game">Games</label>
<label class="chip" filterid="tool">Tools</label>
<label class="chip" filterid="widget">Widgets</label>
<label class="chip" filterid="bluetooth">Bluetooth</label>
</div>
<div class="panel">
<div class="panel-header">
<div class="input-group" id="searchform">
<input class="form-input" type="text" placeholder="Keywords...">
<button class="btn btn-primary input-group-btn">Search</button>
</div>
</div>
<div class="panel-body columns"><!-- apps go here --></div>
</div>
</div>
<div class="container bangle-tab" id="myappscontainer" style="display:none">
<div class="panel">
<div class="panel-header" style="text-align:right">
<button class="btn refresh">Refresh...</button>
</div>
<div class="panel-body columns"><!-- apps go here --></div>
</div>
</div>
<div class="container bangle-tab" id="aboutcontainer" style="display:none">
<div class="hero bg-gray">
<div class="hero-body">
<a href="https://banglejs.com"><img src="img/banglejs-logo-mid.png" alt="Bangle.js"></a>
<h2>App Loader</h2>
<p>A tool for uploading and removing apps from <a href="https://banglejs.com">Bangle.js Smart Watches</a></p>
</div>
</div>
<div class="container" style="padding-top: 8px;">
<p>Using <a href="https://espruino.com/">Espruino</a>, Icons from <a href="https://icons8.com/">icons8.com</a></p>
<p>Check out <a href="https://github.com/espruino/BangleApps">the Source on GitHub</a> for more information.</p>
<h3>Utilities</h3>
<p><button class="btn" id="settime">Set Bangle.js Time</button>
<button class="btn" id="removeall">Remove all Apps</button>
<button class="btn" id="installdefault">Install default apps</button></p>
</div>
</div>
<script src="https://www.puck-js.com/puck.js"></script>
<script src="utils.js"></script>
<script src="comms.js"></script>
<script src="appinfo.js"></script>
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js" type="application/javascript"></script>
</body>
</html>