Musselman/notatio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
notatio/templates/index.html

203 lines
9.3 KiB
HTML
Raw Normal View History

Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
<!DOCTYPE html>
Add dark mode
2023-11-30 07:32:08 +00:00
<html lang="en_US" data-bs-theme="dark">
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
<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">
Update templates with viewport meta tag This addition helps ensure proper rendering and responsiveness of the webpage across different devices and screen sizes.
2023-11-30 09:23:38 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
2023-12-03 23:35:00 +00:00
<style>
/* Centering the content */
body, html {
height: 100%;
}
Update templates with viewport meta tag This addition helps ensure proper rendering and responsiveness of the webpage across different devices and screen sizes.
2023-11-30 09:23:38 +00:00
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.
2023-12-03 23:35:00 +00:00
#container {
min-height: 70%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
<!-- 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">
Add Dark mode toggle
2023-11-30 08:40:55 +00:00
<link rel="stylesheet" type="text/css"
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
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.
2023-12-03 23:35:00 +00:00
<body>
<header>
<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>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
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.
2023-12-03 23:35:00 +00:00
<div class="ms-auto order-lg-2">
<button class="btn" id="darkModeButton">
<i id="darkModeIcon" class="fas fa-sun"></i>
</button>
</div>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
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.
2023-12-03 23:35:00 +00:00
<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>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
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.
2023-12-03 23:35:00 +00:00
<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>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
</div>
</div>
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.
2023-12-03 23:35:00 +00:00
</nav>
</header>
<div id="container" class="grid text-center">
<div id="changingText" class="display-2">
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
// Initialize Typed.js
const options = {
strings: ["Notatio is for",
"Notatio is for taking notes",
"Notatio is for recording memories",
"Notatio is built on Bootstrap",
"Notatio offers a variety of templates",
"Notatio is regularly updated",
"Notatio is worth a try"],
typeSpeed: 80,
backSpeed: 90,
backDelay: 2000,
startDelay: 100,
cursorChar: '',
loop: false
};
const typed = new Typed("#changingText", options);
</script>
</div>
</div>
<div class="text-center d-grid gap-2 d-md-block pb-4">
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#signupModal">Get Started</button>
<a type="button" class="btn btn-secondary btn-lg" data-bs-target="/about" href="/about">Learn More</a>
</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>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
</div>
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.
2023-12-03 23:35:00 +00:00
</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>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
</div>
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.
2023-12-03 23:35:00 +00:00
</div>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
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.
2023-12-03 23:35:00 +00:00
<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>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
</div>
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.
2023-12-03 23:35:00 +00:00
</form>
Add Dark mode toggle
2023-11-30 08:40:55 +00:00
</div>
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.
2023-12-03 23:35:00 +00:00
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Move homepage javascript to seperate file
2023-11-29 23:20:25 +00:00
<script src="/static/build/index.js" type="text/javascript"></script>
Add dark mode
2023-11-30 07:32:08 +00:00
<script src="/static/build/darkmode.js" type="text/javascript"></script>
Switch Repo to notatio/notatio
2023-11-21 04:10:40 +00:00
</body>
</html>
Reference in a new issue Copy permalink