implement custom popups for alerts, inputs and confirmations

public/index.html

@@ -248,6 +248,29 @@
     </div>
 </div>
 
+<div id="popupModal" class="modal-overlay hidden">
+    <div class="modal-card popup-card" role="dialog" aria-modal="true" aria-labelledby="popupTitle" aria-describedby="popupDescription">
+        <div class="modal-header">
+            <div class="persona-modal-heading">
+                <p id="popupEyebrow" class="eyebrow">Action</p>
+                <h3 id="popupTitle">Confirm action</h3>
+            </div>
+            <button id="popupClose" type="button" class="icon-button">Close</button>
+        </div>
+        <div class="popup-content">
+            <p id="popupDescription" class="subtitle">Please confirm this action.</p>
+            <label id="popupField" class="field hidden">
+                <span id="popupInputLabel">Value</span>
+                <input id="popupInput" type="text" autocomplete="off"/>
+            </label>
+        </div>
+        <div class="popup-actions">
+            <button id="popupCancel" type="button" class="secondary-action">Cancel</button>
+            <button id="popupConfirm" type="button">Confirm</button>
+        </div>
+    </div>
+</div>
+
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js" defer></script>
 <script src="script.js" defer></script>