{source}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<svg id="galaxy">
<g id="stars"></g>
</svg>
<style>
#galaxy {
background-image: url("/../../images/suto.png");
background-size: contain;
background-repeat: no-repeat;
left: 0;
top: 0;
width: 2661px;
height: 200px;
position: relative;
}
</style>
<script>
function mainFunc() {
var svgNS = "http://www.w3.org/2000/svg"
var starsGroup = document.getElementById("stars");
var galaxy = document.getElementById("galaxy").getBoundingClientRect();
var center = { x: galaxy.width / 2, y: galaxy.height / 2 };
var stars = []
var tweens = []

window.onresize = function () {
galaxy = document.getElementById("galaxy").getBoundingClientRect();
center = { x: galaxy.width / 2, y: galaxy.height / 2 };
};

// STAR OPTIONS //////////////////////////////////////////////////////////////
var maxRad = Math.sqrt(Math.pow(center.x, 2) + Math.pow(center.y, 2));
var starCount = 100;
var speed = 1;
var innerRadius = 200;
var minSize = 1;
var maxSize = 2;
//////////////////////////////////////////////////////////////////////////////

var startPos, tranOrigin, time;
for (var i = 0; i < starCount; ++i) {
// add new star
var star = document.createElementNS(svgNS, "circle");
startPos = {
x: Math.random() * center.x * 2,
y: Math.random() * center.y * 2
};

// set basic tag attributes
star.setAttribute("class", "star");
star.setAttribute("fill", "#A8A8A8");
star.setAttribute("stroke", "none");
star.setAttribute("cx", startPos.x);
star.setAttribute("cy", startPos.y);
star.setAttribute("r", Math.random() * maxSize + minSize);

// add to internal array and svg group
stars.push(star);
starsGroup.appendChild(star);

tranOrigin = "" + (center.x - startPos.x) + "px " +
(center.y - startPos.y) + "px";

time = Math.pow(speed * 0.01, -1) * Math.pow(star.getAttribute("r"), -1);
//console.log(time)

tweens.push(TweenMax.to(star, time, {
transformOrigin: tranOrigin,
rotation: 360,
ease: Power0.easeNone,
repeat: -1
}));
}
}
document.addEventListener("DOMContentLoaded", mainFunc);
</script>
{/source}

{source}<link rel="stylesheet" href="/../images/style_weather.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body>
<div class="daily_weather" >
<div class="w_day" id="d_day_0">
<h4 id="day_0">
First day
</h4>
<ul id="d0" class="day_list">
<li><img src="/" alt="" class="weather_icon" id="0_icon" data-toggle="tooltip"></li>
<li>Temp.:
<span id="0_temp_max" ></span> / <span id="0_temp_min" >
</span> °C
</li>
<li>Clouds: <span id="0_c_cover"></span> %</li>
<li>Precip.: <span id="0_precip"></span> mm</li>
<li>Hum.: <span id="0_hum"></span> %</li>
<li>Dew: <span id="0_dew"></span> °C</li>
<li>Wind: <span id="0_wind_speed"></span> (<span id="0_wind_gust"></span>) m/s | <span
id="0_wind_dir"></span></li>
<li>Sun: <span id="0_sunrise"></span> /<span id="0_sunset"></span></li>
<li>Moon phase: <span id="0_moonphase"></span> %</li>
</ul>
</div>

<div class="w_day" id="d_day_1">
<h4 id="day_1">
First day
</h4>
<ul id="d1" class="day_list">
<li><img src="/" alt="" class="weather_icon" id="1_icon" data-toggle="tooltip"></li>
<li>Temp.:
<span id="1_temp_max" ></span> / <span id="1_temp_min">
</span> °C
</li>
<li>Clouds: <span id="1_c_cover"></span> %</li>
<li>Precip.: <span id="1_precip"></span> mm</li>
<li>Hum.: <span id="1_hum"></span> %</li>
<li>Dew: <span id="1_dew"></span> °C</li>
<li>Wind: <span id="1_wind_speed"></span> (<span id="1_wind_gust" ></span>) m/s | <span
id="1_wind_dir"></span></li>
<li>Sun: <span id="1_sunrise"></span> /<span id="1_sunset"></span></li>
<li>Moon phase: <span id="1_moonphase"></span> %</li>
</ul>
</div>
<div class="w_day" id="d_day_2">
<h4 id="day_2">
First day
</h4>
<ul id="d2" class="day_list">
<li><img src="/" alt="" class="weather_icon" id="2_icon" data-toggle="tooltip"></li>
<li>Temp.:
<span id="2_temp_max" ></span> / <span id="2_temp_min" >
</span> °C
</li>
<li>Clouds: <span id="2_c_cover"></span> %</li>
<li>Precip.: <span id="2_precip"></span> mm</li>
<li>Hum.: <span id="2_hum"></span> %</li>
<li>Dew: <span id="2_dew"></span> °C</li>
<li>Wind: <span id="2_wind_speed"></span> (<span id="2_wind_gust" ></span>) m/s | <span
id="2_wind_dir"></span></li>
<li>Sun: <span id="2_sunrise"></span> /<span id="2_sunset"></span></li>
<li>Moon phase: <span id="2_moonphase"></span> %</li>
</ul>
</div>

