feat(workflow): Enhance workflow UI with new empty state component and improved styling

chore: Bump version to 9.2.27

.github/workflows/build.yml

@@ -220,29 +220,6 @@ jobs:
           command: sudo docker build --no-cache -f ./App/Dockerfile .
 
 
-  docker-build-copilot:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - name: Checkout 
-        uses: actions/checkout@v4
-
-      - name: Preinstall 
-        uses: nick-fields/retry@v3
-        with:
-          timeout_minutes: 10
-          max_attempts: 3
-          command: npm run prerun
-
-      # build image for accounts service
-      - name: build docker image
-        uses: nick-fields/retry@v3
-        with:
-          timeout_minutes: 45
-          max_attempts: 3
-          command: sudo docker build --no-cache -f ./Copilot/Dockerfile .
-
   docker-build-e2e:
     runs-on: ubuntu-latest
     env:

.github/workflows/compile.yml

@@ -162,23 +162,6 @@ jobs:
           max_attempts: 3
           command: cd Docs && npm install && npm run compile && npm run dep-check
 
-  compile-copilot:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: latest
-      - run: cd Common && npm install
-      - name: Compile Copilot
-        uses: nick-fields/retry@v3
-        with:
-          timeout_minutes: 30
-          max_attempts: 3
-          command: cd Copilot && npm install && npm run compile && npm run dep-check
-
   compile-nginx:
     runs-on: ubuntu-latest
     env:

.github/workflows/reliability-copilot.yml

@@ -1,32 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-name: "OneUptime Reliability Copilot"
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ master ]
-  schedule:
-    # Run every day at midnight UTC
-    - cron: '0 0 * * *'
-
-jobs:
-  analyze:
-    name: Analyze Code
-    runs-on: ubuntu-latest
-
-    steps:
-      
-    # Run Reliability Copilot in Docker Container
-    - name: Run Copilot
-      run: |
-        docker run --rm \
-          -e ONEUPTIME_URL="https://test.oneuptime.com" \
-          -e ONEUPTIME_REPOSITORY_SECRET_KEY="${{ secrets.COPILOT_ONEUPTIME_REPOSITORY_SECRET_KEY }}" \
-          -e CODE_REPOSITORY_PASSWORD="${{ github.token }}" \
-          -e CODE_REPOSITORY_USERNAME="simlarsen" \
-          -e OPENAI_API_KEY="${{ secrets.OPENAI_API_KEY }}" \
-          --net=host oneuptime/copilot:test

.gitignore

@@ -128,3 +128,4 @@ MCP/.env
 MCP/node_modules 
 Dashboard/public/sw.js
 .claude/settings.local.json
+Common/.claude/settings.local.json

.oneuptime/README.md

@@ -1,15 +0,0 @@
-## OneUptime Copilot
-
-This folder contains the configuration files for the OneUptime Copilot. The Copilot is a tool that automatically improves your code. It can fix issues, improve code quality, and help you ship faster.
-
-This folder has the following structure:
-
-- `config.js`: The configuration file for the Copilot. You can customize the Copilot's behavior by changing this file.
-- `scripts`: A folder containing scripts that the Copilot runs. These are hooks that run at different stages of the Copilot's process.
-    - `on-after-clone.sh`: A script that runs after the Copilot clones your repository.
-    - `on-before-code-change.sh`: A script that runs before the Copilot makes changes to your code.
-    - `on-after-code-change.sh`: A script that runs after the Copilot makes changes to your code.
-    - `on-before-commit.sh`: A script that runs before the Copilot commits changes to your repository.
-    - `on-after-commit.sh`: A script that runs after the Copilot commits changes to your repository.
-
-    

.oneuptime/config.js

@@ -1,10 +0,0 @@
-// This is the configuration file for the oneuptime copilot. 
-
-const getCopilotConfig = () => {
-    return {
-        // The version of the schema for this configuration file.
-        schemaVersion: '1.0',
-    }
-}
-
-export default getCopilotConfig;

.oneuptime/scripts/on-after-clone.sh

@@ -1,16 +0,0 @@
-# Description: Copilot clones your repository and to improve your code. 
-# This scirpt runs after the clone process is completed.
-# Some of the common tasks you can do here are:
-# 1. Install dependencies
-# 2. Run linting
-# 3. Run tests
-# 4. Run build
-# 5. Run any other command that you want to run after the clone process is completed.
-# If this script fails, copilot will not proceed with the next steps to improve your code.
-# This step is to ensure that the code is in a good state before we start improving it.
-# If you want to skip this script, you can keep this file empty.
-# It's highly recommended to run linting and tests in this script to ensure the code is in a good state.
-# This scirpt will run on ubuntu machine. So, make sure the commands you run are compatible with ubuntu.
-
-npm install
-npm run lint

.oneuptime/scripts/on-after-code-change.sh

@@ -1,13 +0,0 @@
-# Description: Copilot will run this script after we make improvements to your code and write it to disk.
-# Some of the common tasks you can do here are:
-# 1. Run linting
-# 2. Run tests
-# 3. Run build
-# 4. Run any other command that you want to run after the code is changed.
-# If this script fails, copilot will not commit the changes to your repository.
-# This step is to ensure that the code is in a good state before we commit the changes.
-# If you want to skip this script, you can keep this file empty.
-# It's highly recommended to run linting and tests in this script to ensure the code is in a good state.
-# This scirpt will run on ubuntu machine. So, make sure the commands you run are compatible with ubuntu.
-
-npm run fix

.oneuptime/scripts/on-after-commit.sh

@@ -1 +0,0 @@
-# Description: Copilot will run this script after the commit process is completed.

.oneuptime/scripts/on-before-code-change.sh

@@ -1,9 +0,0 @@
-# Description: Copilot will run this script before we make changes to your code.
-# Some of the common tasks you can do here are:
-# 1. Install dependencies
-# 2. Run any other command that you want to run before the code is changed.
-# If this script fails, copilot will not make any changes to the code.
-# This step is to ensure that the code is in a good state before we start making changes.
-# If you want to skip this script, you can keep this file empty.
-# It's highly recommended to run things like installing dependencies in this script.
-# This scirpt will run on ubuntu machine. So, make sure the commands you run are compatible with ubuntu.

.oneuptime/scripts/on-before-commit.sh

@@ -1 +0,0 @@
-# Description: Copilot will run this script before we commit the changes to your repository.

.vscode/launch.json

@@ -19,20 +19,6 @@
         }
     ],
     "configurations": [
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/TestServer",
-            "name": "Copilot: Debug with Docker",
-            "port": 9985,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
         {
             "name": "Debug Infrastructure Agent",
             "type": "go",

APIReference/Dockerfile.tpl

@@ -7,8 +7,8 @@ FROM public.ecr.aws/docker/library/node:24.9-alpine3.21
 RUN mkdir /tmp/npm &&  chmod 2777 /tmp/npm && chown 1000:1000 /tmp/npm && npm config set cache /tmp/npm --global
 
 RUN npm config set fetch-retries 5
-RUN npm config set fetch-retry-mintimeout 100000
-RUN npm config set fetch-retry-maxtimeout 600000
+RUN npm config set fetch-retry-mintimeout 20000
+RUN npm config set fetch-retry-maxtimeout 60000
 
 
 

APIReference/Service/Model.ts

@@ -1,4 +1,7 @@
 import { CodeExamplesPath, ViewsPath } from "../Utils/Config";
+import CodeExampleGenerator, {
+  CodeExamples,
+} from "../Utils/CodeExampleGenerator";
 import ResourceUtil, { ModelDocumentation } from "../Utils/Resources";
 import PageNotFoundServiceHandler from "./PageNotFound";
 import { AppApiRoute } from "Common/ServiceRoute";
@@ -8,6 +11,7 @@ import {
   TableColumnMetadata,
 } from "Common/Types/Database/TableColumn";
 import Dictionary from "Common/Types/Dictionary";
+import { JSONObject, JSONValue } from "Common/Types/JSON";
 import ObjectID from "Common/Types/ObjectID";
 import Permission, {
   PermissionHelper,
@@ -18,6 +22,296 @@ import { ExpressRequest, ExpressResponse } from "Common/Server/Utils/Express";
 import LocalFile from "Common/Server/Utils/LocalFile";
 import { IsBillingEnabled } from "Common/Server/EnvironmentConfig";
 
+interface ExampleObjects {
+  simpleSelectExample: JSONObject;
+  simpleQueryExample: JSONObject;
+  simpleSortExample: JSONObject;
+  simpleCreateExample: JSONObject;
+  simpleUpdateExample: JSONObject;
+  simpleResponseExample: JSONObject;
+  simpleListResponseExample: Array<JSONObject>;
+}
+
+interface ApiCodeExamples {
+  list: CodeExamples;
+  getItem: CodeExamples;
+  count: CodeExamples;
+  create: CodeExamples;
+  update: CodeExamples;
+  delete: CodeExamples;
+}
+
+// Helper function to get a default example value based on column type
+function getDefaultExampleForType(
+  columnType: string | undefined,
+  columnTitle: string | undefined,
+): JSONValue {
+  const typeStr: string = (columnType || "").toLowerCase();
+  const title: string = (columnTitle || "").toLowerCase();
+
+  if (typeStr.includes("objectid") || typeStr.includes("id")) {
+    return "550e8400-e29b-41d4-a716-446655440000";
+  }
+  if (typeStr.includes("boolean") || typeStr.includes("bool")) {
+    return true;
+  }
+  if (
+    typeStr.includes("number") ||
+    typeStr.includes("int") ||
+    typeStr.includes("decimal")
+  ) {
+    return 100;
+  }
+  if (typeStr.includes("date") || typeStr.includes("time")) {
+    return "2024-01-15T10:30:00.000Z";
+  }
+  if (typeStr.includes("email")) {
+    return "user@example.com";
+  }
+  if (typeStr.includes("phone")) {
+    return "+1-555-123-4567";
+  }
+  if (typeStr.includes("url") || typeStr.includes("link")) {
+    return "https://example.com";
+  }
+  if (typeStr.includes("color")) {
+    return "#3498db";
+  }
+  if (
+    typeStr.includes("markdown") ||
+    typeStr.includes("longtext") ||
+    typeStr.includes("description")
+  ) {
+    return `Example ${title || "text"} content`;
+  }
+  if (typeStr.includes("json") || typeStr.includes("object")) {
+    return { key: "value" };
+  }
+  if (typeStr.includes("array")) {
+    return [];
+  }
+  // Default for text fields
+  return `Example ${title || "value"}`;
+}
+
+// Helper function to generate example objects from column metadata
+function generateExampleObjects(
+  tableColumns: Dictionary<TableColumnMetadata>,
+  exampleObjectID: string,
+): ExampleObjects {
+  const simpleSelectExample: JSONObject = {};
+  const simpleQueryExample: JSONObject = {};
+  const simpleSortExample: JSONObject = {};
+  const simpleCreateExample: JSONObject = {};
+  const simpleUpdateExample: JSONObject = {};
+  const simpleResponseExample: JSONObject = {
+    _id: exampleObjectID,
+  };
+
+  // Sort columns: prioritize fields with examples, then required, then alphabetically
+  const sortedColumnKeys: Array<string> = Object.keys(tableColumns).sort(
+    (a: string, b: string) => {
+      const aHasExample: boolean = tableColumns[a]?.example !== undefined;
+      const bHasExample: boolean = tableColumns[b]?.example !== undefined;
+      const aRequired: boolean = tableColumns[a]?.required || false;
+      const bRequired: boolean = tableColumns[b]?.required || false;
+
+      // Prioritize fields with examples
+      if (aHasExample && !bHasExample) {
+        return -1;
+      }
+      if (!aHasExample && bHasExample) {
+        return 1;
+      }
+      // Then prioritize required fields
+      if (aRequired && !bRequired) {
+        return -1;
+      }
+      if (!aRequired && bRequired) {
+        return 1;
+      }
+      return a.localeCompare(b);
+    },
+  );
+
+  let selectCount: number = 0;
+  let createCount: number = 0;
+  let updateCount: number = 0;
+
+  for (const key of sortedColumnKeys) {
+    const column: TableColumnMetadata | undefined = tableColumns[key];
+    if (!column) {
+      continue;
+    }
+
+    const accessControl: ColumnAccessControl | undefined = (
+      column as unknown as JSONObject
+    )["permissions"] as ColumnAccessControl | undefined;
+
+    // Get the example value - use defined example or generate a default
+    const exampleValue: JSONValue =
+      column.example !== undefined
+        ? (column.example as JSONValue)
+        : getDefaultExampleForType(column.type?.toString(), column.title);
+
+    /*
+     * Add to select example (limit to 5 fields for readability)
+     * Also add the field to response example so response matches select
+     */
+    if (
+      selectCount < 5 &&
+      accessControl?.read &&
+      accessControl.read.length > 0
+    ) {
+      simpleSelectExample[key] = true;
+      simpleResponseExample[key] = exampleValue;
+      selectCount++;
+    }
+
+    // Add to create example (only fields with create permission)
+    if (
+      createCount < 5 &&
+      accessControl?.create &&
+      accessControl.create.length > 0 &&
+      !column.computed
+    ) {
+      simpleCreateExample[key] = exampleValue;
+      createCount++;
+    }
+
+    // Add to update example (only fields with update permission)
+    if (
+      updateCount < 3 &&
+      accessControl?.update &&
+      accessControl.update.length > 0 &&
+      !column.computed
+    ) {
+      simpleUpdateExample[key] = exampleValue;
+      updateCount++;
+    }
+  }
+
+  // Add a query example using the first string/text field with an example
+  for (const key of sortedColumnKeys) {
+    const column: TableColumnMetadata | undefined = tableColumns[key];
+    if (column) {
+      const exampleValue: JSONValue =
+        column.example !== undefined
+          ? (column.example as JSONValue)
+          : getDefaultExampleForType(column.type?.toString(), column.title);
+
+      if (
+        typeof exampleValue === "string" &&
+        column.type?.toString().toLowerCase().includes("text")
+      ) {
+        simpleQueryExample[key] = exampleValue;
+        break;
+      }
+    }
+  }
+
+  // Add sort example - sort by createdAt descending if available
+  simpleSortExample["createdAt"] = -1;
+
+  // Generate list response with 3 sample items
+  const simpleListResponseExample: Array<JSONObject> = [
+    { ...simpleResponseExample, _id: exampleObjectID },
+    {
+      ...simpleResponseExample,
+      _id: ObjectID.generate().toString(),
+    },
+    {
+      ...simpleResponseExample,
+      _id: ObjectID.generate().toString(),
+    },
+  ];
+
+  return {
+    simpleSelectExample,
+    simpleQueryExample,
+    simpleSortExample,
+    simpleCreateExample,
+    simpleUpdateExample,
+    simpleResponseExample,
+    simpleListResponseExample,
+  };
+}
+
+// Helper function to generate code examples for all API operations
+function generateApiCodeExamples(
+  apiPath: string,
+  exampleObjects: ExampleObjects,
+  exampleObjectID: string,
+): ApiCodeExamples {
+  // List endpoint
+  const listExamples: CodeExamples = CodeExampleGenerator.generate({
+    method: "POST",
+    endpoint: `${apiPath}/get-list?skip=0&limit=10`,
+    body: {
+      select: exampleObjects.simpleSelectExample,
+      query: exampleObjects.simpleQueryExample,
+      sort: exampleObjects.simpleSortExample,
+    },
+    description: "List items with pagination",
+  });
+
+  // Get item endpoint
+  const getItemExamples: CodeExamples = CodeExampleGenerator.generate({
+    method: "POST",
+    endpoint: `${apiPath}/${exampleObjectID}/get-item`,
+    body: {
+      select: exampleObjects.simpleSelectExample,
+    },
+    description: "Get a single item by ID",
+  });
+
+  // Count endpoint
+  const countExamples: CodeExamples = CodeExampleGenerator.generate({
+    method: "POST",
+    endpoint: `${apiPath}/count`,
+    body: {
+      query: exampleObjects.simpleQueryExample,
+    },
+    description: "Count items matching a query",
+  });
+
+  // Create endpoint
+  const createExamples: CodeExamples = CodeExampleGenerator.generate({
+    method: "POST",
+    endpoint: apiPath,
+    body: {
+      data: exampleObjects.simpleCreateExample,
+    },
+    description: "Create a new item",
+  });
+
+  // Update endpoint
+  const updateExamples: CodeExamples = CodeExampleGenerator.generate({
+    method: "PUT",
+    endpoint: `${apiPath}/${exampleObjectID}`,
+    body: {
+      data: exampleObjects.simpleUpdateExample,
+    },
+    description: "Update an existing item",
+  });
+
+  // Delete endpoint
+  const deleteExamples: CodeExamples = CodeExampleGenerator.generate({
+    method: "DELETE",
+    endpoint: `${apiPath}/${exampleObjectID}`,
+    description: "Delete an item by ID",
+  });
+
+  return {
+    list: listExamples,
+    getItem: getItemExamples,
+    count: countExamples,
+    create: createExamples,
+    update: updateExamples,
+    delete: deleteExamples,
+  };
+}
+
 // Get all resources and resource dictionary
 const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
 const ResourceDictionary: Dictionary<ModelDocumentation> =
@@ -261,11 +555,28 @@ export default class ServiceHandler {
     );
 
     // Generate a unique ID for the example object
-    pageData["exampleObjectID"] = ObjectID.generate();
+    const exampleObjectID: string = ObjectID.generate().toString();
+    pageData["exampleObjectID"] = exampleObjectID;
+
+    // Generate dynamic example objects from column metadata
+    const exampleObjects: ExampleObjects = generateExampleObjects(
+      tableColumns,
+      exampleObjectID,
+    );
+    pageData["exampleObjects"] = exampleObjects;
 
     // Construct the API path for the current resource
-    pageData["apiPath"] =
+    const apiPath: string =
       AppApiRoute.toString() + currentResource.model.crudApiPath?.toString();
+    pageData["apiPath"] = apiPath;
+
+    // Generate code examples for all languages
+    const codeExamples: ApiCodeExamples = generateApiCodeExamples(
+      apiPath,
+      exampleObjects,
+      exampleObjectID,
+    );
+    pageData["codeExamples"] = codeExamples;
 
     // Check if the current resource is a master admin API
     pageData["isMasterAdminApiDocs"] =

APIReference/Utils/CodeExampleGenerator.ts

@@ -0,0 +1,771 @@
+import { JSONObject } from "Common/Types/JSON";
+
+export interface RequestPreview {
+  headers: string;
+  body: string;
+}
+
+export interface CodeExamples {
+  requestPreview: RequestPreview;
+  curl: string;
+  javascript: string;
+  typescript: string;
+  python: string;
+  go: string;
+  java: string;
+  csharp: string;
+  php: string;
+  ruby: string;
+  rust: string;
+  powershell: string;
+}
+
+export interface ApiRequestParams {
+  method: "GET" | "POST" | "PUT" | "DELETE";
+  endpoint: string;
+  body?: JSONObject;
+  description?: string;
+}
+
+export default class CodeExampleGenerator {
+  private static readonly API_KEY_PLACEHOLDER: string = "YOUR_API_KEY";
+  private static readonly BASE_URL: string = "https://oneuptime.com";
+
+  public static generate(params: ApiRequestParams): CodeExamples {
+    return {
+      requestPreview: this.generateRequestPreview(params),
+      curl: this.generateCurl(params),
+      javascript: this.generateJavaScript(params),
+      typescript: this.generateTypeScript(params),
+      python: this.generatePython(params),
+      go: this.generateGo(params),
+      java: this.generateJava(params),
+      csharp: this.generateCSharp(params),
+      php: this.generatePHP(params),
+      ruby: this.generateRuby(params),
+      rust: this.generateRust(params),
+      powershell: this.generatePowerShell(params),
+    };
+  }
+
+  private static generateRequestPreview(
+    params: ApiRequestParams,
+  ): RequestPreview {
+    const { body } = params;
+
+    const headers: string = `Content-Type: application/json
+ApiKey: ${this.API_KEY_PLACEHOLDER}`;
+
+    const bodyStr: string =
+      body && Object.keys(body).length > 0 ? JSON.stringify(body, null, 2) : "";
+
+    return {
+      headers,
+      body: bodyStr,
+    };
+  }
+
+  private static generateCurl(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let curlCmd: string = `curl -X ${method} "${url}"`;
+    curlCmd += ` \\\n  -H "Content-Type: application/json"`;
+    curlCmd += ` \\\n  -H "ApiKey: ${this.API_KEY_PLACEHOLDER}"`;
+
+    if (body && Object.keys(body).length > 0) {
+      const jsonBody: string = JSON.stringify(body, null, 2)
+        .split("\n")
+        .map((line: string, index: number) => {
+          return index === 0 ? line : `  ${line}`;
+        })
+        .join("\n");
+      curlCmd += ` \\\n  -d '${jsonBody}'`;
+    }
+
+    return curlCmd;
+  }
+
+  private static generateJavaScript(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `const axios = require('axios');
+
+const response = await axios({
+  method: '${method.toLowerCase()}',
+  url: '${url}',
+  headers: {
+    'Content-Type': 'application/json',
+    'ApiKey': '${this.API_KEY_PLACEHOLDER}'
+  }`;
+
+    if (body && Object.keys(body).length > 0) {
+      const jsonBody: string = JSON.stringify(body, null, 2)
+        .split("\n")
+        .map((line: string, index: number) => {
+          return index === 0 ? line : `  ${line}`;
+        })
+        .join("\n");
+      code += `,\n  data: ${jsonBody}`;
+    }
+
+    code += `
+});
+
+console.log(response.data);`;
+
+    return code;
+  }
+
+  private static generateTypeScript(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `import axios, { AxiosResponse } from 'axios';
+
+interface ApiResponse {
+  // Define your response type here
+  [key: string]: unknown;
+}
+
+const response: AxiosResponse<ApiResponse> = await axios({
+  method: '${method.toLowerCase()}',
+  url: '${url}',
+  headers: {
+    'Content-Type': 'application/json',
+    'ApiKey': '${this.API_KEY_PLACEHOLDER}'
+  }`;
+
+    if (body && Object.keys(body).length > 0) {
+      const jsonBody: string = JSON.stringify(body, null, 2)
+        .split("\n")
+        .map((line: string, index: number) => {
+          return index === 0 ? line : `  ${line}`;
+        })
+        .join("\n");
+      code += `,\n  data: ${jsonBody}`;
+    }
+
+    code += `
+});
+
+console.log(response.data);`;
+
+    return code;
+  }
+
+  private static generatePython(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `import requests
+
+url = "${url}"
+headers = {
+    "Content-Type": "application/json",
+    "ApiKey": "${this.API_KEY_PLACEHOLDER}"
+}`;
+
+    if (body && Object.keys(body).length > 0) {
+      const pythonBody: string = this.jsonToPython(body);
+      code += `
+
+payload = ${pythonBody}
+
+response = requests.${method.toLowerCase()}(url, json=payload, headers=headers)`;
+    } else {
+      code += `
+
+response = requests.${method.toLowerCase()}(url, headers=headers)`;
+    }
+
+    code += `
+print(response.json())`;
+
+    return code;
+  }
+
+  private static generateGo(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `package main
+
+import (
+    "bytes"
+    "encoding/json"
+    "fmt"
+    "io"
+    "net/http"
+)
+
+func main() {`;
+
+    if (body && Object.keys(body).length > 0) {
+      code += `
+    payload := map[string]interface{}{`;
+      const entries: Array<string> = Object.entries(body).map(
+        ([key, value]: [string, unknown]) => {
+          return `        "${key}": ${this.goValue(value)}`;
+        },
+      );
+      code += `\n${entries.join(",\n")},
+    }
+    jsonData, _ := json.Marshal(payload)
+
+    req, _ := http.NewRequest("${method}", "${url}", bytes.NewBuffer(jsonData))`;
+    } else {
+      code += `
+    req, _ := http.NewRequest("${method}", "${url}", nil)`;
+    }
+
+    code += `
+    req.Header.Set("Content-Type", "application/json")
+    req.Header.Set("ApiKey", "${this.API_KEY_PLACEHOLDER}")
+
+    client := &http.Client{}
+    resp, _ := client.Do(req)
+    defer resp.Body.Close()
+
+    body, _ := io.ReadAll(resp.Body)
+    fmt.Println(string(body))
+}`;
+
+    return code;
+  }
+
+  private static generateJava(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `import java.net.URI;
+import java.net.http.HttpClient;
+import java.net.http.HttpRequest;
+import java.net.http.HttpResponse;
+
+public class ApiRequest {
+    public static void main(String[] args) throws Exception {
+        HttpClient client = HttpClient.newHttpClient();
+`;
+
+    if (body && Object.keys(body).length > 0) {
+      const jsonBody: string = JSON.stringify(body, null, 12).replace(
+        /"/g,
+        '\\"',
+      );
+      code += `
+        String jsonBody = "${jsonBody.replace(/\n/g, "\\n")}";
+
+        HttpRequest request = HttpRequest.newBuilder()
+            .uri(URI.create("${url}"))
+            .header("Content-Type", "application/json")
+            .header("ApiKey", "${this.API_KEY_PLACEHOLDER}")
+            .method("${method}", HttpRequest.BodyPublishers.ofString(jsonBody))
+            .build();`;
+    } else {
+      code += `
+        HttpRequest request = HttpRequest.newBuilder()
+            .uri(URI.create("${url}"))
+            .header("Content-Type", "application/json")
+            .header("ApiKey", "${this.API_KEY_PLACEHOLDER}")
+            .method("${method}", HttpRequest.BodyPublishers.noBody())
+            .build();`;
+    }
+
+    code += `
+
+        HttpResponse<String> response = client.send(request,
+            HttpResponse.BodyHandlers.ofString());
+
+        System.out.println(response.body());
+    }
+}`;
+
+    return code;
+  }
+
+  private static generateCSharp(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `using System;
+using System.Net.Http;
+using System.Text;
+using System.Threading.Tasks;
+
+class Program
+{
+    static async Task Main()
+    {
+        using var client = new HttpClient();
+
+        client.DefaultRequestHeaders.Add("ApiKey", "${this.API_KEY_PLACEHOLDER}");
+`;
+
+    if (body && Object.keys(body).length > 0) {
+      const jsonBody: string = JSON.stringify(body, null, 8);
+      code += `
+        var json = @"${jsonBody.replace(/"/g, '""')}";
+        var content = new StringContent(json, Encoding.UTF8, "application/json");
+
+        var response = await client.${this.csharpMethod(method)}Async(
+            "${url}"${method !== "GET" && method !== "DELETE" ? ", content" : ""});`;
+    } else {
+      code += `
+        var response = await client.${this.csharpMethod(method)}Async("${url}");`;
+    }
+
+    code += `
+
+        var result = await response.Content.ReadAsStringAsync();
+        Console.WriteLine(result);
+    }
+}`;
+
+    return code;
+  }
+
+  private static generatePHP(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `<?php
+
+$url = "${url}";
+
+$headers = [
+    "Content-Type: application/json",
+    "ApiKey: ${this.API_KEY_PLACEHOLDER}"
+];
+`;
+
+    if (body && Object.keys(body).length > 0) {
+      code += `
+$data = ${this.jsonToPhp(body)};
+
+$ch = curl_init($url);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "${method}");
+curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));`;
+    } else {
+      code += `
+$ch = curl_init($url);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "${method}");`;
+    }
+
+    code += `
+
+$response = curl_exec($ch);
+curl_close($ch);
+
+$result = json_decode($response, true);
+print_r($result);
+?>`;
+
+    return code;
+  }
+
+  private static generateRuby(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `require 'net/http'
+require 'uri'
+require 'json'
+
+uri = URI.parse("${url}")
+http = Net::HTTP.new(uri.host, uri.port)
+http.use_ssl = true
+
+request = Net::HTTP::${this.rubyMethodClass(method)}.new(uri.request_uri)
+request["Content-Type"] = "application/json"
+request["ApiKey"] = "${this.API_KEY_PLACEHOLDER}"`;
+
+    if (body && Object.keys(body).length > 0) {
+      const rubyBody: string = this.jsonToRuby(body);
+      code += `
+
+request.body = ${rubyBody}.to_json`;
+    }
+
+    code += `
+
+response = http.request(request)
+puts JSON.parse(response.body)`;
+
+    return code;
+  }
+
+  private static generateRust(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `use reqwest::header::{HeaderMap, HeaderValue, CONTENT_TYPE};
+use serde_json::json;
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let client = reqwest::Client::new();
+
+    let mut headers = HeaderMap::new();
+    headers.insert(CONTENT_TYPE, HeaderValue::from_static("application/json"));
+    headers.insert("ApiKey", HeaderValue::from_static("${this.API_KEY_PLACEHOLDER}"));`;
+
+    if (body && Object.keys(body).length > 0) {
+      const rustBody: string = this.jsonToRust(body);
+      code += `
+
+    let body = ${rustBody};
+
+    let response = client
+        .${method.toLowerCase()}("${url}")
+        .headers(headers)
+        .json(&body)
+        .send()
+        .await?;`;
+    } else {
+      code += `
+
+    let response = client
+        .${method.toLowerCase()}("${url}")
+        .headers(headers)
+        .send()
+        .await?;`;
+    }
+
+    code += `
+
+    let result: serde_json::Value = response.json().await?;
+    println!("{:#?}", result);
+
+    Ok(())
+}`;
+
+    return code;
+  }
+
+  private static generatePowerShell(params: ApiRequestParams): string {
+    const { method, endpoint, body } = params;
+    const url: string = `${this.BASE_URL}${endpoint}`;
+
+    let code: string = `$headers = @{
+    "Content-Type" = "application/json"
+    "ApiKey" = "${this.API_KEY_PLACEHOLDER}"
+}`;
+
+    if (body && Object.keys(body).length > 0) {
+      const psBody: string = this.jsonToPowerShell(body);
+      code += `
+
+$body = ${psBody} | ConvertTo-Json -Depth 10
+
+$response = Invoke-RestMethod -Uri "${url}" -Method ${method} -Headers $headers -Body $body`;
+    } else {
+      code += `
+
+$response = Invoke-RestMethod -Uri "${url}" -Method ${method} -Headers $headers`;
+    }
+
+    code += `
+$response | ConvertTo-Json -Depth 10`;
+
+    return code;
+  }
+
+  // Helper methods for language-specific formatting
+
+  private static jsonToPython(obj: JSONObject, indent: number = 0): string {
+    const spaces: string = "    ".repeat(indent);
+    const innerSpaces: string = "    ".repeat(indent + 1);
+
+    if (Array.isArray(obj)) {
+      if (obj.length === 0) {
+        return "[]";
+      }
+      const items: Array<string> = obj.map((item: unknown) => {
+        return this.jsonToPython(item as JSONObject, indent + 1);
+      });
+      return `[\n${innerSpaces}${items.join(`,\n${innerSpaces}`)}\n${spaces}]`;
+    }
+
+    if (typeof obj === "object" && obj !== null) {
+      const entries: Array<string> = Object.entries(obj).map(
+        ([key, value]: [string, unknown]) => {
+          return `${innerSpaces}"${key}": ${this.pythonValue(value, indent + 1)}`;
+        },
+      );
+      return `{\n${entries.join(",\n")}\n${spaces}}`;
+    }
+
+    return this.pythonValue(obj, indent);
+  }
+
+  private static pythonValue(value: unknown, indent: number = 0): string {
+    if (value === null) {
+      return "None";
+    }
+    if (typeof value === "boolean") {
+      return value ? "True" : "False";
+    }
+    if (typeof value === "string") {
+      return `"${value}"`;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+    if (typeof value === "object") {
+      return this.jsonToPython(value as JSONObject, indent);
+    }
+    return String(value);
+  }
+
+  private static goValue(value: unknown): string {
+    if (value === null) {
+      return "nil";
+    }
+    if (typeof value === "boolean") {
+      return value ? "true" : "false";
+    }
+    if (typeof value === "string") {
+      return `"${value}"`;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+    if (Array.isArray(value)) {
+      return `[]interface{}{${value
+        .map((v: unknown) => {
+          return this.goValue(v);
+        })
+        .join(", ")}}`;
+    }
+    if (typeof value === "object") {
+      const entries: Array<string> = Object.entries(
+        value as Record<string, unknown>,
+      ).map(([k, v]: [string, unknown]) => {
+        return `"${k}": ${this.goValue(v)}`;
+      });
+      return `map[string]interface{}{${entries.join(", ")}}`;
+    }
+    return String(value);
+  }
+
+  private static jsonToRuby(obj: JSONObject, indent: number = 0): string {
+    const spaces: string = "  ".repeat(indent);
+    const innerSpaces: string = "  ".repeat(indent + 1);
+
+    if (Array.isArray(obj)) {
+      if (obj.length === 0) {
+        return "[]";
+      }
+      const items: Array<string> = obj.map((item: unknown) => {
+        return this.jsonToRuby(item as JSONObject, indent + 1);
+      });
+      return `[\n${innerSpaces}${items.join(`,\n${innerSpaces}`)}\n${spaces}]`;
+    }
+
+    if (typeof obj === "object" && obj !== null) {
+      const entries: Array<string> = Object.entries(obj).map(
+        ([key, value]: [string, unknown]) => {
+          return `${innerSpaces}"${key}" => ${this.rubyValue(value, indent + 1)}`;
+        },
+      );
+      return `{\n${entries.join(",\n")}\n${spaces}}`;
+    }
+
+    return this.rubyValue(obj, indent);
+  }
+
+  private static rubyValue(value: unknown, indent: number = 0): string {
+    if (value === null) {
+      return "nil";
+    }
+    if (typeof value === "boolean") {
+      return value ? "true" : "false";
+    }
+    if (typeof value === "string") {
+      return `"${value}"`;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+    if (typeof value === "object") {
+      return this.jsonToRuby(value as JSONObject, indent);
+    }
+    return String(value);
+  }
+
+  private static rubyMethodClass(method: string): string {
+    const methodMap: Record<string, string> = {
+      GET: "Get",
+      POST: "Post",
+      PUT: "Put",
+      DELETE: "Delete",
+    };
+    return methodMap[method] || "Get";
+  }
+
+  private static csharpMethod(method: string): string {
+    const methodMap: Record<string, string> = {
+      GET: "Get",
+      POST: "Post",
+      PUT: "Put",
+      DELETE: "Delete",
+    };
+    return methodMap[method] || "Get";
+  }
+
+  private static jsonToRust(obj: JSONObject, indent: number = 0): string {
+    const spaces: string = "    ".repeat(indent);
+    const innerSpaces: string = "    ".repeat(indent + 1);
+
+    if (Array.isArray(obj)) {
+      if (obj.length === 0) {
+        return "json!([])";
+      }
+      const items: Array<string> = obj.map((item: unknown) => {
+        return this.rustInnerValue(item, indent + 1);
+      });
+      return `json!([\n${innerSpaces}${items.join(`,\n${innerSpaces}`)}\n${spaces}])`;
+    }
+
+    if (typeof obj === "object" && obj !== null) {
+      const entries: Array<string> = Object.entries(obj).map(
+        ([key, value]: [string, unknown]) => {
+          return `${innerSpaces}"${key}": ${this.rustInnerValue(value, indent + 1)}`;
+        },
+      );
+      return `json!({\n${entries.join(",\n")}\n${spaces}})`;
+    }
+
+    return `json!(${this.rustInnerValue(obj, indent)})`;
+  }
+
+  private static rustInnerValue(value: unknown, indent: number = 0): string {
+    if (value === null) {
+      return "null";
+    }
+    if (typeof value === "boolean") {
+      return value ? "true" : "false";
+    }
+    if (typeof value === "string") {
+      return `"${value}"`;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+    if (Array.isArray(value)) {
+      const spaces: string = "    ".repeat(indent);
+      const innerSpaces: string = "    ".repeat(indent + 1);
+      const items: Array<string> = value.map((v: unknown) => {
+        return this.rustInnerValue(v, indent + 1);
+      });
+      return `[\n${innerSpaces}${items.join(`,\n${innerSpaces}`)}\n${spaces}]`;
+    }
+    if (typeof value === "object") {
+      const spaces: string = "    ".repeat(indent);
+      const innerSpaces: string = "    ".repeat(indent + 1);
+      const entries: Array<string> = Object.entries(
+        value as Record<string, unknown>,
+      ).map(([k, v]: [string, unknown]) => {
+        return `${innerSpaces}"${k}": ${this.rustInnerValue(v, indent + 1)}`;
+      });
+      return `{\n${entries.join(",\n")}\n${spaces}}`;
+    }
+    return String(value);
+  }
+
+  private static jsonToPowerShell(obj: JSONObject, indent: number = 0): string {
+    const spaces: string = "    ".repeat(indent);
+    const innerSpaces: string = "    ".repeat(indent + 1);
+
+    if (Array.isArray(obj)) {
+      if (obj.length === 0) {
+        return "@()";
+      }
+      const items: Array<string> = obj.map((item: unknown) => {
+        return this.jsonToPowerShell(item as JSONObject, indent + 1);
+      });
+      return `@(\n${innerSpaces}${items.join(`,\n${innerSpaces}`)}\n${spaces})`;
+    }
+
+    if (typeof obj === "object" && obj !== null) {
+      const entries: Array<string> = Object.entries(obj).map(
+        ([key, value]: [string, unknown]) => {
+          return `${innerSpaces}${key} = ${this.psValue(value, indent + 1)}`;
+        },
+      );
+      return `@{\n${entries.join("\n")}\n${spaces}}`;
+    }
+
+    return this.psValue(obj, indent);
+  }
+
+  private static psValue(value: unknown, indent: number = 0): string {
+    if (value === null) {
+      return "$null";
+    }
+    if (typeof value === "boolean") {
+      return value ? "$true" : "$false";
+    }
+    if (typeof value === "string") {
+      return `"${value}"`;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+    if (typeof value === "object") {
+      return this.jsonToPowerShell(value as JSONObject, indent);
+    }
+    return String(value);
+  }
+
+  private static jsonToPhp(obj: JSONObject, indent: number = 0): string {
+    const spaces: string = "    ".repeat(indent);
+    const innerSpaces: string = "    ".repeat(indent + 1);
+
+    if (Array.isArray(obj)) {
+      if (obj.length === 0) {
+        return "[]";
+      }
+      const items: Array<string> = obj.map((item: unknown) => {
+        return this.jsonToPhp(item as JSONObject, indent + 1);
+      });
+      return `[\n${innerSpaces}${items.join(`,\n${innerSpaces}`)}\n${spaces}]`;
+    }
+
+    if (typeof obj === "object" && obj !== null) {
+      const entries: Array<string> = Object.entries(obj).map(
+        ([key, value]: [string, unknown]) => {
+          return `${innerSpaces}"${key}" => ${this.phpValue(value, indent + 1)}`;
+        },
+      );
+      return `[\n${entries.join(",\n")}\n${spaces}]`;
+    }
+
+    return this.phpValue(obj, indent);
+  }
+
+  private static phpValue(value: unknown, indent: number = 0): string {
+    if (value === null) {
+      return "null";
+    }
+    if (typeof value === "boolean") {
+      return value ? "true" : "false";
+    }
+    if (typeof value === "string") {
+      return `"${value}"`;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+    if (typeof value === "object") {
+      return this.jsonToPhp(value as JSONObject, indent);
+    }
+    return String(value);
+  }
+}

APIReference/package.json

@@ -2,6 +2,10 @@
   "name": "@oneuptime/api-reference",
   "version": "1.0.0",
   "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OneUptime/oneuptime"
+  },
   "main": "Index.ts",
   "scripts": {
     "start": "export NODE_OPTIONS='--max-old-space-size=8096' && node --require ts-node/register Index.ts",

APIReference/views/main/404.ejs

@@ -1,15 +1,19 @@
-<main class="py-16">
-    <article class="prose">
-       <div>
-          <div>
-             
-             <h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1>
-             <div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle">
-                <h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">
-                   This page could not be found<!-- -->.
-                </h2>
-             </div>
-          </div>
-       </div>
-    </article>
- </main>
+<main class="py-12">
+   <article class="prose">
+      <div class="text-center py-20">
+         <div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-indigo-100 mx-auto mb-6">
+            <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+         </div>
+         <h1 class="text-7xl font-bold text-slate-900 tracking-tight mb-4">404</h1>
+         <p class="text-xl text-slate-600 mb-8">This page could not be found.</p>
+         <a href="/reference" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 transition-colors">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+            </svg>
+            Back to API Reference
+         </a>
+      </div>
+   </article>
+</main>

APIReference/views/main/authentication.ejs

@@ -1,39 +1,51 @@
-<main class="py-16">
+<main class="py-12">
    <article class="prose">
-      <h1>Authentication</h1>
-      <p class="lead">You'll need to authenticate your requests to access any of the endpoints in the OneUptime API. In
-         this guide, we'll look at how authentication works. OneUptime offers one way to authenticate your API requests
-         - by using an API Key.</p>
+      <!-- Hero Section -->
+      <div class="mb-10">
+         <div class="flex items-center gap-3 mb-4">
+            <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-600 shadow-lg shadow-indigo-500/30">
+               <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
+               </svg>
+            </div>
+            <span class="text-xs font-semibold text-indigo-600 uppercase tracking-wider">Guide</span>
+         </div>
+         <h1 class="font-bold text-3xl text-slate-900 tracking-tight mb-3">Authentication</h1>
+         <p class="text-lg text-slate-600 leading-relaxed max-w-2xl">You'll need to authenticate your requests to access any of the endpoints in the OneUptime API. In this guide, we'll look at how authentication works. OneUptime offers one way to authenticate your API requests - by using an API Key.</p>
+      </div>
 
-
-      <h2 id="basic-authentication" class="mb-5 scroll-mt-24 mt-24 font-bold text-lg">
+      <h2 id="generate-api-key" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12">
          Generate an API Key
       </h2>
-      <p> Please head over to <b>Project Settings</b> > <b>API Keys</b>. Create a new API Key. Please note: New API Keys
-         have no permissions assigned to them, so you will have to assign a permission before you can use it.</p>
-      <a class="mt-5 inline-flex gap-0.5 justify-center overflow-hidden font-medium transition text-emerald-500 hover:text-emerald-600  "
-         href="/reference/permissions">
+      <p class="text-slate-600 leading-relaxed">Please head over to <strong class="text-slate-800">Project Settings</strong> > <strong class="text-slate-800">API Keys</strong>. Create a new API Key. Please note: New API Keys have no permissions assigned to them, so you will have to assign a permission before you can use it.</p>
+      <a class="mt-4 inline-flex gap-1 items-center font-medium text-indigo-600 hover:text-indigo-700 transition-colors" href="/reference/permissions">
          Read more about permissions
-         <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="mt-0.5 h-5 w-5 relative top-px -mr-1">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-               d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
+         <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="h-5 w-5">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
          </svg>
       </a>
 
-
-      <h2 id="basic-authentication" class="mb-5 scroll-mt-24 mt-24 font-bold text-lg">
+      <h2 id="project-id" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12">
          Project ID
       </h2>
-      <p> Please head over to <b>Project Settings</b> > <b>Project</b>. You should see your Project ID there.</p>
+      <p class="text-slate-600 leading-relaxed">Please head over to <strong class="text-slate-800">Project Settings</strong> > <strong class="text-slate-800">Project</strong>. You should see your Project ID there.</p>
 
-      <h2 id="basic-authentication">
+      <h2 id="auth-with-api-key" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12">
          Authentication with API Key
       </h2>
-      <p>You can use OneUptime API Key on Request Header when you're making a request. You can use <code
-            class="rounded p-0.5 px-1 text-sm text-gray-500 bg-gray-100 border-2 border-gray-200">Authorization</code>
-         header with your API Key when you make a request.</p>
+      <p class="text-slate-600 leading-relaxed mb-6">You can use OneUptime API Key on Request Header when you're making a request. You can use <code class="inline-code">ApiKey</code> header with your API Key when you make a request.</p>
+
       <%- include('../partials/code', {title: "Example request with API Key" , requestUrl: "" , requestType: "" , code: "curl --header \"ApiKey: {secret-api-key}\" https://oneuptime.com/api/\<path\>" }) -%>
-         <p class="text-sm">Please don't commit your OneUptime API Key to GitHub, or on any other source control
-            project. Please regenerate a new API Key, if your API Key is committed by mistake.</p>
+
+      <div class="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-4">
+         <div class="flex gap-3">
+            <div class="flex-shrink-0">
+               <svg class="h-5 w-5 text-amber-500" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+               </svg>
+            </div>
+            <p class="text-sm text-amber-800">Please don't commit your OneUptime API Key to GitHub, or on any other source control project. Please regenerate a new API Key if your API Key is committed by mistake.</p>
+         </div>
+      </div>
    </article>
-</main>
+</main>

APIReference/views/main/data-types.ejs

@@ -1,14 +1,22 @@
-<main class="py-16">
-    <article class="prose ">
-        <h1>Data Types</h1>
-        <p class="lead">In this guide, we will look at how to work with OneUptime Data Types when querying the OneUptime
-            API. </p>
+<main class="py-12">
+    <article class="prose">
+        <!-- Hero Section -->
+        <div class="mb-10">
+            <div class="flex items-center gap-3 mb-4">
+                <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-600 shadow-lg shadow-indigo-500/30">
+                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+                    </svg>
+                </div>
+                <span class="text-xs font-semibold text-indigo-600 uppercase tracking-wider">Guide</span>
+            </div>
+            <h1 class="font-bold text-3xl text-slate-900 tracking-tight mb-3">Data Types</h1>
+            <p class="text-lg text-slate-600 leading-relaxed max-w-2xl">In this guide, we will look at how to work with OneUptime Data Types when querying the OneUptime API.</p>
+        </div>
 
-        <a href="#select" class="cursor-default">
-            <h2 id="example-using-cursors" class="scroll-mt-24">
-                Select
-            </h2>
-        </a>
+        <h2 id="select" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12">
+            Select
+        </h2>
         <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
             <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                 <p>Select can be used to select fields from an Object in List or Get Item API. By default only ID's
@@ -16,13 +24,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Select</dt>
                                 <dd><code class="inline-code">select</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Select</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Select</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Dictionary of fieldName - boolean as JSON Object. Here's an example. If the
@@ -46,11 +54,9 @@
 
 
 
-        <a href="#sort" class="cursor-default">
-            <h2 id="example-using-cursors" class="scroll-mt-24">
-                Sort
-            </h2>
-        </a>
+        <h2 id="sort" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12 pt-8 border-t border-slate-200">
+            Sort
+        </h2>
         <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
             <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                 <p>Sort can be used to sort list by fields in List API. By default objects are sorted by their createdAt
@@ -59,13 +65,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Sort</dt>
                                 <dd><code class="inline-code">sort</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Sort</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Sort</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Dictionary of fieldName - 'DESC' / 'ASC' as JSON Object. Here's an example. If
@@ -87,11 +93,9 @@
         </div>
 
 
-        <a href="#queries" class="cursor-default">
-            <h2 id="example-using-cursors" class="scroll-mt-24">
-                Query
-            </h2>
-        </a>
+        <h2 id="queries" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12 pt-8 border-t border-slate-200">
+            Query
+        </h2>
 
 
         <h3 id="example-using-cursors" class="scroll-mt-24">
@@ -106,13 +110,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Query</dt>
                                 <dd><code class="inline-code">query</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Query</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Query</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Here is an example of an Equal To Query</p>
@@ -144,13 +148,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Query</dt>
                                 <dd><code class="inline-code">query</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Query</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Query</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Here is an example of a Not Equal To Query</p>
@@ -182,13 +186,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Query</dt>
                                 <dd><code class="inline-code">query</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Query</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Query</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Here is an example of an is null query</p>
@@ -220,13 +224,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Query</dt>
                                 <dd><code class="inline-code">query</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Query</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Query</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Here is an example of an is not null query</p>
@@ -257,13 +261,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Query</dt>
                                 <dd><code class="inline-code">query</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Query</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Query</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Here is an example of a greater than query</p>
@@ -295,13 +299,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Query</dt>
                                 <dd><code class="inline-code">query</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Query</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Query</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Here is an example of a greater than or equal query</p>
@@ -333,13 +337,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Query</dt>
                                 <dd><code class="inline-code">query</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Query</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Query</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Here is an example of a less than query</p>
@@ -371,13 +375,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Query</dt>
                                 <dd><code class="inline-code">query</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Query</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Query</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Here is an example of a less than or equal query</p>
@@ -410,13 +414,13 @@
 
                 <div class="my-6">
                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
+                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-slate-100 p-0 ">
                         <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                             <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                 <dt class="sr-only">Query</dt>
                                 <dd><code class="inline-code">query</code></dd>
                                 <dt class="sr-only">Type</dt>
-                                <dd class="font-mono text-xs text-zinc-400 ">Query</dd>
+                                <dd class="font-mono text-xs text-slate-500 ">Query</dd>
                                 <dt class="sr-only">Description</dt>
                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                     <p>Here is an example of a less than or equal query</p>

APIReference/views/main/errors.ejs

@@ -1,90 +1,77 @@
-<main class="py-16">
-    <article class="prose ">
-       <h1 class="font-bold text-xl mb-5">Errors</h1>
-       <p class="lead">In this guide, we will talk about what happens when something goes wrong while you work with the API. Mistakes happen, and mostly they will be yours, not ours. Let's look at some status codes and error types you might encounter.</p>
-       <p>You can tell if your request was successful by checking the status code when receiving an API response. If a response comes back unsuccessful, you can use the status code and error message to figure out what has gone wrong and do some rudimentary debugging (before contacting support).</p>
-       <div class="my-6 flex gap-2.5 rounded-2xl border border-emerald-500/20 bg-emerald-50/50 p-4 leading-6 text-emerald-900 ">
-          <svg viewBox="0 0 16 16" aria-hidden="true" class="mt-1 h-4 w-4 flex-none fill-emerald-500 stroke-white ">
-             <circle cx="8" cy="8" r="8" stroke-width="0"></circle>
-             <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 7.75h1.5v3.5"></path>
-             <circle cx="8" cy="4" r=".5" fill="none"></circle>
-          </svg>
-          <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-             <p>Before reaching out to support with an error, please be aware that 99% of all
-                reported errors are, in fact, user errors. Therefore, please carefully check
-                your code before contacting OneUptime support.
-             </p>
-          </div>
-       </div>
-       <hr>
-       <h2 id="status-codes" class="mb-5 scroll-mt-24 mt-24 font-bold text-lg">
+<main class="py-12">
+   <article class="prose">
+      <!-- Hero Section -->
+      <div class="mb-10">
+         <div class="flex items-center gap-3 mb-4">
+            <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-600 shadow-lg shadow-indigo-500/30">
+               <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+               </svg>
+            </div>
+            <span class="text-xs font-semibold text-indigo-600 uppercase tracking-wider">Guide</span>
+         </div>
+         <h1 class="font-bold text-3xl text-slate-900 tracking-tight mb-3">Errors</h1>
+         <p class="text-lg text-slate-600 leading-relaxed max-w-2xl">In this guide, we will talk about what happens when something goes wrong while you work with the API. Mistakes happen, and mostly they will be yours, not ours. Let's look at some status codes and error types you might encounter.</p>
+      </div>
+
+      <p class="text-slate-600 leading-relaxed">You can tell if your request was successful by checking the status code when receiving an API response. If a response comes back unsuccessful, you can use the status code and error message to figure out what has gone wrong and do some rudimentary debugging (before contacting support).</p>
+
+      <div class="my-6 flex gap-3 rounded-xl border border-indigo-500/20 bg-indigo-50/50 p-4">
+         <div class="flex-shrink-0">
+            <svg viewBox="0 0 16 16" aria-hidden="true" class="h-5 w-5 fill-indigo-500 stroke-white">
+               <circle cx="8" cy="8" r="8" stroke-width="0"></circle>
+               <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 7.75h1.5v3.5"></path>
+               <circle cx="8" cy="4" r=".5" fill="none"></circle>
+            </svg>
+         </div>
+         <p class="text-sm text-indigo-900">Before reaching out to support with an error, please be aware that 99% of all reported errors are, in fact, user errors. Therefore, please carefully check your code before contacting OneUptime support.</p>
+      </div>
+
+      <h2 id="status-codes" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12 pt-8 border-t border-slate-200">
          Status codes
-       </h2>
-       <p>Here is a list of the different categories of status codes returned by the OneUptime API. Use these to understand if a request was successful.</p>
-       <div class="my-6">
-          <ul role="list" class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-             <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                   <dt class="sr-only">Name</dt>
-                   <dd><code class="inline-code">2xx</code></dd>
-                   <dt class="sr-only">Type</dt>
-                   <dd class="font-mono text-xs text-zinc-400 "></dd>
-                   <dt class="sr-only">Description</dt>
-                   <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                      <p>A 2xx status code indicates a successful response.</p>
-                   </dd>
-                </dl>
-             </li>
-             <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                   <dt class="sr-only">Name</dt>
-                   <dd><code class="inline-code">4xx</code></dd>
-                   <dt class="sr-only">Type</dt>
-                   <dd class="font-mono text-xs text-zinc-400 "></dd>
-                   <dt class="sr-only">Description</dt>
-                   <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                      <p>A 4xx status code indicates a client error — this means it's a <em>you</em>
-                         problem.
-                      </p>
-                   </dd>
-                </dl>
-             </li>
-             <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
+      </h2>
+      <p class="text-slate-600 leading-relaxed mb-6">Here is a list of the different categories of status codes returned by the OneUptime API. Use these to understand if a request was successful.</p>
+
+      <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
+         <ul role="list" class="m-0 list-none divide-y divide-slate-100 p-0">
+            <li class="m-0 px-5 py-4">
                <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                  <dt class="sr-only">Name</dt>
-                  <dd><code class="inline-code">429</code></dd>
-                  <dt class="sr-only">Type</dt>
-                  <dd class="font-mono text-xs text-zinc-400 "></dd>
-                  <dt class="sr-only">Description</dt>
-                  <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                     <p> Request limit exceeded. Request limits are 100 operations per second per project (this includes all the API keys in the project).
-                     </p>
-                  </dd>
+                  <dd><code class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20">2xx</code></dd>
+                  <dd class="w-full flex-none text-sm text-slate-600 mt-1">A 2xx status code indicates a successful response.</dd>
                </dl>
             </li>
-             <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                   <dt class="sr-only">Name</dt>
-                   <dd><code class="inline-code">5xx</code></dd>
-                   <dt class="sr-only">Type</dt>
-                   <dd class="font-mono text-xs text-zinc-400 "></dd>
-                   <dt class="sr-only">Description</dt>
-                   <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                      <p>A 5xx status code indicates a server error — you won't be seeing a lot of these.</p>
-                   </dd>
-                </dl>
-             </li>
-          </ul>
-       </div>
-       <hr>
-       <h2 id="error-types" class="mb-5 scroll-mt-24 mt-24 font-bold text-lg">Error Messages</h2>
-       <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
-          <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-             <p>Whenever a request is unsuccessful, the OneUptime API will return an error response with an error message. You can use this information to understand better what has gone wrong and how to fix it. Most of the error messages are pretty helpful and actionable.</p>
-             <p>Here is an example of an error message: </p>
-             
-          </div>
-          <%- include('../partials/code', {title: "Example error response", requestUrl: "", requestType: "", code: "{ \"message\": \"Name is required\" }" }) -%>
-       </div>
-    </article>
- </main>
+            <li class="m-0 px-5 py-4">
+               <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+                  <dd><code class="inline-flex items-center rounded-md bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20">4xx</code></dd>
+                  <dd class="w-full flex-none text-sm text-slate-600 mt-1">A 4xx status code indicates a client error - this means it's a <em>you</em> problem.</dd>
+               </dl>
+            </li>
+            <li class="m-0 px-5 py-4">
+               <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+                  <dd><code class="inline-flex items-center rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-600/20">429</code></dd>
+                  <dd class="w-full flex-none text-sm text-slate-600 mt-1">Request limit exceeded. Request limits are 100 operations per second per project (this includes all the API keys in the project).</dd>
+               </dl>
+            </li>
+            <li class="m-0 px-5 py-4">
+               <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+                  <dd><code class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20">5xx</code></dd>
+                  <dd class="w-full flex-none text-sm text-slate-600 mt-1">A 5xx status code indicates a server error - you won't be seeing a lot of these.</dd>
+               </dl>
+            </li>
+         </ul>
+      </div>
+
+      <h2 id="error-types" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12 pt-8 border-t border-slate-200">
+         Error Messages
+      </h2>
+      <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
+         <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
+            <p class="text-slate-600 leading-relaxed">Whenever a request is unsuccessful, the OneUptime API will return an error response with an error message. You can use this information to understand better what has gone wrong and how to fix it. Most of the error messages are pretty helpful and actionable.</p>
+            <p class="text-slate-600 leading-relaxed">Here is an example of an error message:</p>
+         </div>
+         <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
+            <%- include('../partials/code', {title: "Example error response", requestUrl: "", requestType: "", code: "{ \"message\": \"Name is required\" }" }) -%>
+         </div>
+      </div>
+   </article>
+</main>

APIReference/views/main/introduction.ejs

@@ -1,198 +1,87 @@
-<main class="py-16">
-    <article class="prose ">
-       <div class="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
-          <div
-             class="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem]">
-             <div
-                class="absolute inset-0 bg-gradient-to-r from-[#36b49f] to-[#DBFF75] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)]">
-                <svg aria-hidden="true"
-                   class="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay  /5">
-                   <defs>
-                      <pattern id=":r6s:" width="72" height="56" patternUnits="userSpaceOnUse" x="-12"
-                         y="4">
-                         <path d="M.5 56V.5H72" fill="none"></path>
-                      </pattern>
-                   </defs>
-                   <rect width="100%" height="100%" stroke-width="0" fill="url(#:r6s:)"></rect>
-                   <svg x="-12" y="4" class="overflow-visible">
-                      <rect stroke-width="0" width="73" height="57" x="288" y="168"></rect>
-                      <rect stroke-width="0" width="73" height="57" x="144" y="56"></rect>
-                      <rect stroke-width="0" width="73" height="57" x="504" y="168"></rect>
-                      <rect stroke-width="0" width="73" height="57" x="720" y="336"></rect>
-                   </svg>
+<main class="py-12">
+    <article class="prose">
+       <!-- Hero Section -->
+       <div class="relative mb-12">
+          <div class="flex items-center gap-3 mb-4">
+             <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-600 shadow-lg shadow-indigo-500/30">
+                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                 </svg>
              </div>
-             <svg viewBox="0 0 1113 440" aria-hidden="true"
-                class="absolute top-0 left-1/2 ml-[-19rem] w-[69.5625rem] fill-white blur-[26px] ">
-                <path d="M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z">
-                </path>
-             </svg>
+             <span class="text-xs font-semibold text-indigo-600 uppercase tracking-wider">REST API</span>
           </div>
+          <h1 class="font-bold text-3xl text-slate-900 tracking-tight mb-4">API Reference</h1>
+          <p class="text-lg text-slate-600 leading-relaxed max-w-2xl">
+             Use the OneUptime API to access any resource in your projects, create automated workflows,
+             and seamlessly integrate with the tools and services your organization uses.
+          </p>
        </div>
-       <h1 class="font-bold text-xl">API Reference</h1>
-       <p class="lead">Use the OneUptime API to access any resource in your projects, create automated
-          workflows, and more
-          and
-          seamlessly integrate your project into the other tools and services you use in your
-          organization.</p>
        
        
-       <div class="my-16 xl:max-w-none">
-          <h2 id="guides" class="scroll-mt-24 font-bold">
-             <span class="group text-inherit no-underline hover:text-inherit">
-                <div
-                   class="absolute mt-1 ml-[calc(-1*var(--width))] hidden w-[var(--width)] opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(theme(maxWidth.lg)+theme(spacing.8))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:theme(spacing.10)]">
-                   <div
-                      class="group/anchor block h-5 w-5 rounded-lg bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500    ">
-                      <svg viewBox="0 0 20 20" fill="none" stroke-linecap="round" aria-hidden="true"
-                         class="h-5 w-5 stroke-zinc-500 transition  ">
-                         <path
-                            d="m6.5 11.5-.964-.964a3.535 3.535 0 1 1 5-5l.964.964m2 2 .964.964a3.536 3.536 0 0 1-5 5L8.5 13.5m0-5 3 3">
-                         </path>
-                      </svg>
-                   </div>
-                </div>
-                Guides
-             </span>
+       <!-- Guides Section -->
+       <div class="my-12 xl:max-w-none">
+          <h2 id="guides" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-6">
+             Getting Started
           </h2>
-          <div
-             class="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10  sm:grid-cols-2 xl:grid-cols-4">
-             <div>
-                <h3 class="text-sm font-semibold text-zinc-900 ">Authentication</h3>
-                <p class="mt-1 text-sm text-zinc-600 ">Learn how to authenticate your
-                   API
-                   requests.</p>
-                <p class="mt-4">
-                   <a class="inline-flex gap-0.5 justify-center overflow-hidden font-medium transition text-emerald-500 hover:text-emerald-600  "
-                      href="/reference/authentication">
-                      Read more
-                      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"
-                         class="mt-0.5 h-5 w-5 relative top-px -mr-1">
-                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                            d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
-                      </svg>
-                   </a>
-                </p>
-             </div>
-             <div>
-                <h3 class="text-sm font-semibold text-zinc-900 ">Pagination</h3>
-                <p class="mt-1 text-sm text-zinc-600 ">Understand how to work with
-                   paginated responses.</p>
-                <p class="mt-4">
-                   <a class="inline-flex gap-0.5 justify-center overflow-hidden font-medium transition text-emerald-500 hover:text-emerald-600  "
-                      href="/reference/pagination">
-                      Read more
-                      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"
-                         class="mt-0.5 h-5 w-5 relative top-px -mr-1">
-                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                            d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
-                      </svg>
-                   </a>
-                </p>
-             </div>
-             <div>
-                <h3 class="text-sm font-semibold text-zinc-900 ">Errors</h3>
-                <p class="mt-1 text-sm text-zinc-600 ">Read about the different types
-                   of
-                   errors returned by the API.</p>
-                <p class="mt-4">
-                   <a class="inline-flex gap-0.5 justify-center overflow-hidden font-medium transition text-emerald-500 hover:text-emerald-600  "
-                      href="/reference/errors">
-                      Read more
-                      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"
-                         class="mt-0.5 h-5 w-5 relative top-px -mr-1">
-                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                            d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
-                      </svg>
-                   </a>
-                </p>
-             </div>
-             <div>
-                <h3 class="text-sm font-semibold text-zinc-900 ">Permissions</h3>
-                <p class="mt-1 text-sm text-zinc-600 ">Learn how API Key Permissions
-                   work.</p>
-                <p class="mt-4">
-                   <a class="inline-flex gap-0.5 justify-center overflow-hidden font-medium transition text-emerald-500 hover:text-emerald-600  "
-                      href="/reference/permissions">
-                      Read more
-                      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"
-                         class="mt-0.5 h-5 w-5 relative top-px -mr-1">
-                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                            d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
-                      </svg>
-                   </a>
-                </p>
-             </div>
+          <div class="not-prose grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+             <a href="/reference/authentication" class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
+                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-50 text-indigo-600 mb-4 group-hover:bg-indigo-100 transition-colors">
+                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
+                   </svg>
+                </div>
+                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors">Authentication</h3>
+                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed">Learn how to authenticate your API requests.</p>
+             </a>
+             <a href="/reference/pagination" class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
+                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-50 text-indigo-600 mb-4 group-hover:bg-indigo-100 transition-colors">
+                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
+                   </svg>
+                </div>
+                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors">Pagination</h3>
+                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed">Understand how to work with paginated responses.</p>
+             </a>
+             <a href="/reference/errors" class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
+                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-50 text-indigo-600 mb-4 group-hover:bg-indigo-100 transition-colors">
+                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                   </svg>
+                </div>
+                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors">Errors</h3>
+                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed">Read about the different types of errors returned.</p>
+             </a>
+             <a href="/reference/permissions" class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
+                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-50 text-indigo-600 mb-4 group-hover:bg-indigo-100 transition-colors">
+                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+                   </svg>
+                </div>
+                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors">Permissions</h3>
+                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed">Learn how API Key Permissions work.</p>
+             </a>
           </div>
        </div>
-       <div class="my-16 xl:max-w-none">
-          <h2 id="resources" class="scroll-mt-24 font-bold"><span
-                class="group text-inherit no-underline hover:text-inherit">Featured Resources</span>
-          </h2>
-          <div
-             class="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10  sm:grid-cols-2 xl:grid-cols-4">
-             
-             <% for(var i=0; i<pageData.featuredResources.length; i++) {%>
-             <div
-                class="cursor-pointer group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5  ">
-                <div class="pointer-events-none">
-                   <div
-                      class="absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
-                      <svg aria-hidden="true"
-                         class="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5  /2.5">
-                         <defs>
-                            <pattern id=":r6t:" width="72" height="56" patternUnits="userSpaceOnUse"
-                               x="50%" y="16">
-                               <path d="M.5 56V.5H72" fill="none"></path>
-                            </pattern>
-                         </defs>
-                         <rect width="100%" height="100%" stroke-width="0" fill="url(#:r6t:)"></rect>
-                         <svg x="50%" y="16" class="overflow-visible">
-                            <rect stroke-width="0" width="73" height="57" x="0" y="56"></rect>
-                            <rect stroke-width="0" width="73" height="57" x="72" y="168"></rect>
-                         </svg>
-                      </svg>
-                   </div>
-                   <div
-                      class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#D7EDEA] to-[#F4FBDF] opacity-0 transition duration-300 group-hover:opacity-100"
-                      data-projection-id="35"
-                      style="-webkit-mask-image: radial-gradient(180px at 0px 0px, white, transparent);">
-                   </div>
-                   <div
-                      class="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
-                      data-projection-id="36"
-                      style="-webkit-mask-image: radial-gradient(180px at 0px 0px, white, transparent);">
-                      <svg aria-hidden="true"
-                         class="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70  /10">
-                         <defs>
-                            <pattern id=":r6u:" width="72" height="56" patternUnits="userSpaceOnUse"
-                               x="50%" y="16">
-                               <path d="M.5 56V.5H72" fill="none"></path>
-                            </pattern>
-                         </defs>
-                         <rect width="100%" height="100%" stroke-width="0" fill="url(#:r6u:)"></rect>
-                         <svg x="50%" y="16" class="overflow-visible">
-                            <rect stroke-width="0" width="73" height="57" x="0" y="56"></rect>
-                            <rect stroke-width="0" width="73" height="57" x="72" y="168"></rect>
-                         </svg>
-                      </svg>
-                   </div>
-                </div>
-                <div
-                   class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10  ">
-                </div>
-                <div class="relative rounded-2xl px-4 pt-16 pb-4">
-                   
-                   <h3 class="mt-4 text-sm font-semibold leading-7 text-zinc-900 "><a
-                         href="/reference/<%= pageData.featuredResources[i].path -%>"><span
-                            class="absolute inset-0 rounded-2xl"></span>  <%= pageData.featuredResources[i].name -%></a>
-                   </h3>
-                   <p class="mt-1 text-sm text-zinc-600 "><%= pageData.featuredResources[i].description -%></p>
-                </div>
-             </div>
-             <% } %>
 
+       <!-- Featured Resources Section -->
+       <div class="my-12 xl:max-w-none">
+          <h2 id="resources" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-6">
+             Featured Resources
+          </h2>
+          <div class="not-prose grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+             <% for(var i=0; i<pageData.featuredResources.length; i++) {%>
+             <a href="/reference/<%= pageData.featuredResources[i].path -%>"
+                class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
+                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 text-slate-600 mb-4 group-hover:bg-indigo-100 group-hover:text-indigo-600 transition-colors">
+                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
+                   </svg>
+                </div>
+                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors"><%= pageData.featuredResources[i].name -%></h3>
+                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed"><%= pageData.featuredResources[i].description -%></p>
+             </a>
+             <% } %>
           </div>
        </div>
     </article>
- </main>
+</main>

APIReference/views/main/pagination.ejs

@@ -1,113 +1,83 @@
-<main class="py-16">
-   <article class="prose ">
-      <h1>Pagination</h1>
-      <p class="lead">In this guide, we will look at how to work with paginated responses when querying the OneUptime
-         API. By default, all responses limit results to ten. </p>
-      <p>When an API response returns a list of objects, no matter the amount, pagination is supported. In paginated
-         responses, objects are nested in a <code class="inline-code">data</code> attribute. The API response also has
-         <code class="inline-code">count</code> attribute that indicates total count in the list with that query. You
-         can use the <code class="inline-code">limit</code> and <code class="inline-code">skip</code> query parameters
-         to query pages.</p>
-      <h2 id="example-using-cursors" class="scroll-mt-24">
+<main class="py-12">
+   <article class="prose">
+      <!-- Hero Section -->
+      <div class="mb-10">
+         <div class="flex items-center gap-3 mb-4">
+            <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-600 shadow-lg shadow-indigo-500/30">
+               <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
+               </svg>
+            </div>
+            <span class="text-xs font-semibold text-indigo-600 uppercase tracking-wider">Guide</span>
+         </div>
+         <h1 class="font-bold text-3xl text-slate-900 tracking-tight mb-3">Pagination</h1>
+         <p class="text-lg text-slate-600 leading-relaxed max-w-2xl">In this guide, we will look at how to work with paginated responses when querying the OneUptime API. By default, all responses limit results to ten.</p>
+      </div>
+
+      <p class="text-slate-600 leading-relaxed">When an API response returns a list of objects, no matter the amount, pagination is supported. In paginated responses, objects are nested in a <code class="inline-code">data</code> attribute. The API response also has <code class="inline-code">count</code> attribute that indicates total count in the list with that query. You can use the <code class="inline-code">limit</code> and <code class="inline-code">skip</code> query parameters to query pages.</p>
+
+      <h2 id="example-using-cursors" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-6 mt-12">
          Pagination Example
       </h2>
       <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
          <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-            <p>In this example, we request the list of monitors. As a result, we get a list of three monitors and can
-               tell by the <code class="inline-code">count</code> attribute that we have reached the end of the
-               result set</p>
-               <h2 id="example-using-cursors" class="scroll-mt-24">
-                  Query Parameters
-               </h2>
-            <div class="my-6">
-               <ul role="list"
-                  class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-                  <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
+            <p class="text-slate-600 leading-relaxed">In this example, we request the list of monitors. As a result, we get a list of three monitors and can tell by the <code class="inline-code">count</code> attribute that we have reached the end of the result set</p>
+
+            <h3 class="text-base font-semibold text-slate-800 mt-8 mb-3">Query Parameters</h3>
+            <div class="rounded-lg border border-slate-200 bg-white overflow-hidden">
+               <ul role="list" class="m-0 list-none divide-y divide-slate-100 p-0">
+                  <li class="m-0 px-4 py-3">
                      <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                        <dt class="sr-only">Name</dt>
                         <dd><code class="inline-code">limit</code></dd>
-                        <dt class="sr-only">Type</dt>
-                        <dd class="font-mono text-xs text-zinc-400 ">Number</dd>
-                        <dt class="sr-only">Description</dt>
-                        <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                           <p>Number of items you need to fetch. More items will lead to slower responses. Max limit is
-                              100.</p>
-                        </dd>
+                        <dd class="font-mono text-xs text-slate-500">Number</dd>
+                        <dd class="w-full flex-none text-sm text-slate-600">Number of items you need to fetch. More items will lead to slower responses. Max limit is 100.</dd>
                      </dl>
                   </li>
-                  <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
+                  <li class="m-0 px-4 py-3">
                      <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                        <dt class="sr-only">Name</dt>
                         <dd><code class="inline-code">skip</code></dd>
-                        <dt class="sr-only">Type</dt>
-                        <dd class="font-mono text-xs text-zinc-400 ">Number</dd>
-                        <dt class="sr-only">Description</dt>
-                        <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                           <p>Number of items to skip. This can be useful when you are paginating items.</p>
-                        </dd>
+                        <dd class="font-mono text-xs text-slate-500">Number</dd>
+                        <dd class="w-full flex-none text-sm text-slate-600">Number of items to skip. This can be useful when you are paginating items.</dd>
+                     </dl>
+                  </li>
+               </ul>
+            </div>
+
+            <h3 class="text-base font-semibold text-slate-800 mt-8 mb-3">Response Body</h3>
+            <div class="rounded-lg border border-slate-200 bg-white overflow-hidden">
+               <ul role="list" class="m-0 list-none divide-y divide-slate-100 p-0">
+                  <li class="m-0 px-4 py-3">
+                     <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+                        <dd><code class="inline-code">data</code></dd>
+                        <dd class="font-mono text-xs text-slate-500">JSON Array</dd>
+                        <dd class="w-full flex-none text-sm text-slate-600">List of items fetched.</dd>
+                     </dl>
+                  </li>
+                  <li class="m-0 px-4 py-3">
+                     <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+                        <dd><code class="inline-code">count</code></dd>
+                        <dd class="font-mono text-xs text-slate-500">Number</dd>
+                        <dd class="w-full flex-none text-sm text-slate-600">Total number of items in the database</dd>
+                     </dl>
+                  </li>
+                  <li class="m-0 px-4 py-3">
+                     <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+                        <dd><code class="inline-code">limit</code></dd>
+                        <dd class="font-mono text-xs text-slate-500">Number</dd>
+                        <dd class="w-full flex-none text-sm text-slate-600">Number of items you need to fetch. More items will lead to slower responses. Max limit is 100.</dd>
+                     </dl>
+                  </li>
+                  <li class="m-0 px-4 py-3">
+                     <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+                        <dd><code class="inline-code">skip</code></dd>
+                        <dd class="font-mono text-xs text-slate-500">Number</dd>
+                        <dd class="w-full flex-none text-sm text-slate-600">Number of items to skip. This can be useful when you are paginating items.</dd>
                      </dl>
                   </li>
                </ul>
             </div>
-            <h2 id="example-using-cursors" class="scroll-mt-24">
-               Response Body
-            </h2>
-         <div class="my-6">
-            <ul role="list"
-               class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-               <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                  <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                     <dt class="sr-only">Name</dt>
-                     <dd><code class="inline-code">data</code></dd>
-                     <dt class="sr-only">Type</dt>
-                     <dd class="font-mono text-xs text-zinc-400 ">JSON Array</dd>
-                     <dt class="sr-only">Description</dt>
-                     <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                        <p>List of items fetched.</p>
-                     </dd>
-                  </dl>
-               </li>
-               <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                  <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                     <dt class="sr-only">Name</dt>
-                     <dd><code class="inline-code">count</code></dd>
-                     <dt class="sr-only">Type</dt>
-                     <dd class="font-mono text-xs text-zinc-400 ">Number</dd>
-                     <dt class="sr-only">Description</dt>
-                     <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                        <p>Total number of items in the database</p>
-                     </dd>
-                  </dl>
-               </li>
-               <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                  <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                     <dt class="sr-only">Name</dt>
-                     <dd><code class="inline-code">limit</code></dd>
-                     <dt class="sr-only">Type</dt>
-                     <dd class="font-mono text-xs text-zinc-400 ">Number</dd>
-                     <dt class="sr-only">Description</dt>
-                     <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                        <p>Number of items you need to fetch. More items will lead to slower responses. Max limit is
-                           100.</p>
-                     </dd>
-                  </dl>
-               </li>
-               <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                  <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                     <dt class="sr-only">Name</dt>
-                     <dd><code class="inline-code">skip</code></dd>
-                     <dt class="sr-only">Type</dt>
-                     <dd class="font-mono text-xs text-zinc-400 ">Number</dd>
-                     <dt class="sr-only">Description</dt>
-                     <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                        <p>Number of items to skip. This can be useful when you are paginating items.</p>
-                     </dd>
-                  </dl>
-               </li>
-            </ul>
          </div>
-         </div>
-         <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
+         <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
             <%- include('../partials/code', {title: "Example Pagination Request", requestUrl: "/api/monitors/get-list?skip=0&limit=3", requestType: "POST", code: pageData.requestCode }) -%>
             <%- include('../partials/code', {title: "Example Pagination Response" , requestUrl: "", requestType: "", code: pageData.responseCode }) -%>
          </div>

APIReference/views/main/permissions.ejs

@@ -1,38 +1,36 @@
-<main class="py-16">
-    <article class="prose ">
-       <h1>Permissions</h1>
-       <p class="lead"> Your API Token needs permissions to create, update, read or delete any resource. If you do not have permissions to make a request a <code class="inline-code">4xx</code> status will be sent as response. You can manage permissions for your API Key in Project Settings > API Keys. </p>
-      
-   
-       <h2 id="consuming-webhooks" >
-         Permissions List
-       </h2>
-       <p>Here is a list of all the permissions:</p>
-       <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
-          <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-             <div class="my-6">
-                <ul role="list" class="m-0 w-full">
-                  <% for(var i=0; i<pageData.permissions.length; i++) {%>
-                   <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                      <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                         <dt class="sr-only">Name</dt>
-                         <dd><code class="inline-code"> <%= pageData.permissions[i].permission -%></code></dd>
-                         <dt class="sr-only">Type</dt>
-                         <dd class="font-mono text-xs text-zinc-400 "><%= pageData.permissions[i].title -%></dd>
-                         <dt class="sr-only">Description</dt>
-                         <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                            <p><%= pageData.permissions[i].description -%></p>
-                         </dd>
-                      </dl>
-                   </li>
-                   <% } %>
+<main class="py-12">
+   <article class="prose">
+      <!-- Hero Section -->
+      <div class="mb-10">
+         <div class="flex items-center gap-3 mb-4">
+            <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-600 shadow-lg shadow-indigo-500/30">
+               <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+               </svg>
+            </div>
+            <span class="text-xs font-semibold text-indigo-600 uppercase tracking-wider">Guide</span>
+         </div>
+         <h1 class="font-bold text-3xl text-slate-900 tracking-tight mb-3">Permissions</h1>
+         <p class="text-lg text-slate-600 leading-relaxed max-w-2xl">Your API Token needs permissions to create, update, read or delete any resource. If you do not have permissions to make a request a <code class="inline-code">4xx</code> status will be sent as response. You can manage permissions for your API Key in Project Settings > API Keys.</p>
+      </div>
 
-                   
-                </ul>
-             </div>
-          </div>
-      
-       </div>
-       
-    </article>
- </main>
+      <h2 id="consuming-webhooks" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-6 mt-12">
+         Permissions List
+      </h2>
+      <p class="text-slate-600 leading-relaxed mb-6">Here is a list of all the permissions:</p>
+
+      <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
+         <ul role="list" class="m-0 divide-y divide-slate-100 p-0">
+            <% for(var i=0; i<pageData.permissions.length; i++) {%>
+               <li class="m-0 px-5 py-4 hover:bg-slate-50/50 transition-colors">
+                  <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+                     <dd><code class="inline-code"><%= pageData.permissions[i].permission -%></code></dd>
+                     <dd class="font-mono text-xs text-slate-500"><%= pageData.permissions[i].title -%></dd>
+                     <dd class="w-full flex-none text-sm text-slate-600 mt-1"><%= pageData.permissions[i].description -%></dd>
+                  </dl>
+               </li>
+            <% } %>
+         </ul>
+      </div>
+   </article>
+</main>

APIReference/views/pages/index.ejs

@@ -1,16 +1,14 @@
-<html lang="en" class="js-focus-visible ctshmsrlsm idc0_345">
+<html lang="en" class="h-full antialiased scroll-smooth" style="color-scheme: light;">
 <%- include('../partials/head', {
    enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false,
 }) -%>
 
-   <body onload="applyStyles()" class="bg-white antialiased " data-new-gr-c-s-check-loaded="14.1095.0"
-      data-gr-ext-installed="">
-      <div id="__next">
+   <body onload="applyStyles()" class="flex min-h-full bg-white">
+      <div id="__next" class="w-full">
          <div class="lg:ml-72 xl:ml-80">
             <%- include('../partials/nav') -%>
             <div class="flex justify-center">
-               <div class="relative px-4 pt-14 sm:px-6 lg:px-8 max-w-5xl ">
-                  <div>
+               <div class="relative px-4 pt-14 sm:px-6 lg:px-8 max-w-5xl w-full">
                   <div class="flex justify-center">
                      <%- include('../main/'+page) -%>
                   </div>
@@ -18,7 +16,6 @@
                      <%- include('../partials/footer') -%>
                   </div>
                </div>
-               </div>
             </div>
          </div>
       </div>

APIReference/views/partials/code-tabs.ejs

@@ -0,0 +1,276 @@
+<%
+const uniqueId = 'code-tabs-' + Math.random().toString(36).substr(2, 9);
+const tabs = [
+   { id: 'preview', name: 'Request', icon: 'preview', isPreview: true },
+   { id: 'curl', name: 'cURL', icon: 'terminal' },
+   { id: 'javascript', name: 'JavaScript', icon: 'js' },
+   { id: 'typescript', name: 'TypeScript', icon: 'ts' },
+   { id: 'python', name: 'Python', icon: 'python' },
+   { id: 'go', name: 'Go', icon: 'go' },
+   { id: 'java', name: 'Java', icon: 'java' },
+   { id: 'csharp', name: 'C#', icon: 'csharp' },
+   { id: 'php', name: 'PHP', icon: 'php' },
+   { id: 'ruby', name: 'Ruby', icon: 'ruby' },
+   { id: 'rust', name: 'Rust', icon: 'rust' },
+   { id: 'powershell', name: 'PowerShell', icon: 'powershell' }
+];
+%>
+
+<div class="code-tabs-container my-6 w-full max-w-full overflow-hidden" id="<%= uniqueId %>">
+   <!-- Header with title and endpoint -->
+   <div class="rounded-t-xl bg-slate-900 border border-slate-700/50 border-b-0">
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-3 border-b border-slate-700/50">
+         <h4 class="text-sm font-semibold text-slate-200 tracking-wide"><%= title %></h4>
+         <div class="flex items-center gap-2">
+            <% if(requestType === "GET"){ %>
+               <span class="inline-flex items-center rounded-md bg-emerald-500/15 px-2.5 py-1 text-xs font-bold text-emerald-400 ring-1 ring-inset ring-emerald-500/30 uppercase tracking-wide">GET</span>
+            <% } else if(requestType === "POST"){ %>
+               <span class="inline-flex items-center rounded-md bg-indigo-500/15 px-2.5 py-1 text-xs font-bold text-indigo-400 ring-1 ring-inset ring-indigo-500/30 uppercase tracking-wide">POST</span>
+            <% } else if(requestType === "DELETE"){ %>
+               <span class="inline-flex items-center rounded-md bg-red-500/15 px-2.5 py-1 text-xs font-bold text-red-400 ring-1 ring-inset ring-red-500/30 uppercase tracking-wide">DELETE</span>
+            <% } else if(requestType === "PUT"){ %>
+               <span class="inline-flex items-center rounded-md bg-amber-500/15 px-2.5 py-1 text-xs font-bold text-amber-400 ring-1 ring-inset ring-amber-500/30 uppercase tracking-wide">PUT</span>
+            <% } %>
+         </div>
+      </div>
+
+      <% if(requestUrl){ %>
+      <div class="px-4 py-2.5 bg-slate-800/40 border-b border-slate-700/30">
+         <code class="font-mono text-sm text-slate-300 break-all"><%= requestUrl %></code>
+      </div>
+      <% } %>
+
+      <!-- Language Tabs -->
+      <div class="relative">
+         <div class="flex overflow-x-auto scrollbar-hide border-b border-slate-700/50" role="tablist">
+            <% tabs.forEach((tab, index) => { %>
+               <button
+                  type="button"
+                  role="tab"
+                  aria-selected="<%= index === 0 ? 'true' : 'false' %>"
+                  aria-controls="<%= uniqueId %>-panel-<%= tab.id %>"
+                  id="<%= uniqueId %>-tab-<%= tab.id %>"
+                  data-tab-id="<%= tab.id %>"
+                  onclick="switchCodeTab('<%= uniqueId %>', '<%= tab.id %>')"
+                  class="code-tab relative flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-all duration-200 <%= index === 0 ? 'text-indigo-400 bg-slate-800/50' : 'text-slate-400 hover:text-slate-300 hover:bg-slate-800/30' %>"
+               >
+                  <span class="lang-icon w-4 h-4 flex items-center justify-center">
+                     <% if(tab.icon === 'preview'){ %>
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
+                     <% } else if(tab.icon === 'terminal'){ %>
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+                     <% } else if(tab.icon === 'js'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.405-.585-.585-.765-.63-.63-1.47-.93-2.835-.885l-.705.09c-.676.165-1.32.525-1.71 1.005-1.14 1.29-.81 3.54.57 4.47 1.365 1.035 3.369 1.26 3.629 2.235.225 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.63-1.755-1.455l-1.83 1.05c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.665 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>
+                     <% } else if(tab.icon === 'ts'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"/></svg>
+                     <% } else if(tab.icon === 'python'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"/></svg>
+                     <% } else if(tab.icon === 'go'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514c-.176.046-.187.058-.34-.117c-.174-.199-.303-.327-.548-.444c-.737-.362-1.45-.257-2.115.175c-.795.514-1.204 1.274-1.192 2.22c.011.935.654 1.706 1.577 1.835c.795.105 1.46-.175 1.987-.77c.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35c.152-.362.432-.97.596-1.274a.32.32 0 0 1 .292-.187h4.253c-.023.316-.023.631-.07.947a5 5 0 0 1-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986c-1.145.152-2.209-.07-3.143-.77c-.865-.655-1.356-1.52-1.484-2.595c-.152-1.274.222-2.419.993-3.424c.83-1.086 1.928-1.776 3.272-2.02c1.098-.2 2.15-.07 3.096.571c.62.41 1.063.97 1.356 1.648c.07.105.023.164-.117.2m3.868 6.461c-1.064-.024-2.034-.328-2.852-1.029a3.67 3.67 0 0 1-1.262-2.255c-.21-1.32.152-2.489.947-3.529c.853-1.122 1.881-1.706 3.272-1.95c1.192-.21 2.314-.095 3.33.595c.923.63 1.496 1.484 1.648 2.605c.198 1.578-.257 2.863-1.344 3.962c-.771.783-1.718 1.273-2.805 1.495c-.315.06-.63.07-.934.106m2.78-4.72c-.011-.153-.011-.27-.034-.387c-.21-1.157-1.274-1.81-2.384-1.554c-1.087.245-1.788.935-2.045 2.033c-.21.912.234 1.835 1.075 2.21c.643.28 1.285.244 1.905-.07c.923-.48 1.425-1.228 1.484-2.233z"/></svg>
+                     <% } else if(tab.icon === 'java'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M8.851 18.56s-.917.534.653.714c1.902.218 2.874.187 4.969-.211 0 0 .552.346 1.321.646-4.699 2.013-10.633-.118-6.943-1.149M8.276 15.933s-1.028.761.542.924c2.032.209 3.636.227 6.413-.308 0 0 .384.389.987.602-5.679 1.661-12.007.13-7.942-1.218M13.116 11.475c1.158 1.333-.304 2.533-.304 2.533s2.939-1.518 1.589-3.418c-1.261-1.772-2.228-2.652 3.007-5.688 0-.001-8.216 2.051-4.292 6.573M19.33 20.504s.679.559-.747.991c-2.712.822-11.288 1.069-13.669.033-.856-.373.75-.89 1.254-.998.527-.114.828-.093.828-.093-.953-.671-6.156 1.317-2.643 1.887 9.58 1.553 17.462-.7 14.977-1.82M9.292 13.21s-4.362 1.036-1.544 1.412c1.189.159 3.561.123 5.77-.062 1.806-.152 3.618-.477 3.618-.477s-.637.272-1.098.587c-4.429 1.165-12.986.623-10.522-.568 2.082-1.006 3.776-.892 3.776-.892M17.116 17.584c4.503-2.34 2.421-4.589.968-4.285-.355.074-.515.138-.515.138s.132-.207.385-.297c2.875-1.011 5.086 2.981-.928 4.562 0-.001.07-.062.09-.118M14.401 0s2.494 2.494-2.365 6.33c-3.896 3.077-.888 4.832-.001 6.836-2.274-2.053-3.943-3.858-2.824-5.539 1.644-2.469 6.197-3.665 5.19-7.627M9.734 23.924c4.322.277 10.959-.153 11.116-2.198 0 0-.302.775-3.572 1.391-3.688.694-8.239.613-10.937.168 0-.001.553.457 3.393.639"/></svg>
+                     <% } else if(tab.icon === 'csharp'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M11.5 15.97l.41 2.44c-.26.14-.68.27-1.24.39-.57.13-1.24.2-2.01.2-2.21-.04-3.87-.7-4.98-1.96C2.56 15.77 2 14.16 2 12.21c.05-2.31.72-4.08 2-5.32C5.32 5.64 6.96 5 8.94 5c.75 0 1.4.07 1.94.19s.94.25 1.2.4l-.58 2.49-1.06-.34c-.4-.1-.86-.15-1.39-.15-1.16-.01-2.12.36-2.87 1.1-.76.73-1.15 1.85-1.18 3.34 0 1.36.37 2.42 1.08 3.2.71.77 1.71 1.17 2.99 1.18l1.33-.12c.43-.08.79-.19 1.1-.32zm5.5-5.48h3.5v1.33H17v3.45l2 .1v1.27l-3.5-.1v-4.72H14v-1.33h3zm-1 0v1.33h-2v-1.33h2zm0 2.66v1.34h-2v-1.34h2zm0 2.67V17h-2v-1.18h2z"/></svg>
+                     <% } else if(tab.icon === 'php'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105 1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12 6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327 1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476 1.002.33 1.752a2.836 2.836 0 01-.305.847c-.143.255-.33.49-.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327 1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-1.389zm7.597-2.465a2.782 2.782 0 01-.305.847c-.143.255-.33.49-.561.703a2.44 2.44 0 01-.917.551c-.336.108-.765.164-1.286.164h-1.18l-.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477 1.001.331 1.751zm-2.595-1.382h-.943l-.516 2.648h.838c.557 0 .971-.105 1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-.29-1.047-.29z"/></svg>
+                     <% } else if(tab.icon === 'ruby'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M20.156.083c3.033.525 3.893 2.598 3.829 4.77L24 4.822 22.635 22.71 4.89 23.926h.016C3.433 23.864.15 23.729 0 19.139l1.645-3 2.819 6.586.503 1.172 2.805-9.144-.03.007.016-.03 9.255 2.956-1.396-5.431-.99-3.9 8.82-.569-.615-.51L16.5 2.114 20.159.073l-.003.01zM0 19.089v.026-.029.003zM5.13 5.073c3.561-3.533 8.157-5.621 9.922-3.84 1.762 1.777-.105 6.105-3.673 9.636-3.563 3.532-8.103 5.734-9.864 3.957-1.766-1.777.045-6.217 3.612-9.75l.003-.003z"/></svg>
+                     <% } else if(tab.icon === 'rust'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M23.687 11.709l-.995-.616a13.559 13.559 0 00-.028-.29l.855-.797a.344.344 0 00-.114-.571l-1.093-.409a8.392 8.392 0 00-.086-.282l.682-.947a.344.344 0 00-.199-.54l-1.135-.228a8.344 8.344 0 00-.14-.261l.48-1.066a.344.344 0 00-.276-.477l-1.149-.044a7.373 7.373 0 00-.192-.227l.258-1.151a.344.344 0 00-.348-.389l-1.136.14a6.4 6.4 0 00-.238-.18l.024-1.186a.344.344 0 00-.41-.281l-1.097.32a5.7 5.7 0 00-.275-.12l-.212-1.178a.344.344 0 00-.46-.157l-1.028.494a4.87 4.87 0 00-.3-.054l-.441-1.129a.344.344 0 00-.494-.023l-.935.657a3.787 3.787 0 00-.315.015l-.66-1.038a.344.344 0 00-.512.114l-.817.802a3.453 3.453 0 00-.318.084l-.86-.911a.344.344 0 00-.512.234l-.68.932a3.29 3.29 0 00-.304.152l-1.033-.744a.344.344 0 00-.493.342l-.524 1.04a3.29 3.29 0 00-.275.216l-1.168-.54a.344.344 0 00-.457.43l-.353 1.124a3.453 3.453 0 00-.233.275l-1.262-.3a.344.344 0 00-.404.498l-.168 1.178a3.787 3.787 0 00-.178.322l-1.315-.032a.344.344 0 00-.333.547l.025 1.2a4.87 4.87 0 00-.113.354l-1.325.241a.344.344 0 00-.248.576l.227 1.19a5.7 5.7 0 00-.04.373l-1.29.513a.344.344 0 00-.151.583l.422 1.147a6.4 6.4 0 00.038.38l-1.212.77a.344.344 0 00-.046.57l.605 1.072a7.373 7.373 0 00.116.371l-1.094 1.008a.344.344 0 00.06.538l.771.967a8.344 8.344 0 00.19.348l-.94 1.218a.344.344 0 00.163.486l.915.836a8.392 8.392 0 00.259.31l-.756 1.393a.344.344 0 00.258.415l1.03.68c.1.09.202.178.307.264l-.544 1.53a.344.344 0 00.342.327l1.115.504a13.559 13.559 0 00.173.12l-.312 1.63a.344.344 0 00.413.223l1.17.307a14.195 14.195 0 00.22.085l-.067 1.688a.344.344 0 00.469.106l1.193.094a14.718 14.718 0 00.253.044l.184 1.7a.344.344 0 00.508-.016l1.184-.128a14.94 14.94 0 00.273-.003l.432 1.667a.344.344 0 00.528-.136l1.142-.347a14.862 14.862 0 00.282-.053l.67 1.588a.344.344 0 00.53-.246l1.072-.56a14.49 14.49 0 00.278-.105l.893 1.465a.344.344 0 00.512-.343l.972-.76a13.844 13.844 0 00.262-.156l1.095 1.3a.344.344 0 00.475-.425l.85-.943c.08-.063.157-.127.234-.192l1.27 1.094a.344.344 0 00.422-.49l.706-1.105a12.656 12.656 0 00.197-.225l1.412.853a.344.344 0 00.354-.538l.544-1.24c.058-.084.115-.17.17-.255l1.521.583a.344.344 0 00.27-.567l.367-1.346c.047-.092.092-.185.136-.279l1.59.293a.344.344 0 00.176-.575l.18-1.418a9.903 9.903 0 00.094-.3l1.62-.008a.344.344 0 00.076-.56l-.013-1.455a9.245 9.245 0 00.045-.315l1.607-.307a.344.344 0 00-.028-.522l-.206-1.457c.005-.109.007-.218.007-.328l1.553-.595a.344.344 0 00-.13-.461zM12 16.874a4.874 4.874 0 110-9.748 4.874 4.874 0 010 9.748z"/></svg>
+                     <% } else if(tab.icon === 'powershell'){ %>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M23.181 2.974c.568 0 .923.463.792 1.035l-3.659 15.982c-.13.572-.697 1.035-1.265 1.035H.819c-.568 0-.923-.463-.792-1.035L3.686 4.009c.13-.572.697-1.035 1.265-1.035h18.23zm-8.375 12.15c0-.292-.123-.559-.322-.744l.004.004-5.444-4.678c-.162-.144-.373-.232-.605-.232-.506 0-.916.41-.916.916 0 .272.119.516.307.684l-.002-.002 4.453 3.832-4.453 3.832c-.188.166-.307.41-.307.684 0 .506.41.916.916.916.232 0 .443-.088.605-.232l5.444-4.678c.2-.186.323-.453.323-.746v-.556h-.003zm.62 2.406c0-.355.288-.644.644-.644h4.023c.355 0 .644.288.644.644 0 .355-.288.644-.644.644h-4.023a.644.644 0 01-.644-.644z"/></svg>
+                     <% } %>
+                  </span>
+                  <span><%= tab.name %></span>
+               </button>
+            <% }); %>
+         </div>
+      </div>
+   </div>
+
+   <!-- Code Panels -->
+   <div class="rounded-b-xl bg-slate-900 border border-slate-700/50 border-t-0 overflow-hidden min-w-0">
+      <% tabs.forEach((tab, index) => { %>
+         <div
+            role="tabpanel"
+            id="<%= uniqueId %>-panel-<%= tab.id %>"
+            aria-labelledby="<%= uniqueId %>-tab-<%= tab.id %>"
+            class="code-panel relative min-w-0 w-full <%= index === 0 ? '' : 'hidden' %>"
+            data-panel-id="<%= tab.id %>"
+         >
+            <% if(tab.isPreview) { %>
+               <!-- Request Preview Panel -->
+               <button
+                  class="copy-btn-tabs"
+                  onclick="copyPreviewFromPanel(this)"
+                  aria-label="Copy request"
+               >
+                  <svg class="copy-icon w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                  </svg>
+                  <svg class="check-icon w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                  </svg>
+                  <span class="copy-text">Copy</span>
+               </button>
+               <div class="code-content p-4 w-full max-w-full overflow-hidden" style="min-height: 200px;">
+                  <!-- Headers Section -->
+                  <div class="mb-4">
+                     <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Headers</div>
+                     <div class="bg-slate-800/50 rounded-lg p-3 border border-slate-700/50 overflow-hidden">
+                        <pre class="text-sm text-slate-300 font-mono whitespace-pre-wrap m-0 preview-headers overflow-x-auto"><%= codeExamples.requestPreview.headers %></pre>
+                     </div>
+                  </div>
+                  <% if(codeExamples.requestPreview.body) { %>
+                  <!-- Body Section -->
+                  <div>
+                     <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Body</div>
+                     <div class="bg-slate-800/50 rounded-lg p-3 border border-slate-700/50 overflow-hidden">
+                        <pre class="text-sm leading-relaxed m-0 overflow-x-auto"><code class="language-json preview-body"><%= codeExamples.requestPreview.body %></code></pre>
+                     </div>
+                  </div>
+                  <% } %>
+               </div>
+            <% } else { %>
+               <!-- Code Panel -->
+               <button
+                  class="copy-btn-tabs"
+                  onclick="copyCodeFromPanel(this)"
+                  aria-label="Copy code"
+               >
+                  <svg class="copy-icon w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                  </svg>
+                  <svg class="check-icon w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                  </svg>
+                  <span class="copy-text">Copy</span>
+               </button>
+               <div class="code-content w-full max-w-full overflow-hidden" style="min-height: 200px;">
+                  <pre class="overflow-x-auto p-4 text-sm leading-relaxed m-0 w-full max-w-full"><code class="language-<%= tab.id === 'javascript' || tab.id === 'typescript' ? 'javascript' : (tab.id === 'python' ? 'python' : (tab.id === 'go' ? 'go' : (tab.id === 'ruby' ? 'ruby' : (tab.id === 'rust' ? 'rust' : (tab.id === 'powershell' ? 'powershell' : (tab.id === 'java' ? 'java' : (tab.id === 'csharp' ? 'csharp' : (tab.id === 'php' ? 'php' : 'bash')))))))) %>"><%= codeExamples[tab.id] %></code></pre>
+               </div>
+            <% } %>
+         </div>
+      <% }); %>
+   </div>
+</div>
+
+<script>
+function switchCodeTab(containerId, tabId) {
+   // Update all code-tabs-containers on the page
+   document.querySelectorAll('.code-tabs-container').forEach(container => {
+      // Update tabs
+      container.querySelectorAll('.code-tab').forEach(tab => {
+         const isActive = tab.dataset.tabId === tabId;
+         tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+
+         // Update tab styling
+         if (isActive) {
+            tab.classList.remove('text-slate-400', 'hover:text-slate-300', 'hover:bg-slate-800/30');
+            tab.classList.add('text-indigo-400', 'bg-slate-800/50');
+         } else {
+            tab.classList.add('text-slate-400', 'hover:text-slate-300', 'hover:bg-slate-800/30');
+            tab.classList.remove('text-indigo-400', 'bg-slate-800/50');
+         }
+      });
+
+      // Update panels
+      container.querySelectorAll('.code-panel').forEach(panel => {
+         if (panel.dataset.panelId === tabId) {
+            panel.classList.remove('hidden');
+            // Apply syntax highlighting to code blocks
+            panel.querySelectorAll('pre code').forEach((block) => {
+               if (window.hljs && !block.dataset.highlighted) {
+                  hljs.highlightElement(block);
+                  block.dataset.highlighted = 'true';
+               }
+            });
+         } else {
+            panel.classList.add('hidden');
+         }
+      });
+   });
+
+   // Store preference in localStorage (only for non-preview tabs)
+   if (tabId !== 'preview') {
+      try {
+         localStorage.setItem('preferred-code-lang', tabId);
+      } catch (e) {}
+   }
+}
+
+function copyCodeFromPanel(btn) {
+   const panel = btn.closest('.code-panel');
+   const code = panel.querySelector('code');
+   if (code) {
+      navigator.clipboard.writeText(code.textContent).then(() => {
+         showCopySuccess(btn);
+      });
+   }
+}
+
+function copyPreviewFromPanel(btn) {
+   const panel = btn.closest('.code-panel');
+   const headers = panel.querySelector('.preview-headers');
+   const body = panel.querySelector('.preview-body');
+
+   let textToCopy = '';
+   if (headers) {
+      textToCopy += headers.textContent;
+   }
+   if (body) {
+      textToCopy += '\n\n' + body.textContent;
+   }
+
+   navigator.clipboard.writeText(textToCopy).then(() => {
+      showCopySuccess(btn);
+   });
+}
+
+function showCopySuccess(btn) {
+   const copyIcon = btn.querySelector('.copy-icon');
+   const checkIcon = btn.querySelector('.check-icon');
+   const copyText = btn.querySelector('.copy-text');
+
+   copyIcon.classList.add('hidden');
+   checkIcon.classList.remove('hidden');
+   copyText.textContent = 'Copied!';
+   btn.classList.add('copied');
+
+   setTimeout(() => {
+      copyIcon.classList.remove('hidden');
+      checkIcon.classList.add('hidden');
+      copyText.textContent = 'Copy';
+      btn.classList.remove('copied');
+   }, 2000);
+}
+
+// Apply syntax highlighting and stored language preference on page load
+document.addEventListener('DOMContentLoaded', function() {
+   // Wait a bit for all scripts to load, then highlight all code blocks
+   setTimeout(function() {
+      if (window.hljs) {
+         // Highlight ALL code blocks (including hidden ones)
+         document.querySelectorAll('pre code').forEach((block) => {
+            if (!block.classList.contains('hljs')) {
+               hljs.highlightElement(block);
+            }
+         });
+      }
+
+      // Apply stored preference if exists
+      try {
+         const preferred = localStorage.getItem('preferred-code-lang');
+         if (preferred && preferred !== 'preview') {
+            // Switch all containers to the preferred language
+            document.querySelectorAll('.code-tabs-container').forEach(container => {
+               const tab = container.querySelector(`[data-tab-id="${preferred}"]`);
+               if (tab) {
+                  switchCodeTab(container.id, preferred);
+               }
+            });
+         }
+      } catch (e) {}
+   }, 100);
+});
+</script>

APIReference/views/partials/code.ejs

@@ -1,33 +1,63 @@
-<div class="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md  ">
-    <div class="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4  ">
-       <h4 class="mr-auto text-xs font-semibold text-white mt-5"><%= title -%></h4>
+<div class="not-prose my-6 overflow-hidden rounded-xl bg-slate-900 shadow-lg ring-1 ring-slate-800/50 code-block-wrapper">
+    <div class="flex min-h-[calc(theme(spacing.11)+1px)] flex-wrap items-center gap-x-4 border-b border-slate-700/50 bg-slate-800/50 px-3 sm:px-4">
+       <h4 class="mr-auto text-xs font-semibold text-slate-300 tracking-wide"><%= title -%></h4>
+       <button class="copy-btn-response" onclick="copyCodeBlock(this)" aria-label="Copy code">
+          <svg class="copy-icon w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+          </svg>
+          <svg class="check-icon w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+          </svg>
+          <span class="copy-text">Copy</span>
+       </button>
     </div>
-    <div class="group ">
-      
-      
+    <div class="group">
       <% if(requestType && requestUrl){ %>
-         
-      <div class="flex h-9 items-center gap-2 border-b-white/7.5 bg-zinc-900 bg-white/2.5 px-4  ">
+      <div class="flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-3 py-2 sm:py-0 sm:h-10 border-b border-slate-700/30 bg-slate-800/30 px-3 sm:px-4">
          <% if( requestType === "GET"){ %>
-            <div class="dark flex"><span class="font-mono text-sm font-semibold leading-6 text-emerald-500 ">GET</span></div>
-          <% } %>  
+            <span class="inline-flex items-center rounded-md bg-emerald-500/10 px-2 py-1 text-xs font-semibold text-emerald-400 ring-1 ring-inset ring-emerald-500/20 flex-shrink-0">GET</span>
+          <% } %>
           <% if( requestType === "POST"){ %>
-            <div class="dark flex"><span class="font-mono text-sm font-semibold leading-6 text-sky-500 ">POST</span></div>
-          <% } %>  
+            <span class="inline-flex items-center rounded-md bg-indigo-500/10 px-2 py-1 text-xs font-semibold text-indigo-400 ring-1 ring-inset ring-indigo-500/20 flex-shrink-0">POST</span>
+          <% } %>
           <% if( requestType === "DELETE"){ %>
-            <div class="dark flex"><span class="font-mono text-sm font-semibold leading-6 text-red-500 ">DELETE</span></div>
-          <% } %> 
+            <span class="inline-flex items-center rounded-md bg-red-500/10 px-2 py-1 text-xs font-semibold text-red-400 ring-1 ring-inset ring-red-500/20 flex-shrink-0">DELETE</span>
+          <% } %>
           <% if( requestType === "PUT"){ %>
-            <div class="dark flex"><span class="font-mono text-sm font-semibold leading-6 text-amber-500 ">PUT</span></div>
-          <% } %> 
-         <span class="h-0.5 w-0.5 rounded-full bg-zinc-500"></span><span class="font-mono text-sm text-zinc-300"><%= requestUrl -%></span>
+            <span class="inline-flex items-center rounded-md bg-amber-500/10 px-2 py-1 text-xs font-semibold text-amber-400 ring-1 ring-inset ring-amber-500/20 flex-shrink-0">PUT</span>
+          <% } %>
+         <span class="font-mono text-xs sm:text-sm text-slate-400 break-all"><%= requestUrl -%></span>
       </div>
-      
-       <% } %>  
+       <% } %>
        <% if(code){ %>
        <div class="relative">
-          <pre class="overflow-x-auto p-4 text-xs text-white"><code class="text-sm"><%= code -%></code></pre>
+          <pre class="overflow-x-auto p-4 text-sm text-slate-300 leading-relaxed"><code class="language-json text-sm"><%= code -%></code></pre>
        </div>
-       <% } %>  
+       <% } %>
     </div>
- </div>
+</div>
+<script>
+function copyCodeBlock(btn) {
+   const codeBlock = btn.closest('.code-block-wrapper');
+   const code = codeBlock.querySelector('code');
+   if (code) {
+      navigator.clipboard.writeText(code.textContent).then(() => {
+         const copyIcon = btn.querySelector('.copy-icon');
+         const checkIcon = btn.querySelector('.check-icon');
+         const copyText = btn.querySelector('.copy-text');
+
+         copyIcon.classList.add('hidden');
+         checkIcon.classList.remove('hidden');
+         copyText.textContent = 'Copied!';
+         btn.classList.add('copied');
+
+         setTimeout(() => {
+            copyIcon.classList.remove('hidden');
+            checkIcon.classList.add('hidden');
+            copyText.textContent = 'Copy';
+            btn.classList.remove('copied');
+         }, 2000);
+      });
+   }
+}
+</script>

APIReference/views/partials/footer.ejs

@@ -1,31 +1,41 @@
-<footer class="mx-auto max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
-    
-    
-    <div
-       class="flex flex-col items-center justify-between gap-5 border-t border-zinc-900/5 pt-8  sm:flex-row">
-       <p class="text-xs text-zinc-600 ">
-          OneUptime documentation is under MIT license. Please feel free to contribute and improve it on GitHub.
-       </p>
-       <div class="flex gap-4">
-          <a class="group" href="https://twitter.com/OneUptimeHQ" target="_blank">
-             <span class="sr-only">Follow us on Twitter</span>
-             <svg viewBox="0 0 20 20" aria-hidden="true"
-                class="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 :fill-zinc-500">
-                <path
-                   d="M16.712 6.652c.01.146.01.29.01.436 0 4.449-3.267 9.579-9.242 9.579v-.003a8.963 8.963 0 0 1-4.98-1.509 6.379 6.379 0 0 0 4.807-1.396c-1.39-.027-2.608-.966-3.035-2.337.487.097.99.077 1.467-.059-1.514-.316-2.606-1.696-2.606-3.3v-.041c.45.26.956.404 1.475.42C3.18 7.454 2.74 5.486 3.602 3.947c1.65 2.104 4.083 3.382 6.695 3.517a3.446 3.446 0 0 1 .94-3.217 3.172 3.172 0 0 1 4.596.148 6.38 6.38 0 0 0 2.063-.817 3.357 3.357 0 0 1-1.428 1.861 6.283 6.283 0 0 0 1.865-.53 6.735 6.735 0 0 1-1.62 1.744Z">
-                </path>
-             </svg>
-          </a>
-          <a class="group" href="https://github.com/oneuptime/oneuptime" target="_blank">
-             <span class="sr-only">Follow us on GitHub</span>
-             <svg viewBox="0 0 20 20" aria-hidden="true"
-                class="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 :fill-zinc-500">
-                <path fill-rule="evenodd" clip-rule="evenodd"
-                   d="M10 1.667c-4.605 0-8.334 3.823-8.334 8.544 0 3.78 2.385 6.974 5.698 8.106.417.075.573-.182.573-.406 0-.203-.011-.875-.011-1.592-2.093.397-2.635-.522-2.802-1.002-.094-.246-.5-1.005-.854-1.207-.291-.16-.708-.556-.01-.567.656-.01 1.124.62 1.281.876.75 1.292 1.948.93 2.427.705.073-.555.291-.93.531-1.143-1.854-.213-3.791-.95-3.791-4.218 0-.929.322-1.698.854-2.296-.083-.214-.375-1.09.083-2.265 0 0 .698-.224 2.292.876a7.576 7.576 0 0 1 2.083-.288c.709 0 1.417.096 2.084.288 1.593-1.11 2.291-.875 2.291-.875.459 1.174.167 2.05.084 2.263.53.599.854 1.357.854 2.297 0 3.278-1.948 4.005-3.802 4.219.302.266.563.78.563 1.58 0 1.143-.011 2.061-.011 2.35 0 .224.156.491.573.405a8.365 8.365 0 0 0 4.11-3.116 8.707 8.707 0 0 0 1.567-4.99c0-4.721-3.73-8.545-8.334-8.545Z">
-                </path>
-             </svg>
-          </a>
-          
+<footer class="mx-auto w-full space-y-10 pb-16">
+    <div class="mt-12 sm:mt-16 pt-8 border-t border-slate-200">
+       <div class="rounded-xl bg-gradient-to-r from-slate-50 to-slate-100/50 p-4 sm:p-6 ring-1 ring-slate-200/50">
+          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+             <div class="flex items-center gap-4">
+                <div class="flex-shrink-0 rounded-lg bg-indigo-100 p-2.5">
+                   <svg class="h-5 w-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+                   </svg>
+                </div>
+                <div>
+                   <h3 class="text-sm font-semibold text-slate-900 mb-1">Open Source</h3>
+                   <p class="text-sm text-slate-600 leading-relaxed">
+                      OneUptime API documentation is under Apache 2.0 license. Contribute on GitHub.
+                   </p>
+                </div>
+             </div>
+             <div class="flex gap-3">
+                <a class="group flex items-center justify-center w-9 h-9 rounded-lg bg-white ring-1 ring-slate-200 hover:ring-indigo-300 hover:bg-indigo-50 transition-all" href="https://twitter.com/OneUptimeHQ" target="_blank">
+                   <span class="sr-only">Follow us on Twitter</span>
+                   <svg viewBox="0 0 20 20" aria-hidden="true"
+                      class="h-4 w-4 fill-slate-500 transition group-hover:fill-indigo-600">
+                      <path
+                         d="M16.712 6.652c.01.146.01.29.01.436 0 4.449-3.267 9.579-9.242 9.579v-.003a8.963 8.963 0 0 1-4.98-1.509 6.379 6.379 0 0 0 4.807-1.396c-1.39-.027-2.608-.966-3.035-2.337.487.097.99.077 1.467-.059-1.514-.316-2.606-1.696-2.606-3.3v-.041c.45.26.956.404 1.475.42C3.18 7.454 2.74 5.486 3.602 3.947c1.65 2.104 4.083 3.382 6.695 3.517a3.446 3.446 0 0 1 .94-3.217 3.172 3.172 0 0 1 4.596.148 6.38 6.38 0 0 0 2.063-.817 3.357 3.357 0 0 1-1.428 1.861 6.283 6.283 0 0 0 1.865-.53 6.735 6.735 0 0 1-1.62 1.744Z">
+                      </path>
+                   </svg>
+                </a>
+                <a class="group flex items-center justify-center w-9 h-9 rounded-lg bg-white ring-1 ring-slate-200 hover:ring-indigo-300 hover:bg-indigo-50 transition-all" href="https://github.com/oneuptime/oneuptime" target="_blank">
+                   <span class="sr-only">Follow us on GitHub</span>
+                   <svg viewBox="0 0 20 20" aria-hidden="true"
+                      class="h-4 w-4 fill-slate-500 transition group-hover:fill-indigo-600">
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                         d="M10 1.667c-4.605 0-8.334 3.823-8.334 8.544 0 3.78 2.385 6.974 5.698 8.106.417.075.573-.182.573-.406 0-.203-.011-.875-.011-1.592-2.093.397-2.635-.522-2.802-1.002-.094-.246-.5-1.005-.854-1.207-.291-.16-.708-.556-.01-.567.656-.01 1.124.62 1.281.876.75 1.292 1.948.93 2.427.705.073-.555.291-.93.531-1.143-1.854-.213-3.791-.95-3.791-4.218 0-.929.322-1.698.854-2.296-.083-.214-.375-1.09.083-2.265 0 0 .698-.224 2.292.876a7.576 7.576 0 0 1 2.083-.288c.709 0 1.417.096 2.084.288 1.593-1.11 2.291-.875 2.291-.875.459 1.174.167 2.05.084 2.263.53.599.854 1.357.854 2.297 0 3.278-1.948 4.005-3.802 4.219.302.266.563.78.563 1.58 0 1.143-.011 2.061-.011 2.35 0 .224.156.491.573.405a8.365 8.365 0 0 0 4.11-3.116 8.707 8.707 0 0 0 1.567-4.99c0-4.721-3.73-8.545-8.334-8.545Z">
+                      </path>
+                   </svg>
+                </a>
+             </div>
+          </div>
        </div>
     </div>
- </footer>
+</footer>

APIReference/views/partials/head.ejs

@@ -4,90 +4,377 @@
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
       rel="stylesheet">
 
-   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-   <script>hljs.highlightAll();</script>
+   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+   <!-- Load additional language support -->
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/java.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/csharp.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/php.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/ruby.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/rust.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/powershell.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/typescript.min.js"></script>
 
+   <script src="https://cdn.tailwindcss.com"></script>
 
    <script>
       function applyStyles() {
-         applyStylesTo("h1", "font-bold text-2xl mb-5")
-         applyStylesTo("h2", "mb-5 scroll-mt-24 mt-24 font-bold text-xl")
-         applyStylesTo("h3", "mb-5 scroll-mt-24 mt-10 font-bold text-base")
-         applyStylesTo("p", "mb-5")
-         applyStylesTo("link", "text-emerald-500 hover:text-emerald-600")
-         applyStylesTo("model-inline-code", "rounded p-0.5 px-1 text-sm text-gray-50 bg-gray-600 border-2 border-gray-600 shadow")
-         applyStylesTo("inline-code", "rounded p-0.5 px-1 text-sm text-gray-500 bg-gray-100 border-2 border-gray-200")
+         applyStylesTo("h1", "font-bold text-2xl mb-6 text-slate-900 tracking-tight")
+         applyStylesTo("h2", "mb-5 scroll-mt-24 mt-16 font-semibold text-xl text-slate-900 tracking-tight")
+         applyStylesTo("h3", "mb-4 scroll-mt-24 mt-10 font-semibold text-base text-slate-800")
+         applyStylesTo("p", "mb-5 text-slate-600 leading-7")
+         applyStylesTo("link", "text-indigo-600 hover:text-indigo-700 font-medium transition-colors")
+         applyStylesTo("model-inline-code", "rounded-md py-0.5 px-1.5 text-sm font-medium text-slate-700 bg-slate-100 border border-slate-200")
+         applyStylesTo("inline-code", "rounded-md py-0.5 px-1.5 text-sm font-medium text-slate-700 bg-slate-100 border border-slate-200")
       }
 
       function applyStylesTo(tagOrClassName, classList) {
-         
-         
          let elements = document.getElementsByClassName(tagOrClassName);
-
          if(elements.length === 0){
             elements = document.getElementsByTagName(tagOrClassName);
          }
-
          for (var i = 0, all = elements.length; i < all; i++) {
             classList.split(" ").map((classItem)=> {
                elements[i].classList.add(classItem);
             })
          }
       }
-
-
    </script>
 
    <style>
-      .hljs {
-         color: unset;
-         background-color: unset;
-      }
-
-      .hljs-string {
-         color: #6ee7b7
-      }
-
-      .hljs-number {
-         color: #7dd3fc
-      }
-
-      .hljs-punctuation {
-         color: #e5e7eb
-      }
-
-      .hljs-comment {
-         color: #9ca3af
-      }
-
-      .hljs-keyword{
-         color: #7dd3fc;
-         font-weight: unset;
-      }
-
-      .hljs-attr{
-         color: #fda4af;
-      }
-
       * {
-         font-family: Inter;
+         font-family: 'Inter', system-ui, -apple-system, sans-serif;
       }
 
+      html {
+         scroll-behavior: smooth;
+         -webkit-font-smoothing: antialiased;
+         -moz-osx-font-smoothing: grayscale;
+      }
 
-      input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+      /* Better prose styling */
+      .prose p {
+         color: #475569;
+         line-height: 1.75;
+      }
+
+      .prose .lead {
+         font-size: 1.125rem;
+         color: #64748b;
+         line-height: 1.75;
+      }
+
+      .prose hr {
+         border-color: #e2e8f0;
+         margin-top: 2.5rem;
+         margin-bottom: 2.5rem;
+      }
+
+      .prose ul {
+         list-style: none;
+         padding: 0;
+      }
+
+      /* Syntax highlighting - comprehensive token styles */
+      .hljs {
+         background: transparent !important;
+      }
+
+      /* Keywords: import, from, def, class, if, else, for, while, return, etc. */
+      .hljs-keyword,
+      .hljs-built_in,
+      .hljs-type,
+      .hljs-literal,
+      .hljs-symbol {
+         color: #c792ea !important;
+      }
+
+      /* Strings */
+      .hljs-string,
+      .hljs-doctag,
+      .hljs-regexp {
+         color: #c3e88d !important;
+      }
+
+      /* Numbers */
+      .hljs-number {
+         color: #f78c6c !important;
+      }
+
+      /* Comments */
+      .hljs-comment {
+         color: #676e95 !important;
+         font-style: italic;
+      }
+
+      /* Function/method names */
+      .hljs-title,
+      .hljs-title.function_,
+      .hljs-title.class_ {
+         color: #82aaff !important;
+      }
+
+      /* Variables and parameters */
+      .hljs-variable,
+      .hljs-params,
+      .hljs-attr {
+         color: #f07178 !important;
+      }
+
+      /* Properties and attributes */
+      .hljs-property,
+      .hljs-attribute {
+         color: #ffcb6b !important;
+      }
+
+      /* Punctuation */
+      .hljs-punctuation {
+         color: #89ddff !important;
+      }
+
+      /* Operators */
+      .hljs-operator {
+         color: #89ddff !important;
+      }
+
+      /* Meta/preprocessor */
+      .hljs-meta {
+         color: #ffcb6b !important;
+      }
+
+      /* Section headers */
+      .hljs-section {
+         color: #82aaff !important;
+      }
+
+      /* Names (function calls, etc) */
+      .hljs-name {
+         color: #f07178 !important;
+      }
+
+      /* Selector tags in CSS */
+      .hljs-selector-tag,
+      .hljs-selector-class,
+      .hljs-selector-id {
+         color: #c792ea !important;
+      }
+
+      /* Template variables */
+      .hljs-template-variable {
+         color: #f07178 !important;
+      }
+
+      /* Deletion/addition in diffs */
+      .hljs-deletion {
+         color: #f07178 !important;
+      }
+
+      .hljs-addition {
+         color: #c3e88d !important;
+      }
+
+      /* Custom scrollbar */
+      ::-webkit-scrollbar {
+         width: 6px;
+         height: 6px;
+      }
+      ::-webkit-scrollbar-track {
          background: transparent;
-         bottom: 0;
-         color: transparent;
-         cursor: pointer;
-         height: auto;
-         left: 0;
-         position: absolute;
-         right: 0;
-         top: 0;
-         width: auto;
+      }
+      ::-webkit-scrollbar-thumb {
+         background: #e2e8f0;
+         border-radius: 3px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+         background: #cbd5e1;
       }
 
+      /* Code block copy button */
+      .code-block-wrapper {
+         position: relative;
+      }
+
+      /* Response block copy button */
+      .copy-btn-response {
+         display: flex;
+         align-items: center;
+         gap: 6px;
+         padding: 6px 12px;
+         font-size: 12px;
+         font-weight: 500;
+         color: #94a3b8;
+         background: rgba(30, 41, 59, 0.6);
+         border: 1px solid #334155;
+         border-radius: 6px;
+         cursor: pointer;
+         transition: all 0.15s ease;
+      }
+      .copy-btn-response:hover {
+         color: #f1f5f9;
+         background: #334155;
+         border-color: #475569;
+      }
+      .copy-btn-response.copied {
+         color: #22c55e;
+         border-color: #22c55e;
+         background: rgba(34, 197, 94, 0.1);
+      }
+
+      /* Code tabs styling */
+      .code-tabs-container {
+         --tab-hover-bg: rgba(30, 41, 59, 0.5);
+      }
+
+      .code-tab {
+         position: relative;
+         border-bottom: 2px solid transparent;
+      }
+
+      .code-tab[aria-selected="true"] {
+         border-bottom-color: #6366f1;
+      }
+
+      .code-panel {
+         position: relative;
+      }
+
+      .copy-btn-tabs {
+         position: absolute;
+         top: 12px;
+         right: 12px;
+         display: flex;
+         align-items: center;
+         gap: 6px;
+         padding: 6px 12px;
+         font-size: 12px;
+         font-weight: 500;
+         color: #94a3b8;
+         background: rgba(30, 41, 59, 0.9);
+         border: 1px solid #334155;
+         border-radius: 6px;
+         cursor: pointer;
+         opacity: 0;
+         transition: all 0.15s ease;
+         z-index: 10;
+         backdrop-filter: blur(4px);
+      }
+
+      .code-panel:hover .copy-btn-tabs {
+         opacity: 1;
+      }
+
+      .copy-btn-tabs:hover {
+         color: #f1f5f9;
+         background: #334155;
+         border-color: #475569;
+      }
+
+      .copy-btn-tabs.copied {
+         color: #22c55e;
+         border-color: #22c55e;
+         background: rgba(34, 197, 94, 0.1);
+      }
+
+      /* Code content min-height for consistent sizing */
+      .code-content {
+         min-height: 200px;
+      }
+
+      /* Fix code tabs width - prevent content from expanding container */
+      .code-tabs-container {
+         width: 100%;
+         max-width: 100%;
+         overflow: hidden;
+      }
+
+      .code-tabs-container pre {
+         width: 0;
+         min-width: 100%;
+         overflow-x: auto;
+      }
+
+      .code-panel {
+         width: 100%;
+         max-width: 100%;
+         overflow: hidden;
+      }
+
+      .code-content {
+         width: 100%;
+         max-width: 100%;
+         overflow: hidden;
+      }
+
+      .code-content pre code {
+         display: block;
+         white-space: pre;
+         word-wrap: normal;
+      }
+
+      /* Hide scrollbar for tabs but keep functionality */
+      .scrollbar-hide {
+         -ms-overflow-style: none;
+         scrollbar-width: none;
+      }
+      .scrollbar-hide::-webkit-scrollbar {
+         display: none;
+      }
+
+      /* Tab indicator animation */
+      .tab-indicator {
+         transition: all 0.2s ease;
+      }
+
+      /* Code panel base styles */
+      .code-panel pre {
+         margin: 0;
+         background: transparent;
+      }
+
+      .code-panel code {
+         font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
+         font-size: 13px;
+         line-height: 1.6;
+         color: #e2e8f0;
+      }
+
+      /* Better focus states */
+      a:focus-visible, button:focus-visible {
+         outline: 2px solid #6366f1;
+         outline-offset: 2px;
+         border-radius: 4px;
+      }
+
+      /* Smooth transitions */
+      a, button {
+         transition: all 0.15s ease;
+      }
+
+      /* Property list styling */
+      .property-item {
+         padding: 1rem 0;
+         border-bottom: 1px solid #f1f5f9;
+      }
+      .property-item:last-child {
+         border-bottom: none;
+      }
+
+      /* Endpoint card styling */
+      .endpoint-card {
+         background: linear-gradient(to right, #fafafa, white);
+         border-radius: 0.75rem;
+         padding: 1.5rem;
+         border: 1px solid #e2e8f0;
+         margin-bottom: 1.5rem;
+      }
+
+      /* Calendar picker */
+      input[type="datetime-local"]::-webkit-calendar-picker-indicator,
       input[type="date"]::-webkit-calendar-picker-indicator {
          background: transparent;
          bottom: 0;
@@ -101,7 +388,6 @@
          width: auto;
       }
    </style>
-   <script src="https://cdn.tailwindcss.com"></script>
 
    <% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %> 
 
@@ -144,7 +430,7 @@
    <meta property="og:image" content="https://oneuptime.com/img/hou-wb.svg">
 
    <meta name="twitter:card" content="summary">
-   <meta name="theme-color" content="#000000">
+   <meta name="theme-color" content="#6366f1">
    <meta name="twitter:image" content="/img/ou-wb.svg">
    <meta name="twitter:site" content="@oneuptimeinc">
    <meta name="twitter:title" content="OneUptime - One Complete Observability platform.">

APIReference/views/partials/nav.ejs

@@ -1,9 +1,92 @@
 <header class="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex">
     <div
-        class="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:px-6 lg:pt-4 lg:pb-8  xl:w-80">
-        <div class="hidden lg:flex">
+        class="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-slate-200/80 lg:px-6 lg:pt-6 lg:pb-8 xl:w-80 lg:bg-gradient-to-b lg:from-slate-50 lg:to-white">
+        <div class="hidden lg:flex lg:items-center lg:mb-8">
             <a aria-label="Home" href="/">
-                <svg class="h-6 -ml-48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                <svg class="h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 75" preserveAspectRatio="xMidYMid meet">
+                    <defs>
+                        <g></g>
+                        <clipPath id="1d83d73318">
+                            <path d="M 351.792969 35.324219 L 367.53125 35.324219 L 367.53125 51.0625 L 351.792969 51.0625 Z M 351.792969 35.324219 " clip-rule="nonzero"></path>
+                        </clipPath>
+                        <clipPath id="32c1ad7ad2">
+                            <path d="M 366.480469 51.03125 L 352.816406 51.03125 C 352.253906 51.03125 351.792969 50.574219 351.792969 50.007812 L 351.792969 36.347656 C 351.792969 35.785156 352.253906 35.324219 352.816406 35.324219 L 366.480469 35.324219 C 367.042969 35.324219 367.5 35.785156 367.5 36.347656 L 367.5 50.007812 C 367.5 50.574219 367.042969 51.03125 366.480469 51.03125 " clip-rule="nonzero"></path>
+                        </clipPath>
+                    </defs>
+                    <g clip-path="url(#1d83d73318)">
+                        <g clip-path="url(#32c1ad7ad2)">
+                            <path fill="#7ed957" d="M 351.792969 35.324219 L 367.53125 35.324219 L 367.53125 51.0625 L 351.792969 51.0625 Z M 351.792969 35.324219 " fill-opacity="1" fill-rule="nonzero"></path>
+                        </g>
+                    </g>
+                    <g fill="#121212" fill-opacity="1">
+                        <g transform="translate(11.173064, 55.95717)">
+                            <g>
+                                <path d="M 1.5625 -21.828125 C 1.5625 -25.191406 2.054688 -28.320312 3.046875 -31.21875 C 4.046875 -34.164062 5.5 -36.71875 7.40625 -38.875 C 9.3125 -41.070312 11.632812 -42.773438 14.375 -43.984375 C 15.738281 -44.597656 17.195312 -45.0625 18.75 -45.375 C 20.3125 -45.6875 21.941406 -45.84375 23.640625 -45.84375 C 25.335938 -45.84375 26.960938 -45.6875 28.515625 -45.375 C 30.078125 -45.0625 31.539062 -44.578125 32.90625 -43.921875 C 34.269531 -43.296875 35.53125 -42.546875 36.6875 -41.671875 C 37.851562 -40.804688 38.914062 -39.8125 39.875 -38.6875 C 41.78125 -36.53125 43.25 -34.003906 44.28125 -31.109375 C 45.28125 -28.203125 45.78125 -25.109375 45.78125 -21.828125 C 45.78125 -18.554688 45.28125 -15.46875 44.28125 -12.5625 C 43.957031 -11.613281 43.578125 -10.679688 43.140625 -9.765625 C 42.703125 -8.847656 42.210938 -7.984375 41.671875 -7.171875 C 41.140625 -6.367188 40.5625 -5.597656 39.9375 -4.859375 C 38.976562 -3.734375 37.90625 -2.734375 36.71875 -1.859375 C 35.539062 -0.992188 34.289062 -0.25 32.96875 0.375 C 30.226562 1.65625 27.113281 2.296875 23.625 2.296875 C 20.144531 2.296875 17.039062 1.65625 14.3125 0.375 C 13.644531 0.0390625 13 -0.3125 12.375 -0.6875 C 11.757812 -1.0625 11.160156 -1.460938 10.578125 -1.890625 C 9.992188 -2.328125 9.429688 -2.796875 8.890625 -3.296875 C 8.359375 -3.796875 7.863281 -4.316406 7.40625 -4.859375 C 5.5 -7.054688 4.046875 -9.625 3.046875 -12.5625 C 2.054688 -15.46875 1.5625 -18.554688 1.5625 -21.828125 Z M 10.703125 -21.828125 C 10.703125 -20.796875 10.773438 -19.769531 10.921875 -18.75 C 11.066406 -17.738281 11.28125 -16.734375 11.5625 -15.734375 C 11.894531 -14.785156 12.269531 -13.882812 12.6875 -13.03125 C 13.101562 -12.175781 13.601562 -11.378906 14.1875 -10.640625 C 14.351562 -10.390625 14.535156 -10.160156 14.734375 -9.953125 C 14.941406 -9.742188 15.148438 -9.535156 15.359375 -9.328125 C 15.566406 -9.117188 15.785156 -8.910156 16.015625 -8.703125 C 16.242188 -8.492188 16.484375 -8.304688 16.734375 -8.140625 C 16.984375 -7.984375 17.234375 -7.820312 17.484375 -7.65625 C 17.734375 -7.488281 17.976562 -7.320312 18.21875 -7.15625 C 19.800781 -6.320312 21.609375 -5.90625 23.640625 -5.90625 C 24.378906 -5.90625 25.082031 -5.945312 25.75 -6.03125 C 26.414062 -6.113281 27.035156 -6.25 27.609375 -6.4375 C 28.191406 -6.625 28.734375 -6.84375 29.234375 -7.09375 C 30.847656 -7.875 32.195312 -8.953125 33.28125 -10.328125 C 33.65625 -10.785156 33.984375 -11.269531 34.265625 -11.78125 C 34.554688 -12.300781 34.828125 -12.863281 35.078125 -13.46875 C 35.328125 -14.070312 35.554688 -14.679688 35.765625 -15.296875 C 36.347656 -17.328125 36.640625 -19.503906 36.640625 -21.828125 C 36.640625 -23.898438 36.328125 -25.894531 35.703125 -27.8125 C 35.117188 -29.71875 34.25 -31.414062 33.09375 -32.90625 C 31.96875 -34.351562 30.617188 -35.515625 29.046875 -36.390625 C 27.472656 -37.222656 25.671875 -37.640625 23.640625 -37.640625 C 23.140625 -37.640625 22.640625 -37.617188 22.140625 -37.578125 C 21.640625 -37.535156 21.160156 -37.460938 20.703125 -37.359375 C 20.253906 -37.253906 19.820312 -37.128906 19.40625 -36.984375 C 18.988281 -36.835938 18.59375 -36.660156 18.21875 -36.453125 C 17.394531 -36.078125 16.648438 -35.617188 15.984375 -35.078125 C 15.316406 -34.546875 14.71875 -33.925781 14.1875 -33.21875 C 13.0625 -31.8125 12.1875 -30.148438 11.5625 -28.234375 C 10.988281 -26.242188 10.703125 -24.109375 10.703125 -21.828125 Z M 10.703125 -21.828125 "></path>
+                            </g>
+                        </g>
+                    </g>
+                    <g fill="#121212" fill-opacity="1">
+                        <g transform="translate(58.505968, 55.95717)">
+                            <g>
+                                <path d="M 11.9375 -31.046875 C 12.269531 -31.367188 12.601562 -31.65625 12.9375 -31.90625 C 13.269531 -32.15625 13.625 -32.382812 14 -32.59375 C 16.070312 -33.957031 18.5 -34.640625 21.28125 -34.640625 C 23.3125 -34.640625 25.113281 -34.316406 26.6875 -33.671875 C 28.257812 -33.035156 29.585938 -32.078125 30.671875 -30.796875 C 32.703125 -28.304688 33.71875 -25.070312 33.71875 -21.09375 L 33.71875 1.5625 L 25 1.5625 L 25 -20.46875 C 25 -21.164062 24.945312 -21.804688 24.84375 -22.390625 C 24.738281 -22.972656 24.59375 -23.488281 24.40625 -23.9375 C 24.226562 -24.394531 23.992188 -24.789062 23.703125 -25.125 C 23.453125 -25.457031 23.171875 -25.738281 22.859375 -25.96875 C 22.546875 -26.195312 22.179688 -26.363281 21.765625 -26.46875 C 21.359375 -26.570312 20.882812 -26.625 20.34375 -26.625 C 19.59375 -26.625 18.84375 -26.476562 18.09375 -26.1875 C 17.3125 -25.894531 16.546875 -25.476562 15.796875 -24.9375 C 15.054688 -24.363281 14.351562 -23.722656 13.6875 -23.015625 C 13.4375 -22.679688 13.164062 -22.335938 12.875 -21.984375 C 12.582031 -21.628906 12.332031 -21.289062 12.125 -20.96875 L 12.125 1.5625 L 3.421875 1.5625 L 3.421875 -33.90625 L 11.9375 -33.90625 Z M 11.9375 -31.046875 "></path>
+                            </g>
+                        </g>
+                    </g>
+                    <g fill="#121212" fill-opacity="1">
+                        <g transform="translate(95.327364, 55.95717)">
+                            <g>
+                                <path d="M 10.390625 -12.3125 C 10.847656 -10.488281 11.632812 -9.019531 12.75 -7.90625 C 14.195312 -6.488281 16.144531 -5.78125 18.59375 -5.78125 C 19.175781 -5.78125 19.738281 -5.800781 20.28125 -5.84375 C 20.820312 -5.882812 21.335938 -5.945312 21.828125 -6.03125 C 22.328125 -6.113281 22.804688 -6.21875 23.265625 -6.34375 C 23.722656 -6.46875 24.175781 -6.601562 24.625 -6.75 C 25.082031 -6.894531 25.53125 -7.050781 25.96875 -7.21875 C 26.40625 -7.382812 26.851562 -7.570312 27.3125 -7.78125 L 28.921875 -8.515625 L 29.421875 -6.78125 L 30.734375 -1.984375 L 31.109375 -0.6875 L 29.921875 -0.125 C 28.304688 0.625 26.503906 1.207031 24.515625 1.625 C 23.515625 1.863281 22.460938 2.035156 21.359375 2.140625 C 20.265625 2.242188 19.117188 2.296875 17.921875 2.296875 C 15.390625 2.296875 13.085938 1.882812 11.015625 1.0625 C 8.941406 0.1875 7.175781 -1.054688 5.71875 -2.671875 C 4.269531 -4.242188 3.148438 -6.191406 2.359375 -8.515625 C 1.617188 -10.753906 1.25 -13.304688 1.25 -16.171875 C 1.25 -18.742188 1.617188 -21.148438 2.359375 -23.390625 C 2.773438 -24.503906 3.253906 -25.554688 3.796875 -26.546875 C 4.335938 -27.546875 4.957031 -28.460938 5.65625 -29.296875 C 7.070312 -30.953125 8.773438 -32.257812 10.765625 -33.21875 C 12.753906 -34.164062 14.972656 -34.640625 17.421875 -34.640625 C 18.242188 -34.640625 19.039062 -34.585938 19.8125 -34.484375 C 20.582031 -34.390625 21.328125 -34.25 22.046875 -34.0625 C 22.773438 -33.875 23.472656 -33.632812 24.140625 -33.34375 C 25.128906 -32.882812 26.023438 -32.351562 26.828125 -31.75 C 27.640625 -31.15625 28.378906 -30.460938 29.046875 -29.671875 C 30.335938 -28.140625 31.3125 -26.378906 31.96875 -24.390625 C 32.257812 -23.390625 32.488281 -22.359375 32.65625 -21.296875 C 32.820312 -20.242188 32.90625 -19.175781 32.90625 -18.09375 C 32.90625 -17.8125 32.90625 -17.523438 32.90625 -17.234375 C 32.90625 -16.941406 32.894531 -16.640625 32.875 -16.328125 C 32.851562 -16.015625 32.84375 -15.710938 32.84375 -15.421875 C 32.84375 -15.128906 32.832031 -14.847656 32.8125 -14.578125 C 32.789062 -14.316406 32.757812 -14.039062 32.71875 -13.75 L 32.59375 -12.3125 Z M 17.296875 -26.6875 C 15.304688 -26.6875 13.6875 -26.019531 12.4375 -24.6875 C 11.9375 -24.15625 11.5 -23.492188 11.125 -22.703125 C 10.757812 -21.910156 10.472656 -21 10.265625 -19.96875 L 24.5625 -19.96875 C 24.363281 -21.957031 23.742188 -23.507812 22.703125 -24.625 C 21.421875 -26 19.617188 -26.6875 17.296875 -26.6875 Z M 17.296875 -26.6875 "></path>
+                            </g>
+                        </g>
+                    </g>
+                    <g fill="#121212" fill-opacity="1">
+                        <g transform="translate(129.163241, 55.95717)">
+                            <g>
+                                <path d="M 31.28125 -45.09375 L 38.5625 -45.09375 L 38.5625 -16.796875 C 38.5625 -13.890625 38.148438 -11.253906 37.328125 -8.890625 C 36.492188 -6.523438 35.289062 -4.492188 33.71875 -2.796875 C 33.382812 -2.460938 33.039062 -2.148438 32.6875 -1.859375 C 32.332031 -1.578125 31.976562 -1.289062 31.625 -1 C 31.28125 -0.707031 30.910156 -0.445312 30.515625 -0.21875 C 30.117188 0.0078125 29.710938 0.226562 29.296875 0.4375 C 28.878906 0.644531 28.441406 0.832031 27.984375 1 C 25.828125 1.863281 23.425781 2.296875 20.78125 2.296875 C 15.257812 2.296875 10.925781 0.660156 7.78125 -2.609375 C 4.664062 -5.890625 3.109375 -10.535156 3.109375 -16.546875 L 3.109375 -45.09375 L 12.125 -45.09375 L 12.125 -17.484375 C 12.125 -13.617188 12.875 -10.691406 14.375 -8.703125 C 15.03125 -7.796875 15.875 -7.113281 16.90625 -6.65625 C 17.945312 -6.195312 19.238281 -5.96875 20.78125 -5.96875 C 23.800781 -5.96875 26.019531 -6.878906 27.4375 -8.703125 C 28.96875 -10.648438 29.734375 -13.578125 29.734375 -17.484375 L 29.734375 -45.09375 Z M 31.28125 -45.09375 "></path>
+                            </g>
+                        </g>
+                    </g>
+                    <g fill="#121212" fill-opacity="1">
+                        <g transform="translate(170.836098, 55.95717)">
+                            <g>
+                                <path d="M 3.671875 -33.90625 C 4.492188 -33.90625 5.257812 -33.84375 5.96875 -33.71875 C 6.675781 -33.59375 7.347656 -33.394531 7.984375 -33.125 C 8.628906 -32.851562 9.222656 -32.507812 9.765625 -32.09375 C 10.304688 -31.675781 10.765625 -31.179688 11.140625 -30.609375 C 11.835938 -31.304688 12.644531 -31.925781 13.5625 -32.46875 C 13.8125 -32.632812 14.0625 -32.789062 14.3125 -32.9375 C 14.5625 -33.082031 14.828125 -33.21875 15.109375 -33.34375 C 15.398438 -33.46875 15.691406 -33.582031 15.984375 -33.6875 C 16.273438 -33.789062 16.566406 -33.90625 16.859375 -34.03125 C 17.523438 -34.238281 18.207031 -34.390625 18.90625 -34.484375 C 19.613281 -34.585938 20.34375 -34.640625 21.09375 -34.640625 C 23.164062 -34.640625 25.164062 -34.222656 27.09375 -33.390625 C 29.019531 -32.566406 30.707031 -31.367188 32.15625 -29.796875 C 33.613281 -28.222656 34.753906 -26.316406 35.578125 -24.078125 C 35.867188 -23.328125 36.109375 -22.535156 36.296875 -21.703125 C 36.484375 -20.878906 36.628906 -20.03125 36.734375 -19.15625 C 36.835938 -18.289062 36.890625 -17.398438 36.890625 -16.484375 C 36.890625 -13.742188 36.472656 -11.210938 35.640625 -8.890625 C 35.222656 -7.773438 34.734375 -6.71875 34.171875 -5.71875 C 33.617188 -4.726562 32.96875 -3.816406 32.21875 -2.984375 C 31.96875 -2.648438 31.6875 -2.335938 31.375 -2.046875 C 31.070312 -1.765625 30.753906 -1.476562 30.421875 -1.1875 C 30.085938 -0.894531 29.753906 -0.625 29.421875 -0.375 C 29.085938 -0.125 28.734375 0.101562 28.359375 0.3125 C 27.992188 0.519531 27.625 0.707031 27.25 0.875 C 26.289062 1.375 25.300781 1.734375 24.28125 1.953125 C 23.269531 2.179688 22.25 2.296875 21.21875 2.296875 C 19.019531 2.296875 17.003906 1.863281 15.171875 1 C 14.515625 0.707031 13.894531 0.375 13.3125 0 L 13.3125 15.234375 L 4.609375 15.234375 L 4.609375 -24.078125 C 4.609375 -25.023438 4.441406 -25.644531 4.109375 -25.9375 C 3.734375 -26.269531 3.191406 -26.4375 2.484375 -26.4375 L 0.4375 -26.4375 L 1 -28.421875 L 2.171875 -32.78125 L 2.484375 -33.90625 Z M 28.046875 -16.296875 C 28.046875 -17.171875 27.984375 -17.976562 27.859375 -18.71875 C 27.742188 -19.46875 27.570312 -20.160156 27.34375 -20.796875 C 27.113281 -21.441406 26.851562 -22.035156 26.5625 -22.578125 C 26.269531 -23.117188 25.9375 -23.617188 25.5625 -24.078125 C 24.820312 -24.941406 23.960938 -25.59375 22.984375 -26.03125 C 22.003906 -26.46875 20.957031 -26.6875 19.84375 -26.6875 C 19.09375 -26.6875 18.382812 -26.59375 17.71875 -26.40625 C 17.0625 -26.21875 16.441406 -25.9375 15.859375 -25.5625 C 14.785156 -24.894531 13.9375 -24.191406 13.3125 -23.453125 L 13.3125 -8.703125 C 14.1875 -7.921875 15.140625 -7.257812 16.171875 -6.71875 C 17.335938 -6.09375 18.644531 -5.78125 20.09375 -5.78125 C 21.25 -5.78125 22.304688 -6.007812 23.265625 -6.46875 C 24.210938 -6.96875 25.039062 -7.648438 25.75 -8.515625 C 26.125 -8.972656 26.445312 -9.472656 26.71875 -10.015625 C 26.988281 -10.554688 27.226562 -11.15625 27.4375 -11.8125 C 27.644531 -12.476562 27.796875 -13.179688 27.890625 -13.921875 C 27.992188 -14.671875 28.046875 -15.460938 28.046875 -16.296875 Z M 28.046875 -16.296875 "></path>
+                            </g>
+                        </g>
+                    </g>
+                    <g fill="#121212" fill-opacity="1">
+                        <g transform="translate(208.963656, 55.95717)">
+                            <g>
+                                <path d="M 7.53125 -42.921875 L 13.375 -42.921875 L 13.375 -32.71875 L 22.328125 -32.71875 L 22.328125 -24.75 L 13.375 -24.75 L 13.375 -10.703125 C 13.375 -9.660156 13.476562 -8.8125 13.6875 -8.15625 C 13.894531 -7.53125 14.144531 -7.050781 14.4375 -6.71875 C 14.71875 -6.382812 15.066406 -6.15625 15.484375 -6.03125 C 15.734375 -5.945312 15.984375 -5.882812 16.234375 -5.84375 C 16.484375 -5.800781 16.734375 -5.78125 16.984375 -5.78125 C 17.847656 -5.78125 18.632812 -5.90625 19.34375 -6.15625 C 20.21875 -6.488281 21.023438 -6.863281 21.765625 -7.28125 L 23.390625 -8.15625 L 24.015625 -6.40625 L 25.5625 -1.921875 L 25.9375 -0.75 L 24.875 -0.125 C 23.96875 0.457031 22.75 1 21.21875 1.5 C 20.425781 1.78125 19.613281 1.984375 18.78125 2.109375 C 17.957031 2.234375 17.128906 2.296875 16.296875 2.296875 C 12.734375 2.296875 9.894531 1.113281 7.78125 -1.25 C 6.695312 -2.445312 5.90625 -3.875 5.40625 -5.53125 C 4.914062 -7.195312 4.671875 -9.066406 4.671875 -11.140625 L 4.671875 -24.75 L -0.9375 -24.75 L -0.9375 -32.71875 L 4.96875 -32.71875 L 5.96875 -41.546875 L 6.15625 -42.921875 Z M 7.53125 -42.921875 "></path>
+                            </g>
+                        </g>
+                    </g>
+                    <g fill="#121212" fill-opacity="1">
+                        <g transform="translate(233.656391, 55.95717)">
+                            <g>
+                                <path d="M 10.578125 1.5625 L 3.421875 1.5625 L 3.421875 -33.90625 L 12.125 -33.90625 L 12.125 1.5625 Z M 7.78125 -36.328125 C 6.28125 -36.328125 4.988281 -36.863281 3.90625 -37.9375 C 2.832031 -39.019531 2.296875 -40.304688 2.296875 -41.796875 C 2.296875 -43.410156 2.800781 -44.726562 3.8125 -45.75 C 4.832031 -46.769531 6.15625 -47.28125 7.78125 -47.28125 C 8.519531 -47.28125 9.222656 -47.144531 9.890625 -46.875 C 10.554688 -46.601562 11.144531 -46.207031 11.65625 -45.6875 C 12.175781 -45.164062 12.570312 -44.570312 12.84375 -43.90625 C 13.113281 -43.25 13.25 -42.546875 13.25 -41.796875 C 13.25 -40.179688 12.738281 -38.863281 11.71875 -37.84375 C 10.707031 -36.832031 9.394531 -36.328125 7.78125 -36.328125 Z M 7.78125 -36.328125 "></path>
+                            </g>
+                        </g>
+                    </g>
+                    <g fill="#121212" fill-opacity="1">
+                        <g transform="translate(249.205965, 55.95717)">
+                            <g>
+                                <path d="M 11.9375 -31.109375 C 12.269531 -31.390625 12.59375 -31.65625 12.90625 -31.90625 C 13.21875 -32.15625 13.5625 -32.382812 13.9375 -32.59375 C 14.4375 -32.925781 14.953125 -33.226562 15.484375 -33.5 C 16.023438 -33.769531 16.59375 -33.984375 17.1875 -34.140625 C 17.789062 -34.304688 18.394531 -34.429688 19 -34.515625 C 19.601562 -34.597656 20.238281 -34.640625 20.90625 -34.640625 C 23.800781 -34.640625 26.203125 -33.914062 28.109375 -32.46875 C 29.273438 -31.59375 30.234375 -30.515625 30.984375 -29.234375 C 32.015625 -30.398438 33.113281 -31.4375 34.28125 -32.34375 C 34.6875 -32.632812 35.117188 -32.90625 35.578125 -33.15625 C 36.035156 -33.40625 36.507812 -33.625 37 -33.8125 C 37.5 -34 38.007812 -34.148438 38.53125 -34.265625 C 39.050781 -34.390625 39.578125 -34.484375 40.109375 -34.546875 C 40.648438 -34.609375 41.210938 -34.640625 41.796875 -34.640625 C 42.046875 -34.640625 42.285156 -34.640625 42.515625 -34.640625 C 42.742188 -34.640625 42.972656 -34.628906 43.203125 -34.609375 C 43.429688 -34.585938 43.65625 -34.554688 43.875 -34.515625 C 44.101562 -34.472656 44.320312 -34.429688 44.53125 -34.390625 C 44.738281 -34.359375 44.945312 -34.320312 45.15625 -34.28125 C 45.363281 -34.238281 45.570312 -34.1875 45.78125 -34.125 C 45.988281 -34.0625 46.195312 -33.988281 46.40625 -33.90625 C 46.613281 -33.820312 46.820312 -33.738281 47.03125 -33.65625 C 47.394531 -33.488281 47.753906 -33.300781 48.109375 -33.09375 C 48.460938 -32.882812 48.796875 -32.65625 49.109375 -32.40625 C 49.421875 -32.15625 49.722656 -31.894531 50.015625 -31.625 C 50.304688 -31.351562 50.570312 -31.054688 50.8125 -30.734375 C 51.851562 -29.523438 52.601562 -28.09375 53.0625 -26.4375 C 53.5625 -24.820312 53.8125 -23.039062 53.8125 -21.09375 L 53.8125 1.5625 L 45.09375 1.5625 L 45.09375 -20.65625 C 45.09375 -22.5625 44.679688 -24.070312 43.859375 -25.1875 C 43.109375 -26.144531 42.09375 -26.625 40.8125 -26.625 C 40.0625 -26.625 39.351562 -26.476562 38.6875 -26.1875 C 37.945312 -25.851562 37.242188 -25.414062 36.578125 -24.875 C 35.867188 -24.300781 35.179688 -23.640625 34.515625 -22.890625 C 34.273438 -22.554688 34.007812 -22.203125 33.71875 -21.828125 C 33.425781 -21.460938 33.175781 -21.113281 32.96875 -20.78125 L 32.96875 1.5625 L 24.265625 1.5625 L 24.265625 -20.65625 C 24.265625 -22.5625 23.847656 -24.070312 23.015625 -25.1875 C 22.265625 -26.144531 21.25 -26.625 19.96875 -26.625 C 19.257812 -26.625 18.554688 -26.476562 17.859375 -26.1875 C 17.523438 -26.0625 17.171875 -25.894531 16.796875 -25.6875 C 16.421875 -25.476562 16.066406 -25.226562 15.734375 -24.9375 C 15.609375 -24.851562 15.484375 -24.757812 15.359375 -24.65625 C 15.234375 -24.5625 15.117188 -24.460938 15.015625 -24.359375 C 14.910156 -24.253906 14.796875 -24.148438 14.671875 -24.046875 C 14.554688 -23.941406 14.445312 -23.835938 14.34375 -23.734375 C 14.238281 -23.628906 14.132812 -23.515625 14.03125 -23.390625 C 13.925781 -23.265625 13.8125 -23.140625 13.6875 -23.015625 C 13.4375 -22.679688 13.164062 -22.335938 12.875 -21.984375 C 12.582031 -21.628906 12.332031 -21.289062 12.125 -20.96875 L 12.125 1.5625 L 3.421875 1.5625 L 3.421875 -33.90625 L 11.9375 -33.90625 Z M 11.9375 -31.109375 "></path>
+                            </g>
+                        </g>
+                    </g>
+                    <g fill="#121212" fill-opacity="1">
+                        <g transform="translate(306.117405, 55.95717)">
+                            <g>
+                                <path d="M 10.390625 -12.3125 C 10.847656 -10.488281 11.632812 -9.019531 12.75 -7.90625 C 14.195312 -6.488281 16.144531 -5.78125 18.59375 -5.78125 C 19.175781 -5.78125 19.738281 -5.800781 20.28125 -5.84375 C 20.820312 -5.882812 21.335938 -5.945312 21.828125 -6.03125 C 22.328125 -6.113281 22.804688 -6.21875 23.265625 -6.34375 C 23.722656 -6.46875 24.175781 -6.601562 24.625 -6.75 C 25.082031 -6.894531 25.53125 -7.050781 25.96875 -7.21875 C 26.40625 -7.382812 26.851562 -7.570312 27.3125 -7.78125 L 28.921875 -8.515625 L 29.421875 -6.78125 L 30.734375 -1.984375 L 31.109375 -0.6875 L 29.921875 -0.125 C 28.304688 0.625 26.503906 1.207031 24.515625 1.625 C 23.515625 1.863281 22.460938 2.035156 21.359375 2.140625 C 20.265625 2.242188 19.117188 2.296875 17.921875 2.296875 C 15.390625 2.296875 13.085938 1.882812 11.015625 1.0625 C 8.941406 0.1875 7.175781 -1.054688 5.71875 -2.671875 C 4.269531 -4.242188 3.148438 -6.191406 2.359375 -8.515625 C 1.617188 -10.753906 1.25 -13.304688 1.25 -16.171875 C 1.25 -18.742188 1.617188 -21.148438 2.359375 -23.390625 C 2.773438 -24.503906 3.253906 -25.554688 3.796875 -26.546875 C 4.335938 -27.546875 4.957031 -28.460938 5.65625 -29.296875 C 7.070312 -30.953125 8.773438 -32.257812 10.765625 -33.21875 C 12.753906 -34.164062 14.972656 -34.640625 17.421875 -34.640625 C 18.242188 -34.640625 19.039062 -34.585938 19.8125 -34.484375 C 20.582031 -34.390625 21.328125 -34.25 22.046875 -34.0625 C 22.773438 -33.875 23.472656 -33.632812 24.140625 -33.34375 C 25.128906 -32.882812 26.023438 -32.351562 26.828125 -31.75 C 27.640625 -31.15625 28.378906 -30.460938 29.046875 -29.671875 C 30.335938 -28.140625 31.3125 -26.378906 31.96875 -24.390625 C 32.257812 -23.390625 32.488281 -22.359375 32.65625 -21.296875 C 32.820312 -20.242188 32.90625 -19.175781 32.90625 -18.09375 C 32.90625 -17.8125 32.90625 -17.523438 32.90625 -17.234375 C 32.90625 -16.941406 32.894531 -16.640625 32.875 -16.328125 C 32.851562 -16.015625 32.84375 -15.710938 32.84375 -15.421875 C 32.84375 -15.128906 32.832031 -14.847656 32.8125 -14.578125 C 32.789062 -14.316406 32.757812 -14.039062 32.71875 -13.75 L 32.59375 -12.3125 Z M 17.296875 -26.6875 C 15.304688 -26.6875 13.6875 -26.019531 12.4375 -24.6875 C 11.9375 -24.15625 11.5 -23.492188 11.125 -22.703125 C 10.757812 -21.910156 10.472656 -21 10.265625 -19.96875 L 24.5625 -19.96875 C 24.363281 -21.957031 23.742188 -23.507812 22.703125 -24.625 C 21.421875 -26 19.617188 -26.6875 17.296875 -26.6875 Z M 17.296875 -26.6875 "></path>
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+            </a>
+        </div>
+        <div class="hidden">
+            <a aria-label="Home" href="/">
+                <svg class="h-6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                     width="500" zoomAndPan="magnify" viewBox="0 0 375 74.999997" height="100"
                     preserveAspectRatio="xMidYMid meet" version="1.0">
                     <defs>
@@ -101,9 +184,9 @@
                 </svg>
             </a>
         </div>
-        <div class="fixed inset-x-0 top-0 z-50 flex h-14 border-b-2 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80 backdrop-blur-sm  lg:left-72 xl:left-80 bg-white/[var(--bg-opacity-light)] /[var(--bg-opacity-dark)]"
+        <div class="fixed inset-x-0 top-0 z-50 flex h-14 border-b border-slate-200 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80 backdrop-blur-sm lg:left-72 xl:left-80 bg-white/95 supports-[backdrop-filter]:bg-white/80"
             style="--bg-opacity-light:0.5; ">
-            <div class="absolute inset-x-0 top-full h-px transition bg-zinc-900/7.5 "></div>
+            <div class="absolute inset-x-0 top-full h-px transition bg-slate-900/5"></div>
             <div class="hidden lg:block lg:max-w-md lg:flex-auto">
                 <!-- <button type="button"
                     class="hidden h-8 w-full items-center gap-2 rounded-full bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20     lg:flex focus:[&amp;:not(:focus-visible)]:outline-none">
@@ -116,44 +199,117 @@
                 </button> -->
             </div>
             <div class="flex items-center gap-5 lg:hidden">
-                <button type="button"
-                    class="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 "
+                <button type="button" id="mobile-menu-toggle"
+                    class="flex h-8 w-8 items-center justify-center rounded-lg transition hover:bg-slate-100"
                     aria-label="Toggle navigation">
-                    <svg viewBox="0 0 10 9" fill="none" stroke-linecap="round" aria-hidden="true"
-                        class="w-2.5 stroke-zinc-900 ">
-                        <path d="M.5 1h9M.5 8h9M.5 4.5h9"></path>
+                    <svg id="menu-open-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"
+                        class="w-5 h-5 stroke-slate-700">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                    </svg>
+                    <svg id="menu-close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"
+                        class="w-5 h-5 stroke-slate-700 hidden">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
                 </button>
                 <a aria-label="Home" href="/">
-                    <svg viewBox="0 0 99 24" aria-hidden="true" class="h-6">
-                        <path class="fill-emerald-400"
-                            d="M16 8a5 5 0 0 0-5-5H5a5 5 0 0 0-5 5v13.927a1 1 0 0 0 1.623.782l3.684-2.93a4 4 0 0 1 2.49-.87H11a5 5 0 0 0 5-5V8Z">
-                        </path>
-                        <path class="fill-zinc-900 "
-                            d="M26.538 18h2.654v-3.999h2.576c2.672 0 4.456-1.723 4.456-4.333V9.65c0-2.61-1.784-4.333-4.456-4.333h-5.23V18Zm4.58-10.582c1.52 0 2.416.8 2.416 2.241v.018c0 1.441-.896 2.25-2.417 2.25h-1.925V7.418h1.925ZM38.051 18h2.566v-5.414c0-1.371.923-2.206 2.382-2.206.396 0 .791.061 1.178.15V8.287a3.843 3.843 0 0 0-.958-.123c-1.257 0-2.136.615-2.443 1.661h-.159V8.323h-2.566V18Zm11.55.202c2.979 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.773-5.036-2.953 0-4.772 1.916-4.772 5.036v.018c0 3.146 1.793 5.036 4.772 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.144-3.023 1.354 0 2.145 1.134 2.145 3.023v.018c0 1.907-.782 3.023-2.145 3.023Zm10.52 1.846c.492 0 .967-.053 1.283-.114v-1.907a6.057 6.057 0 0 1-.755.044c-.87 0-1.24-.387-1.24-1.257v-4.544h1.995V8.323H59.41V6.012h-2.592v2.311h-1.495v1.934h1.495v5.133c0 1.88.949 2.645 3.304 2.645Zm7.287.167c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.954 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023Zm10.767 2.013c2.522 0 4.034-1.353 4.297-3.463l.01-.053h-2.374l-.017.036c-.229.966-.853 1.467-1.908 1.467-1.37 0-2.135-1.08-2.135-3.04v-.018c0-1.934.755-3.006 2.135-3.006 1.099 0 1.74.615 1.908 1.556l.008.017h2.391v-.026c-.228-2.162-1.749-3.56-4.315-3.56-3.033 0-4.738 1.837-4.738 5.019v.017c0 3.217 1.714 5.054 4.738 5.054Zm10.257 0c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.953 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.371 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023ZM95.025 18h2.566V4.623h-2.566V18Z">
-                        </path>
+                    <svg class="h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 75" preserveAspectRatio="xMidYMid meet">
+                        <defs>
+                            <g></g>
+                            <clipPath id="mobile-header-1d83d73318">
+                                <path d="M 351.792969 35.324219 L 367.53125 35.324219 L 367.53125 51.0625 L 351.792969 51.0625 Z M 351.792969 35.324219 " clip-rule="nonzero"></path>
+                            </clipPath>
+                            <clipPath id="mobile-header-32c1ad7ad2">
+                                <path d="M 366.480469 51.03125 L 352.816406 51.03125 C 352.253906 51.03125 351.792969 50.574219 351.792969 50.007812 L 351.792969 36.347656 C 351.792969 35.785156 352.253906 35.324219 352.816406 35.324219 L 366.480469 35.324219 C 367.042969 35.324219 367.5 35.785156 367.5 36.347656 L 367.5 50.007812 C 367.5 50.574219 367.042969 51.03125 366.480469 51.03125 " clip-rule="nonzero"></path>
+                            </clipPath>
+                        </defs>
+                        <g clip-path="url(#mobile-header-1d83d73318)">
+                            <g clip-path="url(#mobile-header-32c1ad7ad2)">
+                                <path fill="#7ed957" d="M 351.792969 35.324219 L 367.53125 35.324219 L 367.53125 51.0625 L 351.792969 51.0625 Z M 351.792969 35.324219 " fill-opacity="1" fill-rule="nonzero"></path>
+                            </g>
+                        </g>
+                        <g fill="#121212" fill-opacity="1">
+                            <g transform="translate(11.173064, 55.95717)">
+                                <g>
+                                    <path d="M 1.5625 -21.828125 C 1.5625 -25.191406 2.054688 -28.320312 3.046875 -31.21875 C 4.046875 -34.164062 5.5 -36.71875 7.40625 -38.875 C 9.3125 -41.070312 11.632812 -42.773438 14.375 -43.984375 C 15.738281 -44.597656 17.195312 -45.0625 18.75 -45.375 C 20.3125 -45.6875 21.941406 -45.84375 23.640625 -45.84375 C 25.335938 -45.84375 26.960938 -45.6875 28.515625 -45.375 C 30.078125 -45.0625 31.539062 -44.578125 32.90625 -43.921875 C 34.269531 -43.296875 35.53125 -42.546875 36.6875 -41.671875 C 37.851562 -40.804688 38.914062 -39.8125 39.875 -38.6875 C 41.78125 -36.53125 43.25 -34.003906 44.28125 -31.109375 C 45.28125 -28.203125 45.78125 -25.109375 45.78125 -21.828125 C 45.78125 -18.554688 45.28125 -15.46875 44.28125 -12.5625 C 43.957031 -11.613281 43.578125 -10.679688 43.140625 -9.765625 C 42.703125 -8.847656 42.210938 -7.984375 41.671875 -7.171875 C 41.140625 -6.367188 40.5625 -5.597656 39.9375 -4.859375 C 38.976562 -3.734375 37.90625 -2.734375 36.71875 -1.859375 C 35.539062 -0.992188 34.289062 -0.25 32.96875 0.375 C 30.226562 1.65625 27.113281 2.296875 23.625 2.296875 C 20.144531 2.296875 17.039062 1.65625 14.3125 0.375 C 13.644531 0.0390625 13 -0.3125 12.375 -0.6875 C 11.757812 -1.0625 11.160156 -1.460938 10.578125 -1.890625 C 9.992188 -2.328125 9.429688 -2.796875 8.890625 -3.296875 C 8.359375 -3.796875 7.863281 -4.316406 7.40625 -4.859375 C 5.5 -7.054688 4.046875 -9.625 3.046875 -12.5625 C 2.054688 -15.46875 1.5625 -18.554688 1.5625 -21.828125 Z M 10.703125 -21.828125 C 10.703125 -20.796875 10.773438 -19.769531 10.921875 -18.75 C 11.066406 -17.738281 11.28125 -16.734375 11.5625 -15.734375 C 11.894531 -14.785156 12.269531 -13.882812 12.6875 -13.03125 C 13.101562 -12.175781 13.601562 -11.378906 14.1875 -10.640625 C 14.351562 -10.390625 14.535156 -10.160156 14.734375 -9.953125 C 14.941406 -9.742188 15.148438 -9.535156 15.359375 -9.328125 C 15.566406 -9.117188 15.785156 -8.910156 16.015625 -8.703125 C 16.242188 -8.492188 16.484375 -8.304688 16.734375 -8.140625 C 16.984375 -7.984375 17.234375 -7.820312 17.484375 -7.65625 C 17.734375 -7.488281 17.976562 -7.320312 18.21875 -7.15625 C 19.800781 -6.320312 21.609375 -5.90625 23.640625 -5.90625 C 24.378906 -5.90625 25.082031 -5.945312 25.75 -6.03125 C 26.414062 -6.113281 27.035156 -6.25 27.609375 -6.4375 C 28.191406 -6.625 28.734375 -6.84375 29.234375 -7.09375 C 30.847656 -7.875 32.195312 -8.953125 33.28125 -10.328125 C 33.65625 -10.785156 33.984375 -11.269531 34.265625 -11.78125 C 34.554688 -12.300781 34.828125 -12.863281 35.078125 -13.46875 C 35.328125 -14.070312 35.554688 -14.679688 35.765625 -15.296875 C 36.347656 -17.328125 36.640625 -19.503906 36.640625 -21.828125 C 36.640625 -23.898438 36.328125 -25.894531 35.703125 -27.8125 C 35.117188 -29.71875 34.25 -31.414062 33.09375 -32.90625 C 31.96875 -34.351562 30.617188 -35.515625 29.046875 -36.390625 C 27.472656 -37.222656 25.671875 -37.640625 23.640625 -37.640625 C 23.140625 -37.640625 22.640625 -37.617188 22.140625 -37.578125 C 21.640625 -37.535156 21.160156 -37.460938 20.703125 -37.359375 C 20.253906 -37.253906 19.820312 -37.128906 19.40625 -36.984375 C 18.988281 -36.835938 18.59375 -36.660156 18.21875 -36.453125 C 17.394531 -36.078125 16.648438 -35.617188 15.984375 -35.078125 C 15.316406 -34.546875 14.71875 -33.925781 14.1875 -33.21875 C 13.0625 -31.8125 12.1875 -30.148438 11.5625 -28.234375 C 10.988281 -26.242188 10.703125 -24.109375 10.703125 -21.828125 Z M 10.703125 -21.828125 "></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g fill="#121212" fill-opacity="1">
+                            <g transform="translate(58.505968, 55.95717)">
+                                <g>
+                                    <path d="M 11.9375 -31.046875 C 12.269531 -31.367188 12.601562 -31.65625 12.9375 -31.90625 C 13.269531 -32.15625 13.625 -32.382812 14 -32.59375 C 16.070312 -33.957031 18.5 -34.640625 21.28125 -34.640625 C 23.3125 -34.640625 25.113281 -34.316406 26.6875 -33.671875 C 28.257812 -33.035156 29.585938 -32.078125 30.671875 -30.796875 C 32.703125 -28.304688 33.71875 -25.070312 33.71875 -21.09375 L 33.71875 1.5625 L 25 1.5625 L 25 -20.46875 C 25 -21.164062 24.945312 -21.804688 24.84375 -22.390625 C 24.738281 -22.972656 24.59375 -23.488281 24.40625 -23.9375 C 24.226562 -24.394531 23.992188 -24.789062 23.703125 -25.125 C 23.453125 -25.457031 23.171875 -25.738281 22.859375 -25.96875 C 22.546875 -26.195312 22.179688 -26.363281 21.765625 -26.46875 C 21.359375 -26.570312 20.882812 -26.625 20.34375 -26.625 C 19.59375 -26.625 18.84375 -26.476562 18.09375 -26.1875 C 17.3125 -25.894531 16.546875 -25.476562 15.796875 -24.9375 C 15.054688 -24.363281 14.351562 -23.722656 13.6875 -23.015625 C 13.4375 -22.679688 13.164062 -22.335938 12.875 -21.984375 C 12.582031 -21.628906 12.332031 -21.289062 12.125 -20.96875 L 12.125 1.5625 L 3.421875 1.5625 L 3.421875 -33.90625 L 11.9375 -33.90625 Z M 11.9375 -31.046875 "></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g fill="#121212" fill-opacity="1">
+                            <g transform="translate(95.327364, 55.95717)">
+                                <g>
+                                    <path d="M 10.390625 -12.3125 C 10.847656 -10.488281 11.632812 -9.019531 12.75 -7.90625 C 14.195312 -6.488281 16.144531 -5.78125 18.59375 -5.78125 C 19.175781 -5.78125 19.738281 -5.800781 20.28125 -5.84375 C 20.820312 -5.882812 21.335938 -5.945312 21.828125 -6.03125 C 22.328125 -6.113281 22.804688 -6.21875 23.265625 -6.34375 C 23.722656 -6.46875 24.175781 -6.601562 24.625 -6.75 C 25.082031 -6.894531 25.53125 -7.050781 25.96875 -7.21875 C 26.40625 -7.382812 26.851562 -7.570312 27.3125 -7.78125 L 28.921875 -8.515625 L 29.421875 -6.78125 L 30.734375 -1.984375 L 31.109375 -0.6875 L 29.921875 -0.125 C 28.304688 0.625 26.503906 1.207031 24.515625 1.625 C 23.515625 1.863281 22.460938 2.035156 21.359375 2.140625 C 20.265625 2.242188 19.117188 2.296875 17.921875 2.296875 C 15.390625 2.296875 13.085938 1.882812 11.015625 1.0625 C 8.941406 0.1875 7.175781 -1.054688 5.71875 -2.671875 C 4.269531 -4.242188 3.148438 -6.191406 2.359375 -8.515625 C 1.617188 -10.753906 1.25 -13.304688 1.25 -16.171875 C 1.25 -18.742188 1.617188 -21.148438 2.359375 -23.390625 C 2.773438 -24.503906 3.253906 -25.554688 3.796875 -26.546875 C 4.335938 -27.546875 4.957031 -28.460938 5.65625 -29.296875 C 7.070312 -30.953125 8.773438 -32.257812 10.765625 -33.21875 C 12.753906 -34.164062 14.972656 -34.640625 17.421875 -34.640625 C 18.242188 -34.640625 19.039062 -34.585938 19.8125 -34.484375 C 20.582031 -34.390625 21.328125 -34.25 22.046875 -34.0625 C 22.773438 -33.875 23.472656 -33.632812 24.140625 -33.34375 C 25.128906 -32.882812 26.023438 -32.351562 26.828125 -31.75 C 27.640625 -31.15625 28.378906 -30.460938 29.046875 -29.671875 C 30.335938 -28.140625 31.3125 -26.378906 31.96875 -24.390625 C 32.257812 -23.390625 32.488281 -22.359375 32.65625 -21.296875 C 32.820312 -20.242188 32.90625 -19.175781 32.90625 -18.09375 C 32.90625 -17.8125 32.90625 -17.523438 32.90625 -17.234375 C 32.90625 -16.941406 32.894531 -16.640625 32.875 -16.328125 C 32.851562 -16.015625 32.84375 -15.710938 32.84375 -15.421875 C 32.84375 -15.128906 32.832031 -14.847656 32.8125 -14.578125 C 32.789062 -14.316406 32.757812 -14.039062 32.71875 -13.75 L 32.59375 -12.3125 Z M 17.296875 -26.6875 C 15.304688 -26.6875 13.6875 -26.019531 12.4375 -24.6875 C 11.9375 -24.15625 11.5 -23.492188 11.125 -22.703125 C 10.757812 -21.910156 10.472656 -21 10.265625 -19.96875 L 24.5625 -19.96875 C 24.363281 -21.957031 23.742188 -23.507812 22.703125 -24.625 C 21.421875 -26 19.617188 -26.6875 17.296875 -26.6875 Z M 17.296875 -26.6875 "></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g fill="#121212" fill-opacity="1">
+                            <g transform="translate(129.163241, 55.95717)">
+                                <g>
+                                    <path d="M 31.28125 -45.09375 L 38.5625 -45.09375 L 38.5625 -16.796875 C 38.5625 -13.890625 38.148438 -11.253906 37.328125 -8.890625 C 36.492188 -6.523438 35.289062 -4.492188 33.71875 -2.796875 C 33.382812 -2.460938 33.039062 -2.148438 32.6875 -1.859375 C 32.332031 -1.578125 31.976562 -1.289062 31.625 -1 C 31.28125 -0.707031 30.910156 -0.445312 30.515625 -0.21875 C 30.117188 0.0078125 29.710938 0.226562 29.296875 0.4375 C 28.878906 0.644531 28.441406 0.832031 27.984375 1 C 25.828125 1.863281 23.425781 2.296875 20.78125 2.296875 C 15.257812 2.296875 10.925781 0.660156 7.78125 -2.609375 C 4.664062 -5.890625 3.109375 -10.535156 3.109375 -16.546875 L 3.109375 -45.09375 L 12.125 -45.09375 L 12.125 -17.484375 C 12.125 -13.617188 12.875 -10.691406 14.375 -8.703125 C 15.03125 -7.796875 15.875 -7.113281 16.90625 -6.65625 C 17.945312 -6.195312 19.238281 -5.96875 20.78125 -5.96875 C 23.800781 -5.96875 26.019531 -6.878906 27.4375 -8.703125 C 28.96875 -10.648438 29.734375 -13.578125 29.734375 -17.484375 L 29.734375 -45.09375 Z M 31.28125 -45.09375 "></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g fill="#121212" fill-opacity="1">
+                            <g transform="translate(170.836098, 55.95717)">
+                                <g>
+                                    <path d="M 3.671875 -33.90625 C 4.492188 -33.90625 5.257812 -33.84375 5.96875 -33.71875 C 6.675781 -33.59375 7.347656 -33.394531 7.984375 -33.125 C 8.628906 -32.851562 9.222656 -32.507812 9.765625 -32.09375 C 10.304688 -31.675781 10.765625 -31.179688 11.140625 -30.609375 C 11.835938 -31.304688 12.644531 -31.925781 13.5625 -32.46875 C 13.8125 -32.632812 14.0625 -32.789062 14.3125 -32.9375 C 14.5625 -33.082031 14.828125 -33.21875 15.109375 -33.34375 C 15.398438 -33.46875 15.691406 -33.582031 15.984375 -33.6875 C 16.273438 -33.789062 16.566406 -33.90625 16.859375 -34.03125 C 17.523438 -34.238281 18.207031 -34.390625 18.90625 -34.484375 C 19.613281 -34.585938 20.34375 -34.640625 21.09375 -34.640625 C 23.164062 -34.640625 25.164062 -34.222656 27.09375 -33.390625 C 29.019531 -32.566406 30.707031 -31.367188 32.15625 -29.796875 C 33.613281 -28.222656 34.753906 -26.316406 35.578125 -24.078125 C 35.867188 -23.328125 36.109375 -22.535156 36.296875 -21.703125 C 36.484375 -20.878906 36.628906 -20.03125 36.734375 -19.15625 C 36.835938 -18.289062 36.890625 -17.398438 36.890625 -16.484375 C 36.890625 -13.742188 36.472656 -11.210938 35.640625 -8.890625 C 35.222656 -7.773438 34.734375 -6.71875 34.171875 -5.71875 C 33.617188 -4.726562 32.96875 -3.816406 32.21875 -2.984375 C 31.96875 -2.648438 31.6875 -2.335938 31.375 -2.046875 C 31.070312 -1.765625 30.753906 -1.476562 30.421875 -1.1875 C 30.085938 -0.894531 29.753906 -0.625 29.421875 -0.375 C 29.085938 -0.125 28.734375 0.101562 28.359375 0.3125 C 27.992188 0.519531 27.625 0.707031 27.25 0.875 C 26.289062 1.375 25.300781 1.734375 24.28125 1.953125 C 23.269531 2.179688 22.25 2.296875 21.21875 2.296875 C 19.019531 2.296875 17.003906 1.863281 15.171875 1 C 14.515625 0.707031 13.894531 0.375 13.3125 0 L 13.3125 15.234375 L 4.609375 15.234375 L 4.609375 -24.078125 C 4.609375 -25.023438 4.441406 -25.644531 4.109375 -25.9375 C 3.734375 -26.269531 3.191406 -26.4375 2.484375 -26.4375 L 0.4375 -26.4375 L 1 -28.421875 L 2.171875 -32.78125 L 2.484375 -33.90625 Z M 28.046875 -16.296875 C 28.046875 -17.171875 27.984375 -17.976562 27.859375 -18.71875 C 27.742188 -19.46875 27.570312 -20.160156 27.34375 -20.796875 C 27.113281 -21.441406 26.851562 -22.035156 26.5625 -22.578125 C 26.269531 -23.117188 25.9375 -23.617188 25.5625 -24.078125 C 24.820312 -24.941406 23.960938 -25.59375 22.984375 -26.03125 C 22.003906 -26.46875 20.957031 -26.6875 19.84375 -26.6875 C 19.09375 -26.6875 18.382812 -26.59375 17.71875 -26.40625 C 17.0625 -26.21875 16.441406 -25.9375 15.859375 -25.5625 C 14.785156 -24.894531 13.9375 -24.191406 13.3125 -23.453125 L 13.3125 -8.703125 C 14.1875 -7.921875 15.140625 -7.257812 16.171875 -6.71875 C 17.335938 -6.09375 18.644531 -5.78125 20.09375 -5.78125 C 21.25 -5.78125 22.304688 -6.007812 23.265625 -6.46875 C 24.210938 -6.96875 25.039062 -7.648438 25.75 -8.515625 C 26.125 -8.972656 26.445312 -9.472656 26.71875 -10.015625 C 26.988281 -10.554688 27.226562 -11.15625 27.4375 -11.8125 C 27.644531 -12.476562 27.796875 -13.179688 27.890625 -13.921875 C 27.992188 -14.671875 28.046875 -15.460938 28.046875 -16.296875 Z M 28.046875 -16.296875 "></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g fill="#121212" fill-opacity="1">
+                            <g transform="translate(208.963656, 55.95717)">
+                                <g>
+                                    <path d="M 7.53125 -42.921875 L 13.375 -42.921875 L 13.375 -32.71875 L 22.328125 -32.71875 L 22.328125 -24.75 L 13.375 -24.75 L 13.375 -10.703125 C 13.375 -9.660156 13.476562 -8.8125 13.6875 -8.15625 C 13.894531 -7.53125 14.144531 -7.050781 14.4375 -6.71875 C 14.71875 -6.382812 15.066406 -6.15625 15.484375 -6.03125 C 15.734375 -5.945312 15.984375 -5.882812 16.234375 -5.84375 C 16.484375 -5.800781 16.734375 -5.78125 16.984375 -5.78125 C 17.847656 -5.78125 18.632812 -5.90625 19.34375 -6.15625 C 20.21875 -6.488281 21.023438 -6.863281 21.765625 -7.28125 L 23.390625 -8.15625 L 24.015625 -6.40625 L 25.5625 -1.921875 L 25.9375 -0.75 L 24.875 -0.125 C 23.96875 0.457031 22.75 1 21.21875 1.5 C 20.425781 1.78125 19.613281 1.984375 18.78125 2.109375 C 17.957031 2.234375 17.128906 2.296875 16.296875 2.296875 C 12.734375 2.296875 9.894531 1.113281 7.78125 -1.25 C 6.695312 -2.445312 5.90625 -3.875 5.40625 -5.53125 C 4.914062 -7.195312 4.671875 -9.066406 4.671875 -11.140625 L 4.671875 -24.75 L -0.9375 -24.75 L -0.9375 -32.71875 L 4.96875 -32.71875 L 5.96875 -41.546875 L 6.15625 -42.921875 Z M 7.53125 -42.921875 "></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g fill="#121212" fill-opacity="1">
+                            <g transform="translate(233.656391, 55.95717)">
+                                <g>
+                                    <path d="M 10.578125 1.5625 L 3.421875 1.5625 L 3.421875 -33.90625 L 12.125 -33.90625 L 12.125 1.5625 Z M 7.78125 -36.328125 C 6.28125 -36.328125 4.988281 -36.863281 3.90625 -37.9375 C 2.832031 -39.019531 2.296875 -40.304688 2.296875 -41.796875 C 2.296875 -43.410156 2.800781 -44.726562 3.8125 -45.75 C 4.832031 -46.769531 6.15625 -47.28125 7.78125 -47.28125 C 8.519531 -47.28125 9.222656 -47.144531 9.890625 -46.875 C 10.554688 -46.601562 11.144531 -46.207031 11.65625 -45.6875 C 12.175781 -45.164062 12.570312 -44.570312 12.84375 -43.90625 C 13.113281 -43.25 13.25 -42.546875 13.25 -41.796875 C 13.25 -40.179688 12.738281 -38.863281 11.71875 -37.84375 C 10.707031 -36.832031 9.394531 -36.328125 7.78125 -36.328125 Z M 7.78125 -36.328125 "></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g fill="#121212" fill-opacity="1">
+                            <g transform="translate(249.205965, 55.95717)">
+                                <g>
+                                    <path d="M 11.9375 -31.109375 C 12.269531 -31.390625 12.59375 -31.65625 12.90625 -31.90625 C 13.21875 -32.15625 13.5625 -32.382812 13.9375 -32.59375 C 14.4375 -32.925781 14.953125 -33.226562 15.484375 -33.5 C 16.023438 -33.769531 16.59375 -33.984375 17.1875 -34.140625 C 17.789062 -34.304688 18.394531 -34.429688 19 -34.515625 C 19.601562 -34.597656 20.238281 -34.640625 20.90625 -34.640625 C 23.800781 -34.640625 26.203125 -33.914062 28.109375 -32.46875 C 29.273438 -31.59375 30.234375 -30.515625 30.984375 -29.234375 C 32.015625 -30.398438 33.113281 -31.4375 34.28125 -32.34375 C 34.6875 -32.632812 35.117188 -32.90625 35.578125 -33.15625 C 36.035156 -33.40625 36.507812 -33.625 37 -33.8125 C 37.5 -34 38.007812 -34.148438 38.53125 -34.265625 C 39.050781 -34.390625 39.578125 -34.484375 40.109375 -34.546875 C 40.648438 -34.609375 41.210938 -34.640625 41.796875 -34.640625 C 42.046875 -34.640625 42.285156 -34.640625 42.515625 -34.640625 C 42.742188 -34.640625 42.972656 -34.628906 43.203125 -34.609375 C 43.429688 -34.585938 43.65625 -34.554688 43.875 -34.515625 C 44.101562 -34.472656 44.320312 -34.429688 44.53125 -34.390625 C 44.738281 -34.359375 44.945312 -34.320312 45.15625 -34.28125 C 45.363281 -34.238281 45.570312 -34.1875 45.78125 -34.125 C 45.988281 -34.0625 46.195312 -33.988281 46.40625 -33.90625 C 46.613281 -33.820312 46.820312 -33.738281 47.03125 -33.65625 C 47.394531 -33.488281 47.753906 -33.300781 48.109375 -33.09375 C 48.460938 -32.882812 48.796875 -32.65625 49.109375 -32.40625 C 49.421875 -32.15625 49.722656 -31.894531 50.015625 -31.625 C 50.304688 -31.351562 50.570312 -31.054688 50.8125 -30.734375 C 51.851562 -29.523438 52.601562 -28.09375 53.0625 -26.4375 C 53.5625 -24.820312 53.8125 -23.039062 53.8125 -21.09375 L 53.8125 1.5625 L 45.09375 1.5625 L 45.09375 -20.65625 C 45.09375 -22.5625 44.679688 -24.070312 43.859375 -25.1875 C 43.109375 -26.144531 42.09375 -26.625 40.8125 -26.625 C 40.0625 -26.625 39.351562 -26.476562 38.6875 -26.1875 C 37.945312 -25.851562 37.242188 -25.414062 36.578125 -24.875 C 35.867188 -24.300781 35.179688 -23.640625 34.515625 -22.890625 C 34.273438 -22.554688 34.007812 -22.203125 33.71875 -21.828125 C 33.425781 -21.460938 33.175781 -21.113281 32.96875 -20.78125 L 32.96875 1.5625 L 24.265625 1.5625 L 24.265625 -20.65625 C 24.265625 -22.5625 23.847656 -24.070312 23.015625 -25.1875 C 22.265625 -26.144531 21.25 -26.625 19.96875 -26.625 C 19.257812 -26.625 18.554688 -26.476562 17.859375 -26.1875 C 17.523438 -26.0625 17.171875 -25.894531 16.796875 -25.6875 C 16.421875 -25.476562 16.066406 -25.226562 15.734375 -24.9375 C 15.609375 -24.851562 15.484375 -24.757812 15.359375 -24.65625 C 15.234375 -24.5625 15.117188 -24.460938 15.015625 -24.359375 C 14.910156 -24.253906 14.796875 -24.148438 14.671875 -24.046875 C 14.554688 -23.941406 14.445312 -23.835938 14.34375 -23.734375 C 14.238281 -23.628906 14.132812 -23.515625 14.03125 -23.390625 C 13.925781 -23.265625 13.8125 -23.140625 13.6875 -23.015625 C 13.4375 -22.679688 13.164062 -22.335938 12.875 -21.984375 C 12.582031 -21.628906 12.332031 -21.289062 12.125 -20.96875 L 12.125 1.5625 L 3.421875 1.5625 L 3.421875 -33.90625 L 11.9375 -33.90625 Z M 11.9375 -31.109375 "></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g fill="#121212" fill-opacity="1">
+                            <g transform="translate(306.117405, 55.95717)">
+                                <g>
+                                    <path d="M 10.390625 -12.3125 C 10.847656 -10.488281 11.632812 -9.019531 12.75 -7.90625 C 14.195312 -6.488281 16.144531 -5.78125 18.59375 -5.78125 C 19.175781 -5.78125 19.738281 -5.800781 20.28125 -5.84375 C 20.820312 -5.882812 21.335938 -5.945312 21.828125 -6.03125 C 22.328125 -6.113281 22.804688 -6.21875 23.265625 -6.34375 C 23.722656 -6.46875 24.175781 -6.601562 24.625 -6.75 C 25.082031 -6.894531 25.53125 -7.050781 25.96875 -7.21875 C 26.40625 -7.382812 26.851562 -7.570312 27.3125 -7.78125 L 28.921875 -8.515625 L 29.421875 -6.78125 L 30.734375 -1.984375 L 31.109375 -0.6875 L 29.921875 -0.125 C 28.304688 0.625 26.503906 1.207031 24.515625 1.625 C 23.515625 1.863281 22.460938 2.035156 21.359375 2.140625 C 20.265625 2.242188 19.117188 2.296875 17.921875 2.296875 C 15.390625 2.296875 13.085938 1.882812 11.015625 1.0625 C 8.941406 0.1875 7.175781 -1.054688 5.71875 -2.671875 C 4.269531 -4.242188 3.148438 -6.191406 2.359375 -8.515625 C 1.617188 -10.753906 1.25 -13.304688 1.25 -16.171875 C 1.25 -18.742188 1.617188 -21.148438 2.359375 -23.390625 C 2.773438 -24.503906 3.253906 -25.554688 3.796875 -26.546875 C 4.335938 -27.546875 4.957031 -28.460938 5.65625 -29.296875 C 7.070312 -30.953125 8.773438 -32.257812 10.765625 -33.21875 C 12.753906 -34.164062 14.972656 -34.640625 17.421875 -34.640625 C 18.242188 -34.640625 19.039062 -34.585938 19.8125 -34.484375 C 20.582031 -34.390625 21.328125 -34.25 22.046875 -34.0625 C 22.773438 -33.875 23.472656 -33.632812 24.140625 -33.34375 C 25.128906 -32.882812 26.023438 -32.351562 26.828125 -31.75 C 27.640625 -31.15625 28.378906 -30.460938 29.046875 -29.671875 C 30.335938 -28.140625 31.3125 -26.378906 31.96875 -24.390625 C 32.257812 -23.390625 32.488281 -22.359375 32.65625 -21.296875 C 32.820312 -20.242188 32.90625 -19.175781 32.90625 -18.09375 C 32.90625 -17.8125 32.90625 -17.523438 32.90625 -17.234375 C 32.90625 -16.941406 32.894531 -16.640625 32.875 -16.328125 C 32.851562 -16.015625 32.84375 -15.710938 32.84375 -15.421875 C 32.84375 -15.128906 32.832031 -14.847656 32.8125 -14.578125 C 32.789062 -14.316406 32.757812 -14.039062 32.71875 -13.75 L 32.59375 -12.3125 Z M 17.296875 -26.6875 C 15.304688 -26.6875 13.6875 -26.019531 12.4375 -24.6875 C 11.9375 -24.15625 11.5 -23.492188 11.125 -22.703125 C 10.757812 -21.910156 10.472656 -21 10.265625 -19.96875 L 24.5625 -19.96875 C 24.363281 -21.957031 23.742188 -23.507812 22.703125 -24.625 C 21.421875 -26 19.617188 -26.6875 17.296875 -26.6875 Z M 17.296875 -26.6875 "></path>
+                                </g>
+                            </g>
+                        </g>
                     </svg>
                 </a>
             </div>
             <div class="flex items-center gap-5">
                 <nav class="hidden md:block">
-                    <ul role="list" class="flex items-center gap-8">
-                        <li><a class="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900  "
+                    <ul role="list" class="flex items-center gap-6">
+                        <li><a class="text-sm font-medium text-slate-600 transition hover:text-slate-900"
                                 href="/">Home</a></li>
-                        <li><a class="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900  "
+                        <li><a class="text-sm font-medium text-slate-600 transition hover:text-slate-900"
                                 target="_blank"
-                                href="https://join.slack.com/t/oneuptimesupport/shared_invite/zt-2pz5p1uhe-Fpmc7bv5ZE5xRMe7qJnwmA">Chat
-                                with us on Slack</a></li>
-                        <li><a class="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900  "
+                                href="https://join.slack.com/t/oneuptimesupport/shared_invite/zt-2pz5p1uhe-Fpmc7bv5ZE5xRMe7qJnwmA">Slack</a></li>
+                        <li><a class="text-sm font-medium text-slate-600 transition hover:text-slate-900"
                                 href="/support">Support</a></li>
-
-                                <li><a class="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900  "
-                                href="/reference/openapi" type="_blank">OpenAPI Spec</a></li>
-                        <li><a class="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900  "
+                        <li><a class="text-sm font-medium text-slate-600 transition hover:text-slate-900"
+                                href="/reference/openapi" type="_blank">OpenAPI</a></li>
+                        <li><a class="text-sm font-medium text-slate-600 transition hover:text-slate-900"
                                 href="https://github.com/oneuptime/oneuptime">GitHub</a></li>
                     </ul>
                 </nav>
-                <div class="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:"></div>
+                <div class="hidden md:block md:h-5 md:w-px md:bg-slate-200"></div>
                 <div class="flex gap-4">
                     <div class="contents lg:hidden">
                         <button type="button"
@@ -184,87 +340,287 @@
                     </button> -->
                 </div>
                 <div class="hidden min-[416px]:contents"><a
-                        class="inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700        "
+                        class="inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition rounded-full bg-indigo-600 py-1.5 px-4 text-white hover:bg-indigo-700 shadow-sm"
                         href="/dashboard">Sign in</a></div>
             </div>
         </div>
-        <nav class="hidden lg:mt-10 lg:block">
-            <ul role="list">
+        <nav class="hidden lg:block">
+            <div class="mb-6">
+                <span class="inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-600/20">
+                    API Reference
+                </span>
+            </div>
+            <ul role="list" class="space-y-6">
                 <li class="md:hidden"><a
-                        class="block py-1 text-sm text-zinc-600 transition hover:text-zinc-900  "
+                        class="block py-1 text-sm text-slate-600 transition hover:text-slate-900"
                         href="/">API</a></li>
                 <li class="md:hidden"><a
-                        class="block py-1 text-sm text-zinc-600 transition hover:text-zinc-900  "
+                        class="block py-1 text-sm text-slate-600 transition hover:text-slate-900"
                         href="/#">Documentation</a></li>
                 <li class="md:hidden"><a
-                        class="block py-1 text-sm text-zinc-600 transition hover:text-zinc-900  "
+                        class="block py-1 text-sm text-slate-600 transition hover:text-slate-900"
                         href="/#">Support</a></li>
-                <li class="relative mt-6 md:mt-0">
-                    <h6 class="text-sm font-semibold text-zinc-900 ">Guides</h6>
+                <li class="relative md:mt-0">
+                    <h6 class="text-xs font-semibold text-slate-900 uppercase tracking-wide">Guides</h6>
                     <div class="relative mt-3 pl-2">
-                        <div class="absolute inset-x-0 top-0 bg-zinc-800/2.5 will-change-transform "
-                            data-projection-id="32"
-                            style="height: 64px; top: 0px; border-radius: 8px; opacity: 1; transform: none; transform-origin: 50% 50% 0px;">
-                        </div>
-                        <div class="absolute inset-y-0 left-2 w-px bg-zinc-900/10 "
-                            style="transform: none; transform-origin: 50% 50% 0px;"></div>
-                        <div class="absolute left-2 h-6 w-px bg-emerald-500" data-projection-id="33"
-                            style="top: 4px; opacity: 1;"></div>
-                        <ul role="list" class="border-l border-transparent">
+                        <div class="absolute inset-y-0 left-2 w-px bg-slate-200"></div>
+                        <ul role="list" class="border-l border-transparent space-y-1">
                             <li class="relative">
-                                <a class="flex justify-between gap-2 py-1 pr-3 text-sm transition pl-4 text-zinc-900 "
-                                    href="/reference/introduction" aria-current="page"><span
+                                <a class="nav-link flex justify-between gap-2 py-1.5 pr-3 text-sm transition pl-4 text-slate-600 hover:text-slate-900 -ml-px border-l-2 border-transparent hover:border-slate-300"
+                                    href="/reference/introduction"><span
                                         class="truncate">Introduction</span></a>
-
                             </li>
-
-
-                            <li class="relative" style="transform: none; transform-origin: 50% 50% 0px;"><a
-                                    class="flex justify-between gap-2 py-1 pr-3 text-sm transition pl-4 text-zinc-600 hover:text-zinc-900  "
+                            <li class="relative"><a
+                                    class="nav-link flex justify-between gap-2 py-1.5 pr-3 text-sm transition pl-4 text-slate-600 hover:text-slate-900 -ml-px border-l-2 border-transparent hover:border-slate-300"
                                     href="/reference/authentication"><span class="truncate">Authentication</span></a></li>
-                            <li class="relative" style="transform: none; transform-origin: 50% 50% 0px;"><a
-                                    class="flex justify-between gap-2 py-1 pr-3 text-sm transition pl-4 text-zinc-600 hover:text-zinc-900  "
+                            <li class="relative"><a
+                                    class="nav-link flex justify-between gap-2 py-1.5 pr-3 text-sm transition pl-4 text-slate-600 hover:text-slate-900 -ml-px border-l-2 border-transparent hover:border-slate-300"
                                     href="/reference/pagination"><span class="truncate">Pagination</span></a></li>
-                            <li class="relative" style="transform: none; transform-origin: 50% 50% 0px;"><a
-                                    class="flex justify-between gap-2 py-1 pr-3 text-sm transition pl-4 text-zinc-600 hover:text-zinc-900  "
+                            <li class="relative"><a
+                                    class="nav-link flex justify-between gap-2 py-1.5 pr-3 text-sm transition pl-4 text-slate-600 hover:text-slate-900 -ml-px border-l-2 border-transparent hover:border-slate-300"
                                     href="/reference/permissions"><span class="truncate">Permissions</span></a></li>
-                            <li class="relative" style="transform: none; transform-origin: 50% 50% 0px;"><a
-                                    class="flex justify-between gap-2 py-1 pr-3 text-sm transition pl-4 text-zinc-600 hover:text-zinc-900  "
+                            <li class="relative"><a
+                                    class="nav-link flex justify-between gap-2 py-1.5 pr-3 text-sm transition pl-4 text-slate-600 hover:text-slate-900 -ml-px border-l-2 border-transparent hover:border-slate-300"
                                     href="/reference/data-types"><span class="truncate">Data Types</span></a></li>
-                            <li class="relative" style="transform: none; transform-origin: 50% 50% 0px;"><a
-                                    class="flex justify-between gap-2 py-1 pr-3 text-sm transition pl-4 text-zinc-600 hover:text-zinc-900  "
+                            <li class="relative"><a
+                                    class="nav-link flex justify-between gap-2 py-1.5 pr-3 text-sm transition pl-4 text-slate-600 hover:text-slate-900 -ml-px border-l-2 border-transparent hover:border-slate-300"
                                     href="/reference/errors"><span class="truncate">Errors</span></a></li>
-
-                                    <li class="relative" style="transform: none; transform-origin: 50% 50% 0px;"><a
-                                    class="flex justify-between gap-2 py-1 pr-3 text-sm transition pl-4 text-zinc-600 hover:text-zinc-900  "
+                            <li class="relative"><a
+                                    class="nav-link flex justify-between gap-2 py-1.5 pr-3 text-sm transition pl-4 text-slate-600 hover:text-slate-900 -ml-px border-l-2 border-transparent hover:border-slate-300"
                                     href="/reference/openapi"><span class="truncate">OpenAPI Spec</span></a></li>
-
-
                         </ul>
                     </div>
                 </li>
                 <li class="relative mt-6">
-                    <h6 class="text-sm font-semibold text-zinc-900 "
-                        style="transform: none; transform-origin: 50% 50% 0px;">Resources</h6>
+                    <h6 class="text-xs font-semibold text-slate-900 uppercase tracking-wide">Resources</h6>
                     <div class="relative mt-3 pl-2">
-                        <div class="absolute inset-y-0 left-2 w-px bg-zinc-900/10 "
-                            style="transform: none; transform-origin: 50% 50% 0px;"></div>
-                        <ul role="list" class="border-l border-transparent">
+                        <div class="absolute inset-y-0 left-2 w-px bg-slate-200"></div>
+                        <ul role="list" class="border-l border-transparent space-y-1">
                             <% for(var i=0; i<resources.length; i++) {%>
-                                <li class="relative" style="transform: none; transform-origin: 50% 50% 0px;"><a
-                                        class="flex justify-between gap-2 py-1 pr-3 text-sm transition pl-4 text-zinc-600 hover:text-zinc-900  "
+                                <li class="relative"><a
+                                        class="nav-link flex justify-between gap-2 py-1.5 pr-3 text-sm transition pl-4 text-slate-600 hover:text-slate-900 -ml-px border-l-2 border-transparent hover:border-slate-300"
                                         href="/reference/<%= resources[i].path -%>"><span class="truncate">
                                             <%= resources[i].name -%>
                                         </span></a></li>
-                                <% } %>
-
+                            <% } %>
                         </ul>
                     </div>
                 </li>
                 <li class="sticky bottom-0 z-10 mt-6 min-[416px]:hidden"><a
-                        class="inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700   :bg-emerald-400 w-full"
+                        class="inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition rounded-full bg-indigo-600 py-1.5 px-4 text-white hover:bg-indigo-700 shadow-sm w-full"
                         href="/#">Sign in</a></li>
             </ul>
         </nav>
     </div>
-</header>
+</header>
+
+<!-- Mobile Navigation Overlay -->
+<div id="mobile-menu-overlay" class="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-sm hidden lg:hidden" aria-hidden="true"></div>
+
+<!-- Mobile Navigation Panel -->
+<div id="mobile-menu-panel" class="fixed inset-y-0 left-0 z-50 w-80 max-w-[calc(100%-3rem)] bg-white shadow-2xl transform -translate-x-full transition-transform duration-300 ease-in-out lg:hidden overflow-y-auto">
+   <div class="p-6">
+      <div class="flex items-center justify-between mb-8">
+         <a aria-label="Home" href="/">
+            <svg class="h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 75" preserveAspectRatio="xMidYMid meet">
+               <defs>
+                  <g></g>
+                  <clipPath id="mobile-menu-1d83d73318">
+                     <path d="M 351.792969 35.324219 L 367.53125 35.324219 L 367.53125 51.0625 L 351.792969 51.0625 Z M 351.792969 35.324219 " clip-rule="nonzero"></path>
+                  </clipPath>
+                  <clipPath id="mobile-menu-32c1ad7ad2">
+                     <path d="M 366.480469 51.03125 L 352.816406 51.03125 C 352.253906 51.03125 351.792969 50.574219 351.792969 50.007812 L 351.792969 36.347656 C 351.792969 35.785156 352.253906 35.324219 352.816406 35.324219 L 366.480469 35.324219 C 367.042969 35.324219 367.5 35.785156 367.5 36.347656 L 367.5 50.007812 C 367.5 50.574219 367.042969 51.03125 366.480469 51.03125 " clip-rule="nonzero"></path>
+                  </clipPath>
+               </defs>
+               <g clip-path="url(#mobile-menu-1d83d73318)">
+                  <g clip-path="url(#mobile-menu-32c1ad7ad2)">
+                     <path fill="#7ed957" d="M 351.792969 35.324219 L 367.53125 35.324219 L 367.53125 51.0625 L 351.792969 51.0625 Z M 351.792969 35.324219 " fill-opacity="1" fill-rule="nonzero"></path>
+                  </g>
+               </g>
+               <g fill="#121212" fill-opacity="1">
+                  <g transform="translate(11.173064, 55.95717)">
+                     <g>
+                        <path d="M 1.5625 -21.828125 C 1.5625 -25.191406 2.054688 -28.320312 3.046875 -31.21875 C 4.046875 -34.164062 5.5 -36.71875 7.40625 -38.875 C 9.3125 -41.070312 11.632812 -42.773438 14.375 -43.984375 C 15.738281 -44.597656 17.195312 -45.0625 18.75 -45.375 C 20.3125 -45.6875 21.941406 -45.84375 23.640625 -45.84375 C 25.335938 -45.84375 26.960938 -45.6875 28.515625 -45.375 C 30.078125 -45.0625 31.539062 -44.578125 32.90625 -43.921875 C 34.269531 -43.296875 35.53125 -42.546875 36.6875 -41.671875 C 37.851562 -40.804688 38.914062 -39.8125 39.875 -38.6875 C 41.78125 -36.53125 43.25 -34.003906 44.28125 -31.109375 C 45.28125 -28.203125 45.78125 -25.109375 45.78125 -21.828125 C 45.78125 -18.554688 45.28125 -15.46875 44.28125 -12.5625 C 43.957031 -11.613281 43.578125 -10.679688 43.140625 -9.765625 C 42.703125 -8.847656 42.210938 -7.984375 41.671875 -7.171875 C 41.140625 -6.367188 40.5625 -5.597656 39.9375 -4.859375 C 38.976562 -3.734375 37.90625 -2.734375 36.71875 -1.859375 C 35.539062 -0.992188 34.289062 -0.25 32.96875 0.375 C 30.226562 1.65625 27.113281 2.296875 23.625 2.296875 C 20.144531 2.296875 17.039062 1.65625 14.3125 0.375 C 13.644531 0.0390625 13 -0.3125 12.375 -0.6875 C 11.757812 -1.0625 11.160156 -1.460938 10.578125 -1.890625 C 9.992188 -2.328125 9.429688 -2.796875 8.890625 -3.296875 C 8.359375 -3.796875 7.863281 -4.316406 7.40625 -4.859375 C 5.5 -7.054688 4.046875 -9.625 3.046875 -12.5625 C 2.054688 -15.46875 1.5625 -18.554688 1.5625 -21.828125 Z M 10.703125 -21.828125 C 10.703125 -20.796875 10.773438 -19.769531 10.921875 -18.75 C 11.066406 -17.738281 11.28125 -16.734375 11.5625 -15.734375 C 11.894531 -14.785156 12.269531 -13.882812 12.6875 -13.03125 C 13.101562 -12.175781 13.601562 -11.378906 14.1875 -10.640625 C 14.351562 -10.390625 14.535156 -10.160156 14.734375 -9.953125 C 14.941406 -9.742188 15.148438 -9.535156 15.359375 -9.328125 C 15.566406 -9.117188 15.785156 -8.910156 16.015625 -8.703125 C 16.242188 -8.492188 16.484375 -8.304688 16.734375 -8.140625 C 16.984375 -7.984375 17.234375 -7.820312 17.484375 -7.65625 C 17.734375 -7.488281 17.976562 -7.320312 18.21875 -7.15625 C 19.800781 -6.320312 21.609375 -5.90625 23.640625 -5.90625 C 24.378906 -5.90625 25.082031 -5.945312 25.75 -6.03125 C 26.414062 -6.113281 27.035156 -6.25 27.609375 -6.4375 C 28.191406 -6.625 28.734375 -6.84375 29.234375 -7.09375 C 30.847656 -7.875 32.195312 -8.953125 33.28125 -10.328125 C 33.65625 -10.785156 33.984375 -11.269531 34.265625 -11.78125 C 34.554688 -12.300781 34.828125 -12.863281 35.078125 -13.46875 C 35.328125 -14.070312 35.554688 -14.679688 35.765625 -15.296875 C 36.347656 -17.328125 36.640625 -19.503906 36.640625 -21.828125 C 36.640625 -23.898438 36.328125 -25.894531 35.703125 -27.8125 C 35.117188 -29.71875 34.25 -31.414062 33.09375 -32.90625 C 31.96875 -34.351562 30.617188 -35.515625 29.046875 -36.390625 C 27.472656 -37.222656 25.671875 -37.640625 23.640625 -37.640625 C 23.140625 -37.640625 22.640625 -37.617188 22.140625 -37.578125 C 21.640625 -37.535156 21.160156 -37.460938 20.703125 -37.359375 C 20.253906 -37.253906 19.820312 -37.128906 19.40625 -36.984375 C 18.988281 -36.835938 18.59375 -36.660156 18.21875 -36.453125 C 17.394531 -36.078125 16.648438 -35.617188 15.984375 -35.078125 C 15.316406 -34.546875 14.71875 -33.925781 14.1875 -33.21875 C 13.0625 -31.8125 12.1875 -30.148438 11.5625 -28.234375 C 10.988281 -26.242188 10.703125 -24.109375 10.703125 -21.828125 Z M 10.703125 -21.828125 "></path>
+                     </g>
+                  </g>
+               </g>
+               <g fill="#121212" fill-opacity="1">
+                  <g transform="translate(58.505968, 55.95717)">
+                     <g>
+                        <path d="M 11.9375 -31.046875 C 12.269531 -31.367188 12.601562 -31.65625 12.9375 -31.90625 C 13.269531 -32.15625 13.625 -32.382812 14 -32.59375 C 16.070312 -33.957031 18.5 -34.640625 21.28125 -34.640625 C 23.3125 -34.640625 25.113281 -34.316406 26.6875 -33.671875 C 28.257812 -33.035156 29.585938 -32.078125 30.671875 -30.796875 C 32.703125 -28.304688 33.71875 -25.070312 33.71875 -21.09375 L 33.71875 1.5625 L 25 1.5625 L 25 -20.46875 C 25 -21.164062 24.945312 -21.804688 24.84375 -22.390625 C 24.738281 -22.972656 24.59375 -23.488281 24.40625 -23.9375 C 24.226562 -24.394531 23.992188 -24.789062 23.703125 -25.125 C 23.453125 -25.457031 23.171875 -25.738281 22.859375 -25.96875 C 22.546875 -26.195312 22.179688 -26.363281 21.765625 -26.46875 C 21.359375 -26.570312 20.882812 -26.625 20.34375 -26.625 C 19.59375 -26.625 18.84375 -26.476562 18.09375 -26.1875 C 17.3125 -25.894531 16.546875 -25.476562 15.796875 -24.9375 C 15.054688 -24.363281 14.351562 -23.722656 13.6875 -23.015625 C 13.4375 -22.679688 13.164062 -22.335938 12.875 -21.984375 C 12.582031 -21.628906 12.332031 -21.289062 12.125 -20.96875 L 12.125 1.5625 L 3.421875 1.5625 L 3.421875 -33.90625 L 11.9375 -33.90625 Z M 11.9375 -31.046875 "></path>
+                     </g>
+                  </g>
+               </g>
+               <g fill="#121212" fill-opacity="1">
+                  <g transform="translate(95.327364, 55.95717)">
+                     <g>
+                        <path d="M 10.390625 -12.3125 C 10.847656 -10.488281 11.632812 -9.019531 12.75 -7.90625 C 14.195312 -6.488281 16.144531 -5.78125 18.59375 -5.78125 C 19.175781 -5.78125 19.738281 -5.800781 20.28125 -5.84375 C 20.820312 -5.882812 21.335938 -5.945312 21.828125 -6.03125 C 22.328125 -6.113281 22.804688 -6.21875 23.265625 -6.34375 C 23.722656 -6.46875 24.175781 -6.601562 24.625 -6.75 C 25.082031 -6.894531 25.53125 -7.050781 25.96875 -7.21875 C 26.40625 -7.382812 26.851562 -7.570312 27.3125 -7.78125 L 28.921875 -8.515625 L 29.421875 -6.78125 L 30.734375 -1.984375 L 31.109375 -0.6875 L 29.921875 -0.125 C 28.304688 0.625 26.503906 1.207031 24.515625 1.625 C 23.515625 1.863281 22.460938 2.035156 21.359375 2.140625 C 20.265625 2.242188 19.117188 2.296875 17.921875 2.296875 C 15.390625 2.296875 13.085938 1.882812 11.015625 1.0625 C 8.941406 0.1875 7.175781 -1.054688 5.71875 -2.671875 C 4.269531 -4.242188 3.148438 -6.191406 2.359375 -8.515625 C 1.617188 -10.753906 1.25 -13.304688 1.25 -16.171875 C 1.25 -18.742188 1.617188 -21.148438 2.359375 -23.390625 C 2.773438 -24.503906 3.253906 -25.554688 3.796875 -26.546875 C 4.335938 -27.546875 4.957031 -28.460938 5.65625 -29.296875 C 7.070312 -30.953125 8.773438 -32.257812 10.765625 -33.21875 C 12.753906 -34.164062 14.972656 -34.640625 17.421875 -34.640625 C 18.242188 -34.640625 19.039062 -34.585938 19.8125 -34.484375 C 20.582031 -34.390625 21.328125 -34.25 22.046875 -34.0625 C 22.773438 -33.875 23.472656 -33.632812 24.140625 -33.34375 C 25.128906 -32.882812 26.023438 -32.351562 26.828125 -31.75 C 27.640625 -31.15625 28.378906 -30.460938 29.046875 -29.671875 C 30.335938 -28.140625 31.3125 -26.378906 31.96875 -24.390625 C 32.257812 -23.390625 32.488281 -22.359375 32.65625 -21.296875 C 32.820312 -20.242188 32.90625 -19.175781 32.90625 -18.09375 C 32.90625 -17.8125 32.90625 -17.523438 32.90625 -17.234375 C 32.90625 -16.941406 32.894531 -16.640625 32.875 -16.328125 C 32.851562 -16.015625 32.84375 -15.710938 32.84375 -15.421875 C 32.84375 -15.128906 32.832031 -14.847656 32.8125 -14.578125 C 32.789062 -14.316406 32.757812 -14.039062 32.71875 -13.75 L 32.59375 -12.3125 Z M 17.296875 -26.6875 C 15.304688 -26.6875 13.6875 -26.019531 12.4375 -24.6875 C 11.9375 -24.15625 11.5 -23.492188 11.125 -22.703125 C 10.757812 -21.910156 10.472656 -21 10.265625 -19.96875 L 24.5625 -19.96875 C 24.363281 -21.957031 23.742188 -23.507812 22.703125 -24.625 C 21.421875 -26 19.617188 -26.6875 17.296875 -26.6875 Z M 17.296875 -26.6875 "></path>
+                     </g>
+                  </g>
+               </g>
+               <g fill="#121212" fill-opacity="1">
+                  <g transform="translate(129.163241, 55.95717)">
+                     <g>
+                        <path d="M 31.28125 -45.09375 L 38.5625 -45.09375 L 38.5625 -16.796875 C 38.5625 -13.890625 38.148438 -11.253906 37.328125 -8.890625 C 36.492188 -6.523438 35.289062 -4.492188 33.71875 -2.796875 C 33.382812 -2.460938 33.039062 -2.148438 32.6875 -1.859375 C 32.332031 -1.578125 31.976562 -1.289062 31.625 -1 C 31.28125 -0.707031 30.910156 -0.445312 30.515625 -0.21875 C 30.117188 0.0078125 29.710938 0.226562 29.296875 0.4375 C 28.878906 0.644531 28.441406 0.832031 27.984375 1 C 25.828125 1.863281 23.425781 2.296875 20.78125 2.296875 C 15.257812 2.296875 10.925781 0.660156 7.78125 -2.609375 C 4.664062 -5.890625 3.109375 -10.535156 3.109375 -16.546875 L 3.109375 -45.09375 L 12.125 -45.09375 L 12.125 -17.484375 C 12.125 -13.617188 12.875 -10.691406 14.375 -8.703125 C 15.03125 -7.796875 15.875 -7.113281 16.90625 -6.65625 C 17.945312 -6.195312 19.238281 -5.96875 20.78125 -5.96875 C 23.800781 -5.96875 26.019531 -6.878906 27.4375 -8.703125 C 28.96875 -10.648438 29.734375 -13.578125 29.734375 -17.484375 L 29.734375 -45.09375 Z M 31.28125 -45.09375 "></path>
+                     </g>
+                  </g>
+               </g>
+               <g fill="#121212" fill-opacity="1">
+                  <g transform="translate(170.836098, 55.95717)">
+                     <g>
+                        <path d="M 3.671875 -33.90625 C 4.492188 -33.90625 5.257812 -33.84375 5.96875 -33.71875 C 6.675781 -33.59375 7.347656 -33.394531 7.984375 -33.125 C 8.628906 -32.851562 9.222656 -32.507812 9.765625 -32.09375 C 10.304688 -31.675781 10.765625 -31.179688 11.140625 -30.609375 C 11.835938 -31.304688 12.644531 -31.925781 13.5625 -32.46875 C 13.8125 -32.632812 14.0625 -32.789062 14.3125 -32.9375 C 14.5625 -33.082031 14.828125 -33.21875 15.109375 -33.34375 C 15.398438 -33.46875 15.691406 -33.582031 15.984375 -33.6875 C 16.273438 -33.789062 16.566406 -33.90625 16.859375 -34.03125 C 17.523438 -34.238281 18.207031 -34.390625 18.90625 -34.484375 C 19.613281 -34.585938 20.34375 -34.640625 21.09375 -34.640625 C 23.164062 -34.640625 25.164062 -34.222656 27.09375 -33.390625 C 29.019531 -32.566406 30.707031 -31.367188 32.15625 -29.796875 C 33.613281 -28.222656 34.753906 -26.316406 35.578125 -24.078125 C 35.867188 -23.328125 36.109375 -22.535156 36.296875 -21.703125 C 36.484375 -20.878906 36.628906 -20.03125 36.734375 -19.15625 C 36.835938 -18.289062 36.890625 -17.398438 36.890625 -16.484375 C 36.890625 -13.742188 36.472656 -11.210938 35.640625 -8.890625 C 35.222656 -7.773438 34.734375 -6.71875 34.171875 -5.71875 C 33.617188 -4.726562 32.96875 -3.816406 32.21875 -2.984375 C 31.96875 -2.648438 31.6875 -2.335938 31.375 -2.046875 C 31.070312 -1.765625 30.753906 -1.476562 30.421875 -1.1875 C 30.085938 -0.894531 29.753906 -0.625 29.421875 -0.375 C 29.085938 -0.125 28.734375 0.101562 28.359375 0.3125 C 27.992188 0.519531 27.625 0.707031 27.25 0.875 C 26.289062 1.375 25.300781 1.734375 24.28125 1.953125 C 23.269531 2.179688 22.25 2.296875 21.21875 2.296875 C 19.019531 2.296875 17.003906 1.863281 15.171875 1 C 14.515625 0.707031 13.894531 0.375 13.3125 0 L 13.3125 15.234375 L 4.609375 15.234375 L 4.609375 -24.078125 C 4.609375 -25.023438 4.441406 -25.644531 4.109375 -25.9375 C 3.734375 -26.269531 3.191406 -26.4375 2.484375 -26.4375 L 0.4375 -26.4375 L 1 -28.421875 L 2.171875 -32.78125 L 2.484375 -33.90625 Z M 28.046875 -16.296875 C 28.046875 -17.171875 27.984375 -17.976562 27.859375 -18.71875 C 27.742188 -19.46875 27.570312 -20.160156 27.34375 -20.796875 C 27.113281 -21.441406 26.851562 -22.035156 26.5625 -22.578125 C 26.269531 -23.117188 25.9375 -23.617188 25.5625 -24.078125 C 24.820312 -24.941406 23.960938 -25.59375 22.984375 -26.03125 C 22.003906 -26.46875 20.957031 -26.6875 19.84375 -26.6875 C 19.09375 -26.6875 18.382812 -26.59375 17.71875 -26.40625 C 17.0625 -26.21875 16.441406 -25.9375 15.859375 -25.5625 C 14.785156 -24.894531 13.9375 -24.191406 13.3125 -23.453125 L 13.3125 -8.703125 C 14.1875 -7.921875 15.140625 -7.257812 16.171875 -6.71875 C 17.335938 -6.09375 18.644531 -5.78125 20.09375 -5.78125 C 21.25 -5.78125 22.304688 -6.007812 23.265625 -6.46875 C 24.210938 -6.96875 25.039062 -7.648438 25.75 -8.515625 C 26.125 -8.972656 26.445312 -9.472656 26.71875 -10.015625 C 26.988281 -10.554688 27.226562 -11.15625 27.4375 -11.8125 C 27.644531 -12.476562 27.796875 -13.179688 27.890625 -13.921875 C 27.992188 -14.671875 28.046875 -15.460938 28.046875 -16.296875 Z M 28.046875 -16.296875 "></path>
+                     </g>
+                  </g>
+               </g>
+               <g fill="#121212" fill-opacity="1">
+                  <g transform="translate(208.963656, 55.95717)">
+                     <g>
+                        <path d="M 7.53125 -42.921875 L 13.375 -42.921875 L 13.375 -32.71875 L 22.328125 -32.71875 L 22.328125 -24.75 L 13.375 -24.75 L 13.375 -10.703125 C 13.375 -9.660156 13.476562 -8.8125 13.6875 -8.15625 C 13.894531 -7.53125 14.144531 -7.050781 14.4375 -6.71875 C 14.71875 -6.382812 15.066406 -6.15625 15.484375 -6.03125 C 15.734375 -5.945312 15.984375 -5.882812 16.234375 -5.84375 C 16.484375 -5.800781 16.734375 -5.78125 16.984375 -5.78125 C 17.847656 -5.78125 18.632812 -5.90625 19.34375 -6.15625 C 20.21875 -6.488281 21.023438 -6.863281 21.765625 -7.28125 L 23.390625 -8.15625 L 24.015625 -6.40625 L 25.5625 -1.921875 L 25.9375 -0.75 L 24.875 -0.125 C 23.96875 0.457031 22.75 1 21.21875 1.5 C 20.425781 1.78125 19.613281 1.984375 18.78125 2.109375 C 17.957031 2.234375 17.128906 2.296875 16.296875 2.296875 C 12.734375 2.296875 9.894531 1.113281 7.78125 -1.25 C 6.695312 -2.445312 5.90625 -3.875 5.40625 -5.53125 C 4.914062 -7.195312 4.671875 -9.066406 4.671875 -11.140625 L 4.671875 -24.75 L -0.9375 -24.75 L -0.9375 -32.71875 L 4.96875 -32.71875 L 5.96875 -41.546875 L 6.15625 -42.921875 Z M 7.53125 -42.921875 "></path>
+                     </g>
+                  </g>
+               </g>
+               <g fill="#121212" fill-opacity="1">
+                  <g transform="translate(233.656391, 55.95717)">
+                     <g>
+                        <path d="M 10.578125 1.5625 L 3.421875 1.5625 L 3.421875 -33.90625 L 12.125 -33.90625 L 12.125 1.5625 Z M 7.78125 -36.328125 C 6.28125 -36.328125 4.988281 -36.863281 3.90625 -37.9375 C 2.832031 -39.019531 2.296875 -40.304688 2.296875 -41.796875 C 2.296875 -43.410156 2.800781 -44.726562 3.8125 -45.75 C 4.832031 -46.769531 6.15625 -47.28125 7.78125 -47.28125 C 8.519531 -47.28125 9.222656 -47.144531 9.890625 -46.875 C 10.554688 -46.601562 11.144531 -46.207031 11.65625 -45.6875 C 12.175781 -45.164062 12.570312 -44.570312 12.84375 -43.90625 C 13.113281 -43.25 13.25 -42.546875 13.25 -41.796875 C 13.25 -40.179688 12.738281 -38.863281 11.71875 -37.84375 C 10.707031 -36.832031 9.394531 -36.328125 7.78125 -36.328125 Z M 7.78125 -36.328125 "></path>
+                     </g>
+                  </g>
+               </g>
+               <g fill="#121212" fill-opacity="1">
+                  <g transform="translate(249.205965, 55.95717)">
+                     <g>
+                        <path d="M 11.9375 -31.109375 C 12.269531 -31.390625 12.59375 -31.65625 12.90625 -31.90625 C 13.21875 -32.15625 13.5625 -32.382812 13.9375 -32.59375 C 14.4375 -32.925781 14.953125 -33.226562 15.484375 -33.5 C 16.023438 -33.769531 16.59375 -33.984375 17.1875 -34.140625 C 17.789062 -34.304688 18.394531 -34.429688 19 -34.515625 C 19.601562 -34.597656 20.238281 -34.640625 20.90625 -34.640625 C 23.800781 -34.640625 26.203125 -33.914062 28.109375 -32.46875 C 29.273438 -31.59375 30.234375 -30.515625 30.984375 -29.234375 C 32.015625 -30.398438 33.113281 -31.4375 34.28125 -32.34375 C 34.6875 -32.632812 35.117188 -32.90625 35.578125 -33.15625 C 36.035156 -33.40625 36.507812 -33.625 37 -33.8125 C 37.5 -34 38.007812 -34.148438 38.53125 -34.265625 C 39.050781 -34.390625 39.578125 -34.484375 40.109375 -34.546875 C 40.648438 -34.609375 41.210938 -34.640625 41.796875 -34.640625 C 42.046875 -34.640625 42.285156 -34.640625 42.515625 -34.640625 C 42.742188 -34.640625 42.972656 -34.628906 43.203125 -34.609375 C 43.429688 -34.585938 43.65625 -34.554688 43.875 -34.515625 C 44.101562 -34.472656 44.320312 -34.429688 44.53125 -34.390625 C 44.738281 -34.359375 44.945312 -34.320312 45.15625 -34.28125 C 45.363281 -34.238281 45.570312 -34.1875 45.78125 -34.125 C 45.988281 -34.0625 46.195312 -33.988281 46.40625 -33.90625 C 46.613281 -33.820312 46.820312 -33.738281 47.03125 -33.65625 C 47.394531 -33.488281 47.753906 -33.300781 48.109375 -33.09375 C 48.460938 -32.882812 48.796875 -32.65625 49.109375 -32.40625 C 49.421875 -32.15625 49.722656 -31.894531 50.015625 -31.625 C 50.304688 -31.351562 50.570312 -31.054688 50.8125 -30.734375 C 51.851562 -29.523438 52.601562 -28.09375 53.0625 -26.4375 C 53.5625 -24.820312 53.8125 -23.039062 53.8125 -21.09375 L 53.8125 1.5625 L 45.09375 1.5625 L 45.09375 -20.65625 C 45.09375 -22.5625 44.679688 -24.070312 43.859375 -25.1875 C 43.109375 -26.144531 42.09375 -26.625 40.8125 -26.625 C 40.0625 -26.625 39.351562 -26.476562 38.6875 -26.1875 C 37.945312 -25.851562 37.242188 -25.414062 36.578125 -24.875 C 35.867188 -24.300781 35.179688 -23.640625 34.515625 -22.890625 C 34.273438 -22.554688 34.007812 -22.203125 33.71875 -21.828125 C 33.425781 -21.460938 33.175781 -21.113281 32.96875 -20.78125 L 32.96875 1.5625 L 24.265625 1.5625 L 24.265625 -20.65625 C 24.265625 -22.5625 23.847656 -24.070312 23.015625 -25.1875 C 22.265625 -26.144531 21.25 -26.625 19.96875 -26.625 C 19.257812 -26.625 18.554688 -26.476562 17.859375 -26.1875 C 17.523438 -26.0625 17.171875 -25.894531 16.796875 -25.6875 C 16.421875 -25.476562 16.066406 -25.226562 15.734375 -24.9375 C 15.609375 -24.851562 15.484375 -24.757812 15.359375 -24.65625 C 15.234375 -24.5625 15.117188 -24.460938 15.015625 -24.359375 C 14.910156 -24.253906 14.796875 -24.148438 14.671875 -24.046875 C 14.554688 -23.941406 14.445312 -23.835938 14.34375 -23.734375 C 14.238281 -23.628906 14.132812 -23.515625 14.03125 -23.390625 C 13.925781 -23.265625 13.8125 -23.140625 13.6875 -23.015625 C 13.4375 -22.679688 13.164062 -22.335938 12.875 -21.984375 C 12.582031 -21.628906 12.332031 -21.289062 12.125 -20.96875 L 12.125 1.5625 L 3.421875 1.5625 L 3.421875 -33.90625 L 11.9375 -33.90625 Z M 11.9375 -31.109375 "></path>
+                     </g>
+                  </g>
+               </g>
+               <g fill="#121212" fill-opacity="1">
+                  <g transform="translate(306.117405, 55.95717)">
+                     <g>
+                        <path d="M 10.390625 -12.3125 C 10.847656 -10.488281 11.632812 -9.019531 12.75 -7.90625 C 14.195312 -6.488281 16.144531 -5.78125 18.59375 -5.78125 C 19.175781 -5.78125 19.738281 -5.800781 20.28125 -5.84375 C 20.820312 -5.882812 21.335938 -5.945312 21.828125 -6.03125 C 22.328125 -6.113281 22.804688 -6.21875 23.265625 -6.34375 C 23.722656 -6.46875 24.175781 -6.601562 24.625 -6.75 C 25.082031 -6.894531 25.53125 -7.050781 25.96875 -7.21875 C 26.40625 -7.382812 26.851562 -7.570312 27.3125 -7.78125 L 28.921875 -8.515625 L 29.421875 -6.78125 L 30.734375 -1.984375 L 31.109375 -0.6875 L 29.921875 -0.125 C 28.304688 0.625 26.503906 1.207031 24.515625 1.625 C 23.515625 1.863281 22.460938 2.035156 21.359375 2.140625 C 20.265625 2.242188 19.117188 2.296875 17.921875 2.296875 C 15.390625 2.296875 13.085938 1.882812 11.015625 1.0625 C 8.941406 0.1875 7.175781 -1.054688 5.71875 -2.671875 C 4.269531 -4.242188 3.148438 -6.191406 2.359375 -8.515625 C 1.617188 -10.753906 1.25 -13.304688 1.25 -16.171875 C 1.25 -18.742188 1.617188 -21.148438 2.359375 -23.390625 C 2.773438 -24.503906 3.253906 -25.554688 3.796875 -26.546875 C 4.335938 -27.546875 4.957031 -28.460938 5.65625 -29.296875 C 7.070312 -30.953125 8.773438 -32.257812 10.765625 -33.21875 C 12.753906 -34.164062 14.972656 -34.640625 17.421875 -34.640625 C 18.242188 -34.640625 19.039062 -34.585938 19.8125 -34.484375 C 20.582031 -34.390625 21.328125 -34.25 22.046875 -34.0625 C 22.773438 -33.875 23.472656 -33.632812 24.140625 -33.34375 C 25.128906 -32.882812 26.023438 -32.351562 26.828125 -31.75 C 27.640625 -31.15625 28.378906 -30.460938 29.046875 -29.671875 C 30.335938 -28.140625 31.3125 -26.378906 31.96875 -24.390625 C 32.257812 -23.390625 32.488281 -22.359375 32.65625 -21.296875 C 32.820312 -20.242188 32.90625 -19.175781 32.90625 -18.09375 C 32.90625 -17.8125 32.90625 -17.523438 32.90625 -17.234375 C 32.90625 -16.941406 32.894531 -16.640625 32.875 -16.328125 C 32.851562 -16.015625 32.84375 -15.710938 32.84375 -15.421875 C 32.84375 -15.128906 32.832031 -14.847656 32.8125 -14.578125 C 32.789062 -14.316406 32.757812 -14.039062 32.71875 -13.75 L 32.59375 -12.3125 Z M 17.296875 -26.6875 C 15.304688 -26.6875 13.6875 -26.019531 12.4375 -24.6875 C 11.9375 -24.15625 11.5 -23.492188 11.125 -22.703125 C 10.757812 -21.910156 10.472656 -21 10.265625 -19.96875 L 24.5625 -19.96875 C 24.363281 -21.957031 23.742188 -23.507812 22.703125 -24.625 C 21.421875 -26 19.617188 -26.6875 17.296875 -26.6875 Z M 17.296875 -26.6875 "></path>
+                     </g>
+                  </g>
+               </g>
+            </svg>
+         </a>
+         <button type="button" id="mobile-menu-close" class="flex h-8 w-8 items-center justify-center rounded-lg hover:bg-slate-100 transition">
+            <svg class="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+         </button>
+      </div>
+
+      <div class="mb-6">
+         <span class="inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-600/20">
+            API Reference
+         </span>
+      </div>
+
+      <nav>
+         <ul role="list" class="space-y-6">
+            <li class="relative">
+               <h6 class="text-xs font-semibold text-slate-900 uppercase tracking-wide mb-3">Guides</h6>
+               <ul role="list" class="space-y-1 border-l border-slate-200 ml-2">
+                  <li><a class="mobile-nav-link block py-2 pl-4 text-sm text-slate-600 hover:text-slate-900 border-l-2 border-transparent hover:border-slate-300 -ml-px transition" href="/reference/introduction">Introduction</a></li>
+                  <li><a class="mobile-nav-link block py-2 pl-4 text-sm text-slate-600 hover:text-slate-900 border-l-2 border-transparent hover:border-slate-300 -ml-px transition" href="/reference/authentication">Authentication</a></li>
+                  <li><a class="mobile-nav-link block py-2 pl-4 text-sm text-slate-600 hover:text-slate-900 border-l-2 border-transparent hover:border-slate-300 -ml-px transition" href="/reference/pagination">Pagination</a></li>
+                  <li><a class="mobile-nav-link block py-2 pl-4 text-sm text-slate-600 hover:text-slate-900 border-l-2 border-transparent hover:border-slate-300 -ml-px transition" href="/reference/permissions">Permissions</a></li>
+                  <li><a class="mobile-nav-link block py-2 pl-4 text-sm text-slate-600 hover:text-slate-900 border-l-2 border-transparent hover:border-slate-300 -ml-px transition" href="/reference/data-types">Data Types</a></li>
+                  <li><a class="mobile-nav-link block py-2 pl-4 text-sm text-slate-600 hover:text-slate-900 border-l-2 border-transparent hover:border-slate-300 -ml-px transition" href="/reference/errors">Errors</a></li>
+                  <li><a class="mobile-nav-link block py-2 pl-4 text-sm text-slate-600 hover:text-slate-900 border-l-2 border-transparent hover:border-slate-300 -ml-px transition" href="/reference/openapi">OpenAPI Spec</a></li>
+               </ul>
+            </li>
+            <li class="relative">
+               <h6 class="text-xs font-semibold text-slate-900 uppercase tracking-wide mb-3">Resources</h6>
+               <ul role="list" class="space-y-1 border-l border-slate-200 ml-2">
+                  <% for(var i=0; i<resources.length; i++) {%>
+                     <li><a class="mobile-nav-link block py-2 pl-4 text-sm text-slate-600 hover:text-slate-900 border-l-2 border-transparent hover:border-slate-300 -ml-px transition truncate" href="/reference/<%= resources[i].path -%>"><%= resources[i].name -%></a></li>
+                  <% } %>
+               </ul>
+            </li>
+         </ul>
+      </nav>
+
+      <div class="mt-8 pt-6 border-t border-slate-200">
+         <a href="/dashboard" class="flex items-center justify-center w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700 transition shadow-sm">
+            Sign in
+         </a>
+      </div>
+   </div>
+</div>
+
+<script>
+   // Highlight active navigation link
+   document.addEventListener('DOMContentLoaded', function() {
+      const currentPath = window.location.pathname;
+      const navLinks = document.querySelectorAll('.nav-link');
+      const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
+
+      navLinks.forEach(function(link) {
+         const href = link.getAttribute('href');
+         if (href === currentPath) {
+            link.classList.remove('text-slate-600', 'border-transparent', 'hover:border-slate-300');
+            link.classList.add('text-slate-900', 'font-medium', 'border-indigo-500');
+            link.setAttribute('aria-current', 'page');
+         }
+      });
+
+      mobileNavLinks.forEach(function(link) {
+         const href = link.getAttribute('href');
+         if (href === currentPath) {
+            link.classList.remove('text-slate-600', 'border-transparent', 'hover:border-slate-300');
+            link.classList.add('text-slate-900', 'font-medium', 'border-indigo-500');
+            link.setAttribute('aria-current', 'page');
+         }
+      });
+
+      // Mobile menu toggle functionality
+      const menuToggle = document.getElementById('mobile-menu-toggle');
+      const menuClose = document.getElementById('mobile-menu-close');
+      const menuOverlay = document.getElementById('mobile-menu-overlay');
+      const menuPanel = document.getElementById('mobile-menu-panel');
+      const menuOpenIcon = document.getElementById('menu-open-icon');
+      const menuCloseIcon = document.getElementById('menu-close-icon');
+
+      function openMenu() {
+         menuOverlay.classList.remove('hidden');
+         menuPanel.classList.remove('-translate-x-full');
+         menuOpenIcon.classList.add('hidden');
+         menuCloseIcon.classList.remove('hidden');
+         document.body.style.overflow = 'hidden';
+      }
+
+      function closeMenu() {
+         menuOverlay.classList.add('hidden');
+         menuPanel.classList.add('-translate-x-full');
+         menuOpenIcon.classList.remove('hidden');
+         menuCloseIcon.classList.add('hidden');
+         document.body.style.overflow = '';
+      }
+
+      if (menuToggle) {
+         menuToggle.addEventListener('click', function() {
+            const isOpen = !menuPanel.classList.contains('-translate-x-full');
+            if (isOpen) {
+               closeMenu();
+            } else {
+               openMenu();
+            }
+         });
+      }
+
+      if (menuClose) {
+         menuClose.addEventListener('click', closeMenu);
+      }
+
+      if (menuOverlay) {
+         menuOverlay.addEventListener('click', closeMenu);
+      }
+
+      // Close menu on escape key
+      document.addEventListener('keydown', function(e) {
+         if (e.key === 'Escape' && !menuPanel.classList.contains('-translate-x-full')) {
+            closeMenu();
+         }
+      });
+   });
+</script>

Accounts/Dockerfile.tpl

@@ -7,8 +7,8 @@ FROM public.ecr.aws/docker/library/node:24.9-alpine3.21
 RUN mkdir /tmp/npm &&  chmod 2777 /tmp/npm && chown 1000:1000 /tmp/npm && npm config set cache /tmp/npm --global
 
 RUN npm config set fetch-retries 5
-RUN npm config set fetch-retry-mintimeout 100000
-RUN npm config set fetch-retry-maxtimeout 600000
+RUN npm config set fetch-retry-mintimeout 20000
+RUN npm config set fetch-retry-maxtimeout 60000
 
 
 

Accounts/package-lock.json

@@ -12,7 +12,7 @@
                 "ejs": "^3.1.10",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
-                "react-router-dom": "^6.30.1",
+                "react-router-dom": "^6.30.2",
                 "use-async-effect": "^2.2.7"
             },
             "devDependencies": {
@@ -348,9 +348,9 @@
             }
         },
         "node_modules/@remix-run/router": {
-            "version": "1.23.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
-            "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+            "version": "1.23.1",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.1.tgz",
+            "integrity": "sha512-vDbaOzF7yT2Qs4vO6XV1MHcJv+3dgR1sT+l3B8xxOVhUC336prMvqrvsLL/9Dnw2xr6Qhz4J0dmS0llNAbnUmQ==",
             "license": "MIT",
             "engines": {
                 "node": ">=14.0.0"
@@ -966,12 +966,12 @@
             }
         },
         "node_modules/react-router": {
-            "version": "6.30.1",
-            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
-            "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+            "version": "6.30.2",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.2.tgz",
+            "integrity": "sha512-H2Bm38Zu1bm8KUE5NVWRMzuIyAV8p/JrOaBJAwVmp37AXG72+CZJlEBw6pdn9i5TBgLMhNDgijS4ZlblpHyWTA==",
             "license": "MIT",
             "dependencies": {
-                "@remix-run/router": "1.23.0"
+                "@remix-run/router": "1.23.1"
             },
             "engines": {
                 "node": ">=14.0.0"
@@ -981,13 +981,13 @@
             }
         },
         "node_modules/react-router-dom": {
-            "version": "6.30.1",
-            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
-            "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+            "version": "6.30.2",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.2.tgz",
+            "integrity": "sha512-l2OwHn3UUnEVUqc6/1VMmR1cvZryZ3j3NzapC2eUXO1dB0sYp5mvwdjiXhpUbRb21eFow3qSxpP8Yv6oAU824Q==",
             "license": "MIT",
             "dependencies": {
-                "@remix-run/router": "1.23.0",
-                "react-router": "6.30.1"
+                "@remix-run/router": "1.23.1",
+                "react-router": "6.30.2"
             },
             "engines": {
                 "node": ">=14.0.0"

Accounts/package.json

@@ -2,6 +2,10 @@
     "name": "@oneuptime/accounts",
     "version": "0.1.0",
     "private": false,
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/OneUptime/oneuptime"
+    },
     "scripts": {
         "dev-build": "NODE_ENV=development node esbuild.config.js",
         "dev": "npx nodemon",
@@ -33,7 +37,7 @@
         "ejs": "^3.1.10",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.30.1",
+        "react-router-dom": "^6.30.2",
         "use-async-effect": "^2.2.7"
     },
     "devDependencies": {

Accounts/src/Pages/Forbidden.tsx

@@ -2,12 +2,13 @@ import React from "react";
 
 const ForbiddenPage: () => JSX.Element = () => {
   return (
-    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+    <div className="flex min-h-full flex-col justify-center py-8 px-4 sm:py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md mx-auto text-center">
+        <div className="text-6xl sm:text-7xl mb-4">🚫</div>
+        <h2 className="mt-4 sm:mt-6 text-center text-xl sm:text-2xl tracking-tight text-gray-900">
           Forbidden
         </h2>
-        <p className="mt-2 text-center text-sm text-gray-600">
+        <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
           You do not have permission to access this page.
         </p>
       </div>

Accounts/src/Pages/ForgotPassword.tsx

@@ -14,35 +14,35 @@ const ForgotPassword: () => JSX.Element = () => {
   const [isSuccess, setIsSuccess] = useState<boolean>(false);
 
   return (
-    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+    <div className="flex min-h-full flex-col justify-center py-8 px-4 sm:py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md mx-auto">
         <img
-          className="mx-auto h-12 w-auto"
+          className="mx-auto h-10 w-auto sm:h-12"
           src={OneUptimeLogo}
           alt="Your Company"
         />
-        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+        <h2 className="mt-4 sm:mt-6 text-center text-xl sm:text-2xl tracking-tight text-gray-900">
           Forgot your password
         </h2>
 
         {!isSuccess && (
-          <p className="mt-2 text-center text-sm text-gray-600">
+          <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
             Please enter your email and the password reset link will be sent to
             you.
           </p>
         )}
 
         {isSuccess && (
-          <p className="mt-2 text-center text-sm text-gray-600">
+          <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
             We have emailed you the password reset link. Please do not forget to
             check spam.
           </p>
         )}
       </div>
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <div className="mt-6 sm:mt-8 w-full max-w-md mx-auto">
         {!isSuccess && (
-          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <div className="bg-white py-6 px-4 shadow-sm sm:shadow rounded-lg sm:py-8 sm:px-10">
             <ModelForm<User>
               modelType={User}
               name="Forgot Password"
@@ -81,8 +81,8 @@ const ForgotPassword: () => JSX.Element = () => {
           </div>
         )}
 
-        <div className="mt-5 text-center">
-          <p className="text-muted mb-0 text-gray-500">
+        <div className="mt-4 sm:mt-5 text-center">
+          <p className="text-muted mb-0 text-gray-500 text-sm sm:text-base">
             Remember your password?{" "}
             <Link
               to={new Route("/accounts/login")}

Accounts/src/Pages/Login.tsx

@@ -274,10 +274,10 @@ const LoginPage: () => JSX.Element = () => {
   };
 
   return (
-    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="">
+    <div className="flex min-h-full flex-col justify-center py-8 px-4 sm:py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md mx-auto">
         <img
-          className="mx-auto h-12 w-auto"
+          className="mx-auto h-10 w-auto sm:h-12"
           src={OneUptimeLogo}
           alt="OneUptime"
         />
@@ -286,10 +286,10 @@ const LoginPage: () => JSX.Element = () => {
         </div>
         {!showTwoFactorAuth && (
           <>
-            <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+            <h2 className="mt-4 sm:mt-6 text-center text-xl sm:text-2xl tracking-tight text-gray-900">
               Sign in to your account
             </h2>
-            <p className="mt-2 text-center text-sm text-gray-600">
+            <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
               Join thousands of business that use OneUptime to help them stay
               online all the time.
             </p>
@@ -298,10 +298,10 @@ const LoginPage: () => JSX.Element = () => {
 
         {showTwoFactorAuth && (
           <>
-            <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+            <h2 className="mt-4 sm:mt-6 text-center text-xl sm:text-2xl tracking-tight text-gray-900">
               Two Factor Authentication
             </h2>
-            <p className="mt-2 text-center text-sm text-gray-600">
+            <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
               Select two factor authentication method. You will be asked to
               enter a code from the selected method.
             </p>
@@ -309,8 +309,8 @@ const LoginPage: () => JSX.Element = () => {
         )}
       </div>
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+      <div className="mt-6 sm:mt-8 w-full max-w-md mx-auto">
+        <div className="bg-white py-6 px-4 shadow-sm sm:shadow sm:rounded-lg sm:py-8 sm:px-10 rounded-lg">
           {!showTwoFactorAuth && (
             <ModelForm<User>
               modelType={User}
@@ -505,9 +505,9 @@ const LoginPage: () => JSX.Element = () => {
             />
           )}
         </div>
-        <div className="mt-10 text-center">
+        <div className="mt-6 sm:mt-10 text-center">
           {!selectedTotpAuth && !selectedWebAuthn && (
-            <div className="text-muted mb-0 text-gray-500">
+            <div className="text-muted mb-0 text-gray-500 text-sm sm:text-base">
               Don&apos;t have an account?{" "}
               <Link
                 to={new Route("/accounts/register")}

Accounts/src/Pages/LoginWithSSO.tsx

@@ -126,18 +126,18 @@ const LoginPage: () => JSX.Element = () => {
     );
 
     return (
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-          <div className="">
+      <div className="w-full max-w-md mx-auto px-4 sm:px-0">
+        <div className="flex min-h-full flex-col justify-center py-8 sm:py-12">
+          <div className="w-full">
             <img
-              className="mx-auto h-12 w-auto"
+              className="mx-auto h-10 w-auto sm:h-12"
               src={OneUptimeLogo}
               alt="OneUptime"
             />
-            <h2 className="mt-10 text-center text-xl tracking-tight text-gray-900">
+            <h2 className="mt-6 sm:mt-10 text-center text-lg sm:text-xl tracking-tight text-gray-900">
               Select Project
             </h2>
-            <p className="mt-2 text-center text-sm text-gray-600">
+            <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
               Select the project you want to login to.
             </p>
           </div>
@@ -164,23 +164,23 @@ const LoginPage: () => JSX.Element = () => {
   }
 
   return (
-    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="">
+    <div className="flex min-h-full flex-col justify-center py-8 px-4 sm:py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md mx-auto">
         <img
-          className="mx-auto h-12 w-auto"
+          className="mx-auto h-10 w-auto sm:h-12"
           src={OneUptimeLogo}
           alt="OneUptime"
         />
-        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+        <h2 className="mt-4 sm:mt-6 text-center text-xl sm:text-2xl tracking-tight text-gray-900">
           Login with SSO
         </h2>
-        <p className="mt-2 text-center text-sm text-gray-600">
+        <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
           Login with your SSO provider to access your account.
         </p>
       </div>
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+      <div className="mt-6 sm:mt-8 w-full max-w-md mx-auto">
+        <div className="bg-white py-6 px-4 shadow-sm sm:shadow rounded-lg sm:py-8 sm:px-10">
           <BasicForm
             modelType={User}
             id="login-form"
@@ -217,8 +217,8 @@ const LoginPage: () => JSX.Element = () => {
             }
           />
         </div>
-        <div className="mt-10 text-center">
-          <div className="text-muted mb-0 text-gray-500">
+        <div className="mt-6 sm:mt-10 text-center">
+          <div className="text-muted mb-0 text-gray-500 text-sm sm:text-base">
             Don&apos;t have an account?{" "}
             <Link
               to={new Route("/accounts/register")}

Accounts/src/Pages/NotFound.tsx

@@ -2,12 +2,13 @@ import React from "react";
 
 const LoginPage: () => JSX.Element = () => {
   return (
-    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+    <div className="flex min-h-full flex-col justify-center py-8 px-4 sm:py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md mx-auto text-center">
+        <div className="text-6xl sm:text-7xl mb-4">🔍</div>
+        <h2 className="mt-4 sm:mt-6 text-center text-xl sm:text-2xl tracking-tight text-gray-900">
           Page not found
         </h2>
-        <p className="mt-2 text-center text-sm text-gray-600">
+        <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
           Page you are looking for does not exist.
         </p>
       </div>

Accounts/src/Pages/Register.tsx

@@ -248,17 +248,17 @@ const RegisterPage: () => JSX.Element = () => {
   }
 
   return (
-    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+    <div className="flex min-h-full flex-col justify-center py-6 px-4 sm:py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md mx-auto lg:max-w-2xl">
         <img
-          className="mx-auto h-12 w-auto"
+          className="mx-auto h-10 w-auto sm:h-12"
           src={OneUptimeLogo}
           alt="OneUptime"
         />
-        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+        <h2 className="mt-4 sm:mt-6 text-center text-xl sm:text-2xl tracking-tight text-gray-900">
           Create your OneUptime account
         </h2>
-        <p className="mt-2 text-center text-sm text-gray-600">
+        <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
           Join thousands of business that use OneUptime to help them stay online
           all the time.
         </p>
@@ -267,8 +267,8 @@ const RegisterPage: () => JSX.Element = () => {
         </p>
       </div>
 
-      <div className="mt-8 lg:mx-auto lg:w-full lg:max-w-2xl">
-        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+      <div className="mt-6 sm:mt-8 w-full max-w-md mx-auto lg:max-w-2xl">
+        <div className="bg-white py-6 px-4 shadow-sm sm:shadow rounded-lg sm:py-8 sm:px-10">
           <ModelForm<User>
             modelType={User}
             id="register-form"
@@ -339,8 +339,8 @@ const RegisterPage: () => JSX.Element = () => {
             }}
           />
         </div>
-        <div className="mt-5 text-center text-gray-500">
-          <p className="text-muted mb-0">
+        <div className="mt-4 sm:mt-5 text-center text-gray-500">
+          <p className="text-muted mb-0 text-sm sm:text-base">
             Already have an account?{" "}
             <Link
               to={new Route("/accounts/login")}

Accounts/src/Pages/ResetPassword.tsx

@@ -14,33 +14,33 @@ const RegisterPage: () => JSX.Element = () => {
   const [isSuccess, setIsSuccess] = useState<boolean>(false);
 
   return (
-    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+    <div className="flex min-h-full flex-col justify-center py-8 px-4 sm:py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md mx-auto">
         <img
-          className="mx-auto h-12 w-auto"
+          className="mx-auto h-10 w-auto sm:h-12"
           src={OneUptimeLogo}
           alt="Your Company"
         />
-        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+        <h2 className="mt-4 sm:mt-6 text-center text-xl sm:text-2xl tracking-tight text-gray-900">
           Reset your password
         </h2>
 
         {!isSuccess && (
-          <p className="mt-2 text-center text-sm text-gray-600">
+          <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
             Please enter your new password and we will have it updated.{" "}
           </p>
         )}
 
         {isSuccess && (
-          <p className="mt-2 text-center text-sm text-gray-600">
+          <p className="mt-2 text-center text-sm text-gray-600 px-2 sm:px-0">
             Your password has been updated. Please log in.
           </p>
         )}
       </div>
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <div className="mt-6 sm:mt-8 w-full max-w-md mx-auto">
         {!isSuccess && (
-          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <div className="bg-white py-6 px-4 shadow-sm sm:shadow rounded-lg sm:py-8 sm:px-10">
             <ModelForm<User>
               modelType={User}
               id="register-form"
@@ -97,8 +97,8 @@ const RegisterPage: () => JSX.Element = () => {
           </div>
         )}
 
-        <div className="mt-5 text-center">
-          <p className="text-muted mb-0 text-gray-500">
+        <div className="mt-4 sm:mt-5 text-center">
+          <p className="text-muted mb-0 text-gray-500 text-sm sm:text-base">
             Know your password?{" "}
             <Link
               to={new Route("/accounts/login")}

Accounts/src/Pages/VerifyEmail.tsx

@@ -58,60 +58,53 @@ const VerifyEmail: () => JSX.Element = () => {
   }
 
   return (
-    <div className="auth-page">
-      <div className="container-fluid p-0">
-        <div className="row g-0">
-          <div className="col-xxl-4 col-lg-4 col-md-3"></div>
+    <div className="flex min-h-full flex-col justify-center py-8 px-4 sm:py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md mx-auto">
+        <div className="text-center mb-8 sm:mb-10">
+          <img
+            className="mx-auto h-10 w-auto sm:h-12"
+            src={OneUptimeLogo}
+            alt="OneUptime"
+          />
+        </div>
 
-          <div className="col-xxl-4 col-lg-4 col-md-6">
-            <div className="auth-full-page-content d-flex p-sm-5 p-4">
-              <div className="w-100">
-                <div className="d-flex flex-column h-100">
-                  <div className="auth-content my-auto">
-                    <div
-                      className="mt-4 text-center flex justify-center"
-                      style={{ marginBottom: "40px" }}
-                    >
-                      <img
-                        style={{ height: "50px" }}
-                        src={`${OneUptimeLogo}`}
-                      />
-                    </div>
-                    {!error && (
-                      <div className="text-center">
-                        <h5 className="mb-0">Your email is verified.</h5>
-                        <p className="text-muted mt-2 mb-0">
-                          Thank you for verifying your email. You can now log in
-                          to OneUptime.{" "}
-                        </p>
-                      </div>
-                    )}
-
-                    {error && (
-                      <div className="text-center">
-                        <h5 className="mb-0">Sorry, something went wrong!</h5>
-                        <p className="text-muted mt-2 mb-0">{error}</p>
-                      </div>
-                    )}
-
-                    <div className="mt-5 text-center">
-                      <p className="text-muted mb-0">
-                        Return to sign in?{" "}
-                        <Link
-                          to={new Route("/accounts/login")}
-                          className="hover:underline text-primary fw-semibold"
-                        >
-                          Login.
-                        </Link>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+        <div className="bg-white py-6 px-4 shadow-sm sm:shadow rounded-lg sm:py-8 sm:px-10">
+          {!error && (
+            <div className="text-center">
+              <div className="text-5xl sm:text-6xl mb-4">✅</div>
+              <h2 className="text-xl sm:text-2xl tracking-tight text-gray-900">
+                Your email is verified.
+              </h2>
+              <p className="text-gray-600 mt-3 text-sm sm:text-base px-2 sm:px-0">
+                Thank you for verifying your email. You can now log in to
+                OneUptime.
+              </p>
             </div>
-          </div>
+          )}
 
-          <div className="col-xxl-4 col-lg-4 col-md-3"></div>
+          {error && (
+            <div className="text-center">
+              <div className="text-5xl sm:text-6xl mb-4">❌</div>
+              <h2 className="text-xl sm:text-2xl tracking-tight text-gray-900">
+                Sorry, something went wrong!
+              </h2>
+              <p className="text-gray-600 mt-3 text-sm sm:text-base px-2 sm:px-0">
+                {error}
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 sm:mt-8 text-center">
+          <p className="text-gray-500 text-sm sm:text-base">
+            Return to sign in?{" "}
+            <Link
+              to={new Route("/accounts/login")}
+              className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
+            >
+              Login.
+            </Link>
+          </p>
         </div>
       </div>
     </div>

Accounts/views/index.ejs

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
   <meta name="slack-app-id" content="ACVBMTPJQ">
-  <meta name="description" content="OneUptime — the complete open-source observability platform.">
+  <meta name="description" content="OneUptime - the complete open-source observability platform.">
 
   <% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %> 
   <!-- Google Tag Manager -->

AdminDashboard/Dockerfile.tpl

@@ -7,8 +7,8 @@ FROM public.ecr.aws/docker/library/node:24.9-alpine3.21
 RUN mkdir /tmp/npm &&  chmod 2777 /tmp/npm && chown 1000:1000 /tmp/npm && npm config set cache /tmp/npm --global
 
 RUN npm config set fetch-retries 5
-RUN npm config set fetch-retry-mintimeout 100000
-RUN npm config set fetch-retry-maxtimeout 600000
+RUN npm config set fetch-retry-mintimeout 20000
+RUN npm config set fetch-retry-maxtimeout 60000
 
 
 

AdminDashboard/package-lock.json

@@ -12,7 +12,7 @@
                 "ejs": "^3.1.10",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
-                "react-router-dom": "^6.30.1"
+                "react-router-dom": "^6.30.2"
             },
             "devDependencies": {
                 "@types/node": "^16.11.35",
@@ -347,9 +347,9 @@
             "dev": true
         },
         "node_modules/@remix-run/router": {
-            "version": "1.23.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
-            "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+            "version": "1.23.1",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.1.tgz",
+            "integrity": "sha512-vDbaOzF7yT2Qs4vO6XV1MHcJv+3dgR1sT+l3B8xxOVhUC336prMvqrvsLL/9Dnw2xr6Qhz4J0dmS0llNAbnUmQ==",
             "license": "MIT",
             "engines": {
                 "node": ">=14.0.0"
@@ -946,12 +946,12 @@
             }
         },
         "node_modules/react-router": {
-            "version": "6.30.1",
-            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
-            "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+            "version": "6.30.2",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.2.tgz",
+            "integrity": "sha512-H2Bm38Zu1bm8KUE5NVWRMzuIyAV8p/JrOaBJAwVmp37AXG72+CZJlEBw6pdn9i5TBgLMhNDgijS4ZlblpHyWTA==",
             "license": "MIT",
             "dependencies": {
-                "@remix-run/router": "1.23.0"
+                "@remix-run/router": "1.23.1"
             },
             "engines": {
                 "node": ">=14.0.0"
@@ -961,13 +961,13 @@
             }
         },
         "node_modules/react-router-dom": {
-            "version": "6.30.1",
-            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
-            "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+            "version": "6.30.2",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.2.tgz",
+            "integrity": "sha512-l2OwHn3UUnEVUqc6/1VMmR1cvZryZ3j3NzapC2eUXO1dB0sYp5mvwdjiXhpUbRb21eFow3qSxpP8Yv6oAU824Q==",
             "license": "MIT",
             "dependencies": {
-                "@remix-run/router": "1.23.0",
-                "react-router": "6.30.1"
+                "@remix-run/router": "1.23.1",
+                "react-router": "6.30.2"
             },
             "engines": {
                 "node": ">=14.0.0"

AdminDashboard/package.json

@@ -2,13 +2,17 @@
     "name": "@oneuptime/admin-dashboard",
     "version": "0.1.0",
     "private": false,
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/OneUptime/oneuptime"
+    },
     "dependencies": {
         "Common": "file:../Common",
         
         "ejs": "^3.1.10",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.30.1"
+        "react-router-dom": "^6.30.2"
     },
     "scripts": {
         "dev-build": "NODE_ENV=development node esbuild.config.js",

AdminDashboard/src/App.tsx

@@ -9,6 +9,7 @@ import SettingsWhatsApp from "./Pages/Settings/WhatsApp/Index";
 // Settings Pages.
 import SettingsEmail from "./Pages/Settings/Email/Index";
 import SettingsProbes from "./Pages/Settings/Probes/Index";
+import SettingsLlmProviders from "./Pages/Settings/LlmProviders/Index";
 import Users from "./Pages/Users/Index";
 import PageMap from "./Utils/PageMap";
 import RouteMap from "./Utils/RouteMap";
@@ -122,6 +123,11 @@ const App: () => JSX.Element = () => {
           element={<SettingsProbes />}
         />
 
+        <PageRoute
+          path={RouteMap[PageMap.SETTINGS_LLM_PROVIDERS]?.toString() || ""}
+          element={<SettingsLlmProviders />}
+        />
+
         <PageRoute
           path={RouteMap[PageMap.SETTINGS_AUTHENTICATION]?.toString() || ""}
           element={<SettingsAuthentication />}

AdminDashboard/src/Pages/Settings/LlmProviders/Index.tsx

@@ -0,0 +1,252 @@
+import AdminModelAPI from "../../../Utils/ModelAPI";
+import PageMap from "../../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
+import DashboardSideMenu from "../SideMenu";
+import Route from "Common/Types/API/Route";
+import IsNull from "Common/Types/BaseDatabase/IsNull";
+import Banner from "Common/UI/Components/Banner/Banner";
+import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchemaType";
+import ModelTable from "Common/UI/Components/ModelTable/ModelTable";
+import Page from "Common/UI/Components/Page/Page";
+import FieldType from "Common/UI/Components/Types/FieldType";
+import LlmProvider from "Common/Models/DatabaseModels/LlmProvider";
+import LlmType from "Common/Types/LLM/LlmType";
+import React, { FunctionComponent, ReactElement } from "react";
+import DropdownUtil from "Common/UI/Utils/Dropdown";
+import { BILLING_ENABLED } from "Common/UI/Config";
+
+const Settings: FunctionComponent = (): ReactElement => {
+  return (
+    <Page
+      title={"Admin Settings"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Settings",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS] as Route,
+          ),
+        },
+        {
+          title: "Global LLM Providers",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS_LLM_PROVIDERS] as Route,
+          ),
+        },
+      ]}
+      sideMenu={<DashboardSideMenu />}
+    >
+      {/* LLM Provider Settings View  */}
+
+      <Banner
+        openInNewTab={true}
+        title="Need help with setting up LLM Providers?"
+        description="LLM Providers enable AI features. You can configure global LLM Providers that are available to all projects."
+        link={Route.fromString("/docs/ai/llm-provider")}
+        hideOnMobile={true}
+      />
+
+      <ModelTable<LlmProvider>
+        userPreferencesKey={"admin-llms-table"}
+        modelType={LlmProvider}
+        id="llms-table"
+        name="Settings > Global LLM Providers"
+        isDeleteable={true}
+        isEditable={true}
+        isCreateable={true}
+        cardProps={{
+          title: "Global LLM Providers",
+          description:
+            "Global LLM Providers are available to all projects for AI features. Configure OpenAI, Anthropic, Ollama, or other LLM providers.",
+        }}
+        query={{
+          projectId: new IsNull(),
+          isGlobalLlm: true,
+        }}
+        modelAPI={AdminModelAPI}
+        noItemsMessage={
+          "No LLM Providers configured. Add an LLM Provider to enable AI features."
+        }
+        showRefreshButton={true}
+        onBeforeCreate={(item: LlmProvider) => {
+          item.isGlobalLlm = true;
+          return Promise.resolve(item);
+        }}
+        formSteps={[
+          {
+            title: "Basic Info",
+            id: "basic-info",
+          },
+          {
+            title: "Provider Settings",
+            id: "provider-settings",
+          },
+          ...(BILLING_ENABLED
+            ? [
+                {
+                  title: "Cost Settings",
+                  id: "cost-settings",
+                },
+              ]
+            : []),
+        ]}
+        formFields={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Name",
+            stepId: "basic-info",
+            fieldType: FormFieldSchemaType.Text,
+            required: true,
+            placeholder: "My OpenAI GPT-4",
+            validation: {
+              minLength: 2,
+            },
+          },
+
+          {
+            field: {
+              description: true,
+            },
+            title: "Description",
+            stepId: "basic-info",
+            fieldType: FormFieldSchemaType.LongText,
+            required: false,
+            placeholder: "GPT-4 for general AI features.",
+          },
+          {
+            field: {
+              llmType: true,
+            },
+            title: "LLM Provider",
+            stepId: "provider-settings",
+            fieldType: FormFieldSchemaType.Dropdown,
+            required: true,
+            placeholder: "Select LLM Provider",
+            dropdownOptions: DropdownUtil.getDropdownOptionsFromEnum(LlmType),
+          },
+          {
+            field: {
+              apiKey: true,
+            },
+            title: "API Key",
+            stepId: "provider-settings",
+            fieldType: FormFieldSchemaType.Text,
+            required: false,
+            placeholder: "sk-...",
+            description:
+              "Required for OpenAI and Anthropic. Not required for Ollama if self-hosted.",
+          },
+          {
+            field: {
+              modelName: true,
+            },
+            title: "Model Name",
+            stepId: "provider-settings",
+            fieldType: FormFieldSchemaType.Text,
+            required: false,
+            placeholder: "gpt-4, claude-3-opus, llama2",
+            description:
+              "The specific model to use (e.g., gpt-4, claude-3-opus, llama2).",
+          },
+          {
+            field: {
+              baseUrl: true,
+            },
+            title: "Base URL",
+            stepId: "provider-settings",
+            fieldType: FormFieldSchemaType.URL,
+            required: false,
+            placeholder: "http://localhost:11434",
+            description:
+              "Required for Ollama. Optional for others to use custom endpoints.",
+          },
+          ...(BILLING_ENABLED
+            ? [
+                {
+                  field: {
+                    costPerMillionTokensInUSDCents: true,
+                  },
+                  title: "Cost Per Million Tokens (USD Cents)",
+                  stepId: "cost-settings",
+                  fieldType: FormFieldSchemaType.Number,
+                  required: false,
+                  placeholder: "0",
+                  description:
+                    "Cost per million tokens in USD cents. For example, if the cost is $0.01 per 1M tokens, enter 1.",
+                },
+              ]
+            : []),
+        ]}
+        selectMoreFields={{
+          apiKey: true,
+        }}
+        filters={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Name",
+            type: FieldType.Text,
+          },
+          {
+            field: {
+              description: true,
+            },
+            title: "Description",
+            type: FieldType.LongText,
+          },
+          {
+            field: {
+              llmType: true,
+            },
+            title: "Provider",
+            type: FieldType.Text,
+          },
+        ]}
+        columns={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Name",
+            type: FieldType.Text,
+          },
+          {
+            field: {
+              llmType: true,
+            },
+            title: "Provider",
+            type: FieldType.Text,
+          },
+          {
+            field: {
+              modelName: true,
+            },
+            title: "Model",
+            type: FieldType.Text,
+            noValueMessage: "-",
+          },
+          ...(BILLING_ENABLED
+            ? [
+                {
+                  field: {
+                    costPerMillionTokensInUSDCents: true,
+                  },
+                  title: "Cost (cents/1M)",
+                  type: FieldType.Number,
+                  noValueMessage: "0",
+                },
+              ]
+            : []),
+        ]}
+      />
+    </Page>
+  );
+};
+
+export default Settings;

AdminDashboard/src/Pages/Settings/SideMenu.tsx

@@ -72,6 +72,17 @@ const DashboardSideMenu: () => JSX.Element = (): ReactElement => {
           icon={IconProp.Signal}
         />
       </SideMenuSection>
+      <SideMenuSection title="AI">
+        <SideMenuItem
+          link={{
+            title: "Global LLM Providers",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.SETTINGS_LLM_PROVIDERS] as Route,
+            ),
+          }}
+          icon={IconProp.Brain}
+        />
+      </SideMenuSection>
       <SideMenuSection title="API and Integrations">
         <SideMenuItem
           link={{

AdminDashboard/src/Pages/Settings/WhatsApp/Index.tsx

@@ -176,7 +176,7 @@ const buildWhatsAppSetupMarkdown: BuildWhatsAppSetupMarkdown = (): string => {
   const webhookSection: string = [
     "### Configure Meta Webhook Subscription",
     "1. In the OneUptime Admin Dashboard, open **Settings → WhatsApp → Meta WhatsApp Settings** and enter a strong value in **Webhook Verify Token**. Save the form so the encrypted token is stored in Global Config.",
-    "2. Keep that verify token handy—Meta does not generate one for you. You'll paste the exact same value when configuring the callback.",
+    "2. Keep that verify token handy-Meta does not generate one for you. You'll paste the exact same value when configuring the callback.",
     "3. In [Meta for Developers](https://developers.facebook.com/apps/), select your WhatsApp app and navigate to **WhatsApp → Configuration → Webhooks**.",
     `4. Click **Configure**, then supply one of the following callback URLs when Meta asks for your endpoint:\n   - \`${primaryWebhookUrl}\`\n `,
     "5. Paste the verify token from step 1 into Meta's **Verify Token** field and submit. Meta will call the callback URL and expect that value to match before it approves the subscription.",
@@ -195,7 +195,7 @@ const buildWhatsAppSetupMarkdown: BuildWhatsAppSetupMarkdown = (): string => {
     "### Required WhatsApp Templates",
     templateSummaryTable,
     "### Template Bodies",
-    "> Copy the exact template body below—including punctuation and spacing—when creating each template inside Meta. The variables list shows every placeholder that must be configured in WhatsApp Manager.",
+    "> Copy the exact template body below-including punctuation and spacing-when creating each template inside Meta. The variables list shows every placeholder that must be configured in WhatsApp Manager.",
     templateBodies,
   ]
     .filter(Boolean)

AdminDashboard/src/Utils/PageMap.ts

@@ -18,6 +18,7 @@ enum PageMap {
   SETTINGS_CALL_AND_SMS = "SETTINGS_CALL_AND_SMS",
   SETTINGS_WHATSAPP = "SETTINGS_WHATSAPP",
   SETTINGS_PROBES = "SETTINGS_PROBES",
+  SETTINGS_LLM_PROVIDERS = "SETTINGS_LLM_PROVIDERS",
   SETTINGS_AUTHENTICATION = "SETTINGS_AUTHENTICATION",
   SETTINGS_API_KEY = "SETTINGS_API_KEY",
 }

AdminDashboard/src/Utils/RouteMap.ts

@@ -30,6 +30,7 @@ const RouteMap: Dictionary<Route> = {
   [PageMap.SETTINGS_CALL_AND_SMS]: new Route(`/admin/settings/call-and-sms`),
   [PageMap.SETTINGS_WHATSAPP]: new Route(`/admin/settings/whatsapp`),
   [PageMap.SETTINGS_PROBES]: new Route(`/admin/settings/probes`),
+  [PageMap.SETTINGS_LLM_PROVIDERS]: new Route(`/admin/settings/llm-providers`),
   [PageMap.SETTINGS_AUTHENTICATION]: new Route(
     `/admin/settings/authentication`,
   ),

AdminDashboard/views/index.ejs

@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <meta name="slack-app-id" content="ACVBMTPJQ">
-    <meta name="description" content="OneUptime — the complete open-source observability platform.">
+    <meta name="description" content="OneUptime - the complete open-source observability platform.">
 
     <% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %> 
     <!-- Google Tag Manager -->

App/Dockerfile.tpl

@@ -7,8 +7,8 @@ FROM public.ecr.aws/docker/library/node:24.9-alpine3.21
 RUN mkdir /tmp/npm &&  chmod 2777 /tmp/npm && chown 1000:1000 /tmp/npm && npm config set cache /tmp/npm --global
 
 RUN npm config set fetch-retries 5
-RUN npm config set fetch-retry-mintimeout 100000
-RUN npm config set fetch-retry-maxtimeout 600000
+RUN npm config set fetch-retry-mintimeout 20000
+RUN npm config set fetch-retry-maxtimeout 60000
 
 
 

App/FeatureSet/BaseAPI/Index.ts

@@ -3,15 +3,14 @@ import BaseAnalyticsAPI from "Common/Server/API/BaseAnalyticsAPI";
 import BillingAPI from "Common/Server/API/BillingAPI";
 import BillingInvoiceAPI from "Common/Server/API/BillingInvoiceAPI";
 import BillingPaymentMethodAPI from "Common/Server/API/BillingPaymentMethodAPI";
-import CopilotCodeRepositoryAPI from "Common/Server/API/CopilotCodeRepositoryAPI";
-import CopilotActionAPI from "Common/Server/API/CopilotActionAPI";
-import CopilotPullRequestAPI from "Common/Server/API/CopilotPullRequestAPI";
 import FileAPI from "Common/Server/API/FileAPI";
 import GlobalConfigAPI from "Common/Server/API/GlobalConfigAPI";
 import MonitorGroupAPI from "Common/Server/API/MonitorGroupAPI";
 import NotificationAPI from "Common/Server/API/NotificationAPI";
+import AIBillingAPI from "Common/Server/API/AIBillingAPI";
 import TelemetryAPI from "Common/Server/API/TelemetryAPI";
 import ProbeAPI from "Common/Server/API/ProbeAPI";
+import LlmProviderAPI from "Common/Server/API/LlmProviderAPI";
 import ProjectAPI from "Common/Server/API/ProjectAPI";
 import ProjectSsoAPI from "Common/Server/API/ProjectSSO";
 import WhatsAppLogAPI from "./WhatsAppLogAPI";
@@ -33,6 +32,9 @@ import IncidentInternalNoteAPI from "Common/Server/API/IncidentInternalNoteAPI";
 import IncidentPublicNoteAPI from "Common/Server/API/IncidentPublicNoteAPI";
 import ScheduledMaintenanceInternalNoteAPI from "Common/Server/API/ScheduledMaintenanceInternalNoteAPI";
 import ScheduledMaintenancePublicNoteAPI from "Common/Server/API/ScheduledMaintenancePublicNoteAPI";
+import IncidentAPI from "Common/Server/API/IncidentAPI";
+import ScheduledMaintenanceAPI from "Common/Server/API/ScheduledMaintenanceAPI";
+import AlertAPI from "Common/Server/API/AlertAPI";
 // User Notification methods.
 import UserEmailAPI from "Common/Server/API/UserEmailAPI";
 import UserNotificationLogTimelineAPI from "Common/Server/API/UserOnCallLogTimelineAPI";
@@ -80,9 +82,7 @@ import DashboardService, {
 import AlertOwnerUserService, {
   Service as AlertOwnerUserServiceType,
 } from "Common/Server/Services/AlertOwnerUserService";
-import AlertService, {
-  Service as AlertServiceType,
-} from "Common/Server/Services/AlertService";
+
 import AlertSeverityService, {
   Service as AlertSeverityServiceType,
 } from "Common/Server/Services/AlertSeverityService";
@@ -111,9 +111,6 @@ import IncidentOwnerTeamService, {
 import IncidentOwnerUserService, {
   Service as IncidentOwnerUserServiceType,
 } from "Common/Server/Services/IncidentOwnerUserService";
-import IncidentService, {
-  Service as IncidentServiceType,
-} from "Common/Server/Services/IncidentService";
 import IncidentSeverityService, {
   Service as IncidentSeverityServiceType,
 } from "Common/Server/Services/IncidentSeverityService";
@@ -142,10 +139,6 @@ import LogService, {
   LogService as LogServiceType,
 } from "Common/Server/Services/LogService";
 
-import CopilotActionTypePriorityService, {
-  Service as CopilotActionTypePriorityServiceType,
-} from "Common/Server/Services/CopilotActionTypePriorityService";
-
 import MetricService, {
   MetricService as MetricServiceType,
 } from "Common/Server/Services/MetricService";
@@ -223,6 +216,9 @@ import ProjectSmtpConfigService, {
 import PromoCodeService, {
   Service as PromoCodeServiceType,
 } from "Common/Server/Services/PromoCodeService";
+import CodeRepositoryService, {
+  Service as CodeRepositoryServiceType,
+} from "Common/Server/Services/CodeRepositoryService";
 import ResellerService, {
   Service as ResellerServiceType,
 } from "Common/Server/Services/ResellerService";
@@ -238,9 +234,7 @@ import ScheduledMaintenanceOwnerTeamService, {
 import ScheduledMaintenanceOwnerUserService, {
   Service as ScheduledMaintenanceOwnerUserServiceType,
 } from "Common/Server/Services/ScheduledMaintenanceOwnerUserService";
-import ScheduledMaintenanceService, {
-  Service as ScheduledMaintenanceServiceType,
-} from "Common/Server/Services/ScheduledMaintenanceService";
+
 import ScheduledMaintenanceStateService, {
   Service as ScheduledMaintenanceStateServiceType,
 } from "Common/Server/Services/ScheduledMaintenanceStateService";
@@ -256,9 +250,6 @@ import ServiceCatalogOwnerUserService, {
 import ServiceCatalogService, {
   Service as ServiceCatalogServiceType,
 } from "Common/Server/Services/ServiceCatalogService";
-import ServiceCopilotCodeRepositoryService, {
-  Service as ServiceCopilotCodeRepositoryType,
-} from "Common/Server/Services/ServiceCopilotCodeRepositoryService";
 import ServiceCatalogDependencyService, {
   Service as ServiceCatalogDependencyServiceType,
 } from "Common/Server/Services/ServiceCatalogDependencyService";
@@ -272,6 +263,11 @@ import ServiceCatalogTelemetryServiceService, {
   Service as ServiceCatalogTelemetryServiceServiceType,
 } from "Common/Server/Services/ServiceCatalogTelemetryServiceService";
 
+import ServiceCatalogCodeRepository from "Common/Models/DatabaseModels/ServiceCatalogCodeRepository";
+import ServiceCatalogCodeRepositoryService, {
+  Service as ServiceCatalogCodeRepositoryServiceType,
+} from "Common/Server/Services/ServiceCatalogCodeRepositoryService";
+
 import ShortLinkService, {
   Service as ShortLinkServiceType,
 } from "Common/Server/Services/ShortLinkService";
@@ -360,6 +356,10 @@ import ProbeOwnerUserService, {
   Service as ProbeOwnerUserServiceType,
 } from "Common/Server/Services/ProbeOwnerUserService";
 
+import LlmLogService, {
+  Service as LlmLogServiceType,
+} from "Common/Server/Services/LlmLogService";
+
 import TelemetryExceptionService, {
   Service as TelemetryExceptionServiceType,
 } from "Common/Server/Services/TelemetryExceptionService";
@@ -384,7 +384,6 @@ import EmailLog from "Common/Models/DatabaseModels/EmailLog";
 import EmailVerificationToken from "Common/Models/DatabaseModels/EmailVerificationToken";
 import Dashboard from "Common/Models/DatabaseModels/Dashboard";
 
-import Alert from "Common/Models/DatabaseModels/Alert";
 import AlertCustomField from "Common/Models/DatabaseModels/AlertCustomField";
 import AlertNoteTemplate from "Common/Models/DatabaseModels/AlertNoteTemplate";
 import AlertOwnerTeam from "Common/Models/DatabaseModels/AlertOwnerTeam";
@@ -393,7 +392,6 @@ import AlertSeverity from "Common/Models/DatabaseModels/AlertSeverity";
 import AlertState from "Common/Models/DatabaseModels/AlertState";
 import AlertStateTimeline from "Common/Models/DatabaseModels/AlertStateTimeline";
 
-import Incident from "Common/Models/DatabaseModels/Incident";
 import IncidentCustomField from "Common/Models/DatabaseModels/IncidentCustomField";
 import IncidentNoteTemplate from "Common/Models/DatabaseModels/IncidentNoteTemplate";
 import IncidentPostmortemTemplate from "Common/Models/DatabaseModels/IncidentPostmortemTemplate";
@@ -430,8 +428,8 @@ import OnCallDutyPolicyScheduleLayerUser from "Common/Models/DatabaseModels/OnCa
 import ProjectCallSMSConfig from "Common/Models/DatabaseModels/ProjectCallSMSConfig";
 import ProjectSmtpConfig from "Common/Models/DatabaseModels/ProjectSmtpConfig";
 import PromoCode from "Common/Models/DatabaseModels/PromoCode";
+import CodeRepository from "Common/Models/DatabaseModels/CodeRepository";
 import Reseller from "Common/Models/DatabaseModels/Reseller";
-import ScheduledMaintenance from "Common/Models/DatabaseModels/ScheduledMaintenance";
 import ScheduledMaintenanceCustomField from "Common/Models/DatabaseModels/ScheduledMaintenanceCustomField";
 import ScheduledMaintenanceNoteTemplate from "Common/Models/DatabaseModels/ScheduledMaintenanceNoteTemplate";
 import ScheduledMaintenanceOwnerTeam from "Common/Models/DatabaseModels/ScheduledMaintenanceOwnerTeam";
@@ -441,7 +439,6 @@ import ScheduledMaintenanceStateTimeline from "Common/Models/DatabaseModels/Sche
 import ServiceCatalog from "Common/Models/DatabaseModels/ServiceCatalog";
 import ServiceCatalogOwnerTeam from "Common/Models/DatabaseModels/ServiceCatalogOwnerTeam";
 import ServiceCatalogOwnerUser from "Common/Models/DatabaseModels/ServiceCatalogOwnerUser";
-import ServiceCopilotCodeRepository from "Common/Models/DatabaseModels/ServiceCopilotCodeRepository";
 import ShortLink from "Common/Models/DatabaseModels/ShortLink";
 import SmsLog from "Common/Models/DatabaseModels/SmsLog";
 // Custom Fields API
@@ -470,10 +467,10 @@ import WorkflowLog from "Common/Models/DatabaseModels/WorkflowLog";
 import WorkflowVariable from "Common/Models/DatabaseModels/WorkflowVariable";
 import ProbeOwnerTeam from "Common/Models/DatabaseModels/ProbeOwnerTeam";
 import ProbeOwnerUser from "Common/Models/DatabaseModels/ProbeOwnerUser";
+import LlmLog from "Common/Models/DatabaseModels/LlmLog";
 import ServiceCatalogDependency from "Common/Models/DatabaseModels/ServiceCatalogDependency";
 import ExceptionInstance from "Common/Models/AnalyticsModels/ExceptionInstance";
 import TelemetyException from "Common/Models/DatabaseModels/TelemetryException";
-import CopilotActionTypePriority from "Common/Models/DatabaseModels/CopilotActionTypePriority";
 import WorkspaceNotificationLogService, {
   Service as WorkspaceNotificationLogServiceType,
 } from "Common/Server/Services/WorkspaceNotificationLogService";
@@ -511,6 +508,7 @@ import ScheduledMaintenanceFeedService, {
 
 import SlackAPI from "Common/Server/API/SlackAPI";
 import MicrosoftTeamsAPI from "Common/Server/API/MicrosoftTeamsAPI";
+import GitHubAPI from "Common/Server/API/GitHubAPI";
 
 import WorkspaceProjectAuthToken from "Common/Models/DatabaseModels/WorkspaceProjectAuthToken";
 import WorkspaceProjectAuthTokenService, {
@@ -573,6 +571,18 @@ import StatusPageAnnouncementTemplateService, {
   Service as StatusPageAnnouncementTemplateServiceType,
 } from "Common/Server/Services/StatusPageAnnouncementTemplateService";
 
+// status page subscriber notification templates
+import StatusPageSubscriberNotificationTemplate from "Common/Models/DatabaseModels/StatusPageSubscriberNotificationTemplate";
+import StatusPageSubscriberNotificationTemplateService, {
+  Service as StatusPageSubscriberNotificationTemplateServiceType,
+} from "Common/Server/Services/StatusPageSubscriberNotificationTemplateService";
+
+// status page subscriber notification template status page (linking table)
+import StatusPageSubscriberNotificationTemplateStatusPage from "Common/Models/DatabaseModels/StatusPageSubscriberNotificationTemplateStatusPage";
+import StatusPageSubscriberNotificationTemplateStatusPageService, {
+  Service as StatusPageSubscriberNotificationTemplateStatusPageServiceType,
+} from "Common/Server/Services/StatusPageSubscriberNotificationTemplateStatusPageService";
+
 // ProjectSCIM
 import ProjectSCIM from "Common/Models/DatabaseModels/ProjectSCIM";
 import ProjectSCIMService, {
@@ -647,6 +657,30 @@ const BaseAPIFeatureSet: FeatureSet = {
       ).getRouter(),
     );
 
+    // status page subscriber notification templates
+    app.use(
+      `/${APP_NAME.toLocaleLowerCase()}`,
+      new BaseAPI<
+        StatusPageSubscriberNotificationTemplate,
+        StatusPageSubscriberNotificationTemplateServiceType
+      >(
+        StatusPageSubscriberNotificationTemplate,
+        StatusPageSubscriberNotificationTemplateService,
+      ).getRouter(),
+    );
+
+    // status page subscriber notification template status page (linking table)
+    app.use(
+      `/${APP_NAME.toLocaleLowerCase()}`,
+      new BaseAPI<
+        StatusPageSubscriberNotificationTemplateStatusPage,
+        StatusPageSubscriberNotificationTemplateStatusPageServiceType
+      >(
+        StatusPageSubscriberNotificationTemplateStatusPage,
+        StatusPageSubscriberNotificationTemplateStatusPageService,
+      ).getRouter(),
+    );
+
     // OnCallDutyPolicyTimeLogService
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
@@ -788,10 +822,7 @@ const BaseAPIFeatureSet: FeatureSet = {
       ).getRouter(),
     );
 
-    app.use(
-      `/${APP_NAME.toLocaleLowerCase()}`,
-      new BaseAPI<Alert, AlertServiceType>(Alert, AlertService).getRouter(),
-    );
+    app.use(`/${APP_NAME.toLocaleLowerCase()}`, new AlertAPI().getRouter());
 
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
@@ -893,17 +924,6 @@ const BaseAPIFeatureSet: FeatureSet = {
       new BaseAnalyticsAPI<Log, LogServiceType>(Log, LogService).getRouter(),
     );
 
-    app.use(
-      `/${APP_NAME.toLocaleLowerCase()}`,
-      new BaseAPI<
-        CopilotActionTypePriority,
-        CopilotActionTypePriorityServiceType
-      >(
-        CopilotActionTypePriority,
-        CopilotActionTypePriorityService,
-      ).getRouter(),
-    );
-
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
       new BaseAPI<Dashboard, DashboardServiceType>(
@@ -990,6 +1010,17 @@ const BaseAPIFeatureSet: FeatureSet = {
       ).getRouter(),
     );
 
+    app.use(
+      `/${APP_NAME.toLocaleLowerCase()}`,
+      new BaseAPI<
+        ServiceCatalogCodeRepository,
+        ServiceCatalogCodeRepositoryServiceType
+      >(
+        ServiceCatalogCodeRepository,
+        ServiceCatalogCodeRepositoryService,
+      ).getRouter(),
+    );
+
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
       new BaseAPI<MonitorProbe, MonitorProbeServiceType>(
@@ -1032,17 +1063,6 @@ const BaseAPIFeatureSet: FeatureSet = {
       new BaseAPI<Team, TeamServiceType>(Team, TeamService).getRouter(),
     );
 
-    app.use(
-      `/${APP_NAME.toLocaleLowerCase()}`,
-      new BaseAPI<
-        ServiceCopilotCodeRepository,
-        ServiceCopilotCodeRepositoryType
-      >(
-        ServiceCopilotCodeRepository,
-        ServiceCopilotCodeRepositoryService,
-      ).getRouter(),
-    );
-
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
       new BaseAPI<MonitorGroupOwnerUser, MonitorGroupOwnerUserServiceType>(
@@ -1268,20 +1288,11 @@ const BaseAPIFeatureSet: FeatureSet = {
       ).getRouter(),
     );
 
-    app.use(
-      `/${APP_NAME.toLocaleLowerCase()}`,
-      new BaseAPI<Incident, IncidentServiceType>(
-        Incident,
-        IncidentService,
-      ).getRouter(),
-    );
+    app.use(`/${APP_NAME.toLocaleLowerCase()}`, new IncidentAPI().getRouter());
 
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
-      new BaseAPI<ScheduledMaintenance, ScheduledMaintenanceServiceType>(
-        ScheduledMaintenance,
-        ScheduledMaintenanceService,
-      ).getRouter(),
+      new ScheduledMaintenanceAPI().getRouter(),
     );
 
     app.use(
@@ -1634,26 +1645,12 @@ const BaseAPIFeatureSet: FeatureSet = {
       `/${APP_NAME.toLocaleLowerCase()}`,
       new MicrosoftTeamsAPI().getRouter(),
     );
+    app.use(`/${APP_NAME.toLocaleLowerCase()}`, new GitHubAPI().getRouter());
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
       new GlobalConfigAPI().getRouter(),
     );
 
-    app.use(
-      `/${APP_NAME.toLocaleLowerCase()}`,
-      new CopilotCodeRepositoryAPI().getRouter(),
-    );
-
-    app.use(
-      `/${APP_NAME.toLocaleLowerCase()}`,
-      new CopilotActionAPI().getRouter(),
-    );
-
-    app.use(
-      `/${APP_NAME.toLocaleLowerCase()}`,
-      new CopilotPullRequestAPI().getRouter(),
-    );
-
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
       new UserNotificationLogTimelineAPI().getRouter(),
@@ -1675,6 +1672,15 @@ const BaseAPIFeatureSet: FeatureSet = {
     );
     app.use(`/${APP_NAME.toLocaleLowerCase()}`, new UserPushAPI().getRouter());
     app.use(`/${APP_NAME.toLocaleLowerCase()}`, new ProbeAPI().getRouter());
+    app.use(
+      `/${APP_NAME.toLocaleLowerCase()}`,
+      new LlmProviderAPI().getRouter(),
+    );
+
+    app.use(
+      `/${APP_NAME.toLocaleLowerCase()}`,
+      new BaseAPI<LlmLog, LlmLogServiceType>(LlmLog, LlmLogService).getRouter(),
+    );
 
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
@@ -1778,6 +1784,15 @@ const BaseAPIFeatureSet: FeatureSet = {
       ).getRouter(),
     );
 
+    // Code Repository
+    app.use(
+      `/${APP_NAME.toLocaleLowerCase()}`,
+      new BaseAPI<CodeRepository, CodeRepositoryServiceType>(
+        CodeRepository,
+        CodeRepositoryService,
+      ).getRouter(),
+    );
+
     app.use(
       `/${APP_NAME.toLocaleLowerCase()}`,
       new BaseAPI<
@@ -1826,6 +1841,8 @@ const BaseAPIFeatureSet: FeatureSet = {
 
     app.use(`/${APP_NAME.toLocaleLowerCase()}`, NotificationAPI);
 
+    app.use(`/${APP_NAME.toLocaleLowerCase()}`, AIBillingAPI);
+
     app.use(`/${APP_NAME.toLocaleLowerCase()}`, TelemetryAPI);
 
     //attach api's

App/FeatureSet/Notification/Templates/AcknowledgeAlert.hbs

@@ -13,10 +13,8 @@
 {{> DetailBoxField title="Current State: " text=currentState  }}
 {{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
 {{> DetailBoxField title="Severity: " text=alertSeverity  }}
-{{> DetailBoxField title="Root Cause: " text=""  }}
-{{> DetailBoxField title="" text=rootCause  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=alertDescription  }}
+{{> DetailBoxField title="Root Cause: " text=rootCause  }}
+{{> DetailBoxField title="Description: " text=alertDescription  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/AcknowledgeIncident.hbs

@@ -13,10 +13,8 @@
 {{> DetailBoxField title="Current State: " text=currentState  }}
 {{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
 {{> DetailBoxField title="Severity: " text=incidentSeverity  }}
-{{> DetailBoxField title="Root Cause: " text=""  }}
-{{> DetailBoxField title="" text=rootCause  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=incidentDescription  }}
+{{> DetailBoxField title="Root Cause: " text=rootCause  }}
+{{> DetailBoxField title="Description: " text=incidentDescription  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/AlertOwnerAdded.hbs

@@ -13,8 +13,7 @@
 {{> DetailBoxField title="Current State: " text=currentState  }}
 {{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
 {{> DetailBoxField title="Severity: " text=alertSeverity  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=alertDescription  }}
+{{> DetailBoxField title="Description: " text=alertDescription  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/AlertOwnerNotePosted.hbs

@@ -14,11 +14,10 @@
 {{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
 {{> DetailBoxField title="Severity: " text=alertSeverity  }}
 {{#if isPrivateNote}}
-{{> DetailBoxField title="Private Note: " text=""  }}
+{{> DetailBoxField title="Private Note: " text=note  }}
 {{else}}
-{{> DetailBoxField title="Public Note: " text=""  }}
+{{> DetailBoxField title="Public Note: " text=note  }}
 {{/if}}
-{{> DetailBoxField title="" text=note  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/AlertOwnerResourceCreated.hbs

@@ -13,16 +13,12 @@
 {{> DetailBoxField title="Current State: " text=currentState  }}
 {{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
 {{> DetailBoxField title="Alert Declared By: " text=declaredBy  }}
-{{> DetailBoxField title="Alert Declared At: " text=""  }}
-{{> DetailBoxField title="" text=declaredAt  }}
+{{> DetailBoxField title="Alert Declared At: " text=declaredAt  }}
 {{> DetailBoxField title="Severity: " text=alertSeverity  }}
-{{> DetailBoxField title="Root Cause: " text=""  }}
-{{> DetailBoxField title="" text=rootCause  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=alertDescription  }}
+{{> DetailBoxField title="Root Cause: " text=rootCause  }}
+{{> DetailBoxField title="Description: " text=alertDescription  }}
 {{#ifNotCond remediationNotes ""}}
-{{> DetailBoxField title="Remediation Notes: " text=""  }}
-{{> DetailBoxField title="" text=remediationNotes  }}
+{{> DetailBoxField title="Remediation Notes: " text=remediationNotes  }}
 {{/ifNotCond}}
 {{> DetailBoxEnd this }}
 

App/FeatureSet/Notification/Templates/AlertOwnerStateChanged.hbs

@@ -4,19 +4,20 @@
 {{> Logo this}}
 {{> EmailTitle title=(concat "Alert: " alertTitle) }}
 
-{{> InfoBlock info=(concat "Alert state changed to - " currentState)}}
+{{> InfoBlock info="Alert state has changed"}}
 
 {{> InfoBlock info="Here are the details: "}}
 
 {{> DetailBoxStart this }}
+{{> StateTransition this}}
+{{#ifNotCond previousStateDurationText ""}}
+{{> DetailBoxField title="Duration in Previous State:" text=previousStateDurationText }}
+{{/ifNotCond}}
 {{> DetailBoxField title="Alert Title:" text=alertTitle }}
-{{> DetailBoxField title="New State: " text=currentState  }}
-{{> DetailBoxField title="State changed at: " text=""  }}
-{{> DetailBoxField title="" text=stateChangedAt  }}
-{{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
-{{> DetailBoxField title="Severity: " text=alertSeverity  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=alertDescription  }}
+{{> DetailBoxField title="State changed at:" text=stateChangedAt }}
+{{> DetailBoxField title="Resources Affected:" text=resourcesAffected }}
+{{> DetailBoxField title="Severity:" text=alertSeverity }}
+{{> DetailBoxField title="Description:" text=alertDescription }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/BlankTemplate.hbs

@@ -0,0 +1 @@
+{{{body}}}

App/FeatureSet/Notification/Templates/ForgotPassword.hbs

@@ -2,15 +2,20 @@
 
 {{> Logo this}}
 
-{{> EmailTitle title="Forgot Password? We're here to help." }}
+{{> EmailTitle title="Reset Your Password" }}
 
-{{> InfoBlock info="Please click on the 'Reset your password' button below which will help you reset your password and once you're done, You're good to go!"}}
+{{> InfoBlock info="We received a request to reset your password. Click the button below to create a new password for your account."}}
 
-{{> ButtonBlock buttonUrl=tokenVerifyUrl buttonText="Reset your password"}}
+{{> ButtonBlock buttonUrl=tokenVerifyUrl buttonText="Reset Password"}}
 
-{{> InfoBlock info="You can also copy and paste this link:"}}
+{{> VerticalSpace this}}
+
+{{> InfoBlock info="Or copy and paste this link into your browser:"}}
 {{> InfoBlock info=tokenVerifyUrl}}
-{{> InfoBlock info="This password reset link expires in 24 hours."}}
+
+{{> VerticalSpace this}}
+
+{{> InfoBlock info="<strong>Note:</strong> This password reset link will expire in 24 hours. If you didn't request this reset, you can safely ignore this email."}}
 
 {{> SupportBlock this }}
 

App/FeatureSet/Notification/Templates/IncidentOwnerAdded.hbs

@@ -13,8 +13,7 @@
 {{> DetailBoxField title="Current State: " text=currentState  }}
 {{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
 {{> DetailBoxField title="Severity: " text=incidentSeverity  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=incidentDescription  }}
+{{> DetailBoxField title="Description: " text=incidentDescription  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/IncidentOwnerNotePosted.hbs

@@ -14,11 +14,10 @@
 {{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
 {{> DetailBoxField title="Severity: " text=incidentSeverity  }}
 {{#if isPrivateNote}}
-{{> DetailBoxField title="Private Note: " text=""  }}
+{{> DetailBoxField title="Private Note: " text=note  }}
 {{else}}
-{{> DetailBoxField title="Public Note: " text=""  }}
+{{> DetailBoxField title="Public Note: " text=note  }}
 {{/if}}
-{{> DetailBoxField title="" text=note  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/IncidentOwnerResourceCreated.hbs

@@ -13,16 +13,12 @@
 {{> DetailBoxField title="Current State: " text=currentState  }}
 {{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
 {{> DetailBoxField title="Incident Declared By: " text=declaredBy  }}
-{{> DetailBoxField title="Incident Declared At: " text=""  }}
-{{> DetailBoxField title="" text=declaredAt  }}
+{{> DetailBoxField title="Incident Declared At: " text=declaredAt  }}
 {{> DetailBoxField title="Severity: " text=incidentSeverity  }}
-{{> DetailBoxField title="Root Cause: " text=""  }}
-{{> DetailBoxField title="" text=rootCause  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=incidentDescription  }}
+{{> DetailBoxField title="Root Cause: " text=rootCause  }}
+{{> DetailBoxField title="Description: " text=incidentDescription  }}
 {{#ifNotCond remediationNotes ""}}
-{{> DetailBoxField title="Remediation Notes: " text=""  }}
-{{> DetailBoxField title="" text=remediationNotes  }}
+{{> DetailBoxField title="Remediation Notes: " text=remediationNotes  }}
 {{/ifNotCond}}
 {{> DetailBoxEnd this }}
 

App/FeatureSet/Notification/Templates/IncidentOwnerStateChanged.hbs

@@ -4,19 +4,20 @@
 {{> Logo this}}
 {{> EmailTitle title=(concat "Incident: " incidentTitle) }}
 
-{{> InfoBlock info=(concat "Incident state changed to - " currentState)}}
+{{> InfoBlock info="Incident state has changed"}}
 
 {{> InfoBlock info="Here are the details: "}}
 
 {{> DetailBoxStart this }}
+{{> StateTransition this}}
+{{#ifNotCond previousStateDurationText ""}}
+{{> DetailBoxField title="Duration in Previous State:" text=previousStateDurationText }}
+{{/ifNotCond}}
 {{> DetailBoxField title="Incident Title:" text=incidentTitle }}
-{{> DetailBoxField title="New State: " text=currentState  }}
-{{> DetailBoxField title="State changed at: " text=""  }}
-{{> DetailBoxField title="" text=stateChangedAt  }}
-{{> DetailBoxField title="Resources Affected: " text=resourcesAffected  }}
-{{> DetailBoxField title="Severity: " text=incidentSeverity  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=incidentDescription  }}
+{{> DetailBoxField title="State changed at:" text=stateChangedAt }}
+{{> DetailBoxField title="Resources Affected:" text=resourcesAffected }}
+{{> DetailBoxField title="Severity:" text=incidentSeverity }}
+{{> DetailBoxField title="Description:" text=incidentDescription }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/InviteMember.hbs

@@ -2,28 +2,33 @@
 
 {{> Logo this}}
 
-{{> EmailTitle title=(concat "You have been invited to " projectName) }}
+{{> EmailTitle title=(concat "👋 You're Invited to " projectName) }}
 
 {{#ifCond isNewUser "true"}}
-{{> InfoBlock info="Please sign up to a new account to accept this invitation"}}
+{{> InfoBlock info="You've been invited to join a project on OneUptime. Create your account to get started."}}
 
-{{> ButtonBlock buttonUrl=registerLink buttonText="Sign up to a new account"}}
+{{> ButtonBlock buttonUrl=registerLink buttonText="Create Your Account"}}
 
-{{> InfoBlock info="You can also copy and paste this link:"}}
+{{> VerticalSpace this}}
+
+{{> InfoBlock info="Or copy and paste this link into your browser:"}}
 {{> InfoBlock info=registerLink}}
 {{/ifCond}}
 
 {{#ifCond isNewUser "false"}}
-{{> InfoBlock info="Please sign in to your account to see all your invitations and manage them."}}
+{{> InfoBlock info="You've been invited to join a project on OneUptime. Sign in to view and manage your invitations."}}
 
-{{> ButtonBlock buttonUrl=signInLink buttonText="Sign in to OneUptime"}}
+{{> ButtonBlock buttonUrl=signInLink buttonText="Sign In to OneUptime"}}
 
-{{> InfoBlock info="You can also copy and paste this link:"}}
+{{> VerticalSpace this}}
+
+{{> InfoBlock info="Or copy and paste this link into your browser:"}}
 {{> InfoBlock info=signInLink}}
 {{/ifCond}}
 
+{{> VerticalSpace this}}
 
-{{> InfoBlock info="If you have not signed up to OneUptime so far. You'll be redirected to the account sign up page to sign up first."}}
+{{> InfoBlock info="<em>If you don't have an account yet, you'll be redirected to create one first.</em>"}}
 
 {{> SupportBlock this }}
 

App/FeatureSet/Notification/Templates/MonitorOwnerAdded.hbs

@@ -10,9 +10,15 @@
 
 {{> DetailBoxStart this }}
 {{> DetailBoxField title="Monitor Name:" text=monitorName }}
+{{#ifNotCond monitorDestination ""}}
+{{#ifCond monitorType "API"}}
+{{> DetailBoxField title="Monitor URL:" text=(concat requestType " " monitorDestination) }}
+{{else}}
+{{> DetailBoxField title="Monitor Destination:" text=monitorDestination }}
+{{/ifCond}}
+{{/ifNotCond}}
 {{> DetailBoxField title="Current Status: " text=currentStatus  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=monitorDescription  }}
+{{> DetailBoxField title="Description: " text=monitorDescription  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/MonitorOwnerResourceCreated.hbs

@@ -10,9 +10,15 @@
 
 {{> DetailBoxStart this }}
 {{> DetailBoxField title="Monitor Name:" text=monitorName }}
+{{#ifNotCond monitorDestination ""}}
+{{#ifCond monitorType "API"}}
+{{> DetailBoxField title="Monitor URL:" text=(concat requestType " " monitorDestination) }}
+{{else}}
+{{> DetailBoxField title="Monitor Destination:" text=monitorDestination }}
+{{/ifCond}}
+{{/ifNotCond}}
 {{> DetailBoxField title="Current Status: " text=currentStatus  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=monitorDescription  }}
+{{> DetailBoxField title="Description: " text=monitorDescription  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/MonitorOwnerStatusChanged.hbs

@@ -4,21 +4,28 @@
 {{> Logo this}}
 {{> EmailTitle title=(concat "Monitor: " monitorName) }}
 
-{{> InfoBlock info=(concat "Monitor status changed to - " currentStatus)}}
+{{> InfoBlock info="Monitor status has changed"}}
 
 {{> InfoBlock info="Here are the details: "}}
 
 {{> DetailBoxStart this }}
-{{> DetailBoxField title="Monitor Name:" text=monitorName }}
-{{> DetailBoxField title="New Status: " text=currentStatus  }}
-{{#ifNotCond rootCause ""}}
-{{> DetailBoxField title="Root Cause: " text=""  }}
-{{> DetailBoxField title="" text=rootCause  }}
+{{> StatusTransition this}}
+{{#ifNotCond previousStatusDurationText ""}}
+{{> DetailBoxField title="Duration in Previous Status:" text=previousStatusDurationText }}
 {{/ifNotCond}}
-{{> DetailBoxField title="Status changed at: " text=""  }}
-{{> DetailBoxField title="" text=statusChangedAt  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=monitorDescription  }}
+{{> DetailBoxField title="Monitor Name:" text=monitorName }}
+{{#ifNotCond monitorDestination ""}}
+{{#ifCond monitorType "API"}}
+{{> DetailBoxField title="Monitor URL:" text=(concat requestType " " monitorDestination) }}
+{{else}}
+{{> DetailBoxField title="Monitor Destination:" text=monitorDestination }}
+{{/ifCond}}
+{{/ifNotCond}}
+{{#ifNotCond rootCause ""}}
+{{> DetailBoxField title="Root Cause:" text=rootCause }}
+{{/ifNotCond}}
+{{> DetailBoxField title="Status changed at:" text=statusChangedAt }}
+{{> DetailBoxField title="Description:" text=monitorDescription }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/MonitorProbesStatus.hbs

@@ -8,8 +8,14 @@
 
 {{> DetailBoxStart this }}
 {{> DetailBoxField title="Monitor Name:" text=monitorName }}
-{{> DetailBoxField title="Monitor Description: " text=""  }}
-{{> DetailBoxField title="" text=monitorDescription  }}
+{{#ifNotCond monitorDestination ""}}
+{{#ifCond monitorType "API"}}
+{{> DetailBoxField title="Monitor URL:" text=(concat requestType " " monitorDestination) }}
+{{else}}
+{{> DetailBoxField title="Monitor Destination:" text=monitorDestination }}
+{{/ifCond}}
+{{/ifNotCond}}
+{{> DetailBoxField title="Monitor Description: " text=monitorDescription  }}
 {{> DetailBoxField title="Probe Status: " text=currentStatus  }}
 {{> DetailBoxEnd this }}
 

App/FeatureSet/Notification/Templates/Partials/ButtonBlock.hbs

@@ -1,3 +1,4 @@
+<!-- Primary Action Button -->
 <table class="st-Copy st-Width st-Width--mobile" border="0" cellpadding="0" cellspacing="0"
                     width="600" style="min-width: 600px;">
                     <tbody>
@@ -8,26 +9,26 @@
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
                         <td class="st-Font st-Font--body"
-                          style="border: 0; margin: 0; padding: 0; color: #000000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 16px; line-height: 24px;">
+                          style="border: 0; margin: 0; padding: 0; color: #1a1a2e; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 16px; line-height: 24px;">
 
-                          <!-- Button & Modifier: fullWidth -->
+                          <!-- Button & Modifier: fullWidth with gradient -->
                           <table class="st-Button st-Button--fullWidth" border="0" cellpadding="0" cellspacing="0"
                             width="100%">
                             <tbody>
                               <tr>
-                                <td align="center" class="st-Button-area" height="38" valign="middle"
-                                  style="border: 0; margin: 0; padding: 0; background-color: #000000; border-radius: 5px; text-align: center;">
+                                <td align="center" class="st-Button-area" height="48" valign="middle"
+                                  style="border: 0; margin: 0; padding: 0; background: linear-gradient(135deg, #1a1a2e 0%, #000000 100%); border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">
                                   <a class="st-Button-link"
-                                    style="border: 0; margin: 0; padding: 0; color: #ffffff; display: block; height: 38px; text-align: center; text-decoration: none;"
+                                    style="border: 0; margin: 0; padding: 0; color: #ffffff; display: block; height: 48px; text-align: center; text-decoration: none;"
                                     href={{buttonUrl}}>
                                     <span class="st-Button-internal"
-                                      style="border: 0; margin: 0; padding: 0; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 16px; font-weight: bold; height: 38px; line-height: 38px; mso-line-height-rule: exactly; text-decoration: none; vertical-align: middle; white-space: nowrap; width: 100%;">{{buttonText}}</span>
+                                      style="border: 0; margin: 0; padding: 0; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 15px; font-weight: 600; height: 48px; line-height: 48px; mso-line-height-rule: exactly; text-decoration: none; vertical-align: middle; white-space: nowrap; width: 100%; letter-spacing: 0.3px;">{{buttonText}}</span>
                                   </a>
                                 </td>
                               </tr>
                             </tbody>
                           </table>
-                          <!-- /Button & Modifier: fullWidth -->
+                          <!-- /Button & Modifier: fullWidth with gradient -->
 
                         </td>
                         <td class="st-Spacer st-Spacer--gutter"
@@ -37,10 +38,11 @@
                         </td>
                       </tr>
                       <tr>
-                        <td class="st-Spacer st-Spacer--stacked" colspan="3" height="12"
+                        <td class="st-Spacer st-Spacer--stacked" colspan="3" height="16"
                           style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
                       </tr>
                     </tbody>
-                  </table>
+                  </table>
+<!-- /Primary Action Button -->

App/FeatureSet/Notification/Templates/Partials/CustomLogo.hbs

@@ -19,7 +19,7 @@
                             <a style="border: 0; margin: 0; padding: 0; text-decoration: none;" href={{homeURL}}>
 
                               <img alt="OneUptime" height="70" border="0"
-                                style="height:70px; border: 0; margin: 0; padding: 0; color: #000000; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 12px; font-weight: normal;"
+                                style="height:70px; border: 0; margin: 0; padding: 0; color: #000000; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 12px; font-weight: normal; border-radius: 10%;"
                                 src="{{logoUrl}}">
                             </a>
                           </div>

App/FeatureSet/Notification/Templates/Partials/DetailBoxEnd.hbs

@@ -1,4 +1,4 @@
-   
+<!-- End Detail Card Field Container -->
                                         </td>
                                       </tr>
                                     </tbody>
@@ -10,4 +10,5 @@
                         </td>
                       </tr>
                     </tbody>
-                  </table>
+                  </table>
+<!-- /Detail Card Container -->

App/FeatureSet/Notification/Templates/Partials/DetailBoxField.hbs

@@ -1,7 +1,9 @@
-<p style="Margin:0;font-size:16px;font-family:'inter','helvetica neue',helvetica,arial,sans-serif;line-height:30px;color:#424761">
+<!-- Detail Card Field -->
+<div class="st-DetailCard-field" style="padding: 10px 0; border-bottom: 1px solid #e2e8f0;">
 {{#if title}} 
-<strong>{{{title}}} </strong>{{{text}}} </span>
-{{else}}
-{{{text}}}
+<p class="st-DetailCard-label" style="Margin:0 0 4px 0;font-size:11px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;line-height:16px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;">{{{title}}}</p>
 {{/if}}
-</p>
+{{#if text}}
+<p class="st-DetailCard-value" style="Margin:0;font-size:15px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;line-height:24px;color:#1e293b;font-weight:500;">{{{text}}}</p>
+{{/if}}
+</div>

App/FeatureSet/Notification/Templates/Partials/DetailBoxStart.hbs

@@ -1,19 +1,20 @@
-<table class="st-Copy st-Width st-Width--mobile" border="0" cellpadding="0" cellspacing="0"
-                    width="500" style="min-width: 500px;margin: 10px 50px;">
+<!-- Detail Card Container -->
+<table class="st-Copy st-Width st-Width--mobile st-DetailCard" border="0" cellpadding="0" cellspacing="0"
+                    width="472" style="min-width: 472px; margin: 16px 64px; border-radius: 12px; overflow: hidden;">
                     <tbody>
                       <tr style="border-collapse:collapse">
-                        <td width="720" align="center" valign="top" style="padding:0;Margin:0"></td>
+                        <td width="100%" align="center" valign="top" style="padding:0;Margin:0"></td>
                       </tr>
                       <tr style="border-collapse:collapse">
                         <td align="left"
-                          style="padding:0;Margin:0;padding-top:0px;padding-left:40px;padding-right:40px;padding-bottom:30px;background-color:#f7f8fa;border-radius: 5px">
+                          style="padding:0;Margin:0;padding-top:0px;padding-left:0;padding-right:0;padding-bottom:0;background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);">
                           <table cellpadding="0" cellspacing="0" width="100%"
                             style="border-collapse:collapse;border-spacing:0px">
                             <tbody>
                               <tr style="border-collapse:collapse">
-                                <td width="720" align="center" valign="top" style="padding:0;Margin:0">
+                                <td width="100%" align="center" valign="top" style="padding:0;Margin:0">
                                   <table cellpadding="0" cellspacing="0" width="100%" role="presentation"
                                     style="border-collapse:collapse;border-spacing:0px">
                                     <tbody>
                                       <tr style="border-collapse:collapse">
-                                        <td align="left" style="padding:0;Margin:0;padding-top:30px">
+                                        <td align="left" style="padding:24px 28px 0 28px;Margin:0;">

App/FeatureSet/Notification/Templates/Partials/EmailTitle.hbs

@@ -1,3 +1,4 @@
+<!-- Email Title Block -->
   <table class="st-Copy st-Width st-Width--mobile" border="0" cellpadding="0" cellspacing="0"
                     width="600" style="min-width: 600px;">
                     <tbody>
@@ -7,10 +8,10 @@
                           width="64">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
-                        <td class="st-Font st-Font--body"
-                          style="color: #000000 !important; border:0;margin:0;padding:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Ubuntu,sans-serif;font-size:16px;line-height:24px">
+                        <td class="st-Font st-Font--title"
+                          style="color: #1a1a2e !important; border:0;margin:0;padding:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;font-size:24px;line-height:32px;font-weight:700;">
 
-                          <h3>{{title}}</h3>
+                          <h2 style="margin: 0; padding: 0; font-size: 24px; line-height: 32px; font-weight: 700; color: #1a1a2e;">{{title}}</h2>
 
                         </td>
                         <td class="st-Spacer st-Spacer--gutter"
@@ -20,10 +21,11 @@
                         </td>
                       </tr>
                       <tr>
-                        <td class="st-Spacer st-Spacer--stacked" colspan="3" height="12"
+                        <td class="st-Spacer st-Spacer--stacked" colspan="3" height="16"
                           style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
                       </tr>
                     </tbody>
-                  </table>
+                  </table>
+<!-- /Email Title Block -->

App/FeatureSet/Notification/Templates/Partials/End.hbs

@@ -7,7 +7,7 @@
         </td>
       </tr>
       <tr>
-        <td class="st-Spacer st-Spacer--emailEnd" height="64"
+        <td class="st-Spacer st-Spacer--emailEnd" height="48"
           style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
           <div class="st-Spacer st-Spacer--filler">&nbsp;</div>
         </td>

App/FeatureSet/Notification/Templates/Partials/Footer.hbs

@@ -1,8 +1,9 @@
+<!-- Footer Block -->
     <table class="st-Footer st-Width st-Width--mobile" border="0" cellpadding="0" cellspacing="0"
                     width="600" style="min-width: 600px;">
                     <tbody>
                       <tr>
-                        <td class="st-Spacer st-Spacer--divider" colspan="3" height="20"
+                        <td class="st-Spacer st-Spacer--divider" colspan="3" height="24"
                           style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; max-height: 1px; mso-line-height-rule: exactly;">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
@@ -13,7 +14,7 @@
                           width="64">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
-                        <td bgcolor="#fdfdfd" colspan="2" height="1"
+                        <td bgcolor="#e5e7eb" colspan="2" height="1"
                           style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; max-height: 1px; mso-line-height-rule: exactly;">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
@@ -24,7 +25,7 @@
                         </td>
                       </tr>
                       <tr>
-                        <td class="st-Spacer st-Spacer--divider" colspan="3" height="31"
+                        <td class="st-Spacer st-Spacer--divider" colspan="3" height="24"
                           style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
@@ -36,10 +37,10 @@
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
                         <td class="st-Font st-Font--caption"
-                          style="border: 0; margin: 0;padding: 0; color: #8898aa; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 12px; line-height: 16px;">
+                          style="border: 0; margin: 0;padding: 0; color: #6b7280; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 13px; line-height: 18px; text-align: center;">
                           <span class="st-Delink st-Delink--footer"
-                            style="border: 0; margin: 0; padding: 0; color: #8898aa; text-decoration: none;">
-                            © {{year}} OneUptime
+                            style="border: 0; margin: 0; padding: 0; color: #6b7280; text-decoration: none;">
+                            © {{year}} OneUptime · Powered by <a href="https://oneuptime.com" style="color: #1a1a2e; text-decoration: none; font-weight: 500;">OneUptime</a>
                           </span>
                         </td>
                         <td class="st-Spacer st-Spacer--gutter"
@@ -49,10 +50,11 @@
                         </td>
                       </tr>
                       <tr>
-                        <td class="st-Spacer st-Spacer--emailEnd" colspan="3" height="64"
+                        <td class="st-Spacer st-Spacer--emailEnd" colspan="3" height="48"
                           style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
                       </tr>
                     </tbody>
-                  </table>
+                  </table>
+<!-- /Footer Block -->

App/FeatureSet/Notification/Templates/Partials/InfoBlock.hbs

@@ -1,4 +1,4 @@
-                  
+<!-- Info Block -->                  
                   <table class="st-Copy st-Width st-Width--mobile" border="0" cellpadding="0" cellspacing="0"
                     width="600" style="min-width: 600px;">
                     <tbody>
@@ -9,7 +9,7 @@
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
                         <td class="st-Font st-Font--body"
-                          style="border: 0; margin: 0; padding: 0; color: #000000 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 16px; line-height: 24px;">
+                          style="border: 0; margin: 0; padding: 0; color: #374151 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 15px; line-height: 26px;">
                             {{{info}}}
                         </td>
                         <td class="st-Spacer st-Spacer--gutter"
@@ -19,12 +19,11 @@
                         </td>
                       </tr>
                       <tr>
-                        <td class="st-Spacer st-Spacer--stacked" colspan="3" height="12"
+                        <td class="st-Spacer st-Spacer--stacked" colspan="3" height="14"
                           style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
                       </tr>
                     </tbody>
                   </table>
-
-                   
+<!-- /Info Block -->

App/FeatureSet/Notification/Templates/Partials/Logo.hbs

@@ -18,7 +18,7 @@
                             <a style="border: 0; margin: 0; padding: 0; text-decoration: none;" href={{homeURL}}>
 
                               <img height="70" width="70" alt="OneUptime" border="0"
-                                style="height:70px; width:70px; border: 0; margin: 0; padding: 0; color: #000000; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 12px; font-weight: normal;"
+                                style="height:70px; width:70px; border: 0; margin: 0; padding: 0; color: #000000; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 12px; font-weight: normal; border-radius: 10%;"
                                 src="https://res.cloudinary.com/deityhub/image/upload/v1637736803/1png.png">
                             </a>
                           </div>

App/FeatureSet/Notification/Templates/Partials/Start.hbs

@@ -5,21 +5,33 @@
 {{> Header}}
 
 
-<body class="st-Email" bgcolor="f7f7f7"
+<body class="st-Email" bgcolor="f3f4f6"
   style="border: 0; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; min-width: 100%; width: 100%;"
   override="fix">
 
     <!-- Background -->
-  <table class="st-Background" bgcolor="f7f7f7" border="0" cellpadding="0" cellspacing="0" width="100%"
+  <table class="st-Background" bgcolor="f3f4f6" border="0" cellpadding="0" cellspacing="0" width="100%"
     style="border: 0; margin: 0; padding: 0;">
     <tbody>
       <tr>
         <td style="border: 0; margin: 0; padding: 0;">
 
+          <!-- Top Spacer -->
+          <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="min-width: 600px;">
+            <tbody>
+              <tr>
+                <td height="32" style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px;">
+                  <div>&nbsp;</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <!-- /Top Spacer -->
+
           <!-- Wrapper -->
           <table class="st-Wrapper" align="center" bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0"
             width="600"
-            style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin: 0 auto; min-width: 600px;">
+            style="border-radius: 12px; margin: 0 auto; min-width: 600px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); border-top: 4px solid #1a1a2e;">
             <tbody>
               <tr>
                 <td style="border: 0; margin: 0; padding: 0;">

App/FeatureSet/Notification/Templates/Partials/StateTransition.hbs

@@ -0,0 +1,31 @@
+<!-- State Transition Block - Inline version for DetailBox -->
+<div class="st-DetailCard-field" style="padding: 16px 0; border-bottom: 1px solid #e2e8f0;">
+  <p class="st-DetailCard-label" style="Margin:0 0 12px 0;font-size:11px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;line-height:16px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;">STATE CHANGE</p>
+  <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
+    <tbody>
+      <tr>
+        {{#if previousState}}
+        <!-- Previous State Badge -->
+        <td align="center" valign="middle" style="padding: 0;">
+          <span style="display: inline-block; white-space: nowrap; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; background-color: transparent; color: {{previousStateColor}}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; line-height: 16px; vertical-align: middle;">
+            <span style="width: 10px; height: 10px; border-radius: 4px; background-color: {{previousStateColor}}; display: inline-block; margin-right: 8px; vertical-align: middle;"></span>
+            <span style="display: inline-block; line-height: 16px; vertical-align: middle;">{{previousState}}</span>
+          </span>
+        </td>
+        <!-- Arrow -->
+        <td align="center" valign="middle" style="padding: 0 12px;">
+          <span style="font-size: 20px; color: #94a3b8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">→</span>
+        </td>
+        {{/if}}
+        <!-- Current State Badge -->
+        <td align="center" valign="middle" style="padding: 0;">
+          <span style="display: inline-block; white-space: nowrap; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; background-color: transparent; color: {{currentStateColor}}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; line-height: 16px; vertical-align: middle;">
+            <span style="width: 10px; height: 10px; border-radius: 4px; background-color: {{currentStateColor}}; display: inline-block; margin-right: 8px; vertical-align: middle;"></span>
+            <span style="display: inline-block; line-height: 16px; vertical-align: middle;">{{currentState}}</span>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<!-- /State Transition Block -->

App/FeatureSet/Notification/Templates/Partials/StatusBadge.hbs

@@ -0,0 +1,58 @@
+<!-- Status Badge - Used for incident states, severity levels, etc. -->
+<table class="st-Copy st-Width st-Width--mobile" border="0" cellpadding="0" cellspacing="0"
+                    width="600" style="min-width: 600px;">
+                    <tbody>
+                      <tr>
+                        <td class="st-Spacer st-Spacer--gutter"
+                          style="border: 0; margin:0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"
+                          width="64">
+                          <div class="st-Spacer st-Spacer--filler"></div>
+                        </td>
+                        <td style="border: 0; margin: 0; padding: 0;">
+                          
+                          {{#ifCond badgeType "critical"}}
+                          <span class="st-Badge st-Badge--critical" style="display: inline-block; padding: 6px 14px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #fef2f2; color: #dc2626; border: 1px solid #fecaca; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">
+                            {{badgeText}}
+                          </span>
+                          {{/ifCond}}
+                          
+                          {{#ifCond badgeType "warning"}}
+                          <span class="st-Badge st-Badge--warning" style="display: inline-block; padding: 6px 14px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #fffbeb; color: #d97706; border: 1px solid #fde68a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">
+                            {{badgeText}}
+                          </span>
+                          {{/ifCond}}
+                          
+                          {{#ifCond badgeType "success"}}
+                          <span class="st-Badge st-Badge--success" style="display: inline-block; padding: 6px 14px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">
+                            {{badgeText}}
+                          </span>
+                          {{/ifCond}}
+                          
+                          {{#ifCond badgeType "info"}}
+                          <span class="st-Badge st-Badge--info" style="display: inline-block; padding: 6px 14px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">
+                            {{badgeText}}
+                          </span>
+                          {{/ifCond}}
+                          
+                          {{#ifCond badgeType "neutral"}}
+                          <span class="st-Badge st-Badge--neutral" style="display: inline-block; padding: 6px 14px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">
+                            {{badgeText}}
+                          </span>
+                          {{/ifCond}}
+                          
+                        </td>
+                        <td class="st-Spacer st-Spacer--gutter"
+                          style="border: 0; margin:0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"
+                          width="64">
+                          <div class="st-Spacer st-Spacer--filler"></div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="st-Spacer st-Spacer--stacked" colspan="3" height="12"
+                          style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
+                          <div class="st-Spacer st-Spacer--filler"></div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+<!-- /Status Badge -->

App/FeatureSet/Notification/Templates/Partials/StatusTransition.hbs

@@ -0,0 +1,31 @@
+<!-- Status Transition Block - Inline version for DetailBox -->
+<div class="st-DetailCard-field" style="padding: 16px 0; border-bottom: 1px solid #e2e8f0;">
+  <p class="st-DetailCard-label" style="Margin:0 0 12px 0;font-size:11px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;line-height:16px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;">STATUS CHANGE</p>
+  <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
+    <tbody>
+      <tr>
+        {{#if previousStatus}}
+        <!-- Previous Status Badge -->
+        <td align="center" valign="middle" style="padding: 0;">
+          <span style="display: inline-block; white-space: nowrap; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; background-color: transparent; color: {{previousStatusColor}}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; line-height: 16px; vertical-align: middle;">
+            <span style="width: 10px; height: 10px; border-radius: 9999px; background-color: {{previousStatusColor}}; display: inline-block; margin-right: 8px; vertical-align: middle;"></span>
+            <span style="display: inline-block; line-height: 16px; vertical-align: middle;">{{previousStatus}}</span>
+          </span>
+        </td>
+        <!-- Arrow -->
+        <td align="center" valign="middle" style="padding: 0 12px;">
+          <span style="font-size: 20px; color: #94a3b8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">→</span>
+        </td>
+        {{/if}}
+        <!-- Current Status Badge -->
+        <td align="center" valign="middle" style="padding: 0;">
+          <span style="display: inline-block; white-space: nowrap; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; background-color: transparent; color: {{currentStatusColor}}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; line-height: 16px; vertical-align: middle;">
+            <span style="width: 10px; height: 10px; border-radius: 9999px; background-color: {{currentStatusColor}}; display: inline-block; margin-right: 8px; vertical-align: middle;"></span>
+            <span style="display: inline-block; line-height: 16px; vertical-align: middle;">{{currentStatus}}</span>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<!-- /Status Transition Block -->

App/FeatureSet/Notification/Templates/Partials/Style.hbs

@@ -52,7 +52,7 @@
 **/
 
     span.st-Delink a {
-      color: #000000 !important;
+      color: #1a1a2e !important;
       text-decoration: none !important;
     }
 
@@ -66,7 +66,7 @@
 
     /** Modifier: title */
     span.st-Delink.st-Delink--title a {
-      color: #000000 !important;
+      color: #1a1a2e !important;
       text-decoration: none !important;
     }
 
@@ -74,14 +74,111 @@
 
     /** Modifier: footer */
     span.st-Delink.st-Delink--footer a {
-      color: #8898aa !important;
+      color: #6b7280 !important;
       text-decoration: none !important;
     }
 
     /** */
 
     .ii a[href] {
-      color: #000000;
+      color: #1a1a2e;
+    }
+
+    /**
+  * # Links
+  * - Styled links with modern colors
+**/
+
+    a.st-Link {
+      color: #1a1a2e !important;
+      text-decoration: none !important;
+      transition: color 0.2s ease !important;
+    }
+
+    a.st-Link:hover {
+      color: #000000 !important;
+      text-decoration: underline !important;
+    }
+
+    /**
+  * # Status Badges
+  * - Colored badges for incident/alert states
+**/
+
+    .st-Badge {
+      display: inline-block !important;
+      padding: 4px 12px !important;
+      border-radius: 9999px !important;
+      font-size: 12px !important;
+      font-weight: 600 !important;
+      text-transform: uppercase !important;
+      letter-spacing: 0.5px !important;
+    }
+
+    .st-Badge--critical {
+      background-color: #fef2f2 !important;
+      color: #dc2626 !important;
+      border: 1px solid #fecaca !important;
+    }
+
+    .st-Badge--warning {
+      background-color: #fffbeb !important;
+      color: #d97706 !important;
+      border: 1px solid #fde68a !important;
+    }
+
+    .st-Badge--success {
+      background-color: #f0fdf4 !important;
+      color: #16a34a !important;
+      border: 1px solid #bbf7d0 !important;
+    }
+
+    .st-Badge--info {
+      background-color: #f3f4f6 !important;
+      color: #1a1a2e !important;
+      border: 1px solid #d1d5db !important;
+    }
+
+    .st-Badge--neutral {
+      background-color: #f3f4f6 !important;
+      color: #4b5563 !important;
+      border: 1px solid #d1d5db !important;
+    }
+
+    /**
+  * # Detail Cards
+  * - Modern card styling for detail boxes
+**/
+
+    .st-DetailCard {
+      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
+      border: 1px solid #e2e8f0 !important;
+      border-radius: 12px !important;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
+    }
+
+    .st-DetailCard-field {
+      padding: 12px 0 !important;
+      border-bottom: 1px solid #e2e8f0 !important;
+    }
+
+    .st-DetailCard-field:last-child {
+      border-bottom: none !important;
+    }
+
+    .st-DetailCard-label {
+      color: #64748b !important;
+      font-size: 12px !important;
+      font-weight: 600 !important;
+      text-transform: uppercase !important;
+      letter-spacing: 0.5px !important;
+      margin-bottom: 4px !important;
+    }
+
+    .st-DetailCard-value {
+      color: #1e293b !important;
+      font-size: 15px !important;
+      font-weight: 500 !important;
     }
 
     /**
@@ -107,7 +204,7 @@
 
       /** Modifier: gutter */
       body[override] td.st-Spacer.st-Spacer--gutter {
-        width: 32px !important;
+        width: 24px !important;
       }
 
       /** */
@@ -134,8 +231,8 @@
       body[override] td.st-Font.st-Font--title,
       body[override] td.st-Font.st-Font--title span,
       body[override] td.st-Font.st-Font--title a {
-        font-size: 28px !important;
-        line-height: 36px !important;
+        font-size: 26px !important;
+        line-height: 34px !important;
       }
 
       /** */
@@ -144,8 +241,8 @@
       body[override] td.st-Font.st-Font--header,
       body[override] td.st-Font.st-Font--header span,
       body[override] td.st-Font.st-Font--header a {
-        font-size: 24px !important;
-        line-height: 32px !important;
+        font-size: 22px !important;
+        line-height: 30px !important;
       }
 
       /** */
@@ -154,8 +251,8 @@
       body[override] td.st-Font.st-Font--body,
       body[override] td.st-Font.st-Font--body span,
       body[override] td.st-Font.st-Font--body a {
-        font-size: 18px !important;
-        line-height: 28px !important;
+        font-size: 16px !important;
+        line-height: 26px !important;
       }
 
       /** */
@@ -164,8 +261,8 @@
       body[override] td.st-Font.st-Font--caption,
       body[override] td.st-Font.st-Font--caption span,
       body[override] td.st-Font.st-Font--caption a {
-        font-size: 14px !important;
-        line-height: 20px !important;
+        font-size: 13px !important;
+        line-height: 19px !important;
       }
 
       /** */
@@ -185,7 +282,7 @@
 
       body[override] table.st-Divider td.st-Spacer.st-Spacer--gutter,
       body[override] tr.st-Divider td.st-Spacer.st-Spacer--gutter {
-        background-color: #000000;
+        background-color: #1a1a2e;
       }
 
       /**
@@ -212,10 +309,23 @@
       body[override] table.st-Button td.st-Button-area,
       body[override] table.st-Button td.st-Button-area a.st-Button-link,
       body[override] table.st-Button td.st-Button-area span.st-Button-internal {
-        height: 44px !important;
-        line-height: 44px !important;
-        font-size: 18px !important;
+        height: 48px !important;
+        line-height: 48px !important;
+        font-size: 16px !important;
         vertical-align: middle !important;
       }
+
+      /**
+    * # Detail Cards - Mobile
+  **/
+
+      body[override] .st-DetailCard {
+        border-radius: 8px !important;
+      }
+
+      body[override] .st-Badge {
+        font-size: 11px !important;
+        padding: 3px 10px !important;
+      }
     }
   </style>

App/FeatureSet/Notification/Templates/Partials/SupportBlock.hbs

@@ -1,3 +1,4 @@
-
-{{> InfoBlock info="If you need help. Please do not hesitate to contact OneUptime support team at support@oneuptime.com."}}
+<!-- Support Block -->
+{{> InfoBlock info="Need help? Contact our support team at <a href='mailto:support@oneuptime.com' style='color: #1a1a2e; text-decoration: none; font-weight: 500;'>support@oneuptime.com</a>"}}
 {{> Thanks }}
+<!-- /Support Block -->

App/FeatureSet/Notification/Templates/Partials/Thanks.hbs

@@ -1,2 +1,3 @@
-{{> InfoBlock info="Thanks, have a great day."}}
-{{> InfoBlock info="OneUptime Team."}}
+<!-- Thanks Block -->
+{{> InfoBlock info="<span style='color: #374151;'>Best regards,</span><br><strong style='color: #1a1a2e;'>The OneUptime Team</strong>"}}
+<!-- /Thanks Block -->

App/FeatureSet/Notification/Templates/Partials/TitleBlock.hbs

@@ -1,4 +1,4 @@
-
+<!-- Title Block -->
 <table class="st-Copy st-Width st-Width--mobile" border="0" cellpadding="0" cellspacing="0"
 width="600" style="min-width: 600px;">
 <tbody>
@@ -9,8 +9,8 @@ width="600" style="min-width: 600px;">
         <div class="st-Spacer st-Spacer--filler"></div>
     </td>
     <td class="st-Font st-Font--body"
-        style="border: 0; margin: 0; padding: 0; color: #000000 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 16px; line-height: 24px;">
-        <strong>{{{title}}}</strong>
+        style="border: 0; margin: 0; padding: 0; color: #1a1a2e !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 15px; line-height: 26px;">
+        <strong style="color: #1a1a2e; font-weight: 600;">{{{title}}}</strong>
     </td>
     <td class="st-Spacer st-Spacer--gutter"
         style="border: 0; margin:0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"
@@ -19,11 +19,11 @@ width="600" style="min-width: 600px;">
     </td>
     </tr>
     <tr>
-    <td class="st-Spacer st-Spacer--stacked" colspan="3" height="12"
+    <td class="st-Spacer st-Spacer--stacked" colspan="3" height="14"
         style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
         <div class="st-Spacer st-Spacer--filler"></div>
     </td>
     </tr>
 </tbody>
 </table>
-
+<!-- /Title Block -->

App/FeatureSet/Notification/Templates/Partials/UnsubscribeBlock.hbs

@@ -1,3 +1,4 @@
+<!-- Unsubscribe Block -->
  <table class="st-Copy st-Width st-Width--mobile" border="0" cellpadding="0" cellspacing="0"
                     width="600" style="min-width: 600px;">
                     <tbody>
@@ -7,10 +8,10 @@
                           width="64">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
-                        <td class="st-Font st-Font--body"
-                          style="border: 0; margin: 0; padding: 0; color: #000000 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 12px; line-height: 20px;">
+                        <td class="st-Font st-Font--caption"
+                          style="border: 0; margin: 0; padding: 0; color: #6b7280 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif; font-size: 13px; line-height: 20px;">
 
-                          If you wish to change preferences or unsubscribe, please click <a href="{{unsubscribeUrl}}">here.</a> 
+                          <span style="color: #6b7280;">Want to change your notification preferences?</span> <a href="{{unsubscribeUrl}}" style="color: #1a1a2e; text-decoration: none; font-weight: 500;">Manage subscription</a>
 
                         </td>
                         <td class="st-Spacer st-Spacer--gutter"
@@ -20,10 +21,11 @@
                         </td>
                       </tr>
                       <tr>
-                        <td class="st-Spacer st-Spacer--stacked" colspan="3" height="12"
+                        <td class="st-Spacer st-Spacer--stacked" colspan="3" height="14"
                           style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
                           <div class="st-Spacer st-Spacer--filler"></div>
                         </td>
                       </tr>
                     </tbody>
-                  </table>
+                  </table>
+<!-- /Unsubscribe Block -->

App/FeatureSet/Notification/Templates/Partials/VerticalSpace.hbs

@@ -1,3 +1,12 @@
-<div style="margin-top: 10px; margin-bottom: 10px">
-
-</div>
+<!-- Vertical Spacer -->
+<table class="st-Copy st-Width st-Width--mobile" border="0" cellpadding="0" cellspacing="0"
+                    width="600" style="min-width: 600px;">
+                    <tbody>
+                      <tr>
+                        <td height="20" style="border: 0; margin: 0; padding: 0; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;">
+                          <div class="st-Spacer st-Spacer--filler">&nbsp;</div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+<!-- /Vertical Spacer -->

App/FeatureSet/Notification/Templates/ProbeConnectionStatusChange.hbs

@@ -10,8 +10,7 @@
 {{> DetailBoxField title="Probe Name:" text=probeName }}
 {{> DetailBoxField title="Probe Description:" text=probeDescription }}
 {{> DetailBoxField title="Probe Status:" text=probeStatus }}
-{{> DetailBoxField title="Status Since:" text="" }}
-{{> DetailBoxField title="" text=lastAlive }}
+{{> DetailBoxField title="Status Since:" text=lastAlive }}
 {{> DetailBoxField title="Project Name: " text=projectName  }}
 {{> DetailBoxEnd this }}
 

App/FeatureSet/Notification/Templates/ScheduledMaintenanceOwnerAdded.hbs

@@ -11,8 +11,7 @@
 {{> DetailBoxStart this }}
 {{> DetailBoxField title="Scheduled Maintenance Title:" text=scheduledMaintenanceTitle }}
 {{> DetailBoxField title="Current State: " text=currentState  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=scheduledMaintenanceDescription  }}
+{{> DetailBoxField title="Description: " text=scheduledMaintenanceDescription  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/ScheduledMaintenanceOwnerNotePosted.hbs

@@ -12,11 +12,10 @@
 {{> DetailBoxField title="Scheduled Maintenance Title:" text=scheduledMaintenanceTitle }}
 {{> DetailBoxField title="Current State: " text=currentState  }}
 {{#if isPrivateNote}}
-{{> DetailBoxField title="Private Note: " text=""  }}
+{{> DetailBoxField title="Private Note: " text=note  }}
 {{else}}
-{{> DetailBoxField title="Public Note: " text=""  }}
+{{> DetailBoxField title="Public Note: " text=note  }}
 {{/if}}
-{{> DetailBoxField title="" text=note  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/ScheduledMaintenanceOwnerResourceCreated.hbs

@@ -11,8 +11,7 @@
 {{> DetailBoxStart this }}
 {{> DetailBoxField title="Scheduled Maintenance Title:" text=scheduledMaintenanceTitle }}
 {{> DetailBoxField title="Current State: " text=currentState  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=scheduledMaintenanceDescription  }}
+{{> DetailBoxField title="Description: " text=scheduledMaintenanceDescription  }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/ScheduledMaintenanceOwnerStateChanged.hbs

@@ -4,17 +4,18 @@
 {{> Logo this}}
 {{> EmailTitle title=(concat "Scheduled Maintenance: " scheduledMaintenanceTitle) }}
 
-{{> InfoBlock info=(concat "Scheduled Maintenance status changed to - " currentState)}}
+{{> InfoBlock info="Scheduled Maintenance state has changed"}}
 
 {{> InfoBlock info="Here are the details: "}}
 
 {{> DetailBoxStart this }}
+{{> StateTransition this}}
+{{#ifNotCond previousStateDurationText ""}}
+{{> DetailBoxField title="Duration in Previous State:" text=previousStateDurationText }}
+{{/ifNotCond}}
 {{> DetailBoxField title="Scheduled Maintenance Title:" text=scheduledMaintenanceTitle }}
-{{> DetailBoxField title="New State: " text=currentState  }}
-{{> DetailBoxField title="State changed at: " text=""  }}
-{{> DetailBoxField title="" text=stateChangedAt  }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=scheduledMaintenanceDescription  }}
+{{> DetailBoxField title="State changed at:" text=stateChangedAt }}
+{{> DetailBoxField title="Description:" text=scheduledMaintenanceDescription }}
 {{> DetailBoxEnd this }}
 
 

App/FeatureSet/Notification/Templates/SignupWelcomeEmail.hbs

@@ -1,14 +1,20 @@
 {{> Start this}}
 
 {{> Logo this}}
-{{> EmailTitle title="Welcome to OneUptime. Please verify your email." }}
-{{> InfoBlock info="Thank you for signing up. Next step would be to verify your email account. Can you please click on 'Verify Email' button which will help us to get your email verified.  "}}
 
-{{> ButtonBlock buttonUrl=tokenVerifyUrl buttonText="Verify Email"}}
+{{> EmailTitle title="🎉 Welcome to OneUptime!" }}
 
-{{> InfoBlock info="You can also copy and paste this link:"}}
+{{> InfoBlock info="Thank you for signing up! To get started, please verify your email address by clicking the button below."}}
+
+{{> ButtonBlock buttonUrl=tokenVerifyUrl buttonText="Verify Email Address"}}
+
+{{> VerticalSpace this}}
+
+{{> InfoBlock info="Or copy and paste this link into your browser:"}}
 {{> InfoBlock info=tokenVerifyUrl}}
 
+{{> VerticalSpace this}}
+
 {{> SupportBlock this }}
 
 {{> Footer this}}

App/FeatureSet/Notification/Templates/StatusPageOwnerAdded.hbs

@@ -10,8 +10,7 @@
 
 {{> DetailBoxStart this }}
 {{> DetailBoxField title="Status Page Name:" text=statusPageName }}
-{{> DetailBoxField title="Description: " text=""  }}
-{{> DetailBoxField title="" text=statusPageDescription  }}
+{{> DetailBoxField title="Description: " text=statusPageDescription  }}
 {{> DetailBoxEnd this }}