{"id":7,"date":"2025-12-06T10:06:50","date_gmt":"2025-12-06T10:06:50","guid":{"rendered":"https:\/\/mtech4you.com\/tools\/?page_id=7"},"modified":"2025-12-06T10:06:50","modified_gmt":"2025-12-06T10:06:50","slug":"hosting-recommendation","status":"publish","type":"page","link":"https:\/\/mtech4you.com\/tools\/hosting-recommendation\/","title":{"rendered":"Hosting Recommendation"},"content":{"rendered":"    <div id=\"hosting-recommender\" class=\"hr-wrapper\" aria-live=\"polite\">\n        <h2 class=\"hr-title\">Which hosting is best for you?<\/h2>\n\n        <form id=\"hr-form\" class=\"hr-form\" onsubmit=\"return false;\">\n            <div class=\"hr-row\">\n                <label for=\"hr-budget\">Monthly Budget (\u20b9)<\/label>\n                <div style=\"flex:1;display:flex;align-items:center;gap:10px;\">\n                    <input aria-label=\"Monthly budget\" type=\"range\" id=\"hr-budget\" min=\"50\" max=\"50000\" step=\"50\" value=\"500\" \/>\n                    <input aria-label=\"Monthly budget numeric\" id=\"hr-budget-input\" type=\"number\" min=\"50\" max=\"50000\" step=\"50\" value=\"500\" style=\"width:110px;padding:6px;border-radius:6px;border:1px solid #e6eef7;\">\n                <\/div>\n                <div class=\"hr-help\">\u20b9<span id=\"hr-budget-val\">500<\/span> \/ month<\/div>\n            <\/div>\n\n            <div class=\"hr-row\">\n                <label for=\"hr-traffic\">Expected Monthly Visitors<\/label>\n                <select id=\"hr-traffic\">\n                    <option value=\"low\">1k - 10k (Low)<\/option>\n                    <option value=\"medium\" selected>10k - 100k (Medium)<\/option>\n                    <option value=\"high\">100k+ (High)<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"hr-row\">\n                <label for=\"hr-wordpress\">Do you want WordPress-optimized hosting?<\/label>\n                <select id=\"hr-wordpress\">\n                    <option value=\"yes\" selected>Yes \u2014 I use WordPress<\/option>\n                    <option value=\"no\">No \u2014 Other CMS \/ Frameworks<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"hr-row\">\n                <label for=\"hr-skill\">Technical Skill<\/label>\n                <select id=\"hr-skill\">\n                    <option value=\"beginner\" selected>Beginner \u2014 want managed support<\/option>\n                    <option value=\"intermediate\">Intermediate \u2014 can handle some server tasks<\/option>\n                    <option value=\"advance\">Advance \u2014 comfortable with server & CLI<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"hr-row\">\n                <label for=\"hr-storage\">Storage & Backups<\/label>\n                <select id=\"hr-storage\">\n                    <option value=\"small\">Small \u2014 &lt; 10 GB<\/option>\n                    <option value=\"medium\" selected>Medium \u2014 10\u201350 GB<\/option>\n                    <option value=\"large\">Large \u2014 50 GB+<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"hr-row\">\n                <label for=\"hr-hosting-type\">Hosting Type<\/label>\n                <select id=\"hr-hosting-type\">\n                    <option value=\"\">Any<\/option>\n                    <option value=\"shared\">Shared<\/option>\n                    <option value=\"managed_wp\">Managed WordPress<\/option>\n                    <option value=\"cloud\">Cloud<\/option>\n                    <option value=\"vps\">VPS<\/option>\n                    <option value=\"dedicated\">Dedicated<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"hr-row\">\n                <label for=\"hr-managed\">Need Managed Support<\/label>\n                <select id=\"hr-managed\">\n                    <option value=\"yes\" selected>Yes \u2014 I want managed hosting<\/option>\n                    <option value=\"no\">No \u2014 I prefer unmanaged \/ VPS<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"hr-row hr-submit\">\n                <button id=\"hr-calc\" type=\"button\" class=\"hr-btn-primary\">Get Recommendation<\/button>\n                <button id=\"hr-reset\" type=\"button\" class=\"hr-ghost\">Reset<\/button>\n            <\/div>\n        <\/form>\n\n        <div id=\"hr-result\" class=\"hr-result\" hidden>\n            <h3 id=\"hr-result-title\" class=\"hr-result-title\"><\/h3>\n            <p id=\"hr-result-summary\" class=\"hr-result-summary\"><\/p>\n            <ul id=\"hr-recommendations\" class=\"hr-list\" aria-live=\"polite\"><\/ul>\n        <\/div>\n    <\/div>\n\n    <style>\n    .hr-wrapper{max-width:1100px;margin:18px auto;padding:22px;border-radius:12px;border:1px solid #e9eef2;background:#ffffff;font-family:Inter,system-ui,-apple-system,\"Segoe UI\",Roboto,Arial;box-sizing:border-box;}\n    .hr-title{font-size:20px;margin:0 0 14px;color:#123;font-weight:700;}\n    .hr-form .hr-row{display:flex;align-items:center;gap:14px;margin:12px 0;flex-wrap:wrap;}\n    .hr-form label{min-width:220px;font-weight:600;color:#234;flex:0 0 220px;}\n    .hr-form input[type=range]{flex:1;}\n    .hr-help{min-width:160px;text-align:right;color:#666;font-size:14px;flex:0 0 160px;}\n    .hr-submit{justify-content:flex-end;gap:10px;margin-top:16px;width:100%;}\n    \/* Get Recommendation button *\/\n    .hr-btn-primary{background:#0b69c6;color:#ffffff;padding:10px 18px;border-radius:8px;border:1px solid #0b69c6;font-weight:700;cursor:pointer;}\n    .hr-btn-primary:hover{background:#04539f;color:#ffffff;border-color:#04539f;}\n\n    .hr-ghost{background:transparent;border:1px solid #d7e0ea;padding:9px 14px;border-radius:8px;color:#0570d6;cursor:pointer;}\n    .hr-result{margin-top:18px;padding-top:14px;border-top:1px solid #f1f6fb;}\n    .hr-result-title{font-size:18px;margin:0 0 8px;color:#0b3;}\n    .hr-result-summary{color:#444;margin:6px 0 12px;}\n    .hr-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}\n    .hr-item{position:relative;display:flex;align-items:center;gap:14px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fbfdff,#f7fbff);border:1px solid #eef6fc;box-sizing:border-box;}\n    .hr-item-badge{position:absolute;right:12px;top:12px;background:#ff4d4f;color:#fff;padding:6px 8px;border-radius:6px;font-weight:700;font-size:13px;box-shadow:0 6px 12px rgba(0,0,0,0.08);}\n    .hr-item-logo{flex:0 0 110px;height:64px;display:flex;align-items:center;justify-content:center;background:#fff;padding:10px;border-radius:8px;border:1px solid #eef6fb;}\n    .hr-item-logo img{max-width:100%;max-height:54px;object-fit:contain;}\n    .hr-item-body{flex:1;min-width:0;}\n    .hr-item-title{font-weight:700;color:#123;margin:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n    .hr-item-tag{font-size:12px;color:#6b7280;margin-left:8px;}\n    .hr-item-desc{margin:6px 0;color:#4b5563;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}\n    .hr-item-meta{display:flex;align-items:center;gap:12px;justify-content:space-between;}\n    .hr-price{font-weight:700;color:#0b69c6;}\n    \/* Show Result CTA style *\/\n    .hr-cta{display:inline-block;padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:700;border:1px solid #0b69c6;background:#0b69c6;color:#ffffff;}\n    .hr-cta:hover{background:#04539f;color:#ffffff;border-color:#04539f;}\n\n    @media (max-width:1000px){\n        .hr-list{grid-template-columns:repeat(1,1fr);}\n        .hr-form label{min-width:160px;flex:0 0 140px;}\n        .hr-help{display:none;}\n    }\n    @media (max-width:600px){\n        .hr-form label{min-width:100%;flex:0 0 100%;}\n        .hr-form .hr-row{align-items:flex-start;}\n        .hr-item{flex-direction:column;align-items:flex-start;}\n        .hr-item-logo{width:100%;height:auto;padding:10px;}\n        .hr-item-meta{width:100%;display:flex;flex-direction:row-reverse;align-items:center;}\n        .hr-item-title{white-space:normal;}\n    }\n    <\/style>\n\n    <script>\n    (function(){\n        const providers = [{\"id\":\"hostinger\",\"name\":\"Hostinger\",\"tags\":\"Budget,Beginner\",\"desc\":\"Affordable shared hosting.\",\"monthlyBudget\":150,\"priceText\":\"Starting around \\u20b9150 \\\/ mo\",\"url\":\"\",\"logo\":\"\",\"discount\":0,\"supported_storage\":[\"small\",\"medium\"],\"supported_hosting_type\":[\"shared\"],\"supported_skills\":[\"beginner\"],\"best_traffic\":[\"low\",\"medium\"],\"best_wordpress\":true,\"best_managed\":true}] || [];\n        const settings = {\"currency_symbol\":\"\\u20b9\",\"cta_show_text\":\"Choose this host\",\"cta_get_text\":\"Get Recommendation\",\"max_suggestions\":3,\"cta_get_bg\":\"#0b69c6\",\"cta_get_text_color\":\"#ffffff\",\"cta_get_border_color\":\"#0b69c6\",\"cta_get_hover_bg\":\"#04539f\",\"cta_get_hover_text_color\":\"#ffffff\",\"cta_get_hover_border_color\":\"#04539f\",\"cta_show_bg\":\"#0b69c6\",\"cta_show_text_color\":\"#ffffff\",\"cta_show_border_color\":\"#0b69c6\",\"cta_show_hover_bg\":\"#04539f\",\"cta_show_hover_text_color\":\"#ffffff\",\"cta_show_hover_border_color\":\"#04539f\",\"show_discount_badge\":1,\"budget_min\":50,\"budget_max\":50000,\"budget_step\":50,\"budget_default\":500} || {};\n        const maxSuggestions = 3;\n        const el = id => document.getElementById(id);\n        const budget = el('hr-budget'); const budgetInput = el('hr-budget-input'); const budgetVal = el('hr-budget-val');\n        const traffic = el('hr-traffic'); const wordpress = el('hr-wordpress');\n        const skill = el('hr-skill'); const storage = el('hr-storage'); const managed = el('hr-managed');\n        const hostingType = el('hr-hosting-type');\n\n        if (!budget || !budgetVal) return;\n        budget.addEventListener('input', ()=> { budgetVal.textContent = budget.value; if (budgetInput) budgetInput.value = budget.value; });\n        if (budgetInput){\n            budgetInput.addEventListener('input', function(){ let v=parseInt(this.value,10)||50; if(v<50) v=50; if(v> 50000) v=50000; budget.value=v; budgetVal.textContent=v; });\n        }\n\n        function strictMatch(p, filters){\n            if (filters.budget < (p.monthlyBudget || 0)) return false;\n            if (p.supported_storage && p.supported_storage.length && !p.supported_storage.includes(filters.storage)) return false;\n            if (p.supported_skills && p.supported_skills.length && !p.supported_skills.includes(filters.skill)) return false;\n            if (filters.wordpress === 'yes' && (!p.best_wordpress)) return false;\n            if (filters.managed === 'no' && p.best_managed) return false; \/\/ if user wants unmanaged, exclude managed\n            if (filters.hostingType && filters.hostingType !== '' && p.supported_hosting_type && p.supported_hosting_type.length && !p.supported_hosting_type.includes(filters.hostingType)) return false;\n            \/\/ traffic: if user selected a traffic level, require provider to list that level in best_traffic for exact match\n            if (filters.traffic && filters.traffic !== '') {\n                if (p.best_traffic && p.best_traffic.length && !p.best_traffic.includes(filters.traffic)) return false;\n            }\n            return true;\n        }\n\n        function fallbackSort(all, filters){\n            return all.sort(function(a,b){\n                const da = Math.abs((a.provider.monthlyBudget || 0) - filters.budget);\n                const db = Math.abs((b.provider.monthlyBudget || 0) - filters.budget);\n                return da - db;\n            });\n        }\n\n        function generateRecommendation(){\n            const filters = {\n                budget: parseInt(budget.value,10) || 0,\n                traffic: traffic.value,\n                wordpress: wordpress.value,\n                skill: skill.value,\n                storage: storage.value,\n                managed: managed.value,\n                hostingType: hostingType ? hostingType.value : ''\n            };\n            const strict = providers.filter(p => strictMatch(p, filters));\n            if (strict.length) return {matched:true, results: strict.map(p=>({provider:p}))};\n            const all = providers.map(p=>({provider:p}));\n            const sorted = fallbackSort(all, filters);\n            \/\/ limit fallback results to maxSuggestions\n            return {matched:false, results: sorted.slice(0, Math.max(0, maxSuggestions))};\n        }\n\n        function renderResults(){\n            const out = generateRecommendation();\n            const results = out.results;\n            const resultDiv = el('hr-result'); const title = el('hr-result-title'); const summary = el('hr-result-summary'); const recs = el('hr-recommendations');\n            if (!results || !results.length){ title.textContent='No hosts found'; summary.textContent='Try increasing your budget or relaxing filters.'; recs.innerHTML=''; resultDiv.hidden=false; return; }\n\n            title.textContent = out.matched ? 'Exact matches' : 'Recommended: Hosting Providers';\n            summary.textContent = out.matched ? 'We found the perfect hosting providers based on your choice' : 'No exact match found \u2014 here are suggested hosts:';\n\n            recs.innerHTML = '';\n            results.forEach(function(r){\n                const p = r.provider;\n                const li = document.createElement('li'); li.className='hr-item';\n                const badge = (true && p.discount && parseInt(p.discount,10) > 0) ? '<div class=\"hr-item-badge\">-'+parseInt(p.discount,10)+'%<\/div>' : '';\n                const logoHtml = '<div class=\"hr-item-logo\">'+(p.logo?'<img decoding=\"async\" src=\"'+(p.logo)+'\" alt=\"'+(p.name||'')+' logo\">':'<span style=\"color:#9aa6b2\">No logo<\/span>')+'<\/div>';\n                const cta = settings.cta_show_text || 'Choose this host';\n                const href = p.url || '#';\n                const body = '<div class=\"hr-item-body\"><div style=\"display:flex;align-items:center;gap:8px\"><div class=\"hr-item-title\">'+(p.name||'')+'<\/div><div class=\"hr-item-tag\">'+(p.tags||'')+'<\/div><\/div><div class=\"hr-item-desc\">'+(p.desc||'')+'<\/div><div class=\"hr-item-meta\"><div class=\"hr-price\">'+(p.priceText||'')+'<\/div><a class=\"hr-cta\" href=\"'+href+'\" target=\"_blank\" rel=\"noopener noreferrer sponsored\">'+cta+'<\/a><\/div><\/div>';\n                li.innerHTML = badge + logoHtml + body;\n                recs.appendChild(li);\n            });\n            resultDiv.hidden=false;\n            resultDiv.scrollIntoView({behavior:'smooth', block:'center'});\n        }\n\n        const calcBtn = document.getElementById('hr-calc');\n        if (calcBtn) calcBtn.addEventListener('click', renderResults);\n        const resetBtn = document.getElementById('hr-reset');\n        if (resetBtn) resetBtn.addEventListener('click', ()=>{ budget.value=500; if (budgetInput) budgetInput.value=500; budgetVal.textContent=500; traffic.value='medium'; wordpress.value='yes'; skill.value='beginner'; storage.value='medium'; managed.value='yes'; if (hostingType) hostingType.value=''; const rd = document.getElementById('hr-result'); if (rd) rd.hidden=true; });\n        budgetVal.textContent = budget.value;\n    })();\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/mtech4you.com\/tools\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mtech4you.com\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mtech4you.com\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mtech4you.com\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mtech4you.com\/tools\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":1,"href":"https:\/\/mtech4you.com\/tools\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/mtech4you.com\/tools\/wp-json\/wp\/v2\/pages\/7\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/mtech4you.com\/tools\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}