<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Visualize/ Annotate Accelerometry Data | Login</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij4KICA8cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHJ4PSIxMiIgZmlsbD0iIzgwMDAwMCIvPgoKICA8IS0tIFdhbGtpbmcgZmlndXJlIOKAlCBzaGlmdGVkIGxlZnQgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCwgOCkiPgogICAgPGNpcmNsZSBjeD0iMTIiIGN5PSI2IiByPSI0LjUiIGZpbGw9IiNmZmYiLz4KICAgIDxsaW5lIHgxPSIxMiIgeTE9IjEwIiB4Mj0iMTIiIHkyPSIyNyIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8bGluZSB4MT0iMTIiIHkxPSIxNiIgeDI9IjUiIHkyPSIyMiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogICAgPGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIyMCIgeTI9IjEzIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8bGluZSB4MT0iMTIiIHkxPSIyNyIgeDI9IjUiIHkyPSIzOCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8bGluZSB4MT0iMTIiIHkxPSIyNyIgeDI9IjIxIiB5Mj0iMzYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDwvZz4KCiAgPCEtLSBDb21wYWN0IHdhdmVmb3JtIOKAlCBzaGlmdGVkIHJpZ2h0IGZvciBzZXBhcmF0aW9uIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyLCAxNCkiPgogICAgPHBhdGggZD0iTTAsMTggUTQsMTggNiw4IFQxNCw2IFQyMiwxOCBUMjgsMTQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBvcGFjaXR5PSIwLjk1Ii8+CiAgICA8cGF0aCBkPSJNMCwxOCBRNSwxOCA4LDI0IFQxNiwzMCBUMjQsMTggVDI4LDIyIiBmaWxsPSJub25lIiBzdHJva2U9IiM3RUJFQzUiIHN0cm9rZS13aWR0aD0iMiIgb3BhY2l0eT0iMC44NSIvPgogICAgPCEtLSBBbm5vdGF0aW9uIGJyYWNrZXQgLS0+CiAgICA8cmVjdCB4PSI4IiB5PSIzIiB3aWR0aD0iMTIiIGhlaWdodD0iMzAiIHJ4PSIyIiBmaWxsPSIjN0VCRUM1IiBvcGFjaXR5PSIwLjIiIHN0cm9rZT0iIzdFQkVDNSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8L2c+Cjwvc3ZnPgo=">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html {
      height: 100%;
    }
    body {
      font-family: 'Montserrat', Helvetica, Arial, sans-serif;
      font-size: 1em;
      height: 100%;
      line-height: 1.6;
    }
    .wrap {
      align-items: center;
      background: #f5f5f5;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      width: 100%;
    }
    .login-form {
      background: #ffffff;
      border: 1px solid #e0e0e0;
      border-top: 4px solid #800000;
      border-radius: 4px;
      margin: 0 auto;
      padding: 2.5em;
      width: 380px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .form-input {
      background: #fafafa;
      border: 1px solid #ddd;
      border-radius: 3px;
      padding: 10px 12px;
      width: 100%;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
    }
    .form-input:focus {
      outline: none;
      border-color: #800000;
    }
    .form-group {
      margin-bottom: 1em;
    }
    .form-button {
      background: #800000;
      border: none;
      border-radius: 3px;
      color: #ffffff;
      cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.5px;
      padding: 10px;
      text-transform: uppercase;
      width: 100%;
    }
    .form-button:hover {
      background: #5a0000;
    }
    .form-header {
      text-align: center;
      margin-bottom: 1.5em;
    }
    .form-header h3 {
      color: #800000;
      font-size: 16px;
      font-weight: 700;
      margin-top: 12px;
    }
    .form-header p {
      color: #58595b;
      font-size: 12px;
      margin-top: 6px;
    }
    #logo {
      width: 200px;
      height: 60px;
    }
    #error-message {
      text-align: center;
      margin-bottom: 0em;
    }
    .form-footer {
      display: flex;
      justify-content: center;
      gap: 1.5em;
      margin-top: 1.2em;
      width: 380px;
    }
    .form-footer a {
      color: #58595b;
      text-decoration: none;
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      opacity: 0.7;
      transition: opacity 0.2s;
    }
    .form-footer a:hover {
      opacity: 1;
      color: #800000;
    }
    </style>
