Added other data and dialogs

This commit is contained in:
Darren Griffin 2025-01-22 17:07:09 +00:00
parent 540ec92e53
commit e7d183e492
6 changed files with 329 additions and 480 deletions

View File

@ -7,7 +7,7 @@
padding: 40px;
place-items: center;
position: fixed;
z-index: 1000;
z-index: 1200;
&.open {
display: grid;
@ -31,7 +31,7 @@
flex-grow: 1;
font-size: 20px;
@include media-query("desk") {
@media (min-width: 704px) {
font-size: 28px;
}
}
@ -47,9 +47,11 @@
&-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
@media (min-width: 704px) {
flex-direction: row;
}
}
&-sidebar {
@ -66,8 +68,14 @@
&-tabs {
display: flex;
flex-direction: column;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
@media (min-width: 704px) {
flex-direction: column;
flex-wrap: nowrap;
}
}
&-tab {
@ -75,9 +83,18 @@
border-radius: 4px;
color: #4F606E;
cursor: pointer;
flex-basis: 40%;
flex-grow: 1;
font-size: 16px;
padding: 8px;
text-align: center;
transition: background-color 0.1s;
user-select: none;
@media (min-width: 704px) {
flex-basis: unset;
text-align: left;
}
&:hover {
background-color: #e1e1e1;
@ -85,8 +102,8 @@
&.active {
background-color: #FCFCFF;
pointer-events: none;
color: #000;
pointer-events: none;
}
}
}
@ -108,7 +125,6 @@
display: flex;
}
}
}
&-distributor {
@ -146,30 +162,37 @@
&-items {
display: flex;
flex-wrap: wrap;
gap: 20px;
gap: 8px;
justify-content: center;
@media (min-width: 704px) {
gap: 20px;
justify-content: flex-start;
max-width: 400px;
}
}
&-item {
border: 1px solid #F0F0F3;
border-radius: 8px;
display: flex;
height: 70px;
padding: 4px 16px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: 60px;
padding: 4px 16px;
place-items: center;
text-align: center;
text-decoration: none;
transition: background-color 0.1s;
width: 120px;
span {
font-size: 10px;
color: #4F606E;
}
img{
object-fit: contain;
flex-grow: 1;
font-size: 10px;
height: 14px;
line-height: 1;
overflow: hidden;
white-space: nowrap;
}
&:hover {
@ -178,8 +201,14 @@
}
&-logo {
border: unset;
border-radius: 0;
max-height: 45px;
box-shadow: unset;
flex-grow: 1;
height: 100%;
max-height: 50px;
object-fit: contain;
overflow: hidden;
}
}
}

View File

