147 lines
5.7 KiB
HTML
147 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="/assets/css/defaults.css" />
|
|
<link rel="stylesheet" href="/assets/css/user.css" />
|
|
<title>Task Manager | User Page</title>
|
|
</head>
|
|
<body>
|
|
<section class="nav-section">
|
|
<nav class="nav">
|
|
<a class="nav-home" href="/">Task</a>
|
|
<button id="nav-logout" class="nav-logout">Logout</a>
|
|
</nav>
|
|
</section>
|
|
|
|
<section class="main-section">
|
|
<div class="main-grid">
|
|
<div class="left-grid">
|
|
<h2>User Management</h2>
|
|
<h4>Change Email?</h4>
|
|
<button id="change-email-btn">Click here</button>
|
|
<h4>Change Password?</h4>
|
|
<button id="change-password-btn">Click here</button>
|
|
<h4>Change Username?</h4>
|
|
<button id="change-username-btn">Click here</button>
|
|
|
|
</div>
|
|
<div class="right-grid">
|
|
<h2>User Tasks</h2>
|
|
<div id='tooltip' class="tooltip task-tooltip" style="display: none;"></div>
|
|
<div class="user-tasks">
|
|
</div>
|
|
<button id="add-task-button" class="add-task-button">Add a task</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="email-modal">
|
|
<div class="main-modal">
|
|
<div class="close-email-modal"><i class="fa-solid fa-x"></i></div>
|
|
<div class="modal-header">
|
|
<h2>Change email?</h2>
|
|
<p>Enter a new email below</p>
|
|
</div>
|
|
<div class="tooltip email-task-tooltip" style="display: none;"></div>
|
|
<div class="modal-content">
|
|
<form class="modal-form">
|
|
<label for="modal-email-input">Email</label>
|
|
<input id="modal-email-input" class="modal-email-input" placeholder="johndoe234@gmail.com" />
|
|
|
|
<button type="submit" class="submit-email-btn">Save Changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="password-modal">
|
|
<div class="main-modal">
|
|
<div class="close-password-modal"><i class="fa-solid fa-x"></i></div>
|
|
<div class="modal-header">
|
|
<h2>Change password?</h2>
|
|
<p>Enter a new password below</p>
|
|
</div>
|
|
<div class="tooltip password-task-tooltip" style="display: none;"></div>
|
|
<div class="modal-content">
|
|
<form class="modal-form password-form">
|
|
<label for="modal-password-input">Password</label>
|
|
<input type="password" id="modal-password-input" class="modal-password-input" />
|
|
<label for="modal-verify-password-input">Verify Password</label>
|
|
<input type="password" id="modal-verify-password-input" class="modal-verify-password-input" />
|
|
|
|
<button type="submit" class="submit-password-btn">Save Changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="username-modal">
|
|
<div class="main-modal">
|
|
<div class="close-username-modal"><i class="fa-solid fa-x"></i></div>
|
|
<div class="modal-header">
|
|
<h2>Change username?</h2>
|
|
<p>Enter a new username below</p>
|
|
</div>
|
|
<div class="tooltip username-task-tooltip" style="display: none;"></div>
|
|
<div class="modal-content">
|
|
<form class="modal-form username-form">
|
|
<label for="modal-username-input">Username</label>
|
|
<input id="modal-username-input" class="modal-username-input" placeholder="johndoe234" />
|
|
|
|
<button type="submit" class="submit-username-btn">Save Changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="add-task-modal">
|
|
<div class="main-modal">
|
|
<div class="close-task-modal"><i class="fa-solid fa-x"></i></div>
|
|
<div class="modal-header">
|
|
<h2>Add a task</h2>
|
|
<p>Enter a new task below</p>
|
|
</div>
|
|
<div class="tooltip add-task-tooltip" style="display: none;"></div>
|
|
<div class="modal-content">
|
|
<form class="modal-form add-task-form">
|
|
<label for="modal-name-input">Name</label>
|
|
<input id="add-task-modal-name-input" class="add-task-modal-name-input" placeholder="Finish work" />
|
|
<label for="add-task-modal-description-input">Description</label>
|
|
<input id="modal-description-input" class="add-task-modal-description-input" placeholder="Finish work by 5pm" />
|
|
|
|
<button type="submit" class="submit-add-task-btn">Save Changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="task-modal">
|
|
<div class="main-modal">
|
|
<div class="close-edit-task-modal"><i class="fa-solid fa-x"></i></div>
|
|
<div class="modal-header">
|
|
<h2>Edit a task</h2>
|
|
<p>View task details</p>
|
|
</div>
|
|
<div class="tooltip edit-task-tooltip" style="display: none;"></div>
|
|
<div class="modal-content">
|
|
<form class="modal-form task-modal-form">
|
|
<label for="task-modal-title">Title</label>
|
|
<input id="task-modal-title" class="modal-title-input task-modal-title" />
|
|
<label for="modal-description-input">Description</label>
|
|
<input id="modal-description-input" class="modal-description-input task-modal-description" />
|
|
<label for="modal-completed-status">Is it completed?</label>
|
|
<p id="modal-completed-status" class="task-modal-completed-status"></p>
|
|
|
|
<div class="button-group">
|
|
<button type="button" class="delete-task-btn">Delete Task</button>
|
|
<button type="submit" class="submit-task-btn">Save Changes</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="/assets/js/user.js"></script>
|
|
<script src="https://kit.fontawesome.com/a478227047.js" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html> |