Manage your API keys seamlessly with this visually stunning UI. Enjoy claymorphic design and animated orbs that enhance the user experience.
1<section class="gs-stage">
2 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
3 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
4 <div class="gs-grid-overlay" aria-hidden="true"></div>
5 <div class="gs-card">
6 <div class="gs-card-inner">
7 <header class="text-center mb-4">
8 <h2 class="fw-bold">API Key Manager</h2>
9 <p>Efficiently manage your access</p>
10 </header>
11 <div class="api-key-list">
12 <div class="api-key-item">
13 <span class="icon-lock">
14 <svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 11h2V9a3 3 0 0 0-6 0v2h2V9a1 1 0 0 1 2 0v2zm8 2v9H5v-9h14zm-3 0h-8v-2a5 5 0 0 1 10 0v2z"></path></svg>
15 </span>
16 <span class="api-key">abcdef12345...</span>
17 <button type="button" class="btn btn-outline-accent btn-sm">Regenerate</button>
18 </div>
19 <div class="api-key-item">
20 <span class="icon-lock">
21 <svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 11h2V9a3 3 0 0 0-6 0v2h2V9a1 1 0 0 1 2 0v2zm8 2v9H5v-9h14zm-3 0h-8v-2a5 5 0 0 1 10 0v2z"></path></svg>
22 </span>
23 <span class="api-key">uvwxyz67890...</span>
24 <button type="button" class="btn btn-outline-accent btn-sm">Regenerate</button>
25 </div>
26 </div>
27 </div>
28 </div>
29</section>
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.