@ -1,310 +1,449 @@
# Flags rendered via https://flagpedia.net/
# flag_iso accepts ISO 3166 country code
# ship_from accepts ISO 3166 country code
green:
name: "<strong>Home Assistant Green</strong>"
distributors:
# America
- name: Amazon US
flag_iso: us
ship_from: US
ship_to: America
ship_from: UK
url: https://www.amazon.com/dp/B0CXVKSG19?maas=maas_adg_BB51722E249D328CABB2F6DF1F8976CC_afap_abs&ref_=aa_maas&tag=maas
logo: /images/distributors/amazon.webp
- name: ameriDroid
flag_iso: us
ship_from: US
ship_to: America
ship_from: UK
url: https://ameridroid.com/products/home-assistant-green
logo: /images/distributors/ameridroid.webp
- name: CloudFree
flag_iso: us
ship_from: US
ship_to: America
ship_from: UK
url: https://cloudfree.shop/product/home-assistant-green/
logo: /images/distributors/cloudfree.webp
- name: Seeed Studio
flag_iso: us
ship_to: America
ship_from: UK
url: https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html
logo: /images/distributors/seeed-studio.webp
# Asia
- name: Seeeed Studio
flag_iso: cn
- name: Seeed Studio
ship_from: China
ship_to: Asia
ship_from: UK
url: https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html
logo: /images/distributors/seeed-studio.webp
# Australia
- name: Oz Smart Things
flag_iso: au
ship_from: Australia
ship_to: Australia
ship_from: UK
url: https://www.ozsmartthings.com.au/products/home-assistant-green-smart-hub
logo: /images/distributors/oz-smart-things.webp
- name: Smart Guys
flag_iso: au
ship_from: Australia
ship_to: Australia
ship_from: UK
url: https://smartguys.com.au/home-assistant-green.html
logo: /images/distributors/smart-guys.webp
- name: SmartHome
flag_iso: au
ship_from: Australia
ship_to: Australia
ship_from: UK
url: https://www.smarthome.com.au/product/home-assistant-green/
logo: /images/distributors/smarthome.webp
# Europe
- name: Alza.cz
flag_iso: cz
ship_from: Czechia
ship_to: Europe
ship_from: UK
url: https://www.alza.cz/home-assistant-green-d7998187.htm
logo: /images/distributors/alza-cz.webp
- name: Botland
flag_iso: pl
ship_from: Poland
ship_to: Europe
ship_from: UK
url: https://botland.com.pl/centralki-i-bramki-sieciowe/24319-home-assistant-green-inteligentna-centralka-nabu-casa-nc-green-1175-794677011758.html
logo: /images/distributors/botland.webp
- name: DinamoTech
flag_iso: it
ship_from: Italy
ship_to: Europe
ship_from: UK
url: https://dinamotech.it/products/home-assistant-green
logo: /images/distributors/dinamo-tech.webp
- name: Domadoo
flag_iso: fr
ship_from: France
ship_to: Europe
ship_from: UK
url: https://www.domadoo.fr/fr/box-domotique/7046-nabu-casa-box-domotique-home-assistant-green-0794677011758.html
logo: /images/distributors/domadoo.jpg
- name: Everything Smart Technology
flag_iso: gb
ship_to: Europe
ship_from: UK
ship_to: Europe
url: https://shop.everythingsmart.io/products/home-assistant-green
logo: /images/distributors/est.webp
- name: eWeLink device store
flag_iso: hu
ship_from: Hungary
ship_to: Europe
ship_from: UK
url: https://ewelinkstore.com/product/home-assistant-green-hub/
logo: /images/distributors/ewelink.png
- name: HAshop
flag_iso: nl
ship_from: Netherlands
ship_to: Europe
ship_from: UK
url: https://www.hashop.nl/Home-Assistant-Green
logo: /images/distributors/ha-shop.webp
- name: ROBBshop
flag_iso: nl
ship_from: Netherlands
ship_to: Europe
ship_from: UK
url: https://www.robbshop.nl/home-assistant-green-smart-hub
logo: /images/distributors/robb.webp
- name: Kjell
flag_iso: "no"
ship_from: Norway
ship_to: Europe
ship_from: UK
url: https://www.kjell.com/no/produkter/smarte-hjem/kontroller/nabu-casa-home-assistant-green-p88430
logo: /images/distributors/kjell-company.webp
- name: Mauser
flag_iso: pt
ship_from: Portugal
ship_to: Europe
ship_from: UK
url: https://mauser.pt/catalog/product_info.php?products_id=095-3152
logo: /images/distributors/mauser.png
- name: mediarath
flag_iso: de
ship_from: Germany
ship_to: Europe
ship_from: UK
url: https://mediarath.de/products/home-assistant-green-smart-home-hub-2x-usb-gigabit-lan-hmdi-microsd-slot
logo: /images/distributors/mediarath-de.webp
logo: /images/distributors/mediarath.de.webp
- name: m.nu
flag_iso: se
ship_from: Sweden
ship_to: Europe
ship_from: UK
url: https://en.m.nu/controllers-smart-hubs/home-assistant-green
logo: /images/distributors/m-nu.webp
- name: OkosOtthon Bolt
flag_iso: hu
ship_from: Hungary
ship_to: Europe
ship_from: UK
url: https://okosotthon.bolt.hu/webaruhaz/termek/home-assistant-green-hub/
logo: /images/distributors/okosotthon.png
- name: Pi-Shop.ch
flag_iso: ch
ship_from: Switzerland
ship_to: Europe
ship_from: UK
url: https://www.pi-shop.ch/home-assistant-green
logo: /images/distributors/pi-shop.webp
- name: Pimoroni
flag_iso: gb
ship_to: Europe
ship_from: UK
ship_to: Europe
url: https://shop.pimoroni.com/products/home-assistant-green
logo: /images/distributors/pimoroni.webp
- name: RaspberryPi.dk
flag_iso: dk
ship_from: Denmark
ship_to: Europe
ship_from: UK
url: https://raspberrypi.dk/en/product/home-assistant-green/
logo: /images/distributors/RaspberryPi-dk.webp
- name: Seeed Studio
flag_iso: cn
ship_from: Germany
ship_to: Europe
ship_from: UK
url: https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html
logo: /images/distributors/seeed-studio.webp
- name: SmarterHOME
flag_iso: sk
ship_from: Slovakia
ship_to: Europe
ship_from: UK
url: https://smarterhome.sk/sk/centralne-jednotky/home-assistant-green-smart-home-hub-1490.html
logo: /images/distributors/smarter-home.png
- name: Swiss-Domotique
flag_iso: ch
ship_from: Switzerland
ship_to: Europe
ship_from: UK
url: https://shop.swiss-domotique.ch/smarthome-hub/2295-nabu-casa-home-assistant-green.html
logo: /images/distributors/swiss-domotique.webp
- name: The Pi Hut
flag_iso: gb
ship_to: Europe
ship_from: UK
ship_to: Europe
url: https://thepihut.com/products/home-assistant-green
logo: /images/distributors/pi-hut.webp
- name: Webhallen
flag_iso: se
ship_from: Sweden
ship_to: Europe
ship_from: UK
url: https://www.webhallen.com/se/product/364271-Nabu-Casa-Home-Assistant-Green
logo: /images/distributors/webhallen.webp
- name: WIFIShop
flag_iso: ro
ship_from: Romania
ship_to: Europe
ship_from: UK
url: https://www.wifishop.ro/en/homeassistant/home-assistant-green.html
logo: /images/distributors/wifishop.webp
voice_pe:
yellow:
name: "<strong>Home Assistant Yellow</strong>"
distributors:
# America
- name: ameriDroid
ship_from: US
ship_to: America
url: https://ameridroid.com/products/home-assistant-yellow
logo: /images/distributors/ameridroid.webp
- name: CloudFree
ship_from: US
ship_to: America
url: https://cloudfree.shop/product/home-assistant-yellow/
logo: /images/distributors/cloudfree.webp
- name: Seeed Studio
ship_from: US
ship_to: America
url: https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html
logo: /images/distributors/seeed-studio.webp
# Asia
- name: Seeed Studio
ship_from: China
ship_to: Asia
url: https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html
logo: /images/distributors/seeed-studio.webp
# Europe
- name: Botland
ship_from: Poland
ship_to: Europe
url: https://botland.com.pl/centralki-i-bramki-sieciowe/24698-home-assistant-yellow-standard-kit-inteligenta-centralka-zigbee-thread-nabu-casa-yellow-kit-std-794677011741.html
logo: /images/distributors/botland.webp
- name: Mauser
ship_from: Portugal
ship_to: Europe
url: https://mauser.pt/catalog/product_info.php?products_id=095-3150
logo: /images/distributors/mauser.png
- name: Pi-Shop.ch
ship_from: Switzerland
ship_to: Europe
url: https://www.pi-shop.ch/home-assistant-yellow-kit-with-power-supply-cm4-not-included
logo: /images/distributors/pi-shop.webp
- name: RaspberryPi.dk
ship_from: Denmark
ship_to: Europe
url: https://raspberrypi.dk/en/product/home-assistant-yellow/
logo: /images/distributors/RaspberryPi-dk.webp
- name: Seeed Studio
ship_from: Germany
ship_to: Europe
url: https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html
logo: /images/distributors/seeed-studio.webp
- name: The Pi Hut
ship_from: UK
ship_to: Europe
url: https://thepihut.com/products/home-assistant-yellow
logo: /images/distributors/pi-hut.webp
zbt-1:
name: "<strong>Home Assistant Connect ZBT-1</strong>"
distributors:
# America
- name: ameriDroid
ship_from: US
ship_to: America
url: https://ameridroid.com/products/skyconnect
logo: /images/distributors/ameridroid.webp
- name: CloudFree
ship_from: US
ship_to: America
url: https://cloudfree.shop/product/home-assistant-skyconnect/
logo: /images/distributors/cloudfree.webp
- name: Seeed Studio
ship_from: US
ship_to: America
url: https://www.seeedstudio.com/Home-Assistant-SkyConnect-p-5479.html
logo: /images/distributors/seeed-studio.webp
# Asia
- name: Seeed Studio
ship_from: China
ship_to: Asia
url: https://www.seeedstudio.com/Home-Assistant-SkyConnect-p-5479.html
logo: /images/distributors/seeed-studio.webp
# Australia
- name: Smart Guys
ship_from: Australia
ship_to: Australia
url: https://smartguys.com.au/home-assistant-skyconnect.html
logo: /images/distributors/smart-guys.webp
# Europe
- name: Alza.cz
ship_from: Czech Republic
ship_to: Europe
url: https://www.alza.cz/home-assistant-skyconnect-usb-hub-d7815713.htm
logo: /images/distributors/alza-cz.webp
- name: Botland
ship_from: Poland
ship_to: Europe
url: https://botland.com.pl/centralki-i-bramki-sieciowe/22759-home-assistant-skyconnect-usb-stick-zgodny-z-zigbeematterthread-794677011635.html
logo: /images/distributors/botland.webp
- name: DinamoTech
ship_from: Italy
ship_to: Europe
url: https://dinamotech.it/products/home-assistant-connect-zbt-1
logo: /images/distributors/dinamo-tech.webp
- name: Domadoo
ship_from: France
ship_to: Europe
url: https://www.domadoo.fr/fr/box-domotique/6938-dongle-usb-zigbee-30-sky-connect-pour-home-assistant-nabu-casa-0794677011635.html
logo: /images/distributors/domadoo.jpg
- name: Everything Smart Technology
ship_from: UK
ship_to: Europe
url: https://shop.everythingsmart.io/products/home-assistant-skyconnect
logo: /images/distributors/est.webp
- name: eWeLink device store
ship_from: Hungary
ship_to: Europe
url: https://ewelinkstore.com/product/home-assistant-skyconnect-a-zigbee-thread-matter-usb-stick-for-home-assistant/
logo: /images/distributors/ewelink.png
- name: HAshop
ship_from: Netherlands
ship_to: Europe
url: https://www.hashop.nl/Home-Assistant-SkyConnect
logo: /images/distributors/ha-shop.webp
- name: Kjell
ship_from: Norway
ship_to: Europe
url: https://www.kjell.com/no/produkter/smarte-hjem/kontroller/nabu-casa-home-assistant-skyconnect-p88431
logo: /images/distributors/kjell-company.webp
- name: Mauser
ship_from: Portugal
ship_to: Europe
url: https://mauser.pt/catalog/product_info.php?products_id=095-1222
logo: /images/distributors/mauser.png
- name: mediarath
ship_from: Germany
ship_to: Europe
url: https://mediarath.de/products/home-assistant-skyconnect-zigbee-thread-matter-usb-stick-fur-home-assistant
logo: /images/distributors/mediarath.de.webp
- name: m.nu
ship_from: Sweden
ship_to: Europe
url: https://en.m.nu/zigbee/controllers-zigbee/home-assistant-skyconnect-zigbee-matter-thread
logo: /images/distributors/m-nu.webp
- name: OkosOtthon Bolt
ship_from: Hungary
ship_to: Europe
url: https://okosotthon.bolt.hu/webaruhaz/termek/home-assistant-skyconnect-egy-zigbee-thread-matter-usb-kulcs-home-assistant-hoz/
logo: /images/distributors/okosotthon.png
- name: Pimoroni
ship_from: UK
ship_to: Europe
url: https://shop.pimoroni.com/products/home-assistant-connect-zbt-1
logo: /images/distributors/pimoroni.webp
- name: RaspberryPi.dk
ship_from: Denmark
ship_to: Europe
url: https://raspberrypi.dk/en/product/home-assistant-skyconnect/
logo: /images/distributors/RaspberryPi-dk.webp
- name: Robbshop
ship_from: Netherlands
ship_to: Europe
url: https://www.robbshop.nl/home-assistant-skyconnect-zigbee-en-thread-usb
logo: /images/distributors/robb.webp
- name: Seeed Studio
ship_from: Germany
ship_to: Europe
url: https://www.seeedstudio.com/Home-Assistant-SkyConnect-p-5479.html
logo: /images/distributors/seeed-studio.webp
- name: SmarterHOME
ship_from: Slovakia
ship_to: Europe
url: https://smarterhome.sk/sk/zwave-pc-adaptery/home-assistant-connect-zbt-1-zigbee-a-thread-usb-adapter-1646.html
logo: /images/distributors/smarter-home.png
- name: Swiss-Domotique
ship_from: Switzerland
ship_to: Europe
url: https://shop.swiss-domotique.ch/de/smarthome-zentrale/2118-nabu-casa-home-assistant-skyconnect.html
logo: /images/distributors/swiss-domotique.webp
- name: The Pi Hut
ship_from: UK
ship_to: Europe
url: https://thepihut.com/collections/latest-raspberry-pi-products/products/home-assistant-skyconnect
logo: /images/distributors/pi-hut.webp
- name: Webhallen
ship_from: Sweden
ship_to: Europe
url: https://www.webhallen.com/se/product/357205-Home-Assistant-SkyConnect-ZigbeeMatterThread
logo: /images/distributors/webhallen.webp
- name: WIFIShop
ship_from: Romania
ship_to: Europe
url: https://www.wifishop.ro/en/homeassistant/home-assistant-skyconnect.html
logo: /images/distributors/wifishop.webp
voice-pe:
name: "<strong>Home Assistant Voice</strong> Preview Edition"
distributors:
# America
- name: ameriDroid
flag_iso: us
ship_from: US
ship_to: America
ship_from: UK
url: https://ameridroid.com/products/home-assistant-voice-preview-edition/
logo: /images/distributors/ameridroid.webp
- name: CloudFree
flag_iso: us
ship_from: US
ship_to: America
ship_from: UK
url: https://cloudfree.shop/product/home-assistant-voice-preview-edition/
logo: /images/distributors/cloudfree.webp
- name: Seeed Studio
flag_iso: cn
ship_from: US
ship_to: America
ship_from: UK
url: https://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html
logo: /images/distributors/seeed-studio.webp
# Asia
- name: Seeed Studio
flag_iso: cn
ship_from: China
ship_to: Asia
ship_from: UK
url: https://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html
logo: /images/distributors/seeed-studio.webp
# Australia
- name: OZ Smart Things
flag_iso: au
ship_from: Australia
ship_to: Australia
ship_from: UK
url: https://www.ozsmartthings.com.au/products/ha-voice-preview-edition
logo: /images/distributors/oz-smart-things.webp
- name: Smart Guys
flag_iso: au
ship_from: Australia
ship_to: Australia
ship_from: UK
url: https://smartguys.com.au/product/home-assistant-voice-preview-edition/
logo: /images/distributors/smart-guys.webp
# Europe
- name: Alza.cz
flag_iso: cz
ship_from: Czechia
ship_to: Europe
ship_from: UK
url: https://www.alza.cz/home-assistant-voice-preview-edition-d12741248.htm
logo: /images/distributors/alza-cz.webp
- name: RaspberryPi.dk
flag_iso: dk
ship_from: Denmark
ship_to: Europe
ship_from: UK
url: https://raspberrypi.dk/en/product/home-assistant-voice-preview-edition/
logo: /images/distributors/RaspberryPi-dk.webp
- name: Domadoo
flag_iso: fr
ship_from: France
ship_to: Europe
ship_from: UK
url: https://www.domadoo.fr/fr/box-domotique/7558-nabu-casa-home-assistant-voice-preview-edition-0860011789727.html
logo: /images/distributors/domadoo.jpg
- name: Mediarath
flag_iso: de
ship_from: Germany
ship_to: Europe
ship_from: UK
url: https://mediarath.de/products/home-assistant-voice-preview-edition-open-source-privacy-focused-voice-assistant-with-esphome
logo: /images/distributors/mediarath.de.webp
- name: Seeed Studio
flag_iso: cn
ship_from: Germany
ship_to: Europe
ship_from: UK
url: https://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html
logo: /images/distributors/seeed-studio.webp
- name: Dinamotech
flag_iso: it
ship_from: Italy
ship_to: Europe
ship_from: UK
url: https://dinamotech.it/products/home-assistant-voice
logo: /images/distributors/dinamo-tech.webp
- name: Botland
flag_iso: pl
ship_from: Poland
ship_to: Europe
ship_from: UK
url: https://botland.com.pl/asystenci-glosowi/25872-home-assistant-voice-preview-edition-asystent-glosowy-860011789727.html
logo: /images/distributors/botland.webp
- name: Mauser.pt
flag_iso: pt
ship_from: Portugal
ship_to: Europe
ship_from: UK
url: https://mauser.pt/catalog/product_info.php?products_id=095-4747
logo: /images/distributors/mauser.png
- name: SmarterHOME
flag_iso: sk
ship_from: Slovakia
ship_to: Europe
ship_from: UK
url: https://smarterhome.sk/sk/hlasovi-asistenti/home-assistant-voice-preview-edition-1714.html
logo: /images/distributors/smarter-home.png
- name: Webhallen
flag_iso: se
ship_from: Sweden
ship_to: Europe
ship_from: UK
url: https://www.webhallen.com/377166
logo: /images/distributors/webhallen.webp
- name: Swiss-Domotique
flag_iso: ch
ship_from: Switzerland
ship_to: Europe
ship_from: UK
url: https://shop.swiss-domotique.ch/de/sound/2667-nabu-casa-home-assistant-voice-preview-edition.html
logo: /images/distributors/swiss-domotique.webp
- name: Everything Smart Technology
flag_iso: gb
ship_to: Europe
ship_from: UK
url: https://shop.everythingsmart.io/products/home-assistant-voice-preview-edition
logo: /images/distributors/est.webp
- name: The Pi Hut
flag_iso: gb
ship_to: Europe
ship_from: UK
ship_to: Europe
url: https://thepihut.com/products/home-assistant-voice-preview-edition
logo: /images/distributors/pi-hut.webp
logo: /images/distributors/pi-hut.webp
- name: Everything Smart Technology
ship_from: UK
ship_to: Europe
url: https://shop.everythingsmart.io/products/home-assistant-voice-preview-edition
logo: /images/distributors/est.webp

