Escriba un código para una aplicación web en HTML y JavaScript que permita al usuario ingresar su dirección de correo electrónico y mostrar un mensaje de confirmación personalizado. El mensaje debe incluir el nombre del usuario, cuya información se obtendrá de un servicio API ficticio llamado "ServicioAPI" utilizando una promesa en JavaScript.
 ```html

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Confirmación de Correo Electrónico</title>

    <script src="app.js"></script>

</head>

<body>

    <h2>Iniciar la Confirmación del Email</h2>

    <form id="emailForm">

        <label for="userEmail">Dirección de Correo Electrónico:</label>

        <input type="email" id="userEmail" required placeholder="ejemplo@example.com">

        <button type="submit">Confirmar Email</button>

    </form>

    <div id="confirmationMessage"></div>

</body>

</html>

```

```javascript

// app.js

document.addEventListener('DOMContentLoaded', function() {

    const emailForm = document.getElementById('emailForm');

    emailForm.addEventListener('submit', async function(event) {

        event.preventDefault(); // Prevenir el envío por defecto del formulario

        const userEmail = document.getElementById('userEmail').value;

        try {

            const userName = await getUserNameFromApi(userEmail); // Suponiendo que esta función devuelve una promesa

            displayConfirmationMessage(userName);

        } catch (error) {

            console.log('Error al obtener el nombre del usuario:', error);

        }

    });


    async function getUserNameFromApi(email) {

        // Simulando una llamada a un API y retornando una promesa con el nombre de usuario

        return new Promise((resolve, reject) => {

            setTimeout(() => {

                const response = { isSuccess: true, userName: 'Juan Pérez' }; // Respuesta ficticia del servicio API

                if (response.isSuccess) {

                    resolve(response);

                } else {

                    reject(new Error('Error al obtener el nombre del usuario'));

                }

            }, 1000); // Simula un retraso de 1 segundo en la respuesta API

        });

    }


    function displayConfirmationMessage(userName) {

        const confirmationDiv = document.getElementById('confirmationMessage');

        confirmationDiv.innerHTML = `<strong>¡Bienvenido, ${userName}!</strong><br>

                                      <p>Su mensaje de confirmación ha sido recibido.</p>`;

    }

});

```