From 1ea94b9ef338f58c6b43ed50d77b3a4d0b251cf6 Mon Sep 17 00:00:00 2001
From: Pavel Gordienko <guzmo@yandex.ru>
Date: Sun, 22 Sep 2024 07:08:52 +0300
Subject: [PATCH] feat: add player template

---
 app/public/assets/button-download.png | Bin 0 -> 192 bytes
 app/public/assets/button-play.png     | Bin 0 -> 162 bytes
 app/src/pages/AppPage.css             |  44 ++++++++++++++++++++++++--
 app/src/pages/AppPage.tsx             |  21 +++++++++---
 4 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 app/public/assets/button-download.png
 create mode 100644 app/public/assets/button-play.png

diff --git a/app/public/assets/button-download.png b/app/public/assets/button-download.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ab5e89d624701bb4d72ff626be91107fca438d4
GIT binary patch
literal 192
zcmeAS@N?(olHy`uVBq!ia0vp@KrFz)1|-ie{%Q%NSc;uILpXq-h9ji|$S?PFaSYLz
zcy`i3-UbC8*ZR(G3r>TU-#hpV+jeozULY<#n@iAE;(qU?>l5NRx{g>{G$d*`%z3oq
z)Xkf1a&>yVoy7sdHOZU&=lH+Wh!ZkC^Jxi_3)8K@XqBo-hvu#*cm1`fd}oUEnvB*}
nOODR^pu45u-aN1M`!4dWO3=6ZHMzGR=mZ8&S3j3^P6<r_H6%ul

literal 0
HcmV?d00001

diff --git a/app/public/assets/button-play.png b/app/public/assets/button-play.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9254569e203c8e93b8f6a0a69d556fec4fd1647
GIT binary patch
literal 162
zcmeAS@N?(olHy`uVBq!ia0vp^96-#)!3HEdkIOdzDVAa<&kznEsNqQI0P-U}T^vIs
zrnXMF$lIX6<1*i6+e?9*Wj<`q8+`2_98M5eb1!^$_1+k+MWPp(gT(^`eLLE2mK~O9
zFj=14ac%k?9+$53Vi!tx@fW|`5EEQ;M|ZKla)EgDC;R@aNLvNz?ai^vfR-?Ly85}S
Ib4q9e04iQJCIA2c

literal 0
HcmV?d00001

diff --git a/app/src/pages/AppPage.css b/app/src/pages/AppPage.css
index f49da2b..524ab49 100644
--- a/app/src/pages/AppPage.css
+++ b/app/src/pages/AppPage.css
@@ -83,12 +83,50 @@
 
 .row-score {
   text-align: left;
-  width: 33.9%;
+  width: 12.09%;
 }
 
 .row-length {
-  text-align: right;
-  width: 8.09%;
+  justify-content: flex-end;
+  width: 28.9%;
+}
+
+.row-audio {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  height: 48px;
+  border-radius: 48px;
+  background: rgb(234, 240, 250);
+  margin-right: 20px;
+}
+
+.row-audio-play {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  background: rgb(255, 255, 255);
+  width: 24px;
+  height: 24px;
+}
+
+.row-audio-line {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 164px;
+  height: 4px;
+  border-radius: 50px;
+  background: rgb(173, 191, 223);
+}
+
+.row-audio-download {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 50px;
 }
 
 .rows {
diff --git a/app/src/pages/AppPage.tsx b/app/src/pages/AppPage.tsx
index eccb400..92ef0bd 100644
--- a/app/src/pages/AppPage.tsx
+++ b/app/src/pages/AppPage.tsx
@@ -87,7 +87,18 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">
+              <div className="row-audio">
+                <div>12:06</div>
+                <div className="row-audio-play">
+                  <img src="/assets/button-play.png" alt="play" />
+                </div>
+                <div className="row-audio-line"></div>
+                <div className="row-audio-download">
+                  <img src="/assets/button-download.png" alt="download" />
+                </div>
+              </div>
+            </div>
           </div>
 
           <div className="row">
@@ -107,7 +118,7 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">12:06</div>
           </div>
 
           <div className="row">
@@ -127,7 +138,7 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">12:06</div>
           </div>
 
           <div className="row">
@@ -147,7 +158,7 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">12:06</div>
           </div>
 
           <div className="row">
@@ -167,7 +178,7 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">12:06</div>
           </div>
         </div>
       </div>