Scriptable.app code for an adapt.sh widget. 100% written from my phone so indentation is all over the place and barely any error checks.

scriptable-widget-adaptsh.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: blue; icon-glyph: bolt;

async function getForecast() {
  
  const url = "https://adapt.sh/forecast"  
  const webview = new WebView()
  await webview.loadURL(url)
  
  const getData = `
      function getData(){
        const results = {}
        const allForecasts = Array.from(document.getElementsByClassName("forecast-block"))
        
        const nextHours = allForecasts.slice(0,6)
        
        results.soon = []
        for(s of nextHours){ 
          const h = getHour(s)
          const l = getLegend(s)
          const res = {
            hour: h,
            legend: l,
          }
          results.soon.push(res)
        }
            
        const nextConfortable =  document.getElementsByClassName("forecast-block-confortable")[0]  
        if (nextConfortable) {
          const hConf = getHour(nextConfortable)
          const dConf = getParentDate(nextConfortable)          
  
          results.nextLow = {
            hour: hConf,
            date: dConf,
          }
        }

        const nextVeryConfortable =  document.getElementsByClassName("forecast-block-veryconfortable")[0]
  
        if (nextVeryConfortable) {
          const hVConf = getHour(nextVeryConfortable)
          const dVConf = getParentDate(nextVeryConfortable)          
          results.nextLowest = {
            hour: hVConf,
            date: dVConf,
          }
      }
            
        return results
      } 
        
      function getHour(element) {
        const hour = element?.getElementsByClassName("hour")[0]
        const h = hour?.innerHTML.trim()
        return h
      }
        
      function getLegend(element) {
        const legend = element?.getElementsByClassName("legend")[0]
        const l = legend?.textContent.trim()
        return l
      }
        
      function getParentDate(element) {
        return element?.parentNode.getElementsByTagName("h2")[0].innerHTML.trim()
      }

      getData()
    `
   

    const response = await webview.evaluateJavaScript(getData, false)
    console.log(response)
    return response
}

function createWidget(forecast) {
  const widget = new ListWidget()
  
  const global = widget.addStack()
  //horizontal layout so we have two columns
  global.layoutHorizontally()
  
  const hours = global.addStack()
  hours.layoutVertically()
  const stitle=hours.addText("Prochaines heures")
  stitle.font = Font.semiboldSystemFont(16)
  for (f of forecast.soon) {
    const stack = hours.addStack()
    const text = stack.addText(`${f.hour}${f.legend.replace("Électricité ", "⚡️")}`)
    text.font = Font.lightSystemFont(14)
  }
  
  const next = global.addStack()
  next.layoutVertically()
  
  const low = next.addStack()
  low.layoutVertically()
  const stitle2=low.addText("⚡️peu carbonée")
  stitle2.font = Font.semiboldSystemFont(16)
  const cleanStack = low.addStack()
  if (!forecast.nextLow) {
    cleanStack.addText("🤷")
  } else {
    const cleanText = cleanStack.addText(`${forecast.nextLow.date} à ${forecast.nextLow.hour}`)
    cleanText.font = Font.lightSystemFont(14)
  }
  
  const lowest = next.addStack()
  lowest.layoutVertically()
  const stitle3=lowest.addText("⚡️très peu carbonée")
  stitle3.font = Font.semiboldSystemFont(16)
  const lowestStack = lowest.addStack()
  if (!forecast.nextLowest) {
    lowestStack.addText("🤷")
  } else {
    const lowestText = lowestStack.addText(`${forecast.nextLowest.date} à ${forecast.nextLowest.hour}`)
    lowestText.font = Font.lightSystemFont(14)  
  }
  
  return widget
}


const colours = {
    startColour: "ffffff",
    endColour: "ffffff",
    textColour: "1f1f1f",
    darkStartColour: "0050ca",
    darkEndColour: "000000",
    darkTextColour: "6de46d",
}

const startColour = Color.dynamic(new Color(colours.startColour), new Color(colours.darkStartColour))

const endColour = Color.dynamic(new Color(colours.endColour), new Color(colours.darkEndColour))

function setColours(widget) {
  const gradient = new LinearGradient()
  gradient.colors = [startColour, endColour];
  gradient.locations = [0, 1];
  widget.backgroundGradient = gradient
}


const forecast = await getForecast()
const widget = createWidget(forecast)
setColours(widget)
 
if (config.runsInWidget) {
  Script.setWidget(widget)
} else { 
  widget.presentMedium()
}

Script.complete()