<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rose Squared SDK - Web Example</title>
<style>
body { font-family: sans-serif; margin: 2em; }
.container { max-width: 800px; margin: 0 auto; }
.row { display: flex; margin-bottom: 1em; }
.row label { width: 120px; }
.row input { flex-grow: 1; }
.row button { margin-left: 1em; }
#results { margin-top: 1em; border-top: 1px solid #ccc; padding-top: 1em; }
</style>
</head>
<body>
<div class="container">
<h1>Rose Squared SDK - Web Example</h1>
<div class="row">
<label for="password">Password:</label>
<input type="password" id="password" value="password">
</div>
<div class="row">
<label for="salt">Salt (hex):</label>
<input type="text" id="salt" value="000102030405060708090a0b0c0d0e0f">
</div>
<div class="row">
<button id="initVault">Initialize Vault</button>
<button id="exportState">Export State</button>
<button id="importState">Import State</button>
</div>
<hr>
<h2>Add Document</h2>
<div class="row">
<label for="keywords">Keywords:</label>
<input type="text" id="keywords" placeholder="e.g., hello,world">
</div>
<div class="row">
<label for="docId">Document ID:</label>
<input type="text" id="docId" placeholder="e.g., doc-1234">
</div>
<div class="row">
<button id="addDocument">Add Document</button>
</div>
<hr>
<h2>Search</h2>
<div class="row">
<label for="searchKeyword">Keyword:</label>
<input type="text" id="searchKeyword" placeholder="e.g., hello">
</div>
<div class="row">
<button id="search">Search</button>
</div>
<div id="results">
<h2>Results</h2>
<pre id="log"></pre>
</div>
</div>
<script type="module" src="main.js"></script>
</body>
</html>