.header background: linear-gradient(135deg, #2c3e50, #3498db); color: white; padding: 20px 30px; text-align: center;
.zoom-controls button:hover background: #3498db; color: white;
<div class="control-group"> <label>🔄 Rotation & Flip</label> <button id="rotateLeftBtn">Rotate Left</button> <button id="rotateRightBtn">Rotate Right</button> <button id="flipHBtn">Flip H</button> <button id="flipVBtn">Flip V</button> </div> </div> Infinix Dicom Viewer
@media (max-width: 768px) .sidebar width: 100%; border-right: none; border-bottom: 1px solid #e0e0e0; .main-content flex-direction: column; </style> </head> <body> <div class="container"> <div class="header"> <h1>🏥 Infinix DICOM Viewer</h1> <p>Professional Medical Image Viewer | DICOM Support</p> </div>
<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> .header background: linear-gradient(135deg
.canvas-container display: flex; justify-content: center; align-items: center; background: #1a1a1a; border-radius: 10px; overflow: auto; min-height: 500px; position: relative;
<div class="control-group"> <label>🔍 Zoom & Pan</label> <button id="resetViewBtn">Reset View</button> <button id="fitToWindowBtn">Fit to Window</button> </div> padding: 20px 30px
I'll help you develop a web application. This viewer will load DICOM files, display medical images, and provide basic manipulation features.