Diff -- /var/www/vhosts/3dshawn.com/site1/TEMPLATES/sites.html

O Operator
Diff

/var/www/vhosts/3dshawn.com/site1/TEMPLATES/sites.html

added on local at 2026-07-12 01:04:48

Added
+185
lines
Removed
-0
lines
Context
0
unchanged
Blobs
from
to d97f225f2671
Restore this content →
Unified diff
Naive LCS-based line diff. Additions in emerald, deletions in rose. Both sides decompressed live from BLOB_STORE.
1<div class="page-head">
2 <span class="page-eyebrow"><span class="dot"></span> Sites</span>
3 <h1 class="page-title">Sites monitored</h1>
4 <p class="page-subtitle">Every active file monitor as a card. Click any card for the deep-dive: 90-day activity, storage math, recent changes, hotspots, releases scoped here, drift alerts, compile results, and more.</p>
5</div>
6
7<div class="ds-guide">
8 <div class="dsg-icon">i</div>
9 <div>
10 <span class="dsg-title">Reading the grid:</span>
11 The activity chip <strong>HOT / ACTIVE / LIVE / QUIET</strong> reflects last 24 hours. Sparkline is the last 30 days. Every card is clickable &mdash; opens the full per-site drilldown.
12 </div>
13</div>
14
15<!-- Portfolio-level KPI row -->
16<div class="dash-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:18px">
17 <div class="module glow-teal">
18 <div class="module-head"><div class="left"><div class="module-title">Sites monitored</div></div></div>
19 <div class="module-body kpi kpi-teal"><div class="num">$total</div><div class="lbl">active monitors</div></div>
20 </div>
21 <div class="module glow-emerald">
22 <div class="module-head"><div class="left"><div class="module-title">Live in 24h</div></div></div>
23 <div class="module-body kpi kpi-emerald"><div class="num">$total_24h</div><div class="lbl">at least one change</div></div>
24 </div>
25 <div class="module glow-rose">
26 <div class="module-head"><div class="left"><div class="module-title">Hot sites</div></div></div>
27 <div class="module-body kpi kpi-rose"><div class="num">$hot_sites</div><div class="lbl">50+ changes / 24h</div></div>
28 </div>
29 <div class="module glow-sky">
30 <div class="module-head"><div class="left"><div class="module-title">Quiet</div></div></div>
31 <div class="module-body kpi kpi-sky"><div class="num">$quiet_sites</div><div class="lbl">no activity today</div></div>
32 </div>
33</div>
34
35<!-- Filter -->
36<form method="get" action="/sites.cgi" style="display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;margin-bottom:16px">
37 <span class="rb-label" style="margin-right:6px">Filter</span>
38 <input type="text" name="q" value="$q" placeholder="Search sites by name, path, or server..."
39 style="flex:1;background:var(--bg-1);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:12.5px">
40 <button type="submit" class="tr-chip is-active" style="border:none">Apply</button>
41 [if:$q]<a class="tr-chip" href="/sites.cgi">Clear</a>[/if]
42</form>
43
44<!-- Cards grid -->
45[if:$has_sites]
46<div class="ds-sites-grid">
47[loop:@sites]
48 <a class="ds-site-card ds-act-$activity_dot" href="$site_url">
49 <div class="ds-card-head">
50 <div class="ds-card-badge">$initials</div>
51 <div class="ds-card-title">
52 <div class="ds-card-name">$scan_name</div>
53 <div class="ds-card-server">
54 <span class="pill $kind_pill" style="font-size:9.5px">$server_kind</span>
55 $server_name
56 </div>
57 </div>
58 <div class="ds-card-activity">
59 <span class="ds-site-dot ds-dot-$activity_dot"></span>
60 <span class="ds-act-lbl">$activity_label</span>
61 </div>
62 </div>
63
64 <div class="ds-card-path mono">$scan_path_short</div>
65
66 <div class="ds-card-spark">$spark_svg</div>
67
68 <div class="ds-card-kpis">
69 <div><div class="ds-card-num">$c_24h</div><div class="ds-card-sub">24h</div></div>
70 <div><div class="ds-card-num">$c_7d</div><div class="ds-card-sub">7d</div></div>
71 <div><div class="ds-card-num">$active_files</div><div class="ds-card-sub">files</div></div>
72 <div><div class="ds-card-num">$storage_gz_h</div><div class="ds-card-sub">stored</div></div>
73 </div>
74
75 <div class="ds-card-meta">
76 <span class="ds-card-tag" title="Total captures ever">$c_all lifetime</span>
77 <span class="ds-card-tag" title="Retention window">$retention_h retention</span>
78 [if:$rel_total]<span class="ds-card-tag ds-tag-emerald" title="Named releases covering this site">$rel_total releases</span>[/if]
79 [if:$pin_ct]<span class="ds-card-tag ds-tag-teal" title="Explicit file pins">$pin_ct pins</span>[/if]
80 [if:$has_drift]<span class="ds-card-tag ds-tag-rose" title="Pinned files that have drifted">$drift_ct drifted</span>[/if]
81 [if:$has_compile_data]<span class="ds-card-tag ds-tag-amber" title="Compile checks: ok / error">cc $cc_ok / $cc_err</span>[/if]
82 </div>
83
84 <div class="ds-card-last">Last change: <strong>$last_h</strong></div>
85 </a>
86[/loop]
87</div>
88[/if]
89
90[if:!$has_sites]
91<div class="module">
92 <div class="module-body" style="text-align:center;padding:36px;color:var(--text-dim)">
93 No monitors match [if:$q]<code>$q</code>[/if]. <a href="/file_monitors.cgi" style="color:var(--accent-hi)">Add a monitor</a> to start.
94 </div>
95</div>
96[/if]
97
98<style>
99.ds-sites-grid {
100 display: grid;
101 grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
102 gap: 16px;
103}
104.ds-site-card {
105 display: block;
106 padding: 16px 18px 14px;
107 background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
108 border: 1px solid var(--border);
109 border-radius: 14px;
110 color: inherit;
111 text-decoration: none;
112 transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
113 position: relative;
114 overflow: hidden;
115}
116.ds-site-card:hover {
117 border-color: var(--accent);
118 transform: translateY(-2px);
119 box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(20,184,166,.15);
120}
121.ds-site-card::before {
122 content: '';
123 position: absolute;
124 top: 0; left: 0; right: 0;
125 height: 2px;
126 background: var(--border);
127 transition: background .15s ease;
128}
129.ds-site-card.ds-act-live::before { background: linear-gradient(90deg, #34d399, transparent); }
130.ds-site-card.ds-act-warm::before { background: linear-gradient(90deg, #f59e0b, transparent); }
131.ds-site-card.ds-act-hot::before { background: linear-gradient(90deg, #f43f5e, transparent); }
132
133.ds-card-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
134.ds-card-badge {
135 width: 40px; height: 40px; border-radius: 10px;
136 display: grid; place-items: center;
137 background: linear-gradient(135deg, rgba(20,184,166,.22), rgba(6,78,74,.10));
138 border: 1px solid rgba(20,184,166,.35);
139 color: var(--accent-hi);
140 font-weight: 800; font-size: 13px;
141 flex: 0 0 auto;
142}
143.ds-card-title { flex: 1 1 auto; min-width: 0; }
144.ds-card-name { color: #f4f7fb; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
145.ds-card-server { color: var(--text-muted); font-size: 11px; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
146.ds-card-activity { display:flex; align-items:center; gap:5px; flex: 0 0 auto; }
147.ds-act-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; color: var(--text-muted); }
148.ds-site-card.ds-act-live .ds-act-lbl { color: #86efac; }
149.ds-site-card.ds-act-warm .ds-act-lbl { color: #fcd34d; }
150.ds-site-card.ds-act-hot .ds-act-lbl { color: #fda4af; }
151
152.ds-card-path { color: var(--text-muted); font-size: 11px; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
153.ds-card-spark { margin: 0 -2px 12px; }
154.ds-card-spark svg { width: 100%; height: 30px; }
155
156.ds-card-kpis {
157 display: grid; grid-template-columns: repeat(4, 1fr);
158 gap: 8px;
159 padding: 10px 0 12px;
160 border-top: 1px solid var(--border);
161 border-bottom: 1px solid var(--border);
162 margin-bottom: 10px;
163}
164.ds-card-num { font-family: var(--sans); font-weight: 800; font-size: 15px; color: #e5edf5; }
165.ds-card-sub { font-size: 10px; color: var(--text-muted); letter-spacing: .8px; text-transform: uppercase; margin-top: 1px; }
166
167.ds-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
168.ds-card-tag {
169 padding: 2px 8px;
170 border-radius: 999px;
171 font-size: 10px;
172 color: var(--text-dim);
173 background: var(--bg-3);
174 border: 1px solid var(--border);
175 font-family: var(--mono);
176 letter-spacing: 0;
177}
178.ds-card-tag.ds-tag-emerald { color: #86efac; background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.30); }
179.ds-card-tag.ds-tag-teal { color: var(--accent-hi); background: rgba(20,184,166,.10); border-color: rgba(20,184,166,.30); }
180.ds-card-tag.ds-tag-rose { color: #fda4af; background: rgba(244,63,94,.10); border-color: rgba(244,63,94,.35); }
181.ds-card-tag.ds-tag-amber { color: #fcd34d; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); }
182
183.ds-card-last { font-size: 11px; color: var(--text-muted); }
184.ds-card-last strong { color: var(--text-dim); font-family: var(--mono); }
185</style>