126 lines
6.0 KiB
HTML
126 lines
6.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>ShowerLoop - Video 2</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="ShowerLoop - How It Works: Learn about the technology behind our water recycling shower system.">
|
|
|
|
<link rel="stylesheet" href="/css/vendor/material-icons.css">
|
|
<link rel="stylesheet" href="/css/vendor/material.indigo-pink.min.css">
|
|
<link rel="stylesheet" href="/css/vendor/fontawesome.min.css">
|
|
<script type="module" src="/js/app.modern.min.js" defer></script>
|
|
<script type="module" src="/js/skip-to-content.modern.min.js" defer></script>
|
|
<script type="module" src="/js/material.modern.min.js" defer></script>
|
|
<script nomodule src="/js/app.min.js" defer></script>
|
|
<script nomodule src="/js/skip-to-content.min.js" defer></script>
|
|
<script nomodule src="/js/material.min.js" defer></script>
|
|
<link rel="stylesheet" type="text/css" href="/css/app.min.css">
|
|
<link rel="stylesheet" type="text/css" href="/css/custom.css">
|
|
|
|
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
|
|
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
|
|
|
|
<!-- Video.js CSS and JS -->
|
|
<link rel="stylesheet" href="/static/css/custom-video.css">
|
|
|
|
<style>
|
|
.video-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
video {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 80vh;
|
|
background-color: #000;
|
|
}
|
|
.video-title {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.video-description {
|
|
margin-top: 30px;
|
|
padding: 0 20px;
|
|
}
|
|
.back-link {
|
|
margin: 20px;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="page">
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
|
<header class="mdl-layout__header site-header">
|
|
<div class="mdl-layout__header-row">
|
|
<a href="/" class="mdl-layout-title">
|
|
<img class="logo" src="/images/logo2.webp" height="50" width="auto" alt="ShowerLoop Logo">
|
|
</a>
|
|
<div class="mdl-layout-spacer"></div>
|
|
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
|
<a class="mdl-navigation__link" href="/" title="Home">Home</a>
|
|
<a class="mdl-navigation__link" href="/how-it-works/" title="How It Works">How It Works</a>
|
|
<a class="mdl-navigation__link" href="/research/" title="Research">Research</a>
|
|
<a class="mdl-navigation__link" href="/posts/" title="Posts">Posts</a>
|
|
<a class="mdl-navigation__link" href="/components/" title="Components">Components</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mdl-layout__drawer">
|
|
<span class="mdl-layout-title"><strong>ShowerLoop</strong></span>
|
|
<nav class="mdl-navigation">
|
|
<a class="mdl-navigation__link" href="/" title="Home" tabindex="0">Home</a>
|
|
<a class="mdl-navigation__link" href="/how-it-works/" title="How It Works" tabindex="0">How It Works</a>
|
|
<a class="mdl-navigation__link" href="/research/" title="Research" tabindex="0">Research</a>
|
|
<a class="mdl-navigation__link" href="/posts/" title="Posts" tabindex="0">Posts</a>
|
|
<a class="mdl-navigation__link" href="/components/" title="Components" tabindex="0">Components</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<main class="mdl-layout__content">
|
|
<div class="page-content">
|
|
<a href="/" class="back-link mdl-button mdl-js-button mdl-button--raised">
|
|
<i class="material-icons">arrow_back</i> Back to Home
|
|
</a>
|
|
|
|
<div class="video-title">
|
|
<h1 class="mdl-typography--display-2">How ShowerLoop Works</h1>
|
|
</div>
|
|
|
|
<div class="video-container">
|
|
<video id="video2" controls preload="auto" width="100%" poster="/static/videos/posters/video2.webp">
|
|
<source src="/static/videos/video2.mp4" type="video/mp4">
|
|
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
|
|
</video>
|
|
</div>
|
|
|
|
<div class="video-description">
|
|
<h2 class="mdl-typography--headline">About This Video</h2>
|
|
<p>This video explains in detail how the ShowerLoop system works. Learn about the filtration process, heat recovery system, and the technology that makes it possible to reuse shower water in real-time while maintaining cleanliness and comfort.</p>
|
|
|
|
<h3 class="mdl-typography--title">The ShowerLoop Process</h3>
|
|
<ol>
|
|
<li>Water collection from shower floor</li>
|
|
<li>Multi-stage filtration system</li>
|
|
<li>Heat retention and energy efficiency</li>
|
|
<li>Clean water recirculation</li>
|
|
<li>Minimal water and energy consumption</li>
|
|
</ol>
|
|
|
|
<p>The ShowerLoop system is designed to be easy to install, maintain, and integrate into existing bathroom setups. Its open-source nature means you can adapt it to your specific needs and contribute to its ongoing development.</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="mdl-mini-footer site-footer">
|
|
<div class="mdl-mini-footer__left-section">
|
|
© 2020 Shower Loop | All Rights Reserved
|
|
</div>
|
|
<div class="mdl-mini-footer__right-section"></div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html> |