{"id":56,"date":"2026-09-03T19:44:01","date_gmt":"2026-09-03T19:44:01","guid":{"rendered":"https:\/\/itdd.au.dk\/the-house\/the-enterance\/"},"modified":"2026-09-14T19:06:47","modified_gmt":"2026-09-14T19:06:47","slug":"frontdoor","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/the-house\/frontdoor\/","title":{"rendered":"Front Door"},"content":{"rendered":"\n<p class=\"has-text-align-center wp-block-paragraph\">           On the doorstep lies an old key<\/p>\n\n\n\n<pre class=\"wp-block-verse\">                                            The key is here just for you<br>                                                   <br>                                                  <\/pre>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/the-house\/foyer\/\">Use the key to enter the house<\/a><\/div>\n<\/div>\n\n\n<style>\nbody {<br \/>\n  background-image: url('https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/Front-Door-scaled.jpg');<br \/>\n}<br \/>\n<\/style>\n\n\n<!-- Horror Google Fonts -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Special+Elite&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* =======================================================\n   1. GENNEMSIGTIGT OMR\u00c5DE (Blender 100% ind i baggrunden)\n   ======================================================= *\/\n.horror-puzzle-stage {\n    position: relative;\n    width: 100%;\n    max-width: 820px;\n    height: 440px;\n    margin: 15px auto;\n    background: transparent;\n    border: none;\n    box-shadow: none;\n    user-select: none;\n    touch-action: none;\n    font-family: 'Special Elite', monospace;\n    box-sizing: border-box;\n}\n\n.puzzle-whisper {\n    position: absolute;\n    top: 10px;\n    left: 0;\n    width: 100%;\n    text-align: center;\n    color: #cc3333;\n    font-size: 13px;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 8px rgba(255, 0, 0, 0.7);\n    pointer-events: none;\n    z-index: 5;\n    animation: textFlicker 3.2s infinite;\n}\n\n@keyframes textFlicker {\n    0%, 100% { opacity: 0.9; }\n    50% { opacity: 0.35; }\n    52% { opacity: 1; }\n    54% { opacity: 0.25; }\n}\n\n\/* =======================================================\n   2. N\u00d8GLEHULLET & DET SKJULTE KODEORD\n   ======================================================= *\/\n.keyhole-zone {\n    position: absolute;\n    top: 50%;\n    right: 22%;\n    transform: translateY(-50%);\n    width: 90px;\n    height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n}\n\n\/* KODEORDET DER KUN VISES N\u00c5R N\u00d8GLEN ER LIGE OVER *\/\n.revealed-passcode {\n    position: absolute;\n    top: -28px;\n    left: 50%;\n    transform: translateX(-50%) translateY(5px) scale(0.9);\n    font-family: 'Special Elite', 'Courier New', monospace;\n    font-size: 24px;\n    font-weight: bold;\n    color: #ff2222;\n    text-transform: lowercase;\n    letter-spacing: 4px;\n    text-shadow: 0 0 10px #ff0000, 0 0 20px #990000, 0 0 4px #000;\n    white-space: nowrap;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease, transform 0.2s ease;\n    z-index: 20;\n}\n\n\/* N\u00c5R N\u00d8GLEN ER OVER HULLET *\/\n.keyhole-zone.revealing .revealed-passcode {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0) scale(1);\n    animation: ghostlyFlicker 1.5s infinite;\n}\n\n@keyframes ghostlyFlicker {\n    0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px #ff0000); }\n    45% { opacity: 0.7; }\n    50% { opacity: 1; filter: drop-shadow(0 0 14px #ff0000); }\n    75% { opacity: 0.85; }\n}\n\n.escutcheon-plate {\n    width: 70px;\n    height: 95px;\n    background: rgba(12, 2, 2, 0.75);\n    backdrop-filter: blur(4px);\n    border: 2px solid #5a0808;\n    border-radius: 8px;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.9), 0 0 15px rgba(0,0,0,0.8);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    transition: all 0.25s ease;\n}\n\n.keyhole-zone.revealing .escutcheon-plate {\n    border-color: #ff1a1a;\n    box-shadow: 0 0 30px rgba(255, 26, 26, 0.9), inset 0 0 18px rgba(255, 0, 0, 0.6);\n    animation: shudder 0.12s infinite;\n}\n\n@keyframes shudder {\n    0% { transform: translate(1px, 1px); }\n    50% { transform: translate(-1px, -1px); }\n    100% { transform: translate(1px, -1px); }\n}\n\n.keyhole-cutout {\n    position: relative;\n    width: 18px;\n    height: 18px;\n    background: #000;\n    border-radius: 50%;\n    box-shadow: inset 0 0 6px #ff0000, 0 0 8px rgba(255, 0, 0, 0.5);\n}\n.keyhole-cutout::after {\n    content: '';\n    position: absolute;\n    top: 11px;\n    left: 3px;\n    width: 12px;\n    height: 20px;\n    background: #000;\n    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);\n    box-shadow: inset 0 -3px 5px #ff0000;\n}\n\n.keyhole-label {\n    margin-top: 12px;\n    color: #aa3333;\n    font-size: 10px;\n    letter-spacing: 3px;\n    text-shadow: 0 2px 6px #000;\n    transition: color 0.3s;\n}\n.keyhole-zone.revealing .keyhole-label {\n    color: #ff3333;\n    text-shadow: 0 0 10px #ff0000;\n}\n\n\/* =======================================================\n   3. DEN SV\u00c6VENDE, BEV\u00c6GELIGE N\u00d8GLE\n   ======================================================= *\/\n.draggable-key {\n    position: absolute;\n    top: 42%;\n    left: 18%;\n    width: 85px;\n    height: 115px;\n    cursor: grab;\n    z-index: 10;\n    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 12px rgba(180, 0, 0, 0.5));\n}\n\n.draggable-key:active {\n    cursor: grabbing;\n}\n\n.draggable-key svg {\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n}\n<\/style>\n\n<div class=\"horror-puzzle-stage\" id=\"puzzle-stage\">\n    \n    <div class=\"puzzle-whisper\">\n        &#8220;Align the teeth with the dark void&#8230;&#8221;\n    <\/div>\n\n    <!-- N\u00d8GLEHULLET MED DET SV\u00c6VENDE KODEORD -->\n    <div class=\"keyhole-zone\" id=\"keyhole-target\">\n        <!-- DETTE ER KODEORDET DER KUN SES VED HOVER\/HOLD -->\n        <div class=\"revealed-passcode\">old key<\/div>\n\n        <div class=\"escutcheon-plate\">\n            <div class=\"keyhole-cutout\"><\/div>\n        <\/div>\n        <span class=\"keyhole-label\">LOCKED<\/span>\n    <\/div>\n\n    <!-- DEN FRIT BEV\u00c6GELIGE N\u00d8GLE -->\n    <div class=\"draggable-key\" id=\"player-key\">\n        <svg viewBox=\"0 0 100 130\">\n            <defs>\n                <linearGradient id=\"rusted-iron\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                    <stop offset=\"0%\" stop-color=\"#4a2a26\" \/>\n                    <stop offset=\"40%\" stop-color=\"#181313\" \/>\n                    <stop offset=\"75%\" stop-color=\"#5a0a0a\" \/>\n                    <stop offset=\"100%\" stop-color=\"#0a0505\" \/>\n                <\/linearGradient>\n            <\/defs>\n            <path fill=\"url(#rusted-iron)\" stroke=\"#ff2a2a\" stroke-width=\"1.2\" d=\"\n                M 50 12 \n                C 30 12, 16 28, 16 46 \n                C 16 62, 30 74, 44 78 \n                L 44 116 \n                L 62 116 \n                L 62 108 \n                L 54 108 \n                L 54 98 \n                L 64 98 \n                L 64 88 \n                L 54 88 \n                L 54 78 \n                C 68 74, 82 62, 82 46 \n                C 82 28, 68 12, 50 12 Z\n                M 36 40 \n                A 7 7 0 1 1 36 54 \n                A 7 7 0 1 1 36 40 Z\n                M 64 40 \n                A 7 7 0 1 1 64 54 \n                A 7 7 0 1 1 64 40 Z\n                M 50 56 \n                L 45 68 \n                L 55 68 Z\" \/>\n        <\/svg>\n    <\/div>\n\n<\/div>\n\n<script>\n(function() {\n    const stage = document.getElementById('puzzle-stage');\n    const key = document.getElementById('player-key');\n    const target = document.getElementById('keyhole-target');\n\n    let isDragging = false;\n    let isRevealing = false;\n    let offsetX = 0;\n    let offsetY = 0;\n\n    \/\/ Subtil gyser-lyd n\u00e5r koden dukker frem\n    let audioCtx = null;\n    function playWhisperTone() {\n        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n        if (audioCtx.state === 'suspended') audioCtx.resume();\n        const t = audioCtx.currentTime;\n\n        const osc = audioCtx.createOscillator();\n        const gain = audioCtx.createGain();\n        osc.type = 'sine';\n        osc.frequency.setValueAtTime(120, t);\n        osc.frequency.exponentialRampToValueAtTime(75, t + 0.4);\n\n        gain.gain.setValueAtTime(0.001, t);\n        gain.gain.linearRampToValueAtTime(0.18, t + 0.08);\n        gain.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n\n        osc.connect(gain);\n        gain.connect(audioCtx.destination);\n        osc.start(t);\n        osc.stop(t + 0.4);\n    }\n\n    key.addEventListener('pointerdown', (e) => {\n        isDragging = true;\n        key.setPointerCapture(e.pointerId);\n\n        const keyRect = key.getBoundingClientRect();\n        offsetX = e.clientX - keyRect.left;\n        offsetY = e.clientY - keyRect.top;\n    });\n\n    window.addEventListener('pointermove', (e) => {\n        if (!isDragging) return;\n\n        const stageRect = stage.getBoundingClientRect();\n        let newX = e.clientX - stageRect.left - offsetX;\n        let newY = e.clientY - stageRect.top - offsetY;\n\n        newX = Math.max(0, Math.min(newX, stageRect.width - key.offsetWidth));\n        newY = Math.max(0, Math.min(newY, stageRect.height - key.offsetHeight));\n\n        key.style.left = newX + 'px';\n        key.style.top = newY + 'px';\n\n        checkProximity();\n    });\n\n    window.addEventListener('pointerup', () => {\n        isDragging = false;\n    });\n\n    function checkProximity() {\n        const keyRect = key.getBoundingClientRect();\n        const targetRect = target.getBoundingClientRect();\n\n        \/\/ N\u00f8glens spids (den nederste del af n\u00f8glen)\n        const keyTipX = keyRect.left + (keyRect.width \/ 2);\n        const keyTipY = keyRect.top + (keyRect.height * 0.82);\n\n        \/\/ N\u00f8glehullets centrum\n        const targetCenterX = targetRect.left + (targetRect.width \/ 2);\n        const targetCenterY = targetRect.top + (targetRect.height \/ 2);\n\n        const distance = Math.hypot(keyTipX - targetCenterX, keyTipY - targetCenterY);\n\n        \/\/ Radius: Hvis n\u00f8glens spids er inden for 55px fra hullet, vises teksten\n        if (distance < 55) {\n            if (!isRevealing) {\n                isRevealing = true;\n                target.classList.add('revealing');\n                playWhisperTone();\n            }\n        } else {\n            if (isRevealing) {\n                isRevealing = false;\n                target.classList.remove('revealing');\n            }\n        }\n    }\n})();\n<\/script>\n\n\n<style>\nbody {<br \/>\n  background-image: url('https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/Front-Door-scaled.jpg');<br \/>\n}<br \/>\n<\/style>\n<style>\nbody {<br \/>\n  background-image: url('https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/Front-Door-scaled.jpg');<br \/>\n}<br \/>\n<\/style>\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/the-house\/sample-page\/\">Explore the garden.<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<style>\nbody {\n  background-image: url('https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/Front-Door-scaled.jpg');\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>On the doorstep lies an old key The key is here just for you &#8220;Align the teeth with the dark void&#8230;&#8221; old key LOCKED<\/p>\n","protected":false},"author":224,"featured_media":148,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-56","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/users\/224"}],"replies":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":41,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/56\/revisions"}],"predecessor-version":[{"id":641,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/56\/revisions\/641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/media\/148"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/media?parent=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}