Skip to content
Snippets Groups Projects
Commit 64f87909 authored by Jesus Galaz's avatar Jesus Galaz
Browse files

Fixing some design issues

parent 6733b52a
No related branches found
No related tags found
1 merge request!5User authentication implemented
Hide whitespace changes
Inline Side-by-side
public/css/index.css
+ 115
− 116
View file @ 64f87909
body { body {
font-family: "Arial", sans-serif; font-family: "Arial", sans-serif;
background-color: #f5f5f5; background-color: #f5f5f5;
color: #333; color: #333;
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.container { .container {
max-width: 600px; max-width: 600px;
margin: 2rem auto; margin: 2rem auto;
padding: 2rem; padding: 2rem;
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} }
header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
h1 { h1 {
font-size: 2rem; font-size: 2rem;
font-weight: 300; font-weight: 300;
margin: 0; margin: 0;
} }
#logout-btn { #logout-btn {
background-color: transparent; background-color: transparent;
border: 1px solid #333; border: 1px solid #333;
color: #333; color: #333;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
#logout-btn:hover { #logout-btn:hover {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
} }
#new-task-form { #new-task-form {
display: flex; display: flex;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
input[type="text"] { input[type="text"] {
flex-grow: 1; flex-grow: 1;
padding: 0.75rem; padding: 0.75rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
font-size: 1rem; font-size: 1rem;
} }
button[type="submit"] { button[type="submit"] {
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
background-color: #4caf50; background-color: #4caf50;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button[type="submit"]:hover { button[type="submit"]:hover {
background-color: #45a049; background-color: #45a049;
} }
.task-list ul { .task-list ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.task-list li { .task-list li {
background-color: #f9f9f9; background-color: #f9f9f9;
border-left: 4px solid #4caf50; border-left: 4px solid #4caf50;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1rem; padding: 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.task-list li:hover { .task-list li:hover {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.task-list li.completed { .task-list li.completed {
border-left-color: #999; border-left-color: #999;
opacity: 0.6; opacity: 0.6;
} }
.task-list li.completed span { .task-list li.completed span {
text-decoration: line-through; text-decoration: line-through;
} }
.task-actions { .task-actions {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
} }
.task-list li button { .task-list li button {
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 1.2rem; font-size: 1.2rem;
transition: color 0.3s ease; transition: color 0.3s ease;
padding: 0; padding: 0;
width: 24px; width: 24px;
height: 24px; height: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.complete-btn { .complete-btn {
color: #4caf50; color: #4caf50;
} }
.complete-btn:hover { .complete-btn:hover {
color: #45a049; color: #45a049;
} }
.delete-btn { .delete-btn {
color: #d9534f; color: #d9534f;
} }
.delete-btn:hover { .delete-btn:hover {
color: #c9302c; color: #c9302c;
} }
\ No newline at end of file
public/index.html
+ 31
− 113
View file @ 64f87909
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To-Do Dashboard</title> <title>ToDo</title>
<link rel="stylesheet" href="./css/main.css"> </head> <link rel="stylesheet" href="./css/index.css" />
<body> <script src="./js/index.js" defer></script>
</head>
<body>
<div class="container"> <div class="container">
<header class="header"> <header>
<h1>To-Do Dashboard</h1> <h1>ToDo List</h1>
<button class="new-btn">New Task</button> <button id="logout-btn">Logout</button>
<div class="user-actions"> </header>
<button class id="change-password-btn">Change Password</button>
<button id="logout-btn">Logout</button> <main>
</div> <form id="new-task-form">
</header> <input
<main class="main-content"> type="text"
<aside class="sidebar"> name="task"
<h2>Status</h2> placeholder="Add a new task..."
<ul class="status-bar"> required
<li><progress id="file" value="3" max="5"> 60% </progress></li> />
<li>Total Tasks: <span id="total-tasks">5</span></li> <button type="submit">Add</button>
<li>Active: <span id="active-tasks">2</span></li> </form>
<li>Hidden: <span id="hidden-tasks">3</span></li>
<li><button id="show-hidden-btn">Show Hidden</button></li> <!-- Lista de tareas -->
</ul> <section class="task-list">
</aside> <ul id="task-list"></ul>
<section class="task-list"> </section>
<h2>Tasks</h2> </main>
<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> </div>
</body> </body>
</html> </html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment