+ {/* Header section - EXACT COPY from PHDiagramModern */}
+
+ )}
+
+ {!cycleData && (
+
+
+
+ {/* COP Info - EXACT COPY from PHDiagramModern */}
+ {cycleData.performance && (
+ + Thermodynamic Cycle {cycleData.refrigerant} +
+
+ COP (Heat Pump) = {cycleData.performance.cop.toFixed(2)} / COP (Refrigerator) = {(cycleData.performance.cop - 1).toFixed(2)}
+
+ )}
+
+ {/* Performance Cards - ELEGANT WHITE DESIGN */}
+
+
+
+ {/* Cycle State Points - ELEGANT WHITE CARDS */}
+ + ⚡ + Performance Metrics +
+
+ {/* COP Card */}
+
+
+
+
+ {/* Cooling Capacity Card */}
+
+
+
+ 🎯
+
+
+
+
+ COP
+
+
+ Coefficient
+
+
+ {cycleData.performance.cop.toFixed(2)}
+
+
+
+
+ {/* Compressor Power Card */}
+
+
+
+ ❄️
+
+
+
+
+ Cooling
+
+
+ Capacity
+
+
+ {coolingCapacity.toFixed(1)}
+
+ kW
+
+
+
+
+
+ {/* Compression Ratio Card */}
+
+
+
+ ⚙️
+
+
+
+
+ Power
+
+
+ Compressor
+
+
+ {compressorPower.toFixed(1)}
+
+ kW
+
+
+
+
+
+
+
+ 📊
+
+
+
+
+ Ratio
+
+
+ Compression
+
+
+ {cycleData.performance.compression_ratio.toFixed(2)}
+
+
+
+ + 🔄 + Cycle State Points +
+
+ {cycleData.points.map((p, index) => {
+ // Define icons and colors for each point
+ const pointStyles = [
+ { icon: '🌡️', color: '#3b82f6', bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', label: 'Point 1' },
+ { icon: '🔥', color: '#ef4444', bg: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)', label: 'Point 2' },
+ { icon: '💧', color: '#10b981', bg: 'linear-gradient(135deg, #10b981 0%, #059669 100%)', label: 'Point 3' },
+ { icon: '❄️', color: '#06b6d4', bg: 'linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)', label: 'Point 4' }
+ ];
+ const style = pointStyles[index] || pointStyles[0];
+
+ return (
+
+
+ {/* Decorative gradient bar */}
+
+
+ {/* Header with icon */}
+
+ );
+ })}
+
+
+
+ {/* Properties Grid */}
+
+ {style.icon}
+
+
+
+
+ {p.description}
+
+
+ {style.label}
+
+
+ {/* Pressure */}
+
+
+
+ Pressure
+
+
+ {p.pressure.toFixed(2)} bar
+
+
+
+ {/* Temperature */}
+
+
+ Temperature
+
+
+ {(p.temperature || 0).toFixed(1)} °C
+
+
+
+ {/* Enthalpy */}
+
+
+ Enthalpy
+
+
+ {(p.enthalpy || 0).toFixed(1)} kJ/kg
+
+
+
+
+ )}
+
+ {loading ? 'Calculating cycle...' : 'Adjust sliders — results will appear here (auto-calculated)'}
+
+