common.html

<!-- Shared UI fragment: loader, modal dialog, and navigation helpers -->
<style>
#loader{position:fixed;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,0.2);backdrop-filter:blur(6px)}
.spinner{width:48px;height:48px;border:5px solid #c7c7c7;border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}
#loader-text{font-weight:600}
dialog{border:none;border-radius:8px;padding:16px}
dialog::backdrop{background:rgba(0,0,0,0.25);backdrop-filter:blur(6px)}
</style>
<!-- Full-page loader overlay -->
<div id="loader"><div class="spinner"></div><div id="loader-text">Loading...</div></div>
<!-- Basic modal dialog for status messages -->
<dialog id="dialog"><p id="dialog-text"></p><div class="actions"><button type="button" onclick="closeDialog()">Close</button></div></dialog>
<script>
// Show loader with optional message
function showLoader(message){document.getElementById('loader-text').textContent=message||'Loading...';document.getElementById('loader').style.display='flex';}
// Hide loader overlay
function hideLoader(){document.getElementById('loader').style.display='none';}
// Show modal dialog with message
function showDialog(message){document.getElementById('dialog-text').textContent=message||'';document.getElementById('dialog').showModal();}
// Close modal dialog
function closeDialog(){document.getElementById('dialog').close();}
// Simple section navigation helper. Expects `window.SECTIONS` array.
function navigate(id){
  var ids = Array.isArray(window.SECTIONS)? window.SECTIONS : [];
  ids.forEach(function(sec){
    var nav = document.getElementById('nav-'+sec); if(nav) nav.classList.remove('active');
    var el = document.getElementById(sec); if(el) el.hidden = true;
  });
  var sel=document.getElementById(id); if(sel) sel.hidden=false;
  var navSel=document.getElementById('nav-'+id); if(navSel) navSel.classList.add('active');
}
</script>