-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsettings.html
More file actions
128 lines (121 loc) · 10.8 KB
/
Copy pathsettings.html
File metadata and controls
128 lines (121 loc) · 10.8 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta property="og:title" content="Fleet — Settings">
<meta property="og:description" content="Theme, alerts, and thresholds for the Fleet dashboard.">
<meta property="og:url" content="https://cdrrazan.github.io/Fleet/settings.html">
<meta name="twitter:title" content="Fleet — Settings">
<meta name="twitter:description" content="Theme, alerts, and thresholds for the Fleet dashboard.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Fleet">
<meta property="og:image" content="https://cdrrazan.github.io/Fleet/assets/img/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://cdrrazan.github.io/Fleet/assets/img/og.png">
<title>Settings · Fleet</title>
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/tokens.css">
<link rel="stylesheet" href="assets/css/fleet.css">
<script src="assets/js/theme.js"></script>
</head>
<body>
<div class="shell">
<aside class="side">
<div class="brand"><div class="logo"><img src="assets/img/favicon.svg" width="36" height="36" alt=""></div><div><div class="bt">Fleet</div><div class="bs">Control panel</div></div></div>
<nav class="nav">
<div class="navlabel">Resources</div>
<a href="index.html"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg></span> All apps</a>
<div class="navlabel">Monitoring</div>
<a href="incidents.html"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg></span> Incidents</a>
<a href="status.html"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10"/><path d="M12 6v6l4 2"/></svg></span> Status page ↗</a>
<a href="components.html"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18"/></svg></span> Components</a>
<div class="navlabel">Manage</div>
<a href="settings.html" class="active"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span> Settings</a>
</nav>
<div class="grow"></div>
<div class="user">
<div class="avatar"><svg viewBox="0 0 40 40"><rect width="40" height="40" fill="#5b54e6"/><text x="20" y="26" font-size="16" fill="#fff" text-anchor="middle" font-family="sans-serif" font-weight="600">A</text></svg></div>
<div style="min-width:0;flex:1"><div class="un">Alex Rivera</div><div class="ue">@alex</div></div>
<a class="logout" href="login.html" title="Sign out"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg></a>
</div>
</aside>
<div class="content">
<header class="simple-top">
<button class="burger" id="burger" aria-label="Menu">☰</button>
<button class="iconbtn sidetgl" id="sidetgl" title="Collapse sidebar"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="9" y1="4" x2="9" y2="20"/></svg></button>
<h2>Settings</h2>
<button class="iconbtn" id="themebtn" title="Toggle theme" style="margin-left:auto"><span class="moon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/></svg></span><span class="sun"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/></svg></span></button>
</header>
<main style="overflow-y:auto">
<div class="page">
<h1 class="page-h">Settings</h1>
<p class="page-sub">Manage your control panel, appearance, and alerting.</p>
<section class="card" style="padding:6px 20px;margin-bottom:18px">
<div class="setrow"><div class="lbl"><b>Theme</b><span>Light, dark, or follow system.</span></div>
<div class="seggroup" id="seg-theme"><button data-val="light">Light</button><button data-val="dark">Dark</button><button data-val="system">System</button></div></div>
<div class="setrow"><div class="lbl"><b>Default view</b><span>How the app list renders on load.</span></div>
<div class="seggroup" id="seg-view"><button data-val="list">List</button><button data-val="grid">Grid</button></div></div>
<div class="setrow"><div class="lbl"><b>Mask sensitive info</b><span>Hide IP / SSH / host / tunnel ids on the cards — safe screen-sharing.</span></div>
<label class="switch"><input type="checkbox" id="set-mask"><span class="track"></span></label></div>
</section>
<section class="card" style="padding:6px 20px;margin-bottom:18px">
<div class="setrow"><div class="lbl"><b>Email alerts</b><span>Notify me when an app goes down or recovers.</span></div>
<label class="switch"><input type="checkbox" id="set-emailon" checked><span class="track"></span></label></div>
<div class="setrow"><div class="lbl"><b>Recipients</b><span>Where incident emails are sent (comma separated).</span></div>
<input type="text" id="set-recipient" value="alex@example.com" style="max-width:280px"></div>
<div class="setrow"><div class="lbl"><b>Subject template</b><span>Placeholders: {app} {status} {detail} {url} {time}.</span></div>
<input type="text" id="set-subject" style="max-width:280px"></div>
<div class="setrow" style="align-items:flex-start"><div class="lbl"><b>Body template</b><span>Placeholders as above.</span></div>
<textarea id="set-body" rows="3" style="max-width:280px;width:280px"></textarea></div>
</section>
<section class="card" style="padding:6px 20px 16px;margin-bottom:18px">
<div class="setrow" style="align-items:flex-start"><div class="lbl"><b>Tech stacks</b><span>Relabel a framework/db on the cards — one <code>key=Label</code> per line.</span></div>
<textarea id="set-tech" rows="4" placeholder="rails=Ruby on Rails next=Next.js" style="max-width:280px;width:280px"></textarea></div>
</section>
<section class="card" style="padding:16px 20px;border-color:var(--red-line)">
<div class="setrow" style="padding-top:0"><div class="lbl"><b style="color:var(--danger)">Danger zone</b><span>Stop the entire fleet. This affects every app.</span></div>
<button class="btn btn-danger">Stop all apps</button></div>
</section>
<div style="margin-top:20px;display:flex;gap:10px"><button class="btn btn-primary" id="set-save">Save changes</button><a class="btn" href="index.html">Back to dashboard</a></div>
</div>
</main>
</div>
</div>
<script src="assets/js/chrome.js"></script>
<script src="assets/js/md3.js" defer></script>
<script>
// Wire the settings form to localStorage — the static demo's stand-in for
// ~/.roost/panel.json. Values apply on the dashboard + incidents pages.
(function(){
var DEF={emailSubject:"Roost · {app} is {status}",emailBody:"{app} is {detail}.\n\n{url}\n{time}"};
function FS(){try{return JSON.parse(localStorage.getItem("fleet-settings")||"{}");}catch(e){return {};}}
function seg(id,val){var g=document.getElementById(id);if(!g)return;g.querySelectorAll("button").forEach(function(b){b.classList.toggle("active",b.dataset.val===val);});}
function segVal(id){var b=document.getElementById(id).querySelector("button.active");return b?b.dataset.val:"";}
var s=FS();
seg("seg-theme",localStorage.getItem("fleet-theme")||"system");
seg("seg-view",localStorage.getItem("fleet-view")||"list");
document.getElementById("set-mask").checked=!!s.mask;
if(s.recipient)document.getElementById("set-recipient").value=s.recipient;
document.getElementById("set-subject").value=s.emailSubject||DEF.emailSubject;
document.getElementById("set-body").value=s.emailBody||DEF.emailBody;
var tech=s.tech||{};document.getElementById("set-tech").value=Object.keys(tech).map(function(k){return k+"="+tech[k];}).join("\n");
["seg-theme","seg-view"].forEach(function(id){document.getElementById(id).addEventListener("click",function(e){var b=e.target.closest("button[data-val]");if(!b)return;seg(id,b.dataset.val);});});
function parseTech(v){var o={};v.split("\n").forEach(function(line){line=line.trim();var i=line.indexOf("=");if(i>0){var k=line.slice(0,i).trim(),lab=line.slice(i+1).trim();if(k&&lab)o[k]=lab;}});return o;}
document.getElementById("set-save").addEventListener("click",function(){
var theme=segVal("seg-theme"),view=segVal("seg-view");
localStorage.setItem("fleet-theme",theme==="system"?(matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light"):theme);
localStorage.setItem("fleet-view",view);
var next={mask:document.getElementById("set-mask").checked,recipient:document.getElementById("set-recipient").value.trim(),emailSubject:document.getElementById("set-subject").value,emailBody:document.getElementById("set-body").value,tech:parseTech(document.getElementById("set-tech").value)};
localStorage.setItem("fleet-settings",JSON.stringify(next));
document.documentElement.dataset.theme=localStorage.getItem("fleet-theme");
var t=document.createElement("div");t.className="toast in";t.textContent="Settings saved";document.body.appendChild(t);setTimeout(function(){t.classList.remove("in");setTimeout(function(){t.remove();},250);},1800);
});
})();
</script>
</body>
</html>