Untitled

<!DOCTYPE html>

<html lang="pt">

    <head>

        <meta charset="UTF-8">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>Plataforma IoT</title>

    </head>


    <body>

        <div class="jumbotron">

            <h1>Servidor IoT</h1>

            <p>Tecnologias de Internet - Engenharia Informatica</p>

        </div>

        <div class="container text-center">

            <div class="row">

                <div class="col-sm-4">

                    <div class="card">

                        <div class="card-header">Bateria: 20%</div>

                        <div class="card-body"><img src="battery.png"></div>

                        <div class="card-footer">Atualização: 2019/03/26 14:30<a href="historico.html"> Historico</a></div>

                    </div>

                </div>

                <div class="col-sm-4">

                    <div class="card">

                        <div class="card-header">Temperatura: 20º</div>

                        <div class="card-body"><img src="temperature.png"></div>

                        <div class="card-footer">Atualização: 2019/03/26 14:30<a href="historico.html"> Historico</a></div>

                    </div>

                </div>

                    <div class="col-sm-4">

                        <div class="card">

                            <div class="card-header">Porta: aberta</div>

                            <div class="card-body"><img src="door.png"></div>

                            <div class="card-footer">Atualização: 2019/03/26 14:30<a href="historico.html"> Historico</a></div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <br>

        <div class="container">

            <div class="card">

                <div class="card-header">Tabela de sensores</div>

                <div class="card-body">

                    <table class="table">
                        <thead>
                        <tr>
                            <th>Tipo de dispositivo IoT</th>
                            <th>Valor</th>
                            <th>Data de atualização</th>
                            <th>Estado de alertas</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Sensor de Luz</td><td>1000</td><td>2019/03/26 14:30</td><td><span class="badge badge-success">Ativo</span></td>
                        </tr>
                        <tr>
                            <td>Temperatura</td><td>22º</td><td>2019/03/26 14:30</td><td><span class="badge badge-danger">Desativo</span></td>
                        </tr>
                        <tr>
                            <td>Humidade</td><td>85%</td><td>2019/03/26 14:30</td><td><span class="badge badge-warning">Alerta</span></td>
                        </tr>
                        <tr>
                            <td>Bateria</td><td>20%</td><td>2019/03/26 14:30</td><td><span class="badge badge-danger">Perigo</span></td>
                        </tr>
                        </tbody>
                    </table>

                </div>

            </div>

        </div>

    </body>

</html>