noah33565 commited on
Commit
823940b
·
verified ·
1 Parent(s): 86ffa14

Upload member-count.html

Browse files
Files changed (1) hide show
  1. member-count.html +146 -0
member-count.html ADDED
@@ -0,0 +1,146 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NoahsChat – Member Count</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+ body {
11
+ background: #0a0e14;
12
+ color: #e2e8f0;
13
+ font-family: Orbitron, monospace;
14
+ min-height: 100vh;
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+ }
19
+ .container {
20
+ text-align: center;
21
+ padding: 40px;
22
+ }
23
+ .title {
24
+ font-size: .7rem;
25
+ color: #4a5568;
26
+ letter-spacing: .3em;
27
+ margin-bottom: 30px;
28
+ }
29
+ .logo {
30
+ font-size: 1.6rem;
31
+ font-weight: 900;
32
+ color: #00d4ff;
33
+ letter-spacing: .2em;
34
+ margin-bottom: 40px;
35
+ }
36
+ .stats {
37
+ display: flex;
38
+ gap: 30px;
39
+ justify-content: center;
40
+ flex-wrap: wrap;
41
+ }
42
+ .stat-box {
43
+ background: #0d1117;
44
+ border: 1px solid #1e2a3a;
45
+ border-radius: 8px;
46
+ padding: 24px 36px;
47
+ min-width: 140px;
48
+ }
49
+ .stat-label {
50
+ font-size: .55rem;
51
+ color: #4a5568;
52
+ letter-spacing: .15em;
53
+ margin-bottom: 10px;
54
+ }
55
+ .stat-value {
56
+ font-size: 2.4rem;
57
+ font-weight: 700;
58
+ }
59
+ .stat-value.members { color: #00d4ff; }
60
+ .stat-value.online { color: #4eff91; }
61
+ .stat-value.visitors { color: #a855f7; }
62
+ .updated {
63
+ margin-top: 30px;
64
+ font-size: .55rem;
65
+ color: #2d3748;
66
+ letter-spacing: .1em;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body>
71
+
72
+ <div class="container">
73
+ <div class="logo">NoahsChat</div>
74
+ <div class="title">SERVER STATISTIKEN</div>
75
+ <div class="stats">
76
+ <div class="stat-box">
77
+ <div class="stat-label">MITGLIEDER</div>
78
+ <div class="stat-value members" id="count-members">—</div>
79
+ </div>
80
+ <div class="stat-box">
81
+ <div class="stat-label">ONLINE</div>
82
+ <div class="stat-value online" id="count-online">—</div>
83
+ </div>
84
+ <div class="stat-box">
85
+ <div class="stat-label">UNIQUE BESUCHER</div>
86
+ <div class="stat-value visitors" id="count-visitors">—</div>
87
+ </div>
88
+ </div>
89
+ <div class="updated" id="last-updated">WIRD GELADEN...</div>
90
+ </div>
91
+
92
+ <script>
93
+ const JSONBIN_KEY = '$2a$10$Hurr28g4Cy7NWpA/Abd6YOzkBLuC8PdAOPQR34g4pEkA24LpXo7NK';
94
+ const JSONBIN_BIN = '69976e43ae596e708f382b97';
95
+
96
+ // Fingerprint
97
+ function getFingerprint() {
98
+ const s = navigator.userAgent + screen.width + screen.height + screen.colorDepth
99
+ + (Intl.DateTimeFormat().resolvedOptions().timeZone || '') + navigator.language;
100
+ let h = 0;
101
+ for (let i = 0; i < s.length; i++) { h = ((h << 5) - h) + s.charCodeAt(i); h = h & h; }
102
+ return Math.abs(h).toString(36);
103
+ }
104
+ const MY_FP = getFingerprint();
105
+
106
+ async function loadAndTrack() {
107
+ try {
108
+ const r = await fetch(`https://api.jsonbin.io/v3/b/${JSONBIN_BIN}/latest`, {
109
+ headers: { 'X-Master-Key': JSONBIN_KEY, 'X-Bin-Meta': 'false' }
110
+ });
111
+ const DB = await r.json();
112
+
113
+ // Unique Visitor tracken
114
+ if (!DB.visitors) DB.visitors = {};
115
+ const isNew = !DB.visitors[MY_FP];
116
+ if (isNew) {
117
+ DB.visitors[MY_FP] = { ts: Date.now() };
118
+ await fetch(`https://api.jsonbin.io/v3/b/${JSONBIN_BIN}`, {
119
+ method: 'PUT',
120
+ headers: { 'Content-Type': 'application/json', 'X-Master-Key': JSONBIN_KEY, 'X-Bin-Versioning': 'false' },
121
+ body: JSON.stringify(DB)
122
+ });
123
+ }
124
+
125
+ // Werte anzeigen
126
+ document.getElementById('count-members').textContent = Object.keys(DB.users || {}).length;
127
+ document.getElementById('count-visitors').textContent = Object.keys(DB.visitors || {}).length;
128
+
129
+ const now = Date.now();
130
+ const online = Object.values(DB.online || {}).filter(ts => now - ts < 12000).length;
131
+ document.getElementById('count-online').textContent = online;
132
+
133
+ const time = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
134
+ document.getElementById('last-updated').textContent = 'ZULETZT AKTUALISIERT: ' + time;
135
+
136
+ } catch(e) {
137
+ document.getElementById('last-updated').textContent = 'FEHLER BEIM LADEN';
138
+ }
139
+ }
140
+
141
+ loadAndTrack();
142
+ setInterval(loadAndTrack, 10000); // alle 10 Sekunden aktualisieren
143
+ </script>
144
+
145
+ </body>
146
+ </html>