{"id":2603,"date":"2024-07-06T14:54:32","date_gmt":"2024-07-06T14:54:32","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=2603"},"modified":"2025-05-19T11:52:17","modified_gmt":"2025-05-19T11:52:17","slug":"solsysbck","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/solsysbck\/","title":{"rendered":"Solsys B"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2603\" class=\"elementor elementor-2603\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f36f5a e-flex e-con-boxed e-con e-parent\" data-id=\"1f36f5a\" 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-3d8b938c elementor-widget elementor-widget-spacer\" data-id=\"3d8b938c\" 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-6c2ac0e7 elementor-widget elementor-widget-heading\" data-id=\"6c2ac0e7\" 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\">SOlSYSTEMET v.02<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1859d8c6 elementor-widget elementor-widget-spacer\" data-id=\"1859d8c6\" 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-1f6167f4 e-flex e-con-boxed e-con e-parent\" data-id=\"1f6167f4\" 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-322a4c04 elementor-widget elementor-widget-html\" data-id=\"322a4c04\" 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 merkur-orbit\"><div class=\"planet merkur\"><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 neptun-orbit\"><div class=\"planet neptun\"><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, 186, 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  }\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  .merkur { background-color: #8c8c8c; width: 8px; height: 8px; box-shadow: 0 0 8px 2px rgba(140, 140, 140, 0.7); }\n  .venus { background-color: #e6e6e6; width: 10px; height: 10px; box-shadow: 0 0 10px 2px rgba(230, 230, 230, 0.7); }\n  .earth { background-color: #2434ff; width: 12px; height: 12px; box-shadow: 0 0 12px 2px rgba(36, 52, 255, 0.7); }\n  .mars { background-color: #ff4d4d; width: 9px; height: 9px; box-shadow: 0 0 9px 2px rgba(255, 77, 77, 0.7); }\n  .jupiter { background-color: #ff8400; width: 21px; height: 21px; box-shadow: 0 0 21px 2px rgba(250, 173, 51, 0.7); }\n  .saturn { \n    background-color: #996633; \n    width: 18px; \n    height: 18px; \n    position: relative;\n    box-shadow: 0 0 18px 2px rgba(251, 182, 102, 0.7);\n  }\n  .saturn::before {\n    content: '';\n    position: absolute;\n    width: 28px;\n    height: 2px;\n    background-color: #663333;\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; box-shadow: 0 0 14px 2px rgba(102, 255, 255, 0.7); }\n  .neptun { background-color: #3399ff; width: 14px; height: 14px; box-shadow: 0 0 14px 2px rgba(51, 153, 255, 0.7); }\n  .pluto { background-color: #bf8040; width: 6px; height: 6px; box-shadow: 0 0 6px 2px rgba(191, 128, 64, 0.7); }\n  \n  \/* Z-index for orbits *\/\n  .merkur-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  .neptun-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: 'merkur', 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 solsystemets st\u00f8rste planet, og den ligger en plads l\u00e6ngere v\u00e6k fra Solen end Mars. Jupiter er en best\u00e5r af gas. Derfor har den ikke en fast overflade, og man kan ikke lande p\u00e5 Jupiter. Til geng\u00e6ld har Jupiter mange m\u00e5ner, hvoraf de fire er store m\u00e5ner. M\u00e5nen Europa skjuler et hav under sin overflade af is.', 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: 'neptun', 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-39aa618e e-flex e-con-boxed e-con e-parent\" data-id=\"39aa618e\" 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-4079802d elementor-widget elementor-widget-spacer\" data-id=\"4079802d\" 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>SOlSYSTEMET v.02 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-2603","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2603","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=2603"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2603\/revisions"}],"predecessor-version":[{"id":6359,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2603\/revisions\/6359"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=2603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}