Initial commit

app/Http/Controllers/Home Server/shared-assets/css/style.css

@@ -0,0 +1,96 @@
+:root { --card-bg:#fff; --muted:#6b7280; }
+
+* { box-sizing:border-box; }
+body {
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+  margin:0; background:#f3f4f6; color:#111827;
+}
+
+/* Header */
+header { padding:24px 16px 8px; text-align:center; }
+h1 { margin:0 0 6px; font-size: clamp(20px, 3vw, 32px); }
+.sub { color: var(--muted); font-size: 14px; }
+
+/* Layout */
+.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
+.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
+
+/* Card */
+.card { min-width: 0; background: var(--card-bg); border-radius:14px; box-shadow: 0 6px 20px rgba(0,0,0,.06); padding:18px; margin-bottom: 20px; }
+.card h2 { margin:0 0 12px; font-size:18px; }
+
+/* Flex helpers */
+.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
+.spacer { flex:1; }
+
+/* Buttons */
+.btn { appearance:none; border:0; border-radius:10px; padding:8px 12px; background:#111827; color:#fff; cursor:pointer; font-weight:600; }
+.btn.ghost { background:#e5e7eb; color:#111827; }
+.btn.small { padding:6px 10px; font-size:12px; }
+
+/* Pills & chips */
+.pill { border-radius:999px; padding:6px 10px; background:#f3f4f6; color:#111827; display:inline-flex; align-items:center; gap:8px; }
+.status-dot { width:10px; height:10px; border-radius:50%; background:#9CA3AF; display:inline-block; }
+.ok .status-dot { background:#10B981; }
+.bad .status-dot { background:#EF4444; }
+.chip { font-size:12px; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; }
+
+/* Inputs & notices */
+.notice { color: var(--muted); font-size:12px; }
+input[type="text"], input[type="password"], select {
+  padding:8px; border:1px solid #e5e7eb; border-radius:8px;
+}
+
+/* Utility */
+.hidden { display:none; }
+.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
+
+/* Optional: color/preview box used on automation page */
+.color-box { width:36px; height:24px; border-radius:6px; border:1px solid #e5e7eb; }
+
+/* Segmented control (automation page) */
+.seg { display:inline-flex; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
+.seg button { background:#fff; color:#111; border:0; padding:6px 10px; }
+.seg button.active { background:#111827; color:#fff; }
+
+.top-menu {
+  background:#111827;
+  padding:10px 20px;
+}
+.top-menu ul {
+  list-style:none;
+  margin:0;
+  padding:0;
+  display:flex;
+  gap:20px;
+}
+.top-menu a {
+  color:white;
+  text-decoration:none;
+  font-weight:600;
+  font-size:14px;
+}
+.top-menu a:hover {
+  text-decoration:underline;
+}
+
+/* Top menu wrapper */
+.top-menu { padding: 8px 0; }
+
+/* Center the buttons and add even spacing */
+.top-menu__row { justify-content: center; gap: 8px; }
+
+/* Active page: make the ghost button look “primary” */
+.btn.ghost.is-active {
+  background: #111827;
+  color: #fff;
+  outline: 2px solid #111827; /* subtle emphasis */
+}
+
+/* Keyboard focus ring (accessible) */
+.top-menu a.btn:focus-visible {
+  outline: 2px solid #111827;
+  outline-offset: 2px;
+}
+
+

app/Http/Controllers/Home Server/shared-assets/page-elements/nav.html

@@ -0,0 +1,9 @@
+<nav class="top-menu" aria-label="Site">
+  <div class="container">
+    <div class="row top-menu__row">
+      <a class="btn ghost small" href="http://control.richardjolley.co.uk/">Control</a>
+      <a class="btn ghost small" href="http://automation.richardjolley.co.uk/">Automation</a>
+      <a class="btn ghost small" href="http://services.richardjolley.co.uk/">Services</a>
+    </div>
+  </div>
+</nav>