<div class="w_day" id="d_day_3">
<h4 id="day_3">
First day
</h4>
<ul id="d3" class="day_list">
<li><img src="/" alt="" class="weather_icon" id="3_icon" data-toggle="tooltip"></li>
<li>Temp.:
<span id="3_temp_max"></span> / <span id="3_temp_min">
</span> °C
</li>
<li>Clouds: <span id="3_c_cover"></span> %</li>
<li>Precip.: <span id="3_precip"></span> mm</li>
<li>Hum.: <span id="3_hum"></span> %</li>
<li>Dew: <span id="3_dew"></span> °C</li>
<li>Wind: <span id="3_wind_speed"></span> (<span id="3_wind_gust" ></span>) m/s | <span
id="3_wind_dir"></span></li>
<li>Sun: <span id="3_sunrise"></span> /<span id="3_sunset"></span></li>
<li>Moon phase: <span id="3_moonphase"></span> %</li>
</ul>
</div>

<div class="w_day" id="d_day_4">
<h4 id="day_4">
First day
</h4>
<ul id="d4" class="day_list">
<li><img src="/" alt="" class="weather_icon" id="4_icon" data-toggle="tooltip"></li>
<li>Temp.:
<span id="4_temp_max"></span> / <span id="4_temp_min">
</span> °C
</li>
<li>Clouds: <span id="4_c_cover"></span> %</li>
<li>Precip.: <span id="4_precip"></span> mm</li>
<li>Hum.: <span id="4_hum"></span> %</li>
<li>Dew: <span id="4_dew"></span> °C</li>
<li>Wind: <span id="4_wind_speed"></span> (<span id="4_wind_gust" ></span>) m/s | <span
id="4_wind_dir"></span></li>
<li>Sun: <span id="4_sunrise"></span> /<span id="4_sunset"></span></li>
<li>Moon phase: <span id="4_moonphase"></span> %</li>
</ul>
</div>
<div class="w_day" id="d_day_5">
<h4 id="day_5">
First day
</h4>
<ul id="d5" class="day_list">
<li><img src="/" alt="" class="weather_icon" id="5_icon" data-toggle="tooltip"></li>
<li>Temp.:
<span id="5_temp_max"></span> / <span id="5_temp_min">
</span> °C
</li>
<li>Clouds: <span id="5_c_cover"></span> %</li>
<li>Precip.: <span id="5_precip"></span> mm</li>
<li>Hum.: <span id="5_hum"></span> %</li>
<li>Dew: <span id="5_dew"></span> °C</li>
<li>Wind: <span id="5_wind_speed"></span> (<span id="5_wind_gust" ></span>) m/s | <span
id="5_wind_dir"></span></li>
<li>Sun: <span id="5_sunrise"></span> /<span id="5_sunset"></span></li>
<li>Moon phase: <span id="5_moonphase"></span> %</li>
</ul>
</div>
<div class="w_day" id="d_day_6">
<h4 id="day_6">
First day
</h4>
<ul id="d6" class="day_list">
<li><img src="/" alt="" class="weather_icon" id="6_icon" data-toggle="tooltip"></li>
<li>Temp.:
<span id="6_temp_max"></span> / <span id="6_temp_min">
</span> °C
</li>
<li>Clouds: <span id="6_c_cover"></span> %</li>
<li>Precip.: <span id="6_precip"></span> mm</li>
<li>Hum.: <span id="6_hum"></span> %</li>
<li>Dew: <span id="6_dew"></span> °C</li>
<li>Wind: <span id="6_wind_speed"></span> (<span id="6_wind_gust" ></span>) m/s | <span
id="6_wind_dir"></span></li>
<li>Sun: <span id="6_sunrise"></span> /<span id="6_sunset"></span></li>
<li>Moon phase: <span id="6_moonphase"></span> %</li>
</ul>
</div>
<div class="w_day" id="d_day_7">
<h4 id="day_7">
First day
</h4>
<ul id="d7" class="day_list">
<li><img src="/" alt="" class="weather_icon" id="7_icon" data-toggle="tooltip"></li>
<li>Temp.:
<span id="7_temp_max"></span> / <span id="7_temp_min">
</span> °C
</li>
<li>Clouds: <span id="7_c_cover"></span> %</li>
<li>Precip.: <span id="7_precip"></span> mm</li>
<li>Hum.: <span id="7_hum"></span> %</li>
<li>Dew: <span id="7_dew"></span> °C</li>
<li>Wind: <span id="7_wind_speed"></span> (<span id="7_wind_gust" ></span>) m/s | <span
id="7_wind_dir"></span></li>
<li>Sun: <span id="7_sunrise"></span> /<span id="7_sunset"></span></li>
<li>Moon phase: <span id="7_moonphase"></span> %</li>
</ul>
</div>

</div>
<br>
<table class="hourly_waather" id="hourly_waather">
<thead>
<tr class="head_table">
<th>
Time UTC
</th>
<th>
Cond.
</th>
<th colspan="2">
Temp. °C
</th>
<th>
Clouds %
</th>
<th>
Precip mm
</th>
<th>
Hum. %
</th>
<th>
Dew °C
</th>
<th>
Wind m/s | °
</th>
<th colspan="2">
Seeing
</th>
</tr>
</thead>
<tbody class="body_table" id="body_table">
</tbody>
</table>
<p id="loading" style="display: none; color: red; text-align: center; font-size: large;">Loading...</p>
<iframe sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox" src="https://widgets.meteox.com/en-GB/widgets/radar/location/12158/satellite?z=7" style="width:820px!important;max-width:820px!important;max-height:820px!important;height:820px!important;padding:0px;border:none!important;box-sizing:border-box!important;" scrolling="no" frameborder="0"></iframe>
</body>
<script id="observatory" src="/../../images/weather.js" observatory="UZPW" init_path="../../"></script>

<script src="https://cdn.usebootstrap.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
{/source}