{"id":3242,"date":"2026-07-22T11:12:49","date_gmt":"2026-07-22T11:12:49","guid":{"rendered":"https:\/\/radisolar.org\/?page_id=3242"},"modified":"2026-07-22T11:18:53","modified_gmt":"2026-07-22T11:18:53","slug":"calculadora-mirlo","status":"publish","type":"page","link":"https:\/\/radisolar.org\/es\/calculadora-mirlo\/","title":{"rendered":"Calculadora Mirlo"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_block_section preset--module--divi-section--default\">\n<div class=\"et_pb_row_0 et_pb_row et_block_row preset--module--divi-row--default\">\n<div class=\"et_pb_column_0 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><!DOCTYPE html>\n<html lang=\"ca\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Calculadora Mirlo - Hetzner<\/title>\n    <style>\n        \/* Forcem el color negre a tots els elements de text per evitar her\u00e8ncies CSS *\/\n        .container,\n        .container h1,\n        .container h2,\n        .container p,\n        .container label,\n        .container .subtitle,\n        .container .note,\n        .container .result-item,\n        .container .result-item strong,\n        .container .total,\n        .container input[type=\"number\"] {\n            color: #000 !important;\n        }\n\n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            width: 90%;\n            max-width: 1600px;\n            margin: 30px auto;\n            padding: 20px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            min-height: 100vh;\n            box-sizing: border-box;\n        }\n        .container {\n            background: white;\n            padding: 50px 60px;\n            border-radius: 15px;\n            box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n            width: 100%;\n            box-sizing: border-box;\n        }\n        h1 {\n            margin-bottom: 10px;\n            font-size: 2em;\n        }\n        .subtitle {\n            margin-bottom: 40px;\n            font-size: 15px;\n        }\n        .input-group {\n            margin-bottom: 30px;\n        }\n        label {\n            display: block;\n            margin-bottom: 10px;\n            font-weight: 600;\n            font-size: 16px;\n        }\n        input[type=\"number\"] {\n            width: 100%;\n            padding: 14px;\n            border: 2px solid #ddd;\n            border-radius: 8px;\n            font-size: 16px;\n            transition: border-color 0.3s;\n            box-sizing: border-box;\n        }\n        input[type=\"number\"]:focus {\n            outline: none;\n            border-color: #667eea;\n        }\n        .radio-group {\n            display: flex;\n            gap: 30px;\n            margin-top: 10px;\n            margin-bottom: 15px;\n        }\n        .radio-group label {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-weight: normal;\n            cursor: pointer;\n            margin-bottom: 0;\n        }\n        button {\n            width: 100%;\n            padding: 18px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: #fff !important;\n            border: none;\n            border-radius: 8px;\n            font-size: 18px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: transform 0.2s;\n        }\n        button:hover {\n            transform: translateY(-2px);\n        }\n        .result {\n            margin-top: 40px;\n            padding: 30px;\n            background: #f8f9fa;\n            border-radius: 10px;\n            border-left: 5px solid #667eea;\n            display: none;\n        }\n        .result h2 {\n            margin-top: 0;\n            margin-bottom: 20px;\n        }\n        .result-item {\n            margin: 15px 0;\n            padding: 15px;\n            background: white;\n            border-radius: 5px;\n            font-size: 16px;\n        }\n        .result-item strong {\n            font-weight: 700;\n        }\n        .total {\n            font-size: 26px;\n            font-weight: bold;\n            margin-top: 25px;\n            padding: 20px;\n            background: #e7e9fd;\n            border-radius: 8px;\n            text-align: center;\n        }\n        .note {\n            font-size: 13px;\n            margin-top: 12px;\n            font-style: italic;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <h1>\ud83c\udfb5 Calculadora Mirlo - Hetzner<\/h1>\n        <p class=\"subtitle\">Calcula el servidor i cost aproximat per autoallotjar la teva inst\u00e0ncia de Mirlo<\/p>\n        \n        <div class=\"input-group\">\n            <label>1. Capacitat d'emmagatzematge:<\/label>\n            <div class=\"radio-group\">\n                <label>\n                    <input type=\"radio\" name=\"storageType\" value=\"releases\" checked>\n                    N\u00famero de llan\u00e7aments\n                <\/label>\n                <label>\n                    <input type=\"radio\" name=\"storageType\" value=\"gb\">\n                    GB d'espai\n                <\/label>\n            <\/div>\n            <input type=\"number\" id=\"storageValue\" placeholder=\"Introdueix el valor\" min=\"0\" step=\"1\">\n            <p class=\"note\" id=\"storageNote\">*Assumim ~0.7 GB per llan\u00e7ament (FLAC + portada)<\/p>\n        <\/div>\n\n        <div class=\"input-group\">\n            <label>2. Escoltes m\u00e0ximes al mes:<\/label>\n            <input type=\"number\" id=\"listens\" placeholder=\"Ex: 10000\" min=\"0\" step=\"1000\">\n        <\/div>\n\n        <button onclick=\"calculate()\">Calcular servidor i preu<\/button>\n\n        <div class=\"result\" id=\"result\">\n            <h2>\ud83d\udcca Resultat<\/h2>\n            <div id=\"resultContent\"><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        document.querySelectorAll('input[name=\"storageType\"]').forEach(radio => {\n            radio.addEventListener('change', function() {\n                const note = document.getElementById('storageNote');\n                if (this.value === 'releases') {\n                    note.textContent = '*Assumim ~0.7 GB per llan\u00e7ament (FLAC + portada)';\n                    document.getElementById('storageValue').placeholder = 'Ex: 30';\n                } else {\n                    note.textContent = '*Introdueix directament els GB necessaris';\n                    document.getElementById('storageValue').placeholder = 'Ex: 50';\n                }\n            });\n        });\n\n        function calculate() {\n            const storageType = document.querySelector('input[name=\"storageType\"]:checked').value;\n            const storageValue = parseFloat(document.getElementById('storageValue').value);\n            const listens = parseFloat(document.getElementById('listens').value);\n\n            if (!storageValue || !listens) {\n                alert('Si us plau, omple tots els camps');\n                return;\n            }\n\n            \/\/ Calcular GB d'emmagatzematge\n            let storageGB = storageType === 'releases' ? storageValue * 0.7 : storageValue;\n\n            \/\/ Calcular ample de banda mensual (GB)\n            \/\/ Assumim 50% MP3 (5MB\/can\u00e7\u00f3) i 50% FLAC (30MB\/can\u00e7\u00f3)\n            const bandwidthGB = listens * 0.0175; \/\/ ~17.5 MB per escolta (mitjana)\n\n            \/\/ Determinar servidor necessari\n            let vps, vpsPrice, backupPrice, storagePrice;\n\n            if (listens <= 10000 && storageGB <= 50) {\n                vps = 'Hetzner CAX11 (ARM) - 2 vCPU, 4 GB RAM, 40 GB SSD';\n                vpsPrice = 3.50;\n                backupPrice = 0.70;\n            } else if (listens <= 50000 && storageGB <= 200) {\n                vps = 'Hetzner CAX21 (ARM) - 4 vCPU, 8 GB RAM, 80 GB SSD';\n                vpsPrice = 6.50;\n                backupPrice = 1.30;\n            } else if (listens <= 100000 && storageGB <= 500) {\n                vps = 'Hetzner CX32 - 4 vCPU, 8 GB RAM, 80 GB SSD';\n                vpsPrice = 8.50;\n                backupPrice = 1.70;\n            } else {\n                vps = 'Hetzner CX42 - 8 vCPU, 16 GB RAM, 160 GB SSD';\n                vpsPrice = 16.50;\n                backupPrice = 3.30;\n            }\n\n            \/\/ Emmagatzematge d'objectes (Cloudflare R2)\n            storagePrice = storageGB * 0.014; \/\/ 0.014\u20ac\/GB\/mes\n\n            const totalMonthly = vpsPrice + backupPrice + storagePrice;\n\n            \/\/ Mostrar resultat\n            const resultDiv = document.getElementById('result');\n            const resultContent = document.getElementById('resultContent');\n            \n            resultContent.innerHTML = `\n                <div class=\"result-item\">\n                    <strong>Emmagatzematge necessari:<\/strong> ${storageGB.toFixed(1)} GB\n                <\/div>\n                <div class=\"result-item\">\n                    <strong>Ample de banda estimat:<\/strong> ${bandwidthGB.toFixed(1)} GB\/mes\n                <\/div>\n                <div class=\"result-item\">\n                    <strong>Servidor recomanat:<\/strong><br>${vps}\n                <\/div>\n                <div class=\"result-item\">\n                    <strong>Cost VPS + Backups:<\/strong> ${(vpsPrice + backupPrice).toFixed(2)} \u20ac\/mes\n                <\/div>\n                <div class=\"result-item\">\n                    <strong>Emmagatzematge (Cloudflare R2):<\/strong> ${storagePrice.toFixed(2)} \u20ac\/mes\n                <\/div>\n                <div class=\"total\">\n                    \ud83d\udcb0 Total aproximat: ${totalMonthly.toFixed(2)} \u20ac\/mes\n                <\/div>\n                <p class=\"note\">\n                    *Preus aproximats de Hetzner (juliol 2026). Cloudflare R2 sense cost de sortida.<br>\n                    *No inclou domini ni correu transaccional.\n                <\/p>\n            `;\n            \n            resultDiv.style.display = 'block';\n            resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n        }\n    <\/script>\n<\/body>\n<\/html><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3242","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/radisolar.org\/es\/wp-json\/wp\/v2\/pages\/3242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/radisolar.org\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/radisolar.org\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/radisolar.org\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/radisolar.org\/es\/wp-json\/wp\/v2\/comments?post=3242"}],"version-history":[{"count":4,"href":"https:\/\/radisolar.org\/es\/wp-json\/wp\/v2\/pages\/3242\/revisions"}],"predecessor-version":[{"id":3256,"href":"https:\/\/radisolar.org\/es\/wp-json\/wp\/v2\/pages\/3242\/revisions\/3256"}],"wp:attachment":[{"href":"https:\/\/radisolar.org\/es\/wp-json\/wp\/v2\/media?parent=3242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}