<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Tvi Fone</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        #phoneContainer {
            width: 100%;
            max-width: 360px;
            margin: 0 auto;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            border-radius: 8px;
        }

        header {
            background:rgb(46, 114, 204);
            color: white;
            padding: 15px;
            font-weight: bold;
            text-align: center;
            border-radius: 8px 8px 0 0;
        }

        .content {
            padding: 15px;
            text-align: center;
        }

        input[type="text"] {
            width: 100%;
            padding: 12px;
            font-size: 1.4em;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin-bottom: 15px;
            text-align: center;
        }

        #keyboard {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        #keyboard button {
            padding: 15px 0;
            font-size: 1.4em;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            background: #ddd;
            transition: background 0.2s;
        }

        #keyboard button:hover {
            background: #ccc;
        }

        .actions button {
            width: 90%;
            padding: 12px;
            margin: 8px auto;
            font-size: 1.1em;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            color: white;
            display: block;
        }

        .callBtn {
            background: #27ae60;
        }

        .endBtn {
            background: #e74c3c;
        }

        .closeBtn {
            background: #7f8c8d;
        }

        .actions button:hover {
            opacity: 0.85;
        }
    </style>
</head>
<body>

<div id="phoneContainer">
    <header>Tvi Fone</header>
    <div class="content">
        <input type="text" id="inputNumber" placeholder="Digite o número...">

        <!-- Teclado Numérico -->
        <div id="keyboard">
            <button onclick="addToInput('1')">1</button>
            <button onclick="addToInput('2')">2</button>
            <button onclick="addToInput('3')">3</button>
            <button onclick="addToInput('4')">4</button>
            <button onclick="addToInput('5')">5</button>
            <button onclick="addToInput('6')">6</button>
            <button onclick="addToInput('7')">7</button>
            <button onclick="addToInput('8')">8</button>
            <button onclick="addToInput('9')">9</button>
            <button onclick="addToInput('*')">*</button>
            <button onclick="addToInput('0')">0</button>
            <button onclick="addToInput('#')">#</button>
        </div>

        <!-- Botões de Ação -->
        <div class="actions">
            <button class="callBtn" onclick="startCall()">📞 Ligar</button>
            <button class="endBtn" onclick="endCall()">🔴 Finalizar</button>
            <button class="closeBtn" onclick="closePopup()">❌ Fechar</button>
        </div>
    </div>
</div>

<script>
    function addToInput(value) {
        document.getElementById('inputNumber').value += value;
    }

    function startCall() {
        let number = document.getElementById('inputNumber').value;
        if (number.trim() !== '') {
            alert('📞 Chamando o número: ' + number);
        } else {
            alert('Digite um número para ligar.');
        }
    }

    function endCall() {
        alert('🔴 Chamada finalizada.');
    }

    function closePopup() {
        window.close();
    }
</script>

</body>
</html>
