244 lines
10 KiB
HTML
244 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>CrowdProof Observe</title>
|
||
|
|
<link rel="stylesheet" href="sidepanel.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Loading -->
|
||
|
|
<div id="loading" class="screen">
|
||
|
|
<p>Loading...</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Setup -->
|
||
|
|
<div id="setup" class="screen hidden">
|
||
|
|
<h1 class="header-title">CrowdProof Observe</h1>
|
||
|
|
<p>Configure the server URL in extension settings to get started.</p>
|
||
|
|
<button id="openSettings" class="btn btn-primary">Open Settings</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Settings -->
|
||
|
|
<div id="settings" class="screen hidden">
|
||
|
|
<header class="header header-row">
|
||
|
|
<h1 class="header-title">Settings</h1>
|
||
|
|
<button id="settingsBackBtn" class="btn btn-sm">Back</button>
|
||
|
|
</header>
|
||
|
|
<form id="settingsForm" class="form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="settings-serverUrl">Server URL</label>
|
||
|
|
<input type="url" id="settings-serverUrl" name="serverUrl" required placeholder="https://your-crowdproof-server.com">
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-primary btn-block btn-submit">Save</button>
|
||
|
|
</form>
|
||
|
|
<div id="settingsStatus" class="status hidden"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Access -->
|
||
|
|
<div id="access" class="screen hidden">
|
||
|
|
<header class="header header-row">
|
||
|
|
<h1 class="header-title">Manage Access</h1>
|
||
|
|
<button id="accessBackBtn" class="btn btn-sm">Back</button>
|
||
|
|
</header>
|
||
|
|
<p class="access-hint">Set public access for observations you own.</p>
|
||
|
|
<div id="observations-list" class="observations-list">
|
||
|
|
<p class="loading-text">Loading...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Login -->
|
||
|
|
<div id="login" class="screen hidden">
|
||
|
|
<header class="header">
|
||
|
|
<img id="login-logo" class="header-logo" src="" alt="">
|
||
|
|
<h1 id="login-title" class="header-title hidden">Login</h1>
|
||
|
|
<p id="login-instance-name" class="instance-name"></p>
|
||
|
|
</header>
|
||
|
|
<form id="loginForm" class="form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="username">Username</label>
|
||
|
|
<input type="text" id="username" name="username" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="password">Password</label>
|
||
|
|
<input type="password" id="password" name="password" required>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-primary btn-block btn-submit">Login</button>
|
||
|
|
<div id="loginError" class="error-message hidden"></div>
|
||
|
|
<a id="createAccountLink" href="#" class="btn btn-block btn-submit" target="_blank">Create Account</a>
|
||
|
|
<button type="button" id="loginSettingsBtn" class="btn btn-block btn-submit">Settings</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main -->
|
||
|
|
<div id="main" class="screen hidden">
|
||
|
|
<header class="header">
|
||
|
|
<div class="header-actions">
|
||
|
|
<button id="accessBtn" class="btn btn-sm">Access</button>
|
||
|
|
<button id="mainSettingsBtn" class="btn btn-sm">Settings</button>
|
||
|
|
<button id="logoutBtn" class="btn btn-sm">Logout</button>
|
||
|
|
</div>
|
||
|
|
<img id="main-logo" class="header-logo" src="" alt="">
|
||
|
|
<h1 id="main-title" class="header-title hidden">CrowdProof</h1>
|
||
|
|
<p id="main-instance-name" class="instance-name"></p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<nav class="tabs">
|
||
|
|
<button type="button" class="tab active" data-type="photo">Photo</button>
|
||
|
|
<button type="button" class="tab" data-type="url">URL</button>
|
||
|
|
<button type="button" class="tab" data-type="statement">Statement</button>
|
||
|
|
<button type="button" class="tab" data-type="log">Log</button>
|
||
|
|
<button type="button" class="tab" data-type="email">Email</button>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- URL Form -->
|
||
|
|
<form id="form-url" class="obs-form hidden">
|
||
|
|
<div class="form-group">
|
||
|
|
<button type="button" id="captureUrl" class="btn btn-block">Capture Current Page</button>
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="url-reference_url">URL</label>
|
||
|
|
<input type="url" id="url-reference_url" name="reference_url" required>
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="url-observation_name">Title (optional)</label>
|
||
|
|
<input type="text" id="url-observation_name" name="observation_name" maxlength="256">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="url-url_description">Description (optional)</label>
|
||
|
|
<textarea id="url-url_description" name="url_description" rows="3"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="url-url_date">Date (optional)</label>
|
||
|
|
<input type="text" id="url-url_date" name="url_date" placeholder="YYYY-MM-DD">
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<button type="submit" class="btn btn-primary btn-block btn-submit">Send</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Statement Form -->
|
||
|
|
<form id="form-statement" class="obs-form hidden">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="statement-statement_issuer">Issuer</label>
|
||
|
|
<input type="text" id="statement-statement_issuer" name="statement_issuer" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="statement-statement_recipient">Recipient (optional)</label>
|
||
|
|
<input type="text" id="statement-statement_recipient" name="statement_recipient">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="statement-statement_date">Date (optional)</label>
|
||
|
|
<input type="text" id="statement-statement_date" name="statement_date" placeholder="YYYY-MM-DD">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="statement-statement_content">Statement</label>
|
||
|
|
<textarea id="statement-statement_content" name="statement_content" rows="4" required></textarea>
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="statement-observation_name">Title (optional)</label>
|
||
|
|
<input type="text" id="statement-observation_name" name="observation_name" maxlength="256">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="statement-statement_description">Description (optional)</label>
|
||
|
|
<textarea id="statement-statement_description" name="statement_description" rows="2"></textarea>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-primary btn-block btn-submit">Send</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Log Form -->
|
||
|
|
<form id="form-log" class="obs-form hidden">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="log-log_source">Source</label>
|
||
|
|
<input type="text" id="log-log_source" name="log_source" required placeholder="Email, IRC, System logs, etc.">
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Import from File</label>
|
||
|
|
<input type="file" id="log-file-import" accept=".txt,.log,.csv,.json">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="log-log_content">Log Content</label>
|
||
|
|
<textarea id="log-log_content" name="log_content" rows="5" required></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="log-log_date">Date (optional)</label>
|
||
|
|
<input type="text" id="log-log_date" name="log_date" placeholder="YYYY-MM-DD">
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="log-observation_name">Title (optional)</label>
|
||
|
|
<input type="text" id="log-observation_name" name="observation_name" maxlength="256">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="log-log_description">Description (optional)</label>
|
||
|
|
<textarea id="log-log_description" name="log_description" rows="2"></textarea>
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<button type="submit" class="btn btn-primary btn-block btn-submit">Send</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Photo Form -->
|
||
|
|
<form id="form-photo" class="obs-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="photo-photo_url">Reference URL (optional)</label>
|
||
|
|
<input type="url" id="photo-photo_url" name="photo_url">
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Select file</label>
|
||
|
|
<input type="file" id="photo-file" name="file" accept="image/*">
|
||
|
|
</div>
|
||
|
|
<div id="paste-target" class="paste-target" tabindex="0">
|
||
|
|
<span>Click to enable paste</span>
|
||
|
|
</div>
|
||
|
|
<div id="image-preview" class="image-preview hidden">
|
||
|
|
<img id="image-preview-img" src="" alt="Preview">
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="photo-observation_name">Title (optional)</label>
|
||
|
|
<input type="text" id="photo-observation_name" name="observation_name" maxlength="256">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="photo-photo_description">Description (optional)</label>
|
||
|
|
<textarea id="photo-photo_description" name="photo_description" rows="3"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="photo-photo_date">Date (optional)</label>
|
||
|
|
<input type="text" id="photo-photo_date" name="photo_date" placeholder="YYYY-MM-DD">
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<button type="submit" class="btn btn-primary btn-block btn-submit">Send</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Email Form -->
|
||
|
|
<form id="form-email" class="obs-form hidden">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Email File</label>
|
||
|
|
<input type="file" id="email-file" name="msg_file" accept=".msg,.eml">
|
||
|
|
</div>
|
||
|
|
<div id="email-drop-target" class="drop-target" tabindex="0">
|
||
|
|
<span>Drop .msg or .eml file to submit</span>
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email-observation_name">Title (optional)</label>
|
||
|
|
<input type="text" id="email-observation_name" name="observation_name" maxlength="256">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email-email_description">Description (optional)</label>
|
||
|
|
<textarea id="email-email_description" name="email_description" rows="3"></textarea>
|
||
|
|
</div>
|
||
|
|
<hr class="form-divider">
|
||
|
|
<button type="submit" class="btn btn-primary btn-block btn-submit">Send</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div id="status" class="status hidden"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="sidepanel.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|