Mailinator-Instant-Box/popup.html at master · levmixali4/Mailinator-Instant-Box · 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Mailinator Box</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/loader.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="popup.css">

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
  </head>
  <body id="app">
    <section id="email-form">
      <div class="input-group">
        <i class="input-icon fa fa-envelope-o"></i>
        <input v-model="mail" @keyup.enter="fetchInbox" type="text" placeholder="Check any email">
        <div class="spinner" v-if="isFetching">
          <div class="double-bounce1"></div>
          <div class="double-bounce2"></div>
        </div>
      </div>
    </section>

    <section id="inbox">
      <p v-if="isEmpty" class="notification">
        This inbox is currently empty
      </p>
      <list-inbox :collection="listInbox"></list-inbox>
    </section>

    <section id="footer">
      <p>Make with <i class="fa fa-heart-o"></i> by <a href="http://tatthien.com">Thien Nguyen</a></p>
    </section>

    <!-- List Inbox-->
    <template id="list-inbox-template">
      <ul class="list-inbox">
        <inbox-item v-for="item in collection" :model="item">
      </ul>
    </template>

    <!-- Inbox Item -->
    <template id="inbox-item-template">
      <li class="inbox-item">
        <div class="inbox-header">
          <h3 class="subject"><a href="#" @click="fetchMail(model.id, $event)">{{ model.subject }}</a></h3>
          <time>{{ humanTimeDiff }} ago</time>
        </div><!-- end .inbox-header -->

        <div class="spinner" v-if="showLoader">
          <div class="double-bounce1"></div>
          <div class="double-bounce2"></div>
        </div><!-- end .spinner -->

        <div class="inbox-detail">
          <button class="close-detail" @click="closeDetail" v-if="showButton" :transition="buttonTransitionName"><i class="fa fa-times"></i></button>
          <div class="detail-wrapper" v-if="showDetail" :transition="detailTransitionName">
            <div class="detail-header">
              <table>
                <thead></thead>
                <tbody>
                  <tr>
                    <td>To: </td>
                    <td>{{ detail.headers.to }}</td>
                  </tr>

                  <tr>
                    <td>From: </td>
                    <td>{{ detail.headers.from }}</td>
                  </tr>

                  <tr>
                    <td>Subject: </td>
                    <td>{{ detail.headers.subject }}</td>
                  </tr>

                  <tr>
                    <td>Received: </td>
                    <td>{{ detail.headers.date }}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="detail-body">
              {{{ detail.parts[0].body }}}
            </div>
          </div>
        </div><!-- end .inbox-detail -->
      </li>
    </template>

    <!-- Inbox Detail -->

    <script src="js/lib/vue.min.js"></script>
    <script src="js/lib/jquery.min.js"></script>
    <script src="popup.js"></script>
  </body>
</html>