pareto-anywhere
Version:
Open source IoT middleware suite that makes the data from just about anything usable. We believe in an open Internet of Things.
275 lines (273 loc) • 11.7 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Collection of web apps for Pareto Anywhere by reelyActive.">
<link rel="stylesheet" href="style/bootstrappyactive.min.css">
<script type="module" src="js/color-modes.js"></script>
<title> Pareto Apps </title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary shadow">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.reelyactive.com/">
<img src="images/reelyactive-logo-square-nav.png"
width="30" height="30" alt="reelyActive">
</a>
<a class="navbar-brand" href="./">
<img src="images/pareto-apps-logo-nav.png" width="135" height="30"
alt="Pareto Apps">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarItems" aria-controls="navbarItems"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarItems">
<!-- Left-aligned navigation items -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<!-- Right-aligned navigation items -->
<ul class="navbar-nav">
<!-- Colour theme chooser -->
<li class="nav-item dropdown">
<button class="btn btn-link nav-link dropdown-toggle"
id="bd-theme" type="button" aria-expanded="false"
data-bs-toggle="dropdown" data-bs-display="static"
aria-label="Toggle theme (auto)">
<i class="fas fa-adjust"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item"
data-bs-theme-value="light" aria-pressed="false">
<i class="fas fa-sun"></i> Light
</button>
</li>
<li>
<button type="button" class="dropdown-item"
data-bs-theme-value="dark" aria-pressed="false">
<i class="fas fa-moon"></i> Dark
</button>
</li>
<li>
<button type="button" class="dropdown-item active"
data-bs-theme-value="auto" aria-pressed="true">
<i class="fas fa-adjust"></i> Auto
</button>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarInfoDropdown"
role="button" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-question-circle"></i>
</a>
<!-- Info about tracking and open source software/licenses -->
<ul class="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="navbarInfoDropdown">
<li>
<a class="dropdown-item"
href="https://www.reelyactive.com/how-we-observe/#digital">
<i class="fas fa-mouse-pointer"></i>
Behaviour tracking free
<span class="badge bg-success animate-breathing">
<i class="fas fa-user-shield"></i>
</span>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" target="_blank"
href="https://getbootstrap.com" >
<i class="fab fa-bootstrap"></i>
Bootstrap 5
<span class="badge bg-light text-dark">
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li>
<a class="dropdown-item" target="_blank"
href="https://fontawesome.com" >
<i class="fab fa-font-awesome"></i>
Font Awesome (Free)
<span class="badge bg-light text-dark">
<i class="fab fa-creative-commons"></i>
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li>
<a class="dropdown-item" target="_blank"
href="https://github.com/reelyactive/web-style-guide/" >
<i class="fas fa-code"></i>
Web Style Guide
<span class="badge bg-light text-dark">
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" target="_blank"
href="https://www.reelyactive.com/made-in-montreal/" >
<i class="fab fa-canadian-maple-leaf"></i>
Made in Montréal
<i class="fas fa-city"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Content -->
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-xl-12 col-xxl-10">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xxl-6 g-4 my-4"
id="appcards">
<!-- Hyperlocal Context Explorer -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="hlc-explorer/?updates=periodic">
<img src="images/hlc-explorer-icon.png"
class="card-img-top" alt="Hyperlocal Context Explorer">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Hyperlocal Context Explorer </h5>
</div>
</div>
</div>
<!-- Ambient Context -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="ambient-context">
<img src="images/ambient-context-icon.png"
class="card-img-top" alt="Ambient Context">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Ambient Context </h5>
</div>
</div>
</div>
<!-- Devices Observer -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="devices-observer">
<img src="images/devices-observer-icon.png"
class="card-img-top" alt="Devices Observer">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Devices Observer </h5>
</div>
</div>
</div>
<!-- Raindrops -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="raindrops">
<img src="images/raindrops-icon.png"
class="card-img-top" alt="Raindrops">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Raindrops </h5>
</div>
</div>
</div>
<!-- Live Directory -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="live-directory">
<img src="images/live-directory-icon.jpg"
class="card-img-top" alt="Live Directory">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Live Directory </h5>
</div>
</div>
</div>
<!-- Hello dynamb! -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="hello-dynamb">
<img src="images/hello-dynamb-icon.png"
class="card-img-top" alt="Hello dynamb!">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Hello dynamb! </h5>
</div>
</div>
</div>
<!-- Hello spatem! -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="hello-spatem">
<img src="images/hello-spatem-icon.png"
class="card-img-top" alt="Hello spatem!">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Hello spatem! </h5>
</div>
</div>
</div>
<!-- Hello beaver! -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="hello-beaver">
<img src="images/hello-beaver-icon.png"
class="card-img-top" alt="Hello beaver!">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Hello beaver! </h5>
</div>
</div>
</div>
<!-- Hello Sniffypedia! -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="hello-sniffypedia">
<img src="images/hello-sniffypedia-icon.png"
class="card-img-top" alt="Hello Sniffypedia!">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Hello Sniffypedia! </h5>
</div>
</div>
</div>
<!-- Occupancy Observer -->
<div class="col">
<div class="card h-100 hover-shadow">
<a href="occupancy-observer">
<img src="images/occupancy-observer-icon.png"
class="card-img-top" alt="Occupancy Observer">
</a>
<div class="card-footer bg-dark bg-gradient text-white">
<h5 class="mb-0 text-truncate"> Occupancy Observer </h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer bg-dark bg-gradient">
<a href="https://github.com/reelyactive/pareto-anywhere-apps">
pareto-anywhere-apps
</a>
|
<a href="https://www.reelyactive.com"> © reelyActive 2018-2025 </a>
</footer>
<!-- Optional JavaScript -->
<script defer src="js/fontawesome-reelyactive.min.js"></script>
<script src="js/bootstrappyactive.bundle.min.js"></script>
</body>
</html>