{"id":1244,"date":"2026-09-21T17:24:49","date_gmt":"2026-09-21T17:24:49","guid":{"rendered":"https:\/\/itdd.au.dk\/the-house\/?page_id=1244"},"modified":"2026-09-21T18:00:43","modified_gmt":"2026-09-21T18:00:43","slug":"a-friendly-robot","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/the-house\/a-friendly-robot\/","title":{"rendered":"A Friendly robot"},"content":{"rendered":"\n<style>\nbody {\n  background-image: url('https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/IMG_7988-scaled.jpeg');\n}\n<\/style>\n\n\n\n<style>\n\/* =========================================================\n   ROBOT AUDIO CONTROL PANEL\n   ========================================================= *\/\n\n.robot-console {\n    position: relative;\n    width: 100%;\n    max-width: 700px;\n    margin: 0 auto;\n    line-height: 0;\n}\n\n.robot-console img.robot-image {\n    display: block;\n    width: 100%;\n    height: auto;\n}\n\n\n\/* =========================================================\n   COMMON CONTROL SETTINGS\n   ========================================================= *\/\n\n.robot-control {\n    position: absolute;\n    z-index: 10;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    touch-action: manipulation;\n}\n\n\n\/* =========================================================\n   1 \u2014 BLACK INTRUDER BUTTON\n   ========================================================= *\/\n\n.intruder-button {\n    left: 31%;\n    top: 29%;\n    width: 9%;\n    aspect-ratio: 1;\n    border-radius: 50%;\n\n    border: 4px solid #555;\n\n    background:\n        radial-gradient(\n            circle at 35% 30%,\n            #555 0%,\n            #292929 35%,\n            #111 75%\n        );\n\n    box-shadow:\n        0 5px 0 #333,\n        0 7px 10px rgba(0,0,0,.45),\n        inset 0 2px 3px rgba(255,255,255,.15);\n\n    transition:\n        transform .08s ease,\n        box-shadow .08s ease;\n}\n\n.intruder-button:active {\n    transform: translateY(5px);\n\n    box-shadow:\n        0 0 0 #333,\n        0 2px 4px rgba(0,0,0,.4),\n        inset 0 2px 3px rgba(255,255,255,.1);\n}\n\n\n\/* =========================================================\n   2 \u2014 RED FORWARDS BUTTON\n   ========================================================= *\/\n\n.forwards-button {\n    left: 46%;\n    top: 29%;\n    width: 10%;\n    aspect-ratio: 1;\n\n    border: 4px solid #681818;\n    border-radius: 5px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #ef5a52,\n            #a52222\n        );\n\n    box-shadow:\n        0 5px 0 #571414,\n        0 7px 9px rgba(0,0,0,.4),\n        inset 0 2px 2px rgba(255,255,255,.25);\n\n    transition:\n        transform .08s ease,\n        box-shadow .08s ease;\n}\n\n.forwards-button:active {\n    transform: translateY(5px);\n\n    box-shadow:\n        0 0 0 #571414,\n        0 2px 4px rgba(0,0,0,.4);\n}\n\n\n\/* =========================================================\n   3 \u2014 ROTARY DIAL \/ MUST BE DESTROYED\n   ========================================================= *\/\n\n.destroy-dial {\n    left: 62%;\n    top: 27%;\n    width: 12%;\n    aspect-ratio: 1;\n\n    border-radius: 50%;\n\n    background:\n        repeating-conic-gradient(\n            from -8deg,\n            #222 0deg 3deg,\n            transparent 3deg 18deg\n        ),\n        #888;\n\n    border: 4px solid #555;\n\n    box-shadow:\n        0 5px 0 #444,\n        0 7px 10px rgba(0,0,0,.4);\n\n    transition: transform .1s linear;\n}\n\n.destroy-dial::after {\n    content: \"\";\n\n    position: absolute;\n\n    width: 68%;\n    height: 68%;\n\n    left: 16%;\n    top: 16%;\n\n    border-radius: 50%;\n\n    background:\n        linear-gradient(\n            145deg,\n            #777,\n            #333\n        );\n\n    border: 2px solid #222;\n\n    box-shadow:\n        inset 0 2px 3px rgba(255,255,255,.15);\n}\n\n\n\/* Dial marker *\/\n\n.destroy-dial .dial-marker {\n    position: absolute;\n\n    width: 5%;\n    height: 28%;\n\n    left: 47.5%;\n    top: 7%;\n\n    background: #111;\n\n    border-radius: 3px;\n\n    z-index: 3;\n\n    transform-origin: 50% 130%;\n}\n\n\n\/* =========================================================\n   4 \u2014 TOGGLE SWITCH \/ COUNTERMAND\n   ========================================================= *\/\n\n.countermand-switch {\n    left: 40%;\n    top: 47%;\n\n    width: 5%;\n    height: 11%;\n\n    background: #292929;\n\n    border: 3px solid #444;\n    border-radius: 4px;\n\n    box-shadow:\n        0 4px 7px rgba(0,0,0,.45);\n}\n\n\n\/* switch handle *\/\n\n.countermand-switch .handle {\n    position: absolute;\n\n    width: 55%;\n    height: 50%;\n\n    left: 22.5%;\n    top: 7%;\n\n    border-radius: 4px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #eee,\n            #777\n        );\n\n    border: 2px solid #444;\n\n    box-shadow:\n        0 2px 3px rgba(0,0,0,.4);\n\n    transition: top .15s ease;\n}\n\n.countermand-switch.on .handle {\n    top: 43%;\n}\n\n\n\/* =========================================================\n   5 \u2014 GUARDED SELF DESTRUCT BUTTON\n   ========================================================= *\/\n\n.self-destruct {\n    left: 67%;\n    top: 48%;\n\n    width: 12%;\n    aspect-ratio: 1;\n\n    border-radius: 50%;\n\n    border: 5px solid #571313;\n\n    background:\n        radial-gradient(\n            circle at 35% 30%,\n            #f05b55,\n            #a52222 65%,\n            #711717\n        );\n\n    box-shadow:\n        0 5px 0 #4b1111,\n        0 8px 10px rgba(0,0,0,.45);\n\n    transition:\n        transform .08s ease,\n        box-shadow .08s ease;\n}\n\n\n\/* Button pressed *\/\n\n.self-destruct:active {\n    transform: translateY(5px);\n\n    box-shadow:\n        0 0 0 #4b1111,\n        0 2px 4px rgba(0,0,0,.4);\n}\n\n\n\/* =========================================================\n   SAFETY COVER\n   ========================================================= *\/\n\n.self-destruct-cover {\n    position: absolute;\n\n    left: 65%;\n    top: 43%;\n\n    width: 17%;\n    height: 11%;\n\n    z-index: 20;\n\n    border-radius: 5px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #e34a43,\n            #921b1b\n        );\n\n    border: 4px solid #651616;\n\n    box-shadow:\n        0 5px 0 #4b1111,\n        0 7px 8px rgba(0,0,0,.4);\n\n    cursor: pointer;\n\n    transform-origin: top center;\n\n    transition:\n        transform .2s ease;\n}\n\n\n\/* Open safety cover *\/\n\n.self-destruct-cover.open {\n    transform:\n        rotateX(-105deg)\n        translateY(-4px);\n\n    opacity: .9;\n}\n\n\n\/* =========================================================\n   SMALL INDICATOR LIGHTS\n   ========================================================= *\/\n\n.indicator {\n    position: absolute;\n\n    width: 2.5%;\n    aspect-ratio: 1;\n\n    border-radius: 50%;\n\n    border: 2px solid #444;\n\n    box-shadow:\n        inset 0 1px 2px rgba(255,255,255,.4),\n        0 2px 4px rgba(0,0,0,.3);\n\n    z-index: 8;\n}\n\n\n\/* Red light *\/\n\n.red-light {\n    left: 34%;\n    top: 40%;\n\n    background: #e33;\n}\n\n\n\/* Orange light *\/\n\n.orange-light {\n    left: 50%;\n    top: 40%;\n\n    background: #ff8a24;\n}\n\n\n\/* Green light *\/\n\n.green-light {\n    left: 67%;\n    top: 40%;\n\n    background: #35c957;\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 500px) {\n\n    .intruder-button {\n        border-width: 2px;\n        box-shadow: 0 3px 0 #333;\n    }\n\n    .forwards-button {\n        border-width: 2px;\n        box-shadow: 0 3px 0 #571414;\n    }\n\n    .destroy-dial {\n        border-width: 2px;\n        box-shadow: 0 3px 0 #444;\n    }\n\n    .countermand-switch {\n        border-width: 2px;\n    }\n\n    .self-destruct {\n        border-width: 3px;\n        box-shadow: 0 3px 0 #4b1111;\n    }\n\n    .self-destruct-cover {\n        border-width: 2px;\n        box-shadow: 0 3px 0 #4b1111;\n    }\n}\n<\/style>\n\n\n<!-- =========================================================\n     ROBOT\n     ========================================================= -->\n\n<div class=\"robot-console\">\n\n    <https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/IMG_7988-scaled.jpeg>\n    <img decoding=\"async\"\n        class=\"robot-image\"\n        src=\"YOUR-ROBOT-IMAGE-URL-HERE\"\n        alt=\"Robot\"\n    >\n\n\n    <!-- =====================================================\n         INDICATOR LIGHTS\n         ===================================================== -->\n\n    <div class=\"indicator red-light\"><\/div>\n    <div class=\"indicator orange-light\"><\/div>\n    <div class=\"indicator green-light\"><\/div>\n\n\n    <!-- =====================================================\n         1. INTRUDER\n         ===================================================== -->\n\n    <button\n        class=\"robot-control intruder-button\"\n        aria-label=\"Intruder\">\n    <\/button>\n\n\n    <!-- =====================================================\n         2. FORWARDS\n         ===================================================== -->\n\n    <button\n        class=\"robot-control forwards-button\"\n        aria-label=\"Forwards\">\n    <\/button>\n\n\n    <!-- =====================================================\n         3. ROTARY DIAL\n         ===================================================== -->\n\n    <div\n        class=\"robot-control destroy-dial\"\n        id=\"destroyDial\"\n        aria-label=\"Control dial\">\n\n        <div class=\"dial-marker\"><\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         4. COUNTERMAND SWITCH\n         ===================================================== -->\n\n    <div\n        class=\"robot-control countermand-switch\"\n        id=\"countermandSwitch\"\n        aria-label=\"Toggle switch\">\n\n        <div class=\"handle\"><\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         5. SELF DESTRUCT\n         ===================================================== -->\n\n    <!-- Safety cover -->\n\n    <div\n        class=\"self-destruct-cover\"\n        id=\"selfDestructCover\">\n    <\/div>\n\n\n    <!-- Button underneath -->\n\n    <button\n        class=\"robot-control self-destruct\"\n        id=\"selfDestructButton\"\n        aria-label=\"Self destruct\">\n    <\/button>\n\n<\/div>\n\n\n<script>\n\n\/* =========================================================\n   AUDIO FILES\n   ========================================================= *\/\n\nconst robotSounds = {\n\n    intruder:\n        \"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/intruder.wav\",\n\n    forwards:\n        \"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/forwards-forwards.wav\",\n\n    destroy:\n        \"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/must-be-destoryed.wav\",\n\n    countermand:\n        \"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/cant-be-countermanded.mp3\",\n\n    selfdestruct:\n        \"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/selfdestruct.mp3\"\n\n};\n\n\n\/* =========================================================\n   AUDIO FUNCTION\n   ========================================================= *\/\n\nfunction playRobotSound(soundName) {\n\n    const audio = new Audio(robotSounds[soundName]);\n\n    audio.volume = 1;\n\n    audio.play().catch(function(error) {\n\n        console.log(\"Audio playback error:\", error);\n\n    });\n\n}\n\n\n\/* =========================================================\n   INTRUDER BUTTON\n   ========================================================= *\/\n\ndocument\n    .querySelector(\".intruder-button\")\n    .addEventListener(\"click\", function() {\n\n        playRobotSound(\"intruder\");\n\n    });\n\n\n\/* =========================================================\n   FORWARDS BUTTON\n   ========================================================= *\/\n\ndocument\n    .querySelector(\".forwards-button\")\n    .addEventListener(\"click\", function() {\n\n        playRobotSound(\"forwards\");\n\n    });\n\n\n\/* =========================================================\n   ROTARY DIAL\n   ========================================================= *\/\n\nconst dial =\n    document.getElementById(\"destroyDial\");\n\nlet dialRotation = 0;\nlet draggingDial = false;\nlet previousY = 0;\n\ndial.addEventListener(\n    \"pointerdown\",\n    function(event) {\n\n        draggingDial = true;\n\n        previousY = event.clientY;\n\n        dial.setPointerCapture(event.pointerId);\n\n    }\n);\n\n\ndial.addEventListener(\n    \"pointermove\",\n    function(event) {\n\n        if (!draggingDial) return;\n\n        const movement =\n            previousY - event.clientY;\n\n        dialRotation += movement * 2;\n\n        dialRotation =\n            Math.max(\n                -135,\n                Math.min(\n                    135,\n                    dialRotation\n                )\n            );\n\n        dial.style.transform =\n            \"rotate(\" +\n            dialRotation +\n            \"deg)\";\n\n        previousY = event.clientY;\n\n    }\n);\n\n\ndial.addEventListener(\n    \"pointerup\",\n    function() {\n\n        draggingDial = false;\n\n        \/* Play sound when dial is released *\/\n\n        playRobotSound(\"destroy\");\n\n    }\n);\n\n\n\/* =========================================================\n   COUNTERMAND SWITCH\n   ========================================================= *\/\n\nconst countermandSwitch =\n    document.getElementById(\n        \"countermandSwitch\"\n    );\n\nlet switchOn = false;\n\ncountermandSwitch.addEventListener(\n    \"click\",\n    function() {\n\n        switchOn = !switchOn;\n\n        countermandSwitch.classList.toggle(\n            \"on\",\n            switchOn\n        );\n\n        playRobotSound(\"countermand\");\n\n    }\n);\n\n\n\/* =========================================================\n   SELF-DESTRUCT SAFETY COVER\n   ========================================================= *\/\n\nconst cover =\n    document.getElementById(\n        \"selfDestructCover\"\n    );\n\nconst selfDestruct =\n    document.getElementById(\n        \"selfDestructButton\"\n    );\n\nlet coverOpen = false;\n\n\n\/* Open \/ close cover *\/\n\ncover.addEventListener(\n    \"click\",\n    function() {\n\n        coverOpen = !coverOpen;\n\n        cover.classList.toggle(\n            \"open\",\n            coverOpen\n        );\n\n    }\n);\n\n\n\/* Self-destruct button *\/\n\nselfDestruct.addEventListener(\n    \"click\",\n    function() {\n\n        if (!coverOpen) {\n\n            return;\n\n        }\n\n        playRobotSound(\"selfdestruct\");\n\n    }\n);\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":224,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1244","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/1244","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=1244"}],"version-history":[{"count":4,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/1244\/revisions"}],"predecessor-version":[{"id":1260,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/1244\/revisions\/1260"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/media?parent=1244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}