Buy dialog visual refresh (#37054)

sass/homeassistant/_homeassistant.scss

@@ -20,6 +20,7 @@
 @import "plugins/integration_alert";
 
 @import "base/sidebar";
+@import "aside/buy_dialog";
 @import "aside/recent_posts";
 @import "aside/github";
 @import "aside/pinboard";

sass/homeassistant/aside/_buy_dialog.scss

@@ -0,0 +1,219 @@
+// More specificity
+#landingpage .page-content .content {
+    .ha-buy-dialog {
+        background: rgba(0, 0, 0, 0.4);
+        display: none;
+        inset: 0;
+        padding: 40px;
+        place-items: center;
+        position: fixed;
+        z-index: 1200;
+
+        &.open {
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-inner {
+            background-color: #ffffff;
+            border-radius: 8px;
+            display: grid;
+            gap: 20px;
+            max-width: 624px;
+            padding: 20px;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        &-header {
+            align-items: center;
+            display: flex;
+
+            .product-name {
+                flex-grow: 1;
+                font-size: 20px;
+
+                @media (min-width: 704px) {
+                    font-size: 28px;
+                }
+            }
+
+            .close {
+                align-items: center;
+                cursor: pointer;
+                display: flex;
+                flex-shrink: 0;
+            }
+        }
+
+        &-content {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            max-height: 100%;
+            overflow: hidden;
+
+            @media (min-width: 704px) {
+                flex-direction: row;
+            }
+        }
+
+        &-sidebar {
+            background-color: #F0F0F3;
+            border-radius: 8px;
+            min-width: 140px;
+            padding: 12px;
+
+            &-label {
+                font-size: 14px;
+                font-weight: 700;
+                padding-bottom: 8px;
+            }
+
+            &-tabs {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                gap: 4px;
+
+                @media (min-width: 704px) {
+                    flex-direction: column;
+                    flex-wrap: nowrap;
+                }
+            }
+
+            &-tab {
+                background-color: transparent;
+                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;
+                }
+
+                &.active {
+                    background-color: #FCFCFF;
+                    color: #000;
+                    pointer-events: none;
+                }
+            }
+        }
+
+        &-tab {
+            &-content-wrapper {
+                flex-grow: 1;
+                height: 100%;
+                max-height: 475px;
+                overflow-y: auto;
+            }
+
+            &-content {
+                display: none;
+                flex-direction: column;
+                gap: 32px;
+
+                &.active {
+                    display: flex;
+                }
+            }
+        }
+
+        &-distributor {
+            &-countries {
+                display: flex;
+                flex-direction: column;
+                gap: 18px;
+            }
+
+            &-country {
+                &-name {
+                    align-items: center;
+                    display: flex;
+                    font-size: 14px;
+                    font-weight: 700;
+                    gap: 10px;
+                    padding-bottom: 12px;
+                }
+
+                &-flag {
+                    border-radius: 0;
+                    height: 8px;
+                }
+
+                $letters: "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+                @for $i from 1 through 26 {
+                    $letter: str-slice($letters, $i, $i);
+                
+                    &[data-sort="#{$letter}"] {
+                        order: $i;
+                    }
+                }
+            }
+
+            &-items {
+                display: flex;
+                flex-wrap: wrap;
+                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;
+                flex-direction: column;
+                gap: 8px;
+                height: 60px;
+                padding: 4px 16px;
+                place-items: center;
+                text-align: center;
+                text-decoration: none;
+                transition: background-color 0.1s;
+                width: 120px;
+
+                span {
+                    color: #4F606E;
+                    font-size: 10px;
+                    height: 14px;
+                    line-height: 1;
+                    overflow: hidden;
+                    white-space: nowrap;
+                }
+
+                &:hover {
+                    background-color: #F0F0F3;
+                }
+            }
+
+            &-logo {
+                border: unset;
+                border-radius: 0;
+                box-shadow: unset;
+                flex-grow: 1;
+                height: 100%;
+                max-height: 50px;
+                object-fit: contain;
+                overflow: hidden;
+            }
+        }
+    }
+}

