<html>
<head>
<title>Solar System Planets and Sun - RJM Programming, April, 2023</title>
<style>
summary { background-color: yellow; text-shadow: 1px 1px 2px #2dff95; font-size: 28px; }
</style>
<script type=text/javascript>
// Thanks to https://solarsystem.nasa.gov/resources/686/solar-system-sizes/
var pandsnames=['Sun','Mercury','Venus','Earth','Mars','Jupiter','Saturn','Uranus','Neptune'];
var pandsunems=['☀','☿','♀','♁','🍫','♃','♄🪐','♅','♆'];
var pandsradis=[69634,244,605,637,339,6991,5823,1576,1530];
var pandsimgus=['https://www.rjmprogramming.com.au/HTMLCSS/sun.png',
'https://www.rjmprogramming.com.au/HTMLCSS/mercury.png',
'https://www.rjmprogramming.com.au/HTMLCSS/venus.png',
'https://www.rjmprogramming.com.au/HTMLCSS/earth.png',
'https://www.rjmprogramming.com.au/HTMLCSS/mars.png',
'https://www.rjmprogramming.com.au/HTMLCSS/jupiter.png',
'https://www.rjmprogramming.com.au/HTMLCSS/saturn.png',
'https://www.rjmprogramming.com.au/HTMLCSS/uranus.png',
'https://www.rjmprogramming.com.au/HTMLCSS/neptune.png'];
var pandsimgun=['https://solarsystem.nasa.gov/solar-system/sun/overview/',
'https://solarsystem.nasa.gov/planets/mercury/overview/',
'https://solarsystem.nasa.gov/planets/venus/overview/',
'https://solarsystem.nasa.gov/planets/earth/overview/',
'https://solarsystem.nasa.gov/planets/mars/overview/',
'https://solarsystem.nasa.gov/planets/jupiter/overview/',
'https://solarsystem.nasa.gov/planets/saturn/overview/',
'https://solarsystem.nasa.gov/planets/uranus/overview/',
'https://solarsystem.nasa.gov/planets/neptune/overview/'];
function fillin() {
// http://localhost:8888/HTMLCSS/circular_text.html?radius=50.360&text=es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es%20es&fontsize=14&ih=Wikipedia&im=%2FHTMLCSS%2Fworld.jpg
var tempateurl='//www.rjmprogramming.com.au/HTMLCSS/circular_text.html?sizeword=cover&radius=.360&text=&fontsize=14&ih=&im=&iu=';
for (var i=0; i<pandsnames.length; i++) {
document.getElementById('i' + pandsnames[i].toLowerCase()).src=(tempateurl + encodeURIComponent(pandsimgun[i]) + '&width=' + eval(2.0 * pandsradis[i]) + '&height=' + eval(2.0 * pandsradis[i])).replace('.360', '' + pandsradis[i] + '.360').replace('&text=&', '&text=' + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + encodeURIComponent(pandsunems[i] + ' ') + '&').replace('&ih=&', '&ih=' + pandsnames[i] + '&').replace('&im=&', '&im=' + pandsimgus[i] + '&');
document.getElementById('i' + pandsnames[i].toLowerCase()).style.visibility='visible';
document.getElementById('i' + pandsnames[i].toLowerCase()).style.width='' + eval(2.3 * pandsradis[i]) + 'px';
document.getElementById('i' + pandsnames[i].toLowerCase()).style.height='' + eval(2.3 * pandsradis[i]) + 'px';
}
}
</script>
</head>
<body onload='fillin();'>
<h1>Solar System Planets and Sun</h1>
<h3>RJM Programming, April, 2023</h3>
<h4>Thanks to <a target=_blank title=NASA href='https://solarsystem.nasa.gov/'>NASA</a></h4>
<details id=dsun><summary style='background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple, violet);'>Sun ...</summary>
<iframe id=isun style=visibility:hidden; frameborder=0 src=''></iframe>
</details>
<details id=dmercury open><summary style=background-color:red;>Mercury ...</summary>
<iframe id=imercury style=visibility:hidden; frameborder=0 src=''></iframe>
</details>
<details id=dvenus><summary style=background-color:orange;>Venus ...</summary>
<iframe id=ivenus style=visibility:hidden; frameborder=0 src=''></iframe>
</details>
<details id=dearth><summary style=background-color:yellow;>Earth ...</summary>
<iframe id=iearth style=visibility:hidden; frameborder=0 src=''></iframe>
</details>
<details id=dmars><summary style=background-color:green;>Mars ...</summary>
<iframe id=imars style=visibility:hidden; frameborder=0 src=''></iframe>
</details>
<details id=dvenus><summary style=background-color:blue;>Jupiter ...</summary>
<iframe id=ijupiter style=visibility:hidden; frameborder=0 src=''></iframe>
</details>
<details id=dvenus><summary style=background-color:indigo;>Saturn ...</summary>
<iframe id=isaturn style=visibility:hidden; frameborder=0 src=''></iframe>
</details>
<details id=duranus><summary style=background-color:purple;>Uranus ...</summary>
<iframe id=iuranus style=visibility:hidden; frameborder=0 src=''></iframe>
</details>
<details id=dnepturn><summary style=background-color:violet;>Neptune ...</summary>
<iframe id=ineptune style=visibility:hidden; frameborder=0 src=''></iframe>
</details>
</script>
</head>
<body>
</body>
</html>