View File

@ -1,7 +1,6 @@
{% if include.product and site.data.products[include.product] %}
{% assign product = site.data.products[include.product] %}
{% assign distributor_regions = product.distributors | group_by: 'ship_to' %}
{% assign distributor_countries = product.distributors | group_by: 'flag_iso' %}
{% endif %}
<div class="ha-buy-dialog">
@ -16,45 +15,32 @@
</div>
</div>
<div class="ha-buy-dialog-content">
<div class="new">
<select>
<option>Choose your country</option>
<option value="us">{{ site.data.countries["us"] }}</option>
<option value="cn">{{ site.data.countries["cn"] }}</option>
<option value="au">{{ site.data.countries["au"] }}</option>
<option value="cz">{{ site.data.countries["cz"] }}</option>
<option value="pl">{{ site.data.countries["pl"] }}</option>
<option value="it">{{ site.data.countries["it"] }}</option>
<option value="fr">{{ site.data.countries["fr"] }}</option>
<option value="gb">{{ site.data.countries["gb"] }}</option>
<option value="hu">{{ site.data.countries["hu"] }}</option>
<option value="nl">{{ site.data.countries["nl"] }}</option>
<option value="no">{{ site.data.countries["no"] }}</option>
<option value="pt">{{ site.data.countries["pt"] }}</option>
<option value="de">{{ site.data.countries["de"] }}</option>
<option value="se">{{ site.data.countries["se"] }}</option>
<option value="ch">{{ site.data.countries["ch"] }}</option>
<option value="dk">{{ site.data.countries["dk"] }}</option>
<option value="sk">{{ site.data.countries["sk"] }}</option>
<option value="ro">{{ site.data.countries["ro"] }}</option>
</select>
<div class="ha-buy-dialog-sidebar">
<div class="ha-buy-dialog-sidebar-label">Shipping to</div>
<div class="ha-buy-dialog-sidebar-tabs">
{% for distributor_region in distributor_regions %}
<div class="ha-buy-dialog-sidebar-tab {% if forloop.first %}active{% endif %}" aria-role="tab" aria-selected="true" aria-controls="#{{ distributor_region.name | slugify }}" data-tab="#{{ distributor_region.name | slugify }}">
{{ distributor_region.name }}
</div>
{% endfor %}
</div>
</div>
<div class="ha-buy-dialog-tab-content-wrapper">
{% for distributor_region in distributor_countries %}
<div class="ha-buy-dialog-tab-content {% if forloop.first %}active{% endif %} active" id="{{ distributor_region.name | slugify }}">
{% for distributor_region in distributor_regions %}
<div class="ha-buy-dialog-tab-content {% if forloop.first %}active{% endif %}" id="{{ distributor_region.name | slugify }}">
{% assign az_ship_distributors = distributor_region.items | sort: 'name' | sort: 'ship_from'%}
<div class="ha-buy-dialog-distributor-items">
{% for distributor in distributor_region.items %}
{% for distributor in az_ship_distributors %}
<a href="{{ distributor.url }}" target="_blank" rel="noreferrer" class="ha-buy-dialog-distributor-item">
{% if distributor.logo %}
<img src="{{ distributor.logo }}" alt="{{ distributor.name }} logo" class="ha-buy-dialog-distributor-logo">
{% else %}
{{ distributor.name }}
{% endif %}
{% if distributor.ship_from %}
<span>Ships from {{ distributor.ship_from }}</span>
{% endif %}
<span>
Ships from {{ distributor.ship_from }}
</span>
</a>
{% endfor %}
</div>
@ -64,26 +50,14 @@
</div>
</div>
</div>
<link rel="stylesheet" href="/voice-pe/nice-select2.css" />
<script src="/voice-pe/nice-select2.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
let dialog = document.querySelector('.ha-buy-dialog');
let tabs = dialog.querySelectorAll('.ha-buy-dialog-sidebar-tab');
let tabContents = dialog.querySelectorAll('.ha-buy-dialog-tab-content');
let select = dialog.querySelector('.new select');
select.addEventListener('change', function () {
let value = select.value;
let tabContents = dialog.querySelectorAll('.ha-buy-dialog-tab-content');
tabContents.forEach(tabContent => tabContent.classList.remove('active'));
tabContents.forEach(tabContent => {
if (tabContent.id === value) {
tabContent.classList.add('active');
}
});
});
tabs.forEach(tab => {
tab.addEventListener('click', function () {
tabs = dialog.querySelectorAll('.ha-buy-dialog-sidebar-tab');
@ -102,6 +76,7 @@
let close = dialog.querySelector('.close');
close.addEventListener('click', function () {
dialog.classList.remove('open');
document.documentElement.style.overflow = "";
});
let openTargets = document.querySelectorAll('.buy');
@ -109,31 +84,34 @@
target.addEventListener('click', function (e) {
e.preventDefault();
dialog.classList.add('open');
document.documentElement.style.overflow = "hidden";
focusDistributors(dialog);
});
});
if (window.location.hash === '#buy') {
dialog.classList.add('open');
document.documentElement.style.overflow = "hidden";
focusDistributors(dialog);
}
dialog.addEventListener('click', function (e) {
if (!e.target.closest('.ha-buy-dialog-inner')) {
dialog.classList.remove('open');
document.documentElement.style.overflow = "";
}
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
dialog.classList.remove('open');
document.documentElement.style.overflow = "";
}
});
});
function focusDistributors(dialog){
return;
let tabs = dialog.querySelectorAll('.ha-buy-dialog-sidebar-tab');
let tabContents = dialog.querySelectorAll('.ha-buy-dialog-tab-content');
let timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

View File

@ -102,7 +102,7 @@ frontpage_image: /images/frontpage/feature-zbt1.jpg
<img src="/images/connectzbt1/connectzbt1_isometric.png" />
</div>
</div>
<div class="banner-overlay-button" onclick="showBuyDialog()">
<div class="banner-overlay-button buy" onclick="showBuyDialog()">
<div>Order now</div>
</div>
</div>
@ -734,9 +734,10 @@ frontpage_image: /images/frontpage/feature-zbt1.jpg
</div>
</div>
{% include custom/buy-dialog.html product="zbt-1" %}
<div
class="fab" style="position: fixed; top: 116px; height: 48px;"
onclick="showBuyDialog()"
class="fab buy" style="position: fixed; top: 116px; height: 48px;"
title="Order Home Assistant Connect ZBT-1"
>
<svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
@ -748,41 +749,6 @@ frontpage_image: /images/frontpage/feature-zbt1.jpg
ORDER
</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();
}
};
if (document.location.search === "?order") {
showBuyDialog();
}
try {
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
const continent = tz.replace( /^(Asia|America|Australia|Europe)\/.*$/, '$1' );
if ( continent != tz ) {
document.querySelector( `#dist_${continent.toLowerCase()}` ).open = true;
}
} catch ( ev ) {
// Ignore...
}
</script>
<script>
if (window.location.hash === "#from-skyconnect") {
const banner = document.createElement("div");

View File

@ -11,7 +11,6 @@ frontpage_image: /images/frontpage/voice-pe-frontpage.jpg
<link rel="stylesheet" href="/voice-pe/styles.css" />
<link rel="stylesheet" href="/voice-pe/nice-select2.css" />
<script src="/voice-pe/nice-select2.js" defer></script>
{% include custom/buy-dialog.html product="voice_pe" %}
<div class="vpe-main">
<div class="grid"></div>
<div class="vpe-nav">

View File

@ -135,7 +135,7 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
<img src="/images/yellow/yellow-preview.jpg" />
</a>
</div>
<div class="banner-overlay-button" onclick="showBuyDialog()">
<div class="banner-overlay-button buy">
<div>Order now</div>
</div>
</div>
@ -338,236 +338,10 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
</a>
</div>
<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 Yellow</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="distributors">
<details id="dist_america">
<summary class="region">Shipping to America</summary>
<div>
<a href="https://ameridroid.com/products/home-assistant-yellow" target="_blank">
<div class="distributor">
<div>
<div>🇺🇸</div>
<div>ameriDroid</div>
<div>Shipping from US</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>
<a href="https://cloudfree.shop/product/home-assistant-yellow/" target="_blank">
<div class="distributor">
<div>
<div>🇺🇸</div>
<div>CloudFree</div>
<div>Shipping from US</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>
<a
href="https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇳</div>
<div>Seeed Studio</div>
<div>Shipping from China, US and Germany</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>
</details>
<details id="dist_asia">
<summary class="region">Shipping to Asia</summary>
<div>
<a
href="https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇳</div>
<div>Seeed Studio</div>
<div>Shipping from China, US and Germany</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>
</details>
<details id="dist_europe">
<summary class="region">Shipping to Europe</summary>
<div>
<!--a
href="https://en.m.nu/controllers-smart-hubs-3/home-assistant-yellow-with-cm4-module"
target="_blank"
>
<div class="distributor">
<div>
<div>🇸🇪</div>
<div>m.nu</div>
<div>Shipping from Sweden. Yellow Standard only.</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-->
<a
href="https://botland.com.pl/centralki-i-bramki-sieciowe/24698-home-assistant-yellow-standard-kit-inteligenta-centralka-zigbee-thread-nabu-casa-yellow-kit-std-794677011741.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇵🇱</div>
<div>Botland</div>
<div>Shipping from Poland</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>
<a
href="https://mauser.pt/catalog/product_info.php?products_id=095-3150"
target="_blank"
>
<div class="distributor">
<div>
<div>🇵🇹</div>
<div>Mauser</div>
<div>Shipping from Portugal</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>
<a
href="https://www.pi-shop.ch/home-assistant-yellow-kit-with-power-supply-cm4-not-included"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇭</div>
<div>Pi-Shop.ch</div>
<div>Shipping from 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>
<a
href="https://raspberrypi.dk/en/product/home-assistant-yellow/"
target="_blank"
>
<div class="distributor">
<div>
<div>🇩🇰</div>
<div>RaspberryPi.dk</div>
<div>Shipping from Denmark</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>
<a
href="https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html"
target="_blank"
>
<div class="distributor">
<div>
<div>🇨🇳</div>
<div>Seeed Studio</div>
<div>Shipping from China, US and Germany</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>
<a
href="https://thepihut.com/products/home-assistant-yellow"
target="_blank"
>
<div class="distributor">
<div>
<div>🇬🇧</div>
<div>The Pi Hut</div>
<div>Shipping from the United Kingdom</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>
</details>
</div>
</div>
</div>
{% include custom/buy-dialog.html product="yellow" %}
<div
class="fab" style="position: fixed; top: 78px; height: 48px;"
onclick="showBuyDialog()"
class="fab buy" style="position: fixed; top: 78px; height: 48px;"
title="pre-order Home Assistant Yellow"
>
<svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
@ -577,40 +351,4 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
/>
</svg>
ORDER
</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();
}
};
if (document.location.search === "?order") {
showBuyDialog();
}
try {
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
const continent = tz.replace( /^(Asia|America|Australia|Europe)\/.*$/, '$1' );
if ( continent != tz ) {
document.querySelector( `#dist_${continent.toLowerCase()}` ).open = true;
}
} catch ( ev ) {
// Ignore...
}
</script>
</div>