Skip to content

Commit 69419f1

Browse files
StigmatozStigmatoz
committed
Pass data from background page to popup and show hint with features
1 parent 99d96d0 commit 69419f1

File tree

8 files changed

+691
-631
lines changed

8 files changed

+691
-631
lines changed

‎src/index.html‎

Lines changed: 94 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,19 @@
22
<html>
33

44
<head>
5-
<meta charset="utf-8">
6-
<title>Web Activity Time Tracker</title>
7-
<link href="style/webact.css" rel="stylesheet" />
8-
<link href="style/chart.css" rel="stylesheet" />
9-
<script src="scripts/chart/d3.v4.min.js"></script>
10-
<script src="scripts/chart/chart-core.js"></script>
11-
<script src="scripts/storage.js"></script>
12-
<script src="scripts/common.js"></script>
13-
<script src="scripts/ui.js"></script>
14-
<script src="scripts/webact.js"></script>
5+
<meta charset="utf-8">
6+
<title>Web Activity Time Tracker</title>
7+
<link href="style/webact.css" rel="stylesheet" />
8+
<link href="style/chart.css" rel="stylesheet" />
159
</head>
1610

1711
<body>
18-
<div id="preloader" class="preloader">
19-
<div class="preloader__image"><div class="title">Loading...</div></div>
20-
</div>
21-
<svg class="height-0">
12+
<div id="preloader" class="preloader">
13+
<div class="preloader__image">
14+
<div class="title">Loading...</div>
15+
</div>
16+
</div>
17+
<svg class="height-0">
2218
<filter id="dropShadow">
2319
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
2420
<feOffset dx="0" dy="1" />
@@ -28,80 +24,94 @@
2824
</feMerge>
2925
</filter>
3026
</svg>
31-
<div id="extensionTitle">
32-
<p class="title">Web Activity Time Tracker</p>
33-
</div>
34-
<div id="preloader" class="preloader hide"></div>
35-
<div id="buttons" class="btn-block">
36-
<a class="active" id="btnToday">Today</a>
37-
<a id="btnAll">All-time</a>
38-
<a id="btnByDays">By days</a>
39-
<a id="settings">Settings</a>
40-
</div>
41-
<div id="stats" class="hide">
42-
<p class="table-header">Overall stats</p>
43-
<div id="statsBlock">
44-
<div class="title-block">
45-
<div class="block">
46-
<div>First day</div>
47-
<div class="value-block" id="statFirstDay"></div>
27+
<div id="extensionTitle">
28+
<p class="title">Web Activity Time Tracker</p>
29+
</div>
30+
<div id="buttons" class="btn-block">
31+
<a class="active" id="btnToday">Today</a>
32+
<a id="btnAll">All-time</a>
33+
<a id="btnByDays">By days</a>
34+
<a id="settings">Settings</a>
35+
<div id='hintForUsers' class="hint-for-settings hide">
36+
<div id='closeHintBtn' class="close-hint">✖</div>
37+
<p class="title-block">You can:</p>
38+
<p><span class="arrow">➤</span> set daily limits for sites</p>
39+
<p><span class="arrow">➤</span> set notifications after a certain time has elapsed</p>
40+
<p><span class="arrow">➤</span> set a list of sites with no tracking</p>
41+
<p><span class="arrow">➤</span> enable time tracking on youtube.com</p>
42+
</div>
43+
</div>
44+
<div id="stats" class="hide">
45+
<p class="table-header">Overall stats</p>
46+
<div id="statsBlock">
47+
<div class="title-block">
48+
<div class="block">
49+
<div>First day</div>
50+
<div class="value-block" id="statFirstDay"></div>
51+
</div>
52+
<div class="block">
53+
<div>Last day</div>
54+
<div class="value-block" id="statLastDay"></div>
55+
</div>
4856
</div>
49-
<div class="block">
50-
<div>Last day</div>
51-
<div class="value-block" id="statLastDay"></div>
57+
<div class="title-block">
58+
<div class="block">
59+
<div>Active days</div>
60+
<div class="value-block" id="statActiveDays"></div>
61+
</div>
62+
<div class="block">
63+
<div>Days in total</div>
64+
<div class="value-block" id="statTotalDays"></div>
65+
</div>
5266
</div>
53-
</div>
54-
<div class="title-block">
55-
<div class="block">
56-
<div>Active days</div>
57-
<div class="value-block" id="statActiveDays"></div>
67+
<div class="title-block">
68+
<div class="block">
69+
<div>Today</div>
70+
<div class="span-time" id="statTodayTime"></div>
71+
</div>
72+
<div class="block">
73+
<div>All-time</div>
74+
<div class="span-time" id="statAllDaysTime"></div>
75+
</div>
5876
</div>
59-
<div class="block">
60-
<div>Days in total</div>
61-
<div class="value-block" id="statTotalDays"></div>
77+
<div class="title-block">
78+
<div class="block">
79+
<div>Most active day</div>
80+
<div class="inline-block">
81+
<div class="value-block" id="statActiveDay"></div>
82+
<div class="span-time" id="statActiveDayTime"></div>
83+
</div>
84+
</div>
85+
<div class="block">
86+
<div>Most inactive day</div>
87+
<div class="inline-block">
88+
<div class="value-block" id="statInActiveDay"></div>
89+
<div class="span-time" id="statInActiveDayTime"></div>
90+
</div>
91+
</div>
6292
</div>
63-
</div>
64-
<div class="title-block">
65-
<div class="block">
66-
<div>Today</div>
67-
<div class="span-time" id="statTodayTime"></div>
68-
</div>
69-
<div class="block">
70-
<div>All-time</div>
71-
<div class="span-time" id="statAllDaysTime"></div>
72-
</div>
73-
</div>
74-
<div class="title-block">
75-
<div class="block">
76-
<div>Most active day</div>
77-
<div class="inline-block">
78-
<div class="value-block" id="statActiveDay"></div>
79-
<div class="span-time" id="statActiveDayTime"></div>
80-
</div>
81-
</div>
82-
<div class="block">
83-
<div>Most inactive day</div>
84-
<div class="inline-block">
85-
<div class="value-block" id="statInActiveDay"></div>
86-
<div class="span-time" id="statInActiveDayTime"></div>
87-
</div>
88-
</div>
89-
</div>
90-
</div>
91-
</div>
92-
<div id="blockForChartBtn">
93-
<a class="button active chart-btn chart-btn-donut" id="donutChartBtn">Common chart</a>
94-
<a class="button chart-btn chart-btn-heatmap" id="heatMapChartBtn">Time chart</a>
95-
</div>
96-
<div id="chart"></div>
97-
<div id="labelForTimeInterval" class="warning hide">
98-
<label>Only time intervals greater than 3 seconds are shown</label>
99-
</div>
100-
<div id="timeChart"></div>
101-
<div id="resultTable" class="list-of-site"></div>
102-
<div id="total" class="inline-flex"></div>
103-
<div id="byDays" class="calendar-block"></div>
93+
</div>
94+
</div>
95+
<div id="blockForChartBtn">
96+
<a class="button active chart-btn chart-btn-donut" id="donutChartBtn">Common chart</a>
97+
<a class="button chart-btn chart-btn-heatmap" id="heatMapChartBtn">Time chart</a>
98+
</div>
99+
<div id="chart"></div>
100+
<div id="labelForTimeInterval" class="warning hide">
101+
<label>Only time intervals greater than 3 seconds are shown</label>
102+
</div>
103+
<div id="timeChart"></div>
104+
<div id="resultTable" class="list-of-site"></div>
105+
<div id="total" class="inline-flex"></div>
106+
<div id="byDays" class="calendar-block"></div>
104107

105108
</body>
106109

107-
</html>
110+
</html>
111+
112+
<script src="scripts/chart/d3.v4.min.js"></script>
113+
<script src="scripts/chart/chart-core.js"></script>
114+
<script src="scripts/storage.js"></script>
115+
<script src="scripts/common.js"></script>
116+
<script src="scripts/ui.js"></script>
117+
<script src="scripts/webact.js"></script>

0 commit comments

Comments
 (0)