Spaces:

Moealsarraj
/

devkit

Sleeping

App Files Files Community

Mohammed AL Sarraj commited on Apr 11

Commit

ab72b56

1 Parent(s): e990054

dark theme + back button + mobile responsive

Browse files

Files changed (1) hide show

app/templates/base.html +189 -84

app/templates/base.html CHANGED Viewed

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html class="light" lang="en">
 <head>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<title>{% block title %}Competitive Intel{% endblock %}</title>
 <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
 <script id="tailwind-config">
 tailwind.config = {
@@ -13,109 +13,214 @@ tailwind.config = {
   theme: {
     extend: {
       colors: {
-        "error-container":            "#fe8983",
-        "on-primary-fixed-variant":   "#005bb0",
-        "on-secondary-fixed-variant": "#505d68",
-        "surface-bright":             "#f8f9fa",
-        "surface":                    "#f8f9fa",
-        "surface-tint":               "#005db5",
-        "primary":                    "#005db5",
-        "on-surface-variant":         "#586064",
-        "primary-fixed-dim":          "#bfd5ff",
-        "inverse-surface":            "#0c0f10",
-        "on-tertiary":                "#fbf7ff",
-        "background":                 "#f8f9fa",
-        "secondary":                  "#54616b",
-        "on-secondary-fixed":         "#34414b",
-        "on-background":              "#2b3437",
-        "surface-container":          "#eaeff1",
-        "tertiary-dim":               "#51516c",
-        "on-primary":                 "#f6f7ff",
-        "secondary-container":        "#d7e4f1",
-        "tertiary":                   "#5d5c78",
-        "primary-dim":                "#0052a0",
-        "on-error":                   "#fff7f6",
-        "surface-container-lowest":   "#ffffff",
-        "outline-variant":            "#abb3b7",
-        "on-secondary":               "#f5f9ff",
-        "inverse-primary":            "#5f9efb",
-        "tertiary-fixed-dim":         "#cbc9e9",
-        "outline":                    "#737c7f",
-        "on-secondary-container":     "#46535e",
-        "primary-container":          "#d6e3ff",
-        "error-dim":                  "#4e0309",
-        "error":                      "#9f403d",
-        "secondary-fixed":            "#d7e4f1",
-        "primary-fixed":              "#d6e3ff",
-        "inverse-on-surface":         "#9b9d9e",
-        "on-tertiary-container":      "#4a4a65",
-        "tertiary-fixed":             "#d9d7f8",
-        "on-tertiary-fixed-variant":  "#54546f",
-        "on-surface":                 "#2b3437",
-        "on-primary-fixed":           "#003f7d",
-        "on-primary-container":       "#00519e",
-        "on-tertiary-fixed":          "#383751",
-        "surface-container-low":      "#f1f4f6",
-        "surface-dim":                "#d1dce0",
-        "secondary-fixed-dim":        "#c9d6e3",
-        "on-error-container":         "#752121",
-        "surface-container-high":     "#e3e9ec",
-        "surface-variant":            "#dbe4e7",
-        "tertiary-container":         "#d9d7f8",
-        "surface-container-highest":  "#dbe4e7",
-        "secondary-dim":              "#48555f"
-      },
-      borderRadius: {
-        "DEFAULT": "0.25rem",
-        "lg":      "0.5rem",
-        "xl":      "0.75rem",
-        "full":    "9999px"
       },
       fontFamily: {
-        "headline": ["Inter", "sans-serif"],
-        "body":     ["Inter", "sans-serif"],
-        "label":    ["Inter", "sans-serif"]
       }
     }
   }
 }
 </script>
 <style>
-  body { font-family: 'Inter', sans-serif; }
   .material-symbols-outlined {
     font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
     vertical-align: middle;
   }
-  .glass-effect { background: rgba(248,249,250,0.8); backdrop-filter: blur(12px); }
-  .ghost-border { outline: 1px solid rgba(171,179,183,0.15); }
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
-  ::-webkit-scrollbar-thumb { background: #abb3b7; border-radius: 10px; }
-  /* Code editor (test-forge, schema-detective) */
-  .code-editor { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; }
-  .editor-bg   { background: #1e1e2e; color: #cdd6f4; }
-  /* Arabic text (arabic-bench) */
-  .arabic-text { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }
-  /* Scrollbar utilities */
   .no-scrollbar::-webkit-scrollbar { display: none; }
   .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
   .custom-scrollbar::-webkit-scrollbar { width: 6px; }
-  .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
-  .custom-scrollbar::-webkit-scrollbar-thumb { background: #abb3b7; border-radius: 10px; }
-  /* Prompt-bench iOS overrides — scoped so they only affect prompt-bench internals */
-  .toolbar-blur { background: rgba(242,242,247,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
-  .btn-primary  { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#007AFF;color:#fff;border-radius:8px;font-size:13px;font-weight:600;border:none;cursor:pointer; }
-  .btn-secondary{ display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:rgba(0,0,0,0.06);color:#3C3C43;border-radius:7px;font-size:12px;font-weight:500;border:none;cursor:pointer; }
-  .section-label{ font-size:11px;font-weight:600;color:#636366;text-transform:uppercase;letter-spacing:.06em; }
-  .sys-label    { color: #1C1C1E; }
-  .text-sys-label { color: #1C1C1E; }
 </style>
 {% block extra_head %}{% endblock %}
 <meta name="csrf-token" content="{{ csrf_token() }}"/>
 </head>
-<body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container">
 {% block content %}{% endblock %}
 {% block extra_scripts %}{% endblock %}
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>{% block title %}DevKit{% endblock %}</title>
 <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet"/>
 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
 <script id="tailwind-config">
 tailwind.config = {
   theme: {
     extend: {
       colors: {
+        "surface": "#0e0e10",
+        "background": "#0e0e10",
+        "surface-container-lowest": "#131315",
+        "surface-container-low": "#18181a",
+        "surface-container": "#1e1e20",
+        "surface-container-high": "#252527",
+        "surface-container-highest": "#2c2c2e",
+        "surface-bright": "#222224",
+        "surface-dim": "#0a0a0c",
+        "on-surface": "#e8e8ea",
+        "on-surface-variant": "#8b9198",
+        "on-background": "#e8e8ea",
+        "primary": "#00d97e",
+        "on-primary": "#001a0d",
+        "primary-container": "#003d1c",
+        "on-primary-container": "#67ffb4",
+        "secondary": "#8b9198",
+        "on-secondary": "#e8e8ea",
+        "secondary-container": "#252527",
+        "on-secondary-container": "#c8cdd0",
+        "outline": "#4b5563",
+        "outline-variant": "#2a2e30",
+        "surface-variant": "#252527",
+        "inverse-surface": "#e8e8ea",
+        "inverse-on-surface": "#18181a",
+        "inverse-primary": "#005c33",
+        "error-container":"#7f1d1d","on-error-container":"#fca5a5","error":"#f87171","on-error":"#fff",
+        "tertiary":"#00d97e","on-tertiary":"#001a0d",
+        "tertiary-container":"#1e1e20","on-tertiary-container":"#67ffb4",
+        "tertiary-dim":"#00d97e","tertiary-fixed":"#1e1e20","tertiary-fixed-dim":"#00d97e",
+        "on-tertiary-fixed":"#001a0d","on-tertiary-fixed-variant":"#001a0d",
+        "primary-fixed":"#003d1c","primary-fixed-dim":"#00d97e",
+        "on-primary-fixed":"#67ffb4","on-primary-fixed-variant":"#00d97e",
+        "secondary-fixed":"#252527","secondary-fixed-dim":"#252527",
+        "on-secondary-fixed":"#c8cdd0","on-secondary-fixed-variant":"#c8cdd0",
+        "surface-tint":"#00d97e","primary-dim":"#00d97e","secondary-dim":"#8b9198",
+        "error-dim":"#450a0a","on-primary-fixed":"#67ffb4",
+        "on-primary-container":"#67ffb4","on-secondary-container":"#c8cdd0",
+        "on-tertiary-container":"#67ffb4",
       },
+      borderRadius: {"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},
       fontFamily: {
+        "headline": ["DM Sans", "sans-serif"],
+        "body":     ["DM Sans", "sans-serif"],
+        "label":    ["DM Sans", "sans-serif"]
       }
     }
   }
 }
 </script>
 <style>
+  :root {
+    --accent: #00d97e;
+    --accent-rgb: 0,217,126;
+    --on-primary: #001a0d;
+    --surface: #0e0e10;
+    --text: #e8e8ea;
+    --text-dim: #8b9198;
+    --border: #2a2e30;
+  }
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body {
+    background: #0e0e10 !important;
+    color: #e8e8ea;
+    font-family: DM Sans, sans-serif;
+  }
   .material-symbols-outlined {
     font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
     vertical-align: middle;
   }
+  /* Remap hardcoded light-theme classes */
+  .bg-white                    { background: #131315 !important; }
+  .bg-slate-50                 { background: #18181a !important; }
+  .bg-slate-100                { background: #1e1e20 !important; }
+  .bg-slate-200                { background: #252527 !important; }
+  .border-slate-200,
+  .border-slate-300            { border-color: #2a2e30 !important; }
+  .divide-slate-200 > * + *    { border-color: #2a2e30 !important; }
+  .text-slate-400, .text-slate-500 { color: #8b9198 !important; }
+  .text-slate-600, .text-slate-700,
+  .text-slate-800, .text-slate-900 { color: #e8e8ea !important; }
+  .text-gray-400, .text-gray-500   { color: #8b9198 !important; }
+  .text-gray-600, .text-gray-700   { color: #e8e8ea !important; }
+  .hover\:bg-slate-200\/60:hover  { background: rgba(255,255,255,.06) !important; }
+  .shadow-sm  { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }
+  .shadow-md  { box-shadow: 0 4px 12px rgba(0,0,0,.6) !important; }
+  .glass-effect { background: rgba(0,0,0,.5) !important; backdrop-filter: blur(12px); }
+  /* Forms dark */
+  input:not([type=checkbox]):not([type=radio]):not([type=range]),
+  textarea, select {
+    background: #18181a !important;
+    color: #e8e8ea !important;
+    border-color: #2a2e30 !important;
+  }
+  input::placeholder, textarea::placeholder { color: #8b9198 !important; opacity: 1; }
+  input:focus, textarea:focus, select:focus {
+    border-color: #00d97e !important;
+    box-shadow: 0 0 0 2px rgba(0,217,126,.2) !important;
+  }
+  label { color: #8b9198; }
+  /* Scrollbar */
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 10px; }
   .no-scrollbar::-webkit-scrollbar { display: none; }
   .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
   .custom-scrollbar::-webkit-scrollbar { width: 6px; }
+  .custom-scrollbar::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 10px; }
+  /* Code editor */
+  .code-editor { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; }
+  .editor-bg   { background: #0d0d14 !important; color: #cdd6f4; }
+  .arabic-text { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }
+  /* Prompt-bench scoped overrides */
+  .toolbar-blur  { background: rgba(20,20,28,.88); backdrop-filter: blur(20px); }
+  .btn-primary   { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#00d97e;color:#001a0d;border-radius:8px;font-size:13px;font-weight:600;border:none;cursor:pointer; }
+  .btn-secondary { display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:rgba(255,255,255,.08);color:#e8e8ea;border-radius:7px;font-size:12px;font-weight:500;border:none;cursor:pointer; }
+  .section-label { font-size:11px;font-weight:600;color:#8b9198;text-transform:uppercase;letter-spacing:.06em; }
+  .sys-label, .text-sys-label { color: #e8e8ea; }
+  /* Mobile: collapse fixed sidebars on small screens */
+  @media (max-width: 768px) {
+    .shrink-0.w-64, aside.w-64 {
+      display: none !important;
+    }
+    .flex-1.overflow-hidden {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+  }
+  /* Back-to-hub button */
+  .hub-back-btn {
+    position: fixed;
+    bottom: 1.25rem;
+    left: 1.25rem;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 14px 6px 9px;
+    border-radius: 100px;
+    background: rgba(0,217,126, .12);
+    border: 1px solid rgba(0,217,126, .28);
+    color: #00d97e;
+    font-size: 12px;
+    font-weight: 500;
+    text-decoration: none;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    transition: background .15s, transform .12s;
+    font-family: DM Sans, sans-serif;
+    white-space: nowrap;
+  }
+  .hub-back-btn:hover {
+    background: rgba(0,217,126, .22);
+    transform: translateY(-1px);
+  }
+  .hub-back-btn-icon {
+    font-size: 15px !important;
+    color: #00d97e;
+    line-height: 1;
+    vertical-align: middle;
+  }
 </style>
 {% block extra_head %}{% endblock %}
 <meta name="csrf-token" content="{{ csrf_token() }}"/>
 </head>
+<body class="bg-surface text-on-surface">
 {% block content %}{% endblock %}
 {% block extra_scripts %}{% endblock %}
+<script>
+(function() {
+  var toolAlphas = {"schema-detective": "0.10", "test-forge": "0.13", "sql-whisperer": "0.08", "doc-forge": "0.11", "changelog-ai": "0.09", "git-narrator": "0.12"};
+  var path = window.location.pathname.replace(/\/+$/, '').split('/').filter(Boolean)[0] || '';
+  // Per-tool micro-variation: slightly shift border opacity for each tool
+  var alpha = toolAlphas[path];
+  if (alpha) {
+    var s = document.createElement('style');
+    s.textContent =
+      '.border-outline-variant\/10 { border-color: rgba(0,217,126,' + alpha + ') !important; }' +
+      '.border-slate-200 { border-color: rgba(0,217,126,' + (parseFloat(alpha) * 0.6).toFixed(2) + ') !important; }';
+    document.head.appendChild(s);
+  }
+  // Back-to-hub button on all tool pages (not home)
+  if (path !== '') {
+    var btn = document.createElement('a');
+    btn.href = '/';
+    btn.className = 'hub-back-btn';
+    var icon = document.createElement('span');
+    icon.className = 'material-symbols-outlined hub-back-btn-icon';
+    icon.textContent = 'arrow_back_ios_new';
+    var label = document.createElement('span');
+    label.textContent = 'DevKit';
+    btn.appendChild(icon);
+    btn.appendChild(label);
+    document.body.appendChild(btn);
+  }
+})();
+</script>
 </body>
 </html>