-
Notifications
You must be signed in to change notification settings - Fork 3
/
popup.html
113 lines (104 loc) · 4.04 KB
/
popup.html
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
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="stylesheet" href="./global.css" />
<link rel="stylesheet" href="./popup.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap"
/>
<style>
.rectangle-parent {
width:443px;
height: 500px;
}
</style>
</head>
<body>
<div class="rectangle-parent" id="trash">
<div class="group-child"></div>
<p class="you-will-save">You will save</p>
<button class="group-inner">Save Now</button>
<div class="ellipse-parent" id="first">
<img class="ellipse-icon" alt="" src="public/ellipse-37.svg" />
<div class="junk-mails-found">28 junk mails found</div>
<div class="junk-mails-found">28 junk mails found</div>
<span class="spam-folder">Spam folder</span
><button class="rectangle-button" href="https://mail.google.com/mail/u/5/#spam"> View all</button>
<div class="material-symbolsfolder">
<img class="vector-icon" alt="" src="public/vector.svg" />
</div>
<img class="mdialert-icon" alt="" src="public/mdialert.svg" />
</div>
<div class="ellipse-group" id="second">
<img class="ellipse-icon" alt="" src="public/ellipse-39.svg" />
<div class="already-read-mail">18 already read mail found</div>
<span class="social">Spam folder</span
><button class="rectangle-button" href="https://mail.google.com/mail/u/5/#spam"> View all</button>
<div class="material-symbolsfolder-icon">
<img class="vector-icon" alt="" src="public/vector.svg" />
</div>
<img class="mdialert-icon" alt="" src="public/mdialert.svg" />
</div>
<div class="ellipse-container" id="third">
<img class="ellipse-icon" alt="" src="public/ellipse-39.svg" />
<div class="already-read-mail">100 already read mail found</div>
<span class="social">Social</span><button class="rectangle-button">View all</button>
<img
class="material-symbolsfolder-icon"
alt=""
src="public/materialsymbolsfolder.svg"
/><img class="mdialert-icon" alt="" src="public/mdialert.svg" />
</div>
<img class="group-icon" alt="" src="public/SustainMail (2).png" />
<div class="div-line">Save your storage and reduce your Carbon Footprint</div>
<div class="group-div" id="fourth">
<img class="ellipse-icon" alt="" src="public/ellipse-41.svg" />
<div class="already-read-mail">13 important mail found</div>
<span class="social">Inbox</span
><button class="rectangle-button">View All</button>
<img
class="material-symbolsfolder-icon"
alt=""
src="public/materialsymbolsfolder.svg"
/><img
class="icon-park-solidcorrect"
alt=""
src="public/iconparksolidcorrect.svg"
/>
</div>
<div class="rectangle-group">
<button class="group-child7"></button>
<div class="filter">Filter</div>
<img
class="material-symbolsarrow-drop-do-icon"
alt=""
src="public/materialsymbolsarrowdropdownrounded.svg"
/>
<div class="parent">
<div class="div">19/01/2023 - 19/03/2023</div>
<img
class="material-symbolsmail-rounded-icon"
alt=""
src="public/materialsymbolsmailrounded.svg"
/>
</div>
</div>
<div class="gb-of-storage-parent" id="last">
<div class="gb-of-storage">1.2 GB of storage</div>
<div class="gm"><span>512</span><span class="gm1">gm</span></div>
<img
class="material-symbolshome-storage-icon"
alt=""
src="public/materialsymbolshomestorage.svg"
/><img
class="carboncarbon-accounting-icon"
alt=""
src="public/carboncarbonaccounting.svg"
/>
</div>
</div>
</body>
</html>