Update index.html

index.html

@@ -28,16 +28,26 @@
  .popup {
  display: none;
  position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #fff;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(51, 51, 51, 0.9); /* Dark gray with some transparency */
+ z-index: 1000;
+ overflow: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .popup-content {
+ background-color: #333; /* Dark gray */
  border: 2px solid #333;
  padding: 20px;
- z-index: 1000;
- max-width: 80%;
- max-height: 80%;
+ max-width: 65%;
+ max-height: 65%;
  overflow: auto;
+ position: relative; /* Ensure relative positioning for the close button */
  }
 
  .popup img {
@@ -50,6 +60,7 @@
  top: 5px;
  right: 10px;
  cursor: pointer;
+ color: #fff; /* White color for the close button */
  }
  </style>
 </head>
@@ -76,22 +87,25 @@ <h2><a href="lightning:zap@d4tis.me" style="text-decoration:none;color:inherit;"
 
  <!-- QR code popup -->
  <div class="popup" id="qr-popup">
- <span class="popup-close" id="popup-close">&times;</span>
- <img src="qr_code_image.png" alt="QR Code">
- <p><a href="lightning:lnurl1dp68gurn8ghj7ampd3kx2ar0veekzar0wd5xjtnrdakj7tnhv4kxctttdehhwm30d3h82unvwqhkgdr5d9eszvfds0">Scan or Click</a></p>
+ <div class="popup-content">
+ <span class="popup-close" id="popup-close">&times;</span>
+ <img src="qr_code_image.png" alt="QR Code">
+ <p><a href="lightning:lnurl1dp68gurn8ghj7ampd3kx2ar0veekzar0wd5xjtnrdakj7tnhv4kxctttdehhwm30d3h82unvwqhkgdr5d9eszvfds0">Scan or Click</a></p>
+ </div>
  </div>
 
  <a href="https://bitcoin.rocks" class="ping-button" target="_blank"></a>
 
  <script>
  // JavaScript to handle LNURL button click
  document.getElementById('lnurl-button').addEventListener('click', function() {
- document.getElementById('qr-popup').style.display = 'block';
+ document.getElementById('qr-popup').style.display = 'flex';
  });
 
  // Close popup when close button is clicked
  document.getElementById('popup-close').addEventListener('click', function() {
  document.getElementById('qr-popup').style.display = 'none';
  });
  </script>
-
+</body>
+</html>