APIKit/splash.html at main · saileshkush95/APIKit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>APIKit</title>
    <style>
      /* Standalone on purpose: this window paints before any bundle loads, so
         it carries its own styles rather than importing the app's. */
      :root {
        --canvas: #1e1e1e;
        --ink: #e8e8e8;
        --muted: #9b9b9b;
        --edge: #333;
        --brand: #ff6c37;
      }
      :root[data-theme="light"] {
        --canvas: #ffffff;
        --ink: #1f1f1f;
        --muted: #6c6c6c;
        --edge: #e2e2e2;
      }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--canvas);
        color: var(--ink);
        border: 1px solid var(--edge);
        overflow: hidden;
        user-select: none;
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      }
      .stack { display: flex; flex-direction: column; align-items: center; gap: 18px; }
      .mark { position: relative; height: 76px; width: 76px; }
      .mark svg { position: absolute; inset: 0; }
      .mark .pulse { animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
      @keyframes ping {
        0% { transform: scale(1); opacity: 0.35; }
        75%, 100% { transform: scale(1.6); opacity: 0; }
      }
      h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
      .tagline { margin-top: 5px; font-size: 13px; color: var(--muted); }
      .bar {
        margin-top: 6px;
        height: 3px;
        width: 200px;
        overflow: hidden;
        border-radius: 2px;
        background: var(--edge);
      }
      .bar span {
        display: block;
        height: 100%;
        width: 40%;
        border-radius: 2px;
        background: var(--brand);
        animation: slide 1.1s ease-in-out infinite;
      }
      @keyframes slide {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(350%); }
      }
      @media (prefers-reduced-motion: reduce) {
        .pulse, .bar span { animation: none; }
      }
    </style>
    <script>
      // Read synchronously, before the first paint: the app mirrors both the
      // theme and the accent colour into localStorage for exactly this reason,
      // and an async read would flash the default dark theme first.
      (function () {
        try {
          var mode = localStorage.getItem("theme") || "system";
          var dark =
            mode === "dark" ||
            (mode === "system" &&
              window.matchMedia("(prefers-color-scheme: dark)").matches);
          document.documentElement.dataset.theme = dark ? "dark" : "light";

          var settings = JSON.parse(localStorage.getItem("appSettings") || "{}");
          if (settings.accentColor) {
            document.documentElement.style.setProperty(
              "--brand",
              settings.accentColor,
            );
          }
        } catch (e) {
          document.documentElement.dataset.theme = "dark";
        }
      })();
    </script>
  </head>
  <body data-tauri-drag-region>
    <div class="stack">
      <div class="mark">
        <svg class="pulse" width="76" height="76" viewBox="0 0 32 32" fill="none" aria-hidden="true">
          <rect x="2" y="2" width="28" height="28" rx="8" fill="var(--brand)" />
        </svg>
        <svg width="76" height="76" viewBox="0 0 32 32" fill="none" role="img" aria-label="APIKit">
          <rect x="2" y="2" width="28" height="28" rx="8" fill="var(--brand)" />
          <path
            d="M12 10.5 7.5 16l4.5 5.5M20 10.5 24.5 16 20 21.5M17.8 9l-3.6 14"
            stroke="#fff"
            stroke-width="2.1"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
      <div style="text-align: center">
        <h1>APIKit</h1>
        <p class="tagline">API client, mock server and proxy in one place</p>
      </div>
      <div class="bar"><span></span></div>
    </div>
  </body>
</html>