horus
d5575b58e3
Features: - Mission Control dashboard - HP Submissions tracking - AI Agents integration - Lead management CRM - Marketing email templates - Chrome extension support Tech: Next.js, TypeScript, Tailwind CSS, MySQL
74 lines
3.1 KiB
HTML
74 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Hookd</title>
|
|
<style>
|
|
body { width: 320px; min-height: 450px; font-family: Arial, sans-serif; background: #0f172a; color: #fff; margin: 0; padding: 0; }
|
|
.header { background: #4F46E5; padding: 14px; text-align: center; }
|
|
.header h1 { margin: 0; font-size: 18px; }
|
|
.tabs { display: flex; background: #1e293b; }
|
|
.tab { flex: 1; padding: 12px 8px; text-align: center; cursor: pointer; font-size: 11px; border-bottom: 2px solid #334155; }
|
|
.tab:hover { background: #334155; }
|
|
.tab.active { border-bottom-color: #4F46E5; background: #1e293b; }
|
|
.content { padding: 14px; }
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
h3 { margin: 0 0 12px 0; font-size: 13px; color: #94a3b8; }
|
|
.box { background: #1e293b; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
|
|
.box-list { background: #1e293b; border-radius: 8px; padding: 10px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
|
|
.btn { background: #4F46E5; color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; width: 100%; margin-top: 8px; font-size: 12px; }
|
|
.btn-sm { padding: 6px 12px; width: auto; }
|
|
.btn:hover { background: #5a82f0; }
|
|
.btn-danger { background: #dc2626; }
|
|
.btn-danger:hover { background: #ef4444; }
|
|
input { width: 100%; padding: 10px; background: #0f172a; border: 1px solid #334155; border-radius: 6px; color: white; margin-bottom: 8px; font-size: 12px; box-sizing: border-box; }
|
|
input::placeholder { color: #64748b; }
|
|
.delete-btn { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 16px; padding: 4px 8px; }
|
|
.empty { text-align: center; padding: 30px; color: #64748b; font-size: 12px; }
|
|
.add-form { display: flex; gap: 6px; margin-top: 10px; }
|
|
.add-form input { margin: 0; flex: 1; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header"><h1>Hookd</h1></div>
|
|
|
|
<div class="tabs">
|
|
<div class="tab active" id="tab-inbox">INBOX</div>
|
|
<div class="tab" id="tab-lists">LISTS</div>
|
|
<div class="tab" id="tab-settings">SET</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div id="inbox" class="tab-content active">
|
|
<h3>INBOX <span id="inbox-count">(0)</span></h3>
|
|
<div id="inbox-list"></div>
|
|
<div class="empty" id="inbox-empty">No items.</div>
|
|
<button class="btn btn-sm" id="btn-test-add">+ Test Add Item</button>
|
|
</div>
|
|
|
|
<div id="lists" class="tab-content">
|
|
<h3>LISTS</h3>
|
|
<div id="lists-container"></div>
|
|
<div class="add-form">
|
|
<input type="text" id="new-list-name" placeholder="New list name...">
|
|
<button class="btn btn-sm" id="btn-create-list">+</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="settings" class="tab-content">
|
|
<h3>SETTINGS</h3>
|
|
<div class="box">
|
|
<input type="text" id="setting-handle" placeholder="@username">
|
|
<button class="btn" id="btn-save-handle">SAVE HANDLE</button>
|
|
</div>
|
|
<div class="box" style="margin-top:12px;">
|
|
<button class="btn btn-danger" id="btn-clear-all">CLEAR ALL DATA</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|