diff --git a/hw/hw7/hw7.css b/hw/hw7/hw7.css index 6f8d92f..1147490 100644 --- a/hw/hw7/hw7.css +++ b/hw/hw7/hw7.css @@ -1,22 +1,35 @@ .desctription-heading{ - display: block; - justify-self: center; - grid-area: 1/12/ 1 / 1; + font-size: medium; + text-align: center; +} + +.main-container { + display: flex; + gap: 20px; + align-items: flex-start; } .scheme-image{ - grid-area: 2/1/6/5; - width: 100%; + flex: 1; + max-width: 400px; + height: auto; + object-fit: contain; } -.inputs{ - grid-area: 2/5/3/6; + +.controls-container { + display: flex; + flex-direction: column; + gap: 20px; + flex: 1; + min-width: 300px; + max-width: 400px; +} + +.inputs{ min-width: 300px; - max-width: 300px; } .outputs{ - grid-area: 3/5/4/6; min-width: 300px; - max-width: 300px; } .radio-label{ display: inline-block; @@ -26,7 +39,7 @@ p{ line-height: 0; } .max-w{ - width: 80%; + width: 100%; } .bad-input-tooltip { @@ -47,8 +60,49 @@ p{ display: none; } body{ - display: grid; + display: flex; + flex-direction: column; gap: 20px; - grid-template-columns: repeat(12,1fr); - grid-template-rows:repeat(6,min-content) ; +} + +table { + width: 100%; + border-collapse: collapse; + margin: 16px 0; +} + +th, td { + border: 1px solid #ccc; + text-align: left; +} + +th { + background-color: #f5f5f5; + font-weight: bold; +} + +tr:nth-child(even) { + background-color: #fafafa; +} + +@media (max-width: 800px) { + .main-container { + flex-direction: column; + align-items: center; + } + + .scheme-image { + max-width: 100%; + width: 100%; + } + + .controls-container { + width: 100%; + max-width: none; + } + + .inputs, .outputs { + min-width: unset; + width: 100%; + } } diff --git a/hw/hw7/hw7.html b/hw/hw7/hw7.html index 50f4ef8..52eb4ad 100644 --- a/hw/hw7/hw7.html +++ b/hw/hw7/hw7.html @@ -10,53 +10,60 @@

калькулятор равнобедренного треугольника

- - + +
+
+ + +
-
-

Выберете варинат входных данных:

- -
- - -
-
- входные данные -
- -
-
- -
- -
- что вычислить - - -
- -
- -
-
- - -
+
+
+

Выберете варинат входных данных:

+ +
+ + +
+
+ входные данные +
+ +
+
+ +
+ +
+ что вычислить + + +
+ +
+ +
+
+ + +
+
+ + + +
- - - diff --git a/hw/hw7/hw7.js b/hw/hw7/hw7.js index 30459e0..10d6126 100644 --- a/hw/hw7/hw7.js +++ b/hw/hw7/hw7.js @@ -166,19 +166,19 @@ function displayTable(calcResults) { let table = elements.outputsTable; table.innerHTML = ""; // Clear previous content - let header = "ParameterValue"; + let header = "ПараметрЗначение"; let rows = ""; if (outputFields.radius) { - rows += `Radius${calcResults.radius.toFixed(3)}`; + rows += `R${calcResults.radius.toFixed(3)}`; } if (outputFields.heights) { - rows += `Height 1${calcResults.heights[0].toFixed(3)}`; - rows += `Height 2${calcResults.heights[1].toFixed(3)}`; + rows += `h1${calcResults.heights[0].toFixed(3)}`; + rows += `h2${calcResults.heights[1].toFixed(3)}`; } if (outputFields.lengths) { - rows += `Length 1${calcResults.lengths[0].toFixed(3)}`; - rows += `Length 2${calcResults.lengths[1].toFixed(3)}`; + rows += `A${calcResults.lengths[0].toFixed(3)}`; + rows += `B${calcResults.lengths[1].toFixed(3)}`; } table.innerHTML = header + rows;