<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
width: 280px;
padding: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
color: #333;
}
h1 {
font-size: 16px;
margin: 0 0 12px 0;
display: flex;
align-items: center;
gap: 8px;
}
h1 img {
width: 24px;
height: 24px;
}
.status {
background: #f5f5f5;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
}
.status-row {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.status-row:last-child {
margin-bottom: 0;
}
.label {
color: #666;
}
.value {
font-family: monospace;
color: #2196F3;
}
.value.synced {
color: #4CAF50;
}
.value.not-synced {
color: #9E9E9E;
}
button {
width: 100%;
padding: 10px;
background: #FFD54F;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
button:hover {
background: #FFC107;
}
button:disabled {
background: #E0E0E0;
cursor: not-allowed;
}
.info {
margin-top: 12px;
font-size: 11px;
color: #999;
text-align: center;
}
</style>
</head>
<body>
<h1>🍌 Nano Banana Sync</h1>
<div class="status">
<div class="status-row">
<span class="label">PSID:</span>
<span class="value" id="psid-status">checking...</span>
</div>
<div class="status-row">
<span class="label">PSIDTS:</span>
<span class="value" id="psidts-status">checking...</span>
</div>
</div>
<button id="sync-btn">🔄 Sync Now</button>
<div class="info">
Syncing to localhost:8765
</div>
<script src="popup.js"></script>
</body>
</html>