</head>
<body>
  <div class="wrap">
    <form class="login-form" action="/login" method="post">
      <div class="form-header">
        <img id="logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNDgiIHdpZHRoPSIxMjAiIGhlaWdodD0iNDgiPgogIDwhLS0gVHJpLWF4aWFsIHdhdmVmb3JtIGJhY2tncm91bmQgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsIDQpIj4KICAgIDxwYXRoIGQ9Ik0wLDIwIFE4LDIwIDE0LDEwIFQyOCw4IFQ0MiwyMCBUNTYsMTYgVDcwLDYgVDg0LDIwIFQ5OCwxNCIKICAgICAgICAgIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzgwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjgiIG9wYWNpdHk9IjAuNSIvPgogICAgPHBhdGggZD0iTTAsMjAgUTEwLDIwIDE2LDI2IFQzMiwzMiBUNDgsMjAgVDY0LDE0IFQ4MCwyOCBUOTgsMjIiCiAgICAgICAgICBmaWxsPSJub25lIiBzdHJva2U9IiM3RUJFQzUiIHN0cm9rZS13aWR0aD0iMS44IiBvcGFjaXR5PSIwLjYiLz4KICAgIDxwYXRoIGQ9Ik0wLDIwIFE3LDIwIDEyLDE2IFQyNiwyNCBUNDAsMTQgVDU0LDIwIFQ2OCwyNiBUODIsMTIgVDk4LDIwIgogICAgICAgICAgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTg1OTViIiBzdHJva2Utd2lkdGg9IjEuNCIgb3BhY2l0eT0iMC40Ii8+CiAgPC9nPgoKICA8IS0tIFdhbGtpbmcgZmlndXJlIOKAlCBjZW50ZXJlZCwgbGFyZ2VyLCB3aXRoIGdsb3cgZm9yIGNvbnRyYXN0IC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4LCAxKSI+CiAgICA8IS0tIEdsb3cgb3V0bGluZSBiZWhpbmQgZmlndXJlIC0tPgogICAgPGNpcmNsZSBjeD0iMTIiIGN5PSI1IiByPSI2IiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC42KSIgc3Ryb2tlLXdpZHRoPSI0Ii8+CiAgICA8bGluZSB4MT0iMTIiIHkxPSI5IiB4Mj0iMTIiIHkyPSIyNiIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNCkiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CgogICAgPCEtLSBGaWd1cmUgLS0+CiAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjUiIHI9IjUiIGZpbGw9IiM4MDAwMDAiLz4KICAgIDxsaW5lIHgxPSIxMiIgeTE9IjEwIiB4Mj0iMTIiIHkyPSIyNiIgc3Ryb2tlPSIjODAwMDAwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogICAgPGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSI0IiB5Mj0iMjMiIHN0cm9rZT0iIzgwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogICAgPGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIyMSIgeTI9IjEzIiBzdHJva2U9IiM4MDAwMDAiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICAgIDxsaW5lIHgxPSIxMiIgeTE9IjI2IiB4Mj0iNCIgeTI9IjM4IiBzdHJva2U9IiM4MDAwMDAiIHN0cm9rZS13aWR0aD0iMi44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICAgIDxsaW5lIHgxPSIxMiIgeTE9IjI2IiB4Mj0iMjIiIHkyPSIzNiIgc3Ryb2tlPSIjODAwMDAwIiBzdHJva2Utd2lkdGg9IjIuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPC9nPgoKICA8IS0tIEFubm90YXRpb24gYnJhY2tldCByZWdpb24gLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsIDQpIj4KICAgIDxyZWN0IHg9IjYwIiB5PSIyIiB3aWR0aD0iMjQiIGhlaWdodD0iMzYiIHJ4PSIyIiBmaWxsPSIjN0VCRUM1IiBvcGFjaXR5PSIwLjE1IiBzdHJva2U9IiM3RUJFQzUiIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2UtZGFzaGFycmF5PSIzLDIiLz4KICAgIDxwYXRoIGQ9Ik02MCw0IEw2MCwyIEw2NCwyIiBmaWxsPSJub25lIiBzdHJva2U9IiM3RUJFQzUiIHN0cm9rZS13aWR0aD0iMS4yIi8+CiAgICA8cGF0aCBkPSJNODQsNCBMODQsMiBMODAsMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN0VCRUM1IiBzdHJva2Utd2lkdGg9IjEuMiIvPgogICAgPHBhdGggZD0iTTYwLDM2IEw2MCwzOCBMNjQsMzgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzdFQkVDNSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz4KICAgIDxwYXRoIGQ9Ik04NCwzNiBMODQsMzggTDgwLDM4IiBmaWxsPSJub25lIiBzdHJva2U9IiM3RUJFQzUiIHN0cm9rZS13aWR0aD0iMS4yIi8+CgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODEsIDM0KSByb3RhdGUoLTQ1KSI+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIzIiBoZWlnaHQ9IjEyIiByeD0iMC41IiBmaWxsPSIjN0VCRUM1Ii8+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMCwxMiAxLjUsMTUgMywxMiIgZmlsbD0iIzdFQkVDNSIvPgogICAgICA8cmVjdCB4PSIwLjUiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIGZpbGw9IiM4MDAwMDAiIG9wYWNpdHk9IjAuMyIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==">
        <h3>Visualize/ Annotate Accelerometry Data</h3>
        <p>Sign in to continue</p>
      </div>
      <div id="error-message" class="form-group">
        <p style="color:#800000; font-weight:600; font-size:13px;" class="errormessage">{{errormessage|escape}}</p>
      </div>
      <div class="form-group">
        <input name="username" type="text" class="form-input" autocapitalize="off" autocorrect="off" placeholder="Username">
      </div>
      <div class="form-group">
        <input name="password" type="password" class="form-input" placeholder="Password">
      </div>
      <div class="form-group">
        <button class="form-button" type="submit">Login</button>
      </div>
    </form>
    <div class="form-footer">
      <a href="https://tavoloperuno.github.io/py_visualize_accelerometry/" target="_blank" title="Documentation">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
        <span>Help</span>
      </a>
      <a href="https://github.com/TavoloPerUno/py_visualize_accelerometry" target="_blank" title="GitHub">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58 0-.28-.01-1.04-.02-2.04-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.33-1.76-1.33-1.76-1.09-.74.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.07 1.83 2.8 1.3 3.49 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6.02 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22 0 1.6-.01 2.9-.01 3.29 0 .32.21.7.82.58A12.01 12.01 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
        </svg>
        <span>Source</span>
      </a>
    </div>
  </div>
</body>
</html>
