<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notify</title>
<link rel="stylesheet" href="daisyui.css">
<link rel="stylesheet" href="app.css">
<style>
/* Draggable titlebar region for the desktop app */
.titlebar-drag {
-webkit-app-region: drag;
user-select: none;
}
.no-drag {
-webkit-app-region: no-drag;
}
</style>
</head>
<body class="min-h-screen bg-base-100 text-base-content flex flex-col select-none">
<!-- Toast notification banner -->
<div id="toast-container" class="toast toast-top toast-center z-50 pointer-events-none"></div>
<!-- Navigation bar / App Header -->
<header class="navbar bg-base-100 shadow-sm border-b border-base-200 px-4 titlebar-drag">
<div class="navbar-start flex items-center gap-2">
<span class="font-bold text-lg tracking-tight">Notify</span>
<span id="profile-badge" class="badge badge-sm badge-neutral font-mono no-drag cursor-pointer" title="Click to view profiles">default</span>
</div>
<div class="navbar-end gap-2 no-drag">
<button id="open-settings-btn" class="btn btn-ghost btn-sm btn-circle" title="Settings & Profiles">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
</button>
</div>
</header>
<!-- Main App Body -->
<main class="hero flex-1">
<div class="hero-content w-full justify-center p-4">
<div class="card card-border w-full max-w-sm bg-base-200 shadow-sm">
<div class="card-body p-6">
<div class="text-center mb-3">
<h1 class="card-title text-2xl font-bold justify-center">Notify</h1>
<p id="server-status-label" class="text-xs text-base-content/70 mt-1 truncate" title="Click to change server">
Connecting to server...
</p>
</div>
<!-- Quick Action Buttons -->
<div class="card-actions flex flex-col gap-3 w-full">
<!-- Heart button -->
<button id="btn-heart" type="button" class="btn btn-secondary btn-lg btn-block gap-2">
<span class="loading loading-spinner loading-md hidden"></span>
<span class="btn-label flex items-center justify-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6 shrink-0" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>
</svg>
<span>Look at your phone</span>
</span>
</button>
<!-- Cat button -->
<button id="btn-cat" type="button" class="btn btn-lg btn-block gap-2">
<span class="loading loading-spinner loading-md hidden"></span>
<span class="btn-label flex items-center justify-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3.1-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.26 6.5 2.26.65-.17 1.33-.26 2-.26z"></path>
<path d="M9 13v.01"></path>
<path d="M15 13v.01"></path>
<path d="M10 17c.5.5 1.5 1 2 1s1.5-.5 2-1"></path>
</svg>
<span>Missing you</span>
</span>
</button>
<!-- Emergency button -->
<button id="btn-emergency" type="button" class="btn btn-error btn-lg btn-block gap-2">
<span class="loading loading-spinner loading-md hidden"></span>
<span class="btn-label flex items-center justify-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
<path d="M12 2v4"></path>
<path d="m4.93 4.93 2.83 2.83"></path>
<path d="m19.07 4.93-2.83 2.83"></path>
</svg>
<span>Emergency</span>
</span>
</button>
</div>
<p id="quick-send-feedback" class="send-feedback" role="status" aria-live="polite"></p>
<!-- Divider -->
<div class="divider my-2 text-xs text-base-content/50">CUSTOM MESSAGE</div>
<!-- Custom Message Input -->
<form id="custom-message-form" class="flex flex-col gap-2">
<div class="join w-full">
<input
id="custom-message-input"
type="text"
placeholder="Type a custom message..."
class="input input-bordered join-item flex-1 text-sm bg-base-100"
autocomplete="off"
>
<button id="btn-custom-send" type="submit" class="btn btn-primary join-item">
<span class="loading loading-spinner loading-sm hidden"></span>
<span class="btn-label">Send</span>
</button>
</div>
<p id="custom-send-feedback" class="send-feedback" role="status" aria-live="polite"></p>
</form>
</div>
</div>
</div>
</main>
<!-- Settings & Profiles Modal -->
<dialog id="settings-modal" class="modal">
<div class="modal-box bg-base-200 max-w-md p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg">Server & Profiles</h3>
<button id="close-modal-x" class="btn btn-sm btn-circle btn-ghost" type="button">✕</button>
</div>
<!-- Profiles List (from Omarchy ~/.config/notify) -->
<div class="mb-4">
<label class="text-xs font-semibold uppercase text-base-content/60 tracking-wider block mb-1">
Omarchy Profiles (~/.config/notify)
</label>
<div id="profiles-list" class="flex flex-col gap-1 max-h-36 overflow-y-auto bg-base-100 p-2 rounded-box border border-base-300">
<span class="text-xs text-base-content/50 p-2">Loading profiles...</span>
</div>
</div>
<!-- Active Server Configuration Form -->
<form id="config-form" class="flex flex-col gap-3">
<div>
<label class="label py-1">
<span class="label-text text-xs font-semibold">Profile Name</span>
</label>
<input id="cfg-profile-name" type="text" class="input input-bordered input-sm w-full bg-base-100" placeholder="notify">
</div>
<div>
<label class="label py-1">
<span class="label-text text-xs font-semibold">Server URL</span>
</label>
<input id="cfg-server-url" type="url" class="input input-bordered input-sm w-full bg-base-100" placeholder="http://127.0.0.1:8080" required>
</div>
<div>
<label class="label py-1">
<span class="label-text text-xs font-semibold">PIN / API Key</span>
</label>
<input id="cfg-server-pin" type="password" class="input input-bordered input-sm w-full bg-base-100" placeholder="123456">
</div>
<!-- Connection Test Result Banner -->
<div id="conn-test-result" class="text-xs p-2 rounded hidden"></div>
<div class="flex items-center justify-between gap-2 mt-2">
<button id="btn-test-conn" type="button" class="btn btn-outline btn-sm">
<span class="loading loading-spinner loading-xs hidden"></span>
<span>Test Connection</span>
</button>
<button id="btn-save-cfg" type="submit" class="btn btn-primary btn-sm">
Save & Activate
</button>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<script src="main.js"></script>
</body>
</html>