Improve user experience and add about page
The home page was a bit busy for some so I have cleaned it up and moved its contents to about.html The code changes include the addition of an "about" page to enhance the user experience and provide information about the application. This helps users understand the purpose and features of the application, making it more user-friendly. The "about" page contains a comparison table of different text editors and highlights the unique features of Notatio. These changes aim to improve usability and provide valuable information to users.
This commit is contained in:
parent
6497dfae89
commit
88ea7a0046
3 changed files with 512 additions and 211 deletions
239
templates/about.html
Normal file
239
templates/about.html
Normal file
|
|
@ -0,0 +1,239 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en_US" data-bs-theme="dark">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Notatio</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Font Awesome CSS for spinner -->
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="d-flex flex-column min-vh-100 ">
|
||||||
|
<nav class="navbar navbar-expand-lg border-bottom p-2 gap-2">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="/">
|
||||||
|
<img src="/static/favicon.ico" alt="" width="24" height="24" class="d-inline-block align-text-top">
|
||||||
|
Notatio
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="ms-auto order-lg-2">
|
||||||
|
<button class="btn" id="darkModeButton">
|
||||||
|
<i id="darkModeIcon" class="fas fa-sun"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="order-lg-1">
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
|
aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse justify-content-end order-lg-1" id="navbarNav">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Sign up</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<main class="container">
|
||||||
|
<br>
|
||||||
|
<p>
|
||||||
|
Welcome to Notatio, an open source, web-based text editor written in the powerful Go programming language.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Notatio provides a user-friendly interface combined with robust features, making it the perfect choice for
|
||||||
|
developers, writers, and anyone who interacts with text on a daily basis.
|
||||||
|
</p>
|
||||||
|
<p><strong>Notatio is <u>currently</u> an alpha software! Do not use it as your daily driver!</strong></p>
|
||||||
|
|
||||||
|
<h1 class="mt-4">Text Editor Comparison</h1>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Features</th>
|
||||||
|
<th scope="col">Notion.so</th>
|
||||||
|
<th scope="col">ObsidianMD</th>
|
||||||
|
<th scope="col">Notatio</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Web-Based</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
<td class="fs-4 text-danger">✗</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Open Source</td>
|
||||||
|
<td class="fs-4 text-danger">✗</td>
|
||||||
|
<td class="fs-4 text-danger">✗</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td> <b>Does not</b> push paid plans</td>
|
||||||
|
<td class="fs-4 text-danger">✗</td>
|
||||||
|
<td class="fs-4 text-danger">✗</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Uses Open File Formats</td>
|
||||||
|
<td class="fs-4 text-danger">✗</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sleek and Intuitive Interface</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Collaborative Editing</td>
|
||||||
|
<td class="fs-4 text-success fw-bold">✓</td>
|
||||||
|
<td class="fs-4 text-danger">✗</td>
|
||||||
|
<td class="planned">Planned</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Syntax Highlighting</td>
|
||||||
|
<td class="fs-4 text-danger">✗</td>
|
||||||
|
<td class="fs-4 fw-bold text-success ">✓</td>
|
||||||
|
<td class=" planned">Planned</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3 class="modal-title" id="loginModalLabel">Log In</h3>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<form name="loginForm">
|
||||||
|
<div class="modal-body">
|
||||||
|
<div id="login-error" class="text-danger" role="alert"></div>
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" name="username" required class="form-control"><br>
|
||||||
|
<label for="login_password">Password:</label>
|
||||||
|
<input type="password" id="login_password" name="login_password" required
|
||||||
|
class="form-control"><br>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer justify-content-between">
|
||||||
|
<p>
|
||||||
|
Don't have an account?
|
||||||
|
<a href="#" data-bs-toggle="modal" data-bs-target="#signupModal"
|
||||||
|
data-bs-dismiss="modal">Sign up</a>
|
||||||
|
</p>
|
||||||
|
<button type="submit" id="loginButton" class="btn btn-primary">Login</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3 class="modal-title" id="signupModalLabel">Sign Up</h3>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<form method="post" action="/signup" name="signupForm" class="was-validated">
|
||||||
|
<div class="modal-body">
|
||||||
|
<label for="name" class="form-label">Name:</label>
|
||||||
|
<input type="text" id="name" name="name" pattern="[a-zA-Z ]{2,100}" required
|
||||||
|
class="form-control">
|
||||||
|
<div class="invalid-feedback">Please provide the name you would like to be addressed by.
|
||||||
|
</div><br>
|
||||||
|
<label for="email" class="form-label">Email:</label>
|
||||||
|
<input type="email" name="email" id="email" required class="form-control">
|
||||||
|
<div class="invalid-feedback">Please provide a valid email for password recovery.</div>
|
||||||
|
<br>
|
||||||
|
<label for="username" class="form-label">Username:</label>
|
||||||
|
<div class="input-group has-validation">
|
||||||
|
<span class="input-group-text">@</span>
|
||||||
|
<input type="text" onblur="checkUsernameAvailability();" id="signup_username"
|
||||||
|
name="username" pattern="[a-zA-Z0-9_\-]{5,20}" required class="form-control"
|
||||||
|
data-bs-toggle="popover"
|
||||||
|
data-bs-content="Username must be 5-20 characters and can contain letters, numbers, underscores, or hyphens."
|
||||||
|
data-bs-trigger="focus">
|
||||||
|
<div class="invalid-feedback">Please select a username that consists of 5 to 20
|
||||||
|
alphanumeric characters (a-z and 0-9).</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="usernameAvailability"></div>
|
||||||
|
<br>
|
||||||
|
<label for="password" class="form-label">Password:</label>
|
||||||
|
<input type="password" id="signup_password" name="password"
|
||||||
|
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=!]).{10,}" required
|
||||||
|
class="form-control">
|
||||||
|
<div class="invalid-feedback">
|
||||||
|
Password must meet the following requirements:
|
||||||
|
<ul>
|
||||||
|
<li class="password-requirement" data-regex="\d">At least one digit (0-9)</li>
|
||||||
|
<li class="password-requirement" data-regex="[a-z]">At least one lowercase letter
|
||||||
|
(a-z)</li>
|
||||||
|
<li class="password-requirement" data-regex="[A-Z]">At least one uppercase letter
|
||||||
|
(A-Z)</li>
|
||||||
|
<li class="password-requirement" data-regex="[@#$%^&+=!?]">At least one special
|
||||||
|
symbol (@#$%^&+=!?)</li>
|
||||||
|
<li class="password-requirement" data-regex=".{10,}">At least 10 characters long
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer justify-content-between">
|
||||||
|
<p>
|
||||||
|
Already have an account?
|
||||||
|
<a href="#" data-bs-toggle="modal" data-bs-target="#loginModal"
|
||||||
|
data-bs-dismiss="modal">Log
|
||||||
|
in</a>
|
||||||
|
</p>
|
||||||
|
<div class="mb-3">
|
||||||
|
<button class="btn btn-primary" type="submit" id="submitBtn" disabled>Submit
|
||||||
|
form</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto">
|
||||||
|
<div class="container d-flex justify-content-center py-3">
|
||||||
|
<a href="https://codeberg.org/notatio/notatio#download" class="mx-2 text-muted">Download</a>
|
||||||
|
<a href="https://codeberg.org/notatio/notatio/wiki" class="mx-2 text-muted">Documentation</a>
|
||||||
|
<a href="https://codeberg.org/notatio/notatio/issues" class="mx-2 text-muted">Report Issues</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||||
|
<script src="/static/build/index.js" type="text/javascript"></script>
|
||||||
|
<script src="/static/build/darkmode.js" type="text/javascript"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -6,8 +6,20 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
|
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<style>
|
||||||
|
/* Centering the content */
|
||||||
|
body, html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
min-height: 70%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<!-- Font Awesome CSS for spinner -->
|
<!-- Font Awesome CSS for spinner -->
|
||||||
<link rel="stylesheet" type="text/css"
|
<link rel="stylesheet" type="text/css"
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
|
@ -16,222 +28,174 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100 ">
|
<body>
|
||||||
<nav class="navbar navbar-expand-lg border-bottom p-2 gap-2">
|
<header>
|
||||||
<div class="container-fluid">
|
<nav class="navbar navbar-expand-lg border-bottom p-2 gap-2">
|
||||||
<a class="navbar-brand" href="/">
|
<div class="container-fluid">
|
||||||
<img src="/static/favicon.ico" alt="" width="24" height="24" class="d-inline-block align-text-top">
|
<a class="navbar-brand" href="/">
|
||||||
Notatio
|
<img src="/static/favicon.ico" alt="" width="24" height="24" class="d-inline-block align-text-top">
|
||||||
</a>
|
Notatio
|
||||||
|
</a>
|
||||||
|
|
||||||
<div class="ms-auto order-lg-2">
|
<div class="ms-auto order-lg-2">
|
||||||
<button class="btn" id="darkModeButton">
|
<button class="btn" id="darkModeButton">
|
||||||
<i id="darkModeIcon" class="fas fa-sun"></i>
|
<i id="darkModeIcon" class="fas fa-sun"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="order-lg-1">
|
<div class="order-lg-1">
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
aria-expanded="false" aria-label="Toggle navigation">
|
aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-end order-lg-1" id="navbarNav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Sign up</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<br>
|
|
||||||
<p>
|
|
||||||
Welcome to Notatio, an open source, web-based text editor written in the powerful Go programming language.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Notatio provides a user-friendly interface combined with robust features, making it the perfect choice for
|
|
||||||
developers, writers, and anyone who interacts with text on a daily basis.
|
|
||||||
</p>
|
|
||||||
<p><strong>Notatio is <u>currently</u> an alpha software! Do not use it as your daily driver!</strong></p>
|
|
||||||
|
|
||||||
<h1 class="mt-4">Text Editor Comparison</h1>
|
|
||||||
<div class="table-responsive">
|
|
||||||
<table class="table table-striped">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">Features</th>
|
|
||||||
<th scope="col">Notion.so</th>
|
|
||||||
<th scope="col">ObsidianMD</th>
|
|
||||||
<th scope="col">Notatio</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Web-Based</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
<td class="fs-4 text-danger">✗</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Open Source</td>
|
|
||||||
<td class="fs-4 text-danger">✗</td>
|
|
||||||
<td class="fs-4 text-danger">✗</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td> <b>Does not</b> push paid plans</td>
|
|
||||||
<td class="fs-4 text-danger">✗</td>
|
|
||||||
<td class="fs-4 text-danger">✗</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Uses Open File Formats</td>
|
|
||||||
<td class="fs-4 text-danger">✗</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Sleek and Intuitive Interface</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Collaborative Editing</td>
|
|
||||||
<td class="fs-4 text-success fw-bold">✓</td>
|
|
||||||
<td class="fs-4 text-danger">✗</td>
|
|
||||||
<td class="planned">Planned</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Syntax Highlighting</td>
|
|
||||||
<td class="fs-4 text-danger">✗</td>
|
|
||||||
<td class="fs-4 fw-bold text-success ">✓</td>
|
|
||||||
<td class=" planned">Planned</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3 class="modal-title" id="loginModalLabel">Log In</h3>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<form name="loginForm">
|
|
||||||
<div class="modal-body">
|
|
||||||
<div id="login-error" class="text-danger" role="alert"></div>
|
|
||||||
<label for="username">Username:</label>
|
|
||||||
<input type="text" id="username" name="username" required class="form-control"><br>
|
|
||||||
<label for="login_password">Password:</label>
|
|
||||||
<input type="password" id="login_password" name="login_password" required
|
|
||||||
class="form-control"><br>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer justify-content-between">
|
|
||||||
<p>
|
|
||||||
Don't have an account?
|
|
||||||
<a href="#" data-bs-toggle="modal" data-bs-target="#signupModal"
|
|
||||||
data-bs-dismiss="modal">Sign up</a>
|
|
||||||
</p>
|
|
||||||
<button type="submit" id="loginButton" class="btn btn-primary">Login</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse justify-content-end order-lg-1" id="navbarNav">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Sign
|
||||||
|
up</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
|
</header>
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3 class="modal-title" id="signupModalLabel">Sign Up</h3>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<form method="post" action="/signup" name="signupForm" class="was-validated">
|
|
||||||
<div class="modal-body">
|
|
||||||
<label for="name" class="form-label">Name:</label>
|
|
||||||
<input type="text" id="name" name="name" pattern="[a-zA-Z ]{2,100}" required
|
|
||||||
class="form-control">
|
|
||||||
<div class="invalid-feedback">Please provide the name you would like to be addressed by.
|
|
||||||
</div><br>
|
|
||||||
<label for="email" class="form-label">Email:</label>
|
|
||||||
<input type="email" name="email" id="email" required class="form-control">
|
|
||||||
<div class="invalid-feedback">Please provide a valid email for password recovery.</div>
|
|
||||||
<br>
|
|
||||||
<label for="username" class="form-label">Username:</label>
|
|
||||||
<div class="input-group has-validation">
|
|
||||||
<span class="input-group-text">@</span>
|
|
||||||
<input type="text" onblur="checkUsernameAvailability();" id="signup_username"
|
|
||||||
name="username" pattern="[a-zA-Z0-9_\-]{5,20}" required class="form-control"
|
|
||||||
data-bs-toggle="popover"
|
|
||||||
data-bs-content="Username must be 5-20 characters and can contain letters, numbers, underscores, or hyphens."
|
|
||||||
data-bs-trigger="focus">
|
|
||||||
<div class="invalid-feedback">Please select a username that consists of 5 to 20
|
|
||||||
alphanumeric characters (a-z and 0-9).</div>
|
|
||||||
|
|
||||||
</div>
|
<div id="container" class="grid text-center">
|
||||||
<div id="usernameAvailability"></div>
|
<div id="changingText" class="display-2">
|
||||||
<br>
|
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
|
||||||
<label for="password" class="form-label">Password:</label>
|
<script>
|
||||||
<input type="password" id="signup_password" name="password"
|
// Initialize Typed.js
|
||||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=!]).{10,}" required
|
const options = {
|
||||||
class="form-control">
|
strings: ["Notatio is for",
|
||||||
<div class="invalid-feedback">
|
"Notatio is for taking notes",
|
||||||
Password must meet the following requirements:
|
"Notatio is for recording memories",
|
||||||
<ul>
|
"Notatio is built on Bootstrap",
|
||||||
<li class="password-requirement" data-regex="\d">At least one digit (0-9)</li>
|
"Notatio offers a variety of templates",
|
||||||
<li class="password-requirement" data-regex="[a-z]">At least one lowercase letter
|
"Notatio is regularly updated",
|
||||||
(a-z)</li>
|
"Notatio is worth a try"],
|
||||||
<li class="password-requirement" data-regex="[A-Z]">At least one uppercase letter
|
typeSpeed: 80,
|
||||||
(A-Z)</li>
|
backSpeed: 90,
|
||||||
<li class="password-requirement" data-regex="[@#$%^&+=!?]">At least one special
|
backDelay: 2000,
|
||||||
symbol (@#$%^&+=!?)</li>
|
startDelay: 100,
|
||||||
<li class="password-requirement" data-regex=".{10,}">At least 10 characters long
|
cursorChar: '',
|
||||||
</li>
|
loop: false
|
||||||
</ul>
|
};
|
||||||
</div>
|
const typed = new Typed("#changingText", options);
|
||||||
</div>
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal-footer justify-content-between">
|
</div>
|
||||||
<p>
|
<div class="text-center d-grid gap-2 d-md-block pb-4">
|
||||||
Already have an account?
|
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#signupModal">Get Started</button>
|
||||||
<a href="#" data-bs-toggle="modal" data-bs-target="#loginModal"
|
<a type="button" class="btn btn-secondary btn-lg" data-bs-target="/about" href="/about">Learn More</a>
|
||||||
data-bs-dismiss="modal">Log
|
</div>
|
||||||
in</a>
|
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
|
||||||
</p>
|
<div class="modal-dialog">
|
||||||
<div class="mb-3">
|
<div class="modal-content">
|
||||||
<button class="btn btn-primary" type="submit" id="submitBtn" disabled>Submit
|
<div class="modal-header">
|
||||||
form</button>
|
<h3 class="modal-title" id="loginModalLabel">Log In</h3>
|
||||||
</div>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<form name="loginForm">
|
||||||
|
<div class="modal-body">
|
||||||
|
<div id="login-error" class="text-danger" role="alert"></div>
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" name="username" required class="form-control"><br>
|
||||||
|
<label for="login_password">Password:</label>
|
||||||
|
<input type="password" id="login_password" name="login_password" required
|
||||||
|
class="form-control"><br>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer justify-content-between">
|
||||||
|
<p>
|
||||||
|
Don't have an account?
|
||||||
|
<a href="#" data-bs-toggle="modal" data-bs-target="#signupModal"
|
||||||
|
data-bs-dismiss="modal">Sign up</a>
|
||||||
|
</p>
|
||||||
|
<button type="submit" id="loginButton" class="btn btn-primary">Login</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
<footer class="footer mt-auto">
|
</div>
|
||||||
<div class="container d-flex justify-content-center py-3">
|
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
|
||||||
<a href="https://codeberg.org/notatio/notatio#download" class="mx-2 text-muted">Download</a>
|
<div class="modal-dialog">
|
||||||
<a href="https://codeberg.org/notatio/notatio/wiki" class="mx-2 text-muted">Documentation</a>
|
<div class="modal-content">
|
||||||
<a href="https://codeberg.org/notatio/notatio/issues" class="mx-2 text-muted">Report Issues</a>
|
<div class="modal-header">
|
||||||
|
<h3 class="modal-title" id="signupModalLabel">Sign Up</h3>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<form method="post" action="/signup" name="signupForm" class="was-validated">
|
||||||
|
<div class="modal-body">
|
||||||
|
<label for="name" class="form-label">Name:</label>
|
||||||
|
<input type="text" id="name" name="name" pattern="[a-zA-Z ]{2,100}" required
|
||||||
|
class="form-control">
|
||||||
|
<div class="invalid-feedback">Please provide the name you would like to be addressed by.
|
||||||
|
</div><br>
|
||||||
|
<label for="email" class="form-label">Email:</label>
|
||||||
|
<input type="email" name="email" id="email" required class="form-control">
|
||||||
|
<div class="invalid-feedback">Please provide a valid email for password recovery.</div>
|
||||||
|
<br>
|
||||||
|
<label for="username" class="form-label">Username:</label>
|
||||||
|
<div class="input-group has-validation">
|
||||||
|
<span class="input-group-text">@</span>
|
||||||
|
<input type="text" onblur="checkUsernameAvailability();" id="signup_username"
|
||||||
|
name="username" pattern="[a-zA-Z0-9_\-]{5,20}" required class="form-control"
|
||||||
|
data-bs-toggle="popover"
|
||||||
|
data-bs-content="Username must be 5-20 characters and can contain letters, numbers, underscores, or hyphens."
|
||||||
|
data-bs-trigger="focus">
|
||||||
|
<div class="invalid-feedback">Please select a username that consists of 5 to 20
|
||||||
|
alphanumeric characters (a-z and 0-9).</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="usernameAvailability"></div>
|
||||||
|
<br>
|
||||||
|
<label for="password" class="form-label">Password:</label>
|
||||||
|
<input type="password" id="signup_password" name="password"
|
||||||
|
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=!]).{10,}" required
|
||||||
|
class="form-control">
|
||||||
|
<div class="invalid-feedback">
|
||||||
|
Password must meet the following requirements:
|
||||||
|
<ul>
|
||||||
|
<li class="password-requirement" data-regex="\d">At least one digit (0-9)</li>
|
||||||
|
<li class="password-requirement" data-regex="[a-z]">At least one lowercase letter
|
||||||
|
(a-z)</li>
|
||||||
|
<li class="password-requirement" data-regex="[A-Z]">At least one uppercase letter
|
||||||
|
(A-Z)</li>
|
||||||
|
<li class="password-requirement" data-regex="[@#$%^&+=!?]">At least one special
|
||||||
|
symbol (@#$%^&+=!?)</li>
|
||||||
|
<li class="password-requirement" data-regex=".{10,}">At least 10 characters long
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer justify-content-between">
|
||||||
|
<p>
|
||||||
|
Already have an account?
|
||||||
|
<a href="#" data-bs-toggle="modal" data-bs-target="#loginModal"
|
||||||
|
data-bs-dismiss="modal">Log
|
||||||
|
in</a>
|
||||||
|
</p>
|
||||||
|
<div class="mb-3">
|
||||||
|
<button class="btn btn-primary" type="submit" id="submitBtn" disabled>Submit
|
||||||
|
form</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</div>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
</div>
|
||||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<script src="/static/build/index.js" type="text/javascript"></script>
|
<script src="/static/build/index.js" type="text/javascript"></script>
|
||||||
<script src="/static/build/darkmode.js" type="text/javascript"></script>
|
<script src="/static/build/darkmode.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,8 @@
|
||||||
<p>Before you begin creating your first file, we want to give you a few tips!</p>
|
<p>Before you begin creating your first file, we want to give you a few tips!</p>
|
||||||
|
|
||||||
<div class="alert alert-danger" role="alert">
|
<div class="alert alert-danger" role="alert">
|
||||||
Although E2EE is planned, It is not implemented yet so <strong>DO NOT</strong> store sensitive information.
|
<strong>DO NOT</strong> store sensitive information on this service.
|
||||||
The admins can read everything currently.
|
The admins can currently read everything.
|
||||||
</div>
|
</div>
|
||||||
<div class="alert alert-warning" role="alert">
|
<div class="alert alert-warning" role="alert">
|
||||||
Back up your files often if you are using a public instance! You never know if the admin will take the service
|
Back up your files often if you are using a public instance! You never know if the admin will take the service
|
||||||
|
|
@ -27,8 +27,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="alert alert-info" role="alert">
|
<div class="alert alert-info" role="alert">
|
||||||
Use unique and meaningful file names, dates often don't convey what the file holds, nor does temp or document
|
Use unique and meaningful file names, dates often do not convey what the file holds, nor does "temp" or "document
|
||||||
1.
|
1".
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4>Enter the name of your first file:</h4>
|
<h4>Enter the name of your first file:</h4>
|
||||||
|
|
@ -45,6 +45,104 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3 class="modal-title" id="loginModalLabel">Log In</h3>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<form name="loginForm">
|
||||||
|
<div class="modal-body">
|
||||||
|
<div id="login-error" class="text-danger" role="alert"></div>
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" name="username" required class="form-control"><br>
|
||||||
|
<label for="login_password">Password:</label>
|
||||||
|
<input type="password" id="login_password" name="login_password" required
|
||||||
|
class="form-control"><br>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer justify-content-between">
|
||||||
|
<p>
|
||||||
|
Don't have an account?
|
||||||
|
<a href="#" data-bs-toggle="modal" data-bs-target="#signupModal"
|
||||||
|
data-bs-dismiss="modal">Sign up</a>
|
||||||
|
</p>
|
||||||
|
<button type="submit" id="loginButton" class="btn btn-primary">Login</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3 class="modal-title" id="signupModalLabel">Sign Up</h3>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<form method="post" action="/signup" name="signupForm" class="was-validated">
|
||||||
|
<div class="modal-body">
|
||||||
|
<label for="name" class="form-label">Name:</label>
|
||||||
|
<input type="text" id="name" name="name" pattern="[a-zA-Z ]{2,100}" required
|
||||||
|
class="form-control">
|
||||||
|
<div class="invalid-feedback">Please provide the name you would like to be addressed by.
|
||||||
|
</div><br>
|
||||||
|
<label for="email" class="form-label">Email:</label>
|
||||||
|
<input type="email" name="email" id="email" required class="form-control">
|
||||||
|
<div class="invalid-feedback">Please provide a valid email for password recovery.</div>
|
||||||
|
<br>
|
||||||
|
<label for="username" class="form-label">Username:</label>
|
||||||
|
<div class="input-group has-validation">
|
||||||
|
<span class="input-group-text">@</span>
|
||||||
|
<input type="text" onblur="checkUsernameAvailability();" id="signup_username"
|
||||||
|
name="username" pattern="[a-zA-Z0-9_\-]{5,20}" required class="form-control"
|
||||||
|
data-bs-toggle="popover"
|
||||||
|
data-bs-content="Username must be 5-20 characters and can contain letters, numbers, underscores, or hyphens."
|
||||||
|
data-bs-trigger="focus">
|
||||||
|
<div class="invalid-feedback">Please select a username that consists of 5 to 20
|
||||||
|
alphanumeric characters (a-z and 0-9).</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="usernameAvailability"></div>
|
||||||
|
<br>
|
||||||
|
<label for="password" class="form-label">Password:</label>
|
||||||
|
<input type="password" id="signup_password" name="password"
|
||||||
|
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=!]).{10,}" required
|
||||||
|
class="form-control">
|
||||||
|
<div class="invalid-feedback">
|
||||||
|
Password must meet the following requirements:
|
||||||
|
<ul>
|
||||||
|
<li class="password-requirement" data-regex="\d">At least one digit (0-9)</li>
|
||||||
|
<li class="password-requirement" data-regex="[a-z]">At least one lowercase letter
|
||||||
|
(a-z)</li>
|
||||||
|
<li class="password-requirement" data-regex="[A-Z]">At least one uppercase letter
|
||||||
|
(A-Z)</li>
|
||||||
|
<li class="password-requirement" data-regex="[@#$%^&+=!?]">At least one special
|
||||||
|
symbol (@#$%^&+=!?)</li>
|
||||||
|
<li class="password-requirement" data-regex=".{10,}">At least 10 characters long
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer justify-content-between">
|
||||||
|
<p>
|
||||||
|
Already have an account?
|
||||||
|
<a href="#" data-bs-toggle="modal" data-bs-target="#loginModal"
|
||||||
|
data-bs-dismiss="modal">Log
|
||||||
|
in</a>
|
||||||
|
</p>
|
||||||
|
<div class="mb-3">
|
||||||
|
<button class="btn btn-primary" type="submit" id="submitBtn" disabled>Submit
|
||||||
|
form</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<script src="/static/build/darkmode.js" type="text/javascript"></script>
|
<script src="/static/build/darkmode.js" type="text/javascript"></script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue