.upload-btn:hover transform: translateY(-2px);
.controls margin-top: 20px;
@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> Infinix Dicom Viewer
.control-group label display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #333;
.header h1 font-size: 28px; margin-bottom: 5px; .upload-btn:hover transform: translateY(-2px)
<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>
.zoom-controls button:hover background: #3498db; color: white; .controls margin-top: 20px
.info-panel margin-top: 20px; padding: 15px; background: white; border-radius: 8px; border: 1px solid #e0e0e0;
<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>
.header p opacity: 0.9; font-size: 14px;