<?php
$user_agent = $_SERVER['HTTP_USER_AGENT'];
?>

<div class="container-zz mx-auto">
    <div style="padding: 10px;">
        <h2 style="font-size: 25px;">Your User Agent is:</h2>
        <p style="font-size: 25px;"><?php echo $user_agent; ?></p>
        
        <?php
        // Additional description text based on common user agent patterns
        if (strpos($user_agent, 'Firefox') !== false) {
            echo "<p style='font-size: 20px;'>Used Browser Mozilla Firefox.</p>";
        } elseif (strpos($user_agent, 'Chrome') !== false) {
            echo "<p style='font-size: 20px;'>Used Browser Google Chrome.</p>";
        } elseif (strpos($user_agent, 'Safari') !== false) {
            echo "<p style='font-size: 20px;'>Used Browser Apple Safari.</p>";
        } elseif (strpos($user_agent, 'Opera') !== false) {
            echo "<p style='font-size: 20px;'>Used Browser Opera.</p>";
        } elseif (strpos($user_agent, 'Edge') !== false) {
            echo "<p style='font-size: 20px;'>Used Browser Microsoft Edge.</p>";
        } elseif (strpos($user_agent, 'Trident') !== false) {
            echo "<p style='font-size: 20px;'>Used Browser Internet Explorer.</p>";
        } else {
            echo "<p style='font-size: 20px;'>We couldn't determine your browser from the user agent string.</p>";
        }
        ?>
    </div>
</div>

<style>
    .container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
    .mx-auto{margin-left:auto;margin-right:auto}
    .my-20{margin-top:5rem;margin-bottom:5rem}
</style>
