Alerts

Alert components for displaying success, error, warning, and info messages

Auto-Dismiss Script

Success Alert

---

source

create_success_alert

def create_success_alert(
    message:str, # The success message to display
    timeout_ms:int=3000, # Time in milliseconds before auto-dismiss
)->FT: # Div element containing the success alert

Create a success alert that auto-dismisses.

# Example: Create a success alert
create_success_alert("Configuration saved successfully!")

<div id="alert-container">
  <div class="alert alert-success shadow-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="w-6 h-6 stroke-success-content"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Configuration saved successfully!</span>  </div>
<script>
        // Clear any existing timeout
        if (window.alertTimeout) {
            clearTimeout(window.alertTimeout);
            clearTimeout(window.alertFadeTimeout);
        }

        // Remove any existing alert immediately
        var existingAlert = document.getElementById('alert-container');
        if (existingAlert && existingAlert !== document.currentScript.parentElement) {
            existingAlert.remove();
        }

        // Set new timeout for this alert
        window.alertTimeout = setTimeout(function() {
            var alertEl = document.getElementById('alert-container');
            if (alertEl) {
                alertEl.style.transition = 'opacity 0.5s';
                alertEl.style.opacity = '0';
                window.alertFadeTimeout = setTimeout(function() {
                    if (alertEl) {
                        alertEl.remove();
                    }
                }, 500);
            }
        }, 3000);
    </script></div>

Error Alert

---

source

create_error_alert

def create_error_alert(
    message:str, # The error message to display
    details:Optional=None, # Optional additional details text
)->FT: # Div element containing the error alert

Create an error alert with optional details.

# Example: Create an error alert
create_error_alert("Failed to save configuration", "Invalid port number")

<div id="alert-container">
  <div class="alert alert-error shadow-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="w-6 h-6 stroke-error-content"><path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Failed to save configuration</span><span class="text-sm text-base-content/60">Invalid port number</span>  </div>
</div>

Warning Alert

---

source

create_warning_alert

def create_warning_alert(
    message:str, # The warning message to display
    details:Optional=None, # Optional additional details text
)->functools.partial(<function ft_hx at 0x7fb82481ba60>, 'div'): # Div element containing the warning alert

Create a warning alert with optional details.

# Example: Create a warning alert
create_warning_alert("Configuration incomplete", "Some optional fields are empty")

<div id="alert-container">
  <div class="alert alert-warning shadow-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="w-6 h-6 stroke-warning-content"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Configuration incomplete</span><span class="text-sm text-base-content/60">Some optional fields are empty</span>  </div>
</div>

Info Alert

---

source

create_info_alert

def create_info_alert(
    message:str, # The info message to display
    details:Optional=None, # Optional additional details text
)->FT: # Div element containing the info alert

Create an info alert with optional details.

# Example: Create an info alert
create_info_alert("New feature available", "Check out the updated settings page")

<div id="alert-container">
  <div class="alert alert-info shadow-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="w-6 h-6 stroke-info-content"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>New feature available</span><span class="text-sm text-base-content/60">Check out the updated settings page</span>  </div>
</div>