-
Notifications
You must be signed in to change notification settings - Fork 45
/
index.html
133 lines (118 loc) 路 7.39 KB
/
index.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hit Counter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
function generateCode() {
let url = document.getElementById('url').value;
let count = document.getElementById('count').value;
let imageUrl = window.location.origin + '/' + count + '/tag.svg?url=' + encodeURIComponent(url);
document.getElementById('resultImageTag').innerText = '<img src="' + imageUrl + '" alt="Hits">';
document.getElementById('resultMarkdown').innerText = '';
document.getElementById('resultImage').src = window.location.origin + '/nocount/tag.svg?url=' + encodeURIComponent(url);
}
function checkUrl() {
let url = document.getElementById('urlCheck').value;
document.getElementById('urlCheckImage').src = '/nocount/tag.svg?url=' + encodeURIComponent(url);
}
function copyContentOf(id) {
let text = document.getElementById(id).innerText;
if (navigator.clipboard) {
navigator.clipboard.writeText(text)
.then(() => {})
.catch(err => {
console.error('Could not copy text: ', err);
});
} else {
let textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
let successful = document.execCommand('copy');
document.body.removeChild(textArea);
if (!successful) {
alert("Failed to copy")
}
}
}
function host() {
document.write(window.location.origin);
}
</script>
<style>
.o-a {overflow-x: auto;}
.mw-800p {max-width: 800px; margin: auto;}
</style>
</head>
<body class="text-center pt-1">
<div class="container">
<div class="row">
<div class="col-sm">
<h1><a href="https://github.com/brentvollebregt/hit-counter">Hit Counter</a></h1>
<p class="lead text-muted mb-1">Easily count hits on a website by requesting a svg that displays a hit count.</p>
<img src="/count/tag.svg" alt="Hits">
<hr>
<h2 class="mt-4">Get the Image for the Page It's On</h2>
<p class="my-1">If you want to get the hit count image for a page you can edit and you want to count, add this line:</p>
<p id="standard" class="text-primary my-0"><img src="<script>host()</script>/count/tag.svg" alt="Hits"></p>
<button type="button" class="btn btn-outline-primary mt-3" onclick="copyContentOf('standard')">Copy HTML Snippet</button>
<h2 class="mt-4">Generate SVG Code For A Different Website</h2>
<div class="container-fluid">
<div class="row">
<div class="col-md-9 px-1">
<input id="url" type="text" class="form-control" placeholder="https://github.com/brentvollebregt/hit-counter" value="https://github.com/brentvollebregt/hit-counter" onkeyup="generateCode()">
</div>
<div class="col-md-3 px-1">
<select id="count" class="form-control" onchange="generateCode()">
<option>count</option>
<option>nocount</option>
</select>
</div>
</div>
</div>
<div class="my-2">
<img id="resultImage" src="" alt="Selected Hit Counter">
</div>
<p class="text-muted my-1">Image Tag</p>
<p id="resultImageTag" class="text-primary my-0 o-a"></p>
<p class="text-muted my-1">Markdown</p>
<p id="resultMarkdown" class="text-primary my-0 o-a"></p>
<button type="button" class="btn btn-outline-primary mt-3" onclick="copyContentOf('resultImageTag')">Copy Image Tag</button>
<button type="button" class="btn btn-outline-primary mt-3" onclick="copyContentOf('resultMarkdown')">Copy Markdown</button>
<hr>
<h2 class="mt-4">Top 10 Domains Using This By Views</h2>
<table class="table table-bordered table-sm mw-800p">
<thead>
<tr>
<th scope="col">Domain</th>
<th scope="col">Total Hits Counted</th>
</tr>
</thead>
<tbody>
{% for site in top_sites['domains'] %}
<tr>
<td style="word-break: break-all;"><a href="//{{ site }}">{{ site }}</a></td>
<td>{{ top_sites['values'][site] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2 class="mt-4">About</h2>
<div class="mw-800p">
<p>This site allows you to request for a svg file that displays views for a url. This url can either be passed as a query parameter or the referrer (or referer) value in the header will be used. </p>
<p>These is also a small method to prevent the refresh count increase issue (if you want to call it an issue, I see it as annoying) which uses cookies.</p>
<p><strong>This makes is very easy too keep track of views on static sites like Github Pages.</strong> (can also be uses on non-static sites as a general counter)</p>
<p>The source code of this server can be found at <a href="https://github.com/brentvollebregt/hit-counter">github.com/brentvollebregt/hit-counter</a>.</p>
</div>
</div>
</div>
</div>
<script>generateCode();</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>