From f56b63cff6d65b01b327dc5212559be1808cf37c Mon Sep 17 00:00:00 2001 From: Lars Gebhardt-Kusche Date: Mon, 2 Mar 2026 21:44:39 +0100 Subject: [PATCH] layout --- config/staging/settings.php | 2 +- partials/landing/main/home.php | 5 +- partials/structure/layout_end.php | 8 +- partials/structure/layout_start.php | 29 +++- public/assets/css/app.css | 242 +++++++++++++++++++++++++++- 5 files changed, 271 insertions(+), 15 deletions(-) mode change 100755 => 100644 public/assets/css/app.css diff --git a/config/staging/settings.php b/config/staging/settings.php index 2902945..5664d52 100755 --- a/config/staging/settings.php +++ b/config/staging/settings.php @@ -4,5 +4,5 @@ define('APP_DOMAIN_PRIMARY', APP_DOMAIN_NAME); define('APP_URL_PRIMARY', 'https://' . APP_DOMAIN_PRIMARY); define('APP_API_BASE', 'https://api.' . APP_DOMAIN_PRIMARY); - define('APP_DB_ENABLED', false); // set true to enable DB connection + define('APP_DB_ENABLED', true); // set true to enable DB connection diff --git a/partials/landing/main/home.php b/partials/landing/main/home.php index 323eb6d..e50d05d 100755 --- a/partials/landing/main/home.php +++ b/partials/landing/main/home.php @@ -9,10 +9,7 @@ $flash = $app->flash()->get(); ?>
env:
-
- Nexus -

-
+

