break into spearte files

2026-09-21 12:01:23 +03:00
parent a339143292
commit 3752b615a7
3 changed files with 192 additions and 64 deletions
--- a/style.css
+++ b/style.css
@@ -0,0 +1,122 @@
+:root {
+    --bg-color: #f4f7f6;
+    --text-color: #333;
+    --container-bg: white;
+    --header-color: #2c3e50;
+    --label-color: #333;
+    --input-border: #ccc;
+    --result-bg: #eef2f7;
+    --result-border: #3498db;
+    --result-text: #2980b9;
+    --table-header-bg: #f8f9fa;
+    --saving-color: green;
+    --loss-color: red;
+    --shadow-color: rgba(0,0,0,0.1);
+}
+
+.dark-mode {
+    --bg-color: #1a1a1a;
+    --text-color: #f0f0f0;
+    --container-bg: #2d2d2d;
+    --header-color: #ffffff;
+    --label-color: #f0f0f0;
+    --input-border: #555;
+    --result-bg: #3a3a3a;
+    --result-border: #4a90e2;
+    --result-text: #7db4ff;
+    --table-header-bg: #333;
+    --saving-color: #4caf50;
+    --loss-color: #f44336;
+    --shadow-color: rgba(255,255,255,0.1);
+}
+
+body { 
+    font-family: sans-serif; 
+    margin: 20px; 
+    background-color: var(--bg-color); 
+    color: var(--text-color); 
+    transition: background-color 0.3s, color 0.3s;
+}
+.container { 
+    max-width: 800px; 
+    margin: auto; 
+    background: var(--container-bg); 
+    padding: 20px; 
+    border-radius: 8px; 
+    box-shadow: 0 2px 10px var(--shadow-color); 
+    transition: background-color 0.3s, color 0.3s;
+}
+h2 { 
+    color: var(--header-color); 
+    text-align: center; 
+    transition: color 0.3s;
+}
+.input-grid { 
+    display: grid; 
+    grid-template-columns: 1fr 1fr; 
+    gap: 20px; 
+    margin-bottom: 20px; 
+}
+.input-group { 
+    display: flex; 
+    flex-direction: column; 
+}
+label { 
+    font-size: 0.9rem; 
+    margin-bottom: 5px; 
+    font-weight: bold;
+    color: var(--label-color);
+}
+input { 
+    padding: 8px; 
+    border: 1px solid var(--input-border); 
+    border-radius: 4px; 
+    font-size: 1rem;
+    background: var(--container-bg);
+    color: var(--text-color);
+}
+.result-box { 
+    background: var(--result-bg); 
+    padding: 15px; 
+    border-radius: 8px; 
+    margin-bottom: 20px; 
+    text-align: center; 
+    border-left: 5px solid var(--result-border); 
+}
+.result-box b { 
+    color: var(--result-text); 
+    font-size: 1.2rem; 
+}
+table { 
+    width: 100%; 
+    border-collapse: collapse; 
+    margin-top: 20px; 
+}
+th, td { 
+    border: 1px solid var(--input-border); 
+    padding: 12px; 
+    text-align: center; 
+}
+th { 
+    background-color: var(--table-header-bg); 
+}
+.saving { 
+    color: var(--saving-color); 
+    font-weight: bold; 
+}
+.loss { 
+    color: var(--loss-color); 
+    font-weight: bold; 
+}
+.theme-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: var(--container-bg);
+    border: 1px solid var(--input-border);
+    color: var(--text-color);
+    padding: 10px 15px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}