143 lines
6.8 KiB
HTML
143 lines
6.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>ShowerLoop - Video 3</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="ShowerLoop - Installation and Setup: Learn how to install and set up your own 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;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
position: relative;
|
|
height: 70vh; /* 70% of viewport height */
|
|
min-height: 500px; /* Minimum height to ensure visibility */
|
|
background-color: #000;
|
|
}
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
.video-title {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.video-description {
|
|
margin-top: 30px;
|
|
padding: 0 20px;
|
|
max-width: 1200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.back-link {
|
|
margin: 20px;
|
|
display: inline-block;
|
|
}
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.video-container {
|
|
height: 50vh;
|
|
min-height: 350px;
|
|
}
|
|
}
|
|
</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 Installation Guide</h1>
|
|
</div>
|
|
|
|
<div class="video-container">
|
|
<video id="video3" controls autoplay muted preload="auto" width="100%" poster="/static/videos/posters/video3.webp">
|
|
<source src="/static/videos/video3.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 a step-by-step guide to installing and setting up your own ShowerLoop system. Follow along as we demonstrate the assembly process, component installation, and initial system testing.</p>
|
|
|
|
<h3 class="mdl-typography--title">Installation Steps</h3>
|
|
<ol>
|
|
<li>Gathering the necessary components and tools</li>
|
|
<li>Assembling the filtration system</li>
|
|
<li>Setting up the water collection and recirculation</li>
|
|
<li>Installing the heat recovery system</li>
|
|
<li>Testing and troubleshooting</li>
|
|
</ol>
|
|
|
|
<p>The ShowerLoop system is designed with a DIY approach, making it accessible to anyone with basic handyman skills. The open-source nature of the project means you can adapt the design to your specific bathroom setup and needs.</p>
|
|
|
|
<h3 class="mdl-typography--title">Additional Resources</h3>
|
|
<p>For more detailed instructions and component lists, visit our <a href="/components/">Components</a> page and <a href="/how-it-works/">How It Works</a> section.</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> |