index.html

<main class="container">
    <header>
        <h1></h1>
    </header>
    <section class="video-section">
        <video class="input_video" aria-label="Vídeo de entrada"></video>
    </section>
    <section class="canvas-section">
        <div class="canvas-container" style="display: flex; justify-content: center; align-items: center;">
            <canvas class="output_canvas" width="1280" height="720" style="max-width: 100%; height: auto;">
                Seu navegador não suporta o elemento Canvas. Por favor, use um navegador moderno.
            </canvas>
        </div>
    </section>
    <div class="loading" role="status" aria-live="polite" style="background-color: rgba(0, 0, 0, 0.8); color: white;">
        <div class="spinner" aria-hidden="true"></div>
        <div class="message">
            Carregando...
        </div>
    </div>
    <figure class="abs logo">
        <a href="http://www.mediapipe.dev" target="_blank" aria-label="Visite o site oficial do MediaPipe">
            <img class="logo" src="logo_white.png" alt="Logo do MediaPipe" style="height: 50px;">
            <figcaption class="title">MediaPipe</figcaption>
        </a>
    </figure>
    <div class="shoutout">
        <div>
            <a href="https://solutions.mediapipe.dev/face_mesh" aria-label="Saiba mais sobre a solução Face Mesh do MediaPipe">
                O Brasileiro é Foda!
            </a>
        </div>
    </div>
    <button id="toggle-control-panel" aria-expanded="false" aria-controls="control-panel">
        Mostrar/Ocultar Painel de Controle
    </button>
    <div class="control-panel" id="control-panel" style="display: none;">
        <!-- Opções de controle aqui -->
    </div>
</main>