Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
90b381823a | ||
|
|
52f29038d8 | ||
|
|
5dabf3f4ca | ||
|
|
281004434d |
@@ -1,3 +1,11 @@
|
|||||||
|
## [v0.0.3] - 2026-02-21
|
||||||
|
|
||||||
|
* feat: add custom favicon and update page title (52f2903)
|
||||||
|
|
||||||
|
## [v0.0.2] - 2026-02-21
|
||||||
|
|
||||||
|
* feat: Implement responsive styling for various screen sizes and refactor the main todo list container class. (2810044)
|
||||||
|
|
||||||
## [v0.0.1] - 2026-02-21
|
## [v0.0.1] - 2026-02-21
|
||||||
|
|
||||||
* feat: Introduce application version display in the frontend footer, showing both frontend and backend versions with integrated build arguments. (37ae9db)
|
* feat: Introduce application version display in the frontend footer, showing both frontend and backend versions with integrated build arguments. (37ae9db)
|
||||||
|
|||||||
@@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>frontend</title>
|
<title>To-Do Tasks</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
10
frontend/public/favicon.svg
Normal file
10
frontend/public/favicon.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="3" width="18" height="18" rx="4" stroke="none" fill="url(#grad)" />
|
||||||
|
<path d="M8 12.5l2.5 2.5 5.5-5.5" stroke="#ffffff" stroke-width="2.5" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="grad" x1="3" y1="3" x2="21" y2="21" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0%" stop-color="#8b5cf6" />
|
||||||
|
<stop offset="100%" stop-color="#ec4899" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 557 B |
@@ -54,6 +54,7 @@
|
|||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -208,3 +209,89 @@
|
|||||||
.error {
|
.error {
|
||||||
color: var(--danger);
|
color: var(--danger);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Responsive Design --- */
|
||||||
|
|
||||||
|
/* Tablets and small desktops */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.app-container {
|
||||||
|
padding: 1.75rem;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 600px;
|
||||||
|
min-height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile phones */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.app-container {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-wrapper {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-form {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
padding: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-item {
|
||||||
|
padding: 0.85rem 0.75rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-footer code {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -73,7 +73,7 @@ const TodoList = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app-container">
|
<div className="todo-wrapper">
|
||||||
<h1 className="title">Tasks</h1>
|
<h1 className="title">Tasks</h1>
|
||||||
|
|
||||||
<form className="todo-form" onSubmit={handleCreate}>
|
<form className="todo-form" onSubmit={handleCreate}>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ body {
|
|||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
background-image: radial-gradient(circle at top right, rgba(139, 92, 246, 0.15), transparent 40%),
|
background-image: radial-gradient(circle at top right, rgba(139, 92, 246, 0.15), transparent 40%),
|
||||||
radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
|
radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -31,6 +31,19 @@ body {
|
|||||||
padding: 4rem 1rem;
|
padding: 4rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
|||||||
Reference in New Issue
Block a user