Infinix Dicom Viewer -

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

.info-panel h3 font-size: 14px; margin-bottom: 10px; color: #333;

.upload-btn:hover transform: translateY(-2px);

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

.control-group margin-bottom: 20px;

.upload-section margin-bottom: 30px;

<div class="controls"> <div class="control-group"> <label>🎨 Window Level</label> <input type="range" id="windowCenter" min="-1000" max="3000" value="400" step="1"> <label style="font-size: 11px;">Center: <span id="centerVal">400</span></label> <input type="range" id="windowWidth" min="1" max="4000" value="1500" step="1"> <label style="font-size: 11px;">Width: <span id="widthVal">1500</span></label> </div> .control-group label display: block

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

<div class="main-content"> <div class="sidebar"> <div class="upload-section"> <input type="file" id="dicomFileInput" accept=".dcm,.dic" style="display: none;"> <button class="upload-btn" onclick="document.getElementById('dicomFileInput').click()"> 📁 Load DICOM File </button> <div class="file-info" id="fileInfo">No file loaded</div> </div>

<div class="control-group"> <label>🔍 Zoom & Pan</label> <button id="resetViewBtn">Reset View</button> <button id="fitToWindowBtn">Fit to Window</button> </div> .info-panel h3 font-size: 14px

.sidebar width: 280px; background: #f8f9fa; border-right: 1px solid #e0e0e0; padding: 20px; overflow-y: auto;

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