800388cda4
No central server, user-owned data, reverse-chronological feed. Rust core + Tauri desktop + Android app + plain HTML/CSS/JS frontend. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
250 lines
9.6 KiB
HTML
250 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ItsGoin</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- First-run: set display name -->
|
|
<div id="setup-overlay" class="overlay hidden">
|
|
<div class="overlay-box">
|
|
<h2>Welcome to ItsGoin</h2>
|
|
<p>Choose a display name to get started.</p>
|
|
<input id="setup-name" type="text" placeholder="Your name" maxlength="50" autofocus />
|
|
<button id="setup-btn" class="btn btn-primary">Continue</button>
|
|
</div>
|
|
</div>
|
|
|
|
<header>
|
|
<h1>ItsGoin</h1>
|
|
<div id="stats-bar">
|
|
<span id="stat-posts">0 posts</span> |
|
|
<span id="stat-peers">0 peers</span> |
|
|
<span id="stat-follows">0 following</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<nav id="tabs">
|
|
<button class="tab active" data-tab="feed">Feed</button>
|
|
<button class="tab" data-tab="myposts">My Posts</button>
|
|
<button class="tab" data-tab="people">People</button>
|
|
<button class="tab" data-tab="messages">Messages</button>
|
|
<button class="tab" data-tab="settings">Settings</button>
|
|
</nav>
|
|
|
|
<!-- Feed tab -->
|
|
<section id="view-feed" class="view active">
|
|
<div id="feed-list"></div>
|
|
</section>
|
|
|
|
<!-- My Posts tab -->
|
|
<section id="view-myposts" class="view">
|
|
<div id="compose">
|
|
<textarea id="post-content" placeholder="How's it goin?"></textarea>
|
|
<div id="attachment-preview"></div>
|
|
<input type="file" id="file-input" multiple class="hidden" />
|
|
<div id="compose-footer">
|
|
<div class="compose-left">
|
|
<button id="attach-btn" class="btn btn-ghost btn-sm" title="Attach images or videos">Attach</button>
|
|
<span class="hint">Ctrl+Enter to post</span>
|
|
<div id="visibility-row">
|
|
<select id="visibility-select">
|
|
<option value="public">Public</option>
|
|
<option value="friends">Friends</option>
|
|
<option value="circle">Circle</option>
|
|
</select>
|
|
<select id="circle-select" class="hidden"></select>
|
|
<select id="comment-perm-select" title="Comment permission">
|
|
<option value="public">Comments: All</option>
|
|
<option value="audience_only">Comments: Audience</option>
|
|
<option value="none">Comments: Off</option>
|
|
</select>
|
|
<select id="react-perm-select" title="React permission">
|
|
<option value="both">Reacts: All</option>
|
|
<option value="public">Reacts: Public</option>
|
|
<option value="private">Reacts: Private</option>
|
|
<option value="none">Reacts: Off</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="compose-right">
|
|
<span id="char-count">0/500</span>
|
|
<button id="post-btn" class="btn btn-primary">Post</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="circles-toggle" class="btn btn-ghost btn-sm section-toggle">Manage Circles</button>
|
|
<div id="circles-body" class="hidden">
|
|
<div class="input-row" style="margin-top:0.5rem">
|
|
<input id="circle-name-input" placeholder="New circle name" />
|
|
<button id="create-circle-btn" class="btn btn-primary">Create</button>
|
|
</div>
|
|
<div id="circles-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="my-posts-list"></div>
|
|
</section>
|
|
|
|
<!-- People tab -->
|
|
<section id="view-people" class="view">
|
|
<div class="section-card">
|
|
<h3>Following</h3>
|
|
<div id="follows-list"></div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="discover-toggle" class="btn btn-ghost btn-sm section-toggle">Discover People</button>
|
|
<div id="discover-body" class="hidden">
|
|
<p class="empty-hint" style="margin-bottom:0.5rem">People on the network with profiles you can follow.</p>
|
|
<div id="discover-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h3>Audience</h3>
|
|
<p class="empty-hint">People who receive your public posts.</p>
|
|
<h4 class="subsection-title">Pending Requests</h4>
|
|
<div id="audience-pending-list"></div>
|
|
<h4 class="subsection-title">Approved</h4>
|
|
<div id="audience-approved-list"></div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="connect-toggle" class="btn btn-ghost btn-sm">Add peer manually...</button>
|
|
<div id="connect-body" class="hidden">
|
|
<div class="input-row" style="margin-top:0.5rem">
|
|
<input id="connect-input" placeholder="paste connect string: nodeid@ip:port" />
|
|
<button id="connect-btn" class="btn btn-primary">Connect</button>
|
|
</div>
|
|
<div id="connect-status"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Messages tab -->
|
|
<section id="view-messages" class="view">
|
|
<div id="dm-compose" class="section-card">
|
|
<h3>New Conversation</h3>
|
|
<div class="dm-compose-row">
|
|
<select id="dm-recipient-select">
|
|
<option value="">(select recipient)</option>
|
|
</select>
|
|
</div>
|
|
<textarea id="dm-content" placeholder="Write a private message..." rows="2"></textarea>
|
|
<div class="dm-compose-footer">
|
|
<span class="hint">Encrypted end-to-end</span>
|
|
<button id="dm-send-btn" class="btn btn-primary">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="conversations-list"></div>
|
|
|
|
<div class="section-card" id="message-requests-section">
|
|
<h3>Message Requests</h3>
|
|
<div id="message-requests-list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Settings tab -->
|
|
<section id="view-settings" class="view">
|
|
<div class="section-card">
|
|
<h3>Profile</h3>
|
|
<div id="profile-editor">
|
|
<label for="profile-name">Display Name</label>
|
|
<input id="profile-name" type="text" placeholder="Your name" maxlength="50" />
|
|
<label for="profile-bio">Bio</label>
|
|
<textarea id="profile-bio" placeholder="Tell people about yourself..." maxlength="200" rows="3"></textarea>
|
|
<label class="checkbox-label" style="margin:0.5rem 0">
|
|
<input type="checkbox" id="public-visible-check" checked />
|
|
Show my profile to non-circle peers
|
|
</label>
|
|
<button id="save-profile-btn" class="btn btn-primary">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="notifications-btn" class="btn btn-ghost btn-full">Notifications</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="circle-profiles-toggle" class="btn btn-ghost btn-sm section-toggle">Circle Profiles</button>
|
|
<div id="circle-profiles-body" class="hidden">
|
|
<p class="empty-hint" style="margin-bottom:0.5rem">Set a different name/bio for each circle you manage.</p>
|
|
<div id="circle-profiles-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h3>Identity</h3>
|
|
<div id="node-info">
|
|
<span id="node-id">loading...</span>
|
|
</div>
|
|
<div id="connect-string-display" class="connect-string-box"></div>
|
|
<div id="qr-code" class="qr-container"></div>
|
|
<div class="button-row">
|
|
<button id="copy-connect" class="btn btn-ghost" title="Copy connect string">Copy Connect String</button>
|
|
<button id="export-key-btn" class="btn btn-ghost" title="Export identity key">Export Key</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="anchors-toggle" class="btn btn-ghost btn-sm section-toggle">Stored Anchors</button>
|
|
<div id="anchors-body" class="hidden">
|
|
<p class="empty-hint" style="margin-bottom:0.5rem">Anchors your node has discovered and will reconnect to.</p>
|
|
<div id="known-anchors-list"></div>
|
|
<h4 class="subsection-title" style="margin-top:0.75rem">Profile Anchors</h4>
|
|
<p class="empty-hint" style="margin-bottom:0.5rem">Anchors listed in your profile so peers can find you.</p>
|
|
<div id="anchors-list"></div>
|
|
<div id="anchor-add-row" class="input-row" style="margin-top:0.5rem">
|
|
<select id="anchor-add-select">
|
|
<option value="">(no anchor peers available)</option>
|
|
</select>
|
|
<button id="anchor-add-btn" class="btn btn-primary btn-sm">Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="diagnostics-btn" class="btn btn-ghost btn-full">Network Diagnostics</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h3>Redundancy</h3>
|
|
<div id="redundancy-panel">
|
|
<p class="empty-hint">Loading...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="sync-btn" class="btn btn-primary btn-full">Sync Now</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h3>Danger Zone</h3>
|
|
<p class="empty-hint">Delete all local data. Identity key preserved.</p>
|
|
<button id="reset-data-btn" class="btn btn-danger btn-full">Reset All Data</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Generic popover -->
|
|
<div id="popover-overlay" class="overlay hidden">
|
|
<div class="overlay-box overlay-wide">
|
|
<div class="overlay-header">
|
|
<h3 id="popover-title"></h3>
|
|
<button class="overlay-close" id="popover-close-btn">×</button>
|
|
</div>
|
|
<div class="overlay-body" id="popover-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast hidden"></div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|