Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
C
CloudComputing_Act1
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Jesus Galaz Reyes
CloudComputing_Act1
Commits
64f87909
Commit
64f87909
authored
8 months ago
by
Jesus Galaz
Browse files
Options
Downloads
Patches
Plain Diff
Fixing some design issues
parent
6733b52a
No related branches found
Branches containing commit
No related tags found
1 merge request
!5
User authentication implemented
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
public/css/index.css
+115
-116
115 additions, 116 deletions
public/css/index.css
public/index.html
+31
-113
31 additions, 113 deletions
public/index.html
with
146 additions
and
229 deletions
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
This diff is collapsed.
Click to expand it.
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
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment