Tiago
198 lines
6.4 KiB
HTML
198 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="./public/index.css" />
|
|
|
|
<link rel="icon" href="./public/logo-small.webp" />
|
|
<title>Cap Standalone</title>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<button class="logo">
|
|
<img src="./public/logo-small.webp" alt="Cap logo" />
|
|
<p>Standalone</p>
|
|
</button>
|
|
<button class="logout">Logout</button>
|
|
<button class="settings">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-settings"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path
|
|
d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
|
|
/>
|
|
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
<div class="state-loading">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
alt="Loading..."
|
|
title="Loading..."
|
|
>
|
|
<style>
|
|
.spinner_ajPY {
|
|
transform-origin: center;
|
|
animation: spinner_AtaB 0.4s infinite linear;
|
|
}
|
|
@keyframes spinner_AtaB {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
<path
|
|
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
|
opacity=".25"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
|
|
class="spinner_ajPY"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="state-homepage" style="display: none">
|
|
<div class="keys-top">
|
|
<input type="text" placeholder="Search keys…" class="search-input" />
|
|
<button class="create-key">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-plus-icon lucide-plus"
|
|
>
|
|
<path d="M5 12h14" />
|
|
<path d="M12 5v14" />
|
|
</svg>
|
|
<span>Add key</span>
|
|
</button>
|
|
</div>
|
|
<div class="keys-list"></div>
|
|
</div>
|
|
|
|
<div class="state-key-page" style="display: none">
|
|
<button class="keypage-back">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M15 6l-6 6l6 6" />
|
|
</svg>
|
|
Back
|
|
</button>
|
|
<div class="topbar">
|
|
<div class="left">
|
|
<h1></h1>
|
|
<button title="Copy site key"></button>
|
|
</div>
|
|
<div class="right">
|
|
<select class="time-duration">
|
|
<option value="today">Today</option>
|
|
<option value="yesterday">Yesterday</option>
|
|
<option value="last7days">Last 7 Days</option>
|
|
<option value="last28days">Last 28 Days</option>
|
|
<option value="last91days">Last 91 Days</option>
|
|
<option value="alltime">All time</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="chart"></canvas>
|
|
</div>
|
|
|
|
<h2>Configuration</h2>
|
|
|
|
<div class="config">
|
|
<div class="config-item">
|
|
<label for="keyName">Key name</label>
|
|
<input type="text" id="keyName" value="" />
|
|
</div>
|
|
<div class="config-item">
|
|
<label for="difficulty">Difficulty</label>
|
|
<input type="number" id="difficulty" value="" />
|
|
</div>
|
|
<div class="config-item">
|
|
<label for="challengeCount">Challenge Count</label>
|
|
<input type="number" id="challengeCount" value="" />
|
|
</div>
|
|
<div class="config-item">
|
|
<label for="saltSize">Salt Size</label>
|
|
<input type="number" id="saltSize" value="" />
|
|
</div>
|
|
<button>Save</button>
|
|
</div>
|
|
|
|
<h2>Danger zone</h2>
|
|
<div class="danger-zone-buttons">
|
|
<button class="rotate-secret">Rotate key secret</button>
|
|
<button class="delete-key">Delete key</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="state-settings" style="display: none">
|
|
<h1>Settings</h1>
|
|
<h2>Sessions</h2>
|
|
|
|
<div class="sessions-list"></div>
|
|
|
|
<div class="apikeys-title">
|
|
<h2>API Keys</h2>
|
|
<button class="create-api-key">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-plus-icon lucide-plus"
|
|
>
|
|
<path d="M5 12h14"></path>
|
|
<path d="M12 5v14"></path>
|
|
</svg>
|
|
<span>Create</span>
|
|
</button>
|
|
</div>
|
|
<div class="apikeys-list"></div>
|
|
</div>
|
|
</body>
|
|
<script src="./public/js/index.js" type="module"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0" async></script>
|
|
</html>
|