Javascript

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
</head>
<body>

    <div>
        <h3>Login</h3>
        <form id="loginForm">
            <label for="username">Usuário:</label>
            <input type="text" id="username" name="username" required>
            
            <label for="password">Senha:</label>
            <input type="password" id="password" name="password" required>
            
            <button type="button" onclick="validateForm()">Login</button>
        </form>
        <div id="result" style="margin-top: 10px;"></div>
    </div>

    <script>
        function validateForm() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;

            // Simulando validação no lado do cliente
            if (username === 'usuario' && password === 'senha') {
                document.getElementById('result').innerHTML = 'Login bem-sucedido!';
            } else {
                document.getElementById('result').innerHTML = 'Credenciais inválidas. Tente novamente.';
            }
        }
    </script>
</body>
</html>

				
			

PHP Básico

				
					<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple PHP Model</title>
</head>
<body>
    <h1>Login</h1>

    <?php
    // Verificar se o formulário foi enviado
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        // Simular autenticação (substitua por um sistema seguro em um ambiente de produção)
        $username = 'usuario';
        $password = 'senha';

        // Verificar as credenciais
        if ($_POST['username'] === $username && $_POST['password'] === $password) {
            echo '<p>Login bem-sucedido!</p>';
        } else {
            echo '<p>Credenciais inválidas. Tente novamente.</p>';
        }
    }
    ?>

    <!-- Formulário de login -->
    <form action="" method="post">
        <label for="username">Usuário:</label>
        <input type="text" id="username" name="username" required>

        <label for="password">Senha:</label>
        <input type="password" id="password" name="password" required>

        <button type="submit">Login</button>
    </form>

</body>
</html>

				
			

Bootstrap

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple PHP Model</title>
    <!-- Adicione o link para o Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body class="bg-primary text-white text-center">

    <div class="container mt-5">
        <h1 class="mb-4">Login</h1>

        <?php
        // Verificar se o formulário foi enviado
        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            // Simular autenticação (substitua por um sistema seguro em um ambiente de produção)
            $username = 'usuario';
            $password = 'senha';

            // Verificar as credenciais
            if ($_POST['username'] === $username && $_POST['password'] === $password) {
                echo '<div class="alert alert-success" role="alert">Login bem-sucedido!</div>';
            } else {
                echo '<div class="alert alert-danger" role="alert">Credenciais inválidas. Tente novamente.</div>';
            }
        }
        ?>

        <!-- Formulário de login com classes do Bootstrap -->
        <form action="" method="post" class="mx-auto col-md-6">
            <div class="form-group">
                <label for="username">Usuário:</label>
                <input type="text" id="username" name="username" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="password">Senha:</label>
                <input type="password" id="password" name="password" class="form-control" required>
            </div>

            <button type="submit" class="btn btn-light btn-block">Login</button>
        </form>
    </div>

    <!-- Adicione o link para o Bootstrap JS e jQuery no final do corpo -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

				
			

MYSQL

				
					<?php
// Configurações do banco de dados
$host = 'seu_host_mysql';
$user = 'seu_usuario_mysql';
$pass = 'sua_senha_mysql';
$db = 'seu_banco_de_dados';

// Conectar ao banco de dados
$mysqli = new mysqli($host, $user, $pass, $db);

