Webclient/index.html at master · Flamingo-Client/Webclient · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' http://localhost:* https://* ws:; child-src 'self' blob:; frame-src 'self' blob:;">
    <title>Flamingo - Web API Client</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <style>
      #loading-screen {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #09090b;
        transition: opacity 0.4s ease-out;
        gap: 32px;
      }
      #loading-screen.fade-out {
        opacity: 0;
        pointer-events: none;
      }
      #loading-icon {
        width: 80px;
        height: 80px;
        position: relative;
      }
      #loading-icon > svg {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0;
        left: 0;
      }
      #loading-ring {
        transform: rotate(-90deg);
        transform-origin: center;
      }
      #loading-ring circle {
        fill: none;
        stroke-width: 2.5;
        cx: 40;
        cy: 40;
        r: 36;
      }
      #loading-ring .track {
        stroke: rgba(255, 255, 255, 0.06);
      }
      #loading-ring .fill {
        stroke: #3b82f6;
        stroke-linecap: round;
        stroke-dasharray: 226.2;
        stroke-dashoffset: 226.2;
        transition: stroke-dashoffset 0.3s ease-out;
      }
      #loading-tip {
        color: rgba(255, 255, 255, 0.35);
        font-family: system-ui, -apple-system, sans-serif;
        font-size: 12px;
        max-width: 360px;
        text-align: center;
        line-height: 1.6;
        letter-spacing: 0.2px;
      }
    </style>
  </head>
  <body>
    <div id="loading-screen">
      <div id="loading-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
          <g transform="translate(24, 24)">
            <rect width="32" height="32" rx="6" fill="#3b82f6"/>
            <text x="16" y="22" text-anchor="middle" fill="white" font-size="18" font-family="system-ui" font-weight="bold">F</text>
          </g>
        </svg>
        <svg id="loading-ring" viewBox="0 0 80 80">
          <circle class="track"/>
          <circle class="fill"/>
        </svg>
      </div>
      <div id="loading-tip"></div>
    </div>
    <div id="root"></div>
    <script>
      (function() {
        var tips = [
          'Press Ctrl+T to create a new request tab instantly.',
          'You can import cURL commands from your terminal directly.',
          'Use Ctrl+K to open the command palette for quick navigation.',
          'Drag and drop headers or body sections to reorder them.',
          'Environment variables use {{variableName}} syntax in values.',
          'Right-click a tab to duplicate or close multiple tabs.',
          'Use the star icon to favorite requests for quick access.',
          'Press Ctrl+B to toggle the sidebar on and off.',
          'Responses support syntax highlighting for JSON, XML, and more.',
          'You can compare two responses side by side with Response Compare.',
          'Collections support nested folders for organizing requests.',
          'The request history automatically saves every request you send.',
          'Switch between Light, Dark, and System themes from the header.',
          'The code editor uses Monaco \u2014 the same engine as VS Code.',
          'Press Enter in the URL bar to send the request immediately.',
          'Variables from environments can be used in URLs, headers, and body.',
          'You can export your collections as JSON for backup or sharing.',
          'cURL import supports flags like -H, -d, -X, and --data-urlencode.',
          'The response viewer shows status code, time, and size at a glance.',
          'Use the search bar in the sidebar to find requests across history.',
          'Honey bees can recognize human faces.',
          'A group of flamingos is called a "flamboyance."',
          'Octopuses have three hearts and blue blood.',
          'The shortest war in history lasted 38 minutes (Anglo-Zanzibar War).',
          'Bananas are technically berries, but strawberries are not.',
          'Venus is the only planet that spins clockwise.',
          'A cloud can weigh over a million pounds.',
          'There are more possible chess games than atoms in the observable universe.',
          'The human body contains enough carbon to make about 9,000 pencils.',
          'Wombat poop is cube-shaped.',
          'A jiffy is an actual unit of time: 1/100th of a second.',
          'Turtles can breathe through their butts.',
          'The inventor of the Pringles can is buried in one.',
        ];

        var tip = tips[Math.floor(Math.random() * tips.length)];
        window.__loadingTip = tip;
        document.getElementById('loading-tip').textContent = tip;

        var circle = document.querySelector('#loading-ring .fill');
        var circumference = 2 * Math.PI * 36;
        circle.style.strokeDasharray = circumference;
        circle.style.strokeDashoffset = circumference;
        window.__setLoadProgress = function(p) {
          var offset = circumference - (p / 100) * circumference;
          circle.style.strokeDashoffset = offset;
        };
        window.__hideLoadingScreen = function() {
          var el = document.getElementById('loading-screen');
          if (el) {
            el.classList.add('fade-out');
            setTimeout(function() { el.remove(); }, 500);
          }
        };
      })();
    </script>
    <script type="module" src="/src/main/index.tsx"></script>
  </body>
</html>