Refactor and style the welcome page

for improved user experience

This commit refactors the newuser.html template for improved user
experience by adding a title, meta viewport tag, and Bootstrap CSS. It
also enhances the layout and styling, including the use of Bootstrap
alerts and input groups. The form for creating a new file is now
displayed in a more organized manner.
This commit is contained in:
James Musselman 2023-11-21 15:58:45 -06:00
parent 4493397b38
commit 846de5c396

View file

@ -1,24 +1,49 @@
<html> <!DOCTYPE html>
<html lang="en_US">
<head> <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="stylesheet" type="text/css" href="/static/style.css">
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <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">
</head> </head>
<body> <body>
<div class="container">
<h2>Welcome to Notatio!</h2> <h2>Welcome to Notatio!</h2>
<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>
<tip>Although E2EE is planned, It is not implemented yet so <strong>DO NOT</strong> store sensitive information.
(The admins can read it)</tip> <div class="alert alert-danger" role="alert">
<tip>Use unique and meaningful file names, dates often dont convey what the file holds, nor does temp or document 1. Although E2EE is planned, It is not implemented yet so <strong>DO NOT</strong> store sensitive information.
</tip> The admins can read everything currently.
<tip>Back up your files often if you are using a public instance! You never know If the admin will take the service </div>
down.</tip> <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 don't convey what the file holds, nor does temp or document
1.
</div>
<h4>Enter the name of your first file:</h4> <h4>Enter the name of your first file:</h4>
<form id="newFileForm" method="post" action="/create">
<input type="text" name="newFileName" id="newFileName" required><br><br> <form id="newFileForm" method="post" action="/create" class="row g-3">
<button type="submit" id="createNewFile">Create</button> <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> </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>