fix 11e4

javascript/JS_Esercizi 11 - API/04_todo_app_crud/style.css

@@ -33,18 +33,28 @@ h1 {
     font-size: 1rem;
 }
 
-.config-box, .add-todo-box {
+.config-box,
+.add-todo-box {
     background: #f9f9f9;
     padding: 20px;
     border-radius: 10px;
     margin-bottom: 25px;
 }
 
-.config-box label, .add-todo-box label {
+.config-box h2,
+.add-todo-box h2 {
+    color: #333;
+    margin: 0 0 15px 0;
+    font-size: 1.1rem;
+}
+
+.config-box label,
+.add-todo-box label {
     display: block;
     color: #555;
     font-weight: 600;
     margin-bottom: 10px;
+    font-size: 0.95rem;
 }
 
 .input-group {
@@ -54,7 +64,7 @@ h1 {
 
 .input-group input {
     flex: 1;
-    padding: 12px;
+    padding: 10px;
     border: 2px solid #ddd;
     border-radius: 6px;
     font-size: 15px;
@@ -64,6 +74,7 @@ h1 {
 .input-group input:focus {
     outline: none;
     border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
 }
 
 .input-group button {
@@ -74,6 +85,8 @@ h1 {
     border-radius: 6px;
     font-weight: bold;
     cursor: pointer;
+    transition: background 0.2s;
+    font-size: 15px;
 }
 
 .input-group button:hover {
@@ -82,8 +95,9 @@ h1 {
 
 .loading {
     text-align: center;
-    color: white;
-    font-si#666
+    color: #666;
+    font-size: 1rem;
+    padding: 30px;
     animation: pulse 1s infinite;
 }
 
@@ -93,40 +107,42 @@ h1 {
 }
 
 .counter {
-    background: rgba(255, 255, 255, 0.2);
-    color: white;
-    padding: 15p#f0f0f0;
+    background: #f0f8ff;
     color: #333;
-    padding: 12px;
+    padding: 15px;
     border-radius: 6px;
     margin-bottom: 20px;
-    font-weight: bold;
-    text-align: center
+    font-weight: 500;
+    text-align: center;
+    border-left: 4px solid #007bff;
+}
+
 .todos-container {
     display: flex;
     flex-direction: column;
     gap: 12px;
-    margin-bottom: 50px;
-}0px;
-    margin-bottom: 3
+    margin-bottom: 30px;
+}
+
 .todo-item {
     background: white;
-    padding: 15p#f9f9f9;
-    padding: 12px;
+    padding: 15px;
     border-radius: 6px;
     display: flex;
     gap: 12px;
     align-items: center;
     border-left: 4px solid #007bff;
-    animation: slideIn 0.2s ease-out
+    animation: slideIn 0.2s ease-out;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
 
 .todo-item.completed {
     background: #f5f5f5;
-    border-left-color: #4caf50;
+    border-left-color: #28a745;
     opacity: 0.7;
-}0f0f0;
-    opacity: 0.7;
-    border-left-color: #28a745eted .todo-title {
+}
+
+.todo-item.completed .todo-title {
     text-decoration: line-through;
     color: #999;
 }
@@ -136,7 +152,7 @@ h1 {
         opacity: 0;
         transform: translateX(-20px);
     }
-    to {1
+    to {
         opacity: 1;
         transform: translateX(0);
     }
@@ -149,8 +165,8 @@ h1 {
 .todo-checkbox input {
     width: 20px;
     height: 20px;
-    cursor:18px;
-    height: 18
+    cursor: pointer;
+}
 
 .todo-content {
     flex: 1;
@@ -159,51 +175,51 @@ h1 {
 .todo-title {
     color: #333;
     font-weight: 500;
-    font-size: 1em;
-    margin-bottom: 4px;
-}margin: 0
-.todo-id {
-    color: #999;
-    font-size: 0.8em;
+    font-size: 1rem;
+    margin: 0 0 4px 0;
 }
 
-.btn-delete {rem;
-    margin: 2px 0 0 0
-    padding: 8px 12px;
-    background: #fee;
-    color: #c6px 10px;
+.todo-id {
+    color: #999;
+    font-size: 0.8rem;
+    margin: 0;
+}
+
+.btn-delete {
+    padding: 6px 12px;
     background: #fee;
     color: #c00;
     border: 1px solid #fcc;
     border-radius: 4px;
     cursor: pointer;
-    font-weight: 500
+    font-weight: 500;
+    transition: background 0.2s;
+}
 
 .btn-delete:hover {
     background: #fcc;
     color: #800;
+}
 
 .empty {
     background: white;
     color: #999;
-    padding: 40p#f0f0f0;
-    color: #999;
     padding: 30px;
     text-align: center;
     border-radius: 6px;
-    border: 1
+    border: 1px solid #eee;
+}
+
 .error {
     background: #fee;
     color: #c00;
     padding: 15px;
-    border-radius: 8px;
+    border-radius: 6px;
     border-left: 4px solid #c00;
-    font-weight: 506px;
-    border-left: 4px solid #c
+    font-weight: 500;
+}
+
 .instructions {
-    background: rgba(255, 255, 255, 0.95);
-    padding: 25px;
-    border-ra-box {
     background: #f9f9f9;
     padding: 20px;
     border-radius: 10px;
@@ -211,29 +227,30 @@ h1 {
     margin-top: 30px;
 }
 
-.instructions-box h2 {
+.instructions h2 {
     color: #333;
     margin: 0 0 15px 0;
     font-size: 1.1rem;
 }
 
-.instructions-box h3 {
+.instructions h3 {
     color: #555;
     margin: 15px 0 10px 0;
     font-size: 1rem;
 }
 
-.instructions-box ol, .instructions-box ul {
+.instructions ol,
+.instructions ul {
     margin-left: 20px;
     color: #555;
     line-height: 1.7;
 }
 
-.instructions-box li {
+.instructions li {
     margin-bottom: 8px;
 }
 
-.instructions-box code {
+.instructions code {
     background: white;
     padding: 2px 5px;
     border-radius: 3px;
@@ -242,25 +259,6 @@ h1 {
     font-size: 0.9em;
 }
 
-.hint {
-    background: white;
-    border: 1px solid #ddd;
-    padding: 15px;
-    border-radius: 6px;
-    margin-top: 15px;
+.nascosto {
+    display: none;
 }
-
-.hint strong {
-    color: #007bff;
-    display: block;
-    margin-bottom: 10px;
-}
-
-.hint pre {
-    background: #f0f0f0;
-    padding: 10px;
-    border-radius: 4px;
-    overflow-x: auto;
-    font-size: 0.8em;
-    color: #333;
-    margin: 0