From a6c21d2ac415a80eb0476eec6433d5221b429ad4 Mon Sep 17 00:00:00 2001
From: deemak <deema_k@mail.ru>
Date: Mon, 14 Aug 2023 10:55:11 +0300
Subject: [PATCH] update WS

---
 src/app/simple/simple.component.scss |   2 +-
 src/app/simple/simple.component.svg  | 120 +++++++++++++++++----------
 2 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/src/app/simple/simple.component.scss b/src/app/simple/simple.component.scss
index 3d3f8d2..f6b1511 100644
--- a/src/app/simple/simple.component.scss
+++ b/src/app/simple/simple.component.scss
@@ -16,7 +16,7 @@ image#image1_204_3 {
 }
 
 #username{
-  font-size: 60px;
+  font-size: 100px;
 }
 
 @keyframes fadeIn {
diff --git a/src/app/simple/simple.component.svg b/src/app/simple/simple.component.svg
index 6cafaab..94e31a3 100644
--- a/src/app/simple/simple.component.svg
+++ b/src/app/simple/simple.component.svg
@@ -1,72 +1,102 @@
-<svg width="1961" height="328" viewBox="0 0 1961 328" fill="none" xmlns="http://www.w3.org/2000/svg"
+<svg width="1924" height="171" viewBox="0 0 1924 171" fill="none" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="auction-models" filter="url(#filter0_d_204_3)">
-        <g id="Rectangle 6" filter="url(#filter1_b_204_3)">
-            <rect x="38" y="13.45" width="1885" height="251.55" rx="36" fill="white" fill-opacity="0.6"/>
-            <rect x="40.5" y="15.95" width="1880" height="246.55" rx="33.5" stroke="url(#paint0_linear_204_3)"
-                  stroke-width="5"/>
+    <g id="auction-frame" clip-path="url(#clip0_313_2)" filter="url(#filter0_b_313_2)">
+        <g *ngIf="liveData?.username != ''" id="username" filter="url(#filter1_di_313_2)">
+            <text id="username" fill="#5438FF" stroke="white" stroke-width="3" xml:space="preserve"
+                  style="white-space: pre" font-family="Inter" font-size="100" font-weight="600"
+                  letter-spacing="-0.025em"><tspan x="810" y="125">{{liveData.userName}}</tspan></text>
         </g>
-        <g id="values">
-            <text *ngIf="liveData?.username != ''" id="username" fill="#6441A5" xml:space="preserve" style="white-space: pre" font-family="Inter"
-                  font-size="50" font-weight="bold" letter-spacing="0em"><tspan x="1427.76" y="178.682">{{liveData.userName}}</tspan></text>
-            <text *ngIf="liveData?.coins != ''" id="coin-value" fill="#6441A5" xml:space="preserve" style="white-space: pre" font-family="Inter"
-                  font-size="85" font-weight="bold" letter-spacing="0em"><tspan x="770" y="196.409">{{liveData.rewardCost}}</tspan></text>
-            <text *ngIf="liveData?.time != ''" id="time-value" fill="#5B28BB" fill-opacity="0.9" xml:space="preserve" style="white-space: pre"
-                  font-family="Inter" font-size="85" font-weight="bold" letter-spacing="0em"><tspan x="224" y="195.409">{{displayTime}}</tspan></text>
+        <g *ngIf="liveData?.rewardCost != ''" id="coin-group" filter="url(#filter2_di_313_2)">
+            <text id="coin-value" fill="#5438FF" stroke="white" stroke-width="3" xml:space="preserve"
+                  style="white-space: pre" font-family="Inter" font-size="100" font-weight="bold"
+                  letter-spacing="-0.025em"><tspan x="505" y="123.864">{{liveData.rewardCost}}</tspan></text>
         </g>
-        <g id="auctuon-name">
-            <text id="name-value" fill="url(#paint1_linear_204_3)" fill-opacity="0.9" xml:space="preserve"
-                  style="white-space: pre" font-family="Inter" font-size="85" font-weight="bold" letter-spacing="0em"><tspan x="777" y="95.4091">AUCTION</tspan></text>
-            <path id="Line 2" d="M770 57.5L73 57.5" stroke="#6441A5" stroke-width="5" stroke-linecap="round"/>
-            <path id="Line 3" d="M1887 57.5L1190 57.5" stroke="#6441A5" stroke-width="5" stroke-linecap="round"/>
+        <g id="coin-img-group">
+            <mask id="mask0_313_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="392" y="37" width="100"
+                  height="100">
+                <g id="clip1_20_36">
+                    <path id="Vector" d="M492 37H392V137H492V37Z" fill="white"/>
+                </g>
+            </mask>
+            <g mask="url(#mask0_313_2)">
+                <rect id="dcoin" x="392" y="36" width="100" height="100" fill="url(#pattern0)"/>
+            </g>
+        </g>
+        <g *ngIf="liveData?.time != ''"  id="time-group" filter="url(#filter3_di_313_2)">
+            <text id="time-value" fill="#5438FF" stroke="white" stroke-width="3" xml:space="preserve"
+                  style="white-space: pre" font-family="Inter" font-size="100" font-weight="600"
+                  letter-spacing="-0.065em"><tspan x="97" y="124.864">{{displayTime}}</tspan></text>
         </g>
-        <rect id="dcoin" x="650" y="114" width="100" height="100" fill="url(#pattern0)"/>
     </g>
     <defs>
-        <filter id="filter0_d_204_3" x="0" y="0.449951" width="1961" height="327.55" filterUnits="userSpaceOnUse"
+        <filter id="filter0_b_313_2" x="-10" y="-10" width="1944" height="191" filterUnits="userSpaceOnUse"
                 color-interpolation-filters="sRGB">
             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="5"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_313_2"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_313_2" result="shape"/>
+        </filter>
+        <filter id="filter1_di_313_2" x="808.037" y="-9.88208" width="982.154" height="177.948"
+                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                            result="hardAlpha"/>
-            <feMorphology radius="12" operator="erode" in="SourceAlpha" result="effect1_dropShadow_204_3"/>
-            <feOffset dy="25"/>
+            <feOffset/>
             <feGaussianBlur stdDeviation="25"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.741176 0 0 0 0 0 0 0 0 0 1 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_2"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_313_2" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                           result="hardAlpha"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_204_3"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_204_3" result="shape"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_313_2"/>
         </filter>
-        <filter id="filter1_b_204_3" x="8" y="-16.55" width="1945" height="311.55" filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB">
+        <filter id="filter2_di_313_2" x="460.078" y="0.27832" width="404.205" height="175.32"
+                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feGaussianBlur in="BackgroundImageFix" stdDeviation="15"/>
-            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_204_3"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_204_3" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                           result="hardAlpha"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="25"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.741176 0 0 0 0 0 0 0 0 0 1 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_2"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_313_2" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                           result="hardAlpha"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_313_2"/>
         </filter>
         <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-            <use xlink:href="#image0_204_3" transform="scale(0.00195312)"/>
+            <use xlink:href="#image0_313_2" transform="scale(0.00195312)"/>
         </pattern>
-        <filter id="filter2_i_204_3" x="93" y="114" width="100" height="104" filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB">
+        <filter id="filter3_di_313_2" x="52.3267" y="1.27832" width="359.139" height="175.107"
+                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                           result="hardAlpha"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="25"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.741176 0 0 0 0 0 0 0 0 0 1 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_2"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_313_2" result="shape"/>
             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                            result="hardAlpha"/>
             <feOffset dy="4"/>
             <feGaussianBlur stdDeviation="2"/>
             <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_204_3"/>
+            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_313_2"/>
         </filter>
-        <linearGradient id="paint0_linear_204_3" x1="38" y1="13.45" x2="103.961" y2="507.741"
-                        gradientUnits="userSpaceOnUse">
-            <stop stop-color="#F2F4F7"/>
-            <stop offset="1" stop-color="#D0D5DD"/>
-        </linearGradient>
-        <linearGradient id="paint1_linear_204_3" x1="983.5" y1="13" x2="983" y2="114" gradientUnits="userSpaceOnUse">
-            <stop offset="0.5625" stop-color="#4B1F9D"/>
-            <stop offset="1" stop-color="#6441A5" stop-opacity="0"/>
-        </linearGradient>
-        <image *ngIf="liveData?.rewardCost != ''" id="image0_204_3" data-name="deema_k" width="512" height="512"
-               [attr.xlink:href]="liveData?.rewardImage"/>
+        <clipPath id="clip0_313_2">
+            <rect width="1924" height="171" fill="white"/>
+        </clipPath>
+        <image id="image0_313_2" data-name="deema_k (4).png" width="512" height="512" [attr.xlink:href]="liveData?.rewardImage"/>
     </defs>
 </svg>