Just my iOS app

Hi, when I first try home assistant some week ago I had some reaction ( how the programation language was not natural to my, but how powerful it could be… and MOSTLY how much I did not like the UI )

So couple of week later this is the ios app I made for my wife : (p.s it’s just a web app of a Lovelace page)

EDIT this is my code … feel free to give me some tips … I know that 280 lines it’s a lot and I have a lot of repetitive code but like I said this is not natural for me and after a lot of tried I finally make it work this way

background: center / cover no-repeat url("/local/image/wp2.jpg") fixed
resources:
  - type: js
    url: /local/kiosk.js
  - type: js
    url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v0
  - type: js
    url: /local/card-tools.js
  - type: js
    url: /local/card-modder.js
  - icon: 'mdi:cellphone-iphone'
    theme: 'dark_cyan'
    title: ''

views:

  - badges: []
    cards:

    - type: horizontal-stack
      cards:
          - type: 'custom:compact-custom-header'
            background_image: true
            header: false

    - type: custom:card-modder
      style:
        border-radius: 5px
        text-align: center
        font-size: 200%
        border: 'solid 1px rgba(255,255,255,1)'
        box-shadow: '3px 3px rgba(0,0,0,0.4)'
        --primary-color: "#FFFFFF" 


      card:
        type: markdown
        content:  >
         [Appartement](http:/home.local:8123)

    - type: vertical-stack
      cards:

      - type: horizontal-stack
        cards:

#----------------------------------------------------------    #----------------------------------------------------------    

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: light.cuisine
                icon: 'mdi:silverware-fork-knife'
                name: Cuisine
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    


          - type: custom:card-modder
            card:  
                type: entity-button
                entity: group.all_lights_salon
                icon: 'mdi:sofa'
                name: Salon
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: light.toillette
                icon: 'mdi:toilet'
                name: Toilette
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    

      - type: horizontal-stack
        cards:

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: light.chambre
                icon: 'mdi:bed-empty'
                name: Chambre
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: light.gateway_light_34ce00fa706c
                icon: 'mdi:lamp'
                name: Veuilleuse
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: switch.pool_filter
                icon: 'mdi:desk-lamp'
                name: Bureau
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    

      - type: horizontal-stack
        cards:

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: input_boolean.tv_insignia
                icon: 'mdi:television'
                name: TV Salon
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: input_boolean.tv_changhong
                icon: 'mdi:television'
                name: TV Chambre
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    

      - type: horizontal-stack
        cards:

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: input_select.tab_cuisine
                icon: 'mdi:tablet-ipad'
                name: Cuisine
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    


          - type: custom:card-modder
            card:  
                type: entity-button
                entity: input_select.tab_salon
                icon: 'mdi:tablet-ipad'
                name: Salon
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: input_select.tab_coridor
                icon: 'mdi:tablet-ipad'
                name: Coridor
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    


      - type: custom:card-modder
        style:
          border-radius: 5px
          text-align: center;
          border: 'solid 1px rgba(255,255,255,1)'
          box-shadow: '3px 3px rgba(0,0,0,0.4)'
        card:
          type: markdown
          content: " "

      - type: horizontal-stack
        cards:


          - type: custom:card-modder
            card:  
                type: entity-button
                entity: input_boolean.night_mode
                icon: 'mdi:weather-night'
                name: Nuit
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'

#----------------------------------------------------------    

          - type: custom:card-modder
            card:  
                type: entity-button
                entity: input_boolean.cleaning_mode
                icon: 'mdi:broom'
                name: Ménage
                tap_action:
                  action: toggle

            style:
              border-radius: 5px
              border: 'solid 1px rgba(255,255,255,1)'
              box-shadow: '3px 3px rgba(0,0,0,0.4)'


#----------------------------------------------------------    #----------------------------------------------------------  

and for the theme it’s a modified version of dark cyan : (DO NO APPLIED IN FRONTEND it’s gonna be really ugly ! )

dark_cyan:
  primary-color: "#00bcd4"
  disabled-text-color: "#545454"
  divider-color: "rgba(255, 255, 255, 0.12)"
  paper-grey-200: "#191919"
  paper-item-icon-color: "#d3d3d3"
  paper-listbox-background-color: "#202020"
  paper-listbox-color: "#FFFFFF"
  primary-background-color: "rgba(5, 5, 8, 0.30)"
  primary-text-color: "#cfcfcf"
  secondary-background-color: "rgba(0, 0, 0, 0.12)"
  secondary-text-color: "#04a7bc"
  label-badge-background-color: "var(--secondary-background-color)"
  label-badge-text-color: "var(--text-primary-color)"
  paper-card-header-color: "#var(--paper-item-icon-color)"
  paper-grey-50: "var(--primary-text-color)"
  paper-item-icon-active-color: "var(--primary-color)"
  paper-item-icon_-_color: "var(--primary-text-color)"
  paper-slider-active-color: "var(--primary-color)"
  paper-slider-knob-color: "var(--primary-color)"
  paper-slider-knob-start-color: "var(--primary-color)"
  paper-slider-pin-color: "var(--primary-color)"
  paper-slider-secondary-color: "var(--light-primary-color)"
  paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
  paper-toggle-button-checked-button-color: "var(--primary-color)"
  paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
  paper-toggle-button-unchecked-bar-color: "var(--primary-text-color)"
  paper-card-background-color: "rgba(5, 5, 8, 0.50)"
  paper-card-border-color: "rgba(255, 0, 0, 1)"
3 Likes

How lovely, but unless you are going to share your code, not much use to anyone.