// Verificar a conexão
if ($mysqli->connect_error) {
    die('Erro de Conexão (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}
?>

				
			
				
					<?php
// Incluir o arquivo de conexão com o banco de dados
include 'bd.php';

// Verificar se o formulário foi enviado
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Obter as credenciais do formulário
    $username = $_POST['username'];
    $password = md5($_POST['password']); // Criptografar a senha usando MD5

    // Consulta SQL para verificar as credenciais no banco de dados
    $query = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
    $result = $mysqli->query($query);

    // Verificar se a consulta retornou algum resultado
    if ($result && $result->num_rows > 0) {
        echo '<div class="alert alert-success" role="alert">Login bem-sucedido!</div>';
        echo '<p>Login: '.$username.'<br>Password: '.$password.'</p>';
    } else {
        echo '<div class="alert alert-danger" role="alert">Credenciais inválidas. Tente novamente.</div>';
        echo '<p>Login: '.$username.'<br>Password: '.$password.'</p>';
    }

    // Fechar a consulta
    $result->close();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple PHP Model</title>
    <!-- Adicione o link para o Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body class="bg-primary text-white text-center">

    <div class="container mt-5">
        <h1 class="mb-4">Login</h1>

        <!-- Formulário de login com classes do Bootstrap -->
        <form action="" method="post" class="mx-auto col-md-6">
            <div class="form-group">
                <label for="username">Usuário:</label>
                <input type="text" id="username" name="username" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="password">Senha:</label>
                <input type="password" id="password" name="password" class="form-control" required>
            </div>

            <button type="submit" class="btn btn-light btn-block">Login</button>
        </form>
    </div>

</body>
</html>
				
			

Azure básico

				
					<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PUC POCOS</title>

    <script src="https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@latest/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle-min.js"> </script>

    <script>
        function falar() {
            var speechConfig = SpeechSDK.SpeechConfig.fromSubscription("7214eb4484ef4781b98c674198a109b9", "brazilsouth");
            speechConfig.speechSynthesisVoiceName = "pt-BR-AntonioNeural";
            speechConfig.SpeechSynthesisLanguage = "pt-BR";

            var synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);
            let inputText = "teste";

            synthesizer.speakTextAsync(
                inputText,
                function (result) {
                    synthesizer.close();
                });

            // The event synthesis completed signals that the synthesis is completed.
            synthesizer.synthesisCompleted = function (s, e) {
                console.log("Reproduziu o texto: " + inputText);
                // Reproduz novamente após 5 segundos
                setTimeout(falar, 5000);
            };
        }
    </script>
</head>

<body>
    <script>falar();</script>
</body>

</html>

				
			

Azure com input text

				
					<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PUC POCOS</title>

    <script src="https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@latest/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle-min.js"> </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <style>
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>

    <script>
        function falar(texto) {
            var speechConfig = SpeechSDK.SpeechConfig.fromSubscription("7214eb4484ef4781b98c674198a109b9", "brazilsouth");
            speechConfig.speechSynthesisVoiceName = "pt-BR-AntonioNeural";
            speechConfig.SpeechSynthesisLanguage = "pt-BR";
            //https://learn.microsoft.com/pt-br/azure/ai-services/speech-service/language-support?tabs=tts
            //https://speech.microsoft.com/audiocontentcreation

            var synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);
            let inputText = texto;

            synthesizer.speakTextAsync(
                inputText,
                function(result) {
                    //window.console.log(result);
                    synthesizer.close();
                    //synthesizer = undefined;
                });

            // The event synthesis completed signals that the synthesis is completed.
            synthesizer.synthesisCompleted = function(s, e) {
                console.log("Reproduziu o texto: " + texto);
            };
        }
    </script>
</head>

<body>
    <div class="center">
        <input type="text" id="textoParaFalar" placeholder="Digite o texto aqui">
        <button class="btn btn-primary" id="falarButton">Falar</button>
    </div>

    <script>
        $(document).ready(function() {
            $("#falarButton").click(function() {
                var textoParaFalar = $("#textoParaFalar").val();
                if (textoParaFalar) {
                    falar(textoParaFalar);
                }
            });
        });
    </script>
</body>

</html>
				
			

Azure Projeto Final

index.php

				
					<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tradutor</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@latest/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle-min.js"> </script>
    <script src="./speech.js"></script>
    <script src="./translate.js"></script>
</head>

<body class="d-flex align-items-center justify-content-center vh-100 bg-light">
    <div class="container-fluid py-3 w-75">
        <div class="row">
            <div class="col-md-6 mx-auto p-4">
                <div class="card card-body p-4">
                    <div class="mb-3 align-self-center">
                        <img decoding="async" src="https://www.crecimg.gov.br/wp-content/uploads/2021/02/logo_pucminas.png" width="80px">
                        <span class="p-4">Projeto Final do Seminário</span>
                    </div>
                    <div class="mb-3">
                        <input class="form-control form-control-lg" placeholder="Digite seu texto aqui" id="inputText">
                    </div>
                    <button class="btn btn-lg btn-primary w-100" onclick="translateText()">Traduzir</button>
                    <div class="mt-4 alert alert-success" id="result"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
				
			

speech.js

				
					function falar(texto) {
    var speechConfig = SpeechSDK.SpeechConfig.fromSubscription("7214eb4484ef4781b98c674198a109b9", "brazilsouth");
    speechConfig.speechSynthesisVoiceName = "en-US-AriaNeural";
    speechConfig.SpeechSynthesisLanguage = "en-US";
    //https://learn.microsoft.com/pt-br/azure/ai-services/speech-service/language-support?tabs=tts
    //https://speech.microsoft.com/audiocontentcreation

    var synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);
    let inputText = texto;

    synthesizer.speakTextAsync(
        inputText,
        function(result) {
            //window.console.log(result);
            synthesizer.close();
            //synthesizer = undefined;
        });

    // The event synthesis completed signals that the synthesis is completed.
    synthesizer.synthesisCompleted = function(s, e) {
        console.log("Reproduziu o texto: " + texto);
    };
}
				
			

translate.php

				
					function translateText() {
    const inputText = document.getElementById('inputText').value;

    // Substitua 'YOUR_API_KEY' pela sua chave da API do Google Translate
    const apiKey = 'AIzaSyAMBmHDBQTeiEVA_AQMwScvqZYV0NF06R4';
    const targetLanguage = 'en';

    const apiUrl = 'https://translation.googleapis.com/language/translate/v2?key=' 
    + apiKey + '&q=' + encodeURIComponent(inputText) + '&target=' + targetLanguage + '';

    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            const translation = data.data.translations[0].translatedText;
            document.getElementById('result').innerText = 'Tradução: ' + translation;
            falar(translation);
        })
        .catch(error => console.error('Erro ao traduzir:', error));
}
				
			