source/_data/products.yml

@@ -0,0 +1,449 @@
+# Flags rendered via https://flagpedia.net/
+# ship_from accepts ISO 3166 country code
+green:
+  name: "<strong>Home Assistant Green</strong>"
+  distributors:
+      # America
+    - name: Amazon US
+      ship_from: US
+      ship_to: America
+      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
+      ship_from: US
+      ship_to: America
+      url: https://ameridroid.com/products/home-assistant-green
+      logo: /images/distributors/ameridroid.webp
+    - name: CloudFree
+      ship_from: US
+      ship_to: America
+      url: https://cloudfree.shop/product/home-assistant-green/
+      logo: /images/distributors/cloudfree.webp
+      # Asia
+    - name: Seeed Studio
+      ship_from: China
+      ship_to: Asia
+      url: https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html
+      logo: /images/distributors/seeed-studio.webp
+      # Australia
+    - name: Oz Smart Things
+      ship_from: Australia
+      ship_to: Australia
+      url: https://www.ozsmartthings.com.au/products/home-assistant-green-smart-hub
+      logo: /images/distributors/oz-smart-things.webp
+    - name: Smart Guys
+      ship_from: Australia
+      ship_to: Australia
+      url: https://smartguys.com.au/home-assistant-green.html
+      logo: /images/distributors/smart-guys.webp
+    - name: SmartHome
+      ship_from: Australia
+      ship_to: Australia
+      url: https://www.smarthome.com.au/product/home-assistant-green/
+      logo: /images/distributors/smarthome.webp
+      # Europe
+    - name: Alza.cz
+      ship_from: Czechia
+      ship_to: Europe
+      url: https://www.alza.cz/home-assistant-green-d7998187.htm
+      logo: /images/distributors/alza-cz.webp
+    - name: Botland
+      ship_from: Poland
+      ship_to: Europe
+      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
+      ship_from: Italy
+      ship_to: Europe
+      url: https://dinamotech.it/products/home-assistant-green
+      logo: /images/distributors/dinamo-tech.webp
+    - name: Domadoo
+      ship_from: France
+      ship_to: Europe
+      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
+      ship_from: UK
+      ship_to: Europe
+      url: https://shop.everythingsmart.io/products/home-assistant-green
+      logo: /images/distributors/est.webp
+    - name: eWeLink device store
+      ship_from: Hungary
+      ship_to: Europe
+      url: https://ewelinkstore.com/product/home-assistant-green-hub/
+      logo: /images/distributors/ewelink.png
+    - name: HAshop
+      ship_from: Netherlands
+      ship_to: Europe
+      url: https://www.hashop.nl/Home-Assistant-Green
+      logo: /images/distributors/ha-shop.webp
+    - name: ROBBshop
+      ship_from: Netherlands
+      ship_to: Europe
+      url: https://www.robbshop.nl/home-assistant-green-smart-hub
+      logo: /images/distributors/robb.webp
+    - name: Kjell
+      ship_from: Norway
+      ship_to: Europe
+      url: https://www.kjell.com/no/produkter/smarte-hjem/kontroller/nabu-casa-home-assistant-green-p88430
+      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-3152
+      logo: /images/distributors/mauser.png
+    - name: mediarath
+      ship_from: Germany
+      ship_to: Europe
+      url: https://mediarath.de/products/home-assistant-green-smart-home-hub-2x-usb-gigabit-lan-hmdi-microsd-slot
+      logo: /images/distributors/mediarath.de.webp
+    - name: m.nu
+      ship_from: Sweden
+      ship_to: Europe
+      url: https://en.m.nu/controllers-smart-hubs/home-assistant-green
+      logo: /images/distributors/m-nu.webp
+    - name: OkosOtthon Bolt
+      ship_from: Hungary
+      ship_to: Europe
+      url: https://okosotthon.bolt.hu/webaruhaz/termek/home-assistant-green-hub/
+      logo: /images/distributors/okosotthon.png
+    - name: Pi-Shop.ch
+      ship_from: Switzerland
+      ship_to: Europe
+      url: https://www.pi-shop.ch/home-assistant-green
+      logo: /images/distributors/pi-shop.webp
+    - name: Pimoroni
+      ship_from: UK
+      ship_to: Europe
+      url: https://shop.pimoroni.com/products/home-assistant-green
+      logo: /images/distributors/pimoroni.webp
+    - name: RaspberryPi.dk
+      ship_from: Denmark
+      ship_to: Europe
+      url: https://raspberrypi.dk/en/product/home-assistant-green/
+      logo: /images/distributors/RaspberryPi-dk.webp
+    - name: Seeed Studio
+      ship_from: Germany
+      ship_to: Europe
+      url: https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html
+      logo: /images/distributors/seeed-studio.webp
+    - name: SmarterHOME
+      ship_from: Slovakia
+      ship_to: Europe
+      url: https://smarterhome.sk/sk/centralne-jednotky/home-assistant-green-smart-home-hub-1490.html
+      logo: /images/distributors/smarter-home.png
+    - name: Swiss-Domotique
+      ship_from: Switzerland
+      ship_to: Europe
+      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
+      ship_from: UK
+      ship_to: Europe
+      url: https://thepihut.com/products/home-assistant-green
+      logo: /images/distributors/pi-hut.webp
+    - name: Webhallen
+      ship_from: Sweden
+      ship_to: Europe
+      url: https://www.webhallen.com/se/product/364271-Nabu-Casa-Home-Assistant-Green
+      logo: /images/distributors/webhallen.webp
+    - name: WIFIShop
+      ship_from: Romania
+      ship_to: Europe
+      url: https://www.wifishop.ro/en/homeassistant/home-assistant-green.html
+      logo: /images/distributors/wifishop.webp
+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-connect-zbt-1-a-zigbee-thread-matter-usb-stick/
+      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-connect-zbt-1-zigbee-thread-matter-usb-stick-fur-home-assistant-skyconnect
+      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-connect-zbt-1-zigbee-thread-matter-usb-kulcs/
+      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
+      ship_from: US
+      ship_to: America
+      url: https://ameridroid.com/products/home-assistant-voice-preview-edition/
+      logo: /images/distributors/ameridroid.webp
+    - name: CloudFree
+      ship_from: US
+      ship_to: America
+      url: https://cloudfree.shop/product/home-assistant-voice-preview-edition/
+      logo: /images/distributors/cloudfree.webp
+    - name: Seeed Studio
+      ship_from: US
+      ship_to: America
+      url: https://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html
+      logo: /images/distributors/seeed-studio.webp
+      # Asia
+    - name: Seeed Studio
+      ship_from: China
+      ship_to: Asia
+      url: https://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html
+      logo: /images/distributors/seeed-studio.webp
+      # Australia
+    - name: OZ Smart Things
+      ship_from: Australia
+      ship_to: Australia
+      url: https://www.ozsmartthings.com.au/products/ha-voice-preview-edition
+      logo: /images/distributors/oz-smart-things.webp
+    - name: Smart Guys
+      ship_from: Australia
+      ship_to: Australia
+      url: https://smartguys.com.au/product/home-assistant-voice-preview-edition/
+      logo: /images/distributors/smart-guys.webp
+      # Europe
+    - name: Alza.cz
+      ship_from: Czechia
+      ship_to: Europe
+      url: https://www.alza.cz/home-assistant-voice-preview-edition-d12741248.htm
+      logo: /images/distributors/alza-cz.webp
+    - name: RaspberryPi.dk
+      ship_from: Denmark
+      ship_to: Europe
+      url: https://raspberrypi.dk/en/product/home-assistant-voice-preview-edition/
+      logo: /images/distributors/RaspberryPi-dk.webp
+    - name: Domadoo
+      ship_from: France
+      ship_to: Europe
+      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
+      ship_from: Germany
+      ship_to: Europe
+      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
+      ship_from: Germany
+      ship_to: Europe
+      url: https://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html
+      logo: /images/distributors/seeed-studio.webp
+    - name: Dinamotech
+      ship_from: Italy
+      ship_to: Europe
+      url: https://dinamotech.it/products/home-assistant-voice
+      logo: /images/distributors/dinamo-tech.webp
+    - name: Botland
+      ship_from: Poland
+      ship_to: Europe
+      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
+      ship_from: Portugal
+      ship_to: Europe
+      url: https://mauser.pt/catalog/product_info.php?products_id=095-4747
+      logo: /images/distributors/mauser.png
+    - name: SmarterHOME
+      ship_from: Slovakia
+      ship_to: Europe
+      url: https://smarterhome.sk/sk/hlasovi-asistenti/home-assistant-voice-preview-edition-1714.html
+      logo: /images/distributors/smarter-home.png
+    - name: Webhallen
+      ship_from: Sweden
+      ship_to: Europe
+      url: https://www.webhallen.com/377166
+      logo: /images/distributors/webhallen.webp
+    - name: Swiss-Domotique
+      ship_from: Switzerland
+      ship_to: Europe
+      url: https://shop.swiss-domotique.ch/de/sound/2667-nabu-casa-home-assistant-voice-preview-edition.html
+      logo: /images/distributors/swiss-domotique.webp
+    - name: The Pi Hut
+      ship_from: UK
+      ship_to: Europe
+      url: https://thepihut.com/products/home-assistant-voice-preview-edition
+      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

