diff --git a/style/index.html b/style/index.html new file mode 100644 index 0000000..f8f06e8 --- /dev/null +++ b/style/index.html @@ -0,0 +1,128 @@ + + + + + + To-Do List + + + + +
+
+

To-Do List

+
+ +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/style/style.css b/style/style.css index e69de29..47ea707 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,199 @@ +:root { + --primary-color: #007bff; + --primary-color-hover: #0056b3; + --high-priority: #dc3545; + --medium-priority: #fd7e14; + --low-priority: #6c757d; + + --text-color: #212529; + --text-muted: #6c757d; + --border-color: #ced4da; + --background-light: #f8f9fa; + --background-white: #ffffff; + + --border-radius-sm: 6px; + --border-radius-md: 8px; + --border-radius-lg: 12px; + + --focus-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); + --default-transition: all 0.2s ease-in-out; +} + + +*, *::before, *::after { + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + background-color: var(--background-light); + color: var(--text-color); + margin: 0; + padding: 2rem; + display: flex; + justify-content: center; +} + + +.app-container { + width: 100%; + max-width: 700px; + background-color: var(--background-white); + border-radius: var(--border-radius-lg); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + padding: 2rem; +} + +header h1 { + font-size: 2.5rem; + text-align: center; + margin-bottom: 2rem; +} + + +.add-task-form { + display: flex; + gap: 0.75rem; + margin-bottom: 1.5rem; +} + + +#newTaskInput, .select-wrapper select, .form-group input, .form-group select { + border: 1px solid var(--border-color); + border-radius: var(--border-radius-md); + font-size: 1rem; + transition: var(--default-transition); +} + +#newTaskInput:focus, .select-wrapper select:focus, .form-group input:focus, .form-group select:focus { + outline: none; + border-color: #80bdff; + box-shadow: var(--focus-shadow); +} + +#newTaskInput { + flex-grow: 1; + padding: 0.75rem 1rem; +} + +.filter-sort-controls { + display: flex; + gap: 1.5rem; + align-items: center; + margin-bottom: 1.5rem; + font-size: 0.9rem; + color: var(--text-muted); +} + +.select-wrapper select { + padding: 0.5rem; + cursor: pointer; + background-color: var(--background-white); +} + + +.add-btn, .form-actions button { + padding: 0.75rem 1.5rem; + border-radius: var(--border-radius-md); + font-size: 1rem; + font-weight: 500; + cursor: pointer; + border: 1px solid transparent; + transition: var(--default-transition); +} + +.add-btn, .save-btn { + background-color: var(--primary-color); + color: var(--background-white); +} + +.add-btn:hover, .save-btn:hover { + background-color: var(--primary-color-hover); +} + + + +.task-list { + list-style: none; + padding: 0; + margin: 0; +} + +.task-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; + border-bottom: 1px solid #e9ecef; +} +.task-item:last-child { border-bottom: none; } +.task-item:hover { background-color: var(--background-light); } +.task-item:hover .task-actions { opacity: 1; } + +.task-content { display: flex; align-items: center; gap: 0.75rem; } +.task-content label { cursor: pointer; } +.task-item.completed label { text-decoration: line-through; color: var(--text-muted); } + + +.task-content input[type="checkbox"] { + appearance: none; + width: 20px; + height: 20px; + border: 2px solid var(--border-color); + border-radius: 50%; + cursor: pointer; + position: relative; + transition: var(--default-transition); +} +.task-content input[type="checkbox"]:checked { + background-color: var(--primary-color); + border-color: var(--primary-color); +} +.task-content input[type="checkbox"]:checked::after { + content: '✔'; + font-size: 12px; + color: white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.task-details { display: flex; align-items: center; gap: 1rem; color: var(--text-muted); } +.priority { font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 12px; color: var(--background-white); } +.priority.high { background-color: var(--high-priority); } +.priority.medium { background-color: var(--medium-priority); } +.priority.low { background-color: var(--low-priority); } + +.task-actions { display: flex; gap: 0.5rem; opacity: 0; transition: opacity 0.2s; } +.icon-btn { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--text-muted); } +.icon-btn:hover { color: var(--text-color); } + + +.modal-overlay { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-content { + background-color: var(--background-white); + padding: 2rem; + border-radius: var(--border-radius-lg); + box-shadow: 0 5px 15px rgba(0,0,0,0.3); + width: 90%; + max-width: 450px; +} + +.modal-content h2 { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.75rem; } +.form-group { margin-bottom: 1.25rem; } +.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; } +.form-group input, .form-group select { width: 100%; padding: 0.75rem; } + +.form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 2rem; } +.cancel-btn { background-color: var(--background-light); border-color: var(--border-color); color: var(--text-color); } +.cancel-btn:hover { background-color: #e2e6ea; } \ No newline at end of file