claude-code-router/extension/chrome/popup.html

110 lines
2.4 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CCR Login Import</title>
<style>
:root {
color-scheme: light dark;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-width: 360px;
background: Canvas;
color: CanvasText;
}
main {
display: grid;
gap: 12px;
padding: 14px;
}
h1 {
font-size: 15px;
line-height: 1.25;
margin: 0;
}
label {
display: grid;
gap: 6px;
font-size: 12px;
font-weight: 650;
}
textarea {
background: color-mix(in srgb, CanvasText 4%, Canvas);
border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
border-radius: 8px;
color: CanvasText;
font: inherit;
min-height: 76px;
outline: none;
padding: 8px;
resize: vertical;
width: 100%;
}
textarea:focus {
border-color: #2563eb;
}
button {
align-items: center;
background: #0f766e;
border: 1px solid #0f766e;
border-radius: 8px;
color: white;
cursor: pointer;
display: inline-flex;
font: inherit;
font-weight: 700;
height: 34px;
justify-content: center;
padding: 0 12px;
}
button:disabled {
cursor: default;
opacity: 0.58;
}
.status {
border-radius: 8px;
color: color-mix(in srgb, CanvasText 74%, transparent);
font-size: 12px;
line-height: 1.35;
min-height: 18px;
overflow-wrap: anywhere;
}
.status.error {
color: #b91c1c;
}
.status.ok {
color: #15803d;
}
</style>
</head>
<body>
<main>
<h1>CCR Login Import</h1>
<label>
Import URL
<textarea id="import-url" spellcheck="false" placeholder="Paste the URL copied from CCR"></textarea>
</label>
<button id="import-button" type="button">Import Selected Domains</button>
<div id="status" class="status" role="status"></div>
</main>
<script src="popup.js"></script>
</body>
</html>