Liquid Glass JS

<!-- يعتمد على html2canvas لأخذ عيّنة من الخلفية -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="container.js"></script>
<script src="button.js"></script>

<script>
  // زر زجاجي
  const button = new Button({
    text: 'Mahmoud', size: 32, type: 'rounded',
    onClick: () => alert('Hello Glass!')
  })
  document.body.appendChild(button.element)

  // حاوية بأزرار متداخلة (الزجاج بيأخذ عيّنة من الأب)
  const bar = new Container({ borderRadius: 24, type: 'pill', tintOpacity: 0.3 })
  bar.addChild(button)
</script>