{"id":2091,"date":"2024-07-05T13:34:03","date_gmt":"2024-07-05T13:34:03","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=2091"},"modified":"2024-09-26T21:11:19","modified_gmt":"2024-09-26T21:11:19","slug":"solarsystem","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/solarsystem\/","title":{"rendered":"solarsystem"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2091\" class=\"elementor elementor-2091\">\n\t\t\t\t<div class=\"elementor-element elementor-element-536fd98 e-flex e-con-boxed e-con e-parent\" data-id=\"536fd98\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-896839a elementor-widget elementor-widget-spacer\" data-id=\"896839a\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-337bf1a elementor-widget elementor-widget-heading\" data-id=\"337bf1a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The Solar System<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe0b698 elementor-widget elementor-widget-spacer\" data-id=\"fe0b698\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab37807 e-flex e-con-boxed e-con e-parent\" data-id=\"ab37807\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf040ef elementor-widget elementor-widget-html\" data-id=\"cf040ef\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"solar-system\">\n  <div class=\"sun\"><span class=\"celestial-name\">Solen<\/span><\/div>\n  <div class=\"orbit mercury-orbit\"><div class=\"planet mercury\"><span class=\"celestial-name\">Merkur<\/span><\/div><\/div>\n  <div class=\"orbit venus-orbit\"><div class=\"planet venus\"><span class=\"celestial-name\">Venus<\/span><\/div><\/div>\n  <div class=\"orbit earth-orbit\"><div class=\"planet earth\"><span class=\"celestial-name\">Jorden<\/span><\/div><\/div>\n  <div class=\"orbit mars-orbit\"><div class=\"planet mars\"><span class=\"celestial-name\">Mars<\/span><\/div><\/div>\n  <div class=\"orbit jupiter-orbit\"><div class=\"planet jupiter\"><span class=\"celestial-name\">Jupiter<\/span><\/div><\/div>\n  <div class=\"orbit saturn-orbit\"><div class=\"planet saturn\"><span class=\"celestial-name\">Saturn<\/span><\/div><\/div>\n  <div class=\"orbit uranus-orbit\"><div class=\"planet uranus\"><span class=\"celestial-name\">Uranus<\/span><\/div><\/div>\n  <div class=\"orbit neptune-orbit\"><div class=\"planet neptune\"><span class=\"celestial-name\">Neptun<\/span><\/div><\/div>\n  <div class=\"orbit pluto-orbit\"><div class=\"planet pluto\"><span class=\"celestial-name\">Pluto<\/span><\/div><\/div>\n<\/div>\n\n<div id=\"info-modal\" class=\"modal\">\n  <div class=\"modal-content\">\n    <span class=\"close\">&times;<\/span>\n    <h2 id=\"modal-title\"><\/h2>\n    <img fetchpriority=\"high\" decoding=\"async\" id=\"modal-image\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/saturnnn.jpeg\" alt=\"Planet billede\" width=\"270\" height=\"187\">\n    <p id=\"modal-info\"><\/p>\n  <\/div>\n<\/div>\n\n<style>\n  #solar-system {\n    width: 800px;\n    height: 800px;\n    position: relative;\n    margin: 0 auto;\n    background-color: transparent;\n  }\n  .sun {\n    width: 40px;\n    height: 40px;\n    background-color: #ffba00;\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    box-shadow: 0 0 20px 5px rgba(255, 255, 0, 0.7);\n    z-index: 10;\n  }\n  .orbit {\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n  .planet {\n    border-radius: 50%;\n    position: absolute;\n    cursor: pointer;\n    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);\n  }\n  .celestial-name {\n    position: absolute;\n    color: white;\n    font-size: 12px;\n    white-space: nowrap;\n    left: 50%;\n    top: 100%;\n    transform: translateX(-50%);\n    margin-top: 5px;\n    opacity: 0;\n    transition: opacity 0.3s;\n    pointer-events: none;\n    z-index: 100;\n  }\n  .sun:hover .celestial-name,\n  .planet:hover .celestial-name {\n    opacity: 1;\n  }\n  .mercury { background-color: #8c8c8c; width: 8px; height: 8px; }\n  .venus { background-color: #e6e6e6; width: 10px; height: 10px; }\n  .earth { background-color: #2434ff; width: 12px; height: 12px; }\n  .mars { background-color: #ff4d4d; width: 9px; height: 9px; }\n  .jupiter { background-color: #faad33; width: 21px; height: 21px; }\n  .saturn { \n    background-color: #fbb666; \n    width: 18px; \n    height: 18px; \n    position: relative;\n  }\n  .saturn::before {\n    content: '';\n    position: absolute;\n    width: 28px;\n    height: 2px;\n    background-color: #fbb666;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) rotate(27deg);\n    z-index: -1;\n  }\n  .uranus { background-color: #66ffff; width: 14px; height: 14px; }\n  .neptune { background-color: #3399ff; width: 14px; height: 14px; }\n  .pluto { background-color: #bf8040; width: 6px; height: 6px; }\n  \n  \/* Z-index for orbits *\/\n  .mercury-orbit { z-index: 9; }\n  .venus-orbit { z-index: 8; }\n  .earth-orbit { z-index: 7; }\n  .mars-orbit { z-index: 6; }\n  .jupiter-orbit { z-index: 5; }\n  .saturn-orbit { z-index: 4; }\n  .uranus-orbit { z-index: 3; }\n  .neptune-orbit { z-index: 2; }\n  .pluto-orbit { z-index: 1; }\n\n  \/* Modal styles *\/\n  .modal {\n    display: none;\n    position: fixed;\n    z-index: 1000;\n    left: 20px;\n    top: 20px;\n    width: 300px;\n    height: auto;\n    overflow: auto;\n    background-color: #000000;\n    border-radius: 5px;\n  }\n\n  .modal-content {\n    background-color: #000000;\n    margin: 15% auto;\n    padding: 20px;\n    border: 1px solid #888;\n    width: 90%;\n    max-width: 350px;\n    color: white;\n  }\n\n  .close {\n    color: #aaa;\n    float: right;\n    font-size: 28px;\n    font-weight: bold;\n  }\n\n  .close:hover,\n  .close:focus {\n    color: #fff;\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  #modal-title {\n    color: white;\n    margin-top: 0;\n    margin-bottom: 15px;\n  }\n\n  #modal-image {\n    display: block;\n    margin: 0 auto 15px;\n    max-width: 100%;\n    height: auto;\n  }\n\n  #modal-info {\n    margin-top: 15px;\n  }\n<\/style>\n\n<script>\n  const planets = [\n    { name: 'mercury', orbitSize: 80, period: 0.2408467, info: 'Merkur er den mindste og inderste planet i solsystemet. Den har ingen atmosf\u00e6re og er d\u00e6kket af kratere.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/merkur.jpg' },\n    { name: 'venus', orbitSize: 140, period: 0.61519726, info: 'Venus er den varmeste planet i solsystemet med en gennemsnitstemperatur p\u00e5 462\u00b0C. Den roterer bagl\u00e6ns sammenlignet med de fleste andre planeter.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/venus.jpg' },\n    { name: 'earth', orbitSize: 200, period: 1, info: 'Jorden er den tredje planet i solsystemet regnet fra Solen. Indtil videre er Jorden det eneste sted i Universet, hvor der er bevist levende v\u00e6sener. Den er d\u00e6kket af 71% vand og har en beskyttende atmosf\u00e6re. Jorden er den st\u00f8rste af de fire klippeplaneter - Merkur, Venus, Jorden og Mars. Disse fire planeter er opbygget af klippemateriale og har derfor en fast overflade. ', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/jorden.jpg' },\n    { name: 'mars', orbitSize: 260, period: 1.8808158, info: 'Mars kaldes ogs\u00e5 den r\u00f8de planet p\u00e5 grund af dens r\u00f8dlige farve. Mars har muligvis mindet om jorden for mange millioner \u00e5r siden, og der er fundet spor fra vand og vandl\u00f8b. Man regner med, at Mars bliver den f\u00f8rste fjerne planet, som man vil rejse hen til, og lede efter spor af tidligere liv.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/mars.jpg' },\n    { name: 'jupiter', orbitSize: 360, period: 11.862615, info: 'Jupiter er den st\u00f8rste planet i solsystemet. Den er en gasplanet og har den ber\u00f8mte store r\u00f8de plet, som er en gigantisk storm.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/jupiter.jpg' },\n    { name: 'saturn', orbitSize: 460, period: 29.447498, info: 'Saturn er kendt for sine ikoniske ringe, som best\u00e5r af is, st\u00f8v og klippestykker. Den har ogs\u00e5 82 kendte m\u00e5ner.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/saturnnn.jpeg' },\n    { name: 'uranus', orbitSize: 560, period: 84.016846, info: 'Uranus er den tredjest\u00f8rste planet i solsystemet. Den er unik, fordi den roterer p\u00e5 siden.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/uranus.jpg' },\n    { name: 'neptune', orbitSize: 660, period: 164.79132, info: 'Neptun er den fjerneste planet i solsystemet. Den har de st\u00e6rkeste vinde af alle planeter, med hastigheder op til 2.100 km\/t.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/neptun.jpg' },\n    { name: 'pluto', orbitSize: 760, period: 248.09, info: 'Pluto blev tidligere betragtet som den niende planet, men er nu klassificeret som en dv\u00e6rgplanet. Den best\u00e5r hovedsageligt af is og sten.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/pluto.jpg' }\n  ];\n\n  const modal = document.getElementById(\"info-modal\");\n  const modalTitle = document.getElementById(\"modal-title\");\n  const modalInfo = document.getElementById(\"modal-info\");\n  const modalImage = document.getElementById(\"modal-image\");\n  const closeBtn = document.getElementsByClassName(\"close\")[0];\n\n  function setOrbitSize(planetName, size) {\n    const orbit = document.querySelector(`.${planetName}-orbit`);\n    orbit.style.width = size + 'px';\n    orbit.style.height = size + 'px';\n  }\n\n  function setPlanetPosition(planetName, angle) {\n    const planet = document.querySelector(`.${planetName}`);\n    const orbit = planet.parentElement;\n    const orbitSize = parseFloat(orbit.style.width) \/ 2;\n    const x = Math.cos(angle) * orbitSize;\n    const y = Math.sin(angle) * orbitSize;\n    planet.style.left = `calc(50% + ${x}px - ${planet.offsetWidth \/ 2}px)`;\n    planet.style.top = `calc(50% + ${y}px - ${planet.offsetHeight \/ 2}px)`;\n  }\n\n  function animatePlanets() {\n    const startTime = new Date().getTime();\n    const initialOffset = 15 * 60 * 1000; \/\/ 15 minutes in milliseconds\n\n    function update() {\n      const elapsed = (new Date().getTime() - startTime + initialOffset) \/ 1000; \/\/ seconds\n      planets.forEach(planet => {\n        const angle = (elapsed \/ (planet.period * 60)) * 2 * Math.PI;\n        setPlanetPosition(planet.name, angle);\n      });\n      requestAnimationFrame(update);\n    }\n\n    update();\n  }\n\n  function showModal(planet) {\n    modalTitle.textContent = planet.name.charAt(0).toUpperCase() + planet.name.slice(1);\n    modalInfo.textContent = planet.info;\n    modalImage.src = planet.image;\n    modalImage.alt = `${planet.name} billede`;\n    modal.style.display = \"block\";\n  }\n\n  closeBtn.onclick = function() {\n    modal.style.display = \"none\";\n  }\n\n  window.onclick = function(event) {\n    if (event.target == modal) {\n      modal.style.display = \"none\";\n    }\n  }\n\n  \/\/ Set orbit sizes, add click events, and start animation\n  planets.forEach(planet => {\n    setOrbitSize(planet.name, planet.orbitSize);\n    const planetElement = document.querySelector(`.${planet.name}`);\n    planetElement.addEventListener('click', () => showModal(planet));\n  });\n  animatePlanets();\n\n  \/\/ Add click event for the sun\n  const sun = document.querySelector('.sun');\n  sun.addEventListener('click', () => {\n    showModal({ \n      name: 'Solen', \n      info: 'Solen er vores egen stjerne. Den danner centrum af vores solsystem, fordi den er s\u00e5 kraftig. Den er 1000 gange tungere end alle solsystemets andre elementer tilsammen. Solen best\u00e5r hovedsageligt af to gasarter, nemlig brint og helium. De to gasser br\u00e6nder som et gigantisk atomkraftv\u00e6rk, og selvom Solen er 150 millioner kilometer v\u00e6k, forsyner den os med alt, som vi har brug for.',\n      image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/solen.jpg'\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e98fcbb e-flex e-con-boxed e-con e-parent\" data-id=\"e98fcbb\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f9a47a5 elementor-widget elementor-widget-spacer\" data-id=\"f9a47a5\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Solar System Solen Merkur Venus Jorden Mars Jupiter Saturn Uranus Neptun Pluto &times;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-2091","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=2091"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2091\/revisions"}],"predecessor-version":[{"id":4688,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2091\/revisions\/4688"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=2091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}