{"id":1702,"date":"2024-07-02T16:20:41","date_gmt":"2024-07-02T16:20:41","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=1702"},"modified":"2024-09-02T10:01:37","modified_gmt":"2024-09-02T10:01:37","slug":"time","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/time\/","title":{"rendered":"time"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1702\" class=\"elementor elementor-1702\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7cab710 e-con-full e-flex e-con e-parent\" data-id=\"7cab710\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3bed2a elementor-widget elementor-widget-html\" data-id=\"d3bed2a\" 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 class=\"custom-clock-widget\" style=\"height: auto; overflow: hidden;\">\n    <style>\n        .custom-clock-widget {\n            display: block;\n            margin: 0 auto;\n            padding: 20px 0;\n            position: relative;\n            z-index: 1;\n        }\n        .custom-clock-widget .clock-container {\n            width: 550px;\n            height: 550px;\n            margin: 0 auto;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n        .custom-clock-widget .clock {\n            width: 400px;\n            height: 400px;\n            background-size: cover;\n            background-position: center;\n            position: relative;\n            cursor: pointer;\n        }\n        .custom-clock-widget .hand {\n            position: absolute;\n            bottom: 50%;\n            left: 50%;\n            transform-origin: 50% 100%;\n        }\n        .custom-clock-widget .hour {\n            width: 80px;\n            height: 120px;\n            background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/hourx.png');\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center bottom;\n            filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.5));\n        }\n        .custom-clock-widget .minute {\n            width: 100px;\n            height: 150px;\n            background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/minutex.png');\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center bottom;\n            filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.5));\n        }\n        .custom-clock-widget .second {\n            width: 2px;\n            height: 36%;\n            background: red;\n            box-shadow: 2px 3px 3px rgba(0,0,0,0.3);\n        }\n        .custom-clock-widget .center-circle {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 20px;\n            height: 20px;\n            background-color: black;\n            border-radius: 50%;\n            box-shadow: 2px 3px 5px rgba(0,0,0,0.5);\n        }\n        footer {\n            position: relative;\n            z-index: 2;\n        }\n    <\/style>\n\n    <div class=\"clock-container\">\n        <div class=\"clock\">\n            <div class=\"hand hour\"><\/div>\n            <div class=\"hand minute\"><\/div>\n            <div class=\"hand second\"><\/div>\n            <div class=\"center-circle\"><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            const tickSoundSrc = \"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/tick.mp3\";\n            const quarterSoundSrc = \"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/quarter.mp3\";\n            let audioEnabled = false;\n\n            const backgrounds = [\n                'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/vintage-skive1.jpg',\n                'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/vintage-skive2.jpg',\n                'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/vintage-skive3.jpg',\n                'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/vintage-skive4.jpg'\n            ];\n            let currentBackgroundIndex = 0;\n\n            const clock = document.querySelector('.custom-clock-widget .clock');\n            clock.addEventListener('click', function() {\n                audioEnabled = true;\n            });\n\n            function playSound(src) {\n                if (audioEnabled) {\n                    const audio = new Audio(src);\n                    audio.play().catch(e => console.error(\"Fejl ved afspilning af lyd:\", e));\n                }\n            }\n\n            function changeBackground() {\n                clock.style.backgroundImage = `url('${backgrounds[currentBackgroundIndex]}')`;\n                currentBackgroundIndex = (currentBackgroundIndex + 1) % backgrounds.length;\n            }\n\n            function setTime() {\n                const now = new Date();\n                const seconds = now.getSeconds();\n                const minutes = now.getMinutes();\n                const hours = now.getHours() % 12;\n\n                const secondHand = document.querySelector('.custom-clock-widget .second');\n                const minuteHand = document.querySelector('.custom-clock-widget .minute');\n                const hourHand = document.querySelector('.custom-clock-widget .hour');\n\n                const secondDegrees = (seconds \/ 60) * 360;\n                const minuteDegrees = ((minutes + seconds \/ 60) \/ 60) * 360;\n                const hourDegrees = ((hours + minutes \/ 60) \/ 12) * 360;\n\n                secondHand.style.transform = `translateX(-50%) rotate(${secondDegrees}deg)`;\n                minuteHand.style.transform = `translate(-50%, 0) rotate(${minuteDegrees}deg)`;\n                hourHand.style.transform = `translate(-50%, 0) rotate(${hourDegrees}deg)`;\n\n                if (audioEnabled) {\n                    playSound(tickSoundSrc);\n                    \n                    if (minutes % 15 === 0 && seconds === 0) {\n                        playSound(quarterSoundSrc);\n                    }\n                }\n            }\n\n            setInterval(setTime, 1000);\n            setInterval(changeBackground, 250);\n            setTime();\n            changeBackground();\n        })();\n    <\/script>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","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-1702","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1702","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=1702"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1702\/revisions"}],"predecessor-version":[{"id":4580,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1702\/revisions\/4580"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}