diff --git a/partials/structure/layout_end.php b/partials/structure/layout_end.php index 1871bd7..3f9df47 100755 --- a/partials/structure/layout_end.php +++ b/partials/structure/layout_end.php @@ -1,3 +1,9 @@ - + +
+
© Nexus
+
Security first · Internal only
+
+
+ diff --git a/partials/structure/layout_start.php b/partials/structure/layout_start.php index 7d419fc..6954181 100755 --- a/partials/structure/layout_start.php +++ b/partials/structure/layout_start.php @@ -10,13 +10,26 @@ $app = app(); <?= htmlspecialchars(t('common.title'), ENT_QUOTES) ?> - +
+
+
+
+
+ Nexus Logo +
+
+
Nexus Control Panel
+
+
+ +
+ +
+
+
diff --git a/public/assets/css/app.css b/public/assets/css/app.css old mode 100755 new mode 100644 index 1867f66..71bcc6c --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -1 +1,241 @@ -/* minimal css placeholder */ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap'); + +:root { + --bg: #0b0d12; + --panel: #121622; + --panel-2: #171c2b; + --text: #f4f6ff; + --muted: #b6bdd6; + --accent: #ff5e5b; + --accent-2: #20e3b2; + --line: #2a3147; + --shadow: 0 30px 80px rgba(8, 10, 18, 0.45); +} + +* { box-sizing: border-box; } +html, body { height: 100%; } +body { + margin: 0; + font-family: "Space Grotesk", "Segoe UI", sans-serif; + background: radial-gradient(1200px 500px at 10% -10%, rgba(255, 94, 91, 0.2), transparent 60%), + radial-gradient(900px 500px at 90% 10%, rgba(32, 227, 178, 0.18), transparent 55%), + var(--bg); + color: var(--text); +} + +.bg-orb { + position: fixed; + width: 420px; + height: 420px; + border-radius: 50%; + filter: blur(80px); + opacity: 0.4; + z-index: 0; + pointer-events: none; +} +.orb-a { top: -120px; left: -80px; background: #ff5e5b; } +.orb-b { bottom: -160px; right: -120px; background: #20e3b2; } + +.site-shell { + position: relative; + z-index: 1; + min-height: 100vh; + display: flex; + flex-direction: column; + padding: 32px 28px 24px; +} + +.site-header { + display: grid; + grid-template-columns: 1fr auto auto; + gap: 24px; + align-items: center; + background: linear-gradient(140deg, rgba(18, 22, 34, 0.9), rgba(23, 28, 43, 0.9)); + border: 1px solid var(--line); + border-radius: 18px; + padding: 20px 24px; + box-shadow: var(--shadow); + backdrop-filter: blur(6px); +} + +.brand { + display: flex; + align-items: center; + gap: 14px; +} +.brand img { + height: 46px; + width: auto; + filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)); +} +.brand-title { + font-weight: 700; + letter-spacing: 0.4px; + font-size: 1.2rem; +} +.brand-sub { + color: var(--muted); + font-size: 0.9rem; +} + +.site-nav { + display: flex; + gap: 12px; + flex-wrap: wrap; +} +.nav-link { + color: var(--muted); + text-decoration: none; + padding: 8px 14px; + border-radius: 999px; + border: 1px solid transparent; + transition: all 180ms ease; + font-weight: 600; +} +.nav-link:hover { + color: var(--text); + border-color: var(--line); + background: rgba(255, 255, 255, 0.04); +} +.nav-link.is-active { + color: var(--bg); + background: var(--accent); + border-color: var(--accent); +} + +.header-cta .cta-button { + background: linear-gradient(120deg, var(--accent), #ff9f45); + border: none; + color: #0b0d12; + font-weight: 700; + padding: 10px 18px; + border-radius: 12px; + cursor: pointer; + box-shadow: 0 14px 30px rgba(255, 94, 91, 0.35); +} + +.site-main { + flex: 1; + margin-top: 28px; +} + +.site-footer { + display: flex; + justify-content: space-between; + color: var(--muted); + font-size: 0.85rem; + padding: 20px 4px 0; +} + +.card { + background: var(--panel); + border: 1px solid var(--line); + border-radius: 18px; + padding: 24px; + box-shadow: var(--shadow); +} +.muted { color: var(--muted); } +.pill { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + border-radius: 999px; + border: 1px solid var(--line); + color: var(--muted); + background: rgba(255,255,255,0.03); + font-size: 0.85rem; +} +.grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; +} + +@media (max-width: 900px) { + .site-header { + grid-template-columns: 1fr; + } + .header-cta { + justify-self: start; + } +} +@media (max-width: 720px) { + .grid { grid-template-columns: 1fr; } + .site-shell { padding: 24px 18px 20px; } +} + +/* Minimal Tailwind-like utility support for existing templates */ +.px-4 { padding-left: 1rem; padding-right: 1rem; } +.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } +.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } +.py-4 { padding-top: 1rem; padding-bottom: 1rem; } +.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } +.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } +.sm\\:px-0 {} +.sm\\:px-6 {} +.sm\\:rounded-lg {} +@media (min-width: 640px) { + .sm\\:px-0 { padding-left: 0; padding-right: 0; } + .sm\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } + .sm\\:rounded-lg { border-radius: 0.75rem; } +} + +.text-white { color: #ffffff; } +.text-gray-200 { color: #d9deee; } +.text-gray-300 { color: #c2c9de; } +.text-gray-400 { color: #a9b1c9; } +.text-gray-500 { color: #8b94ad; } +.text-red-100 { color: #ffe2e2; } +.text-indigo-400 { color: #9aa5ff; } +.hover\\:text-indigo-300:hover { color: #b7c0ff; } +.font-medium { font-weight: 600; } +.font-semibold { font-weight: 700; } +.font-bold { font-weight: 700; } +.text-sm { font-size: 0.9rem; } +.text-lg { font-size: 1.1rem; } +.text-2xl { font-size: 1.6rem; } +.uppercase { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; } +.tracking-wider { letter-spacing: 0.06em; } +.leading-6 { line-height: 1.5; } +.whitespace-nowrap { white-space: nowrap; } +.text-left { text-align: left; } +.text-right { text-align: right; } +.divide-y > * + * { border-top: 1px solid var(--line); } +.border { border: 1px solid var(--line); } +.border-l-4 { border-left: 4px solid; } +.border-red-500 { border-color: #ff5e5b; } +.border-gray-700 { border-color: var(--line); } +.bg-gray-800 { background: var(--panel); } +.bg-gray-900 { background: #0f121b; } +.bg-red-900 { background: #2c1214; } +.shadow { box-shadow: var(--shadow); } +.overflow-hidden { overflow: hidden; } +.overflow-x-auto { overflow-x: auto; } +.min-w-full { min-width: 100%; } +.divide-gray-700 > * + * { border-top: 1px solid var(--line); } +.bg-indigo-600 { background: #4f46e5; } +.hover\\:bg-indigo-700:hover { background: #4338ca; } +.rounded { border-radius: 12px; } +.rounded-lg { border-radius: 14px; } +.transition-colors { transition: color 180ms ease, background 180ms ease; } +.flex { display: flex; } +.items-center { align-items: center; } +.justify-between { justify-content: space-between; } +.mb-6 { margin-bottom: 1.5rem; } +.mt-1 { margin-top: 0.25rem; } +.max-w-2xl { max-width: 42rem; } +.relative { position: relative; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} +.font-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } +.hover\\:bg-gray-750:hover { background: #151a28; }