Página de pedidos / index.php

				
					<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PUC POCOS</title>

    <!-- Adicionando Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <!-- Adicionando script do Speech SDK -->
    <script src="https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@latest/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle-min.js"></script>

    <script>
        function falar(texto) {
            var speechConfig = SpeechSDK.SpeechConfig.fromSubscription("7214eb4484ef4781b98c674198a109b9", "brazilsouth");
            speechConfig.speechSynthesisVoiceName = "pt-BR-AntonioNeural";
            speechConfig.SpeechSynthesisLanguage = "pt-BR";

            var synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);

            synthesizer.speakTextAsync(
                texto,
                function(result) {
                    synthesizer.close();
                });

            // O evento synthesisCompleted sinaliza que a síntese foi concluída.
            synthesizer.synthesisCompleted = function(s, e) {
                console.log("Reproduziu o texto: " + texto);
                // Reproduz novamente após 5 segundos
                setTimeout(function() {
                    falar(texto);
                }, 5000);
            };
        }

        function escolherLanche(lanche) {
            falar("Você escolheu o " + lanche + ". Deseja finalizar o pedido?");
            setTimeout(function() {
                if (confirm("Deseja finalizar o pedido do " + lanche + "?")) {
                    window.location.href = "checkout.php";
                } else {
                    window.location.href = "index.php";
                }
            }, 5000);
        }
    </script>
</head>

<body>
    <div class="container mt-5">
        <div class="card-deck">
            <?php
            $itens = [
                [
                    'imagem' => "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJZjjB7NNSz5lbtK72XfgLFFA9atILdh8fIjpkUjkTR8EJW0v-skir03ECpQiR6BOjhvM&usqp=CAU.JPG",
                    'nome' => "Lanche 1",
                    'preco' => 9.99,
                ],
                [
                    'imagem' => "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNXYorQsqKGh-g4fejjg0Tnl0c7r3CCiq_oU-5kI7n0EP2AnyFnIkX0ZmmM4RrJc-2weE&usqp=CAU.jpg",
                    'nome' => "Lanche 2",
                    'preco' => 9.99,
                ],
                [
                    'imagem' => "https://cache-mcd-ecommerce.appmcdonalds.com/images/BR/208%20DLV.png",
                    'nome' => "Lanche 3",
                    'preco' => 9.99,
                ],
                [
                    'imagem' => "https://www.abcdacomunicacao.com.br/wp-content/uploads/McFlurry-Ouro-Branco_Chocolate-2.png",
                    'nome' => "Lanche 4",
                    'preco' => 9.99,
                ],
            ];

            foreach ($itens as $item) {
                $imagem = $item['imagem'];
                $nome = $item['nome'];
                $preco = $item['preco'];

                echo '
                        <div class="card">
                            <img decoding="async" class="card-img-top" src="' . $imagem . '" alt="' . $nome . '">
                            <div class="card-body">
                                <h5 class="card-title">' . $nome . '</h5>
                                <p class="card-text">Preço do lanche é R$ ' . $preco . '</p>
                                <button class="btn btn-primary" onclick="escolherLanche(\'' . $nome . '\')">Escolher</button>
                            </div>
                        </div>
                    ';
            }
            ?>
        </div>
    </div>
</body>

</html>
				
			
				
					<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Finalizar Pedido</title>

    <!-- Adicionando Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <!-- Adicionando script do Speech SDK -->
    <script src="https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@latest/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle-min.js"></script>

    <script>
        function falar(texto) {
            var speechConfig = SpeechSDK.SpeechConfig.fromSubscription("7214eb4484ef4781b98c674198a109b9", "brazilsouth");
            speechConfig.speechSynthesisVoiceName = "pt-BR-AntonioNeural";
            speechConfig.SpeechSynthesisLanguage = "pt-BR";

            var synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);

            synthesizer.speakTextAsync(
                texto,
                function (result) {
                    synthesizer.close();
                });

            // O evento synthesisCompleted sinaliza que a síntese foi concluída.
            synthesizer.synthesisCompleted = function (s, e) {
                console.log("Reproduziu o texto: " + texto);
            };
        }

        // Função chamada ao carregar a página
        function iniciar() {
            falar("Bem-vindo à página de finalização do pedido. Para concluir o pedido, siga as instruções na tela.");
        }
    </script>
</head>

<body onload="iniciar()">
    <div class="container mt-5">
        <h2>Finalizar Pedido</h2>
        <p>Por favor, siga as instruções na tela para concluir o seu pedido.</p>
    </div>
</body>

</html>