Skip to content
Snippets Groups Projects
Commit 3dd628db authored by Rokas Stankunas's avatar Rokas Stankunas
Browse files

Created primary version of the dashboard

parent 62114e29
No related branches found
No related tags found
1 merge request!2Resolve "Create Basic HTML Structure"
Pipeline #15505 passed
/* Reset default styles */
body {
margin: 0;
padding: 0;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
/* Container for the entire layout */
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Header styling */
.header {
background-color: #ddf;
color: #000;
padding: 10px;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
margin: 0;
}
header button {
margin-top: 0px;
}
.user-actions {
display: flex;
gap: 10px;
}
/* Main content styling */
.main-content {
display: flex;
flex-grow: 1; /* Makes the main content stretch to fill the remaining space */
overflow-y: hidden; /* Hides overflow within the main content */
}
/* Sidebar styling */
.sidebar {
width: 200px; /* Adjust the width as needed */
padding: 25px;
background-color: #ddf;
}
.status-bar {
list-style: none;
padding: 0;
}
/* Task list styling */
.task-list {
flex-grow: 1; /* Makes the task list stretch to fill the remaining space */
padding: 10px;
padding-top: 25px;
overflow-y: auto; /* Enables vertical scrolling within the task list */
max-height: calc(100vh - 100px); /* Adjust the max-height as needed */
}
.task {
border-bottom: 1px solid #aaf;
padding: 10px;
}
.task-actions {
display: flex;
justify-content: flex-end;
gap: 5px;
}
p {
font-size: 24px;
margin-bottom: 0;
}
button {
margin-top: 1rem;
padding: 0.5rem;
background-color: #bbf;
color: #000;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #99f;
}
.hide-btn {
background-color: #0f0;
}
.hide-btn:hover {
background-color: #0c0;
}
.edit-btn {
background-color: #ff0;
}
.edit-btn:hover {
background-color: #cc0;
}
.delete-btn {
background-color: #f00;
}
.delete-btn:hover {
background-color: #c00;
}
.add-btn {
background-color: #f70;
}
.add-btn:hover {
background-color: #f40;
}
.new-btn {
width: 40%;
font-weight: bold;
}
input {
font-size: 24px;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do Dashboard</title>
<link rel="stylesheet" href="./css/main.css"> </head>
<body>
<div class="container">
<header class="header">
<h1>To-Do Dashboard</h1>
<button class="new-btn">New Task</button>
<div class="user-actions">
<button class id="change-password-btn">Change Password</button>
<button id="logout-btn">Logout</button>
</div>
</header>
<main class="main-content">
<aside class="sidebar">
<h2>Status</h2>
<ul class="status-bar">
<li><progress id="file" value="3" max="5"> 60% </progress></li>
<li>Total Tasks: <span id="total-tasks">5</span></li>
<li>Active: <span id="active-tasks">2</span></li>
<li>Hidden: <span id="hidden-tasks">3</span></li>
<li><button id="show-hidden-btn">Show Hidden</button></li>
</ul>
</aside>
<section class="task-list">
<h2>Tasks</h2>
<ul>
<li class="task">
<form method="POST" action="" autocomplete="off">
<input type="text" name="task" style="width:60%;">
<div class="task-actions">
<button class="add-btn">Add</button>
</div>
</form>
</li>
<li class="task">
<p>Finish Project Report</p>
<div class="task-actions">
<button class="hide-btn">Done</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
</li>
<li class="task">
<p>Buy Groceries</p>
<div class="task-actions">
<button class="hide-btn">Done</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
</li>
<li class="task">
<p>Finish Project Report</p>
<div class="task-actions">
<button class="hide-btn">Done</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
</li>
<li class="task">
<p>Buy Groceries</p>
<div class="task-actions">
<button class="hide-btn">Done</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
</li>
<li class="task">
<p>Finish Project Report</p>
<div class="task-actions">
<button class="hide-btn">Done</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
</li>
<li class="task">
<p>Buy Groceries</p>
<div class="task-actions">
<button class="hide-btn">Done</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
</li>
<li class="task">
<p>Finish Project Report</p>
<div class="task-actions">
<button class="hide-btn">Done</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
</li>
<li class="task">
<p>Buy Groceries</p>
<div class="task-actions">
<button class="hide-btn">Done</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
</li>
<li class="task">
<p>Finish Project Report</p>
<div class="task-actions">
<button class="hide-btn">Done</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
</li>
</ul>
</section>
</main>
</div>
</body>
</html>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment