{"id":30755,"date":"2025-04-23T17:03:16","date_gmt":"2025-04-23T17:03:16","guid":{"rendered":"https:\/\/anderskisling.dk\/?page_id=30755"},"modified":"2025-06-09T15:48:39","modified_gmt":"2025-06-09T15:48:39","slug":"solsys","status":"publish","type":"page","link":"https:\/\/anderskisling.dk\/index.php\/solsys\/","title":{"rendered":"solsystemet"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"30755\" class=\"elementor elementor-30755\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2ce59e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"c2ce59e\" data-element_type=\"container\" data-e-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-71e0db3 elementor-widget elementor-widget-spacer\" data-id=\"71e0db3\" data-element_type=\"widget\" data-e-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-0c0dfc3 elementor-widget elementor-widget-heading\" data-id=\"0c0dfc3\" data-element_type=\"widget\" data-e-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.1<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6cc8c05 elementor-widget elementor-widget-text-editor\" data-id=\"6cc8c05\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Klik p\u00e5 en planet for at l\u00e6se om den.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a7f28b5 elementor-widget elementor-widget-spacer\" data-id=\"a7f28b5\" data-element_type=\"widget\" data-e-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-93d8874 elementor-widget elementor-widget-html\" data-id=\"93d8874\" data-element_type=\"widget\" data-e-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 jorden-orbit\"><div class=\"planet jorden\"><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  \n  <!-- Asteroidb\u00e6lte-overlay -->\n<div id=\"asteroid-belt\" class=\"overlay\" style=\"opacity: 0;\"><\/div>\n  \n  <!-- Kalender tilf\u00f8jes her -->\n<div id=\"calendar\" class=\"calendar-font\">\n<div class=\"calendar-content\">\n<div class=\"calendar-row\">\n<div class=\"calendar-label\">Dage:<\/div>\n<div id=\"calendar-day\" class=\"calendar-value\">0<\/div>\n<\/div>\n<div class=\"calendar-row\">\n<div class=\"calendar-label\">Uger:<\/div>\n<div id=\"calendar-week\" class=\"calendar-value\">1<\/div>\n<\/div>\n <div class=\"calendar-row\">\n <div class=\"calendar-label\">M\u00e5neder:<\/div>\n <div id=\"calendar-month\" class=\"calendar-value\">1<\/div>\n<\/div>\n <div class=\"calendar-row\">\n <div class=\"calendar-label\">\u00c5r:<\/div>\n <div id=\"calendar-year\" class=\"calendar-value\">0<\/div>\n<\/div>\n <\/div>\n<div class=\"progress-container\">\n <div id=\"year-progress\" class=\"progress-bar\"><\/div>\n <\/div>\n    \n    <!-- Kontrolknapper -->\n    <div class=\"control-buttons\">\n      <button id=\"asteroid-button\" class=\"control-button\">Vis asteroideb\u00e6lter<\/button>\n      <button id=\"names-button\" class=\"control-button\">Vis navne<\/button>\n    <\/div>\n  <\/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    overflow: visible; \n    user-select: none; \n    -webkit-user-select: none; \/* Safari*\/\n    -moz-user-select: none; \/* Firefox*\/\n    -ms-user-select: none; \/* IE\/Edge*\/\n  }\n  .sun {\n    width: 40px;\n    height: 40px;\n    background: radial-gradient(circle, #fff9c4, #ffeb3b, #ff9800);\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 #ffba00b3;\n    z-index: 10;\n    pointer-events: auto; \n  }\n  .orbit {\n    border: 1px solid #ffffff33;\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    pointer-events: auto; \n  }\n  .celestial-name {\n    position: absolute;\n    color: white;\n    font-size: 13px;\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  .celestial-name.visible {\n    opacity: 1;\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 #8c8c8cb3; }\n  .venus { background-color: #e6e6e6; width: 10px; height: 10px; box-shadow: 0 0 10px 2px #e6e6e6b3; }\n  .jorden { background: radial-gradient(circle, #56c596, #2b9348); width: 14px; height: 14px; box-shadow: 0 0 12px 2px #2434ffb3; }\n  .mars { background-color: #ff4d4d; width: 9px; height: 9px; box-shadow: 0 0 9px 2px #ff4d4db3; }\n  .jupiter {\n    border-radius: 50%;\n    background: linear-gradient(to bottom, #d6b370, #f0ebe2, #e19d6e, #d6b370, #f7f3e8, #d6b370);\n    position: relative;\n    box-shadow: inset 0 0 6px #00000022;\n    width: 19px; height: 19px; box-shadow: 0 0 5px 3px #FFB9265E;\n  }\n  .saturn { \n    background: linear-gradient(27deg, #cba145, #d8c59a, #cba145, #d8c59a, #cba145, #d8c59a, #cba145, #d8c59a);\n    width: 18px; \n    height: 18px; \n    position: relative;\n    box-shadow: 0 0 18px 2px #fbb666b3;\n  }\n  .saturn::before {\n    content: '';\n    position: absolute;\n    width: 34px;\n    height: 3px;\n    border-radius: 99%;\n    background-color: #FFEBC5A8;\n    top: 53%;\n    left: 50%;\n    box-shadow: 0 2px 4px #00000033;\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 #66ffffb3; }\n  .neptun { background-color: #3399ff; width: 14px; height: 14px; box-shadow: 0 0 14px 2px #3399ffb3; }\n  .pluto { background-color: #bf8040; width: 6px; height: 6px; box-shadow: 0 0 6px 2px #bf8040b3; }\n  \n  \/* Z-index for orbits *\/\n  .merkur-orbit { z-index: 9; }\n  .venus-orbit { z-index: 8; }\n  .jorden-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  \/* Overlay for asteroidb\u00e6lter *\/\n.overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 20;\n  opacity: 0;\n  display: block;\n  transition: opacity 0.3s ease-in-out;\n}\n \n#asteroid-belt {\n  background-image: url('http:\/\/anderskisling.dk\/wp-content\/uploads\/2025\/05\/ast-33.png');\n  opacity: 1.0;\n  background-size: contain;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n  \/* Calendar styles *\/\n  #calendar {\n    position: absolute;\n    top: 0px;\n    right: -240px;\n    width: 200px;\n    padding: 15px;\n    background-color: #00000000; \n    border-radius: 10px;\n    border: 1px solid #ffffff4D; \n    color: white;\n    font-family: var(--calendar-font, 'Poppins', sans-serif);\n    z-index: 100;\n    box-shadow: 0 0 20px #00000080;\n    user-select: none; \n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n  }\n  \n  .calendar-content {\n    margin-bottom: 10px;\n  }\n  \n  .calendar-row {\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 5px;\n    font-size: 16px;\n  }\n  \n  .calendar-label {\n    color: #ffffffb3;\n  }\n  \n  .calendar-value {\n    font-weight: bold;\n    color: #fff;\n  }\n  \n  .progress-container {\n    background-color: #ffffff1a;\n    border-radius: 5px;\n    height: 6px;\n    overflow: hidden;\n    margin-top: 5px;\n    margin-bottom: 15px;\n  }\n  \n  .progress-bar {\n    height: 100%;\n    background: linear-gradient(to right, #ffeb3b, #ff9800);\n    border-radius: 5px;\n    width: 0%;\n    transition: width 0.5s ease;\n  }\n  \n  \/* Control buttons *\/\n  .control-buttons {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n  \n  .control-button {\n    padding: 8px 15px;\n    background-color: #ffffff1a;\n    border: 1px solid #ffffff4d;\n    border-radius: 5px;\n    color: white;\n    cursor: pointer;\n    transition: all 0.3s ease;\n  }\n  \n  .control-button:hover {\n    background-color: #ffffff33;\n  }\n  \n  .control-button.active {\n    background-color: #ffba0066;\n    border-color: #ffba00b3;\n  }\n\n  \/* Modal styles *\/\n\n\n  \/* Modal styles *\/\n  .modal {\n    display: none;\n    position: absolute;\n    z-index: 1000;\n    left: 100px;\n    top: 0px;\n    width: 350px;\n    overflow: auto;\n    background-color: transparent;\n    border-radius: 5px;\n    user-select: none; \n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n  }\n\n  .modal-content {\n    background-color: #000000;\n    margin: 0 auto;\n    padding: 20px;\n    border: 1px solid #ffffff4D;\n    border-radius: 8px;\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 \n  let currentOpenPlanet = null;\n  \n  const planets = [\n    { name: 'merkur', orbitSize: 80, period: 0.2408467, info: 'Merkur er den mindste planet i Solsystemet og den t\u00e6tteste p\u00e5 Solen. Den har ingen m\u00e5ner og n\u00e6sten ingen atmosf\u00e6re, hvilket betyder, at temperaturen svinger voldsomt mellem stegende hede og isnende kulde. Overfladen er d\u00e6kket af kratere og ligner M\u00e5nens. Et d\u00f8gn varer 59 jorddage, mens et \u00e5r kun varer 88 dage. Merkur har en stor jernkerne, som g\u00f8r den meget t\u00e6t. Den er sv\u00e6r at se fra Jorden, fordi den altid st\u00e5r t\u00e6t p\u00e5 Solen p\u00e5 himlen.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/merkur.jpg' },\n    \n    { name: 'venus', orbitSize: 140, period: 0.61519726, info: 'Venus er den n\u00e6stinderste planet i Solsystemet og n\u00e6sten lige s\u00e5 stor som Jorden. Den er omgivet af en tyk atmosf\u00e6re af kuldioxid og skyer af svovlsyre, som skaber en ekstrem drivhuseffekt. Temperaturen p\u00e5 overfladen kan n\u00e5 over 460 grader. Venus roterer langsomt og bagl\u00e6ns, s\u00e5 et d\u00f8gn varer l\u00e6ngere end et \u00e5r. Overfladen er d\u00e6kket af bjerge, sletter og vulkaner. Venus er det klareste objekt p\u00e5 nattehimlen efter M\u00e5nen og kaldes ofte Morgen- eller Aftenstjernen.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/venus.jpg' },\n    \n    { name: 'jorden', orbitSize: 200, period: 1, info: 'Jorden er den tredje planet fra Solen og den eneste kendte med liv. Den har en atmosf\u00e6re, som beskytter og giver os ilt til at tr\u00e6kke vejret. Jordens overflade best\u00e5r af kontinenter og oceaner, som d\u00e6kker st\u00f8rstedelen af planeten. Klimaet varierer fra varme troper til kolde polaromr\u00e5der. Jorden har \u00e9n m\u00e5ne, som p\u00e5virker tidevand og stabiliserer planetens rotation. Et d\u00f8gn varer 24 timer, og et \u00e5r varer 365 dage. Livets mangfoldighed g\u00f8r Jorden unik i Solsystemet.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/jorden.jpg' },\n    \n    { name: 'mars', orbitSize: 260, period: 1.8808158, info: 'Mars er den fjerde planet fra Solen og kaldes ofte den r\u00f8de planet p\u00e5 grund af jernoxid i overfladen. Den har tynd atmosf\u00e6re og kolde temperaturer, men viser tegn p\u00e5 tidligere vandl\u00f8b. Mars har to sm\u00e5 m\u00e5ner: Phobos og Deimos. Overfladen byder p\u00e5 store vulkaner, dybe kl\u00f8fter og st\u00f8vstorme, som kan vare i ugevis. Et d\u00f8gn p\u00e5 Mars ligner Jordens, men et \u00e5r varer 687 dage. Forskere mener, der meget muligt har v\u00e6ret liv p\u00e5 Mars i fortiden.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/mars.jpg' },\n    \n    { name: 'jupiter', orbitSize: 360, period: 11.862615, info: 'Jupiter er Solsystemets st\u00f8rste planet og en gasgigant, prim\u00e6rt best\u00e5ende af hydrogen og helium. Den har mindst 79 m\u00e5ner, hvor de fire er store m\u00e5ner. M\u00e5nen Europa skjuler et hav under sin overflade af is. Jupiter har et kraftigt magnetfelt og et ber\u00f8mt stort r\u00f8dt \u00f8je, en k\u00e6mpe storm, der har raset i hundreder af \u00e5r. Den udsender mere varme, end den modtager fra Solen, og indfanger mange meteorer, som ellers kunne ramme Jorden.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/jupiter.jpg' },\n\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 274 kendte m\u00e5ner, hvilket g\u00f8r dens m\u00e5nesystem til et af de mest omfattende i Solsystemet. Saturn er en gasgigant, hovedsageligt lavet af hydrogen og helium. Atmosf\u00e6ren er pr\u00e6get af kraftige vinde p\u00e5 over 1.800 km\/t, der skaber store storme. Planetens lave densitet betyder, at den ville flyde, hvis der fandtes et hav stort nok til at rumme den.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/saturnnn.jpeg' },\n    \n    { name: 'uranus', orbitSize: 560, period: 84.016846, info: 'Uranus er den syvende planet fra Solen og kendt for sin bl\u00e5gr\u00f8nne farve, som skyldes metan i dens atmosf\u00e6re. Den er en isgigant med en kerne af is, sten og gas. Uranus roterer p\u00e5 sin side med en akselhelning p\u00e5 n\u00e6sten 98 grader, hvilket giver ekstreme \u00e5rstider, der varer i over 20 \u00e5r hver. Planetens atmosf\u00e6re best\u00e5r hovedsageligt af hydrogen, helium og metan. Uranus har 27 kendte m\u00e5ner og et svagt ringsystem.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/uranus.jpg' },\n    \n    { name: 'neptun', orbitSize: 660, period: 164.79132, info: 'Neptun er den ottende og yderste planet i Solsystemet. Den er en isgigant med en atmosf\u00e6re, der hovedsageligt best\u00e5r af hydrogen, helium og metan, hvilket giver den en smuk bl\u00e5 farve i mange nuancer. Neptun har kraftige vinde, der kan n\u00e5 hastigheder p\u00e5 over 2.000 km\/t, og store storme. Planeten har 14 kendte m\u00e5ner og et svagt ringsystem. Neptun tager 165 jord\u00e5r om at fuldf\u00f8re et kredsl\u00f8b om Solen.', image: 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/neptun.jpg' },\n    \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 blev f\u00f8rst opdaget i 1930 og befinder sig i Kuiperb\u00e6ltet, et omr\u00e5de med mange islegemer og andre dv\u00e6rgplaneter. L\u00e6nge blev Pluto regnet for en gold klode, men nye fotos har vist, at den er en aktiv verden med forandringer. Pluto har en excentrisk bane, som g\u00f8r, at afstanden til Solen varierer meget under dens 248 \u00e5r lange oml\u00f8b.', 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  const asteroidBeltBtn = document.getElementById(\"asteroid-button\");\n  const namesBtn = document.getElementById(\"names-button\");\n  const asteroidBelt = document.getElementById(\"asteroid-belt\");\n\n  const calendarYear = document.getElementById(\"calendar-year\");\n  const calendarMonth = document.getElementById(\"calendar-month\");\n  const calendarWeek = document.getElementById(\"calendar-week\");\n  const calendarDay = document.getElementById(\"calendar-day\");\n  const yearProgressBar = document.getElementById(\"year-progress\");\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   \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 setCalendarFont(fontFamily) {\n    document.documentElement.style.setProperty('--calendar-font', fontFamily);\n  }\n\n  function updateCalendar(elapsedSeconds) {\n    const earthYear = 60; \n    const daysPerSecond = 365 \/ earthYear;\n    const totalDays = elapsedSeconds * daysPerSecond;\n    const years = Math.floor(totalDays \/ 365);\n    const daysInCurrentYear = Math.floor(totalDays % 365);\n    const months = Math.floor(daysInCurrentYear \/ 30) + 1; \n    const weeks = Math.floor(daysInCurrentYear \/ 7) + 1; \n    const days = daysInCurrentYear;\n    \n   \n    calendarYear.textContent = years;\n    calendarMonth.textContent = months;\n    calendarWeek.textContent = weeks;\n    calendarDay.textContent = days;\n    \n    \n    const yearProgress = (daysInCurrentYear \/ 365) * 100;\n    yearProgressBar.style.width = yearProgress + '%';\n  }\n\n  function animatePlanets() {\n    const startTime = new Date().getTime();\n    const initialOffset = 15 * 60 * 1000; \n\n    function update() {\n      const elapsed = (new Date().getTime() - startTime + initialOffset) \/ 1000; \/\/ sekunder\n      \n      planets.forEach(planet => {\n        const angle = (elapsed \/ (planet.period * 60)) * 2 * Math.PI;\n        setPlanetPosition(planet.name, angle);\n      });\n      \n      updateCalendar(elapsed);\n      \n      requestAnimationFrame(update);\n    }\n\n    update();\n  }\n\n\n\n\n\n\n\n\/\/ Erstat din showModal funktion med denne:\n\n  function showModal(planet) {\n    \n    if (currentOpenPlanet === planet.name) {\n      \n      modal.style.display = \"none\";\n      currentOpenPlanet = null;\n      return;\n    }\n    \n   \n    const solarSystem = document.getElementById(\"solar-system\");\n    const solarRect = solarSystem.getBoundingClientRect();\n    const scrollY = window.scrollY || window.pageYOffset;\n    \n    \n    modal.style.position = \"absolute\";\n    modal.style.top = \"0px\";\n    modal.style.left = (solarRect.width + -1040) + \"px\"; \n    \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    currentOpenPlanet = planet.name;\n  }\n\n\n\n\n\n\n  \/\/ Erstat din asteroide button event listener med dette:\nasteroidBeltBtn.addEventListener('click', function() {\n  const currentOpacity = window.getComputedStyle(asteroidBelt).opacity;\n  \n  if (currentOpacity == \"0\" || currentOpacity == \"\") {\n    \/\/ Fade in\n    asteroidBelt.style.opacity = \"1\";\n    this.textContent = \"Skjul asteroideb\u00e6lter\";\n  } else {\n    \/\/ Fade out  \n    asteroidBelt.style.opacity = \"0\";\n    this.textContent = \"Vis asteroideb\u00e6lter\";\n  }\n  \n  this.classList.toggle('active');\n});\n  \n  namesBtn.addEventListener('click', function() {\n    const celestialNames = document.querySelectorAll('.celestial-name');\n    const isVisible = celestialNames[0].classList.contains('visible');\n    \n    celestialNames.forEach(name => {\n      if (isVisible) {\n        name.classList.remove('visible');\n      } else {\n        name.classList.add('visible');\n      }\n    });\n    \n    this.classList.toggle('active');\n    this.textContent = isVisible ? \"Vis navne\" : \"Skjul navne\";\n  });\n\n  closeBtn.onclick = function() {\n    modal.style.display = \"none\";\n    currentOpenPlanet = null;\n  }\n\n  window.onclick = function(event) {\n    if (event.target == modal) {\n      modal.style.display = \"none\";\n      currentOpenPlanet = null;\n    }\n  }\n  \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\/\/ Tilf\u00f8j denne linje helt til sidst i dit script (efter animatePlanets()):\nasteroidBelt.style.opacity = \"0\";\n\n  const sun = document.querySelector('.sun');\n  sun.addEventListener('click', () => {\n    if (currentOpenPlanet === 'Solen') {\n      modal.style.display = \"none\";\n      currentOpenPlanet = null;\n      return;\n    }\n    \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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Solsystemet v.1 Klik p\u00e5 en planet for at l\u00e6se om den. Solen Merkur Venus Jorden Mars Jupiter Saturn Uranus Neptun Pluto Dage: 0 Uger: 1 M\u00e5neder: 1 \u00c5r: 0 Vis asteroideb\u00e6lter Vis navne &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-30755","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/30755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=30755"}],"version-history":[{"count":845,"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/30755\/revisions"}],"predecessor-version":[{"id":32825,"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/30755\/revisions\/32825"}],"wp:attachment":[{"href":"https:\/\/anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=30755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}