.rotate-button:hover background: rgba(0, 0, 0, 0.9); transform: scale(1.05);
setupEventListeners() // Toggle menu this.rotateBtn.addEventListener('click', (e) => e.stopPropagation(); this.rotationMenu.classList.toggle('active'); );
// Handle orientation change for auto-rotate window.addEventListener('orientationchange', () => if (this.isAutoRotate) this.handleOrientationChange(); ); rotate the screen shortcut
document.body.appendChild(notification); setTimeout(() => notification.remove(), 2000);
/* Optional: Add rotation animation */ .rotating animation: rotateEffect 0.3s ease; .rotate-button:hover background: rgba(0
.rotate-icon width: 20px; height: 20px; fill: white;
1. HTML Structure <div class="rotation-shortcut"> <button id="rotateBtn" class="rotate-button" title="Rotate Screen"> <svg class="rotate-icon" viewBox="0 0 24 24"> <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v4l5-5-5-5v4z"/> </svg> <span>Rotate</span> </button> <div class="rotation-menu" id="rotationMenu"> <button data-rotation="0">Default (0°)</button> <button data-rotation="90">Rotate 90°</button> <button data-rotation="180">Rotate 180°</button> <button data-rotation="270">Rotate 270°</button> <button data-rotation="auto">Auto-rotate</button> </div> </div> 2. CSS Styling .rotation-shortcut position: fixed; bottom: 20px; right: 20px; z-index: 9999; if (this.isAutoRotate) this.handleOrientationChange()
.rotation-menu button padding: 10px 16px; border: none; background: white; text-align: left; cursor: pointer; transition: background 0.2s;