-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
66 lines (61 loc) · 4.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content Tracker</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/popover.css">
</head>
<body>
<!-- Readme Section -->
<a class="readme-info" href="https://github.com/aakashdinkarh/content-tracker/blob/master/README.md#start-tracking" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 442 512.12"><path d="M73.5 0h354.32v395.44c-.64 11.05-14.91 11.3-30.32 10.62H68.28c-21.33 0-38.77 17.43-38.77 38.76 0 21.34 17.44 38.77 38.77 38.77h343.39v-41.25H442v52.43c0 9.55-7.8 17.35-17.35 17.35H69.78C22.54 511.76 0 494.94 0 456.56V73.5C0 33.07 33.07 0 73.5 0m107.17 253.02v-10.73c0-12.59 1-22.66 2.95-30.13 1.97-7.48 4.95-13.5 8.88-18.07 3.87-4.52 8.66-8.66 14.31-12.32 4.89-3.23 9.25-6.29 13.12-9.31 3.88-2.95 6.89-6.13 9.15-9.46q3.39-5.085 3.39-11.46c0-3.82-.92-7.21-2.75-10.11-1.82-2.91-4.3-5.17-7.42-6.78-3.17-1.56-6.61-2.37-10.43-2.37-4.15 0-7.96.92-11.41 2.85-3.49 1.88-6.29 4.52-8.39 7.91-2.1 3.34-3.12 7.26-3.12 11.67h-58.69c.11-16.78 3.93-30.44 11.46-40.93 7.48-10.55 17.43-18.24 29.8-23.19s25.98-7.37 40.78-7.37c16.35 0 30.93 2.37 43.78 7.16 12.86 4.78 22.97 11.94 30.4 21.51 7.37 9.64 11.08 21.58 11.08 35.94 0 9.25-1.56 17.37-4.74 24.37-3.17 6.99-7.58 13.12-13.17 18.45-5.6 5.32-12.16 10.17-19.64 14.52-5.54 3.17-10.16 6.51-13.88 9.9-3.76 3.39-6.59 7.25-8.5 11.57-1.9 4.29-2.85 9.52-2.85 15.65v10.73zm27.97 82.28c-8.88 0-16.48-3.1-22.76-9.3-6.3-6.22-9.36-13.83-9.36-22.76 0-8.71 3.07-16.19 9.36-22.38 6.3-6.18 13.88-9.25 22.76-9.25 8.39 0 15.82 3.07 22.27 9.25 6.45 6.19 9.84 13.67 9.84 22.38 0 5.92-1.66 11.35-4.68 16.2-3.01 4.84-6.94 8.7-11.72 11.56-4.85 2.89-10.06 4.3-15.71 4.3M68.17 452.81h315.37c3.19 0 5.8 2.62 5.8 5.8v3.53c0 3.18-2.61 5.8-5.8 5.8H68.17c-3.18 0-5.79-2.61-5.79-5.8v-3.53c0-3.19 2.6-5.8 5.79-5.8m0-29.96h315.37c3.19 0 5.8 2.62 5.8 5.8v3.53c0 3.18-2.61 5.8-5.8 5.8H68.17c-3.18 0-5.79-2.61-5.79-5.8v-3.53c0-3.19 2.6-5.8 5.79-5.8"/></svg>
</a>
<!-- Regular page content -->
<h2>Content Tracker
<span class="info-icon" id="infoIcon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke="currentColor" stroke-width="2" d="M12 6v8"/><circle cx="12" cy="17.5" r="1" fill="currentColor"/></svg>
</span>
</h2>
<!-- Popover for important info -->
<div class="popover" id="infoPopover">
<div class="popover-arrow"></div>
<div class="popover-header">Important Behaviors</div>
<div class="popover-content">
<ul>
<li>Tracking stops if you refresh the page. Restart it to continue.</li>
<li>Tracks once per activation. Stops after detecting the content.</li>
<li>Track separately on each page. Each page's tracker works independently.</li>
<li>Ensure that Chrome notifications are enabled on your device for this to work.</li>
</ul>
</div>
</div>
<form id="trackerForm">
<div class="container">
<label for="targetText">Track content:</label>
<div class="checkbox-container" >
<input type="checkbox" name="case-sensitive" id="caseSensitive">
<label for="caseSensitive">Case sensitive</label>
</div>
<input id="targetText" required type="text" placeholder="Enter content to track">
<button type="submit" id="startTracking">Start Tracking</button>
<button type="button" id="stopTracking">Stop Tracking</button>
</div>
<div id="confirmationMessage">
Tracking started for
<div id="trackingText"></div>
</div>
</form>
<!-- Fallback error UI -->
<div id="errorContainer" class="error-message">
<h3>Extension Disabled</h3>
<p>The extension cannot be used on this page.</p>
<p id="errorMessagePlaceholder"></p>
</div>
<script src="scripts/utils.js"></script>
<script src="scripts/trackerForm.js"></script>
<script src="scripts/popup.js"></script>
<script src="scripts/popover.js" ></script>
</body>
</html>