From 714cbc7a3dadec521fc60491f672dfaeb869bab7 Mon Sep 17 00:00:00 2001
From: sync <mick@vikingkong.xyz>
Date: Thu, 26 Sep 2024 21:24:19 +0300
Subject: [PATCH] Create the layout of the rest of the form.

---
 src/App.css | 65 ++++++++++++++++++++++++++++++++++++++++------------
 src/App.jsx | 66 ++++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 108 insertions(+), 23 deletions(-)

diff --git a/src/App.css b/src/App.css
index ac4493d..cd2bb2f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,15 +7,13 @@ body {
   --padding: 4px;
   position: relative;
   padding: var(--padding);
-  border: 1px solid hsl(210deg 10% 40%);
-  border-radius: 8px;
   gap: 8px;
   height: 100vh;
   height: 100svh;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 1rem 1fr;
-  grid-row-gap: 15px;
+  grid-template-rows: 1rem 1rem 1rem 1rem 1rem 1rem;
+  grid-auto-rows: max-content;
 }
 .title_wrapper {
   --padding: 4px;
@@ -26,7 +24,7 @@ body {
   height: 4vh;
   height: 4svh;
   display: grid;
-  grid-area: span 2/span 1;
+  grid-area: 1/1/span 2/span 1;
   grid-template-columns: 1fr;
   grid-template-rows: 1rem 1rem;
   grid-row-gap: 15px;
@@ -35,11 +33,24 @@ body {
   --padding: 4px;
   position: relative;
   padding: var(--padding);
-  border-radius: 8px;
   gap: 8px;
   height: 2vh;
   height: 2svh;
   display: grid;
+  grid-area: 3/1/span 1/span 2;
+  grid-template-columns: 1fr 5fr;
+  grid-template-rows: 1rem;
+  column-gap: 0px;
+}
+.section_wrapper_1 {
+  --padding: 4px;
+  position: relative;
+  padding: var(--padding);
+  gap: 8px;
+  height: 2vh;
+  height: 2svh;
+  display: grid;
+  grid-area: 8/1/span 1/span 1;
   grid-template-columns: 1fr 5fr;
   grid-template-rows: 1rem;
   column-gap: 0px;
@@ -71,30 +82,54 @@ body {
   --padding: 4px;
   position: relative;
   padding: var(--padding);
-  border: 1px solid hsl(210deg 10% 40%);
-  border-radius: 8px;
   gap: 8px;
-  height: 100vh;
-  height: 100svh;
+  height: 45vh;
+  height: 45svh;
   display: grid;
-  grid-template-columns: 1fr 1.5fr 0.5fr 1fr;
-  grid-template-rows: 2rem 2rem 2rem 2rem;
+  grid-area: 4 / 1 / span 6 / span 4;
+  grid-template-columns: 1fr 1.5fr 0.5fr 1.3fr;
+  grid-template-rows: 2rem 2rem 2rem 1rem;
   grid-row-gap: 15px;
 }
-.child {
+.receiver_1 {
+  --padding: 4px;
+  position: relative;
+  padding: var(--padding);
+  gap: 8px;
+  height: 15vh;
+  height: 15svh;
+  display: grid;
+  grid-area: 9 / 1 / span 2 / span 6;
+  grid-template-columns: 15% 1fr 0.2fr 1fr 0.4fr 1fr;
+  grid-template-rows: 1rem 1rem;
+  grid-row-gap: 35px;
+}
+.receiver_2 {
+  --padding: 4px;
+  position: relative;
+  padding: var(--padding);
+  gap: 8px;
+  height: 30vh;
+  height: 30svh;
   display: grid;
+  grid-area: 11 / 1 / span 5 / span 2;
+  grid-template-columns: 15% 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+  grid-row-gap: 5px;
+}
+.child {
+  display: grid1
   margin-bottom: 1px;
   place-content: self-start center;
-  border-radius: 3px;
   background: hsl(0deg 100% 100%);
   color: black;
   font-size: 1.3125rem;
+  /* font-size: 1.3125rem; */
   font-weight: bold;
 }
 .title {
   display: grid;
   place-content: center;
-  border-radius: 3px;
   background: hsl(0deg 100% 100%);
   color: black;
   font-size: 1.3125rem;
diff --git a/src/App.jsx b/src/App.jsx
index dafc691..317d661 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -77,14 +77,7 @@ function App() {
             </select>
           </div>
           <div className="child">ИНН:</div>
-          <div className="child">
-            <input
-              value={payerINN}
-              onChange={(e) => setPayerINN(e.target.value)}
-              onBlur={handleBlur}
-              style={{ maxWidth: '16ch' }}
-            />
-          </div>
+          <div className="child">{payerINN}</div>
           <div className="child">Сумма:</div>
           <div className="child">
             <span>
@@ -109,6 +102,63 @@ function App() {
             </select>
           </div>
         </div>
+        <div className="section_wrapper_1">
+          <div className="section_header">Получатель</div>
+          <div className="section_line"></div>
+        </div>
+        <div className="receiver_1">
+          <div className="child"></div>
+          <div className="child"></div>
+          <div className="child">БИК:</div>
+          <div className="child">
+            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+          </div>
+          <div className="child">№ Корр. счета:</div>
+          <div className="child">
+            <select style={{ maxWidth: '34ch' }}>
+              <option>Выберите значение...</option>
+            </select>
+          </div>
+          <div className="child">Номер счета:</div>
+          <div className="child">
+            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+          </div>
+          <div className="child">ИНН:</div>
+          <div className="child">
+            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+          </div>
+          <div className="child">КПП (103):</div>
+          <div className="child">
+            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+          </div>
+        </div>
+        <div className="receiver_2">
+          <div className="child">Наименование:</div>
+          <div className="child">
+            <input onBlur={handleBlur} style={{ width: '100ch' }} />
+          </div>
+          <div className="child">Банк получателя:</div>
+          <div className="child"></div>
+          <div className="child">Назначение платежа:</div>
+          <div className="child">
+            <textarea
+              style={{
+                height: '60px',
+                width: '133ch',
+              }}
+            />
+          </div>
+          <div className="child">Код вида дохода:</div>
+          <div className="child">
+            <select style={{ width: '102ch' }}>
+              <option></option>
+            </select>
+          </div>
+          <div className="child">Код (УИП) (22):</div>
+          <div className="child">
+            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
+          </div>
+        </div>
       </div>
     </>
   );