Skip to content
Snippets Groups Projects
Commit 99f997e7 authored by Jesus Galaz Reyes's avatar Jesus Galaz Reyes
Browse files

Merge branch '1-create-basic-html-structure' into 'main'

Resolve "Create Basic HTML Structure"

Closes #1

See merge request !2
parents fb9d050c 3dd628db
No related branches found
No related tags found
1 merge request!2Resolve "Create Basic HTML Structure"
Pipeline #15535 passed
body {
font-family: Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.login-container {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 320px;
margin: 0 auto;
}
.register-container {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 320px;
margin: 0 auto;
}
@media (min-width: 600px) {
.login-container {
padding: 2rem;
}
.register-container {
padding: 2rem;
}
}
@media (min-width: 900px) {
.login-container {
max-width: 350px;
}
.register-container {
max-width: 350px;
}
}
h2 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
input {
margin: 0.5rem 0;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
margin-top: 1rem;
padding: 0.5rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.submit-register {
background-color: #28a745;
}
.submit-register:hover {
background-color: #218838;
}
.error_text {
display: block;
color: red;
margin-top: 1rem;
font-size: 0.9rem;
font-style: italic;
text-align: center;
}
.success_message {
display: none;
color: #28a745;
margin-top: 1rem;
font-size: 1rem;
text-align: center;
opacity: 0;
transition: opacity 0.6s ease;
}
.success_message.show {
display: block;
opacity: 1;
}
.register-link {
text-align: center;
margin-top: 1.5rem;
font-size: 0.9rem;
color: #555;
}
.register-link a {
color: #007bff;
text-decoration: none;
}
.register-link a:hover {
text-decoration: underline;
}
.login-link {
text-align: center;
margin-top: 1.5rem;
font-size: 0.9rem;
color: #555;
}
.login-link a {
color: #007bff;
text-decoration: none;
}
.login-link a:hover {
text-decoration: underline;
}
\ No newline at end of file
/* 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
...@@ -4,104 +4,7 @@ ...@@ -4,104 +4,7 @@
<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>Login</title> <title>Login</title>
<style> <link rel="stylesheet" href="./css/login.css">
body {
font-family: Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.login-container {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 320px;
margin: 0 auto;
}
@media (min-width: 600px) {
.login-container {
padding: 2rem;
}
}
@media (min-width: 900px) {
.login-container {
max-width: 350px;
}
}
h2 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
input {
margin: 0.5rem 0;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
margin-top: 1rem;
padding: 0.5rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.error_text {
display: block;
color: red;
margin-top: 1rem;
font-size: 0.9rem;
font-style: italic;
text-align: center;
}
.success_message {
display: none;
color: #28a745;
margin-top: 1rem;
font-size: 1rem;
text-align: center;
opacity: 0;
transition: opacity 0.6s ease;
}
.success_message.show {
display: block;
opacity: 1;
}
.register-link {
text-align: center;
margin-top: 1.5rem;
font-size: 0.9rem;
color: #555;
}
.register-link a {
color: #007bff;
text-decoration: none;
}
.register-link a:hover {
text-decoration: underline;
}
</style>
</head> </head>
<body> <body>
<div class="login-container"> <div class="login-container">
...@@ -132,29 +35,5 @@ ...@@ -132,29 +35,5 @@
Don't have an account? <a href="register.html">Create one</a>. Don't have an account? <a href="register.html">Create one</a>.
</div> </div>
</div> </div>
<script>
document.querySelector("form").addEventListener("submit", function (e) {
e.preventDefault();
const username = document.querySelector(".uname").value;
const password = document.querySelector(".pass").value;
const errorText = document.querySelector(".error_text");
const successMessage = document.querySelector(".success_message");
if (username === "admin" && password === "password") {
errorText.textContent = "";
successMessage.classList.add("show");
document.getElementById("login-form").style.display = "none";
setTimeout(function () {
window.location.href = "todo.html";
}, 2000);
} else {
errorText.textContent = "Invalid username or password";
}
});
</script>
</body> </body>
</html> </html>
...@@ -4,88 +4,8 @@ ...@@ -4,88 +4,8 @@
<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>Register</title> <title>Register</title>
<style> <link rel="stylesheet" href="./css/login.css">
body {
font-family: Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.register-container {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 320px;
margin: 0 auto;
}
@media (min-width: 600px) {
.register-container {
padding: 2rem;
}
}
@media (min-width: 900px) {
.register-container {
max-width: 350px;
}
}
h2 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
input {
margin: 0.5rem 0;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
margin-top: 1rem;
padding: 0.5rem;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #218838;
}
.error_text {
display: block;
color: red;
margin-top: 1rem;
font-size: 0.9rem;
font-style: italic;
text-align: center;
}
.success_message {
display: none;
color: #28a745;
margin-top: 1rem;
font-size: 1rem;
text-align: center;
opacity: 0;
transition: opacity 0.6s ease;
}
.success_message.show {
display: block;
opacity: 1;
}
</style>
</head> </head>
<body> <body>
<div class="register-container"> <div class="register-container">
...@@ -105,35 +25,14 @@ ...@@ -105,35 +25,14 @@
placeholder="Password" placeholder="Password"
required required
/> />
<button type="submit">Register</button> <button type="submit" class="submit-register">Register</button>
</form> </form>
<span class="error_text"></span> <span class="error_text"></span>
<div class="success_message">Registration successful! Redirecting...</div> <div class="success_message">Registration successful! Redirecting...</div>
</div>
<script>
document.querySelector("form").addEventListener("submit", function (e) {
e.preventDefault();
const username = document.querySelector(".uname").value;
const password = document.querySelector(".pass").value;
const errorText = document.querySelector(".error_text");
const successMessage = document.querySelector(".success_message");
if (username.length >= 4 && password.length >= 6) { <div class="login-link">
errorText.textContent = ""; Already have an account? <a href="login.html">Log in</a>.
</div>
successMessage.classList.add("show"); </div>
document.getElementById("register-form").style.display = "none";
setTimeout(function () {
window.location.href = "login.html";
}, 2000);
} else {
errorText.textContent =
"El nombre de usuario debe tener al menos 4 caracteres y la contraseña al menos 6 caracteres.";
}
});
</script>
</body> </body>
</html> </html>
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