<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Add Token</title>

<link rel="icon" href="favicon.ico" />

<link href="https://fonts.googleapis.com/css2?family=Delius&display=swap" rel="stylesheet" />

<link href="styles.css" rel="stylesheet" />

<link href="add-code.css" rel="stylesheet" />

</head>

<body>

<div class="background-blur"></div>

<div id="title-bar">

<button id="close-btn" aria-label="Close">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"

stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"

class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

</button>

</div>

<main class="container">

<h1 class="app-title">Add Token</h1>

<form id="add-form" autocomplete="off">

<div class="token-card">

<label for="nickname">Nickname</label>

<input type="text" id="nickname" class="keybox" placeholder="e.g. GitHub" required autofocus />

<label for="secret">Secret Key</label>

<input type="text" id="secret" class="keybox" placeholder="e.g. ABCDEFG12345" required />

<div id="error-message"></div>

<div class="btn-group">

<a href="index.html" class="svg-btn back-btn" title="Back" aria-label="Back">

<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none"

stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"

class="lucide lucide-home"><path d="M3 9L12 2l9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>

</a>

<button type="submit" class="svg-btn save-btn" title="Save" aria-label="Save">

<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none"

stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"

class="lucide lucide-save"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>

</button>

</div>

</div>

</form>

</main>

<script src="add-code.js"></script>

</body>

</html>