Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
135 lines (117 loc) · 6.95 KB
/
Copy pathindex.html
File metadata and controls
135 lines (117 loc) · 6.95 KB
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
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>is-a.dev Data Visualiser</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css">
<!-- Scripts -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://raw.is-a.dev/v2.json">
<!-- Favicon -->
<link rel="shortcut icon" href="https://is-a.dev/assets/favicon.ico" type="image/x-icon">
</head>
<body class="min-h-screen">
<main class="mx-auto max-w-6xl px-6 py-12">
<div class="mb-10">
<h1 class="text-4xl font-bold tracking-tight text-[var(--accent)] pb-6 border-b border-[var(--accent)]">
is-a.dev Data Visualiser</h1>
</div>
<div id="loading" class="py-12 flex justify-center items-center">
<div class="spinner"></div>
</div>
<div id="error" class="hidden rounded-xl border border-red-500 bg-red-900/20 p-4 text-red-400"></div>
<div id="content" class="hidden">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div class="border border-[var(--accent)] rounded-xl p-6">
<p class="text-md text-[var(--body-fg)]/70">Users</p>
<p id="unique-users" class="mt-2 text-3xl font-bold text-[var(--accent)]">0</p>
</div>
<div class="border border-[var(--accent)] rounded-xl p-6">
<p class="text-md text-[var(--body-fg)]/70">Subdomains</p>
<p id="subdomains" class="mt-2 text-3xl font-bold text-[var(--accent)]">0</p>
</div>
<div class="border border-[var(--accent)] rounded-xl p-6">
<p class="text-md text-[var(--body-fg)]/70">DNS Records</p>
<p id="records" class="mt-2 text-3xl font-bold text-[var(--accent)]">0</p>
</div>
<div class="border border-[var(--accent)] rounded-xl p-6">
<p class="text-md text-[var(--body-fg)]/70">Subomains per user (avg.)</p>
<p id="average-domains-per-user" class="mt-2 text-3xl font-bold text-[var(--accent)]">0</p>
</div>
</div>
<div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
<div class="border border-[var(--accent)] rounded-xl p-6">
<h2 class="text-xl font-semibold text-[var(--accent)] mb-4">DNS Record Types</h2>
<div class="relative h-80">
<canvas id="record-types-chart"></canvas>
</div>
</div>
<div class="border border-[var(--accent)] rounded-xl p-6">
<h2 class="text-xl font-semibold text-[var(--accent)] mb-4">Top 10 Users</h2>
<div class="relative h-80">
<canvas id="top-users-chart"></canvas>
</div>
</div>
</div>
<div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-1 lg:grid-cols-3">
<div class="border border-[var(--accent)] rounded-xl p-6">
<p class="text-md text-[var(--body-fg)]/70">Subdomains with websites</p>
<p id="subdomains-with-websites" class="mt-2 text-3xl font-bold text-[var(--accent)]">0</p>
</div>
<div class="border border-[var(--accent)] rounded-xl p-6">
<p class="text-md text-[var(--body-fg)]/70">Subdomains using URL redirects</p>
<p id="subdomains-with-url" class="mt-2 text-3xl font-bold text-[var(--accent)]">0</p>
</div>
<div class="border border-[var(--accent)] rounded-xl p-6">
<p class="text-md text-[var(--body-fg)]/70">Subdomains with email</p>
<p id="subdomains-with-email" class="mt-2 text-3xl font-bold text-[var(--accent)]">0</p>
</div>
</div>
<div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2">
<div class="border border-[var(--accent)] rounded-xl p-6">
<p class="text-md text-[var(--body-fg)]/70">Subdomains using GitHub Pages</p>
<p class="text-xs text-gray-400">* Percentage is calculated based on subdomains with websites</p>
<p id="github-pages" class="mt-2 text-3xl font-bold text-[var(--accent)]">0</p>
</div>
<div class="border border-[var(--accent)] rounded-xl p-6">
<p class="text-md text-[var(--body-fg)]/70">Subdomains using Cloudflare Pages</p>
<p class="text-xs text-gray-400">* Percentage is calculated based on subdomains with websites</p>
<p id="cloudflare-pages" class="mt-2 text-3xl font-bold text-[var(--accent)]">0</p>
</div>
</div>
<div class="mt-6 border border-[var(--accent)] rounded-xl overflow-hidden">
<div class="border-b border-[var(--accent)] px-6 py-5">
<h2 class="text-xl font-semibold text-[var(--accent)]">DNS Records</h2>
</div>
<ul id="records-list" class="divide-y divide-[var(--accent)]">
</ul>
</div>
<div class="mt-6 border border-[var(--accent)] rounded-xl overflow-hidden">
<div class="border-b border-[var(--accent)] px-6 py-5">
<h2 class="text-xl font-semibold text-[var(--accent)]">Data Sources</h2>
</div>
<ul class="divide-y divide-[var(--accent)]">
<li class="flex items-center justify-between px-6 py-4">
<span class="font-semibold">is-a.dev DNS Zone</span> <span id="zone-updated" class="text-gray-500"></span>
</li>
<li class="flex items-center justify-between px-6 py-4">
<span class="font-semibold">Raw API</span> <span id="raw-api-updated" class="text-gray-500"></span>
</li>
</ul>
</div>
</div>
<footer>
<p class="mt-8 text-center text-md text-[var(--body-fg)]/70">
© 2023-<script>document.write(new Date().getFullYear())</script> <a href="https://is-a.dev" class="text-[var(--accent)] hover:underline">is-a.dev</a> - All Rights Reserved.
</p>
</footer>
</main>
<script src="script.js"></script>
</body>
</html>