Update style.css

style.css

@@ -1,46 +1,64 @@
 :root {
-    --primary-color: #3498db;
-    --secondary-color: #2980b9;
-    --background-color: #f5f7fa;
-    --card-color: #ffffff;
-    --text-color: #333333;
-    --border-color: #e0e0e0;
-    --slider-color: #3498db;
-    --button-hover: #2c3e50;
+    --primary-color: #4a6bff;
+    --secondary-color: #6c757d;
+    --dark-color: #343a40;
+    --light-color: #f8f9fa;
+    --border-color: #dee2e6;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 * {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
 }
 
 body {
     font-family: 'Roboto', sans-serif;
-    background-color: var(--background-color);
-    color: var(--text-color);
     line-height: 1.6;
+    color: #333;
+    background-color: #f5f7fa;
     padding: 20px;
 }
 
 .container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 20px;
-    background-color: var(--card-color);
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background: white;
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+    padding: 25px;
+    overflow: hidden;
 }
 
 h1 {
-    text-align: center;
-    margin-bottom: 30px;
+    color: var(--dark-color);
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+h1 i {
     color: var(--primary-color);
 }
 
+h3 {
+    margin: 15px 0 10px;
+    color: var(--dark-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+h3 i {
+    color: var(--primary-color);
+    font-size: 0.9em;
+}
+
 .upload-section {
+    margin-bottom: 25px;
     text-align: center;
-    margin-bottom: 30px;
 }
 
 #image-upload {
@@ -49,16 +67,22 @@ h1 {
 
 .upload-btn {
     display: inline-block;
-    padding: 12px 24px;
+    padding: 10px 20px;
     background-color: var(--primary-color);
     color: white;
-    border-radius: 5px;
+    border-radius: 4px;
     cursor: pointer;
-    transition: background-color 0.3s;
+    transition: all 0.3s ease;
+    font-weight: 500;
 }
 
 .upload-btn:hover {
-    background-color: var(--secondary-color);
+    background-color: #3a56d4;
+    transform: translateY(-2px);
+}
+
+.upload-btn i {
+    margin-right: 8px;
 }
 
 .editor-container {
@@ -71,27 +95,28 @@ h1 {
     flex: 1;
     min-width: 300px;
     border: 1px solid var(--border-color);
-    border-radius: 5px;
+    border-radius: 4px;
     overflow: hidden;
-    background-color: #f0f0f0;
+    background: #f0f0f0;
     display: flex;
     justify-content: center;
     align-items: center;
+    min-height: 300px;
 }
 
 #image-canvas {
     max-width: 100%;
-    max-height: 500px;
+    max-height: 600px;
     display: block;
 }
 
 .controls {
     flex: 1;
     min-width: 300px;
-    padding: 20px;
-    background-color: var(--card-color);
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    padding: 15px;
+    background: var(--light-color);
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
 }
 
 .control-group {
@@ -102,12 +127,8 @@ h1 {
 
 .control-group:last-child {
     border-bottom: none;
-}
-
-.control-group h3 {
-    margin-bottom: 15px;
-    color: var(--primary-color);
-    font-weight: 500;
+    margin-bottom: 0;
+    padding-bottom: 0;
 }
 
 .slider-control {
@@ -117,15 +138,15 @@ h1 {
 .slider-control label {
     display: block;
     margin-bottom: 5px;
-    font-weight: 400;
+    font-weight: 500;
 }
 
 .slider-control input[type="range"] {
     width: 100%;
     height: 8px;
     -webkit-appearance: none;
-    background: #e0e0e0;
-    border-radius: 5px;
+    background: #ddd;
+    border-radius: 4px;
     outline: none;
     margin-bottom: 5px;
 }
@@ -134,7 +155,7 @@ h1 {
     -webkit-appearance: none;
     width: 18px;
     height: 18px;
-    background: var(--slider-color);
+    background: var(--primary-color);
     border-radius: 50%;
     cursor: pointer;
 }
@@ -143,25 +164,88 @@ h1 {
     display: inline-block;
     width: 40px;
     text-align: right;
+    font-weight: 500;
+}
+
+.hsl-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.hsl-slider label {
+    display: block;
+    margin-bottom: 5px;
     font-size: 0.9em;
-    color: #666;
 }
 
-.action-btn {
-    display: inline-block;
+.hsl-slider input[type="range"] {
+    width: 100%;
+}
+
+.curve-controls {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+
+.curve-container {
+    flex: 1;
+    min-width: 150px;
+    text-align: center;
+}
+
+.curve-container canvas {
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: white;
+    margin-bottom: 5px;
+}
+
+.curve-container label {
+    font-size: 0.9em;
+    color: var(--secondary-color);
+}
+
+.action-buttons {
+    display: flex;
+    gap: 15px;
+    margin-top: 25px;
+}
+
+.btn {
     padding: 10px 20px;
-    margin-right: 10px;
-    margin-top: 10px;
-    background-color: var(--primary-color);
-    color: white;
     border: none;
-    border-radius: 5px;
+    border-radius: 4px;
     cursor: pointer;
-    transition: background-color 0.3s;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.btn i {
+    font-size: 0.9em;
+}
+
+.btn.primary {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.btn.primary:hover {
+    background-color: #3a56d4;
 }
 
-.action-btn:hover {
-    background-color: var(--button-hover);
+.btn:not(.primary) {
+    background-color: var(--light-color);
+    color: var(--secondary-color);
+    border: 1px solid var(--border-color);
+}
+
+.btn:not(.primary):hover {
+    background-color: #e9ecef;
 }
 
 @media (max-width: 768px) {
@@ -172,4 +256,12 @@ h1 {
     .image-preview, .controls {
         min-width: 100%;
     }
+    
+    .curve-controls {
+        flex-direction: column;
+    }
+    
+    .curve-container {
+        min-width: 100%;
+    }
 }