Zürichhorn Widget

Version: 1.1 / 18.04.2020

by Markus Steiger

HTML

<!--
INSTRUCTIONS
COPY the code between '<!- START BADI Widget ->' and '<!- END BADI Widget ->'
inside any div. The widget is fully reponsive.
-->

<div id="badi-outer">

<!-- START BADI Widget -->
esult.length-1].values.wind_speed_avg_10min.value;console.log("Windgeschwindigkeit: "+c+" m/s");c=(3.6*c).toFixed(0);console.log("Windgeschwindigkeit: "+c+" km/h");a=a.result[a.result.length-1].values.wind_direction.value;console.log("Windrichtung: "+a+" Grad");$("#badi-sturm").addClass("bft-"+f);$("#badi-air .input").append("<span>"+d+"<span class='masseinheit'></span></span>");$("#badi-water .input").append("<span>"+ e+"<span class='masseinheit'></span></span>");$("#badi-time .input").append("<span>"+g+" | "+b+"</span>");$("#badi-wind").append('<span id="wind-speed">'+c+" km/h</span>");$("#windrichtung-icon").css("transform","rotate("+a+"deg)")});$("#close-badidata-dialog").on("click",function(){$("#badidata-dialog").addClass("badidata-display-none");return!1});$("#open-badidata-dialog").on("click",function(){$("#badidata-dialog").removeClass("badidata-display-none");return!1})}); </script>
<!-- END BADI Widget -->

</div>

CSS

/* 
   demo style
*/

#badi-outer {
    box-shadow: 2px 5px 7px 1px rgba(0, 0, 0, 0.05);
    width: 60vw;
    height: 60vw;
    margin: 20px auto 0 auto;
}

/* Bonus Code: Style the Image */

#bg-land {fill: #F2F2F2 !important;}
#bg-wasser {fill:#cdd8f1 !important;}
#bg-park {fill:#DBE7D1 !important;}
#treppe {fill:#000 !important;}
#welle-01,#welle-02,#welle-03 {fill: #fff !important;}