{"id":3626,"date":"2026-05-18T15:35:02","date_gmt":"2026-05-18T10:05:02","guid":{"rendered":"https:\/\/evrex.in\/?page_id=3626"},"modified":"2026-06-15T15:19:49","modified_gmt":"2026-06-15T09:49:49","slug":"studio","status":"publish","type":"page","link":"https:\/\/evrex.in\/evrex\/studio","title":{"rendered":"studio"},"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\r\n\r\n\r\n \r\n \r\n EV Studio Pro - Battery Pack Suite<\/title>\r\n <!-- Tailwind CSS CDN -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <!-- Google Fonts -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n body {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n background-color: #09090b; \/* Deep premium black *\/\r\n color: #f4f4f5;\r\n -webkit-font-smoothing: antialiased;\r\n overflow-x: hidden;\r\n }\r\n \r\n .heading-font {\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n\r\n \/* Ambient background glow effects optimized for performance *\/\r\n .bg-grid {\r\n background-image: \r\n linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),\r\n linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);\r\n background-size: 32px 32px;\r\n will-change: transform;\r\n }\r\n\r\n .glow-emerald {\r\n background: radial-gradient(circle 300px at 50% -50px, rgba(16, 185, 129, 0.12), transparent 80%);\r\n }\r\n\r\n .glow-blue {\r\n background: radial-gradient(circle 300px at 50% 100%, rgba(59, 130, 246, 0.1), transparent 80%);\r\n }\r\n\r\n \/* Responsive touch scrolling containers *\/\r\n .scroller-flat::-webkit-scrollbar {\r\n height: 6px;\r\n width: 6px;\r\n }\r\n .scroller-flat::-webkit-scrollbar-track {\r\n background: rgba(24, 24, 27, 0.5);\r\n border-radius: 9999px;\r\n }\r\n .scroller-flat::-webkit-scrollbar-thumb {\r\n background: #3f3f46;\r\n border-radius: 9999px;\r\n }\r\n\r\n \/* Custom scrollbars for main desktop layouts *\/\r\n @media (min-width: 768px) {\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #18181b;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #27272a;\r\n border-radius: 9999px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #3f3f46;\r\n }\r\n }\r\n\r\n \/* Forces drop downs to remain highly visible regardless of parent theme styles *\/\r\n select, \r\n select option, \r\n select optgroup,\r\n .elementor select,\r\n .elementor-widget select,\r\n .entry-content select {\r\n background-color: #18181b !important;\r\n color: #f4f4f5 !important;\r\n opacity: 1 !important;\r\n display: block !important;\r\n border-color: #27272a !important;\r\n }\r\n\r\n \/* Styles standard options directly for nested cross-browser engine renders *\/\r\n option {\r\n background: #18181b !important;\r\n color: #f4f4f5 !important;\r\n }\r\n\r\n \/* Neomorphic 3D Hover tilt cards with touch state overrides *\/\r\n .interactive-card {\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n @media (hover: hover) {\r\n .interactive-card:hover {\r\n transform: translateY(-4px);\r\n border-color: rgba(16, 185, 129, 0.3);\r\n box-shadow: 0 12px 30px -10px rgba(16, 185, 129, 0.15);\r\n }\r\n .interactive-card-blue:hover {\r\n transform: translateY(-4px);\r\n border-color: rgba(59, 130, 246, 0.3);\r\n box-shadow: 0 12px 30px -10px rgba(59, 130, 246, 0.15);\r\n }\r\n }\r\n \/* Mobile Active states for responsive touch feedback *\/\r\n .interactive-card:active, .interactive-card-blue:active {\r\n transform: scale(0.98);\r\n opacity: 0.9;\r\n }\r\n\r\n \/* Shimmer gradient texts *\/\r\n .shimmer-text {\r\n background: linear-gradient(135deg, #10b981 0%, #3b82f6 50%, #10b981 100%);\r\n background-size: 200% auto;\r\n color: transparent;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n animation: shine 4s linear infinite;\r\n }\r\n\r\n @keyframes shine {\r\n to { background-position: 200% center; }\r\n }\r\n\r\n \/* Multi-range input overlays for mobile *\/\r\n .multi-range-wrap {\r\n position: relative;\r\n height: 24px;\r\n }\r\n .multi-range-wrap input[type=\"range\"] {\r\n position: absolute;\r\n width: 100%;\r\n pointer-events: none;\r\n appearance: none;\r\n height: 6px;\r\n background: transparent;\r\n }\r\n .multi-range-wrap input[type=\"range\"]::-webkit-slider-thumb {\r\n pointer-events: auto;\r\n appearance: none;\r\n width: 18px;\r\n height: 18px;\r\n border-radius: 50%;\r\n background: #10b981;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.5);\r\n transition: transform 0.1s ease;\r\n }\r\n .multi-range-wrap input[type=\"range\"]::-webkit-slider-thumb:active {\r\n transform: scale(1.25);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"relative min-h-screen pb-16 overflow-x-hidden selection:bg-emerald-500\/30 selection:text-white\">\r\n\r\n <!-- Background Canvas Decoratives -->\r\n <div class=\"fixed inset-0 z-0 pointer-events-none bg-grid\"><\/div>\r\n <div class=\"fixed inset-0 z-0 pointer-events-none glow-emerald\"><\/div>\r\n <div class=\"fixed inset-0 z-0 pointer-events-none glow-blue\"><\/div>\r\n\r\n <div class=\"relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-6 pt-6 sm:pt-12 flex flex-col items-center\">\r\n \r\n <!-- Main Logo \/ Header -->\r\n <header class=\"w-full flex flex-col items-center justify-center text-center mb-8 sm:mb-12 gap-3\">\r\n <div class=\"flex items-center gap-2 sm:gap-3\">\r\n <div class=\"w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-tr from-emerald-500 to-blue-600 flex items-center justify-center shadow-lg shadow-emerald-500\/20\">\r\n <svg class=\"w-5 h-5 sm:w-6 sm:h-6 text-white\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\r\n <\/div>\r\n <h1 class=\"heading-font text-2xl sm:text-4xl font-extrabold tracking-tight text-white flex items-center gap-1\">\r\n EV Studio <span class=\"shimmer-text\">Pro<\/span>\r\n <\/h1>\r\n <\/div>\r\n <p class=\"text-[9px] sm:text-xs font-bold text-emerald-400 uppercase tracking-[0.2em] sm:tracking-[0.25em] bg-emerald-500\/10 px-3 sm:px-4 py-1.5 rounded-full border border-emerald-500\/20\">\r\n Advanced Battery Performance Suite\r\n <\/p>\r\n <div class=\"flex flex-col sm:flex-row items-center gap-1 sm:gap-2 mt-1 text-zinc-500 text-[10px] sm:text-xs\">\r\n <span>Enterprise Design & Simulation Dashboard<\/span>\r\n <span class=\"hidden sm:inline\">\u2022<\/span>\r\n <span>Created by Evrex Tech Pvt Ltd<\/span>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- Main Workspace: Dual Columns for Range and Architecture -->\r\n <main class=\"w-full max-w-6xl grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-8 items-start\">\r\n \r\n <!-- LEFT COLUMN: Advanced Range & Cost Estimator (6 Cols) -->\r\n <section class=\"lg:col-span-6 space-y-6 w-full\">\r\n <div class=\"bg-zinc-900\/40 backdrop-blur-xl border border-zinc-800 rounded-2xl sm:rounded-3xl p-5 sm:p-8 shadow-2xl relative overflow-hidden\">\r\n <!-- Tech gradient bar -->\r\n <div class=\"absolute top-0 left-0 w-full h-[3px] bg-gradient-to-r from-emerald-500 to-teal-500\"><\/div>\r\n\r\n <div class=\"flex items-center justify-between mb-5 sm:mb-6\">\r\n <div class=\"flex items-center gap-2 sm:gap-3\">\r\n <div class=\"w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-emerald-500\/10 border border-emerald-500\/20 text-emerald-400 flex items-center justify-center font-bold text-xs sm:text-sm\">01<\/div>\r\n <h2 class=\"heading-font text-base sm:text-lg font-bold text-white\">Dynamic Performance Tool<\/h2>\r\n <\/div>\r\n <span class=\"text-[8px] sm:text-[10px] text-emerald-400 bg-emerald-400\/10 px-2 py-0.5 sm:py-1 rounded border border-emerald-500\/20 uppercase tracking-widest font-semibold\">Active Studio<\/span>\r\n <\/div>\r\n\r\n <!-- Range calculation Error Log -->\r\n <div id=\"range-error\" class=\"hidden bg-red-950\/40 text-red-400 px-4 py-3 rounded-xl border border-red-900\/50 text-xs font-medium mb-6 text-center\"><\/div>\r\n\r\n <form id=\"range-form\" class=\"space-y-4 sm:space-y-5\">\r\n <div class=\"grid grid-cols-2 gap-3 sm:gap-4\">\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block\">Battery Nominal V<\/label>\r\n <div class=\"relative\">\r\n <input type=\"number\" id=\"v-input\" step=\"0.1\" required value=\"72\" placeholder=\"72\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-all placeholder-zinc-700 min-h-[44px]\">\r\n <span class=\"absolute right-3.5 top-1\/2 -translate-y-1\/2 text-zinc-500 font-bold text-[9px] sm:text-[10px]\">V<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block\">Battery Capacity<\/label>\r\n <div class=\"relative\">\r\n <input type=\"number\" id=\"c-input\" step=\"0.1\" required value=\"40\" placeholder=\"40\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-all placeholder-zinc-700 min-h-[44px]\">\r\n <span class=\"absolute right-3.5 top-1\/2 -translate-y-1\/2 text-zinc-500 font-bold text-[9px] sm:text-[10px]\">Ah<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4\">\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block\">Battery Chemistry<\/label>\r\n <select id=\"chem-input\" required class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-emerald-500 outline-none transition-all cursor-pointer min-h-[44px]\">\r\n <option value=\"\" disabled>Select...<\/option>\r\n <option value=\"lithium\" selected>Lithium-Ion NMC<\/option>\r\n <option value=\"lifepo4\">LiFePO4 (LFP)<\/option>\r\n <option value=\"lead_acid\">Lead-Acid \/ Graphene<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block\">Vehicle Footprint<\/label>\r\n <select id=\"vehicle-input\" required onchange=\"toggleCustomEff(this.value)\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-emerald-500 outline-none transition-all cursor-pointer min-h-[44px]\">\r\n <option value=\"\" disabled>Select...<\/option>\r\n <option value=\"15\">E-Bicycle (~15 Wh\/km)<\/option>\r\n <option value=\"30\" selected>E-Scooter (~30 Wh\/km)<\/option>\r\n <option value=\"45\">E-Motorcycle (~45 Wh\/km)<\/option>\r\n <option value=\"90\">E-Rickshaw (~90 Wh\/km)<\/option>\r\n <option value=\"140\">Compact Sedan EV (~140 Wh\/km)<\/option>\r\n <option value=\"200\">SUV Premium EV (~200 Wh\/km)<\/option>\r\n <option value=\"custom\">Custom Consumption...<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Custom Efficiency Input Group -->\r\n <div id=\"custom-eff-container\" class=\"space-y-1.5 hidden\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-emerald-400 uppercase tracking-wider block\">Custom Consumption<\/label>\r\n <div class=\"relative\">\r\n <input type=\"number\" id=\"custom-eff-input\" step=\"0.1\" placeholder=\"150\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-all min-h-[44px]\">\r\n <span class=\"absolute right-3.5 top-1\/2 -translate-y-1\/2 text-zinc-500 font-bold text-[9px] sm:text-[10px]\">Wh\/km<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4\">\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block\">Electricity Grid Rate<\/label>\r\n <select id=\"rate-input\" required onchange=\"toggleCustomRate(this.value)\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-emerald-500 outline-none transition-all cursor-pointer min-h-[44px]\">\r\n <option value=\"\" disabled>Select...<\/option>\r\n <optgroup label=\"India (INR \/ Unit)\">\r\n <option value=\"11.00\">Maharashtra (~\u20b911.00)<\/option>\r\n <option value=\"8.00\">Karnataka (~\u20b98.00)<\/option>\r\n <option value=\"7.50\">West Bengal (~\u20b97.50)<\/option>\r\n <option value=\"7.00\">Uttar Pradesh (~\u20b97.00)<\/option>\r\n <option value=\"5.50\" selected>Chhattisgarh (~\u20b95.50)<\/option>\r\n <option value=\"3.50\">Goa (~\u20b93.50)<\/option>\r\n <\/optgroup>\r\n <option value=\"custom\">Custom Rate \/ Currency...<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"custom-rate-container\" class=\"space-y-1.5 hidden\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-emerald-400 uppercase tracking-wider block\">Custom Rate<\/label>\r\n <div class=\"relative\">\r\n <input type=\"number\" id=\"custom-rate-input\" step=\"0.01\" placeholder=\"5.50\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-all min-h-[44px]\">\r\n <span class=\"absolute right-3.5 top-1\/2 -translate-y-1\/2 text-zinc-500 font-bold text-[9px] sm:text-[10px]\">\/ kWh<\/span>\r\n <\/div>\r\n <\/div>\r\n <!-- Usable State of Charge (SoC) Slider with custom Touch optimization -->\r\n <div class=\"space-y-2 flex flex-col justify-end\">\r\n <div class=\"flex justify-between items-center text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider\">\r\n <span>Usable SoC Limit<\/span>\r\n <span id=\"soc-val\" class=\"text-emerald-400 font-mono\">10% - 90%<\/span>\r\n <\/div>\r\n <div class=\"multi-range-wrap flex items-center pt-1 pb-3\">\r\n <!-- Embedded dynamic dual tracks inside customized layout -->\r\n <div class=\"absolute left-0 right-0 h-1 bg-zinc-800 rounded-lg pointer-events-none\"><\/div>\r\n <input type=\"range\" id=\"soc-input-min\" min=\"0\" max=\"20\" value=\"10\" oninput=\"updateSoCLimits()\" class=\"absolute w-full accent-emerald-500 cursor-pointer\">\r\n <input type=\"range\" id=\"soc-input-max\" min=\"80\" max=\"100\" value=\"90\" oninput=\"updateSoCLimits()\" class=\"absolute w-full accent-emerald-500 cursor-pointer\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Real-World Engineering Modifiers -->\r\n <div class=\"border-t border-zinc-800\/80 pt-4 space-y-4\">\r\n <h4 class=\"text-[9px] sm:text-[10px] font-bold text-emerald-400 tracking-wider uppercase\">Environmental & Driving Conditions<\/h4>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\r\n <!-- Temperature Modifier -->\r\n <div class=\"space-y-1.5\">\r\n <div class=\"flex justify-between text-[9px] sm:text-[10px] text-zinc-400 font-semibold uppercase\">\r\n <span>Temperature<\/span>\r\n <span id=\"temp-val\" class=\"text-white font-mono\">25\u00b0C<\/span>\r\n <\/div>\r\n <div class=\"py-2\">\r\n <input type=\"range\" id=\"temp-slider\" min=\"-10\" max=\"45\" value=\"25\" oninput=\"updateTempLabel(this.value)\" class=\"w-full accent-emerald-500 h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer\">\r\n <\/div>\r\n <div class=\"text-[9px] text-zinc-500 leading-normal\">Cold\/hot weather limits range capacity.<\/div>\r\n <\/div>\r\n\r\n <!-- Driving Dynamics -->\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] text-zinc-400 font-semibold uppercase block\">Driving Profile<\/label>\r\n <select id=\"style-input\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3 py-2.5 text-base md:text-xs text-white focus:border-emerald-500 outline-none min-h-[44px]\">\r\n <option value=\"eco\">Eco Mode (+15% Range)<\/option>\r\n <option value=\"balanced\" selected>Normal Balanced<\/option>\r\n <option value=\"dynamic\">Sport \/ Aggressive (-20% Range)<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <!-- Topography -->\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] text-zinc-400 font-semibold uppercase block\">Road Terrain<\/label>\r\n <select id=\"terrain-input\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3 py-2.5 text-base md:text-xs text-white focus:border-emerald-500 outline-none min-h-[44px]\">\r\n <option value=\"flat\" selected>Primarily Flat<\/option>\r\n <option value=\"rolling\">Rolling Hills (-12%)<\/option>\r\n <option value=\"mountainous\">Severe Inclines (-28%)<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col sm:flex-row gap-3 pt-3\">\r\n <button type=\"button\" onclick=\"resetRange()\" class=\"w-full sm:w-1\/3 py-3 px-4 rounded-xl border border-zinc-800 text-zinc-400 font-semibold text-xs hover:bg-zinc-800\/40 hover:text-white transition-all min-h-[44px]\">\r\n Clear Inputs\r\n <\/button>\r\n <button type=\"submit\" id=\"range-submit\" class=\"w-full sm:flex-1 bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-bold text-xs uppercase tracking-wider rounded-xl py-3 px-4 hover:scale-[1.01] hover:shadow-xl hover:shadow-emerald-500\/10 active:scale-95 transition-all min-h-[44px]\">\r\n Compute Performance Analytics\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- Range Results Board -->\r\n <div id=\"range-results\" class=\"hidden w-full opacity-0 transition-all duration-500 transform translate-y-8 space-y-4\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n \r\n <!-- Metric 1: Battery Energy -->\r\n <div onclick=\"showModal('energy')\" class=\"interactive-card group cursor-pointer bg-zinc-900\/60 border border-zinc-800 rounded-2xl p-4 sm:p-5 flex flex-col justify-between hover:bg-emerald-950\/10 min-h-[100px]\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider\">Energy Capacity<\/span>\r\n <span class=\"text-[8px] sm:text-[9px] font-bold text-emerald-400 uppercase bg-emerald-500\/10 px-1.5 py-0.5 rounded\">Math<\/span>\r\n <\/div>\r\n <div class=\"flex items-baseline gap-1 text-white group-hover:text-emerald-400 transition-colors\">\r\n <span class=\"text-2xl sm:text-3xl font-bold tracking-tight font-mono number-animate\" id=\"res-energy\">0.00<\/span>\r\n <span class=\"text-xs font-bold text-zinc-500\">kWh<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Metric 2: Estimated Range -->\r\n <div onclick=\"showModal('range')\" class=\"interactive-card group cursor-pointer bg-zinc-900\/60 border border-zinc-800 rounded-2xl p-4 sm:p-5 flex flex-col justify-between hover:bg-emerald-950\/10 min-h-[100px]\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider\">Max Range<\/span>\r\n <span class=\"text-[8px] sm:text-[9px] font-bold text-emerald-400 uppercase bg-emerald-500\/10 px-1.5 py-0.5 rounded\">Math<\/span>\r\n <\/div>\r\n <div class=\"flex items-baseline gap-1 text-white group-hover:text-emerald-400 transition-colors\">\r\n <span class=\"text-2xl sm:text-3xl font-bold tracking-tight font-mono number-animate\" id=\"res-range\">0.0<\/span>\r\n <span class=\"text-xs font-bold text-zinc-500\">km<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Metric 3: Charge Duration -->\r\n <div onclick=\"showModal('time')\" class=\"interactive-card group cursor-pointer bg-zinc-900\/60 border border-zinc-800 rounded-2xl p-4 sm:p-5 flex flex-col justify-between hover:bg-emerald-950\/10 min-h-[100px]\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider\">Charging Time<\/span>\r\n <span class=\"text-[8px] sm:text-[9px] font-bold text-emerald-400 uppercase bg-emerald-500\/10 px-1.5 py-0.5 rounded\">Math<\/span>\r\n <\/div>\r\n <div class=\"flex items-baseline gap-1 text-white group-hover:text-emerald-400 transition-colors\">\r\n <span class=\"text-2xl sm:text-3xl font-bold tracking-tight font-mono number-animate\" id=\"res-time\">0.0<\/span>\r\n <span class=\"text-xs font-bold text-zinc-500\">hrs<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Metric 4: Cost \/ Km -->\r\n <div onclick=\"showModal('costPerKm')\" class=\"interactive-card group cursor-pointer bg-zinc-900\/60 border border-zinc-800 rounded-2xl p-4 sm:p-5 flex flex-col justify-between hover:bg-emerald-950\/10 min-h-[100px]\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider\">Efficiency Profile<\/span>\r\n <span class=\"text-[8px] sm:text-[9px] font-bold text-emerald-400 uppercase bg-emerald-500\/10 px-1.5 py-0.5 rounded\">Math<\/span>\r\n <\/div>\r\n <div class=\"flex items-baseline gap-1 text-white group-hover:text-emerald-400 transition-colors\">\r\n <span class=\"text-2xl sm:text-3xl font-bold tracking-tight font-mono number-animate\" id=\"res-cost-km\">\u20b90.000<\/span>\r\n <span class=\"text-[10px] font-bold text-zinc-500\">\/ km<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Highlighted Total Billing Box -->\r\n <div onclick=\"showModal('totalBill')\" class=\"cursor-pointer relative overflow-hidden bg-zinc-950 border border-zinc-800 rounded-2xl sm:rounded-3xl p-5 sm:p-6 text-center group hover:scale-[1.01] hover:border-emerald-500\/40 transition-all duration-300\">\r\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-emerald-500\/10 via-transparent to-transparent opacity-60\"><\/div>\r\n <div class=\"relative z-10 flex flex-col items-center\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5\">Estimated Charge Cycle Cost (Full Recharge)<\/span>\r\n <div class=\"text-3xl sm:text-5xl font-extrabold tracking-tight text-emerald-400 font-mono number-animate\" id=\"res-total\">\u20b90.00<\/div>\r\n <div class=\"text-[9px] text-zinc-500 mt-2 flex items-center justify-center gap-1.5 flex-wrap\">\r\n <svg class=\"w-3.5 h-3.5 text-zinc-500 shrink-0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <span>Click here to review detailed calculations and modifiers.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- RIGHT COLUMN: Pack Builder and Dynamic Visualizer (6 Cols) -->\r\n <section class=\"lg:col-span-6 space-y-6 w-full\">\r\n <div class=\"bg-zinc-900\/40 backdrop-blur-xl border border-zinc-800 rounded-2xl sm:rounded-3xl p-5 sm:p-8 shadow-2xl relative overflow-hidden\">\r\n <!-- Tech gradient bar -->\r\n <div class=\"absolute top-0 left-0 w-full h-[3px] bg-gradient-to-r from-blue-500 to-indigo-500\"><\/div>\r\n\r\n <div class=\"flex items-center justify-between mb-5 sm:mb-6\">\r\n <div class=\"flex items-center gap-2 sm:gap-3\">\r\n <div class=\"w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-blue-500\/10 border border-blue-500\/20 text-blue-400 flex items-center justify-center font-bold text-xs sm:text-sm\">02<\/div>\r\n <h2 class=\"heading-font text-base sm:text-lg font-bold text-white\">Lattice Pack Builder<\/h2>\r\n <\/div>\r\n <span class=\"text-[8px] sm:text-[10px] text-blue-400 bg-blue-400\/10 px-2 py-0.5 sm:py-1 rounded border border-blue-500\/20 uppercase tracking-widest font-semibold\">CAD Tool<\/span>\r\n <\/div>\r\n\r\n <!-- Pack construction Error Log -->\r\n <div id=\"pack-error\" class=\"hidden bg-red-950\/40 text-red-400 px-4 py-3 rounded-xl border border-red-900\/50 text-xs font-medium mb-6 text-center\"><\/div>\r\n\r\n <form id=\"pack-form\" class=\"space-y-4 sm:space-y-5\">\r\n <div class=\"grid grid-cols-2 gap-3 sm:gap-4\">\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block\">Target Pack Voltage<\/label>\r\n <div class=\"relative\">\r\n <input type=\"number\" id=\"pb-v-input\" step=\"0.1\" required value=\"72\" placeholder=\"72\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3.5 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all placeholder-zinc-700 min-h-[44px]\">\r\n <span class=\"absolute right-3.5 top-1\/2 -translate-y-1\/2 text-zinc-500 font-bold text-[9px] sm:text-[10px]\">V<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block\">Target Pack Ah<\/label>\r\n <div class=\"relative\">\r\n <input type=\"number\" id=\"pb-c-input\" step=\"0.1\" required value=\"40\" placeholder=\"40\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3.5 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all placeholder-zinc-700 min-h-[44px]\">\r\n <span class=\"absolute right-3.5 top-1\/2 -translate-y-1\/2 text-zinc-500 font-bold text-[9px] sm:text-[10px]\">Ah<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block\">Base Cell Factor Presets<\/label>\r\n <select id=\"pb-cell-input\" required onchange=\"toggleCustomCell(this.value)\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3.5 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-blue-500 outline-none transition-all cursor-pointer min-h-[44px]\">\r\n <option value=\"\" disabled>Select cells...<\/option>\r\n <option value=\"custom\" class=\"bg-zinc-950 font-bold text-blue-400\">Custom Cell Architecture...<\/option>\r\n \r\n <optgroup label=\"Cylindrical Li-ion (NMC\/NCA) Standards\">\r\n <option value=\"3.6|2.6|0.045|0.016\" selected>18650 Standard (3.6V, 2.6Ah, 45g, 16ml)<\/option>\r\n <option value=\"3.6|3.5|0.048|0.016\">18650 High-Capacity (3.6V, 3.5Ah, 48g, 16ml)<\/option>\r\n <option value=\"3.6|3.0|0.047|0.016\">18650 High-Power (3.6V, 3.0Ah, 47g, 16ml)<\/option>\r\n <option value=\"3.6|4.0|0.065|0.024\">21700 Standard (3.6V, 4.0Ah, 65g, 24ml)<\/option>\r\n <option value=\"3.6|4.8|0.068|0.024\">21700 Panasonic Tesla Model 3 (3.6V, 4.8Ah, 68g, 24ml)<\/option>\r\n <option value=\"3.6|5.0|0.069|0.024\">21700 High-Capacity Samsung 50E (3.6V, 5.0Ah, 69g, 24ml)<\/option>\r\n <option value=\"3.7|26.0|0.355|0.133\">4680 Tesla Tabless (3.7V, 26.0Ah, 355g, 133ml)<\/option>\r\n <\/optgroup>\r\n\r\n <optgroup label=\"Cylindrical LiFePO4 (LFP) Standards\">\r\n <option value=\"3.2|1.5|0.040|0.015\">14500 LFP Standard (3.2V, 1.5Ah, 40g, 15ml)<\/option>\r\n <option value=\"3.2|3.2|0.085|0.033\">26650 LFP Power (3.2V, 3.2Ah, 85g, 33ml)<\/option>\r\n <option value=\"3.2|5.0|0.140|0.052\">32650 LFP Standard (3.2V, 5.0Ah, 140g, 52ml)<\/option>\r\n <option value=\"3.2|6.0|0.145|0.056\">32700 LiFePO4 Standard (3.2V, 6.0Ah, 145g, 56ml)<\/option>\r\n <option value=\"3.2|8.0|0.330|0.136\">38120 Headway Power (3.2V, 8.0Ah, 330g, 136ml)<\/option>\r\n <option value=\"3.2|15.0|0.480|0.191\">40152 Headway High-Power (3.2V, 15.0Ah, 480g, 191ml)<\/option>\r\n <\/optgroup>\r\n\r\n <optgroup label=\"Prismatic LiFePO4 (LFP) - Commercial & Utility\">\r\n <option value=\"3.2|50.0|1.40|0.65\">EVE LF50 Prismatic (3.2V, 50Ah, 1.40kg, 0.65L)<\/option>\r\n <option value=\"3.2|100|2.0|0.96\">Prismatic Cell Standard (3.2V, 100Ah, 2.0kg, 0.96L)<\/option>\r\n <option value=\"3.2|105.0|2.0|0.96\">EVE LF105 Prismatic (3.2V, 105Ah, 2.00kg, 0.96L)<\/option>\r\n <option value=\"3.2|150.0|2.65|1.35\">BYD Blade Cell LFP (3.2V, 150Ah, 2.65kg, 1.35L)<\/option>\r\n <option value=\"3.2|200.0|3.90|1.82\">CALB 200Ah Prismatic (3.2V, 200Ah, 3.90kg, 1.82L)<\/option>\r\n <option value=\"3.2|280|5.4|2.4\">Large Prismatic EVE 280K (3.2V, 280Ah, 5.4kg, 2.4L)<\/option>\r\n <option value=\"3.2|302.0|5.7|2.52\">CATL 302Ah Heavy-Duty LFP (3.2V, 302Ah, 5.7kg, 2.52L)<\/option>\r\n <\/optgroup>\r\n\r\n <optgroup label=\"Prismatic NMC - Automotive High Energy\">\r\n <option value=\"3.7|60.0|1.25|0.58\">Samsung SDI 60Ah NMC (3.7V, 60Ah, 1.25kg, 0.58L)<\/option>\r\n <option value=\"3.7|94.0|2.06|0.90\">Samsung SDI 94Ah NMC BMW i3 (3.7V, 94Ah, 2.06kg, 0.90L)<\/option>\r\n <option value=\"3.7|120.0|2.20|0.98\">CATL 120Ah Automotive NMC (3.7V, 120Ah, 2.20kg, 0.98L)<\/option>\r\n <option value=\"3.7|150.0|2.70|1.20\">CATL 150Ah EV Standard (3.7V, 150Ah, 2.70kg, 1.20L)<\/option>\r\n <option value=\"3.7|180.0|3.10|1.40\">LG Chem 180Ah Premium (3.7V, 180Ah, 3.10kg, 1.40L)<\/option>\r\n <option value=\"3.7|240.0|4.30|1.90\">CATL 240Ah Long-Range NMC (3.7V, 240Ah, 4.30kg, 1.90L)<\/option>\r\n <\/optgroup>\r\n\r\n <optgroup label=\"Pouch Cells (NMC\/LFP) - Sleek Profile\">\r\n <option value=\"3.7|35.0|0.72|0.32\">LG Chem 35Ah Pouch (3.7V, 35Ah, 720g, 320ml)<\/option>\r\n <option value=\"3.7|60.0|1.15|0.55\">LG Chem 60Ah Bolt EV Pouch (3.7V, 60Ah, 1.15kg, 0.55L)<\/option>\r\n <option value=\"3.7|78.0|1.42|0.68\">SK On 78Ah Ioniq 5 Pouch (3.7V, 78Ah, 1.42kg, 0.68L)<\/option>\r\n <option value=\"3.2|50.0|1.18|0.60\">Pouch LFP Standard (3.2V, 50Ah, 1.18kg, 0.60L)<\/option>\r\n <\/optgroup>\r\n\r\n <optgroup label=\"Cutting-Edge \/ Sodium-Ion & Experimental\">\r\n <option value=\"3.0|1.5|0.045|0.016\">Sodium-Ion 18650 Gen-1 (3.0V, 1.5Ah, 45g, 16ml)<\/option>\r\n <option value=\"3.1|160.0|2.90|1.45\">CATL Sodium-Ion Prismatic (3.1V, 160Ah, 2.90kg, 1.45L)<\/option>\r\n <option value=\"3.8|100.0|1.45|0.62\">Solid-State Experimental Prismatic (3.8V, 100Ah, 1.45kg, 0.62L)<\/option>\r\n <\/optgroup>\r\n <\/select>\r\n <\/div>\r\n\r\n <!-- Custom Battery Cell Specs -->\r\n <div id=\"pb-custom-cell-container\" class=\"grid grid-cols-2 gap-3 sm:gap-4 hidden\">\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-blue-400 uppercase tracking-wider block\">Cell Volts (V)<\/label>\r\n <input type=\"number\" id=\"pb-custom-v\" step=\"0.01\" placeholder=\"3.6\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3.5 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-blue-500 outline-none transition-all min-h-[44px]\">\r\n <\/div>\r\n <div class=\"space-y-1.5\">\r\n <label class=\"text-[9px] sm:text-[10px] font-bold text-blue-400 uppercase tracking-wider block\">Cell Capacity (Ah)<\/label>\r\n <input type=\"number\" id=\"pb-custom-c\" step=\"0.1\" placeholder=\"5.0\" class=\"w-full bg-zinc-950\/80 border border-zinc-800 rounded-xl px-3.5 py-2.5 sm:py-3 text-base md:text-sm text-white focus:border-blue-500 outline-none transition-all min-h-[44px]\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col sm:flex-row gap-3 pt-3\">\r\n <button type=\"button\" onclick=\"resetPack()\" class=\"w-full sm:w-1\/3 py-3 px-4 rounded-xl border border-zinc-800 text-zinc-400 font-semibold text-xs hover:bg-zinc-800\/40 hover:text-white transition-all min-h-[44px]\">\r\n Clear Inputs\r\n <\/button>\r\n <button type=\"submit\" class=\"w-full sm:flex-1 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-bold text-xs uppercase tracking-wider rounded-xl py-3 px-4 hover:scale-[1.01] hover:shadow-xl hover:shadow-blue-500\/10 active:scale-95 transition-all min-h-[44px]\">\r\n Build Battery Matrix\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- Pack Results Panel -->\r\n <div id=\"pack-results\" class=\"hidden w-full opacity-0 transition-all duration-500 transform translate-y-8 space-y-4\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n <div onclick=\"showModal('pbConfig')\" class=\"interactive-card-blue group cursor-pointer bg-zinc-900\/60 border border-zinc-800 rounded-2xl p-4 sm:p-5 flex flex-col justify-between hover:bg-blue-950\/10 min-h-[100px]\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider\">Topology<\/span>\r\n <span class=\"text-[8px] sm:text-[9px] font-bold text-blue-400 uppercase bg-blue-500\/10 px-1.5 py-0.5 rounded\">Math<\/span>\r\n <\/div>\r\n <div class=\"flex items-baseline gap-1 text-white group-hover:text-blue-400 transition-colors\">\r\n <span class=\"text-2xl sm:text-3xl font-bold tracking-tight font-mono\" id=\"res-pb-config\">0S 0P<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div onclick=\"showModal('pbCells')\" class=\"interactive-card-blue group cursor-pointer bg-zinc-900\/60 border border-zinc-800 rounded-2xl p-4 sm:p-5 flex flex-col justify-between hover:bg-blue-950\/10 min-h-[100px]\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider\">Total Cells<\/span>\r\n <span class=\"text-[8px] sm:text-[9px] font-bold text-blue-400 uppercase bg-blue-500\/10 px-1.5 py-0.5 rounded\">Math<\/span>\r\n <\/div>\r\n <div class=\"flex items-baseline gap-1 text-white group-hover:text-blue-400 transition-colors\">\r\n <span class=\"text-2xl sm:text-3xl font-bold tracking-tight font-mono number-animate\" id=\"res-pb-cells\">0<\/span>\r\n <span class=\"text-xs font-bold text-zinc-500\">pcs<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div onclick=\"showModal('pbVolts')\" class=\"interactive-card-blue group cursor-pointer bg-zinc-900\/60 border border-zinc-800 rounded-2xl p-4 sm:p-5 flex flex-col justify-between hover:bg-blue-950\/10 min-h-[100px]\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider\">Actual Volts<\/span>\r\n <span class=\"text-[8px] sm:text-[9px] font-bold text-blue-400 uppercase bg-blue-500\/10 px-1.5 py-0.5 rounded\">Math<\/span>\r\n <\/div>\r\n <div class=\"flex items-baseline gap-1 text-white group-hover:text-blue-400 transition-colors\">\r\n <span class=\"text-2xl sm:text-3xl font-bold tracking-tight font-mono number-animate\" id=\"res-pb-volts\">0.0<\/span>\r\n <span class=\"text-xs font-bold text-zinc-500\">V<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div onclick=\"showModal('pbAh')\" class=\"interactive-card-blue group cursor-pointer bg-zinc-900\/60 border border-zinc-800 rounded-2xl p-4 sm:p-5 flex flex-col justify-between hover:bg-blue-950\/10 min-h-[100px]\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider\">Capacity<\/span>\r\n <span class=\"text-[8px] sm:text-[9px] font-bold text-blue-400 uppercase bg-blue-500\/10 px-1.5 py-0.5 rounded\">Math<\/span>\r\n <\/div>\r\n <div class=\"flex items-baseline gap-1 text-white group-hover:text-blue-400 transition-colors\">\r\n <span class=\"text-2xl sm:text-3xl font-bold tracking-tight font-mono number-animate\" id=\"res-pb-ah\">0.0<\/span>\r\n <span class=\"text-[10px] font-bold text-zinc-500\">Ah<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Physical Parameters Output -->\r\n <div class=\"bg-zinc-950 border border-zinc-800\/80 rounded-2xl p-4 grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div>\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-500 uppercase block tracking-wider mb-1\">Estimated Weight<\/span>\r\n <span class=\"text-base sm:text-lg font-bold text-white font-mono block\" id=\"res-pb-weight\">0.00 kg<\/span>\r\n <span class=\"text-[9px] text-zinc-500 leading-normal block\">Includes +15% structural\/busbar overhead.<\/span>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-500 uppercase block tracking-wider mb-1\">Approx Footprint (Vol)<\/span>\r\n <span class=\"text-base sm:text-lg font-bold text-white font-mono block\" id=\"res-pb-vol\">0.00 L<\/span>\r\n <span class=\"text-[9px] text-zinc-500 leading-normal block\">Dynamic cylinder spacing layout factored.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Highlighted Total Pack Energy -->\r\n <div onclick=\"showModal('pbEnergy')\" class=\"cursor-pointer relative overflow-hidden bg-zinc-950 border border-zinc-800 rounded-2xl sm:rounded-3xl p-5 sm:p-6 text-center group hover:scale-[1.01] hover:border-blue-500\/40 transition-all duration-300\">\r\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-500\/10 via-transparent to-transparent opacity-60\"><\/div>\r\n <div class=\"relative z-10 flex flex-col items-center\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5\">Total Built Pack Energy<\/span>\r\n <div class=\"text-3xl sm:text-5xl font-extrabold tracking-tight text-blue-400 font-mono number-animate\" id=\"res-pb-energy\">0.000 kWh<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Real-Time Cell Matrix Visualizer View -->\r\n <div class=\"bg-zinc-900\/80 border border-zinc-800 rounded-2xl sm:rounded-3xl p-4 sm:p-5 space-y-3\">\r\n <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-1.5\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block\">Real-time Battery Cell Matrix<\/span>\r\n <span id=\"visual-badge\" class=\"text-[8px] sm:text-[9px] self-start sm:self-auto font-semibold text-emerald-400 bg-emerald-400\/10 border border-emerald-500\/20 px-2 py-0.5 rounded\">Active Schematic<\/span>\r\n <\/div>\r\n \r\n <!-- Swipe-friendly horizontal viewport wrapper -->\r\n <div class=\"relative w-full overflow-x-auto select-none py-4 bg-zinc-950 border border-zinc-800\/80 rounded-2xl flex items-center justify-start p-4 scroller-flat\">\r\n <!-- Visualizer Grid Canvas container -->\r\n <div id=\"visual-canvas\" class=\"flex flex-nowrap gap-3 mx-auto\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col sm:flex-row justify-between text-[9px] text-zinc-500 gap-1 sm:gap-2\">\r\n <span class=\"flex items-center gap-1.5\"><span class=\"w-2 h-2 rounded-full bg-red-500 inline-block\"><\/span> Positive Terminal (+)<\/span>\r\n <span class=\"flex items-center gap-1.5\"><span class=\"w-2 h-2 rounded-full bg-zinc-600 inline-block\"><\/span> Negative Terminal (-)<\/span>\r\n <span class=\"flex items-center gap-1.5\"><span class=\"w-2.5 h-2 rounded bg-indigo-500 inline-block\"><\/span> Parallel Group Conn.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <!-- AI Computational Loading -->\r\n <div id=\"ai-loading\" class=\"hidden w-full flex flex-col items-center justify-center p-8 mt-8 sm:mt-12 mb-8 sm:mb-12\">\r\n <div class=\"relative flex items-center justify-center mb-4\">\r\n <div class=\"animate-ping absolute inline-flex h-12 w-12 rounded-full bg-emerald-400 opacity-20\"><\/div>\r\n <div class=\"w-8 h-8 rounded-full border-t-2 border-emerald-400 animate-spin\"><\/div>\r\n <\/div>\r\n <div id=\"loading-text-el\" class=\"loading-text text-lg sm:text-xl font-bold whitespace-nowrap tracking-wide shimmer-text\">\r\n Thinking...\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Future Features \/ System Spec Grids -->\r\n <section class=\"relative w-full max-w-6xl overflow-hidden rounded-2xl px-2 py-8 sm:py-12 mt-12 sm:mt-16 border-t border-zinc-800\">\r\n <div class=\"relative mb-6 sm:mb-8 flex flex-col gap-1 text-center items-center\">\r\n <p class=\"font-bold text-[9px] sm:text-[10px] text-zinc-500 uppercase tracking-[0.3em]\">Hardware Ecosystem<\/p>\r\n <h2 class=\"heading-font font-extrabold text-xl sm:text-2xl text-white tracking-tight\">Enterprise Infrastructure<\/h2>\r\n <\/div>\r\n <div class=\"relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\" id=\"roadmap-grid\">\r\n <!-- Cards injected by JS -->\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n <!-- Detailed Mathematical Explanations Modal -->\r\n <div id=\"modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-backdrop bg-black\/65 backdrop-blur-md\" onclick=\"closeModal()\">\r\n <div class=\"bg-zinc-900 border border-zinc-800 rounded-2xl sm:rounded-3xl p-5 sm:p-8 max-w-lg w-full shadow-2xl relative max-h-[90vh] overflow-y-auto\" onclick=\"event.stopPropagation()\">\r\n <div class=\"flex justify-between items-start mb-5 sm:mb-6\">\r\n <h3 id=\"modal-title\" class=\"heading-font text-base sm:text-lg font-bold text-white\">Calculation Breakdown<\/h3>\r\n <button onclick=\"closeModal()\" class=\"w-8 h-8 flex items-center justify-center rounded-full bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white transition-colors\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"mb-5\">\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-zinc-400 uppercase tracking-wider block mb-2\">Standard Formula Framework<\/span>\r\n <div id=\"modal-formula\" class=\"font-mono text-[10px] sm:text-xs bg-zinc-950 text-zinc-300 p-3 sm:p-4 rounded-xl border border-zinc-800 whitespace-pre-wrap leading-relaxed overflow-x-auto\"><\/div>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[9px] sm:text-[10px] font-bold text-emerald-400 uppercase tracking-wider block mb-2\">Your Simulation Breakdown<\/span>\r\n <div id=\"modal-calc\" class=\"font-mono text-[10px] sm:text-xs bg-zinc-950 text-emerald-400 p-3 sm:p-4 rounded-xl border border-emerald-950\/50 whitespace-pre-wrap leading-relaxed overflow-x-auto\"><\/div>\r\n <\/div>\r\n <button onclick=\"closeModal()\" class=\"mt-6 sm:mt-8 w-full py-3 bg-zinc-800 text-white hover:bg-zinc-700 rounded-xl font-bold text-xs uppercase tracking-wider transition-all min-h-[44px]\">Close Analytics<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const EV_FEATURES = [\r\n { title: \"Silicon Carbide (SiC) Inverters\", description: \"Configured metrics account for 99% peak power conversion standard in modern driving modules.\", color: \"#10b981\" },\r\n { title: \"BMS Thermal Cutoff Reserve\", description: \"Estimations integrate safety buffers against thermal runaway and cell life extension factors.\", color: \"#3b82f6\" },\r\n { title: \"Battery Degradation Profiles\", description: \"Calculate performance drop-offs as cell cycles exceed standard parameters over continuous duty.\", color: \"#8b5cf6\" },\r\n { title: \"US EPA \/ WLTP Range Standards\", description: \"Evaluated range equations deploy multi-phase dynamic cycles instead of basic constant speed math.\", color: \"#f59e0b\" },\r\n { title: \"Dual Phase DC Fast Charging\", description: \"Integrates standard constant-current, constant-voltage curve simulations for realistic timelines.\", color: \"#06b6d4\" },\r\n { title: \"Active Thermal Overheads\", description: \"Accounts for dynamic liquid cooler power draws in extreme climatic temperature swings.\", color: \"#ec4899\" },\r\n ];\r\n\r\n let currentBreakdowns = {};\r\n\r\n function animateNumber(id, target, decimals = 2, prefix = \"\", suffix = \"\") {\r\n const el = document.getElementById(id);\r\n if (!el) return;\r\n let start = 0;\r\n const duration = 1000;\r\n const startTime = performance.now();\r\n function update(now) {\r\n const progress = Math.min((now - startTime) \/ duration, 1);\r\n const eased = 1 - Math.pow(1 - progress, 4);\r\n const current = start + eased * (target - start);\r\n el.innerText = prefix + current.toLocaleString('en-IN', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) + suffix;\r\n if (progress < 1) requestAnimationFrame(update);\r\n }\r\n requestAnimationFrame(update);\r\n }\r\n\r\n async function showLoading(texts, callback) {\r\n const loader = document.getElementById('ai-loading');\r\n const textEl = document.getElementById('loading-text-el');\r\n loader.classList.remove('hidden');\r\n for (let t of texts) {\r\n textEl.innerText = t;\r\n await new Promise(r => setTimeout(r, 450));\r\n }\r\n loader.classList.add('hidden');\r\n callback();\r\n }\r\n\r\n function showModal(key) {\r\n const data = currentBreakdowns[key];\r\n if (!data) return;\r\n document.getElementById('modal-title').innerText = data.title;\r\n document.getElementById('modal-formula').innerText = data.formula;\r\n document.getElementById('modal-calc').innerText = data.calculation;\r\n document.getElementById('modal').classList.remove('hidden');\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('modal').classList.add('hidden');\r\n }\r\n\r\n function toggleCustomEff(val) {\r\n document.getElementById('custom-eff-container').classList.toggle('hidden', val !== 'custom');\r\n }\r\n function toggleCustomRate(val) {\r\n document.getElementById('custom-rate-container').classList.toggle('hidden', val !== 'custom');\r\n }\r\n function toggleCustomCell(val) {\r\n document.getElementById('pb-custom-cell-container').classList.toggle('hidden', val !== 'custom');\r\n }\r\n\r\n function updateTempLabel(val) {\r\n document.getElementById('temp-val').innerText = `${val}\u00b0C`;\r\n }\r\n\r\n function updateSoCLimits() {\r\n let minInput = document.getElementById('soc-input-min');\r\n let maxInput = document.getElementById('soc-input-max');\r\n let minVal = parseInt(minInput.value);\r\n let maxVal = parseInt(maxInput.value);\r\n\r\n \/\/ Constraint: minimum range buffer check\r\n if (minVal >= maxVal - 60) {\r\n minInput.value = maxVal - 60;\r\n minVal = maxVal - 60;\r\n }\r\n document.getElementById('soc-val').innerText = `${minVal}% - ${maxVal}%`;\r\n }\r\n\r\n document.getElementById('range-form').onsubmit = (e) => {\r\n e.preventDefault();\r\n const v = parseFloat(document.getElementById('v-input').value);\r\n const c = parseFloat(document.getElementById('c-input').value);\r\n const chem = document.getElementById('chem-input').value;\r\n \r\n let eff = document.getElementById('vehicle-input').value;\r\n if (eff === 'custom') eff = parseFloat(document.getElementById('custom-eff-input').value);\r\n else eff = parseFloat(eff);\r\n \r\n let rate = document.getElementById('rate-input').value;\r\n if (rate === 'custom') rate = parseFloat(document.getElementById('custom-rate-input').value);\r\n else rate = parseFloat(rate);\r\n\r\n const socMin = parseInt(document.getElementById('soc-input-min').value);\r\n const socMax = parseInt(document.getElementById('soc-input-max').value);\r\n const temp = parseInt(document.getElementById('temp-slider').value);\r\n const drivingStyle = document.getElementById('style-input').value;\r\n const terrain = document.getElementById('terrain-input').value;\r\n\r\n const errDiv = document.getElementById('range-error');\r\n errDiv.classList.add('hidden');\r\n\r\n if (isNaN(v) || isNaN(c) || isNaN(eff) || isNaN(rate)) {\r\n errDiv.innerText = \"Please verify all numerical fields contain logical values.\";\r\n errDiv.classList.remove('hidden');\r\n return;\r\n }\r\n\r\n const resultsDiv = document.getElementById('range-results');\r\n resultsDiv.classList.add('hidden');\r\n\r\n showLoading([\r\n \"Calibrating system parameters...\",\r\n \"Factoring environmental modifiers...\",\r\n \"Running chemistry models...\",\r\n \"Compiling performance matrix...\"\r\n ], () => {\r\n const rawEnergyKWh = (v * c) \/ 1000;\r\n const usableSoCPercent = (socMax - socMin) \/ 100;\r\n const usableEnergyKWh = rawEnergyKWh * usableSoCPercent;\r\n\r\n \/\/ Environment and temperature impact calibrations\r\n let tempFactor = 1.0;\r\n if (temp < 20) {\r\n tempFactor = 1.0 - (20 - temp) * 0.008; \r\n } else if (temp > 35) {\r\n tempFactor = 1.0 - (temp - 35) * 0.005; \r\n }\r\n\r\n let styleFactor = 1.0;\r\n if (drivingStyle === 'eco') styleFactor = 1.15;\r\n else if (drivingStyle === 'dynamic') styleFactor = 0.80;\r\n\r\n let terrainFactor = 1.0;\r\n if (terrain === 'rolling') terrainFactor = 0.88;\r\n else if (terrain === 'mountainous') terrainFactor = 0.72;\r\n\r\n const compoundCorrectionFactor = tempFactor * styleFactor * terrainFactor;\r\n const realWorldEffWhKm = eff \/ compoundCorrectionFactor;\r\n\r\n const range = (usableEnergyKWh * 1000) \/ realWorldEffWhKm;\r\n\r\n const realisticCRate = chem === \"lithium\" ? 0.2 : 0.15;\r\n let chargePower = Math.min(3300, v * c * realisticCRate);\r\n const chemLoss = chem === \"lithium\" ? 1.05 : chem === \"lifepo4\" ? 1.10 : 1.25;\r\n const chargeDuration = (usableEnergyKWh \/ (chargePower \/ 1000)) * chemLoss;\r\n\r\n const totalBill = usableEnergyKWh * rate;\r\n const costPerKm = totalBill \/ range;\r\n\r\n currentBreakdowns = {\r\n ...currentBreakdowns,\r\n energy: { \r\n title: \"Usable Energy Yield\", \r\n formula: \"Raw Energy = (Voltage \u00d7 Ah) \/ 1000\\nUsable Energy = Raw Energy \u00d7 ((Max SoC - Min SoC) \/ 100)\", \r\n calculation: `Raw: (${v}V \u00d7 ${c}Ah) \/ 1000 = ${rawEnergyKWh.toFixed(3)} kWh\\nLimits: ${socMin}% to ${socMax}% (${(usableSoCPercent*100).toFixed(0)}% Usable)\\nUsable Yield: ${rawEnergyKWh.toFixed(3)} kWh \u00d7 ${usableSoCPercent.toFixed(2)} = ${usableEnergyKWh.toFixed(3)} kWh` \r\n },\r\n range: { \r\n title: \"Corrected Max Range\", \r\n formula: \"Total corrected efficiency calculation incorporating:\\n- Temp Factor: ${tempFactor}\\n- Style Factor: ${styleFactor}\\n- Terrain Factor: ${terrainFactor}\\nRange = Usable Energy (Wh) \/ Corrected Efficiency (Wh\/km)\", \r\n calculation: `Base Consumption: ${eff} Wh\/km\\nCorrection modifier: ${tempFactor.toFixed(2)} [Temp] \u00d7 ${styleFactor.toFixed(2)} [Style] \u00d7 ${terrainFactor.toFixed(2)} [Terrain] = ${compoundCorrectionFactor.toFixed(3)}x\\nReal consumption: ${eff} \/ ${compoundCorrectionFactor.toFixed(3)} = ${realWorldEffWhKm.toFixed(1)} Wh\/km\\nMax Range: ${(usableEnergyKWh * 1000).toFixed(0)} Wh \/ ${realWorldEffWhKm.toFixed(1)} Wh\/km = ${range.toFixed(1)} km` \r\n },\r\n time: { \r\n title: \"Charge Time Profile\", \r\n formula: \"Duration = (Usable Energy (kWh) \/ Charger Power (kW)) \u00d7 Chemistry Loss Multiplier\", \r\n calculation: `Target Usable Energy: ${usableEnergyKWh.toFixed(3)} kWh\\nSimulated Power Limit: ${(chargePower\/1000).toFixed(2)} kW (at standard current limits)\\nChem Loss Factor: ${chemLoss}x\\nResult: (${usableEnergyKWh.toFixed(2)} \/ ${(chargePower\/1000).toFixed(2)}) \u00d7 ${chemLoss} = ${chargeDuration.toFixed(1)} Hours` \r\n },\r\n costPerKm: { \r\n title: \"Financial Efficiency Factor\", \r\n formula: \"Cost per Km = Total Cycle Cost \/ Realised Maximum Range\", \r\n calculation: `Total Cost: \u20b9${totalBill.toFixed(2)}\\nCalculated Range: ${range.toFixed(1)} km\\nCost profile: \u20b9${totalBill.toFixed(2)} \/ ${range.toFixed(1)} km = \u20b9${costPerKm.toFixed(3)}\/km` \r\n },\r\n totalBill: { \r\n title: \"Total Recharge Bill\", \r\n formula: \"Total Cycle Cost = Usable Energy (kWh) \u00d7 Base Unit Grid Tariff\", \r\n calculation: `${usableEnergyKWh.toFixed(3)} kWh \u00d7 \u20b9${rate.toFixed(2)} = \u20b9${totalBill.toFixed(2)}` \r\n }\r\n };\r\n\r\n resultsDiv.classList.remove('hidden');\r\n setTimeout(() => {\r\n resultsDiv.classList.remove('opacity-0', 'translate-y-8');\r\n animateNumber('res-energy', usableEnergyKWh);\r\n animateNumber('res-range', range, 1);\r\n animateNumber('res-time', chargeDuration, 1);\r\n animateNumber('res-cost-km', costPerKm, 3, \"\u20b9\");\r\n animateNumber('res-total', totalBill, 2, \"\u20b9\");\r\n }, 50);\r\n });\r\n };\r\n\r\n document.getElementById('pack-form').onsubmit = (e) => {\r\n e.preventDefault();\r\n const targetV = parseFloat(document.getElementById('pb-v-input').value);\r\n const targetC = parseFloat(document.getElementById('pb-c-input').value);\r\n let cellType = document.getElementById('pb-cell-input').value;\r\n \r\n let cellV, cellC, cellW, cellVolL;\r\n if (cellType === 'custom') {\r\n cellV = parseFloat(document.getElementById('pb-custom-v').value);\r\n cellC = parseFloat(document.getElementById('pb-custom-c').value);\r\n cellW = 0.050; \r\n cellVolL = 0.018; \r\n } else {\r\n const parts = cellType.split('|');\r\n cellV = parseFloat(parts[0]);\r\n cellC = parseFloat(parts[1]);\r\n cellW = parseFloat(parts[2]);\r\n cellVolL = parseFloat(parts[3]);\r\n }\r\n\r\n const errDiv = document.getElementById('pack-error');\r\n errDiv.classList.add('hidden');\r\n\r\n if (isNaN(targetV) || isNaN(targetC) || isNaN(cellV) || isNaN(cellC)) {\r\n errDiv.innerText = \"Please verify all construction values are logically filled.\";\r\n errDiv.classList.remove('hidden');\r\n return;\r\n }\r\n\r\n const resultsDiv = document.getElementById('pack-results');\r\n resultsDiv.classList.add('hidden');\r\n\r\n showLoading([\r\n \"Computing spatial arrangement grid...\",\r\n \"Calculating interconnect resistance limits...\",\r\n \"Balancing parallel group blocks...\",\r\n \"Synthesizing visual CAD assembly...\"\r\n ], () => {\r\n const S = Math.round(targetV \/ cellV);\r\n const P = Math.ceil(targetC \/ cellC);\r\n const totalCells = S * P;\r\n \r\n const actV = S * cellV;\r\n const actC = P * cellC;\r\n const energy = (actV * actC) \/ 1000;\r\n\r\n const totalCellWeightKg = totalCells * cellW;\r\n const packWeightKg = totalCellWeightKg * 1.15;\r\n const packedVolumeL = (totalCells * cellVolL) * 1.25;\r\n\r\n currentBreakdowns = {\r\n ...currentBreakdowns,\r\n pbConfig: { \r\n title: \"Architecture Config\", \r\n formula: \"Series Strings (S) = Round(Target V \/ Cell V)\\nParallel Strings (P) = Ceil(Target Ah \/ Cell Ah)\", \r\n calculation: `Target parameters: ${targetV}V, ${targetC}Ah\\nCell specs: ${cellV}V, ${cellC}Ah\\nSeries: ${targetV}V \/ ${cellV}V = S-factor of ${S}\\nParallel: ${targetC}Ah \/ ${cellC}Ah = P-factor of ${P}` \r\n },\r\n pbCells: { \r\n title: \"Integrated Cell Count\", \r\n formula: \"Total Cell Lattice = Series S \u00d7 Parallel P\", \r\n calculation: `${S} Series blocks \u00d7 ${P} Parallel lines = ${totalCells} Total cells configured` \r\n },\r\n pbVolts: { \r\n title: \"Actual Architectural Volts\", \r\n formula: \"Actual V = S-count \u00d7 Nominal Cell Voltage\", \r\n calculation: `${S} Series cells \u00d7 ${cellV}V = ${actV.toFixed(2)}V Nominal` \r\n },\r\n pbAh: { \r\n title: \"Actual Ah Capacity\", \r\n formula: \"Actual Capacity = P-count \u00d7 Nominal Cell Ah\", \r\n calculation: `${P} Parallel cells \u00d7 ${cellC}Ah = ${actC.toFixed(2)}Ah total package capacity` \r\n },\r\n pbEnergy: { \r\n title: \"Integrated Pack Energy\", \r\n formula: \"Pack Yield = (Actual V \u00d7 Actual Ah) \/ 1000\", \r\n calculation: `(${actV.toFixed(2)}V \u00d7 ${actC.toFixed(2)}Ah) \/ 1000 = ${energy.toFixed(3)} kWh Pack Capacity` \r\n }\r\n };\r\n\r\n resultsDiv.classList.remove('hidden');\r\n setTimeout(() => {\r\n resultsDiv.classList.remove('opacity-0', 'translate-y-8');\r\n document.getElementById('res-pb-config').innerText = `${S}S ${P}P`;\r\n animateNumber('res-pb-cells', totalCells, 0);\r\n animateNumber('res-pb-volts', actV, 1);\r\n animateNumber('res-pb-ah', actC, 1);\r\n animateNumber('res-pb-energy', energy, 3, \"\", \" kWh\");\r\n \r\n document.getElementById('res-pb-weight').innerText = `${packWeightKg.toFixed(2)} kg`;\r\n document.getElementById('res-pb-vol').innerText = `${packedVolumeL.toFixed(2)} L`;\r\n\r\n generateCellVisualizer(S, P);\r\n }, 50);\r\n });\r\n };\r\n\r\n function generateCellVisualizer(S, P) {\r\n const container = document.getElementById('visual-canvas');\r\n container.innerHTML = ''; \r\n\r\n let renderedS = S;\r\n let renderedP = P;\r\n let isSimplified = false;\r\n\r\n \/\/ Simplified showrooms on restricted dynamic viewports\r\n if (S * P > 80) {\r\n renderedS = Math.min(S, 6);\r\n renderedP = Math.min(P, 6);\r\n isSimplified = true;\r\n document.getElementById('visual-badge').innerText = `Simplified Schematic (6S x 6P Showroom)`;\r\n } else {\r\n document.getElementById('visual-badge').innerText = `Active Schematic (Exact Scale)`;\r\n }\r\n\r\n for (let s = 0; s < renderedS; s++) {\r\n const sRow = document.createElement('div');\r\n sRow.className = \"flex flex-col gap-1.5 p-3 bg-zinc-900 border border-zinc-800 rounded-xl relative shrink-0 min-w-[75px]\";\r\n \r\n const seriesTag = document.createElement('div');\r\n seriesTag.className = \"absolute -top-2 left-2 bg-indigo-600 text-white font-mono font-bold text-[7px] sm:text-[8px] px-1.5 py-0.5 rounded\";\r\n seriesTag.innerText = `S-${s+1}`;\r\n sRow.appendChild(seriesTag);\r\n\r\n const pGroup = document.createElement('div');\r\n pGroup.className = \"flex gap-2 mt-2\";\r\n\r\n for (let p = 0; p < renderedP; p++) {\r\n const cell = document.createElement('div');\r\n cell.className = \"w-6 h-8 sm:w-7 sm:h-9 rounded-md bg-zinc-950 border border-zinc-700 relative flex flex-col justify-between p-1 shadow-inner transition-transform hover:scale-105 active:scale-95 cursor-pointer\";\r\n cell.title = `Cell Position: Series Block ${s+1}, Parallel ${p+1}`;\r\n\r\n const posNode = document.createElement('div');\r\n posNode.className = \"w-1.5 h-1.5 rounded-full bg-red-500 mx-auto shrink-0\";\r\n \r\n const negNode = document.createElement('div');\r\n negNode.className = \"w-1.5 h-1.5 rounded-full bg-zinc-600 mx-auto shrink-0\";\r\n\r\n cell.appendChild(posNode);\r\n cell.appendChild(negNode);\r\n pGroup.appendChild(cell);\r\n }\r\n sRow.appendChild(pGroup);\r\n container.appendChild(sRow);\r\n }\r\n\r\n if (isSimplified) {\r\n const label = document.createElement('div');\r\n label.className = \"w-full text-center text-[10px] text-zinc-500 italic mt-2 shrink-0\";\r\n label.innerText = `Scaling active on low-spec displays. Displaying representative cell slices of your custom ${S}S \u00d7 ${P}P system.`;\r\n container.appendChild(label);\r\n }\r\n }\r\n\r\n function resetRange() {\r\n document.getElementById('range-form').reset();\r\n document.getElementById('range-results').classList.add('hidden', 'opacity-0');\r\n updateTempLabel(25);\r\n updateSoCLimits();\r\n }\r\n\r\n function resetPack() {\r\n document.getElementById('pack-form').reset();\r\n document.getElementById('pack-results').classList.add('hidden', 'opacity-0');\r\n }\r\n\r\n const roadmapGrid = document.getElementById('roadmap-grid');\r\n EV_FEATURES.forEach(item => {\r\n const card = document.createElement('div');\r\n card.className = \"interactive-card group relative flex flex-col gap-3 overflow-hidden rounded-2xl border p-5 text-left border-zinc-800 bg-zinc-900\/40 backdrop-blur-sm shadow-sm transition-transform duration-300\";\r\n card.innerHTML = `\r\n <div class=\"pointer-events-none absolute inset-0 rounded-2xl\" style=\"background: radial-gradient(ellipse at 20% 20%, ${item.color}14, transparent 65%)\"><\/div>\r\n <div class=\"relative z-10 flex flex-col gap-1.5 mt-1\">\r\n <h3 class=\"font-bold text-xs sm:text-sm text-white tracking-tight heading-font\">${item.title}<\/h3>\r\n <p class=\"text-[10px] sm:text-xs text-zinc-400 leading-relaxed\">${item.description}<\/p>\r\n <\/div>\r\n <div class=\"absolute bottom-0 left-0 h-[2px] w-0 rounded-full transition-all duration-500 group-hover:w-full\" style=\"background: linear-gradient(to right, ${item.color}80, transparent)\"><\/div>\r\n `;\r\n \r\n \/\/ Mouse interactions with active 3D boundaries for responsive screens\r\n card.onmousemove = (e) => {\r\n const rect = card.getBoundingClientRect();\r\n const x = e.clientX - rect.left, y = e.clientY - rect.top;\r\n const centerX = rect.width \/ 2, centerY = rect.height \/ 2;\r\n card.style.transform = `rotateX(${((y - centerY) \/ centerY) * -8}deg) rotateY(${((x - centerX) \/ centerX) * 8}deg) translateY(-2px)`;\r\n };\r\n card.onmouseleave = () => {\r\n card.style.transform = `rotateX(0deg) rotateY(0deg) translateY(0deg)`;\r\n };\r\n roadmapGrid.appendChild(card);\r\n });\r\n\r\n window.onload = function() {\r\n \/\/ Instantly compute default simulated states on loading\r\n document.getElementById('range-submit').click();\r\n document.querySelector('#pack-form button[type=\"submit\"]').click();\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>EV Studio Pro – Battery Pack Suite EV Studio Pro Advanced Battery Performance Suite Enterprise Design & Simulation Dashboard \u2022 Created by Evrex Tech Pvt Ltd 01 Dynamic Performance Tool Active Studio Battery Nominal V V Battery Capacity Ah Battery Chemistry Select…Lithium-Ion NMCLiFePO4 (LFP)Lead-Acid \/ Graphene Vehicle Footprint Select…E-Bicycle (~15 Wh\/km)E-Scooter (~30 Wh\/km)E-Motorcycle (~45 Wh\/km)E-Rickshaw […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3115,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3626","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"evrex.automotive","author_link":"https:\/\/evrex.in\/author\/evrex-automotive"},"uagb_comment_info":0,"uagb_excerpt":"EV Studio Pro – Battery Pack Suite EV Studio Pro Advanced Battery Performance Suite Enterprise Design & Simulation Dashboard \u2022 Created by Evrex Tech Pvt Ltd 01 Dynamic Performance Tool Active Studio Battery Nominal V V Battery Capacity Ah Battery Chemistry Select…Lithium-Ion NMCLiFePO4 (LFP)Lead-Acid \/ Graphene Vehicle Footprint Select…E-Bicycle (~15 Wh\/km)E-Scooter (~30 Wh\/km)E-Motorcycle (~45 Wh\/km)E-Rickshaw…","_links":{"self":[{"href":"https:\/\/evrex.in\/wp-json\/wp\/v2\/pages\/3626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evrex.in\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evrex.in\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evrex.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evrex.in\/wp-json\/wp\/v2\/comments?post=3626"}],"version-history":[{"count":11,"href":"https:\/\/evrex.in\/wp-json\/wp\/v2\/pages\/3626\/revisions"}],"predecessor-version":[{"id":3741,"href":"https:\/\/evrex.in\/wp-json\/wp\/v2\/pages\/3626\/revisions\/3741"}],"up":[{"embeddable":true,"href":"https:\/\/evrex.in\/wp-json\/wp\/v2\/pages\/3115"}],"wp:attachment":[{"href":"https:\/\/evrex.in\/wp-json\/wp\/v2\/media?parent=3626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}