Musselman
88ea7a0046
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.
151 lines
No EOL
7.8 KiB
HTML
151 lines
No EOL
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en_US" data-bs-theme="dark">
|
|
|
|
<head>
|
|
<title>Notatio | Welcome</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" type="text/css" href="/static/style.css">
|
|
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h2>Welcome to Notatio!</h2>
|
|
<p>Before you begin creating your first file, we want to give you a few tips!</p>
|
|
|
|
<div class="alert alert-danger" role="alert">
|
|
<strong>DO NOT</strong> store sensitive information on this service.
|
|
The admins can currently read everything.
|
|
</div>
|
|
<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
|
|
down.
|
|
</div>
|
|
|
|
<div class="alert alert-info" role="alert">
|
|
Use unique and meaningful file names, dates often do not convey what the file holds, nor does "temp" or "document
|
|
1".
|
|
</div>
|
|
|
|
<h4>Enter the name of your first file:</h4>
|
|
|
|
<form id="newFileForm" method="post" action="/create" class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><em>Filename:</em></span>
|
|
<input type="text" class="form-control" name="newFileName" id="newFileName" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<button type="submit" class="btn btn-primary">Create</button>
|
|
</div>
|
|
</form>
|
|
</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="/static/build/darkmode.js" type="text/javascript"></script>
|
|
</body>
|
|
|
|
</html> |