base_8html_source.html

<!DOCTYPE HTML>

<html>

  <head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">

    <meta name="author" content="Martial Mancip, Cécile Balsier, Yacouba Kaloga,

                 Merieme Bourenane, Fatoumata Sira Sidibe.">

    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico')}}">

    {% block title %}{% endblock %}


    <link rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"

      integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik="

      crossorigin="anonymous" />

    <link rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/css/bootstrap.min.css"

      integrity="sha512-2bBQCjcnw658Lho4nlXJcc6WkV/UxpE/sAokbXPxQNGqmNdQrWqtw26Ns9kFF/yG792pKR1Sx8/Y1Lf1XN4GKA=="

      crossorigin="anonymous" referrerpolicy="no-referrer" />


    <style type="text/css">

      h1, h2, h3, h4, h5, h6,

      .h1, .h2, .h3, .h4, .h5, .h6, p {

        color: beige;

      }

    </style>

    <link rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"

      integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0="

      crossorigin="anonymous" />


    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css') }}">


    <style>

      .bd-placeholder-img {

        font-size: 1.125rem;

        text-anchor: middle;

        -webkit-user-select: none;

        -moz-user-select: none;

        user-select: none;

      }


      @media (min-width: 768px) {

        .bd-placeholder-img-lg {

          font-size: 3.5rem;

        }

      }


      .b-example-divider {

        width: 100%;

        height: 3rem;

        background-color: rgba(0, 0, 0, .1);

        border: solid rgba(0, 0, 0, .15);

        border-width: 1px 0;

        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);

      }


      .b-example-vr {

        flex-shrink: 0;

        width: 1.5rem;

        height: 100vh;

      }


      .bi {

        vertical-align: -.125em;

        fill: currentColor;

      }


      .nav-scroller {

        position: relative;

        z-index: 2;

        height: 2.75rem;

        overflow-y: hidden;

      }


      .nav-scroller .nav {

        display: flex;

        flex-wrap: nowrap;

        padding-bottom: 1rem;

        margin-top: -1px;

        overflow-x: auto;

        text-align: center;

        white-space: nowrap;

        -webkit-overflow-scrolling: touch;

      }


      .btn-bd-primary {

        --bd-violet-bg: #712cf9;

        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;


        --bs-btn-font-weight: 600;

        --bs-btn-color: var(--bs-white);

        --bs-btn-bg: var(--bd-violet-bg);

        --bs-btn-border-color: var(--bd-violet-bg);

        --bs-btn-hover-color: var(--bs-white);

        --bs-btn-hover-bg: #6528e0;

        --bs-btn-hover-border-color: #6528e0;

        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);

        --bs-btn-active-color: var(--bs-btn-hover-color);

        --bs-btn-active-bg: #5a23c8;

        --bs-btn-active-border-color: #5a23c8;

      }

      .bd-mode-toggle {

        z-index: 1500;

      }

    </style>

    <link href="../static/dist/css/navbars.css" rel="stylesheet">


    <!-- jQuery -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"

        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"

        integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM="

        crossorigin="anonymous"></script>


    <!-- Bootstrap -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.bundle.min.js"

        integrity="sha512-HvOjJrdwNpDbkGJIG2ZNqDlVqMo77qbs4Me4cah0HoDrfhrbA+8SBlZn1KrvAQw7cILLPFJvdwIgphzQmMm+Pw=="

        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- SocketIO -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.min.js"

    integrity="sha512-aC5ZfKOuGRUiJCv+E/EIWsj49E02BQpuLQbixZe+16Lm1R6AepHZA1xvY92XBQNNbwQoqG4DXCGxwoxBFb5Q1A=="

    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

