carte météo animée

type: custom:button-card
entity: weather.tramayes
show_name: false
show_icon: true
show_state: false
styles:
  card:
    - width: 490px
    - height: 275px
    - background-size: cover
    - background-position: center
    - border-radius: 18px
    - padding: 18px
    - color: blue
    - box-shadow: 0px 4px 12px rgba(0,0,0,0.6)
  icon:
    - width: 80px
    - color: blue
  custom_fields:
    info:
      - justify-self: start
      - text-align: left
      - padding-left: 10px
      - display: flex
      - flex-direction: column
      - gap: 4px
state:
  - value: sunny
    styles:
      card:
        - background-image: url('/local/photos/soleil.jpg')
  - value: cloudy
    styles:
      card:
        - background-image: url('/local/photos/nuageux.jpg')
  - value: rainy
    styles:
      card:
        - background-image: url('/local/photos/pluie.jpg')
  - value: fog
    styles:
      card:
        - background-image: url('/local/photos/brouillard.jpg')
  - value: snowy
    styles:
      card:
        - background-image: url('/local/photos/neige.jpg')
custom_fields:
  info: |
    [[[
      if (!entity || !entity.attributes) return '';

      const temp = entity.attributes.temperature ?? '--';
      const wind = Math.round(entity.attributes.wind_speed ?? 0);
      const condition = entity.state;

      const map = {
        rainy: 'Pluvieux',
        cloudy: 'Nuageux',
        sunny: 'Ensoleillé',
        clear: 'Dégagé',
        snowy: 'Neige',
        fog: 'Brouillard'
      };

      const condition_fr = map[condition] ?? condition;

      const date = new Date();
      const days = ['dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi'];
      const months = ['janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre'];

      return `
        <style>
          @keyframes scrollX {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
          }
          .scroll-container {
            overflow: hidden;
            width: 100%;
            display: flex;
            align-items: center;
          }
          .info-track {
            display: flex;
            gap: 14px;
            animation: scrollX 20s linear infinite;
            white-space: nowrap;
          }
          .info-box {
            background: rgba(255,255,255,0.28);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            padding: 14px 30px;
            color: white;
            font-size: 19px;
            font-weight: 600;
            box-shadow: 0 8px 10px rgba(0,0,0,0.25);
          }
        </style>

        <div class="scroll-container">
          <div class="info-track">
            <div class="info-box">${condition_fr}</div>
            <div class="info-box">${temp}°C</div>
            <div class="info-box">${wind} km/h</div>
            <div class="info-box">
              ${date.toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit'})}
            </div>
            <div class="info-box">
              ${days[date.getDay()]} ${date.getDate()} ${months[date.getMonth()]}
            </div>
          </div>
        </div>
      `;
    ]]]
Créé il y a 1 mois.