{"id":683,"date":"2025-04-25T13:29:01","date_gmt":"2025-04-25T12:29:01","guid":{"rendered":"https:\/\/hydrabooks.dk\/?page_id=683"},"modified":"2025-08-04T19:35:16","modified_gmt":"2025-08-04T18:35:16","slug":"butik","status":"publish","type":"page","link":"https:\/\/hydrabooks.dk\/index.php\/butik\/","title":{"rendered":"Butik"},"content":{"rendered":"\n<style>\nhr.dotted {\n    border-top: 3px dotted #bbb;\n}\n\n<\/style>\n<div id=\"catalog\"><\/div>\n\n\n\n<canvas id=\"confetti-canvas\"\n        style=\"position:fixed; pointer-events:none; top:0; left:0; width:100vw; height:100vh; z-index:999;\"><\/canvas>\n<style>\n    \/* Overlay message styles *\/\n    #overlay-alert {\n        position: fixed;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        background: rgba(0, 0, 0, 0.85);\n        color: #fff;\n        padding: 20px 30px;\n        border-radius: 10px;\n        font-size: 18px;\n        font-family: sans-serif;\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n        z-index: 10000;\n        opacity: 0;\n        transition: opacity 0.4s ease;\n        text-align: center;\n        max-width: 90%;\n        box-sizing: border-box;\n        user-select: text; \/* allow text selection *\/\n        cursor: text; \/* hint it's selectable *\/\n    }\n\n    \/* Button style *\/\n    #copy-btn {\n        background: #ffffff22;\n        color: white;\n        border: 1px solid white;\n        padding: 6px 12px;\n        font-size: 14px;\n        border-radius: 5px;\n        cursor: pointer;\n        margin-top: 10px;\n    }\n\n    #copy-btn:active {\n        transform: scale(0.98);\n    }\n\n    \/* Countdown timer in the bottom right corner *\/\n    #countdown-timer {\n        position: absolute;\n        bottom: 10px;\n        right: 10px;\n        font-size: 12px;\n        background: rgba(0, 0, 0, 0.5);\n        padding: 5px 10px;\n        border-radius: 5px;\n    }\n\n    #book_container {\n        padding: 20px;\n        display: flex;\n        justify-content: center;\n        gap: 10px;\n    }\n\n    .book-card {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        border: 1px solid #ccc;\n        padding: 10px;\n        border-radius: 8px;\n        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);\n        background: rgba(255, 255, 255, 0.5);\n        transition: transform 0.3s ease,\n        background-image 0.5s ease;\n        background-size: 125% auto; \/* Width = 100%, height auto *\/\n        background-position: center top; \/* Center horizontally, stick to top vertically *\/\n        background-repeat: no-repeat;\n        background-color: #fff; \/* Optional: fallback color *\/\n        flex: 1;\n        justify-content: space-between;\n        gap: 10px;\n        width: 100%;\n        \/*transition: background-image 0.5s ease;*\/\n    }\n\n    .tagline {\n        font-size: 14px;\n        font-weight: bold;\n        margin-bottom: 5px;\n        text-align: center;\n        color: #000;\n        -webkit-text-stroke-color: white;\n\n    }\n\n    .important {\n        margin-top: 20px;\n        font-size: 16px;\n        text-align: center;\n    }\n\n    \/* Block interaction with book container *\/\n    #block-interaction {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.5);\n        z-index: 10000; \/* Behind overlay, but in front of book container *\/\n    }\n\n    #overlayContent {\n        background: white;\n        padding: 20px;\n        border-radius: 10px;\n        text-align: center;\n        position: relative;\n        user-select: text;\n    }\n\n    \/* Modern button base style *\/\n    button {\n        background: linear-gradient(135deg, #4a90e2, #357ABD);\n        color: white;\n        border: none;\n        padding: 8px 14px;\n        font-size: 14px;\n        border-radius: 8px;\n        cursor: pointer;\n        font-family: \"Segoe UI\", sans-serif;\n        font-weight: 500;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n    }\n\n    \/* Hover effect *\/\n    button:hover {\n        background: linear-gradient(135deg, #5AA3F2, #4686CC);\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n    }\n\n    \/* Active (click) effect *\/\n    button:active {\n        transform: scale(0.96);\n    }\n\n    \/* Plus \/ minus specific styles *\/\n    button.plus-btn,\n    button.minus-btn {\n        width: 36px;\n        height: 36px;\n        font-size: 18px;\n        font-weight: bold;\n        border-radius: 50%;\n        padding: 0;\n        display: flex;               \/* enable flex layout *\/\n        align-items: center;         \/* vertical center *\/\n        justify-content: center;     \/* horizontal center *\/\n        background: linear-gradient(135deg, #27ae60, #1e8449);\n        line-height: 1;              \/* prevent vertical offset *\/\n    }\n\n    button.plus-btn:hover {\n        background: linear-gradient(135deg, #2ecc71, #27ae60);\n    }\n\n    button.minus-btn {\n        background: linear-gradient(135deg, #e74c3c, #c0392b);\n    }\n\n    button.minus-btn:hover {\n        background: linear-gradient(135deg, #ff5a4e, #e74c3c);\n    }\n    \/* Copy button specific style *\/\n    #copy-btn {\n        background: linear-gradient(135deg, #f39c12, #e67e22);\n        font-size: 14px;\n        border-radius: 6px;\n    }\n\n    #copy-btn:hover {\n        background: linear-gradient(135deg, #f1c40f, #f39c12);\n    }\n    \/* Counter container *\/\n    .counter-container {\n        display: flex;\n        align-items: center;\n        border-radius: 8px;\n        overflow: hidden; \/* keeps the buttons inside the shape *\/\n        box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n        border: 1px solid #ddd;\n    }\n\n    \/* Minus & plus buttons inside counter *\/\n    .counter-container button {\n        width: 36px;\n        height: 36px;\n        font-size: 18px;\n        font-weight: bold;\n        border: none;\n        background: linear-gradient(135deg, #e74c3c, #c0392b);\n        color: white;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: background 0.2s ease;\n    }\n\n    .counter-container button:hover {\n        filter: brightness(1.1);\n    }\n\n    .counter-container button.plus-btn {\n        background: linear-gradient(135deg, #27ae60, #1e8449);\n    }\n\n    \/* Middle number display *\/\n    .counter-display {\n        width: 40px;\n        text-align: center;\n        font-size: 16px;\n        font-weight: bold;\n        background: white;\n        color: #333;\n    }\n\n<\/style>\n\n<script>\n    \/\/ Animation script\n    const canvas = document.getElementById('confetti-canvas');\n    const ctx = canvas.getContext('2d');\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n\n    window.addEventListener('resize', () => {\n        canvas.width = window.innerWidth;\n        canvas.height = window.innerHeight;\n    });\n\n    const particles = [];\n    const isFirstOfMay = Boolean(new Date().getMonth() === 4 && new Date().getDate() === 1);\n    const fallback_url1 = 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/7\/7a\/Anarchy-symbol.svg\/1280px-Anarchy-symbol.svg.png';\n    const revenge = \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/0c\/Revenge_flyer.jpg\";\n    const fallback_url = (isFirstOfMay)\n        ? revenge\n        : fallback_url1;\n\n    function spawnConfetti(x, y, url = fallback_url, amount = 15) {\n        url = url ? url : fallback_url;\n        if ((Math.random(0, 1) * 10 | 0) === 5) {\n            url = revenge;\n        }\n        const img = new Image();\n        img.src = url;\n\n        img.onload = () => {\n            for (let i = 0; i < amount; i++) {\n                particles.push({\n                    x: x * canvas.width,\n                    y: y * canvas.height,\n                    vx: (Math.random() - 0.5) * 5,\n                    vy: (Math.random() - 1.5) * 5,\n                    size: 25 + Math.random() * 10,\n                    rotation: Math.random() * 2 * Math.PI,\n                    rotationSpeed: (Math.random() - 0.5) * 0.2,\n                    life: 175,\n                    img: img\n                });\n            }\n        };\n    }\n\n    function animate() {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        for (let i = particles.length - 1; i >= 0; i--) {\n            const p = particles[i];\n            p.x += p.vx;\n            p.y += p.vy;\n            p.vy += 0.1; \/\/ gravity\n            p.rotation += p.rotationSpeed;\n            p.life--;\n\n            ctx.save();\n            ctx.translate(p.x, p.y);\n            ctx.rotate(p.rotation);\n            if (p.img.complete) {\n                ctx.drawImage(p.img, -p.size \/ 2, -p.size \/ 2, p.size, p.size);\n            }\n            ctx.restore();\n\n            if (p.life <= 0) {\n                particles.splice(i, 1);\n            }\n        }\n\n        requestAnimationFrame(animate);\n    }\n\n    function spawnRainConfetti(x, y, url = fallback_url, amount = 15) {\n        url = url ? url : fallback_url;\n        if ((Math.random(0, 1) * 10 | 0) === 5) {\n            url = revenge;\n        }\n        const img = document.createElement('img');\n        img.src = url;\n        img.style.position = 'fixed';\n        img.style.left = x + 'px';\n        img.style.top = y + 'px';\n        img.style.width = '30px';\n        img.style.height = '50px';\n        img.style.transform = `translate(-50%, -50%) rotate(${Math.random() * 360}deg)`;\n        img.style.pointerEvents = 'none';\n        img.style.zIndex = 1000;\n\n        document.body.appendChild(img);\n\n        const angleX = (Math.random() - 0.5) * 10;\n        let rotate = Math.random() * 360;\n\n        const fall = () => {\n            x += angleX;\n            y += 5;\n            rotate += 5;\n            img.style.left = x + 'px';\n            img.style.top = y + 'px';\n            img.style.transform = `translate(-50%, -50%) rotate(${rotate}deg) perspective(500px) rotateX(${rotate}deg) rotateY(${rotate}deg)`;\n            if (y < window.innerHeight + 50) {\n                requestAnimationFrame(fall);\n            } else {\n                img.remove();\n            }\n        };\n        fall();\n    }\n\n    function rainConfetti(url) {\n        for (let i = 0; i < 100; i++) {\n            setTimeout(() => {\n                const x = Math.random() * window.innerWidth;\n                const y = -20;\n                spawnRainConfetti(x, y, url);\n            }, i * 50);\n        }\n    }\n\n    const confettiUrl = \/*revenge || *\/'https:\/\/raw.githubusercontent.com\/gist\/james2doyle\/23820e813b951c46c8aa\/raw\/0dbb5a8b5222dd2914138a22bbd981a3eb188733\/star.svg'; \/\/ Any .svg\n\n    animate();\n<\/script>\n\n\n<script>\n    const MAX_ORDER = 50;\n    const BOOKS = [\n        {\n            id: \"Anarkismens\",\n            title: 'Anarkismens ABC - Alexander Berkman',\n            picture: \"https:\/\/hydrabooks.dk\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-30-193637.png\",\n            unit_price: 75,\n            total: 0,\n            extra_fee: 0,\n            available: true,\n            confetti: \"https:\/\/hydrabooks.dk\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-30-193637.png\"\n        },\n        {\n            id: \"Farligere\",\n            title: 'Farligere end 1000 opr\u00f8rere: tekster af Lucy Parsons',\n            picture: \"https:\/\/hydrabooks.dk\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-30-195745.png\",\n            unit_price: 50,\n            total: 0,\n            extra_fee: 0,\n            available: true,\n            confetti: \"https:\/\/hydrabooks.dk\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-30-195745.png\"\n        },\n        {\n            id: \"Revolution\",\n            title: 'Revolution er mere end et ord: 23 teser om anarkisme af Gabriel Kuhn',\n            picture: \"https:\/\/hydrabooks.dk\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-30-195817.png\",\n            unit_price: 50,\n            total: 0,\n            extra_fee: 0,\n            available: true,\n            confetti: \"https:\/\/hydrabooks.dk\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-30-195817.png\"\n        }\n    ];\n\n    const ShowOverlayMessage = () => {\n\n        const bookContainer = document.getElementById('book_container');\n        bookContainer.opacity = 0;\n\n        \/\/ Create the block interaction layer\n        const blockLayer = document.createElement(\"div\");\n        blockLayer.id = \"block-interaction\";\n        document.body.appendChild(blockLayer);\n\n        const overlay = document.createElement(\"div\");\n        overlay.id = \"overlay-alert\";\n        document.body.appendChild(overlay);\n\n        \/\/ Set inner HTML with message and button\n        overlay.innerHTML = `\n                Hvis du gerne vil foretage en st\u00f8rre bestilling, s\u00e5 tag fat i os p\u00e5 <b>info@hydrabooks.dk<\/b>\n                <br><br>\n                <button id=\"copy-btn\">\ud83d\udccb Klik for at kopiere email<\/button>\n            `;\n\n        \/\/ Add countdown timer\n        const countdown = document.createElement(\"div\");\n        countdown.id = \"countdown-timer\";\n        overlay.appendChild(countdown);\n\n\n        \/\/ Display overlay with transition\n        setTimeout(() => {\n            overlay.style.opacity = 1;\n            bookContainer.style.opacity = 0.5;\n        }, 10);\n\n        \/\/ Countdown logic\n        let timeRemaining = 3; \/\/ countdown in seconds\n        const countdownInterval = setInterval(() => {\n            if (timeRemaining <= 0) {\n                clearInterval(countdownInterval);\n                overlay.style.opacity = 0;\n                bookContainer.style.opacity = 1;\n                setTimeout(() => {\n                    document.body.removeChild(overlay); \/\/ Remove overlay after fade-out\n                    document.body.removeChild(blockLayer); \/\/ Remove block layer\n\n                }, 400);\n            } else {\n                countdown.innerText = `Closing in: ${timeRemaining}s`;\n                timeRemaining--;\n            }\n        }, 1000);\n\n        \/\/ Handle copy button click\n        document.getElementById(\"copy-btn\").onclick = () => {\n            const text = \"info@hydrabooks.dk\";\n            navigator.clipboard.writeText(text).then(() => {\n                document.getElementById(\"copy-btn\").innerText = \"\u2705 Kopieret!\";\n            });\n        };\n\n        \/\/ Automatically hide the overlay after 5 seconds\n        setTimeout(() => {\n            overlay.style.opacity = 0;\n            setTimeout(() => {\n                document.body.removeChild(overlay); \/\/ Remove overlay after fade-out\n            }, 400);\n        }, 5000);\n    }\n\n    const CalculateDeliveryFee = () => {\n        return 50;\n        const num = BOOKS.reduce((sum, book) => sum + book.total, 0);\n        \/\/ When we have real delivery prices this should be updated\n        const extra_fee = BOOKS.reduce((sum, book) => book.total > 0\n            ? sum + (book.extra_fee * book.total)\n            : sum, 0)\n        if (num <= 0) return 0 + extra_fee;\n        if (num >= 1 && num <= 3) return 45 + extra_fee;\n        return 65 + extra_fee;\n    }\n\n    const UpdateTotalPrice = () => {\n        const books = document.getElementById(\"books_order\");\n        \/\/Create a string to represent a purchase\n        books.value = \"\\n\" + BOOKS\n            .filter((book) => book.total > 0)\n            .map(book => `${book.total} x ${book.title} : ${book.unit_price * book.total}DKK`)\n            .join(\"\\n\");\n\n        const fee = CalculateDeliveryFee();\n\n        const deliveryFee = document.getElementById(\"deliveryfee\");\n        deliveryFee.value = `Leveringsomkostninger: ${fee.toFixed(2)} DKK`;\n\n        const totalPrice = BOOKS.reduce((sum, book) => sum + book.unit_price * book.total, 0);\n\n        const totalPriceField = document.getElementById(\"price-field\")\n        totalPriceField.value = `Pris Total: ${totalPrice + fee} DKK`;\n        const feeField = document.getElementById(\"fee\");\n        feeField.value = `${fee} DKK`;\n        const price_field = document.getElementById(\"price\");\n        price_field.value = totalPriceField.value;\n    };\n\n    const CreatePage = () => {\n        const container = document.createElement(\"div\");\n        container.style.display = \"grid\";\n        container.id = \"book_container\";\n        \/\/If small screen only 1\n        container.style.gridTemplateColumns = `repeat(${window.innerWidth >= 600 ? 3 : 1}, 1fr)`;\n        container.style.gap = \"20px\";\n        container.style.marginTop = \"20px\";\n\n        BOOKS\n            .filter(book => book.available)\n            .forEach(book => {\n                const bookCard = document.createElement(\"div\");\n                bookCard.className = \"book-card\";\n\n                bookCard.onmouseenter = () => {\n                    const allCards = document.querySelectorAll(`.${bookCard.className}`);\n\n                    allCards.forEach(card => {\n                        card.style.transition = \"transform 0.3s ease\";\n                        card.style.transform = card === bookCard ? \"scale(1.1)\" : \"scale(0.98)\";\n                        card.style.opacity = card === bookCard ? \"1\" : \"0.80\";\n                        if (card === bookCard) {\n                            bookCard.style.backgroundImage = `linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(\"${book.picture}\")`;\n                            const title = document.getElementById(`${book.id}.title`);\n                            title.style.background = \"rgba(151,151,151,0.8)\";\n                            const price = document.getElementById(`${book.id}.price`);\n                            price.style.background = \"rgba(151,151,151,0.8)\";\n                            const price_display = document.getElementById(`${book.id}.price_display`);\n                            price_display.style.background = \"rgba(151,151,151,0.8)\";\n                        }\n                    });\n                };\n\n                bookCard.onmouseleave = () => {\n                    const allCards = document.querySelectorAll(`.${bookCard.className}`);\n                    allCards.forEach(card => {\n                        card.style.transition = \"transform 0.3s ease\";\n                        card.style.transform = \"scale(1)\";\n                        card.style.opacity = \"1\";\n                        card.style.backgroundImage = \"\";\n                        const title = document.getElementById(`${book.id}.title`);\n                        title.style.background = \"\";\n                        const price = document.getElementById(`${book.id}.price`);\n                        price.style.background = \"\";\n                        const price_display = document.getElementById(`${book.id}.price_display`);\n                        price_display.style.background = \"\";\n\n                    });\n                };\n\n                const titleLabel = document.createElement(\"span\");\n                titleLabel.className = \"tagline\"\n                titleLabel.id = book.id + \".title\";\n                titleLabel.innerText = book.title;\n                titleLabel.style.height = \"48px\"; \/\/ fixed height for consistent spacing\n                titleLabel.style.display = \"flex\";\n                titleLabel.style.alignItems = \"center\";\n                titleLabel.style.justifyContent = \"center\";\n                titleLabel.style.textAlign = \"center\";\n                titleLabel.style.overflow = \"hidden\";\n                titleLabel.style.textOverflow = \"ellipsis\";\n                titleLabel.style.whiteSpace = \"normal\";\n                titleLabel.style.display = \"-webkit-box\";\n                titleLabel.style.webkitLineClamp = \"2\";\n                titleLabel.style.webkitBoxOrient = \"vertical\";\n                titleLabel.style.width = \"100%\";\n\n                const priceLabel = document.createElement(\"span\");\n                priceLabel.className = \"tagline\"\n                priceLabel.id = book.id + \".price\";\n                priceLabel.innerText = book.unit_price + \" DKK\";\n\n\n                const img = document.createElement(\"img\");\n                img.src = book.picture;\n                img.style.width = \"100px\";\n                img.style.height = \"150px\";\n                img.style.objectFit = \"cover\";\n                \/\/img.style.marginBottom = \"5px\";\n                img.title = book.title;\n\n\n                const priceDisplay = document.createElement(\"span\");\n                priceDisplay.id = book.id + \".price_display\";\n                priceDisplay.className = \"tagline\";\n                priceDisplay.innerText = `Total: ${book.unit_price * book.total} DKK`;\n\n                const counterContainer = document.createElement(\"div\");\n                counterContainer.classList.add(\"counter-container\");\n\n                const minusBtn = document.createElement(\"button\");\n                minusBtn.innerText = \"-\";\n                minusBtn.classList.add(\"minus-btn\");\n                minusBtn.onclick = () => {\n                    if (book.total > 0) {\n                        book.total--;\n                        counterDisplay.innerText = book.total;\n                        priceDisplay.innerText = `Pris: ${book.total * book.unit_price} DKK`;\n                        UpdateTotalPrice();\n                    }\n                };\n\n                const counterDisplay = document.createElement(\"span\");\n                counterDisplay.innerText = \"0\";\n                counterDisplay.classList.add(\"counter-display\");\n\n                const plusBtn = document.createElement(\"button\");\n                plusBtn.innerText = \"+\";\n                plusBtn.classList.add(\"plus-btn\");\n\n                plusBtn.onclick = (event) => {\n                    const TOTAL = BOOKS.reduce((sum, book) => {\n                        return sum + book.total\n                    }, 0);\n                    if (TOTAL < MAX_ORDER) {\n                        book.total++;\n                        counterDisplay.innerText = book.total;\n                        priceDisplay.innerText = `Pris: ${book.total * book.unit_price} DKK`;\n                        UpdateTotalPrice();\n                        const rect = event.target.getBoundingClientRect();\n                        const x = (rect.left + rect.width \/ 2) \/ window.innerWidth;\n                        const y = (rect.top + rect.height \/ 2) \/ window.innerHeight;\n\n                        \/\/ When hitting max orders change confetti for \u24b6\n                        const confetti = (TOTAL !== MAX_ORDER - 1) ? book.confetti : null;\n                        spawnConfetti(x, y, confetti, 15 * (TOTAL + 1));\n                    } else {\n                        ShowOverlayMessage(\"Hvis du gerne vil foretage en st\u00f8rre bestilling, s\u00e5 tag fat i os p\u00e5 info@hydrabooks.dk\");\n                    }\n                };\n\n                bookCard.appendChild(titleLabel);\n                bookCard.appendChild(img);\n                bookCard.appendChild(priceLabel);\n                bookCard.appendChild(priceDisplay);\n\n                counterContainer.appendChild(minusBtn);\n                counterContainer.appendChild(counterDisplay);\n                counterContainer.appendChild(plusBtn);\n                bookCard.appendChild(counterContainer);\n                container.appendChild(bookCard);\n            });\n\n\n        const div = document.createElement(\"div\");\n        div.style.padding = \"10px\";\n\n        const totalPriceField = document.createElement(\"input\");\n        totalPriceField.type = \"text\";\n        totalPriceField.readOnly = true;\n        totalPriceField.className = \"important\";\n        totalPriceField.value = \"Pris Total: 0 DKK\";\n        totalPriceField.id = \"price-field\";\n\n        const deliveryfee = document.createElement(\"input\");\n        deliveryfee.type = \"text\";\n        deliveryfee.readOnly = true;\n        deliveryfee.className = \"important\";\n        deliveryfee.value = \"Leveringsomkostninger: 0 DKK\";\n        deliveryfee.id = \"deliveryfee\";\n\n        div.appendChild(deliveryfee);\n        div.appendChild(totalPriceField);\n\n        const postElement = document.getElementById(\"catalog\");\n        postElement.insertAdjacentElement('afterbegin', div);\n        postElement.insertAdjacentElement('afterbegin', container);\n\n        UpdateTotalPrice();\n\n        \/\/ Confetti animation when doing a submit\n        document.getElementById('form-submit').addEventListener('click', () => {\n            rainConfetti(confettiUrl);\n        });\n    }\n\n    \/\/ Add catalog to page\n    document.addEventListener(\"DOMContentLoaded\", CreatePage);\n\n<\/script>\n\n\n\n<hr class=\"dotted\">\n<br><div role=\"form\" class=\"wpcf7\" id=\"wpcf7-f545-o1\" lang=\"en-US\" dir=\"ltr\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php\/wp-json\/wp\/v2\/pages\/683#wpcf7-f545-o1\" method=\"post\" class=\"wpcf7-form init\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"545\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.5.3\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f545-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap your-fname\"><input type=\"text\" name=\"your-fname\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Fornavn\" \/><\/span> <\/p>\n<p><span class=\"wpcf7-form-control-wrap your-lname\"><input type=\"text\" name=\"your-lname\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Efternavn\" \/><\/span> <\/p>\n<p><span class=\"wpcf7-form-control-wrap your-phonenum\"><input type=\"number\" name=\"your-phonenum\" value=\"\" class=\"wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number\" id=\"phonenum\" min=\"10000000\" max=\"99999999\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Telefon Nummer\" \/><\/span><\/p>\n<p><span class=\"wpcf7-form-control-wrap your-email\"><input type=\"email\" name=\"your-email\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail\" \/><\/span> <\/p>\n<p><span class=\"wpcf7-form-control-wrap adresse\"><input type=\"text\" name=\"adresse\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" id=\"adr\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Adresse\" \/><\/span><\/p>\n<p><span class=\"wpcf7-form-control-wrap city\"><input type=\"text\" name=\"city\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" id=\"city\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"By\" \/><\/span><\/p>\n<p><span class=\"wpcf7-form-control-wrap your-pnum\"><input type=\"number\" name=\"your-pnum\" value=\"\" class=\"wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number\" id=\"postnumber\" min=\"1000\" max=\"9999\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Postnummer\" \/><\/span><\/p>\n<input type=\"hidden\" name=\"books\" value=\"\" class=\"wpcf7-form-control wpcf7-hidden\" id=\"books_order\" \/>\n<input type=\"hidden\" name=\"price\" value=\"\" class=\"wpcf7-form-control wpcf7-hidden\" id=\"price\" \/>\n<input type=\"hidden\" name=\"fee\" value=\"\" class=\"wpcf7-form-control wpcf7-hidden\" id=\"fee\" \/>\n<p><span class=\"wpcf7-form-control-wrap your-message\"><textarea name=\"your-message\" cols=\"40\" rows=\"10\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Besked (valgfri)\"><\/textarea><\/span><\/p>\n<p><label>Captcha: <input type=\"hidden\" name=\"_wpcf7_captcha_challenge_captcha-778\" value=\"1590679244\" \/><img class=\"wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-778\" width=\"84\" height=\"28\" alt=\"captcha\" src=\"https:\/\/hydrabooks.dk\/wp-content\/uploads\/wpcf7_captcha\/1590679244.png\" \/><\/label><\/p>\n<p><span class=\"wpcf7-form-control-wrap captcha-778\"><input type=\"text\" name=\"captcha-778\" value=\"\" size=\"4\" maxlength=\"4\" class=\"wpcf7-form-control wpcf7-captchar\" autocomplete=\"off\" aria-invalid=\"false\" placeholder=\"Indtast de fire tegn fra feltet ovenfor\" \/><\/span><\/p>\n<p><b>N\u00e5r du trykker p\u00e5 'Send bestilling', accepterer du vores <a href=\"http:\/\/hydrabooks.dk\/index.php\/handelsbetingelser\/\">handelsbetingelser<\/a> og <a href=\"http:\/\/hydrabooks.dk\/index.php\/personpolitik\/\">personpolitik<\/a>.<\/b><\/p>\n<p><input type=\"submit\" value=\"Send bestilling\" class=\"wpcf7-form-control has-spinner wpcf7-submit\" id=\"form-submit\" \/><\/p>\n<div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div><\/form><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/hydrabooks.dk\/index.php\/wp-json\/wp\/v2\/pages\/683"}],"collection":[{"href":"https:\/\/hydrabooks.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hydrabooks.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hydrabooks.dk\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/hydrabooks.dk\/index.php\/wp-json\/wp\/v2\/comments?post=683"}],"version-history":[{"count":163,"href":"https:\/\/hydrabooks.dk\/index.php\/wp-json\/wp\/v2\/pages\/683\/revisions"}],"predecessor-version":[{"id":878,"href":"https:\/\/hydrabooks.dk\/index.php\/wp-json\/wp\/v2\/pages\/683\/revisions\/878"}],"wp:attachment":[{"href":"https:\/\/hydrabooks.dk\/index.php\/wp-json\/wp\/v2\/media?parent=683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}