firefox/popup.html (view raw)
1<!doctype html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Mailcatcher Viewer</title>
6 <style>
7 body {
8 width: 400px;
9 padding: 0.5rem;
10 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
11 background-color: #f8f9fa;
12 color: #333;
13 }
14 h1 {
15 font-size: 18px;
16 color: #2c3e50;
17 margin-top: 0;
18 margin-bottom: 15px;
19 border-bottom: 2px solid #3498db;
20 padding-bottom: 5px;
21 }
22 #config {
23 margin-top: 15px;
24 padding: 10px;
25 background-color: #fff;
26 border-radius: 5px;
27 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
28 }
29 label {
30 display: block;
31 margin-bottom: 5px;
32 font-weight: bold;
33 color: #2c3e50;
34 }
35 input[type="text"] {
36 width: 100%;
37 padding: 8px;
38 border: 1px solid #ddd;
39 border-radius: 4px;
40 box-sizing: border-box;
41 margin-bottom: 10px;
42 }
43 button {
44 background-color: #3498db;
45 color: white;
46 border: none;
47 padding: 8px 15px;
48 border-radius: 4px;
49 cursor: pointer;
50 font-weight: bold;
51 transition: background-color 0.3s;
52 font-size: 0.8rem;
53 }
54 button:hover {
55 background-color: #2980b9;
56 }
57 .email-list {
58 max-height: 300px;
59 overflow-y: auto;
60 border: 1px solid #e0e0e0;
61 margin-top: 10px;
62 border-radius: 5px;
63 background-color: #fff;
64 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
65 }
66 .email-item {
67 padding: 12px 15px;
68 border-bottom: 1px solid #f0f0f0;
69 cursor: pointer;
70 transition: background-color 0.2s;
71 }
72 .email-item:hover {
73 background-color: #e8f4fc;
74 }
75 .email-item:last-child {
76 border-bottom: none;
77 }
78 .email-title {
79 font-weight: bold;
80 }
81 .email-sender {
82 color: #2c3e50;
83 margin-bottom: 3px;
84 }
85 .email-meta {
86 font-size: 12px;
87 color: #7f8c8d;
88 }
89 </style>
90 </head>
91 <body>
92 <button id="refresh-emails">Rafraîchir les emails</button>
93 <div class="email-list" id="email-list"></div>
94 <div id="config">
95 <label for="mailcatcher-url">URL de Mailcatcher :</label>
96 <input
97 type="text"
98 id="mailcatcher-url"
99 placeholder="http://localhost:1080"
100 />
101 <button id="save-url">Enregistrer</button>
102 </div>
103 <script src="popup.js"></script>
104 </body>
105</html>