jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-22 16:56:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

HA Blue Out Of Stock (#21604)

Browse Source
This commit is contained in:
Zack Barett 2022-02-11 13:13:56 -06:00 committed by GitHub
parent d5872f0561
commit 145c4b5df2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sass/custom/_landingpage.scss
View File

@ -331,6 +331,10 @@ $ha__primary_color: #03a9f4;
color: #ffffff;
}
}
.banner-overlay-button.disabled {
background-color: #bdbdbd;
cursor: initial;
}
.below-button {
margin-top: 8px;
text-align: center;

141
source/blue/index.html
View File

@ -37,24 +37,16 @@ frontpage_image: /images/frontpage/blue-frontpage.jpg
</div>
<div class="material-card text box">
<div class="banner-overlay-header">LIMITED EDITION</div>
<div class="banner-overlay-price">
$146
<div>*</div>
</div>
<div class="banner-overlay-images">
<div class="img-container"><img src="/images/blue/blue1.png" /></div>
<div class="img-container"><img src="/images/blue/blue2.png" /></div>
<div class="img-container"><img src="/images/blue/blue3.png" /></div>
</div>
<div class="banner-overlay-button" onclick="showBuyDialog()">
<div>BUY NOW</div>
<div class="banner-overlay-button disabled">
<div>Out of Stock</div>
</div>
<div class='below-button'>Limited stock left</div>
</div>
</div>
<div class="banner-overlay-disclaimer">
* Price does not include taxes and import fees
</div>
<div class="bullet-points">
<div class="item">
@ -620,132 +612,5 @@ Nope! We are committed to keep supporting all platforms that are currently avail
</div>
</div>
</a>
<div id="buy-dialog" class="dialog">
<div class="material-card text dialog-content">
<div class="close-container"></div>
<div class="dialog-header">
<span>Home Assistant Blue bundle</span>
<span class="dialog-close" onclick="closeDialog()" title="close">
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
/>
</svg>
</span>
</div>
<div class="box-contents">
<span>The bundle includes:</span>
<ul>
<li>Limited edition Home Assistant Blue case</li>
<li>ODROID-N2+</li>
<ul class="ul-sub">
<li>6-core CPU</li>
<li>4GB memory</li>
<li>128GB eMMC storage</li>
<li>Home Assistant Operating System pre-installed</li>
</ul>
<li>Power adapter</li>
</ul>
</div>
<div class="distributors">
<a
href="https://www.hardkernel.com/shop/odroid-n2-home-assistant-blue-bundle-limited-edition/"
target="_blank"
>
<div class="distributor">
<div>
<div>🇰🇷</div>
<div>Hardkernel</div>
<div>Located in Korea</div>
</div>
<div>Sold out</div>
</div>
</a>
<a
href="https://ameridroid.com/products/odroid-n2-home-assistant-blue-bundle-limited-edition?ref=eeb6nfw07e"
target="_blank"
>
<div class="distributor">
<div>
<div>🇺🇸</div>
<div>ameriDroid</div>
<div>Located in USA</div>
</div>
<div>Sold out</div>
</div>
</a>
<a
href="https://www.m.nu/styrenheter-z-wave/odroid-n2-home-assistant-blue-bundle-limited-edition"
target="_blank"
>
<div class="distributor">
<div>
<div>🇸🇪</div>
<div>m.nu</div>
<div>Located in Sweden</div>
</div>
<div>Sold out</div>
</div>
</a>
<a href="https://www.webhallen.com/329102" target="_blank">
<div class="distributor">
<div>
<div>🇸🇪</div>
<div>Webhallen</div>
<div>Located in Sweden</div>
</div>
<div>Sold out</div>
</div>
</a>
<a href="http://www.baumannelektro.ch/ha-blue" target="_blank">
<div class="distributor">
<div>
<div>🇨🇭</div>
<div>Baumann Elektro</div>
<div>Located in Switzerland</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
<div class="tip">
The Home Assistant Blue is distributed by Hardkernel. The resellers in
the various regions will handle the import so you can get your Blue
fast and worry free.
</div>
</div>
</div>
</div>
<div class="fab" onclick="showBuyDialog()" title="buy blue">
<svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
<path
fill="currentColor"
d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z"
/>
</svg>
BUY BLUE
</div>
<script>
const buyDialog = document.getElementById("buy-dialog");
const buyFab = document.querySelector(".fab");
function showBuyDialog() {
buyDialog.style.display = "flex";
buyFab.style.display = "none";
}
function closeDialog() {
buyDialog.style.display = "none";
buyFab.style.display = "flex";
}
window.onclick = function (event) {
if (event.target === buyDialog) {
closeDialog();
}
};
</script>
</div>