turtlpass-chrome-extension/popup.html at master · TurtlPass/turtlpass-chrome-extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/material-components-web.13.0.0.min.css">
    <link rel="stylesheet" href="css/popup.css" />
  </head>
  <body>
    <div class="wrapper-card">
      <div class="header">
        <img class="logo" src="assets/icons/icon-no-padding.png" width="75" />
        <h1>TurtlPass</h1>
      </div>

      <!-- Domain -->
      <div class="mdc-text-field mdc-text-field--outlined full-width mdc-text-field--label-floating" data-mdc-auto-init="MDCTextField" data-mdc-auto-init-state="initialized">
        <div class="mdc-notched-outline mdc-notched-outline--upgraded mdc-notched-outline--notched">
          <div class="mdc-notched-outline__leading"></div>
          <div class="mdc-notched-outline__notch" style="width: 51px;">
            <label for="tf-outlined" class="mdc-floating-label mdc-floating-label--float-above" style="">Domain</label>
          </div>
          <div class="mdc-notched-outline__trailing"></div>
        </div>
        <img height="26" width="26" src='https://t1.gstatic.com/faviconV2?size=26' id="favicon" class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" style="opacity:0.8;padding-left:4px;padding-right:4px;padding-top:5px;padding-bottom:3px;" />
        <input type="domain" name="domain" id="domain" class="mdc-text-field__input mdc-text-field--disabled" style="opacity:0.5;">
      </div>

      <!-- Email -->
      <div class="mdc-text-field mdc-text-field--outlined full-width" data-mdc-auto-init="MDCTextField" data-mdc-auto-init-state="initialized">
        <div class="mdc-notched-outline mdc-notched-outline--upgraded mdc-notched-outline--notched">
          <div class="mdc-notched-outline__leading"></div>
          <div class="mdc-notched-outline__notch" style="width: 68px;">
            <label for="tf-outlined" class="mdc-floating-label mdc-floating-label--float-above" style="">Account ID</label>
          </div>
          <div class="mdc-notched-outline__trailing"></div>
        </div>
        <span class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">person</span>
        <input type="email" name="email" id="email" autocomplete="on" id="tf-outlined" class="mdc-text-field__input">
      </div>
      <br />
      <button id="passwordButton" class="mdc-button mdc-button--raised mdc-button--icon-leading" style="width:100%;padding:24px;margin-top:4px;margin-bottom:4px;border-radius:32px;text-transform:capitalize;font-size:17px;" >
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__focus-ring"></span>
        <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#EFF9F3" d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z" />
        </svg>
        <span class="mdc-button__label">Get Password</span>
      </button>
    </div>

    <script type="text/javascript" src="js/popup.js"></script>
    <script type="text/javascript" src="js/material-components-web.min.js"></script>
  </body>
</html>