diff --git a/templates/index.html b/templates/index.html index 213b2eb..268c922 100644 --- a/templates/index.html +++ b/templates/index.html @@ -8,29 +8,32 @@ :root { --mac-bg: #f2f2f7; --mac-blue: #007aff; --mac-red: #ff3b30; --mac-green: #34c759; --mac-gray: #8e8e93; } body { font-family: -apple-system, system-ui, sans-serif; background: var(--mac-bg); padding: 20px; font-size: 14px; color: #1c1c1e; } .container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 1200px; margin: auto; } - .panel { background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); border-radius: 12px; padding: 20px; flex: 1; min-width: 320px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } + .panel { background: white; border-radius: 12px; padding: 20px; flex: 1; min-width: 320px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } - table { width: 100%; border-collapse: collapse; margin-bottom: 15px; background: white; border-radius: 8px; overflow: hidden; } - th { padding: 10px; font-size: 14px; color: white; text-transform: uppercase; } - td { padding: 8px; text-align: center; border: 1px solid #e5e5ea; font-size: 14px; } + table { width: 100%; border-collapse: collapse; margin-bottom: 15px; border-radius: 8px; overflow: hidden; } + th { padding: 10px; font-size: 13px; color: white; text-transform: uppercase; letter-spacing: 0.5px; } + td { padding: 8px; text-align: center; border: 1px solid #e5e5ea; font-size: 13px; } .h-blue { background: var(--mac-blue); } .h-red { background: var(--mac-red); } - input { width: 90%; border: 1px solid #d1d1d6; border-radius: 5px; padding: 6px; text-align: center; font-size: 14px; } - select { border: 1px solid #d1d1d6; border-radius: 5px; padding: 5px; } + input { width: 85%; border: 1px solid #d1d1d6; border-radius: 5px; padding: 5px; text-align: center; } + select { border: 1px solid #d1d1d6; border-radius: 5px; padding: 4px; } - .btn { width: 100%; padding: 12px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; margin-top: 10px; font-size: 15px; color: white; text-transform: uppercase; } + .btn { width: 100%; padding: 12px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; margin-top: 10px; font-size: 14px; text-transform: uppercase; color: white; } .btn-calc { background: var(--mac-green); } - .btn-exp { background: #5856d6; } .btn-cups { background: var(--mac-blue); } + .btn-exp { background: #5856d6; } .btn-print { background: #c7c7cc; color: #1c1c1e; } - .res-box { background: white; padding: 15px; border-radius: 10px; border: 1px solid #d1d1d6; line-height: 1.6; } - .res-section h4 { margin: 10px 0 5px 0; text-transform: uppercase; font-size: 12px; color: var(--mac-gray); } - hr { border: 0; border-top: 1px solid #d1d1d6; margin: 15px 0; } - .msg-ok { color: var(--mac-green); font-weight: bold; text-align: center; margin-top: 10px; } - .footer-info { margin-top: 15px; text-align: center; font-size: 10px; color: var(--mac-gray); text-transform: uppercase; } - + .res-box { border: 1px solid #e5e5ea; border-radius: 10px; padding: 15px; } + .res-section h4 { margin: 15px 0 5px 0; font-size: 11px; color: var(--mac-gray); text-transform: uppercase; } + ul { list-style: none; padding: 0; margin: 0; } + li { padding-left: 15px; position: relative; margin-bottom: 3px; } + li::before { content: "•"; position: absolute; left: 0; color: #1c1c1e; } + + hr { border: 0; border-top: 1px solid #e5e5ea; margin: 15px 0; } + .footer { text-align: center; font-size: 10px; color: var(--mac-gray); margin-top: 20px; text-transform: uppercase; } + .msg-ok { color: var(--mac-green); text-align: center; font-weight: bold; margin-top: 10px; } @media print { .no-print { display: none !important; } } @@ -38,34 +41,17 @@