yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

added info card in saper-game, saperpage

Browse Source
This commit is contained in:
Kostya
2023-12-04 23:01:54 +03:00
parent 85c88f22b2
commit 479e6b9f4b
4 changed files with 216 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
View File

@@ -250,6 +250,7 @@ input[type="number"]::-webkit-outer-spin-button {
}
.saper-game__content {
display: flex;
border-radius: 20px;
background: #22252F;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
@@ -263,6 +264,7 @@ input[type="number"]::-webkit-outer-spin-button {
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
width: 95px;
height: 95px;
cursor: pointer;
}
.display-lines {
@@ -281,4 +283,42 @@ input[type="number"]::-webkit-outer-spin-button {
margin: 10px 10px 2px 0;
}
.info-emeralds {
margin: 26px 0 0 21px;
}
.card-info {
border-radius: 15px;
border: 1px solid #2B4D6C;
background: linear-gradient(180deg, #252C47 0%, #252C47 8.33%, rgba(37, 44, 71, 0.00) 100%);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
width: 170px;
height: 250px;
}
.text-style__subtitle h2 {
margin: 13px 0 6px 10px;
color: #FFF;
font-weight: 800;
line-height: 18px;
text-transform: uppercase;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
font-family: Montserrat Alternates;
font-size: 17px;
}
.text-style__comment p {
margin-left: 10px;
color: #9CA5C7;
font-weight: 400;
line-height: 13px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
font-family: Montserrat Alternates;
font-size: 13px;
}
.info-crystals {
margin: 26px 0 0 21px;
}
/* /Saper Game */

92
luckydiamond/src/assets/icons-games/saper-game/icon-crystall-info-saper.svg Normal file
View File

@@ -0,0 +1,92 @@
<svg width="207" height="204" viewBox="0 0 207 204" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd_291_5)">
<g filter="url(#filter1_d_291_5)">
<rect x="45.7563" y="68.2073" width="88.9238" height="84.8552" rx="17" transform="rotate(-15 45.7563 68.2073)" stroke="url(#paint0_linear_291_5)" stroke-width="6" shape-rendering="crispEdges"/>
</g>
<g filter="url(#filter2_d_291_5)">
<rect x="1.07377" y="4.00737" width="53.2329" height="53.2329" rx="9" transform="matrix(0.876765 0.480919 -0.518841 0.85487 91.295 58.1855)" stroke="#954DBB" stroke-width="6" shape-rendering="crispEdges"/>
</g>
<g filter="url(#filter3_d_291_5)">
<rect x="-3.03331" y="3.03205" width="64.5948" height="67.324" rx="12" transform="matrix(-0.011161 0.999938 -0.999942 0.0107455 136.702 68.0248)" stroke="#5F277D" stroke-width="6" shape-rendering="crispEdges"/>
</g>
<g filter="url(#filter4_d_291_5)">
<rect x="-1.08514" y="4.05317" width="52.7983" height="55.0715" rx="9" transform="matrix(0.509634 0.860391 -0.871348 0.490665 114.308 60.4024)" stroke="#BE95D4" stroke-width="6" shape-rendering="crispEdges"/>
</g>
<g filter="url(#filter5_d_291_5)">
<rect width="14.6307" height="15.1963" rx="4" transform="matrix(0.509634 0.860391 -0.871348 0.490665 102.576 87.6599)" fill="#FF8D8D"/>
<rect x="0.904284" y="-3.37764" width="19.6307" height="20.1963" rx="6.5" transform="matrix(0.509634 0.860391 -0.871348 0.490665 100.076 85.1615)" stroke="#CE0624" stroke-width="5"/>
</g>
</g>
<defs>
<filter id="filter0_dd_291_5" x="0.572021" y="0.0078125" width="206.224" height="203.348" 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"/>
<feOffset dx="4" dy="4"/>
<feGaussianBlur stdDeviation="25"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.372549 0 0 0 0 0.152941 0 0 0 0 0.490196 0 0 0 0.85 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_291_5"/>
<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 dx="4" dy="4"/>
<feGaussianBlur stdDeviation="22.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.584314 0 0 0 0 0.301961 0 0 0 0 0.733333 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_291_5" result="effect2_dropShadow_291_5"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_291_5" result="shape"/>
</filter>
<filter id="filter1_d_291_5" x="42.572" y="46.0078" width="114.224" height="111.348" 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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<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_291_5"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
</filter>
<filter id="filter2_d_291_5" x="58.8711" y="62.3774" width="81.6257" height="78.6085" 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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<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_291_5"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
</filter>
<filter id="filter3_d_291_5" x="58.7964" y="62.1525" width="81.7747" height="79.0577" 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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<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_291_5"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
</filter>
<filter id="filter4_d_291_5" x="58.5505" y="61.7294" width="82.2671" height="79.9052" 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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<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_291_5"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
</filter>
<filter id="filter5_d_291_5" x="81.7722" y="84.1483" width="35.8225" height="35.0674" 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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<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_291_5"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_5" result="shape"/>
</filter>
<linearGradient id="paint0_linear_291_5" x1="89.5439" y1="66.0859" x2="68.5897" y2="154.588" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#B8B8B8"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

66
luckydiamond/src/assets/icons-games/saper-game/icon-emeralds-saper.svg Normal file
View File

@@ -0,0 +1,66 @@
<svg width="208" height="198" viewBox="0 0 208 198" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_bddf_290_4)">
<path d="M51.9315 77.9679L71.7926 53.7515C73.4352 51.7486 75.791 50.4613 78.3638 50.1606L83.7001 49.5369C86.3034 49.2327 88.922 49.9626 90.9925 51.5697L115.385 70.5021C117.543 72.1778 118.923 74.6642 119.201 77.3829L121.923 103.962C122.185 106.52 121.452 109.081 119.875 111.112L100.84 135.636C99.1944 137.756 96.7662 139.126 94.1009 139.437L88.9216 140.043C86.3178 140.347 83.6986 139.617 81.628 138.009L56.6139 118.587C54.4948 116.942 53.1257 114.514 52.8143 111.849L49.7312 85.4702C49.4162 82.7745 50.2104 80.0665 51.9315 77.9679Z" fill="url(#paint0_linear_290_4)"/>
<path d="M51.9315 77.9679L71.7926 53.7515C73.4352 51.7486 75.791 50.4613 78.3638 50.1606L83.7001 49.5369C86.3034 49.2327 88.922 49.9626 90.9925 51.5697L115.385 70.5021C117.543 72.1778 118.923 74.6642 119.201 77.3829L121.923 103.962C122.185 106.52 121.452 109.081 119.875 111.112L100.84 135.636C99.1944 137.756 96.7662 139.126 94.1009 139.437L88.9216 140.043C86.3178 140.347 83.6986 139.617 81.628 138.009L56.6139 118.587C54.4948 116.942 53.1257 114.514 52.8143 111.849L49.7312 85.4702C49.4162 82.7745 50.2104 80.0665 51.9315 77.9679Z" stroke="url(#paint1_linear_290_4)" stroke-width="6"/>
</g>
<g filter="url(#filter1_bddf_290_4)">
<path d="M103.594 84.5815L120.124 72.3178C122.206 70.7734 124.806 70.0976 127.376 70.433L129.065 70.6533C131.665 70.9926 134.028 72.34 135.645 74.4052L148.12 90.3416C149.804 92.4923 150.535 95.238 150.143 97.9409L147.667 115.01C147.298 117.553 145.964 119.857 143.942 121.443L127.886 134.037C125.774 135.694 123.083 136.432 120.421 136.085L118.889 135.885C116.288 135.546 113.924 134.198 112.308 132.132L99.4654 115.721C97.8131 113.61 97.0778 110.923 97.4247 108.265L99.6358 91.3189C99.9868 88.6293 101.415 86.1976 103.594 84.5815Z" fill="url(#paint2_linear_290_4)"/>
<path d="M103.594 84.5815L120.124 72.3178C122.206 70.7734 124.806 70.0976 127.376 70.433L129.065 70.6533C131.665 70.9926 134.028 72.34 135.645 74.4052L148.12 90.3416C149.804 92.4923 150.535 95.238 150.143 97.9409L147.667 115.01C147.298 117.553 145.964 119.857 143.942 121.443L127.886 134.037C125.774 135.694 123.083 136.432 120.421 136.085L118.889 135.885C116.288 135.546 113.924 134.198 112.308 132.132L99.4654 115.721C97.8131 113.61 97.0778 110.923 97.4247 108.265L99.6358 91.3189C99.9868 88.6293 101.415 86.1976 103.594 84.5815Z" stroke="url(#paint3_linear_290_4)" stroke-width="6"/>
</g>
<defs>
<filter id="filter0_bddf_290_4" x="0.663574" y="0.469299" width="178.312" height="196.641" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_290_4"/>
<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 dx="4" dy="4"/>
<feGaussianBlur stdDeviation="25"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.360784 0 0 0 0 0.745098 0 0 0 0 0.458824 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="effect1_backgroundBlur_290_4" result="effect2_dropShadow_290_4"/>
<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 dx="4" dy="4"/>
<feGaussianBlur stdDeviation="25"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.00392157 0 0 0 0 0.262745 0 0 0 0 0.00392157 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_290_4" result="effect3_dropShadow_290_4"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_290_4" result="shape"/>
<feGaussianBlur stdDeviation="0.15" result="effect4_foregroundBlur_290_4"/>
</filter>
<filter id="filter1_bddf_290_4" x="48.3406" y="21.3489" width="158.906" height="171.82" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_290_4"/>
<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 dx="4" dy="4"/>
<feGaussianBlur stdDeviation="25"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.360784 0 0 0 0 0.745098 0 0 0 0 0.458824 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="effect1_backgroundBlur_290_4" result="effect2_dropShadow_290_4"/>
<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 dx="4" dy="4"/>
<feGaussianBlur stdDeviation="25"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.00392157 0 0 0 0 0.262745 0 0 0 0 0.00392157 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_290_4" result="effect3_dropShadow_290_4"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_290_4" result="shape"/>
<feGaussianBlur stdDeviation="0.15" result="effect4_foregroundBlur_290_4"/>
</filter>
<linearGradient id="paint0_linear_290_4" x1="58.8031" y1="64.025" x2="115.998" y2="139.899" gradientUnits="userSpaceOnUse">
<stop stop-color="#B6FFD0"/>
<stop offset="1" stop-color="#007B18"/>
</linearGradient>
<linearGradient id="paint1_linear_290_4" x1="80.8093" y1="49.8748" x2="91.3149" y2="139.763" gradientUnits="userSpaceOnUse">
<stop stop-color="#458845"/>
<stop offset="1" stop-color="#255125"/>
</linearGradient>
<linearGradient id="paint2_linear_290_4" x1="110.003" y1="76.6239" x2="136.997" y2="140.424" gradientUnits="userSpaceOnUse">
<stop stop-color="#B6FFD0"/>
<stop offset="1" stop-color="#007B18"/>
</linearGradient>
<linearGradient id="paint3_linear_290_4" x1="128.065" y1="70.5229" x2="119.526" y2="135.968" gradientUnits="userSpaceOnUse">
<stop stop-color="#458845"/>
<stop offset="1" stop-color="#255125"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

18
luckydiamond/src/pages/games-pages/SapergamePage.vue
View File

@@ -91,6 +91,24 @@
</ul>
</div>
</div>
<div class="game-info">
<div class="game-info__content text-style__subtitle text-style__comment">
<div class="info-emeralds">
<div class="info-emeralds__content card-info">
<h2>Изумруды</h2>
<p>Открывай ячейки с изумрудами</p>
<img src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" width="170" height="170">
</div>
</div>
<div class="info-crystals">
<div class="info-crystals__content card-info">
<h2>кристаллы</h2>
<p>Остерегайся кристаллов, чтобы не проиграть</p>
<img src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" width="170" height="170">
</div>
</div>
</div>
</div>
</div>
</div>
</section>