forked from snxraven/p2ns
138 lines
5.8 KiB
HTML
138 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#0a0e1a">
|
|
<title>Global Profile - P2NS</title>
|
|
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
|
<link rel="icon" href="/branding/p2ns-favicon-32.png" type="image/png" sizes="32x32">
|
|
<link rel="icon" href="/branding/p2ns-favicon-192.png" type="image/png" sizes="192x192">
|
|
<link rel="apple-touch-icon" href="/branding/p2ns-favicon-192.png">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="stylesheet" href="/css/branding.css">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<script src="/auth-utils.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<div class="header-content header-brand">
|
|
<img src="/branding/p2ns-icon.png" alt="" class="brand-lockup-logo" width="32" height="32">
|
|
<h1>Global Profile</h1>
|
|
<p class="subtitle">Manage your profile across the P2NS network</p>
|
|
</div>
|
|
<div class="header-status">
|
|
<div class="status" role="status" aria-live="polite">
|
|
<div class="status-indicator" id="statusIndicator" aria-label="Connection status"></div>
|
|
<span id="statusText">Connecting...</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main-content">
|
|
<div class="profile-section">
|
|
<div class="profile-card">
|
|
<div class="avatar-section">
|
|
<div class="avatar-container">
|
|
<img id="avatar-preview" src="" alt="Avatar" class="avatar-image" style="display: none;" onerror="this.style.display='none'; document.getElementById('avatar-placeholder').style.display='block';">
|
|
<div id="avatar-placeholder" class="avatar-placeholder" style="display: block;">
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
</div>
|
|
<label for="avatar-upload" class="avatar-upload-label">
|
|
<input type="file" id="avatar-upload" accept="image/*" style="display: none;">
|
|
<span class="upload-icon">📷</span>
|
|
</label>
|
|
</div>
|
|
<p class="avatar-hint">Click to upload avatar</p>
|
|
</div>
|
|
|
|
<form id="profile-form" class="profile-form">
|
|
<div class="form-group">
|
|
<label for="display-name">Display Name</label>
|
|
<input type="text" id="display-name" name="displayName" placeholder="Enter your display name">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bio">Bio</label>
|
|
<textarea id="bio" name="bio" placeholder="Tell us about yourself..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Peer ID</label>
|
|
<input type="text" id="peer-id" readonly class="readonly">
|
|
</div>
|
|
|
|
<div class="form-section-divider">
|
|
<h3>Additional Details</h3>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="form-group-header">
|
|
<label for="email">Email</label>
|
|
<button type="button" class="toggle-btn" id="email-toggle" data-field="email">
|
|
<span class="toggle-label">Enable</span>
|
|
</button>
|
|
</div>
|
|
<input type="email" id="email" name="email" placeholder="[email protected]" disabled>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="form-group-header">
|
|
<label for="website">Website</label>
|
|
<button type="button" class="toggle-btn" id="website-toggle" data-field="website">
|
|
<span class="toggle-label">Enable</span>
|
|
</button>
|
|
</div>
|
|
<input type="url" id="website" name="website" placeholder="https://example.com" disabled>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="form-group-header">
|
|
<label for="x-handle">X (Twitter) Handle</label>
|
|
<button type="button" class="toggle-btn" id="x-handle-toggle" data-field="xUsername">
|
|
<span class="toggle-label">Enable</span>
|
|
</button>
|
|
</div>
|
|
<input type="text" id="x-handle" name="xUsername" placeholder="@username" disabled>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input type="text" id="tags-input" name="tags" class="tags-input-inline" placeholder="Type and press Enter to add a tag" autocomplete="off">
|
|
<div class="tag-editor">
|
|
<div class="tag-list" id="tag-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" id="save-btn">
|
|
<span class="btn-text">Save Profile</span>
|
|
<span class="btn-loader" style="display: none;">⏳</span>
|
|
</button>
|
|
<button type="button" class="btn btn-danger" id="delete-btn">Delete Profile</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="profiles-section">
|
|
<h2>Network Profiles (<span id="profilesCountValue">-</span>)</h2>
|
|
<div class="search-container">
|
|
<input type="text" id="profile-search" class="search-input" placeholder="Search profiles by name, bio, email, website, handle, or peer ID...">
|
|
</div>
|
|
<div id="profiles-list" class="profiles-list">
|
|
<div class="loading">Loading profiles...</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|