124 lines
6.2 KiB
HTML
124 lines
6.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>ShowerLoop - Video 1</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="ShowerLoop - Real-time filtration, purification, recycling & heat recovery system for showers.">
|
|
|
|
<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/video-js.min.css">
|
|
<link rel="stylesheet" href="/static/css/custom-video.css">
|
|
<link rel="stylesheet" href="/static/css/chrome-video-fallback.css">
|
|
<script src="/static/js/vendor/video.min.js"></script>
|
|
<script src="/static/js/vendor/videojs-http-streaming.min.js"></script>
|
|
<script src="/static/js/videojs-player.min.js"></script>
|
|
<script src="/static/js/chrome-video-fallback.min.js"></script>
|
|
|
|
<style>
|
|
.video-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.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">ShowerLoop Introduction</h1>
|
|
</div>
|
|
|
|
<div class="video-container">
|
|
<video id="video1" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video1.webp" data-setup="{}">
|
|
<source src="/static/videos/hls/video1/master.m3u8" type="application/x-mpegurl">
|
|
<source src="/static/videos/video1.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 provides an introduction to ShowerLoop - a real-time filtration, purification, recycling & heat recovery system for showers. Learn how ShowerLoop can help you save water and energy while enjoying a comfortable shower experience.</p>
|
|
|
|
<h3 class="mdl-typography--title">Key Features</h3>
|
|
<ul>
|
|
<li>90% reduction in water usage</li>
|
|
<li>70-90% reduction in energy consumption</li>
|
|
<li>Real-time water filtration and purification</li>
|
|
<li>Heat recovery system</li>
|
|
<li>Open source and open hardware design</li>
|
|
</ul>
|
|
</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> |