189 lines
10 KiB
HTML
189 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="color-scheme" content="dark light">
|
||
<title>RustPad</title>
|
||
__APP_THEME_BOOTSTRAP__
|
||
__APP_STYLESHEET__
|
||
__APP_IMPORT_MAP__
|
||
__APP_ENTRYPOINT__
|
||
</head>
|
||
|
||
<body class="home-page" data-registration-enabled="__REGISTRATION_ENABLED__">
|
||
<header class="site-header home-header"><a class="brand home-brand" href="/">RustPad</a></header>
|
||
<main class="home-layout home-layout--wide">
|
||
<section class="home-intro">
|
||
<h1>Write. Share. Collaborate.</h1>
|
||
<p>Create a standalone note or organize multiple notes in a workspace.</p>
|
||
</section>
|
||
|
||
<div class="create-grid">
|
||
<section class="panel create-panel">
|
||
<div class="create-panel__heading">
|
||
<h2>Note</h2>
|
||
<p>A single document with its own link.</p>
|
||
</div>
|
||
<form id="pad-form" novalidate>
|
||
<div class="field">
|
||
<label for="pad-name">Note name</label>
|
||
<input id="pad-name" maxlength="80" required autocomplete="off" placeholder="Meeting notes">
|
||
<div class="field-meta"><span id="pad-slug-preview">/p/note</span><span id="pad-name-count">0/80</span>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="label-row"><label for="pad-password">Password</label><span>optional, min. 8 characters</span>
|
||
</div>
|
||
<div class="password-input"><input id="pad-password" type="password" maxlength="128"
|
||
autocomplete="new-password" placeholder="Note password"><button class="text-button password-toggle"
|
||
type="button" data-target="pad-password">Show</button></div>
|
||
</div>
|
||
<p id="pad-error" class="form-message error" role="alert"></p>
|
||
<button id="pad-button" class="primary-button" type="submit">Create note</button>
|
||
</form>
|
||
</section>
|
||
|
||
<section class="panel create-panel">
|
||
<div class="create-panel__heading">
|
||
<h2>Workspace</h2>
|
||
<p>A workspace containing multiple notes.</p>
|
||
</div>
|
||
<form id="workspace-form" novalidate>
|
||
<div class="field">
|
||
<label for="workspace-name">Workspace name</label>
|
||
<input id="workspace-name" maxlength="80" required autocomplete="off" placeholder="My project">
|
||
<div class="field-meta"><span id="workspace-slug-preview">/w/workspace</span><span
|
||
id="workspace-name-count">0/80</span></div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="label-row"><label for="workspace-password">Password</label><span>optional, min. 8
|
||
characters</span></div>
|
||
<div class="password-input"><input id="workspace-password" type="password" maxlength="128"
|
||
autocomplete="new-password" placeholder="Workspace password"><button class="text-button password-toggle"
|
||
type="button" data-target="workspace-password">Show</button></div>
|
||
</div>
|
||
<p id="workspace-error" class="form-message error" role="alert"></p>
|
||
<button id="workspace-button" class="primary-button" type="submit">Create workspace</button>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="home-footer">
|
||
<div class="home-footer__inner">
|
||
<div id="footer-account-guest" class="home-footer__account">
|
||
<button id="footer-login" class="footer-action footer-action--primary" type="button">Log in</button>
|
||
<button id="footer-register" class="footer-action footer-action--primary" type="button">Register</button>
|
||
</div>
|
||
<div id="footer-account-user" class="home-footer__account" hidden>
|
||
<span id="footer-user-label" class="home-footer__user">
|
||
<span class="home-footer__user-primary" data-account-primary></span>
|
||
<small class="home-footer__user-secondary" data-account-secondary hidden></small>
|
||
</span>
|
||
<button id="footer-resources" class="footer-action footer-action--primary" type="button">My notes</button>
|
||
<button id="footer-profile" class="footer-action" type="button">Profile</button>
|
||
<button id="footer-logout" class="footer-action" type="button">Log out</button>
|
||
</div>
|
||
<span class="home-footer__author">Author: <a href="https://www.linuxiarz.pl"
|
||
rel="author noopener">@linuxiarz.pl</a></span>
|
||
</div>
|
||
</footer>
|
||
|
||
<dialog id="identity-dialog" class="app-dialog">
|
||
<form id="identity-form" autocomplete="on" class="dialog-panel identity-panel">
|
||
<button id="close-identity" class="modal-close" type="button" aria-label="Close dialog">×</button>
|
||
<header class="identity-panel__header">
|
||
<h2 id="identity-title">Log in</h2>
|
||
<p id="identity-copy" class="dialog-copy"></p>
|
||
</header>
|
||
<div class="identity-fields">
|
||
<label>Nickname<input id="nickname" name="nickname" maxlength="40" autocomplete="off" data-bwignore="true"
|
||
placeholder="Your nickname"></label>
|
||
<label id="auth-email-field"><span id="auth-email-label">E-mail</span><input id="auth-email" name="username"
|
||
type="email" maxlength="320" autocomplete="username" required placeholder="you@example.com"></label>
|
||
<label>Password<input id="auth-password" name="password" type="password" minlength="8" maxlength="128"
|
||
autocomplete="current-password" required placeholder="At least 8 characters"></label>
|
||
</div>
|
||
<button id="auth-submit" class="primary-button" type="submit">Log in</button>
|
||
<div class="identity-links">
|
||
<button id="show-reset" class="text-button" type="button">Forgot password?</button>
|
||
<button id="auth-switch-mode" class="text-button" type="button">Create an account</button>
|
||
<button id="reset-back" class="text-button" type="button" hidden>Back to log in</button>
|
||
</div>
|
||
<p id="identity-error" class="form-message" role="status"></p>
|
||
</form>
|
||
</dialog>
|
||
<dialog id="resources-dialog" class="app-dialog">
|
||
<div class="dialog-panel resources-panel">
|
||
<button id="close-resources" class="modal-close" type="button" aria-label="Close dialog">×</button>
|
||
<header class="resources-panel__header">
|
||
<h2>My notes and workspaces</h2>
|
||
<p class="dialog-copy">Items created while signed in are assigned to your account.</p>
|
||
<p class="resources-access-rules"><strong>Access rules:</strong> Public items open from their link; a password
|
||
adds link-based protection. Private items are visible only to their owner and explicitly shared accounts or
|
||
valid share links. Unauthorized visitors receive a not-found response.</p>
|
||
</header>
|
||
<div class="list-controls resources-controls">
|
||
<label class="list-search"><span class="sr-only">Search notes and workspaces</span><input id="resources-search"
|
||
type="search" placeholder="Search notes and workspaces…" autocomplete="off"></label>
|
||
<label class="page-size-label">Per page<select id="resources-per-page">
|
||
<option value="25">25</option>
|
||
<option value="50">50</option>
|
||
<option value="100">100</option>
|
||
</select></label>
|
||
</div>
|
||
<div id="resources-list" class="resources-list"></div>
|
||
<nav id="resources-pagination" class="pagination" aria-label="Resources pagination"></nav>
|
||
<p id="resources-error" class="form-message error" role="alert"></p>
|
||
</div>
|
||
</dialog>
|
||
|
||
<dialog id="profile-dialog" class="app-dialog">
|
||
<form id="profile-form" class="dialog-panel identity-panel" autocomplete="off">
|
||
<button id="close-profile" class="modal-close" type="button" aria-label="Close dialog">×</button>
|
||
<header class="identity-panel__header">
|
||
<h2>Profile</h2>
|
||
<p id="profile-copy" class="dialog-copy">Manage your local RustPad account.</p>
|
||
</header>
|
||
<div class="identity-fields">
|
||
<label data-directory-profile-field>Full name<input id="profile-directory-name" readonly></label>
|
||
<label data-directory-profile-field>Organization<input id="profile-directory-organization" readonly></label>
|
||
<p id="profile-nickname-suggestion" data-directory-profile-field class="profile-suggestion"></p>
|
||
<label>Nickname<input id="profile-nickname" maxlength="40" required></label>
|
||
<label class="profile-color-field">Editor color<input id="profile-color" type="color"
|
||
aria-label="Choose your editor color"></label>
|
||
<fieldset class="profile-theme-field">
|
||
<legend>Interface theme</legend>
|
||
<div class="theme-options">
|
||
<label class="theme-option">
|
||
<input type="radio" name="profile-theme" value="dark" checked>
|
||
<span><strong>Dark</strong><small>Current RustPad appearance</small></span>
|
||
</label>
|
||
<label class="theme-option">
|
||
<input type="radio" name="profile-theme" value="light">
|
||
<span><strong>Light</strong><small>Warm cream surfaces and dark text</small></span>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
<label data-local-profile-field>Current e-mail<input id="profile-current-email" type="email" readonly></label>
|
||
<label data-local-profile-field>New e-mail<input id="profile-email" type="email" maxlength="320"
|
||
placeholder="Leave empty to keep current"></label>
|
||
<label data-local-profile-field>New password<input id="profile-new-password" type="password" minlength="8"
|
||
maxlength="128" placeholder="Leave empty to keep current"></label>
|
||
<label data-local-profile-field>Current password<input id="profile-password" type="password" minlength="8"
|
||
maxlength="128" placeholder="Required for e-mail or password changes"></label>
|
||
</div>
|
||
<div class="profile-actions">
|
||
<button class="primary-button" type="submit">Save profile</button>
|
||
<button id="profile-delete" data-local-profile-field class="danger-button" type="button">Delete account</button>
|
||
</div>
|
||
<p id="profile-message" class="form-message" role="status"></p>
|
||
</form>
|
||
</dialog>
|
||
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
||
|
||
</body>
|
||
|
||
</html> |