Infinix Dicom Viewer -
.viewer-area flex: 1; padding: 20px; background: #2c2c2c; position: relative;
.zoom-controls position: absolute; bottom: 20px; right: 20px; background: rgba(0,0,0,0.7); border-radius: 8px; padding: 8px; display: flex; gap: 10px;
<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> Infinix Dicom Viewer
.zoom-controls button:hover background: #3498db; color: white;
<!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; .viewer-area flex: 1
@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>
.control-group button width: 100%; padding: 8px; margin-top: 5px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; .zoom-controls position: absolute
.canvas-container display: flex; justify-content: center; align-items: center; background: #1a1a1a; border-radius: 10px; overflow: auto; min-height: 500px; position: relative;
.control-group margin-bottom: 20px;
.container max-width: 1400px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;
.info-panel h3 font-size: 14px; margin-bottom: 10px; color: #333;