source/_includes/custom/buy-dialog.html

@@ -0,0 +1,138 @@
+{% 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' %}
+{% endif %}
+
+<div class="ha-buy-dialog">
+    <div class="ha-buy-dialog-inner">
+        <div class="ha-buy-dialog-header">
+            <div class="product-name">{{ product.name }}</div>
+            <div class="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>
+            </div>
+        </div>
+        <div class="ha-buy-dialog-content">
+            <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_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 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 %}
+                            <span>
+                                Ships from {{ distributor.ship_from }}
+                            </span>
+                        </a>
+                        {% endfor %}
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </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');
+
+        tabs.forEach(tab => {
+            tab.addEventListener('click', function () {
+                tabs = dialog.querySelectorAll('.ha-buy-dialog-sidebar-tab');
+
+                tabs.forEach(tab => tab.classList.remove('active'));
+                tabContents.forEach(tabContent => tabContent.classList.remove('active'));
+
+                let tabContent = dialog.querySelector(tab.getAttribute('data-tab'));
+                if(!tabContent) return;
+
+                tab.classList.add('active');
+                tabContent.classList.add('active');
+            })
+        });
+
+        let close = dialog.querySelector('.close');
+        close.addEventListener('click', function () {
+            dialog.classList.remove('open');
+            document.documentElement.style.overflow = "";
+        });
+
+        let openTargets = document.querySelectorAll('.buy');
+        openTargets.forEach(target => {
+            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){
+        let tabs = dialog.querySelectorAll('.ha-buy-dialog-sidebar-tab');
+        let tabContents = dialog.querySelectorAll('.ha-buy-dialog-tab-content');
+        let timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        let region = timezone.split('/')[0].toLowerCase();
+        let locale = Intl.DateTimeFormat().resolvedOptions().locale;
+        let countryCode = locale.split('-')[1].toLowerCase();
+
+        
+        let defaultTab = dialog.querySelector(`.ha-buy-dialog-sidebar-tab[data-tab="#${region}"]`);
+        if (defaultTab) {
+            tabs.forEach(tab => tab.classList.remove('active'));
+            tabContents.forEach(tabContent => tabContent.classList.remove('active'));
+
+            defaultTab.classList.add('active');
+            let tabContent = document.querySelector(defaultTab.getAttribute('data-tab'));
+            tabContent.classList.add('active');
+
+            let country = tabContent.querySelector(`.ha-buy-dialog-distributor-country[data-code="${countryCode}"]`);
+            if (country) {
+                country.scrollIntoView({ behavior: 'instant', block: 'center' });
+            }
+        }
+    }
+</script>

source/connectzbt1/index.html

@@ -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>
@@ -237,506 +237,11 @@ frontpage_image: /images/frontpage/feature-zbt1.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 Connect ZBT-1</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/skyconnect" target="_blank">
+{% include custom/buy-dialog.html product="zbt-1" %}
-            <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-skyconnect/" 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-SkyConnect-p-5479.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-SkyConnect-p-5479.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_australia">
-        <summary class="region">Shipping to Australia</summary>
-        <div>
-
-          <a
-            href="https://smartguys.com.au/home-assistant-skyconnect.html"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇦🇺</div>
-                <div>Smart Guys</div>
-                <div>Shipping from Australia</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://www.alza.cz/home-assistant-skyconnect-usb-hub-d7815713.htm" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇨🇿</div>
-                <div>ALZA</div>
-                <div>Shipping from the Czech Republic</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/22759-home-assistant-skyconnect-usb-stick-zgodny-z-zigbeematterthread-794677011635.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://dinamotech.it/products/home-assistant-connect-zbt-1"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇮🇹</div>
-                <div>DinamoTech</div>
-                <div>Shipping from Italy</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.domadoo.fr/fr/box-domotique/6938-dongle-usb-zigbee-30-sky-connect-pour-home-assistant-nabu-casa-0794677011635.html" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇫🇷</div>
-                <div>Domadoo</div>
-                <div>Shipping from France</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://shop.everythingsmart.io/products/home-assistant-skyconnect"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇬🇧</div>
-                <div>Everything Smart Technology</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>
-
-          <a
-            href="https://ewelinkstore.com/product/home-assistant-skyconnect-a-zigbee-thread-matter-usb-stick-for-home-assistant/"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇭🇺</div>
-                <div>eWeLink device store</div>
-                <div>Shipping from Hungary</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.hashop.nl/Home-Assistant-SkyConnect"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇳🇱</div>
-                <div>HAshop</div>
-                <div>Shipping from the Netherlands</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.kjell.com/no/produkter/smarte-hjem/kontroller/nabu-casa-home-assistant-skyconnect-p88431"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇳🇴</div>
-                <div>Kjell</div>
-                <div>Shipping from Norway</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-1222"
-          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://mediarath.de/products/home-assistant-skyconnect-zigbee-thread-matter-usb-stick-fur-home-assistant"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇩🇪</div>
-                <div>mediarath</div>
-                <div>Shipping from 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://en.m.nu/zigbee/controllers-zigbee/home-assistant-skyconnect-zigbee-matter-thread"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇸🇪</div>
-                <div>m.nu</div>
-                <div>Shipping from Sweden</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://okosotthon.bolt.hu/webaruhaz/termek/home-assistant-skyconnect-egy-zigbee-thread-matter-usb-kulcs-home-assistant-hoz/"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇭🇺</div>
-                <div>OkosOtthon Bolt</div>
-                <div>Shipping from Hungary</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://shop.pimoroni.com/products/home-assistant-connect-zbt-1"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇬🇧</div>
-                <div>Pimoroni</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>
-
-          <a
-            href="https://raspberrypi.dk/en/product/home-assistant-skyconnect/"
-            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.robbshop.nl/home-assistant-skyconnect-zigbee-en-thread-usb"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇳🇱</div>
-                <div>Robbshop</div>
-                <div>Shipping from the Netherlands</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-SkyConnect-p-5479.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://smarterhome.sk/sk/zwave-pc-adaptery/home-assistant-connect-zbt-1-zigbee-a-thread-usb-adapter-1646.html"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇸🇰</div>
-                <div>SmarterHOME</div>
-                <div>Shipping from Slovakia</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://shop.swiss-domotique.ch/de/smarthome-zentrale/2118-nabu-casa-home-assistant-skyconnect.html"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇨🇭</div>
-                <div>Swiss-Domotique</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://thepihut.com/collections/latest-raspberry-pi-products/products/home-assistant-skyconnect"
-            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>
-
-          <a
-            href="https://www.webhallen.com/se/product/357205-Home-Assistant-SkyConnect-ZigbeeMatterThread"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇸🇪</div>
-                <div>Webhallen</div>
-                <div>Shipping from Sweden</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.wifishop.ro/en/homeassistant/home-assistant-skyconnect.html"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇷🇴</div>
-                <div>WIFIShop</div>
-                <div>Shipping from Romania</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>
 
 <div
-  class="fab" style="position: fixed; top: 116px; height: 48px;"
+  class="fab buy" style="position: fixed; top: 116px; height: 48px;"
-  onclick="showBuyDialog()"
   title="Order Home Assistant Connect ZBT-1"
 >
   <svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
@@ -748,41 +253,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");

source/green/index.html

@@ -2295,564 +2295,6 @@ dark_header: true
   </div>
 </div>
 
-<div id="buy-dialog" class="dialog">
+{% include custom/buy-dialog.html product="green" %}
-  <div class="material-card text dialog-content">
-    <div class="close-container"></div>
-    <div class="dialog-header">
-      <span>Home Assistant Green</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://www.amazon.com/dp/B0CXVKSG19?maas=maas_adg_BB51722E249D328CABB2F6DF1F8976CC_afap_abs&ref_=aa_maas&tag=maas" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇺🇸</div>
-                <div>Amazon US</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://ameridroid.com/products/home-assistant-green" 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-green/" 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-Green-p-5792.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-Green-p-5792.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_australia">
-        <summary class="region">Shipping to Australia</summary>
-        <div>
-          <a href="https://www.ozsmartthings.com.au/products/home-assistant-green-smart-hub"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇦🇺</div>
-                <div>Oz Smart Things</div>
-                <div>Shipping from Australia</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://smartguys.com.au/home-assistant-green.html"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇦🇺</div>
-                <div>Smart Guys</div>
-                <div>Shipping from Australia</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.smarthome.com.au/product/home-assistant-green/"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇦🇺</div>
-                <div>SmartHome</div>
-                <div>Shipping from Australia</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://www.alza.cz/home-assistant-green-d7998187.htm" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇨🇿</div>
-                <div>Alza.cz</div>
-                <div>Shipping from the Czech Republic</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/24319-home-assistant-green-inteligentna-centralka-nabu-casa-nc-green-1175-794677011758.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://dinamotech.it/products/home-assistant-green"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇮🇹</div>
-                <div>DinamoTech</div>
-                <div>Shipping from Italy</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.domadoo.fr/fr/box-domotique/7046-nabu-casa-box-domotique-home-assistant-green-0794677011758.html"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇫🇷</div>
-                <div>Domadoo</div>
-                <div>Shipping from France</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://shop.everythingsmart.io/products/home-assistant-green"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇬🇧</div>
-                <div>Everything Smart Technology</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>
-
-          <a
-            href="https://ewelinkstore.com/product/home-assistant-green-hub/"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇭🇺</div>
-                <div>eWeLink device store</div>
-                <div>Shipping from Hungary</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.hashop.nl/Home-Assistant-Green"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇳🇱</div>
-                <div>HAshop</div>
-                <div>Shipping from the Netherlands</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.robbshop.nl/home-assistant-green-smart-hub"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇳🇱</div>
-                <div>ROBBshop</div>
-                <div>Shipping from the Netherlands</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.kjell.com/no/produkter/smarte-hjem/kontroller/nabu-casa-home-assistant-green-p88430"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇳🇴</div>
-                <div>Kjell</div>
-                <div>Shipping from Norway</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-3152"
-          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://mediarath.de/products/home-assistant-green-smart-home-hub-2x-usb-gigabit-lan-hmdi-microsd-slot"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇩🇪</div>
-                <div>mediarath</div>
-                <div>Shipping from 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://en.m.nu/controllers-smart-hubs/home-assistant-green"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇸🇪</div>
-                <div>m.nu</div>
-                <div>Shipping from Sweden</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://okosotthon.bolt.hu/webaruhaz/termek/home-assistant-green-hub/"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇭🇺</div>
-                <div>OkosOtthon Bolt</div>
-                <div>Shipping from Hungary</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-green"
-            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://shop.pimoroni.com/products/home-assistant-green"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇬🇧</div>
-                <div>Pimoroni</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>
-
-          <a
-            href="https://raspberrypi.dk/en/product/home-assistant-green/"
-            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-Green-p-5792.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://smarterhome.sk/sk/centralne-jednotky/home-assistant-green-smart-home-hub-1490.html"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇸🇰</div>
-                <div>SmarterHOME</div>
-                <div>Shipping from Slovakia</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://shop.swiss-domotique.ch/smarthome-hub/2295-nabu-casa-home-assistant-green.html"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇨🇭</div>
-                <div>Swiss-Domotique</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://thepihut.com/products/home-assistant-green"
-            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>
-
-          <a
-            href="https://www.webhallen.com/se/product/364271-Nabu-Casa-Home-Assistant-Green"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇸🇪</div>
-                <div>Webhallen</div>
-                <div>Shipping from Sweden</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.wifishop.ro/en/homeassistant/home-assistant-green.html"
-            target="_blank"
-          >
-            <div class="distributor">
-              <div>
-                <div>🇷🇴</div>
-                <div>WIFIShop</div>
-                <div>Shipping from Romania</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>
 
 <script src="/green/script.js" type="text/javascript"></script>

source/green/script.js

@@ -86,32 +86,6 @@ window.addEventListener(
     false
 );
 
-const buyDialog = document.getElementById("buy-dialog");
-const buyFabs = document.querySelectorAll(".buy");
-
-buyFabs.forEach(btn => btn.addEventListener("click", (e) => {
-    e.preventDefault();
-    showBuyDialog();
-}));
-
-function showBuyDialog() {
-    buyDialog.style.display = "flex";
-}
-
-function closeDialog() {
-    buyDialog.style.display = "none";
-}
-
-window.onclick = function (event) {
-    if (event.target === buyDialog) {
-        closeDialog();
-    }
-};
-
-if (document.location.search === "?order") {
-    showBuyDialog();
-}
-
 const menuMobileBtn = document.getElementById("open-mobile-menu");
 const mobileMenu = document.querySelector(".w-nav-overlay");
 const mobileMenuLinks = document.querySelectorAll(".w-nav-overlay a");

source/voice-pe/index.html

@@ -28,7 +28,7 @@ frontpage_image: /images/frontpage/voice-pe-frontpage.jpg
         <a href="#specs">Specs</a>
         <a href="#faq">FAQ</a>
         <a href="https://voice-pe.home-assistant.io/" target="_blank" rel="noopener">Docs</a>
-        <a href="#buy" class="cta">Buy now</a>
+        <a href="#" class="cta buy">Buy now</a>
       </div>
       <div class="burger">
         <div class="burger__icon"></div>
@@ -41,7 +41,7 @@ frontpage_image: /images/frontpage/voice-pe-frontpage.jpg
           <a href="#specs">Specs</a>
           <a href="#faq">FAQ</a>
           <a href="https://voice-pe.home-assistant.io/" target="_blank" rel="noopener">Docs</a>
-          <a href="#buy" class="cta">Buy now</a>
+          <a href="#" class="cta buy">Buy now</a>
         </div>
       </div>
     </div>
@@ -1381,275 +1381,6 @@ frontpage_image: /images/frontpage/voice-pe-frontpage.jpg
   </div>
 </div>
 
-<div id="buy-dialog" class="dialog">
+{% include custom/buy-dialog.html product="voice-pe" %}
-  <div class="material-card text dialog-content">
+
-    <div class="close-container"></div>
-    <div class="dialog-header">
-      <span>Home Assistant Voice <small>Preview Edition</small></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-voice-preview-edition/" 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-voice-preview-edition/" 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-Voice-p-6998.html" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇨🇳</div>
-                <div>Seeed Studio</div>
-                <div>Shipping from US, Germany and China</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-Voice-p-6998.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_australia">
-        <summary class="region">Shipping to Australia</summary>
-        <div>
-          <a href="https://www.ozsmartthings.com.au/products/ha-voice-preview-edition" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇦🇺</div>
-                <div>OZ Smart Things</div>
-                <div>Shipping from Australia</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>
-        <div>
-          <a href="https://smartguys.com.au/product/home-assistant-voice-preview-edition/" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇦🇺</div>
-                <div>Smart Guys</div>
-                <div>Shipping from Australia</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://www.alza.cz/home-assistant-voice-preview-edition-d12741248.htm" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇨🇿</div>
-                <div>Alza.cz</div>
-                <div>Shipping from Czech Republic</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-voice-preview-edition/" 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.domadoo.fr/fr/box-domotique/7558-nabu-casa-home-assistant-voice-preview-edition-0860011789727.html"
-            target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇫🇷</div>
-                <div>Domadoo</div>
-                <div>Shipping from France</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://mediarath.de/products/home-assistant-voice-preview-edition-open-source-privacy-focused-voice-assistant-with-esphome"
-            target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇩🇪</div>
-                <div>Mediarath</div>
-                <div>Shipping from 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://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇨🇳</div>
-                <div>Seeed Studio</div>
-                <div>Shipping from Germany, US and China</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://dinamotech.it/products/home-assistant-voice" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇮🇹</div>
-                <div>Dinamotech</div>
-                <div>Shipping from Italy</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/asystenci-glosowi/25872-home-assistant-voice-preview-edition-asystent-glosowy-860011789727.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-4747" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇵🇹</div>
-                <div>Mauser.pt</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://smarterhome.sk/sk/hlasovi-asistenti/home-assistant-voice-preview-edition-1714.html"
-            target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇸🇰</div>
-                <div>SmarterHOME</div>
-                <div>Shipping from Slovakia</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.webhallen.com/377166" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇸🇪</div>
-                <div>Webhallen</div>
-                <div>Shipping from Sweden</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://shop.swiss-domotique.ch/de/sound/2667-nabu-casa-home-assistant-voice-preview-edition.html"
-            target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇨🇭</div>
-                <div>Swiss-Domotique</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://shop.everythingsmart.io/products/home-assistant-voice-preview-edition" target="_blank">
-            <div class="distributor">
-              <div>
-                <div>🇬🇧</div>
-                <div>Everything Smart Technology</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>
-          <a href="https://thepihut.com/products/home-assistant-voice-preview-edition" 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>
 <script src="/voice-pe/script.js" type="text/javascript"></script>

source/voice-pe/script.js

@@ -19,7 +19,6 @@ document.addEventListener('DOMContentLoaded', function () {
     registerLanguageSelectChange();
     registerFeatureCycle();
     registerFaqItems();
-    registerBuyDialog();
     registerLazySections();
 });
 
@@ -697,23 +696,6 @@ function registerFaqItems() {
 
 }
 
-const buyDialog = document.getElementById("buy-dialog");
-function registerBuyDialog() {
-    const buyButtons = document.querySelectorAll('a[href="#buy"]');
-    if (!buyButtons) return;
-
-    buyButtons.forEach(button => {
-        button.addEventListener('click', function () {
-            showBuyDialog();
-        });
-    });
-
-    // if the url contains #buy, show the dialog
-    if (window.location.hash === '#buy') {
-        showBuyDialog();
-    }
-}
-
 function showBuyDialog() {
     buyDialog.style.display = "flex";
     document.documentElement.style.overflow = "hidden";

source/yellow/index.html

@@ -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">
+{% include custom/buy-dialog.html product="yellow" %}
-  <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>
 
 <div
-  class="fab" style="position: fixed; top: 78px; height: 48px;"
+  class="fab buy" style="position: fixed; top: 78px; height: 48px;"
-  onclick="showBuyDialog()"
   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>
+</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>