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>
<h2>Welcome to Notatio!</h2> <div class="container">
<p>Before you begin creating your first file we want to give you a few tips!</p> <h2>Welcome to Notatio!</h2>
<tip>Although E2EE is planned, It is not implemented yet so <strong>DO NOT</strong> store sensitive information. <p>Before you begin creating your first file, we want to give you a few tips!</p>
(The admins can read it)</tip>
<tip>Use unique and meaningful file names, dates often dont convey what the file holds, nor does temp or document 1. <div class="alert alert-danger" role="alert">
</tip> Although E2EE is planned, It is not implemented yet so <strong>DO NOT</strong> store sensitive information.
<tip>Back up your files often if you are using a public instance! You never know If the admin will take the service The admins can read everything currently.
down.</tip> </div>
<h4>Enter the name of your first file:</h4> <div class="alert alert-warning" role="alert">
<form id="newFileForm" method="post" action="/create"> Back up your files often if you are using a public instance! You never know if the admin will take the service
<input type="text" name="newFileName" id="newFileName" required><br><br> down.
<button type="submit" id="createNewFile">Create</button> </div>
</form>
<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>
<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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>