tracz-produktivitas

byHadi Setiawan

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Widget Produktivitas Tracz</title> <style> /* Desain tombol utama yang mengambang */ .floating-btn { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background-color: #4ade80; color: #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 9999; /* Memastikan berada di lapisan atas halaman web Anda */ user-select: none; } /* Panel konten yang muncul saat tombol diklik */ .widget-panel { display: none; position: fixed; bottom: 90px; right: 20px; width: 300px; height: 400px; background-color: #222; border: 1px solid #444; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 9999; color: #fff; padding: 15px; } </style> </head> <body> <!-- Konten Halaman Utama --> <h1>Halaman Web Utama</h1> <p>Ini adalah contoh halaman web biasa.</p> <!-- Komponen Mengambang --> <div class="floating-btn" id="shortcutBtn">Tracz</div> <div class="widget-panel" id="widgetPanel"> <h3>Tracz Panel</h3> <p>Gunakan area ini untuk catatan produktivitas atau integrasi internal halaman web Anda.</p> </div> <script> const btn = document.getElementById('shortcutBtn'); const panel = document.getElementById('widgetPanel'); // Fungsi menyembunyikan/menampilkan panel btn.addEventListener('click', () => { if (panel.style.display === 'block') { panel.style.display = 'none'; } else { panel.style.display = 'block'; } }); </script> </body> </html>