0.0.2

static/css/background_for_table_1.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="102.923mm" height="58.2084mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 15844.29 8960.78"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:url(#id0);fill-rule:nonzero}
+    .fil1 {fill:url(#id1);fill-rule:nonzero}
+   ]]>
+  </style>
+  <radialGradient id="id0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.06138 -0.543579 1.309 -2.55591 22256 31038)" cx="14893.63" cy="6451.76" r="7922.15" fx="14893.63" fy="6451.76">
+   <stop offset="0" style="stop-opacity:1; stop-color:#B41B92"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:black"/>
+  </radialGradient>
+  <radialGradient id="id1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.193265 -1.20954 2.20442 0.352231 -19974 7245)" cx="950.66" cy="9408.82" r="5862.39" fx="950.66" fy="9408.82">
+   <stop offset="0" style="stop-opacity:1; stop-color:#5E1BB4"/>
+   <stop offset="1" style="stop-opacity:0; stop-color:#5E1BB4"/>
+   <stop offset="1" style="stop-opacity:0; stop-color:#5E1BB4"/>
+  </radialGradient>
+ </defs>
+ <g id="Слой_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M814.62 0l14215.05 0c449.82,0 814.62,364.8 814.62,814.62l0 7331.54c0,449.81 -364.8,814.61 -814.62,814.61l-14215.05 0.02c-449.81,-0.02 -814.61,-364.81 -814.61,-814.64l-0.02 -7331.53c0.02,-449.82 364.81,-814.62 814.64,-814.62z"/>
+  <path class="fil1" d="M814.62 0l14215.05 0c449.82,0 814.62,364.8 814.62,814.62l0 7331.54c0,449.81 -364.8,814.61 -814.62,814.61l-14215.05 0.02c-449.81,-0.02 -814.61,-364.81 -814.61,-814.64l-0.02 -7331.53c0.02,-449.82 364.81,-814.62 814.64,-814.62z"/>
+ </g>
+</svg>

static/css/background_for_table_2.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="102.923mm" height="58.2084mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 19207.88 10863.07"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:url(#id0);fill-rule:nonzero}
+    .fil1 {fill:url(#id1);fill-rule:nonzero}
+   ]]>
+  </style>
+  <radialGradient id="id0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0594644 -1.4085 2.54898 0.107614 -27990 11802)" cx="1152.48" cy="11406.22" r="9603.94" fx="1152.48" fy="11406.22">
+   <stop offset="0" style="stop-opacity:1; stop-color:#6BFFFF"/>
+   <stop offset="1" style="stop-opacity:0; stop-color:#5E1BB4"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#5E1BB4"/>
+  </radialGradient>
+  <radialGradient id="id1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.842837 -0.653441 1.5085 -1.94573 16375 39079)" cx="16710.85" cy="9559.5" r="9603.94" fx="16710.85" fy="9559.5">
+   <stop offset="0" style="stop-opacity:1; stop-color:#96FD65"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:black"/>
+  </radialGradient>
+ </defs>
+ <g id="Слой_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M987.56 0l17232.76 0c545.31,0 987.56,442.24 987.56,987.56l0 8887.96c0,545.3 -442.24,987.54 -987.56,987.54l-17232.76 0.02c-545.3,-0.02 -987.54,-442.26 -987.54,-987.58l-0.02 -8887.94c0.02,-545.31 442.26,-987.56 987.58,-987.56z"/>
+  <path class="fil1" d="M987.56 0l17232.76 0c545.31,0 987.56,442.24 987.56,987.56l0 8887.96c0,545.3 -442.24,987.54 -987.56,987.54l-17232.76 0.02c-545.3,-0.02 -987.54,-442.26 -987.54,-987.58l-0.02 -8887.94c0.02,-545.31 442.26,-987.56 987.58,-987.56z"/>
+ </g>
+</svg>

static/css/firegame_css.css

@@ -88,26 +88,98 @@ h1{
     width: 100%;
 }
 
+.level-border-1{
+    border: 4px solid #C7A4FF;
+}
+
+.level-border-2{
+    border: 4px solid #6BFFFF;
+}
+
 .level-cont{
     border-radius: 20px;
-    border: 4px solid #C7A4FF;
+    background: rgba(255, 255, 255, 0.15);
-    opacity: 0.699999988079071;
+    width: 390px;
+    height: 220px;
+    margin-left: 45px;
+}
+
+.level-cont:first-of-type{
+    margin-left: 0;
+    border-radius: 20px;
     background: rgba(255, 255, 255, 0.15);
     width: 390px;
     height: 220px;
 }
 
-.level-grad-1{
+.level-background-1{
-    /*background: radial-gradient(88.47% 79.48% at 5.97% 105.30%, #5E1BB4 0%, rgba(94, 27, 180, 0.00) 99.78%);*/
+    background-image: url("background_for_table_1.svg") ;
-    background: radial-gradient(45.47% 85.48% at 7.97% 105.3%, #5E1BB4 0%, rgba(94, 27, 180, 0.00) 99.78%);
-    height: 100%;
-    width: 100%;
-    border-radius: 20px;
 }
 
-.level-grad-2{
+.level-background-2{
+    background-image: url("background_for_table_2.svg") ;
+}
+
+
+.container-background-level{
+
     height: 100%;
     width: 100%;
-    border-radius: 20px;
-    background: radial-gradient(246.21% 71.62% at 94.36% 72.44%, #B41B92 0%, #000 100%);
 }
+
+.container-content-level{
+    width: calc(100% - 36px);
+    height: calc(100% - 43px);
+    padding: 33px 18px 10px 18px;
+}
+
+.container-content-level h2{
+    color: #FFFFFF;
+    margin: 0;
+    height: 72%;
+}
+
+.bottom-part_w{
+    width: 100%;
+}
+
+.description-level-card{
+    color: rgba(255, 255, 255, 0.68);
+    font-family: 'Inter';
+    font-size: 16px;
+    width: fit-content;
+    float: left;
+}
+
+.description-level-card span:first-of-type{
+    color: rgba(255, 255, 255, 0.68);
+    font-family: 'Inter';
+    font-size: 18px;
+    width: fit-content;
+    float: left;
+}
+
+.button-level-card{
+    width: fit-content;
+    float: right;
+}
+
+.button-level-card button{
+    width: 130px;
+    height: 30px;
+    border-radius: 20px;
+    background: #FFF;
+    font-family: 'Montserrat';
+    font-size: 18px;
+    font-weight: 500;
+    border: none;
+}
+
+.color-button-level-card-1{
+    color: #8D2C78;
+}
+
+.color-button-level-card-2{
+    color: #7FB47B;
+}
+

static/images/p_table/background_for_table.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="102.923mm" height="58.2084mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 15844.29 8960.78"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:url(#id0);fill-rule:nonzero}
+    .fil1 {fill:url(#id1);fill-rule:nonzero}
+   ]]>
+  </style>
+  <radialGradient id="id0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.06138 -0.543579 1.309 -2.55591 22256 31038)" cx="14893.63" cy="6451.76" r="7922.15" fx="14893.63" fy="6451.76">
+   <stop offset="0" style="stop-opacity:1; stop-color:#B41B92"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:black"/>
+  </radialGradient>
+  <radialGradient id="id1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.193265 -1.20954 2.20442 0.352231 -19974 7245)" cx="950.66" cy="9408.82" r="5862.39" fx="950.66" fy="9408.82">
+   <stop offset="0" style="stop-opacity:1; stop-color:#5E1BB4"/>
+   <stop offset="1" style="stop-opacity:0; stop-color:#5E1BB4"/>
+   <stop offset="1" style="stop-opacity:0; stop-color:#5E1BB4"/>
+  </radialGradient>
+ </defs>
+ <g id="Слой_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M814.62 0l14215.05 0c449.82,0 814.62,364.8 814.62,814.62l0 7331.54c0,449.81 -364.8,814.61 -814.62,814.61l-14215.05 0.02c-449.81,-0.02 -814.61,-364.81 -814.61,-814.64l-0.02 -7331.53c0.02,-449.82 364.81,-814.62 814.64,-814.62z"/>
+  <path class="fil1" d="M814.62 0l14215.05 0c449.82,0 814.62,364.8 814.62,814.62l0 7331.54c0,449.81 -364.8,814.61 -814.62,814.61l-14215.05 0.02c-449.81,-0.02 -814.61,-364.81 -814.61,-814.64l-0.02 -7331.53c0.02,-449.82 364.81,-814.62 814.64,-814.62z"/>
+ </g>
+</svg>

templates/pages/choose_table.html

@@ -4,5 +4,6 @@
     <h1>Выберите уровень</h1>
     <div class="block-levels">
         {% include "widgets/w_level.html" %}
+        {% include "widgets/w_level_2.html" %}
     </div>
 {% endblock %}

templates/widgets/w_level.html

@@ -1,13 +1,20 @@
 {% load static %}
-<div class="level-cont">
+<div class="level-cont level-border-1">
-    <div class="level-cont-1">
-        <div class="level-cont-2">
 
-        </div>
+    <div class="container-background-level level-background-1">
-    </div>
         <div class="container-content-level">
             <h2>
                 УРОВЕНЬ 1 <br/> Лёгкий
             </h2>
+            <div class="bottom-part_w">
+                <div class="description-level-card">
+                    <div>Можно выиграть: +150%</div>
+                    <div>Цена входа: 1$</div>
+                </div>
+                <div class="button-level-card">
+                    <button class="color-button-level-card-1">Начать</button>
+                </div>
+            </div>
+        </div>
     </div>
 </div>

templates/widgets/w_level_2.html

@@ -0,0 +1,21 @@
+{% load static %}
+
+<div class="level-cont level-border-2">
+
+    <div class="container-background-level level-background-2">
+        <div class="container-content-level">
+            <h2>
+                УРОВЕНЬ 2 <br/> Средний
+            </h2>
+            <div class="bottom-part_w">
+                <div class="description-level-card">
+                    <div>Можно выиграть: +150%</div>
+                    <div>Цена входа: 1$</div>
+                </div>
+                <div class="button-level-card">
+                    <button class="color-button-level-card-2">Начать</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>