<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* Reset e alinhamento à direita na WebView */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: transparent !important;
            display: flex;
            justify-content: flex-end; 
            align-items: center;
            overflow: hidden;
        }

        .traffic-container {
            display: flex;
            align-items: center;
            gap: 6px;
            padding-right: 8px;
        }

        /* Container das Setas (Sem Nuvem) */
        .arrows-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px; /* Espaço entre as setas */
            width: 20px;
            height: 20px;
        }

        /* Estilo base para as setas */
        .arrow {
            font-size: 10px; /* Aumentei um pouco o tamanho já que não tem a nuvem */
            z-index: 2;
            filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
        }

        /* Seta Verde (Download) - Descendo */
        .fa-arrow-down {
            color: #00ff00;
            animation: move-down-3d 1s ease-in-out infinite;
            filter: drop-shadow(0 0 4px rgba(0, 255, 0, 0.7));
        }

        /* Seta Vermelha (Upload) - Subindo */
        .fa-arrow-up {
            color: #ff0000;
            animation: move-up-3d 1s ease-in-out infinite;
            filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.7));
        }

        /* Texto de velocidade */
        .speed-label {
            color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 10px; 
            font-weight: bold;
            white-space: nowrap;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
        }

        /* Animação Seta Verde (Para baixo) */
        @keyframes move-down-3d {
            0%, 100% { transform: translateY(-3px) scale(0.9); opacity: 0.6; }
            50% { transform: translateY(3px) scale(1.2); opacity: 1; }
        }

        /* Animação Seta Vermelha (Para cima) */
        @keyframes move-up-3d {
            0%, 100% { transform: translateY(3px) scale(0.9); opacity: 0.6; }
            50% { transform: translateY(-3px) scale(1.2); opacity: 1; }
        }
    </style>
</head>
<body>

    <div class="traffic-container">
        <div class="arrows-wrapper">
            <i class="fas fa-arrow-down arrow"></i>
            <i class="fas fa-arrow-up arrow"></i>
        </div>

        <div class="speed-label">
            <span id="kbps-val">0</span> kbps
        </div>
    </div>

    <script>
        function updateSpeed() {
            const el = document.getElementById('kbps-val');
            // Gera valores randômicos entre 100 e 999
            let value = Math.floor(Math.random() * (999 - 100 + 1)) + 100;
            el.innerText = value;
        }
        // Atualiza a cada 1 segundo
        setInterval(updateSpeed, 1000);
        updateSpeed();
    </script>

</body>
</html>