Infinix Dicom Viewer -

.header background: linear-gradient(135deg, #2c3e50, #3498db); color: white; padding: 20px 30px; text-align: center;

.status margin-top: 10px; padding: 10px; background: #e8f4f8; border-radius: 5px; font-size: 12px; text-align: center;

.canvas-container display: flex; justify-content: center; align-items: center; background: #1a1a1a; border-radius: 10px; overflow: auto; min-height: 500px; position: relative; Infinix Dicom Viewer

.control-group label display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #333;

.info-content font-size: 11px; color: #666; max-height: 200px; overflow-y: auto; .header background: linear-gradient(135deg

<div class="viewer-area"> <div class="canvas-container" id="canvasContainer"> <canvas id="dicomCanvas"></canvas> <div class="zoom-controls"> <button id="zoomInBtn">+</button> <button id="zoomOutBtn">-</button> </div> </div> <div class="status" id="status"> Ready to load DICOM files </div> </div> </div> </div>

.upload-section margin-bottom: 30px;

.upload-btn background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; width: 100%; transition: transform 0.2s;

<div class="info-panel"> <h3>📋 DICOM Information</h3> <div class="info-content" id="dicomInfo"> No DICOM data loaded </div> </div> </div> padding: 20px 30px

<div class="control-group"> <label>🔍 Zoom & Pan</label> <button id="resetViewBtn">Reset View</button> <button id="fitToWindowBtn">Fit to Window</button> </div>

.header p opacity: 0.9; font-size: 14px;