views/index.html - main - githubmirror/json-server

views/index.html
147 строк4 KB
typicode
feat: support system dark mode on index page
13 мар 2026, 03:15
13 мар 2026, 03:1504b4b7c
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSON Server</title>
    <style>
      :root {
        color-scheme: light dark;
        --fg: light-dark(#111, #e8e8e8);
        --bg: light-dark(#fff, #111214);
        --muted: light-dark(#999, #9aa0a6);
        --line: light-dark(#e5e5e5, #2c2f34);
        --accent: light-dark(#6366f1, #8b90ff);
        --chip-bg: light-dark(#111, #f5f5f5);
        --chip-fg: light-dark(#fff, #111214);
      }
      body {
        margin: 40px auto;
        max-width: 400px;
        padding: 0 24px;
        font-family:
          ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
        background-color: var(--bg);
        color: var(--fg);
        line-height: 1.5;
        font-size: 14px;
        transition:
          background-color 0.2s ease,
          color 0.2s ease,
          border-color 0.2s ease;
      }
      a {
        color: inherit;
      }
      header {
        margin-bottom: 40px;
        color: var(--muted);
      }
      .topbar {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
      }
      .topbar a {
        text-decoration: none;
        transition: color 0.1s ease;
      }
      .topbar a:first-child {
        color: var(--fg);
      }
      .topbar a:hover {
        color: var(--accent);
      }
      .section-title {
        margin-bottom: 8px;
        color: var(--muted);
      }
      .list {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .list a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        text-decoration: none;
        transition: color 0.1s ease;
      }
      .list a:hover {
        color: var(--accent);
      }
      .meta {
        color: var(--muted);
        font-size: 13px;
      }
      .empty {
        color: var(--muted);
      }
      footer {
        margin-top: 48px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 13px;
      }
      .heart {
        position: fixed;
        bottom: 20px;
        right: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: var(--chip-fg);
        background-color: var(--chip-bg);
        text-decoration: none;
        transition: transform 0.15s ease;
      }
      .heart:hover {
        transform: scale(1.1);
      }
    </style>
  </head>

  <body>
    <% const resources = Object.entries(it.data ?? {}); %>

    <header>
      <div class="topbar">
        <a href="https://github.com/typicode/json-server" target="_blank">json-server</a>
        <a href="https://github.com/typicode/json-server" target="_blank">README</a>
      </div>
      <div class="intro">Available REST resources from db.json.</div>
    </header>

    <div class="section-title">Resources</div>

    <div class="list">
      <% if (resources.length === 0) { %>
      <span class="empty">No resources in db.json.</span>
      <% } else { %> <% resources.forEach(function([name, value]) { const isCollection =
      Array.isArray(value); %>
      <a href="/<%= name %>">
        <span>/<%= name %></span>
        <span class="meta">
          <% if (isCollection) { %> <%= value.length %> items <% } else { %> object <% } %>
        </span>
      </a>
      <% }) %> <% } %>
    </div>

    <footer>
      <span>To replace this page, create public/index.html.</span>
    </footer>

    <a href="https://github.com/sponsors/typicode" target="_blank" class="heart">❤</a>

  </body>
</html>