<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hyper-social</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="app">
<header>
<h1><a href="#/">hyper-social</a></h1>
<nav>
<a href="#/" class="nav-link active" data-page="timeline">Timeline</a>
<a href="#/compose" class="nav-link" data-page="compose">Compose</a>
<a href="#/notifications" class="nav-link" data-page="notifications">Notifications</a>
<a href="#/settings" class="nav-link" data-page="settings">Settings</a>
<a href="#/admin" class="nav-link" data-page="admin" id="nav-admin" style="display:none">Admin</a>
</nav>
<div id="identity-status" style="font-size:0.8em;color:var(--text-muted);margin-left:auto"></div>
</header>
<main>
<!-- Timeline filters -->
<div id="page-timeline" class="page">
<div class="filters">
<button class="filter-btn active" data-source="">All</button>
<button class="filter-btn" data-source="mastodon">Mastodon</button>
<button class="filter-btn" data-source="atproto">Bluesky</button>
<button class="filter-btn" data-source="instagram">Instagram</button>
<button class="filter-btn" data-source="local">My Posts</button>
</div>
<button id="refresh-btn" class="btn btn-small">Refresh</button>
<div id="timeline" class="feed"></div>
<button id="load-more" class="btn btn-block" style="display:none">Load more</button>
</div>
<!-- Compose (POSSE) -->
<div id="page-compose" class="page" style="display:none">
<h2>Compose</h2>
<div class="compose-box">
<textarea id="compose-text" placeholder="What's on your mind?" rows="4"></textarea>
<div class="compose-media">
<input type="file" id="media-input" accept="image/*,video/*" style="display:none">
<button id="attach-btn" class="btn btn-small">Attach image/video</button>
<div id="media-preview" style="display:none">
<img id="preview-img" style="max-width:200px;max-height:150px;border-radius:6px">
<span id="preview-name"></span>
<button id="remove-media" class="btn btn-small btn-danger">Remove</button>
</div>
<input type="text" id="alt-text" placeholder="Alt text (accessibility)" style="display:none;margin-top:6px">
</div>
<div class="compose-targets">
<label><input type="checkbox" name="target" value="mastodon" checked> Mastodon</label>
<label><input type="checkbox" name="target" value="atproto" checked> Bluesky</label>
<label><input type="checkbox" name="target" value="instagram" disabled> Instagram</label>
</div>
<div class="compose-actions">
<span id="char-count">0</span>
<button id="publish-btn" class="btn btn-primary">Publish</button>
</div>
<div id="publish-result" class="result" style="display:none"></div>
</div>
</div>
<!-- Notifications -->
<div id="page-notifications" class="page" style="display:none">
<h2>Notifications</h2>
<div id="notifications" class="feed"></div>
</div>
<!-- Settings -->
<div id="page-settings" class="page" style="display:none">
<!-- Identity Card -->
<div id="identity-card" class="settings-card"></div>
<!-- Username & Display Name -->
<h3>Profile</h3>
<div id="profile-section" class="settings-card"></div>
<!-- Theme -->
<h3>Theme</h3>
<div class="settings-card">
<div class="theme-buttons">
<button class="btn btn-small theme-btn" data-theme="light">Light</button>
<button class="btn btn-small theme-btn" data-theme="dark">Dark</button>
<button class="btn btn-small theme-btn" data-theme="dark-blue">Dark Blue</button>
</div>
</div>
<!-- Linked Identities -->
<h3>Identities</h3>
<div id="identities-section" class="settings-card"></div>
<!-- Keypair Management -->
<h3>Keypair</h3>
<div id="keypair-section" class="settings-card"></div>
<!-- Device Linking & Merge -->
<h3>Device Linking</h3>
<div class="settings-card">
<p style="color:var(--text-muted);font-size:13px;margin-bottom:8px">Use the same identity across browsers/devices by importing your keypair, or merge a separate account.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<button class="btn btn-small" onclick="showImportDialog()">Import Keypair</button>
<button class="btn btn-small" onclick="showMergeDialog()">Merge Another Account</button>
</div>
<div id="device-link-result" class="result" style="display:none"></div>
</div>
<!-- Connected Accounts -->
<h3>Connected Accounts</h3>
<div id="accounts-list"></div>
<h3>Add Account</h3>
<div class="connect-form">
<select id="connect-platform">
<option value="mastodon">Mastodon</option>
<option value="atproto">Bluesky</option>
</select>
<div id="mastodon-fields" class="platform-fields">
<input type="text" id="masto-instance" placeholder="Instance (e.g., mastodon.social)">
<input type="password" id="masto-token" placeholder="Access token">
</div>
<div id="atproto-fields" class="platform-fields" style="display:none">
<input type="text" id="bsky-handle" placeholder="Handle (e.g., you.bsky.social)">
<input type="password" id="bsky-password" placeholder="App password">
<input type="text" id="bsky-service" placeholder="Service (default: https://bsky.social)" value="https://bsky.social">
</div>
<button id="connect-btn" class="btn btn-primary">Connect</button>
<div id="connect-result" class="result" style="display:none"></div>
</div>
<!-- Danger Zone -->
<h3 style="color:var(--red)">Danger Zone</h3>
<div class="settings-card" style="border-color:var(--red)">
<p style="color:var(--text-muted);font-size:13px;margin-bottom:8px">Clear your identity from this browser. You'll need to import your keypair to log back in.</p>
<button class="btn btn-small btn-danger" onclick="logout()">Clear Identity & Logout</button>
</div>
</div>
<!-- Admin -->
<div id="page-admin" class="page" style="display:none">
<h2>Admin</h2>
<div id="admin-info" style="margin-bottom:16px"></div>
<h3>Users</h3>
<div id="admin-users"></div>
</div>
</main>
</div>
<script src="js/api.js"></script>
<script src="js/identity.js"></script>
<script src="js/timeline.js"></script>
<script src="js/composer.js"></script>
<script src="js/app.js"></script>
</body>
</html>