index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Pilhas</title>
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="./styles.css"/>
    <script src="./scripts.js"></script>
</head>
<body onload="stack.updateStackView()">
    <h1 class="title">PILHA (STACK)</h1>
    <p class="description">Desenvolvido por André Prolo - Sistemas de informação UNISEP</p>

    <br/>
    <div class="insertion-area">
        <p id="error"></p>
        <input type="number" id="value" placeholder="Digite um valor"/>
        <div>
            <button class="push" onclick="stack.push()">Push</button>
            <button class="pop" onclick="stack.pop()">Pop</button> 
            <button class="clear" onclick="stack.clear()">Clear</button> 
        </div>
    </div>

    <div class="visualization-section">
        <h2>Visualização</h2>
        <div class="separator"></div>
        <div id="stack-view"></div>
        <div class="info">
            <p id="size">Tamanho:</p>
            <p id="top-item">Objeto topo:</p>
        </div>
    </div>
    

    <div class="visualization-section">
        <h2>Informações</h2>
        <div class="separator"></div>
        <p class="description">O que são pilhas?</p>
        <ul class="list"> 
            <li>São estruturas de dados do tipo LIFO (last-in first-out), 
                onde o último elemento a ser inserido, será o primeiro a ser retirado.</li>
            <li>Assim, uma pilha permite acesso a apenas um item de dados - o último inserido.</li>
            <li>Para processar o penúltimo item inserido, deve-se remover o último primeiro.</li>
        </ul>
        <p class="description">Seguindo essa ideia, desenvolvemos o exemplo acima, que demonstra como a estrutura de dados funciona.</p>
    </div>

    <div class="visualization-section">
        <h2>Créditos</h2>
        <div class="separator"></div>
        <p class="author-name">Criado por: André Prolo</p>
        <div class="names-section">
            Gustavo Unser, André Prolo, Diogo Gil, Diogo Garbin, Glademir, Marco Antonio, Gabriel Santolin, Gabriel Garcia, Gustavo Luiz, Atilio Biezus, Cleiton Migliorini
        </div>
        <div class="end-credit-section">
            Sistemas de informação - UNISEP 2021
        </div>
    </div>

</body>
</html>