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 {
font-family: "Arial", sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 2rem auto;
padding: 2rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
h1 {
font-size: 2rem;
font-weight: 300;
margin: 0;
}
#logout-btn {
background-color: transparent;
border: 1px solid #333;
color: #333;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
#logout-btn:hover {
background-color: #333;
color: #fff;
}
#new-task-form {
display: flex;
margin-bottom: 2rem;
}
input[type="text"] {
flex-grow: 1;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-size: 1rem;
}
button[type="submit"] {
padding: 0.75rem 1.5rem;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.task-list ul {
list-style-type: none;
padding: 0;
}
.task-list li {
background-color: #f9f9f9;
border-left: 4px solid #4caf50;
margin-bottom: 1rem;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.task-list li:hover {
background-color: #f0f0f0;
}
.task-list li.completed {
border-left-color: #999;
opacity: 0.6;
}
.task-list li.completed span {
text-decoration: line-through;
}
.task-actions {
display: flex;
gap: 0.5rem;
}
.task-list li button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 1.2rem;
transition: color 0.3s ease;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.complete-btn {
color: #4caf50;
}
.complete-btn:hover {
color: #45a049;
}
.delete-btn {
color: #d9534f;
}
.delete-btn:hover {
color: #c9302c;
}
\ No newline at end of file
font-family: "Arial", sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 2rem auto;
padding: 2rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
h1 {
font-size: 2rem;
font-weight: 300;
margin: 0;
}
#logout-btn {
background-color: transparent;
border: 1px solid #333;
color: #333;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
#logout-btn:hover {
background-color: #333;
color: #fff;
}
#new-task-form {
display: flex;
margin-bottom: 2rem;
}
input[type="text"] {
flex-grow: 1;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-size: 1rem;
}
button[type="submit"] {
padding: 0.75rem 1.5rem;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.task-list ul {
list-style-type: none;
padding: 0;
}
.task-list li {
background-color: #f9f9f9;
border-left: 4px solid #4caf50;
margin-bottom: 1rem;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.task-list li:hover {
background-color: #f0f0f0;
}
.task-list li.completed {
border-left-color: #999;
opacity: 0.6;
}
.task-list li.completed span {
text-decoration: line-through;
}
.task-actions {
display: flex;
gap: 0.5rem;
}
.task-list li button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 1.2rem;
transition: color 0.3s ease;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.complete-btn {
color: #4caf50;
}
.complete-btn:hover {
color: #45a049;
}
.delete-btn {
color: #d9534f;
}
.delete-btn:hover {
color: #c9302c;
}
public/index.html
+ 31
− 113
View file @ 64f87909
<!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>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ToDo</title>
<link rel="stylesheet" href="./css/index.css" />
<script src="./js/index.js" defer></script>
</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>
<header>
<h1>ToDo List</h1>
<button id="logout-btn">Logout</button>
</header>
<main>
<form id="new-task-form">
<input
type="text"
name="task"
placeholder="Add a new task..."
required
/>
<button type="submit">Add</button>
</form>
<!-- Lista de tareas -->
<section class="task-list">
<ul id="task-list"></ul>
</section>
</main>
</div>
</body>
</html>
\ No newline at end of file
</body>
</html>
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