results.html 5.4 KB
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> ${t['title']} </title>
    <link rel="icon" href="favicon.ico">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"> <!-- optional -->

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <style>
        /* Fixes navigation panel overlaying content */
        body {
            padding-top: 80px;
            background: #aaa;
        }
        .drop-shadow {
            -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
            box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, .2);
            border-radius:5px;
        }
        .progress {
            margin-bottom: 0px;
            border-radius: 25px;
        }
    </style>
 </head>
 <!-- ===================================================================== -->
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid drop-shadow">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
          <!-- <img class="brand" alt="UEvora" src="/pomba-ue.svg"/> -->
          UEvora
      </a>
    </div>

    <!-- <p class="navbar-text"> ${t['title']} </p> -->

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="/test">Teste</a></li>
        <li class="active"><a href="/resultados">Resultados</a></li>
      </ul>

    </div>
  </div>
</nav>


<div class="container">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading">
            ${t['title']}
        </div>
        <!-- <div class="panel-body"> -->
        <table class="table table-hover">
            <thead>
            <tr>
                <th class="col-md-1 text-center">#</th>
                <th class="col-md-7 text-left">Nome</th>
                <th class="col-md-4 text-center">Nota</th>
                <th class="col-md-0"></th>
            </tr>
            </thead>
            <tbody>
                <%!
                    from datetime import datetime
                %>
                % for r in results:
                <tr>
                    <td class="text-center">
                        % if loop.index == 0:
                            <h4>
                            <!-- <span class="label label-primary"> -->
                            1º
                            <!-- </span> -->
                            </h4>
                        % else:
                            <!-- <span class="label label-primary"> -->
                            ${loop.index+1}
                            <!-- </span> -->
                        % endif
                    </td>
                    <!-- <td>${r[0]}</td> -->  <!-- numero -->
                    <td>
                        % if loop.index == 0:
                            <h4 class="text-uppercase"><img src="\crown.jpg" /> ${r[1]}</h4>
                        % else:
                            ${r[1]}
                        % endif
                    </td>  <!-- nome -->
                    <td>              <!-- nota -->
                        <div class="progress">
                            % if r[2] < 10:
                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="${'{0}'.format(round(r[2]))}" aria-valuemin="0" aria-valuemax="20" style="min-width: 2em; width: ${'{0}'.format(round(5 * r[2]))}%;">
                            % elif r[2] < 15:
                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="${'{0}'.format(round(r[2]))}" aria-valuemin="0" aria-valuemax="20" style="min-width: 2em; width: ${'{0}'.format(round(5 * r[2]))}%;">
                            % else:
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="${'{0}'.format(round(r[2]))}" aria-valuemin="0" aria-valuemax="20" style="min-width: 2em; width: ${'{0}'.format(round(5 * r[2]))}%;">
                            % endif
                                ${'{:.1f}'.format(r[2])}
                            </div>
                        </div>
                    </td>
                    <td class="text-right">
                        <%
                            dt = datetime.now() - datetime.strptime(r[3], '%Y-%m-%d %H:%M:%S.%f')
                        %>
                        <small>
                        % if dt.days > 0:
                            ${dt.days}d
                        % elif dt.seconds >= 3600:
                            (${dt.seconds // 3600} horas
                        % elif dt.seconds >= 60:
                            (${dt.seconds // 60} minutos
                        % else:
                            (${dt.seconds} segundos
                        % endif

                        </small>
                    </td>
                </tr>
                 % endfor
            </tbody>
        </table>
    </div> <!-- panel -->
</div> <!-- container -->
</body>
</html>