{"id":23413,"date":"2025-04-28T09:16:44","date_gmt":"2025-04-28T09:16:44","guid":{"rendered":"https:\/\/rocky.consulting\/?page_id=23413"},"modified":"2025-09-09T09:00:33","modified_gmt":"2025-09-09T09:00:33","slug":"collaboration-calculator-2","status":"publish","type":"page","link":"https:\/\/rocky.consulting\/de\/collaboration-calculator-2\/","title":{"rendered":"Collaboration Calculator"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\n\n\n\n \n Collaboration Calculator V0.09 - Rocky vs Microsoft vs Google vs Apple<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta name=\"description\" content=\"Dynamic SaaS Pricing Calculator - Compare Rocky Consulting vs Microsoft 365 vs Google Workspace vs Apple Business Essentials. Save 20%+ easily.\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n\t\t\/* Global Reset *\/\n\t\t* {\n\t\t margin: 0;\n\t\t padding: 0;\n\t\t box-sizing: border-box;\n\t\t}\n\t\tbody {\n\t\t font-family: 'Inter', sans-serif;\n\t\t background: #f7f9fc;\n\t\t color: #333;\n\t\t display: flex;\n\t\t min-height: 100vh;\n\t\t overflow-x: hidden;\n\t\t transition: background 0.4s, color 0.4s;\n\t\t}\n\t\t\n body.admin-bar .sidebar + .menu-btn-sidebar {\n top: 150px!important;\n }\n body.admin-bar .sidebar nav {\n margin-top: 195px!important;\n overflow-y:auto;\n }\n .sidebar nav {\n overflow-y:auto;\n }\n\n\t\t\t\/* Scoped CSS fix for Elementor integration *\/\n\t\t\n\t\t\t#calculator-wrapper * {\n\t\t\t margin: 0;\n\t\t\t padding: 0;\n\t\t\t box-sizing: border-box;\n\t\t\t}\n\t\t\n\t\t\t#calculator-wrapper {\n\t\t\t display: flex;\n\t\t\t flex-direction: row;\n\t\t\t align-items: flex-start;\n\t\t\t width: 100%;\n\t\t\t}\n\t\t\n\t\t\t#calculator-wrapper .sidebar {\n\t\t\t width: 240px;\n\t\t\t position: relative;\n\t\t\t top: auto;\n\t\t\t left: auto;\n\t\t\t height: auto;\n\t\t\t}\n\t\t\n\t\t\t#calculator-wrapper .main {\n\t\t\t flex: 1;\n\t\t\t margin-left: 0;\n\t\t\t padding: 50px 60px;\n\t\t\t width: auto;\n\t\t\t}\n\t\t\n\t\t\tbody {\n\t\t\t display: block !important;\n\t\t\t overflow-x: hidden;\n\t\t\t}\n\t\t\t@media (max-width: 768px) {\n\t\t\t #calculator-wrapper {\n\t\t\t\ttransform: scale(0.6); \/* scales content to 60% size *\/\n\t\t\t\ttransform-origin: top left; \/* scale from top-left corner *\/\n\t\t\t\twidth: 166%; \/* compensates scale to maintain viewport coverage *\/\n\t\t\t }\n\t\t\t .sidebar + .menu-btn-sidebar , body.admin-bar .sidebar + .menu-btn-sidebar{\n top: 10px!important;\n }\n .sidebar nav ,body.admin-bar .sidebar nav{\n margin-top: 45px!important;\n }\n .main{\n padding-top: 70px !important;\n padding-bottom: 70px !important;\n }\n\t\t\t}\n <\/style>\n<\/head>\n<!-- END: Head Section -->\n\n<body>\n<!-- START: Sidebar -->\n<aside class=\"sidebar\" style=\"\n width: 240px;\n background: #ffffff;\n border-right: 1px solid #e0e0e0;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px 0;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n box-shadow: 2px 0 8px rgba(0,0,0,0.05);\n z-index: 100;\n \">\n <nav style=\"margin-top: 165px; width: 100%;\">\n\t<a href=\"#\" class=\"active\" style=\"\n\t display: flex;\n\t align-items: center;\n\t justify-content: flex-start;\n\t padding: 15px 25px;\n\t text-decoration: none;\n\t color: #555;\n\t font-weight: 600;\n\t font-size: 1rem;\n\t border-left: 4px solid #007BFF;\n\t background: #e6f2ff;\n\t\"><i style=\"margin-right: 10px;\">\ud83c\udfe0<\/i> Home<\/a>\n\n\t<a href=\"#calculator\" style=\"\n\t display: flex;\n\t align-items: center;\n\t padding: 15px 25px;\n\t text-decoration: none;\n\t color: #555;\n\t font-weight: 600;\n\t border-left: 4px solid transparent;\n\t transition: all 0.3s ease;\n\t\">\u2699\ufe0f Adjust Your Requirements<\/a>\n\n\t<a href=\"#pricing-plans-comparison\" style=\"\n\t display: flex;\n\t align-items: center;\n\t padding: 15px 25px;\n\t text-decoration: none;\n\t color: #555;\n\t font-weight: 600;\n\t border-left: 4px solid transparent;\n\t transition: all 0.3s ease;\n\t\">\ud83d\udcb3 Pricing Plans Comparison<\/a>\n\n\t<a href=\"#rocky-consulting-savings-overview\" style=\"\n\t display: flex;\n\t align-items: center;\n\t padding: 15px 25px;\n\t text-decoration: none;\n\t color: #555;\n\t font-weight: 600;\n\t border-left: 4px solid transparent;\n\t transition: all 0.3s ease;\n\t\">\ud83d\udcb0 Rocky Consulting Savings Overview<\/a>\n\n\t<a href=\"#recommended-plans\" style=\"\n\t display: flex;\n\t align-items: center;\n\t padding: 15px 25px;\n\t text-decoration: none;\n\t color: #555;\n\t font-weight: 600;\n\t border-left: 4px solid transparent;\n\t transition: all 0.3s ease;\n\t\">\u2b50 Recommended Plans<\/a>\n\n\t<a href=\"#visual-savings-chart\" style=\"\n\t display: flex;\n\t align-items: center;\n\t padding: 15px 25px;\n\t text-decoration: none;\n\t color: #555;\n\t font-weight: 600;\n\t border-left: 4px solid transparent;\n\t transition: all 0.3s ease;\n\t\">\ud83d\udcca Visual Savings Chart<\/a>\n\n\t<a href=\"#detailed-feature-comparison\" style=\"\n\t display: flex;\n\t align-items: center;\n\t padding: 15px 25px;\n\t text-decoration: none;\n\t color: #555;\n\t font-weight: 600;\n\t border-left: 4px solid transparent;\n\t transition: all 0.3s ease;\n\t\">\ud83d\udccb Detailed Feature Comparison<\/a>\n\n\t<a href=\"#settings\" style=\"\n\t display: flex;\n\t align-items: center;\n\t padding: 15px 25px;\n\t text-decoration: none;\n\t color: #555;\n\t font-weight: 600;\n\t border-left: 4px solid transparent;\n\t transition: all 0.3s ease;\n\t\">\u2699\ufe0f Settings<\/a>\n\n <\/nav>\n<\/aside>\n<!-- END: Sidebar -->\n\n<button class=\"menu-btn-sidebar\" onclick=\"toggleSidebar()\" style=\"\n position: fixed;\n top: 118px;\n left: 20px;\n background-color: #007BFF;\n color: white;\n border: none;\n padding: 10px 14px;\n border-radius: 8px;\n font-size: 16px;\n z-index: 2000;\n cursor: pointer;\n \">\n \u2630 Menu\n<\/button>\n\n<!-- START: Main Content Container -->\n<div class=\"main\" style=\"margin-left: 240px; flex: 1; padding: 50px 60px;\">\n<!-- Header and further sections will be inserted here -->\n<!-- START: Header -->\n<div class=\"header\" style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; padding: 0 10px;\">\n <div class=\"header-title\" style=\"font-size: 1.6rem; font-weight: 600; color: #00274d; text-align: right;\">Pricing Comparison Dashboard<\/div>\n<\/div>\n<!-- END: Header -->\n\n<!-- START: Adjust Your Requirements Section -->\n<section id=\"calculator\" class=\"filters\" style=\"margin-bottom: 60px;\">\n <div style=\"background: #ffffff; padding: 40px 50px; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.06);\">\n\t\t<h2 style=\"font-size: 1.6rem; color: #004080; margin-bottom: 30px;\">Adjust Your Requirements<\/h2>\n\t\t\n\t\t<div style=\"display: flex; flex-wrap: wrap; gap: 30px;\">\n\n\t\t <!-- Number of Users -->\n\t\t <div style=\"flex: 1 1 240px; min-width: 240px;\">\n\t\t\t\t<label for=\"numUsers\" style=\"font-weight: 600; font-size: 1rem; margin-bottom: 8px; display: block;\">Number of Users<\/label>\n\t\t\t\t<input type=\"number\" id=\"numUsers\" min=\"1\" value=\"10\" style=\"width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 10px; font-size: 1rem;\">\n\t\t <\/div>\n\n\t\t <!-- Additional Storage -->\n\t\t <div style=\"flex: 1 1 340px; min-width: 340px;\">\n\t\t\t<label for=\"storageGB\" style=\"font-weight: 600; font-size: 1rem; margin-bottom: 8px; display: block;\">\n\t\t\t Additional Storage (GB per user)\n\t\t\t<\/label>\n\t\t\t\n\t\t\t<div style=\"display: flex; gap: 15px; align-items: center;\">\n\t\t\t <input type=\"range\" id=\"storageGB\" min=\"0\" max=\"5000\" value=\"0\" style=\"flex: 2;\">\n\t\t\t <input type=\"number\" id=\"storageGBValue\" min=\"0\" max=\"5000\" value=\"0\" \n\t\t\t\tstyle=\"flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 10px; font-size: 1rem; text-align: center;\">\n\t\t\t<\/div>\n\t\t <\/div>\n\n\t\t <!-- Billing Cycle -->\n\t\t <div style=\"flex: 1 1 240px; min-width: 240px;\">\n\t\t\t\t<label for=\"billingCycle\" style=\"font-weight: 600; font-size: 1rem; margin-bottom: 8px; display: block;\">Billing Cycle<\/label>\n\t\t\t\t<select id=\"billingCycle\" style=\"width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 10px; font-size: 1rem;\">\n\t\t\t\t <option value=\"monthly\" selected>Monthly<\/option>\n\t\t\t\t <option value=\"yearly\">Yearly (discounted)<\/option>\n\t\t\t\t<\/select>\n\t\t <\/div>\n\n\t\t<\/div>\n\n\t\t<!-- Features Toggles -->\n\t\t<div style=\"margin-top: 40px;\">\n\t\t <h3 style=\"font-size: 1.3rem; margin-bottom: 15px;\">Select Required Features<\/h3>\n\t\t <div style=\"display: flex; flex-wrap: wrap; gap: 20px;\">\n\t\t\t\t<label style=\"display: flex; align-items: center; gap: 10px; font-weight: 500;\"><input type=\"checkbox\" id=\"featureEmail\" checked> Email<\/label>\n\t\t\t\t<label style=\"display: flex; align-items: center; gap: 10px; font-weight: 500;\"><input type=\"checkbox\" id=\"featureStorage\" checked> Storage<\/label>\n\t\t\t\t<label style=\"display: flex; align-items: center; gap: 10px; font-weight: 500;\"><input type=\"checkbox\" id=\"featureOffice\" checked> Office Apps<\/label>\n\t\t\t\t<label style=\"display: flex; align-items: center; gap: 10px; font-weight: 500;\"><input type=\"checkbox\" id=\"featureSecurity\"> Security<\/label>\n\t\t\t\t<label style=\"display: flex; align-items: center; gap: 10px; font-weight: 500;\"><input type=\"checkbox\" id=\"featureConferencing\"> Conferencing<\/label>\n\t\t\t\t<label style=\"display: flex; align-items: center; gap: 10px; font-weight: 500;\"><input type=\"checkbox\" id=\"featureDeviceMgmt\"> Device Management<\/label>\n\t\t\t\t<label style=\"display: flex; align-items: center; gap: 10px; font-weight: 500;\"><input type=\"checkbox\" id=\"featureCompliance\"> Compliance<\/label>\n\t\t <\/div>\n\t\t<\/div>\n\n <\/div>\n<\/section>\n<!-- END: Adjust Your Requirements Section -->\n\n<!-- START: Pricing Plans Comparison Section -->\n<section id=\"pricing-plans-comparison\" section class=\"pricing-plans\">\n <div class=\"container\" style=\"margin-top: 60px;\">\n\t\t<h2 style=\"font-size: 1.6rem; color: #00274d; margin-bottom: 30px;\">Pricing Plans Comparison<\/h2>\n\t\t<div id=\"pricingGrid\">\n\t\t <!-- Pricing Table will be dynamically inserted here -->\n\t\t<\/div>\n <\/div>\n<\/section>\n<!-- END: Pricing Plans Comparison Section -->\n\n<!-- START: Pricing Cards Styles -->\n<style>\n\/* --- Updated Plan Card Styles for 6-per-row layout --- *\/\n#pricingGrid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 30px;\n justify-items: center;\n text-align: center;\n margin-top: 20px;\n}\n\n#pricingGrid table {\n\twidth: 100%;\n\tborder-collapse: separate;\n\tborder-spacing: 0 10px;\n}\n\n#pricingGrid table th,\n#pricingGrid table td {\n\tvertical-align: top;\n\tpadding: 15px 20px;\n\ttext-align: left;\n\tmin-height: 150px;\n}\n\n#pricingGrid table td ul {\n\tpadding-left: 20px;\n\tmargin: 10px 0;\n}\n\n#pricingGrid table th {\n\ttext-align: center;\n\tbackground-color: #f5f5f5;\n}\n\n#pricingGrid table td {\n\tbackground-color: #ffffff;\n\tborder: 1px solid #e0e0e0;\n\tbox-shadow: 0 4px 10px rgba(0,0,0,0.06);\n}\n\n.vendor-column {\n display: flex;\n width: 180px;\n flex-direction: column;\n align-items: center;\n}\n.vendor-column h3 {\n font-size: 1.2rem;\n color: #004080;\n margin-bottom: 15px;\n word-break: break-word;\n max-width: 160px;\n}\n\n.vendor-block {\n margin-bottom: 40px;\n}\n\n.plan-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 20px;\n}\n\n.vendor-card {\n background: #fff;\n padding: 12px 10px;\n border-radius: 14px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: center;\n transition: all 0.3s ease;\n min-width: 150px;\n max-width: 180px;\n width: 100%;\n}\n\n.vendor-card:hover {\n transform: translateY(-6px) scale(1.02);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);\n}\n\n\/* Adjust card width for medium screens (between desktop and tablet) *\/\n@media (max-width: 1200px) {\n .vendor-card {\n\t\twidth: 130px;\n }\n}\n\/* Keep two cards per row on small\/medium screens for readability *\/\n@media (max-width: 900px) {\n .vendor-card {\n\t\twidth: 45%;\n\t\tmax-width: none;\n }\n}\n\/* One card per row on very small screens (mobile phones) *\/\n@media (max-width: 600px) {\n .vendor-card {\n\t\twidth: 100%;\n }\n}\n\n.vendor-card h3 {\n margin-top: 0;\n margin-bottom: 15px;\n font-size: 1.3rem;\n color: #004080;\n}\n.vendor-card ul {\n margin: 20px 0 0 0;\n padding-left: 0;\n list-style: none;\n}\n.vendor-card ul li {\n font-size: 0.95rem;\n margin-bottom: 8px;\n text-align: left;\n}\n.vendor-card p strong {\n font-size: 1.2rem;\n color: #007BFF;\n}\n.best-value-badge, .reduced-badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background: #28a745;\n color: white;\n font-size: 0.75rem;\n padding: 5px 10px;\n border-radius: 20px;\n font-weight: bold;\n}\n.reduced-badge {\n background: #d9534f;\n}\n<\/style>\n<!-- END: Pricing Cards Styles -->\n\n<!-- START: Rocky Consulting Savings Overview Section -->\n<section class=\"savings-overview\" section id=\"rocky-consulting-savings-overview\">\n <div class=\"container\" style=\"margin-top: 60px;\">\n\t\t<h2 style=\"font-size: 1.6rem; color: #00274d; margin-bottom: 30px;\">Rocky Consulting Savings Overview<\/h2>\n\t\t<div id=\"dynamic-savings-table\">\n\t\t <!-- Savings Overview Table will be dynamically inserted here -->\n\t\t<\/div>\n <\/div>\n<\/section>\n<!-- END: Rocky Consulting Savings Overview Section -->\n\n<!-- START: Savings Overview Table Styles -->\n<style>\n.savings-overview table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 10px;\n margin-top: 20px;\n}\n\n.savings-overview th, .savings-overview td {\n padding: 14px 16px;\n text-align: center;\n background: inherit; \/* Changed to inherit *\/\n border: 1px solid inherit; \/* inherit to avoid conflicts *\/\n}\n\n.savings-overview th {\n background: inherit; \/* Handled by JS *\/\n font-weight: 700;\n font-size: 1rem;\n}\n\n.savings-overview td {\n font-size: 0.95rem;\n}\n\n.savings-overview td:nth-child(3),\n.savings-overview td:nth-child(4) {\n background: inherit; \/* Remove fixed colors to avoid conflict *\/\n font-weight: 600;\n}\n\n.savings-overview tr:hover td {\n background: inherit; \/* Handled by JS *\/\n}\n<\/style>\n<!-- END: Savings Overview Table Styles -->\n\n<!-- START: Recommended Plans Section -->\n<section class=\"recommended-plans\">\n<div class=\"container\" style=\"margin-top: 60px;\">\n\t\t<h2 style=\"font-size: 1.6rem; color: #00274d; margin-bottom: 30px;\">Recommended Plans<\/h2>\n\t\t<div id=\"recommended-plans\" style=\"display: flex; flex-wrap: wrap; gap: 30px;\">\n\t\t <!-- Recommended Plans Cards will be dynamically inserted -->\n\t\t<\/div>\n<\/div>\n<\/section>\n<!-- END: Recommended Plans Section -->\n\n<!-- START: Recommended Plans Card Styles -->\n<style>\n.recommended-plans #recommended-plans div {\n background: #ffffff;\n padding: 25px 20px;\n border-radius: 14px;\n box-shadow: 0 6px 18px rgba(0,0,0,0.06);\n flex: 1 1 260px;\n min-width: 260px;\n text-align: center;\n transition: all 0.3s ease;\n}\n.recommended-plans #recommended-plans div:hover {\n transform: translateY(-6px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.08);\n}\n.recommended-plans #recommended-plans div h3 {\n margin-top: 0;\n font-size: 1.3rem;\n color: #004080;\n margin-bottom: 10px;\n}\n.recommended-plans #recommended-plans div p {\n font-size: 1rem;\n margin-bottom: 6px;\n color: #333;\n}\n.recommended-plans #recommended-plans div p strong {\n color: #007BFF;\n}\n.recommended-plans .container , .settings .container , .savings-chart .container{\n background: #ffffff; padding: 40px 50px !important; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n}\n<\/style>\n<!-- END: Recommended Plans Card Styles -->\n\n<!-- START: Visual Savings Chart Section -->\n<section class=\"savings-chart\" section id=\"visual-savings-chart\">\n <div class=\"container\" style=\"margin-top: 60px;\">\n\t\t<h2 style=\"font-size: 1.6rem; color: #00274d; margin-bottom: 30px;\">Visual Savings Chart<\/h2>\n\t\t<div style=\"background: #ffffff; padding: 30px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.06);\">\n\t\t <canvas id=\"savingsChart\" width=\"400\" height=\"200\" style=\"margin: 20px 0;\"><\/canvas>\n\t\t<\/div>\n <\/div>\n<\/section>\n<!-- END: Visual Savings Chart Section -->\n\n<!-- START: Visual Savings Chart Styles -->\n<style>\n.savings-chart canvas {\n width: 100% !important;\n height: auto !important;\n}\n<\/style>\n<!-- END: Visual Savings Chart Styles -->\n\n<!-- START: Feature Comparison Section -->\n<section class=\"feature-comparison\" section id=\"detailed-feature-comparison\">\n <div class=\"container\" style=\"margin-top: 60px;\">\n\t\t<h2 style=\"font-size: 1.6rem; color: #00274d; margin-bottom: 30px;\">Detailed Feature Comparison<\/h2>\n\t\t<div id=\"feature-comparison-grid\">\n\t\t <!-- Feature Comparison Tables will be dynamically inserted here -->\n\t\t<\/div>\n <\/div>\n<\/section>\n<!-- END: Feature Comparison Section -->\n\n<!-- START: Feature Comparison Table Styles -->\n<style>\n.feature-comparison table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 8px;\n margin-top: 20px;\n}\n.feature-comparison th, .feature-comparison td {\n padding: 14px 12px;\n text-align: center;\n background: #ffffff;\n border: 1px solid #e0e0e0;\n}\n.feature-comparison th {\n background: #f5f5f5;\n font-weight: 700;\n font-size: 1rem;\n color: #333;\n}\n.feature-comparison td {\n font-size: 0.95rem;\n}\n.feature-comparison tr:hover td {\n background: #f0f2f5;\n}\n<\/style>\n<!-- END: Feature Comparison Table Styles -->\n\n<!-- START: Settings Section -->\n<section id=\"settings\" class=\"settings\">\n <div class=\"container\" style=\"margin-top: 60px;\">\n\t\t<h2 style=\"font-size: 1.6rem; color: #00274d; margin-bottom: 30px;\">Settings<\/h2>\n\t\t<div style=\"background: #ffffff; padding: 40px 50px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); max-width: 500px; margin: auto;\">\n\t\t <div style=\"display: flex; align-items: center; justify-content: space-between;\">\n\t\t\t\t<span style=\"font-weight: 600; font-size: 1.2rem;\">Dark Mode<\/span>\n\t\t\t\t<label class=\"switch\">\n\t\t\t\t <input type=\"checkbox\" id=\"darkModeToggle\">\n\t\t\t\t <span class=\"slider round\"><\/span>\n\t\t\t\t<\/label>\n\t\t <\/div>\n\t\t<\/div>\n <\/div>\n<\/section>\n<!-- END: Settings Section -->\n\n<!-- START: Dark Mode Switch Styles -->\n<style>\n.switch {\n position: relative;\n display: inline-block;\n width: 50px;\n height: 26px;\n}\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n border-radius: 26px;\n transition: 0.4s;\n}\n.slider:before {\n position: absolute;\n content: \"\";\n height: 20px;\n width: 20px;\n left: 3px;\n bottom: 3px;\n background-color: white;\n border-radius: 50%;\n transition: 0.4s;\n}\ninput:checked + .slider {\n background-color: #007BFF;\n}\ninput:checked + .slider:before {\n transform: translateX(24px);\n}\n<\/style>\n<!-- END: Dark Mode Switch Styles -->\n\n<!-- START: Footer Section -->\n<footer style=\"background: #f1f1f1; padding: 30px; text-align: center; font-size: 0.95rem; color: #555; margin-top: 60px; border-top: 1px solid #e0e0e0;\">\n <p>\u00a9 2024 Rocky Consulting. All rights reserved.<\/p>\n <p>Prices are estimates based on publicly available information as of March 2024.<\/p>\n <p>Microsoft 365\u2122, Google Workspace\u2122, and Apple Business Essentials\u2122 are trademarks of their respective owners.<\/p>\n <p>This tool is independent and for informational purposes only.<\/p>\n<\/footer>\n<!-- END: Footer Section -->\n\n<!-- START: Preloader -->\n<div id=\"preloader\" style=\"\n background: #f7f9fc;\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 9999;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.8rem;\n font-weight: bold;\n color: #007BFF;\n animation: fadeIn 1s ease-in-out infinite alternate;\n \">\n Loading Pricing Calculator...\n<\/div>\n<!-- END: Preloader -->\n\n<!-- START: Preloader Animations -->\n<style>\n@keyframes fadeIn {\n from { opacity: 0.4; }\n to { opacity: 1; }\n}\n.hidden {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.5s ease-out, visibility 0.5s ease-out;\n}\n<\/style>\n<!-- END: Preloader Animations -->\n\n<!-- START: Preloader Fade-Out Script -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n window.onload = function() {\n\t\tconst preloader = document.getElementById('preloader');\n\t\tif (preloader) {\n\t\t preloader.classList.add('hidden');\n\t\t setTimeout(() => {\n\t\t\t\tpreloader.style.display = 'none';\n\t\t }, 600);\n\t\t}\n };\n});\n<\/script>\n<!-- END: Preloader Fade-Out Script -->\n\n<!-- START: Download Pricing as CSV Button -->\n<div class=\"container\" style=\"margin-top: 60px; text-align: center;\">\n <button id=\"downloadCSV\" style=\"\n\t\tbackground: linear-gradient(to right, #007BFF, #0056b3);\n\t\tcolor: white;\n\t\tfont-size: 1.1rem;\n\t\tfont-weight: bold;\n\t\tpadding: 14px 30px;\n\t\tborder: none;\n\t\tborder-radius: 30px;\n\t\tcursor: pointer;\n\t\ttransition: all 0.4s ease;\n\t\tbox-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);\n \">\n\t\t\ud83d\udce5 Download Pricing as CSV\n <\/button>\n<\/div>\n<!-- END: Download Pricing as CSV Button -->\n\n<!-- START: Download CSV Button Hover Effect -->\n<style>\n#downloadCSV:hover {\n background: linear-gradient(to right, #0056b3, #004080);\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);\n}\n<\/style>\n<!-- END: Download CSV Button Hover Effect -->\n\n<!-- START: Load Chart.js Library -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<!-- END: Load Chart.js Library -->\n\n<!-- START: Initialize Visual Savings Chart -->\n<script>\nlet savingsChartInstance = null;\n\nfunction buildSavingsChart() {\n const ctx = document.getElementById('savingsChart').getContext('2d');\n if (savingsChartInstance) savingsChartInstance.destroy();\n\n const users = parseInt(numUsersInput.value) || 1;\n const storageGB = parseInt(storageGBInput.value) || 0;\n const billingCycle = billingCycleSelect.value;\n const selectedFeatures = Object.entries(featureInputs)\n\t.filter(([key, input]) => input.checked)\n\t.map(([key]) => key);\n\n const labels = ['Entry', 'Mid', 'Premium'];\n const competitorCosts = [];\n const rockyCosts = [];\n\n ['entry', 'mid', 'premium'].forEach(level => {\n\tconst rockyCost = calculateVendorCost('rocky', level, users, storageGB, selectedFeatures, billingCycle);\n\tconst bestCompetitor = Math.min(\n\t calculateVendorCost('microsoft', level, users, storageGB, selectedFeatures, billingCycle),\n\t calculateVendorCost('google', level, users, storageGB, selectedFeatures, billingCycle),\n\t calculateVendorCost('apple', level, users, storageGB, selectedFeatures, billingCycle)\n\t);\n\n\tcompetitorCosts.push(bestCompetitor.toFixed(2));\n\trockyCosts.push(rockyCost.toFixed(2));\n });\n\n const darkMode = document.getElementById('darkModeToggle').checked;\n const textColor = darkMode ? '#ffffff' : '#333333';\n const gridColor = darkMode ? '#555' : '#ddd';\n\n savingsChartInstance = new Chart(ctx, {\n\ttype: 'bar',\n\tdata: {\n\t labels,\n\t datasets: [\n\t\t{\n\t\t label: 'Best Competitor Price (CHF)',\n\t\t data: competitorCosts,\n\t\t backgroundColor: '#ff9999'\n\t\t},\n\t\t{\n\t\t label: 'Rocky Consulting Price (CHF)',\n\t\t data: rockyCosts,\n\t\t backgroundColor: '#66b3ff'\n\t\t}\n\t ]\n\t},\n\toptions: {\n\t responsive: true,\n\t maintainAspectRatio: false,\n\t plugins: {\n\t\tlegend: {\n\t\t position: 'bottom',\n\t\t labels: { font: { size: 14 }, color: textColor }\n\t\t},\n\t\ttitle: {\n\t\t display: true,\n\t\t text: 'Savings: Rocky vs Best Competitor',\n\t\t font: { size: 18 },\n\t\t color: textColor\n\t\t}\n\t },\n\t scales: {\n\t\tx: {\n\t\t ticks: { color: textColor, font: { size: 14 } },\n\t\t grid: { color: gridColor }\n\t\t},\n\t\ty: {\n\t\t ticks: { color: textColor, font: { size: 14 } },\n\t\t grid: { color: gridColor }\n\t\t}\n\t }\n\t}\n });\n}\n<\/script>\n<!-- END: Initialize Visual Savings Chart -->\n\n<!-- START: Global Dynamic Functions -->\n<script>\n\/\/ Input Elements\nconst numUsersInput = document.getElementById('numUsers');\nconst storageGBInput = document.getElementById('storageGBValue');\nconst storageGBRange = document.getElementById('storageGB');\nconst billingCycleSelect = document.getElementById('billingCycle');\nconst featureInputs = {\n email: document.getElementById('featureEmail'),\n storage: document.getElementById('featureStorage'),\n office: document.getElementById('featureOffice'),\n security: document.getElementById('featureSecurity'),\n conferencing: document.getElementById('featureConferencing'),\n deviceMgmt: document.getElementById('featureDeviceMgmt'),\n compliance: document.getElementById('featureCompliance')\n};\n\n\/\/ Sync Range and Number Input\nstorageGBRange.addEventListener('input', () => {\n storageGBInput.value = storageGBRange.value;\n});\nstorageGBInput.addEventListener('input', () => {\n storageGBRange.value = storageGBInput.value;\n});\n\n\/\/ Utilities\nfunction capitalize(word) {\n return word.charAt(0).toUpperCase() + word.slice(1);\n}\nfunction capitalizeFeature(feature) {\n const names = {\n\t\temail: 'Email',\n\t\tstorage: 'Storage',\n\t\toffice: 'Office Apps',\n\t\tsecurity: 'Security',\n\t\tconferencing: 'Conferencing',\n\t\tdeviceMgmt: 'Device Management',\n\t\tcompliance: 'Compliance'\n };\n return names[feature] || feature;\n}\n<\/script>\n<!-- END: Global Dynamic Functions -->\n\n<!-- START: Dynamic Pricing Calculation and Injection -->\n<script>\nfunction calculateVendorCost(vendorKey, level, users, storageGB, selectedFeatures, billingCycle) {\n const vendor = vendors[vendorKey];\n if (!vendor || !vendor.plans[level]) return Infinity;\n\n let monthlyBasePrice = vendor.plans[level].base;\n const extraStorageGB = Math.max(0, storageGB - vendor.plans[level].storageIncluded);\n const extraStorageCost = extraStorageGB * vendor.storageCostPerGB;\n const monthlyCostPerUser = monthlyBasePrice + extraStorageCost;\n\n let totalCost;\n if (billingCycle === 'monthly') {\n\ttotalCost = monthlyCostPerUser * users;\n } else if (billingCycle === 'yearly') {\n\tconst yearlyCostPerUser = monthlyCostPerUser * 12 * (1 - vendor.yearlyDiscount);\n\ttotalCost = yearlyCostPerUser * users;\n }\n\n return totalCost;\n}\n<\/script>\n\n<!-- START: Vendors Data -->\n<script>\n \/\/ Vendor Plans and Pricing Data\n const vendors = {\n\t\trocky: {\n\t\t name: 'Rocky Consulting',\n\t\t storageCostPerGB: 0.05,\n\t\t yearlyDiscount: 0.20,\n\t\t plans: {\n\t\t\t\tentry: { base: 5.50, storageIncluded: 1000, features: ['email', 'storage', 'office', 'security', 'compliance'] },\n\t\t\t\tmid: { base: 11.00, storageIncluded: 1000, features: ['email', 'storage', 'office', 'security', 'conferencing', 'compliance'] },\n\t\t\t\tpremium: { base: 19.00, storageIncluded: 2000, features: ['email', 'storage', 'office', 'security', 'conferencing', 'deviceMgmt', 'compliance'] }\n\t\t }\n\t\t},\n\t\tmicrosoft: {\n\t\t name: 'Microsoft 365',\n\t\t storageCostPerGB: 0.20,\n\t\t yearlyDiscount: 0.16,\n\t\t plans: {\n\t\t\t\tentry: { base: 6.50, storageIncluded: 1000, features: ['email', 'storage', 'office', 'conferencing'] },\n\t\t\t\tmid: { base: 13.50, storageIncluded: 1000, features: ['email', 'storage', 'office', 'conferencing', 'security'] },\n\t\t\t\tpremium: { base: 23.65, storageIncluded: 1000, features: ['email', 'storage', 'office', 'security', 'conferencing', 'deviceMgmt', 'compliance'] }\n\t\t }\n\t\t},\n\t\tgoogle: {\n\t\t name: 'Google Workspace',\n\t\t storageCostPerGB: 0.20,\n\t\t yearlyDiscount: 0.15,\n\t\t plans: {\n\t\t\t\tentry: { base: 8.40, storageIncluded: 30, features: ['email', 'storage', 'office', 'conferencing'] },\n\t\t\t\tmid: { base: 16.80, storageIncluded: 2000, features: ['email', 'storage', 'office', 'conferencing'] },\n\t\t\t\tpremium: { base: 26.40, storageIncluded: 5000, features: ['email', 'storage', 'office', 'conferencing', 'security', 'compliance'] }\n\t\t }\n\t\t},\n\t\tapple: {\n\t\t name: 'Apple Business Essentials',\n\t\t storageCostPerGB: 0,\n\t\t yearlyDiscount: 0,\n\t\t plans: {\n\t\t\t\tentry: { base: 10.00, storageIncluded: 50, features: ['storage', 'security', 'deviceMgmt'] },\n\t\t\t\tmid: { base: 20.00, storageIncluded: 200, features: ['storage', 'security', 'deviceMgmt'] },\n\t\t\t\tpremium: { base: 25.00, storageIncluded: 2000, features: ['storage', 'security', 'deviceMgmt'] }\n\t\t }\n\t\t}\n };\n<\/script>\n<!-- END: Vendors Data -->\n\n<!-- START: Calculate Cost Function -->\n<script>\nfunction calculateVendorCost(vendorKey, level, users, storageGB, selectedFeatures, billingCycle) {\n const vendor = vendors[vendorKey];\n if (!vendor || !vendor.plans[level]) return Infinity;\n\n let basePrice = vendor.plans[level].base;\n if (billingCycle === 'yearly' && vendor.yearlyDiscount > 0) {\n\t\tbasePrice *= (1 - vendor.yearlyDiscount);\n }\n\n const extraStorage = Math.max(0, storageGB - vendor.plans[level].storageIncluded);\n const extraCost = extraStorage * vendor.storageCostPerGB;\n const costPerUser = basePrice + extraCost;\n\n return costPerUser * users;\n}\n<\/script>\n<!-- END: Calculate Cost Function -->\n\n<!-- START: Define Inputs and Sync -->\n<script>\nconst numUsersInput = document.getElementById('numUsers');\nconst storageGBInput = document.getElementById('storageGBValue');\nconst storageGBRange = document.getElementById('storageGB');\nconst billingCycleSelect = document.getElementById('billingCycle');\nconst featureInputs = {\n email: document.getElementById('featureEmail'),\n storage: document.getElementById('featureStorage'),\n office: document.getElementById('featureOffice'),\n security: document.getElementById('featureSecurity'),\n conferencing: document.getElementById('featureConferencing'),\n deviceMgmt: document.getElementById('featureDeviceMgmt'),\n compliance: document.getElementById('featureCompliance')\n};\n\n\/\/ Sync range slider and input\nstorageGBRange.addEventListener('input', () => {\n storageGBInput.value = storageGBRange.value;\n});\nstorageGBInput.addEventListener('input', () => {\n storageGBRange.value = storageGBInput.value;\n});\n<\/script>\n<!-- END: Define Inputs and Sync -->\n\n<!-- START: All dynamic functions (calculateAndDisplay, build tables, charts, etc.) -->\n<script>\nwindow.addEventListener('load', function() {\n calculateAndDisplay();\n buildFeatureComparisonTables();\n buildSavingsSummary();\n buildRecommendedPlans();\n buildSavingsChart();\n});\n<\/script>\n<!-- END: All dynamic functions (calculateAndDisplay, build tables, charts, etc.) -->\n\n<!-- Start: Pricing Plans Comparison -->\n<script>\nfunction calculateAndDisplay() {\n const pricingGrid = document.getElementById('pricingGrid');\n pricingGrid.innerHTML = '';\n\n const numUsers = parseInt(numUsersInput.value) || 1;\n const storageGB = parseInt(storageGBInput.value) || 0;\n const selectedFeatures = Object.entries(featureInputs)\n\t.filter(([key, input]) => input.checked)\n\t.map(([key]) => key);\n\n const vendorList = ['rocky', 'microsoft', 'google', 'apple'];\n\n const darkMode = document.getElementById('darkModeToggle').checked;\n const bgColor = darkMode ? '#2c2f38' : '#ffffff';\n const textColor = darkMode ? '#f0f0f0' : '#333';\n const headerBgColor = darkMode ? '#3e424d' : '#d8ebf9';\n const headerTextColor = darkMode ? '#ffffff' : '#004080';\n\n let tableHTML = `\n <table style=\"width:100%; border-collapse:separate; border-spacing:0 10px; margin-top:20px;\">\n\t<thead>\n\t <tr>\n\t\t<th style=\"background:${headerBgColor}; padding:14px 16px; border:1px solid ${bgColor}; font-weight:700; font-size:1rem; color:${headerTextColor};\">Plan Level<\/th>\n\t\t${vendorList.map(vendorKey => `\n\t\t <th style=\"background:${headerBgColor}; padding:14px 16px; border:1px solid ${bgColor}; font-weight:700; font-size:1rem; color:${headerTextColor};\">\n\t\t\t${vendors[vendorKey]?.name || 'N\/A'}\n\t\t <\/th>`).join('')}\n\t <\/tr>\n\t<\/thead>\n\t<tbody>`;\n\n ['entry', 'mid', 'premium'].forEach(level => {\n\ttableHTML += `<tr>\n\t <td style=\"padding:14px 16px; background:${bgColor}; border:1px solid ${headerBgColor}; font-weight:bold; color:${textColor};\">\n\t\t${capitalize(level)}\n\t <\/td>`;\n\n\tvendorList.forEach(vendorKey => {\n\t const vendor = vendors[vendorKey];\n\t if (!vendor || !vendor.plans[level]) {\n\t\ttableHTML += `<td style=\"padding:14px 16px; background:${bgColor}; border:1px solid ${headerBgColor}; color:${textColor};\">N\/A<\/td>`;\n\t } else {\n\t\tconst plan = vendor.plans[level];\n\n\t\t\/\/ Explicit calculations\n\t\tconst monthlyCostPerUser = vendor.plans[level].base + Math.max(0, storageGB - vendor.plans[level].storageIncluded) * vendor.storageCostPerGB;\n\t\tconst monthlyCost = monthlyCostPerUser * numUsers;\n\t\tconst yearlyCost = monthlyCost * 12 * (1 - vendor.yearlyDiscount);\n\n\t\tconst yearlySavingsPercent = vendor.yearlyDiscount * 100;\n\n\t\tlet cellContent = `\n\t\t <div style=\"font-weight:600; color:${darkMode ? '#ffcc66' : '#007BFF'};\">\n\t\t\tMonthly: CHF ${monthlyCost.toFixed(2)}\n\t\t <\/div>\n\t\t <div style=\"font-weight:600; color:${darkMode ? '#ffcc66' : '#28a745'};\">\n\t\t\tYearly: CHF ${yearlyCost.toFixed(2)}\n\t\t <\/div>\n\t\t <div style=\"font-size:0.9rem; color:${darkMode ? '#a3e635' : '#28a745'};\">\n\t\t\tSave ${yearlySavingsPercent.toFixed(0)}% vs monthly\n\t\t <\/div>\n\t\t <ul style=\"list-style:none; padding:10px 0; margin:0; color:${textColor};\">`;\n\n\t\t \/\/ Inside calculateAndDisplay(), replace the selectedFeatures.forEach loop with:\n\t\t const featureList = ['email', 'storage', 'office', 'security', 'conferencing', 'deviceMgmt', 'compliance'];\n\t\t featureList.forEach(feat => {\n\t\t\t cellContent += plan.features.includes(feat)\n\t\t\t\t ? `<li style=\"color:${darkMode ? '#a3e635' : 'green'}; text-align:left;\">\u2714 ${capitalizeFeature(feat)}<\/li>`\n\t\t\t\t : `<li style=\"color:${darkMode ? '#f87171' : 'red'}; text-align:left;\">\u2716 ${capitalizeFeature(feat)}<\/li>`;\n\t\t });\n\n\n\t\tcellContent += '<\/ul>';\n\n\t\tif (vendorKey === 'apple' && selectedFeatures.some(f => !plan.features.includes(f))) {\n\t\t cellContent += `\n\t\t\t<span style=\"background:#555555; color:#fff; padding:2px 6px; border-radius:4px; font-size:0.75rem;\">\n\t\t\t Reduced Feature Set\n\t\t\t<\/span>`;\n\t\t}\n\n\t\ttableHTML += `<td style=\"padding:14px 16px; background:${bgColor}; border:1px solid ${headerBgColor}; color:${textColor};\">\n\t\t ${cellContent}\n\t\t<\/td>`;\n\t }\n\t});\n\n\ttableHTML += '<\/tr>';\n });\n\n tableHTML += '<\/tbody><\/table>';\n pricingGrid.innerHTML = tableHTML;\n}\n\n<\/script>\n<!-- END: Pricing Plans Comparison -->\n\n<!-- START: Dynamic Feature Comparison Tables -->\n<script>\nfunction buildFeatureComparisonTables() {\n const featureGrid = document.getElementById('feature-comparison-grid');\n featureGrid.innerHTML = '';\n\n const darkMode = document.getElementById('darkModeToggle').checked;\n const bgColor = darkMode ? '#2c2f38' : '#ffffff';\n const textColor = darkMode ? '#f0f0f0' : '#333';\n const headerBg = darkMode ? '#3e424d' : '#f5f5f5';\n const headerColor = darkMode ? '#ffffff' : '#333';\n\n ['entry', 'mid', 'premium'].forEach(level => {\n\tconst section = document.createElement('section');\n\tconst title = document.createElement('h3');\n\ttitle.textContent = capitalize(level) + ' Plans Feature Comparison';\n\ttitle.style.margin = '20px 0 10px 0';\n\ttitle.style.color = headerColor;\n\tsection.appendChild(title);\n\n\tconst table = document.createElement('table');\n\ttable.innerHTML = `\n\t <thead>\n\t\t<tr>\n\t\t <th style=\"background:${headerBg}; color:${headerColor};\">Feature<\/th>\n\t\t <th style=\"background:${headerBg}; color:${headerColor};\">Rocky<\/th>\n\t\t <th style=\"background:${headerBg}; color:${headerColor};\">Microsoft<\/th>\n\t\t <th style=\"background:${headerBg}; color:${headerColor};\">Google<\/th>\n\t\t <th style=\"background:${headerBg}; color:${headerColor};\">Apple<\/th>\n\t\t<\/tr>\n\t <\/thead>\n\t <tbody>\n\t\t${buildFeatureRows(level, bgColor, textColor)}\n\t <\/tbody>\n\t`;\n\tsection.appendChild(table);\n\tfeatureGrid.appendChild(section);\n });\n}\n\nfunction buildFeatureRows(level, bgColor, textColor) {\n const featureList = ['email', 'storage', 'office', 'security', 'conferencing', 'deviceMgmt', 'compliance'];\n let rows = '';\n\n featureList.forEach(feat => {\n\trows += `<tr>\n\t <td style=\"font-weight:bold;background:${bgColor};color:${textColor};\">${capitalizeFeature(feat)}<\/td>\n\t ${renderFeatureCell('rocky', level, feat, bgColor)}\n\t ${renderFeatureCell('microsoft', level, feat, bgColor)}\n\t ${renderFeatureCell('google', level, feat, bgColor)}\n\t ${renderFeatureCell('apple', level, feat, bgColor)}\n\t<\/tr>`;\n });\n\n return rows;\n}\n\nfunction renderFeatureCell(vendorKey, level, feature, bgColor) {\n const darkMode = document.getElementById('darkModeToggle').checked;\n const planFeatures = vendors[vendorKey]?.plans?.[level]?.features || [];\n if (!planFeatures.includes(feature)) {\n\treturn `<td style=\"color:${darkMode ? '#f87171' : 'red'}; background:${bgColor}; text-align:center;\">\u2716<\/td>`;\n }\n return `<td style=\"color:${darkMode ? '#a3e635' : 'green'}; background:${bgColor}; text-align:center;\">\u2714<\/td>`;\n}\n<\/script>\n<!-- END: Dynamic Feature Comparison Tables -->\n\n<!-- START: Dynamic Rocky Savings Overview Table -->\n<script>\nfunction buildSavingsSummary() {\n const container = document.getElementById('dynamic-savings-table');\n container.innerHTML = '';\n\n const darkMode = document.getElementById('darkModeToggle').checked;\n const bgColor = darkMode ? '#2c2f38' : '#ffffff';\n const textColor = darkMode ? '#f0f0f0' : '#333';\n const headerBg = darkMode ? '#3e424d' : '#d8ebf9';\n const headerColor = darkMode ? '#ffffff' : '#004080';\n const highlightBg = darkMode ? '#374151' : '#e6f7e6';\n const savingsBg = darkMode ? '#4b5563' : '#d9f2d9';\n const savingsColor = darkMode ? '#a3e635' : '#2e7d32';\n\n const users = parseInt(numUsersInput.value) || 1;\n const storageGB = parseInt(storageGBInput.value) || 0;\n const selectedFeatures = Object.entries(featureInputs)\n\t.filter(([k, input]) => input.checked)\n\t.map(([k]) => k);\n\n let html = `<table style=\"width:100%; border-collapse:separate; border-spacing:0 10px;\">\n\t<thead>\n\t <tr style=\"background:${headerBg};color:${headerColor};\">\n\t\t<th style=\"padding:14px;\">Plan Level<\/th>\n\t\t<th style=\"padding:14px;\">Billing Cycle<\/th>\n\t\t<th style=\"padding:14px;\">Best Competitor Price (CHF)<\/th>\n\t\t<th style=\"padding:14px;\">Rocky Price (CHF)<\/th>\n\t\t<th style=\"padding:14px;\">Savings<\/th>\n\t <\/tr>\n\t<\/thead><tbody>`;\n\n ['entry', 'mid', 'premium'].forEach(level => {\n\tconst monthlyRocky = calculateVendorCost('rocky', level, users, storageGB, selectedFeatures, 'monthly');\n\tconst yearlyRocky = calculateVendorCost('rocky', level, users, storageGB, selectedFeatures, 'yearly');\n\n\tconst monthlyCompetitor = Math.min(\n\t calculateVendorCost('microsoft', level, users, storageGB, selectedFeatures, 'monthly'),\n\t calculateVendorCost('google', level, users, storageGB, selectedFeatures, 'monthly'),\n\t calculateVendorCost('apple', level, users, storageGB, selectedFeatures, 'monthly')\n\t);\n\n\tconst yearlyCompetitor = Math.min(\n\t calculateVendorCost('microsoft', level, users, storageGB, selectedFeatures, 'yearly'),\n\t calculateVendorCost('google', level, users, storageGB, selectedFeatures, 'yearly'),\n\t calculateVendorCost('apple', level, users, storageGB, selectedFeatures, 'yearly')\n\t);\n\n\tconst monthlySavings = monthlyCompetitor - monthlyRocky;\n\tconst monthlySavingsPercent = ((monthlySavings \/ monthlyCompetitor) * 100).toFixed(0);\n\n\tconst yearlySavings = yearlyCompetitor - yearlyRocky;\n\tconst yearlySavingsPercent = ((yearlySavings \/ yearlyCompetitor) * 100).toFixed(0);\n\n\thtml += `\n\t <tr style=\"background:${bgColor}; color:${textColor};\">\n\t\t<td rowspan=\"2\" style=\"padding:14px; border:1px solid ${headerBg}; font-weight:bold; vertical-align:middle;\">${capitalize(level)}<\/td>\n\t\t<td style=\"padding:14px; border:1px solid ${headerBg};\">Monthly<\/td>\n\t\t<td style=\"padding:14px; border:1px solid ${headerBg};\">CHF ${monthlyCompetitor.toFixed(2)}<\/td>\n\t\t<td style=\"padding:14px; border:1px solid ${headerBg}; background:${highlightBg}; color:${savingsColor}; font-weight:bold;\">\n\t\t CHF ${monthlyRocky.toFixed(2)}\n\t\t<\/td>\n\t\t<td style=\"padding:14px; border:1px solid ${headerBg}; background:${savingsBg}; color:${savingsColor}; font-weight:bold;\">\n\t\t CHF ${monthlySavings.toFixed(2)} (${monthlySavingsPercent}%)\n\t\t<\/td>\n\t <\/tr>\n\t <tr style=\"background:${bgColor}; color:${textColor};\">\n\t\t<td style=\"padding:14px; border:1px solid ${headerBg};\">Yearly<\/td>\n\t\t<td style=\"padding:14px; border:1px solid ${headerBg};\">CHF ${yearlyCompetitor.toFixed(2)}<\/td>\n\t\t<td style=\"padding:14px; border:1px solid ${headerBg}; background:${highlightBg}; color:${savingsColor}; font-weight:bold;\">\n\t\t CHF ${yearlyRocky.toFixed(2)}\n\t\t<\/td>\n\t\t<td style=\"padding:14px; border:1px solid ${headerBg}; background:${savingsBg}; color:${savingsColor}; font-weight:bold;\">\n\t\t CHF ${yearlySavings.toFixed(2)} (${yearlySavingsPercent}%)\n\t\t<\/td>\n\t <\/tr>`;\n });\n\n html += '<\/tbody><\/table>';\n container.innerHTML = html;\n}\n<\/script>\n<!-- END: Dynamic Rocky Savings Overview Table -->\n\n<!-- START: Dynamic Recommended Plans Section -->\n<script>\nfunction buildRecommendedPlans() {\n const recContainer = document.getElementById('recommended-plans');\n recContainer.innerHTML = '';\n\n const darkMode = document.getElementById('darkModeToggle').checked;\n const bgColor = darkMode ? '#2c2f38' : '#ffffff';\n const textColor = darkMode ? '#f0f0f0' : '#333';\n\n const users = parseInt(numUsersInput.value) || 1;\n const storageGB = parseInt(storageGBInput.value) || 0;\n const billingCycle = billingCycleSelect.value;\n const selectedFeatures = Object.entries(featureInputs)\n\t.filter(([k, input]) => input.checked)\n\t.map(([k]) => k);\n\n let rockyBestCost = Infinity;\n\n ['rocky', 'microsoft', 'google', 'apple'].forEach(vendorKey => {\n\tconst vendor = vendors[vendorKey];\n\tif (!vendor) return;\n\n\tlet bestPlan = null;\n\tlet bestCost = Infinity;\n\n\t['entry', 'mid', 'premium'].forEach(level => {\n\t const plan = vendor.plans[level];\n\t if (!plan) return;\n\t if (!selectedFeatures.every(f => plan.features.includes(f))) return;\n\n\t const cost = calculateVendorCost(vendorKey, level, users, storageGB, selectedFeatures, billingCycle);\n\n\t if (cost < bestCost) {\n\t\tbestCost = cost;\n\t\tbestPlan = { vendor: vendor.name, level, cost };\n\t }\n\t});\n\n\tif (!bestPlan) return;\n\n\tif (vendorKey === 'rocky') rockyBestCost = bestPlan.cost;\n\tif (vendorKey !== 'rocky' && bestPlan.cost < 1.25 * rockyBestCost) return;\n\n\tconst card = document.createElement('div');\n\tcard.className = 'vendor-card';\n\tcard.style.color = textColor;\n\tcard.style.background = bgColor;\n\n\tcard.innerHTML = `\n\t <h3 style=\"color:${textColor};\">${bestPlan.vendor}<\/h3>\n\t <p style=\"color:${textColor};\"><strong style=\"color:${darkMode ? '#ffcc66' : '#007BFF'};\">Recommended:<\/strong> ${capitalize(bestPlan.level)}<\/p>\n\t <p style=\"color:${textColor};\"><strong style=\"color:${darkMode ? '#ffcc66' : '#007BFF'};\">Total Cost:<\/strong> CHF ${bestPlan.cost.toFixed(2)}<\/p>\n\t`;\n\trecContainer.appendChild(card);\n });\n}\n<\/script>\n<!-- END: Dynamic Recommended Plans Section -->\n\n<!-- START: Dynamic Event Listeners -->\n<script>\n\/\/ Attach Event Listeners\nnumUsersInput.addEventListener('input', () => {\n calculateAndDisplay();\n buildFeatureComparisonTables();\n buildSavingsSummary();\n buildRecommendedPlans();\n buildSavingsChart();\n});\n\nstorageGBInput.addEventListener('input', () => {\n calculateAndDisplay();\n buildFeatureComparisonTables();\n buildSavingsSummary();\n buildRecommendedPlans();\n buildSavingsChart();\n});\n\nstorageGBRange.addEventListener('input', () => {\n calculateAndDisplay();\n buildFeatureComparisonTables();\n buildSavingsSummary();\n buildRecommendedPlans();\n buildSavingsChart();\n});\n\nbillingCycleSelect.addEventListener('change', () => {\n calculateAndDisplay();\n buildFeatureComparisonTables();\n buildSavingsSummary();\n buildRecommendedPlans();\n buildSavingsChart();\n});\n\nObject.values(featureInputs).forEach(input => {\n input.addEventListener('change', () => {\n\t\tcalculateAndDisplay();\n\t\tbuildFeatureComparisonTables();\n\t\tbuildSavingsSummary();\n\t\tbuildRecommendedPlans();\n\t\tbuildSavingsChart();\n });\n});\n\n\/\/ Initial Build on Page Load\ncalculateAndDisplay();\nbuildFeatureComparisonTables();\nbuildSavingsSummary();\nbuildRecommendedPlans();\nbuildSavingsChart();\n<\/script>\n<!-- END: Dynamic Event Listeners -->\n\n<!-- START: Dark Mode Toggle Full Script -->\n<script>\ndocument.getElementById('darkModeToggle').addEventListener('change', function() {\n const cardElements = document.querySelectorAll('.filters div, .vendor-card, .savings-overview td, .recommended-plans div, .savings-chart div, .feature-comparison td, .settings div, #pricingGrid table td, #pricingGrid table th');\n const titleElements = document.querySelectorAll('h2, h3, .header-title, label');\n\n if (this.checked) {\n\tdocument.body.style.background = '#1c1e26';\n\tdocument.body.style.color = '#f0f0f0';\n\tdocument.querySelector('.sidebar').style.background = '#252730';\n\tdocument.querySelector('.main').style.background = '#1c1e26';\n\n\tcardElements.forEach(card => {\n\t card.style.background = '#2c2f38';\n\t card.style.color = '#f0f0f0';\n\t card.style.borderColor = '#3e424d';\n\t});\n\n\ttitleElements.forEach(title => title.style.color = '#ffffff');\n\n\tdocument.querySelectorAll('.sidebar nav a').forEach(link => link.style.color = '#ccc');\n\tconst activeLink = document.querySelector('.sidebar nav a.active');\n\tif (activeLink) {\n\t activeLink.style.color = '#ffcc66';\n\t activeLink.style.background = '#2b2d38';\n\t}\n\n } else {\n\tdocument.body.style.background = '#f7f9fc';\n\tdocument.body.style.color = '#333';\n\tdocument.querySelector('.sidebar').style.background = '#ffffff';\n\tdocument.querySelector('.main').style.background = '#f7f9fc';\n\n\tcardElements.forEach(card => {\n\t card.style.background = '#ffffff';\n\t card.style.color = '#333';\n\t card.style.borderColor = '#e0e0e0';\n\t});\n\n\ttitleElements.forEach(title => title.style.color = '');\n\n\tdocument.querySelectorAll('.sidebar nav a').forEach(link => link.style.color = '#555');\n\tconst activeLink = document.querySelector('.sidebar nav a.active');\n\tif (activeLink) {\n\t activeLink.style.color = '#007BFF';\n\t activeLink.style.background = '#e6f2ff';\n\t}\n }\n\n buildSavingsChart(); \/\/ \u2190 Add this line here to update chart instantly\n});\n<\/script>\n<!-- END: Dark Mode Toggle Full Script -->\n\n<!-- START: Smooth Scroll to Pricing Plans on Load -->\n<script>\nwindow.addEventListener('load', function() {\n const pricingSection = document.getElementById('pricingGrid');\n if (pricingSection) {\n\t\tpricingSection.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n});\n<\/script>\n<!-- END: Smooth Scroll to Pricing Plans on Load -->\n\n<script>\nfunction toggleSidebar() {\n const sidebar = document.querySelector('.sidebar');\n const mainContent = document.querySelector('.main');\n if (!sidebar || !mainContent) return;\n\n if (sidebar.style.display === 'none' || sidebar.style.display === '') {\n\t\tsidebar.style.display = 'flex';\n\t\tmainContent.style.marginLeft = '240px';\n\t\tmainContent.style.padding = '50px 60px';\n } else {\n\t\tsidebar.style.display = 'none';\n\t\tmainContent.style.marginLeft = '0';\n\t\tmainContent.style.padding = '50px 20px';\n }\n}\n\nfunction handleSidebarVisibility() {\n const sidebar = document.querySelector('.sidebar');\n const mainContent = document.querySelector('.main');\n if (!sidebar || !mainContent) return;\n\n if (window.innerWidth <= 768) {\n\t\tsidebar.style.display = 'none';\n\t\tmainContent.style.marginLeft = '0';\n\t\tmainContent.style.padding = '50px 20px';\n } else {\n\t\tsidebar.style.display = 'flex';\n\t\tmainContent.style.marginLeft = '240px';\n\t\tmainContent.style.padding = '50px 60px';\n }\n}\n\nwindow.addEventListener('load', handleSidebarVisibility);\nwindow.addEventListener('resize', handleSidebarVisibility);\n<\/script>\n\n<!-- START: Final Closing of HTML Structure -->\n<\/div> <!-- END of Main Content Container -->\n<\/body>\n<\/html>\n<!-- END: Full Document -->\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Collaboration Calculator V0.09 – Rocky vs Microsoft vs Google vs Apple \ud83c\udfe0 Home \u2699\ufe0f Adjust Your Requirements \ud83d\udcb3 Pricing Plans Comparison \ud83d\udcb0 Rocky Consulting Savings Overview \u2b50 Recommended Plans \ud83d\udcca Visual Savings Chart \ud83d\udccb Detailed Feature Comparison \u2699\ufe0f Settings \u2630 Menu Pricing Comparison Dashboard Adjust Your Requirements Number of Users Additional Storage (GB per user) […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-23413","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.3 (Yoast SEO v28.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Collaboration Calculator - Rocky Consulting AG<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rocky.consulting\/de\/collaboration-calculator-2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Collaboration Calculator\" \/>\n<meta property=\"og:description\" content=\"Collaboration Calculator V0.09 – Rocky vs Microsoft vs Google vs Apple \ud83c\udfe0 Home \u2699\ufe0f Adjust Your Requirements \ud83d\udcb3 Pricing Plans Comparison \ud83d\udcb0 Rocky Consulting Savings Overview \u2b50 Recommended Plans \ud83d\udcca Visual Savings Chart \ud83d\udccb Detailed Feature Comparison \u2699\ufe0f Settings \u2630 Menu Pricing Comparison Dashboard Adjust Your Requirements Number of Users Additional Storage (GB per user) […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rocky.consulting\/de\/collaboration-calculator-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Rocky Consulting AG\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-09T09:00:33+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"38\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rocky.consulting\\\/collaboration-calculator-2\\\/\",\"url\":\"https:\\\/\\\/rocky.consulting\\\/collaboration-calculator-2\\\/\",\"name\":\"Collaboration Calculator - Rocky Consulting AG\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rocky.consulting\\\/#website\"},\"datePublished\":\"2025-04-28T09:16:44+00:00\",\"dateModified\":\"2025-09-09T09:00:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rocky.consulting\\\/collaboration-calculator-2\\\/#breadcrumb\"},\"inLanguage\":\"de-CH\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rocky.consulting\\\/collaboration-calculator-2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rocky.consulting\\\/collaboration-calculator-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rocky.consulting\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Collaboration Calculator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rocky.consulting\\\/#website\",\"url\":\"https:\\\/\\\/rocky.consulting\\\/\",\"name\":\"Rocky Consulting AG\",\"description\":\"IT & Consutling Boutique\",\"publisher\":{\"@id\":\"https:\\\/\\\/rocky.consulting\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rocky.consulting\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-CH\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/rocky.consulting\\\/#organization\",\"name\":\"Rocky Consulting AG\",\"url\":\"https:\\\/\\\/rocky.consulting\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-CH\",\"@id\":\"https:\\\/\\\/rocky.consulting\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/rocky.consulting\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Rocky-Consulting-White-ALT.png\",\"contentUrl\":\"https:\\\/\\\/rocky.consulting\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Rocky-Consulting-White-ALT.png\",\"width\":683,\"height\":306,\"caption\":\"Rocky Consulting AG\"},\"image\":{\"@id\":\"https:\\\/\\\/rocky.consulting\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Collaboration Calculator - Rocky Consulting AG","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rocky.consulting\/de\/collaboration-calculator-2\/","og_locale":"de_DE","og_type":"article","og_title":"Collaboration Calculator","og_description":"Collaboration Calculator V0.09 – Rocky vs Microsoft vs Google vs Apple \ud83c\udfe0 Home \u2699\ufe0f Adjust Your Requirements \ud83d\udcb3 Pricing Plans Comparison \ud83d\udcb0 Rocky Consulting Savings Overview \u2b50 Recommended Plans \ud83d\udcca Visual Savings Chart \ud83d\udccb Detailed Feature Comparison \u2699\ufe0f Settings \u2630 Menu Pricing Comparison Dashboard Adjust Your Requirements Number of Users Additional Storage (GB per user) […]","og_url":"https:\/\/rocky.consulting\/de\/collaboration-calculator-2\/","og_site_name":"Rocky Consulting AG","article_modified_time":"2025-09-09T09:00:33+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"38\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rocky.consulting\/collaboration-calculator-2\/","url":"https:\/\/rocky.consulting\/collaboration-calculator-2\/","name":"Collaboration Calculator - Rocky Consulting AG","isPartOf":{"@id":"https:\/\/rocky.consulting\/#website"},"datePublished":"2025-04-28T09:16:44+00:00","dateModified":"2025-09-09T09:00:33+00:00","breadcrumb":{"@id":"https:\/\/rocky.consulting\/collaboration-calculator-2\/#breadcrumb"},"inLanguage":"de-CH","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rocky.consulting\/collaboration-calculator-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rocky.consulting\/collaboration-calculator-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rocky.consulting\/"},{"@type":"ListItem","position":2,"name":"Collaboration Calculator"}]},{"@type":"WebSite","@id":"https:\/\/rocky.consulting\/#website","url":"https:\/\/rocky.consulting\/","name":"Rocky Consulting AG","description":"IT & Consutling Boutique","publisher":{"@id":"https:\/\/rocky.consulting\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rocky.consulting\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-CH"},{"@type":"Organization","@id":"https:\/\/rocky.consulting\/#organization","name":"Rocky Consulting AG","url":"https:\/\/rocky.consulting\/","logo":{"@type":"ImageObject","inLanguage":"de-CH","@id":"https:\/\/rocky.consulting\/#\/schema\/logo\/image\/","url":"https:\/\/rocky.consulting\/wp-content\/uploads\/2022\/11\/Rocky-Consulting-White-ALT.png","contentUrl":"https:\/\/rocky.consulting\/wp-content\/uploads\/2022\/11\/Rocky-Consulting-White-ALT.png","width":683,"height":306,"caption":"Rocky Consulting AG"},"image":{"@id":"https:\/\/rocky.consulting\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/rocky.consulting\/de\/wp-json\/wp\/v2\/pages\/23413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rocky.consulting\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rocky.consulting\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rocky.consulting\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rocky.consulting\/de\/wp-json\/wp\/v2\/comments?post=23413"}],"version-history":[{"count":133,"href":"https:\/\/rocky.consulting\/de\/wp-json\/wp\/v2\/pages\/23413\/revisions"}],"predecessor-version":[{"id":23753,"href":"https:\/\/rocky.consulting\/de\/wp-json\/wp\/v2\/pages\/23413\/revisions\/23753"}],"wp:attachment":[{"href":"https:\/\/rocky.consulting\/de\/wp-json\/wp\/v2\/media?parent=23413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}