.viewer-area flex: 1; padding: 20px; background: #2c2c2c; position: relative;
<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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Infinix DICOM Viewer - Medical Image Viewer</title> <style> * margin: 0; padding: 0; box-sizing: border-box; body font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; Infinix Dicom Viewer
.info-panel h3 font-size: 14px; margin-bottom: 10px; color: #333;
.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; .viewer-area flex: 1
.zoom-controls position: absolute; bottom: 20px; right: 20px; background: rgba(0,0,0,0.7); border-radius: 8px; padding: 8px; display: flex; gap: 10px;
.status margin-top: 10px; padding: 10px; background: #e8f4f8; border-radius: 5px; font-size: 12px; text-align: center; 🎨 Window Level<
<div class="info-panel"> <h3>📋 DICOM Information</h3> <div class="info-content" id="dicomInfo"> No DICOM data loaded </div> </div> </div>