{% block additional_scripts_css %}{% endblock %}


  <script type="text/javascript">

    autoadaptzoom = function(){

      var P=window.devicePixelRatio;

      var a = (1-0.45)/(1-0.1);

      var c = 1 - a;

      var r=a*P + c;

      var Zscale=r/P;

      var decal=(1-P)/(1-0.1)*40

      decal = Math.max(-20, decal);

      $('.container').css('-webkit-transform','scale('+Zscale+') translateY('+decal+'%)')

          .css('-moz-transform','scale('+Zscale+') translateY('+decal+'%)')

          .css('transform','scale('+Zscale+') translateY('+decal+'%)');

      //var a = (50-10)/(0.1-1);

      //var c = 10 -a;

      //var zfonts=a*P+c;

      $("select").css("width","auto");

      $("select").css("height","auto");

      $(".checkbox").children("label").children("input").css('-webkit-transform','scale('+Zscale+')').css('-moz-transform','scale('+1/Zscale+')');

      $(".radio").children("label").children("input").css('-webkit-transform','scale('+Zscale+')').css('-moz-transform','scale('+1/Zscale+')');

      var a = (20-12)/(0.1-1);

      var c = 12 -a;

      var zfonts=(a*P+c);

      zfonts = Math.max(12, zfonts);

      var optionFonts=1/P*zfonts;

      optionFonts = Math.max(12, optionFonts);

      $('.container').css("font-size",zfonts+"px");

      $("select").css("font-size",zfonts+"px");

      $('div[id^="search_"]').css("font-size",zfonts+"px");

      $("option").css("font-size",optionFonts+"px");

      $(".dropdown-item").css("font-size",optionFonts+"px");

      $('nav').css("font-size",optionFonts+"px");

      $('.navbar-brand').css("font-size",optionFonts+"px");

      console.log(P)

    }


  </script>

  </head>


<body>

  <div style="none" username="{{ username }}" isadmin="{{ isadmin }}" notlogin="{{ notlogin }}"> </div>


  {% if username is defined %}

  <nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">

    <div class="container-fluid">

      <a class="navbar-brand" href="#TiledViz">TiledViz</a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>


      <div class="collapse navbar-collapse" id="navbarsExampleXxl">

        <ul class="navbar-nav me-auto mb-2 mb-xl-0">

          <li class="nav-item">

            <a class="nav-link active" aria-current="page" href="/home">Home</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#"></a>

          </li>

          <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Menu</a>

            <ul class="dropdown-menu">

          {% if notlogin %}

              <li><a class="dropdown-item" href="/login">Login</a></li>

              <li><a class="dropdown-item" href="/register">Register</a></li>

          {% else %}

              <li><a class="dropdown-item" href="/allsessions">All Sessions</a></li>

              <li><a class="dropdown-item" href="/grid">Last grid</a></li>

              <li><a class="dropdown-item" href="/my-projects">My Projects</a></li>

              <li><a class="dropdown-item" href="/oldsessions">Edit Project</a></li>

              <li><a class="dropdown-item" href="/savesession">Save cookie</a></li>

              <li><a class="dropdown-item" href="/retreivesession">Reload cookie</a></li>

              <li><a class="dropdown-item" href="/admin">UserAdmin</a></li>

              <li><a class="dropdown-item" href="/logout">Logout</a></li>

          {% endif %}

            </ul>

          </li>

      {% if isadmin %}


    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">

      Admin

  </a>

  <ul class="dropdown-menu">

      <li><a class="dropdown-item" href="/admin">User Management</a></li>

      <li><a class="dropdown-item" href="/admin/migration">Database Migration</a></li>

  </ul>

</li>

          {% else %}

    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">

      Tools

  </a>

  <ul class="dropdown-menu">

   <li><a class="dropdown-item" href="/manage">Manage</a></li>

  </ul>

</li>

          {% endif %}

        </ul>

        <!-- <form role="search"> -->

        <!--   <input class="form-control" type="search" placeholder="Search" aria-label="Search"> -->

        <!-- </form> -->

      </div>

    </div>

    <div class="container-fluid">

      <a class="navbar-brand" href="#Project"> {{ session["projectname"] }} {{ session["sessionname"] }} {{ session["username"] }} </a>

    </div>

  </nav>

  {% endif %}

  {% block body %}{% endblock %}

 <script type="text/javascript">

  //Removing  leaving page alert

  window.onbeforeunload = null;

 </script>

</body>

</html>