File: //var/www/quadcode.com/src/components/blocks/trading-platform/Customization.svelte
<script lang="ts">
import {t} from '$lib/translations';
import greyPic from '../../../assets/images/trading-platform/customization/your_grey.webp';
import jetblackPic from '../../../assets/images/trading-platform/customization/your_jetblack.webp';
import nightPic from '../../../assets/images/trading-platform/customization/your_night.webp';
import whitePic from '../../../assets/images/trading-platform/customization/your_white.webp';
import greyIcon from '../../../assets/images/trading-platform/customization/your_grey.svg';
import jetblackIcon from '../../../assets/images/trading-platform/customization/your_jetblack.svg';
import nightIcon from '../../../assets/images/trading-platform/customization/your_night.svg';
import whiteIcon from '../../../assets/images/trading-platform/customization/your_white.svg';
import Button from '../../button/Button.svelte';
import { popupForm } from '../../../store';
let tabs = [$t('trading-platform.Brand logo'), $t('trading-platform.Interface skin'), $t('trading-platform.Trading tools')];
let tabActive = 1;
let colorActive = 0;
</script>
<section class="affiliate_broker__customization block-customization">
<div class="container">
<div class="block-customization__wrapper">
<div class="block-customization__text">
<div class="block-customization__text__titleBlock">
<p class="block-customization__underTitle" >{$t('trading-platform.Customization')}</p>
<h2 class="block-customization__title title" >
{@html $t('trading-platform.Build a Trading Platform You Have in Mind')}
</h2>
</div>
<p class="description" >{$t('trading-platform.Add a personal touch to your traderoom, choosing a logo, color scheme, and available tools.')}</p>
</div>
<div class="tabs tabs--block-customization" data-widget="tabs" data-name="your">
<div class="tabs__list">
{#each tabs as tabName, index}
<div tabindex="0" role="button" on:keydown={() => false} class={`tabs__btn ${tabActive === index && 'active'}`} on:click={() => tabActive = index}>{tabName}</div>
{/each}
</div>
<div class="tabs__content">
<div class="tabs__content-bg">
<img src={nightPic} data-bg-content="skins-bg" data-theme="night" class={`${colorActive === 0 && 'active'}`} alt="" loading="lazy">
<img src={greyPic} data-bg-content="skins-bg" data-theme="grey" class={`${colorActive === 1 && 'active'}`} alt="" loading="lazy">
<img src={jetblackPic} data-bg-content="skins-bg" data-theme="jetblack" class={`${colorActive === 2 && 'active'}`} alt="" loading="lazy">
<img src={whitePic} data-bg-content="skins-bg" data-theme="white" class={`${colorActive === 3 && 'active'}`} alt="" loading="lazy">
</div>
<div class={`tabs__item ${tabActive === 0 && 'active'}`}>
<div class="block-customization__logo-info">
<svg width="471" height="54" viewBox="0 0 471 84" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_211_155)">
<path d="M121.836 18.4903C121.428 18.5204 111.74 19.2955 100.16 24.9372C89.9839 29.8944 76.5063 39.678 68.6653 58.3242L64 54.4692L66.1037 73.5331L78.2929 58.7218L72.6009 59.366C78.5144 45.5663 88.3181 35.2291 101.786 28.6262C112.661 23.2915 121.992 22.5164 122.138 22.5064C123.245 22.4258 124.076 21.4596 123.995 20.3524C123.915 19.2452 122.953 18.4097 121.841 18.4953L121.836 18.4903Z"
fill="#445667"/>
<path d="M173.336 10.6895H167.986L162.259 20.1107L156.531 10.6895H151.081L159.878 24.6653V34.9472H164.569V24.459L173.336 10.6895Z" fill="#445667"/>
<path d="M183.326 19.0388C181.982 18.2788 180.457 17.9014 178.756 17.9014C177.055 17.9014 175.565 18.2889 174.216 19.0589C172.873 19.8289 171.806 20.8656 171.026 22.1641C170.246 23.4625 169.853 24.9321 169.853 26.5627C169.853 28.1933 170.246 29.7081 171.026 31.0317C171.806 32.3553 172.873 33.4021 174.216 34.1721C175.56 34.9422 177.075 35.3297 178.756 35.3297C180.437 35.3297 181.987 34.9422 183.346 34.1721C184.705 33.4021 185.772 32.3503 186.557 31.0166C187.337 29.683 187.729 28.1983 187.729 26.5677C187.729 24.9371 187.332 23.4625 186.536 22.149C185.741 20.8354 184.674 19.8037 183.326 19.0438V19.0388ZM182.53 28.9079C182.173 29.5773 181.67 30.1057 181.011 30.4932C180.356 30.8858 179.601 31.0821 178.751 31.0821C177.9 31.0821 177.186 30.8858 176.542 30.4932C175.897 30.1007 175.399 29.5722 175.042 28.9079C174.684 28.2386 174.508 27.4686 174.508 26.5979C174.508 25.7272 174.684 24.9522 175.042 24.2879C175.399 23.6185 175.897 23.0951 176.542 22.7177C177.186 22.3402 177.92 22.149 178.751 22.149C179.581 22.149 180.341 22.3402 180.975 22.7177C181.609 23.0951 182.113 23.6185 182.495 24.2879C182.873 24.9572 183.064 25.7272 183.064 26.5979C183.064 27.4686 182.888 28.2436 182.53 28.9079Z"
fill="#445667"/>
<path d="M200.698 27.8411C200.698 28.8778 200.432 29.683 199.903 30.2568C199.375 30.8305 198.64 31.1174 197.694 31.1174C197.075 31.1174 196.531 30.9916 196.073 30.7399C195.61 30.4883 195.268 30.1159 195.037 29.6176C194.805 29.1244 194.689 28.5306 194.689 27.8411V18.2839H190.135V27.9468C190.135 29.3962 190.457 30.6745 191.101 31.7767C191.745 32.8788 192.641 33.7394 193.794 34.3484C194.946 34.9573 196.244 35.2643 197.694 35.2643C199.143 35.2643 200.437 34.9573 201.574 34.3484C202.712 33.7394 203.602 32.8839 204.247 31.7767C204.891 30.6745 205.213 29.3962 205.213 27.9468V18.2839H200.693V27.8411H200.698Z"
fill="#445667"/>
<path d="M219.833 18.3341C219.199 18.0724 218.469 17.9365 217.644 17.9365C215.782 17.9365 214.353 18.5304 213.366 19.7131C213.356 19.7282 213.346 19.7433 213.331 19.7584V18.2787H208.812V34.9471H213.331V25.7674C213.331 24.5042 213.633 23.5732 214.247 22.9743C214.856 22.3754 215.646 22.0785 216.612 22.0785C217.07 22.0785 217.478 22.1439 217.835 22.2697C218.193 22.3955 218.494 22.6119 218.751 22.9089L221.58 19.6325C221.051 19.0337 220.467 18.6008 219.838 18.3391L219.833 18.3341Z"
fill="#445667"/>
<path d="M243.879 19.074C242.646 18.3141 241.262 17.9366 239.722 17.9366C238.55 17.9366 237.473 18.1832 236.496 18.6764C235.927 18.9633 235.434 19.3206 234.996 19.7282V10H230.477V34.9472H234.961V33.4525C235.404 33.8803 235.902 34.2527 236.481 34.5496C237.447 35.0428 238.529 35.2894 239.722 35.2894C241.262 35.2894 242.641 34.912 243.864 34.152C245.082 33.3921 246.043 32.3604 246.748 31.0468C247.447 29.7333 247.8 28.2637 247.8 26.6281C247.8 24.9925 247.452 23.4877 246.763 22.1792C246.073 20.8707 245.112 19.8339 243.879 19.074ZM242.601 28.9432C242.244 29.6125 241.755 30.1409 241.136 30.5285C240.517 30.921 239.793 31.1173 238.962 31.1173C238.132 31.1173 237.397 30.921 236.753 30.5285C236.109 30.1359 235.615 29.6075 235.268 28.9432C234.921 28.2738 234.75 27.5038 234.75 26.6331C234.75 25.7625 234.921 24.9522 235.268 24.2879C235.615 23.6185 236.104 23.0901 236.733 22.7026C237.367 22.31 238.097 22.1138 238.922 22.1138C239.747 22.1138 240.482 22.31 241.111 22.7026C241.745 23.0951 242.239 23.6286 242.596 24.308C242.953 24.9874 243.129 25.7524 243.129 26.6029C243.129 27.4988 242.953 28.2839 242.596 28.9482L242.601 28.9432Z"
fill="#445667"/>
<path d="M261.756 18.3341C261.121 18.0724 260.392 17.9365 259.566 17.9365C257.704 17.9365 256.275 18.5304 255.288 19.7131C255.278 19.7282 255.268 19.7433 255.253 19.7584V18.2787H250.734V34.9471H255.253V25.7674C255.253 24.5042 255.555 23.5732 256.169 22.9743C256.778 22.3754 257.568 22.0785 258.535 22.0785C258.993 22.0785 259.4 22.1439 259.758 22.2697C260.115 22.3955 260.417 22.6119 260.674 22.9089L263.502 19.6325C262.973 19.0337 262.39 18.6008 261.761 18.3391L261.756 18.3341Z"
fill="#445667"/>
<path d="M277.005 19.0388C275.661 18.2788 274.136 17.9014 272.435 17.9014C270.734 17.9014 269.244 18.2889 267.896 19.0589C266.552 19.8289 265.485 20.8656 264.705 22.1641C263.925 23.4625 263.532 24.9321 263.532 26.5627C263.532 28.1933 263.925 29.7081 264.705 31.0317C265.485 32.3553 266.552 33.4021 267.896 34.1721C269.239 34.9422 270.754 35.3297 272.435 35.3297C274.116 35.3297 275.666 34.9422 277.025 34.1721C278.384 33.4021 279.451 32.3503 280.236 31.0166C281.016 29.683 281.408 28.1983 281.408 26.5677C281.408 24.9371 281.011 23.4625 280.216 22.149C279.421 20.8354 278.354 19.8037 277.005 19.0438V19.0388ZM276.21 28.9079C275.852 29.5773 275.349 30.1057 274.69 30.4932C274.036 30.8858 273.281 31.0821 272.43 31.0821C271.58 31.0821 270.865 30.8858 270.221 30.4932C269.577 30.1007 269.078 29.5722 268.721 28.9079C268.364 28.2386 268.187 27.4686 268.187 26.5979C268.187 25.7272 268.364 24.9522 268.721 24.2879C269.078 23.6185 269.577 23.0951 270.221 22.7177C270.865 22.3402 271.6 22.149 272.43 22.149C273.26 22.149 274.02 22.3402 274.655 22.7177C275.289 23.0951 275.792 23.6185 276.174 24.2879C276.552 24.9572 276.743 25.7272 276.743 26.5979C276.743 27.4686 276.567 28.2436 276.21 28.9079Z"
fill="#445667"/>
<path d="M300.07 18.2788H294.826L288.786 25.9185V10H284.267V34.9472H288.786V26.8193L294.861 34.9472H300.382L293.527 26.2054L300.07 18.2788Z" fill="#445667"/>
<path d="M313.668 18.9733C312.425 18.2587 311.021 17.9014 309.461 17.9014C307.805 17.9014 306.31 18.2788 304.977 19.0388C303.643 19.7987 302.591 20.8354 301.821 22.144C301.051 23.4575 300.664 24.9371 300.664 26.5929C300.664 28.2486 301.056 29.7685 301.836 31.077C302.616 32.3906 303.693 33.4223 305.062 34.1822C306.431 34.9422 307.991 35.3196 309.738 35.3196C311.096 35.3196 312.35 35.078 313.497 34.5949C314.65 34.1118 315.646 33.387 316.497 32.4208L313.804 29.7283C313.296 30.3272 312.702 30.765 312.007 31.0418C311.318 31.3186 310.548 31.4545 309.697 31.4545C308.751 31.4545 307.926 31.2582 307.211 30.8657C306.497 30.4731 305.953 29.9044 305.57 29.1596C305.419 28.8626 305.309 28.5405 305.218 28.2084L317.387 28.1782C317.478 27.8108 317.538 27.4686 317.558 27.1616C317.584 26.8495 317.594 26.5476 317.594 26.2456C317.594 24.6351 317.246 23.1958 316.557 21.9326C315.867 20.6694 314.901 19.6779 313.658 18.9633L313.668 18.9733ZM307.075 22.2849C307.745 21.8923 308.525 21.696 309.421 21.696C310.271 21.696 310.986 21.8672 311.559 22.2144C312.133 22.5617 312.581 23.0649 312.903 23.7343C313.059 24.0564 313.175 24.4137 313.26 24.8113L305.218 24.8365C305.304 24.5295 305.399 24.2325 305.535 23.9608C305.893 23.2361 306.401 22.6774 307.07 22.2849H307.075Z"
fill="#445667"/>
<path d="M331.454 18.3341C330.82 18.0724 330.09 17.9365 329.265 17.9365C327.402 17.9365 325.973 18.5304 324.987 19.7131C324.977 19.7282 324.967 19.7433 324.952 19.7584V18.2787H320.432V34.9471H324.952V25.7674C324.952 24.5042 325.253 23.5732 325.867 22.9743C326.476 22.3754 327.267 22.0785 328.233 22.0785C328.691 22.0785 329.098 22.1439 329.456 22.2697C329.813 22.3955 330.115 22.6119 330.372 22.9089L333.2 19.6325C332.672 19.0337 332.088 18.6008 331.459 18.3391L331.454 18.3341Z"
fill="#445667"/>
<path d="M346.618 10H342.098V34.9472H346.618V10Z" fill="#445667"/>
<path d="M362.989 19.0388C361.645 18.2788 360.12 17.9014 358.419 17.9014C356.718 17.9014 355.228 18.2889 353.879 19.0589C352.536 19.8289 351.469 20.8656 350.689 22.1641C349.909 23.4625 349.516 24.9321 349.516 26.5627C349.516 28.1933 349.909 29.7081 350.689 31.0317C351.469 32.3553 352.536 33.4021 353.879 34.1721C355.223 34.9422 356.738 35.3297 358.419 35.3297C360.1 35.3297 361.65 34.9422 363.009 34.1721C364.368 33.4021 365.435 32.3503 366.22 31.0166C367 29.683 367.392 28.1983 367.392 26.5677C367.392 24.9371 366.995 23.4625 366.2 22.149C365.404 20.8354 364.337 19.8037 362.989 19.0438V19.0388ZM362.194 28.9079C361.836 29.5773 361.333 30.1057 360.674 30.4932C360.019 30.8858 359.264 31.0821 358.414 31.0821C357.563 31.0821 356.849 30.8858 356.205 30.4932C355.56 30.1007 355.062 29.5722 354.705 28.9079C354.348 28.2386 354.171 27.4686 354.171 26.5979C354.171 25.7272 354.348 24.9522 354.705 24.2879C355.062 23.6185 355.56 23.0951 356.205 22.7177C356.849 22.3402 357.584 22.149 358.414 22.149C359.244 22.149 360.004 22.3402 360.638 22.7177C361.273 23.0951 361.776 23.6185 362.158 24.2879C362.536 24.9572 362.727 25.7272 362.727 26.5979C362.727 27.4686 362.551 28.2436 362.194 28.9079Z"
fill="#445667"/>
<path d="M381.776 19.6881C381.353 19.2754 380.865 18.9231 380.291 18.6413C379.325 18.1682 378.233 17.9316 377.015 17.9316C375.52 17.9316 374.172 18.294 372.979 19.0187C371.781 19.7434 370.845 20.7248 370.166 21.9679C369.486 23.211 369.149 24.6151 369.149 26.1752C369.149 27.7354 369.486 29.1546 370.166 30.4178C370.845 31.681 371.781 32.6775 372.979 33.4022C374.177 34.1269 375.52 34.4893 377.015 34.4893C378.233 34.4893 379.32 34.2477 380.276 33.7646C380.835 33.4827 381.318 33.1254 381.741 32.7178V34.1773C381.741 35.3952 381.328 36.3665 380.498 37.0912C379.667 37.8159 378.565 38.1783 377.186 38.1783C376.059 38.1783 375.098 37.977 374.302 37.5743C373.507 37.1717 372.788 36.593 372.143 35.833L369.245 38.6966C370.075 39.8491 371.162 40.7399 372.506 41.369C373.849 42.0031 375.42 42.3202 377.216 42.3202C379.013 42.3202 380.553 41.983 381.907 41.3036C383.266 40.6242 384.328 39.6629 385.098 38.4198C385.868 37.1768 386.255 35.7374 386.255 34.1068V18.2688H381.771V19.678L381.776 19.6881ZM381.484 28.3745C381.152 29.0087 380.679 29.4968 380.07 29.8391C379.461 30.1863 378.731 30.3574 377.881 30.3574C377.101 30.3574 376.391 30.1813 375.757 29.824C375.123 29.4666 374.635 28.9734 374.292 28.3393C373.945 27.7052 373.774 26.9905 373.774 26.1803C373.774 25.37 373.95 24.6906 374.307 24.0565C374.665 23.4223 375.148 22.9291 375.757 22.5718C376.366 22.2145 377.086 22.0383 377.916 22.0383C378.746 22.0383 379.436 22.2145 380.055 22.5718C380.674 22.9291 381.152 23.4223 381.489 24.0565C381.821 24.6906 381.987 25.4103 381.987 26.2155C381.987 27.0207 381.821 27.7404 381.489 28.3745H381.484Z"
fill="#445667"/>
<path d="M405.812 22.1439C405.017 20.8304 403.95 19.7987 402.601 19.0388C401.258 18.2788 399.733 17.9014 398.032 17.9014C396.331 17.9014 394.841 18.2889 393.492 19.0589C392.149 19.8289 391.082 20.8656 390.302 22.1641C389.521 23.4625 389.129 24.9321 389.129 26.5627C389.129 28.1933 389.521 29.7081 390.302 31.0317C391.082 32.3553 392.149 33.4021 393.492 34.1721C394.836 34.9422 396.351 35.3297 398.032 35.3297C399.713 35.3297 401.263 34.9422 402.622 34.1721C403.98 33.4021 405.047 32.3503 405.832 31.0166C406.613 29.683 407.005 28.1983 407.005 26.5677C407.005 24.9371 406.608 23.4625 405.812 22.149V22.1439ZM401.811 28.9079C401.454 29.5773 400.951 30.1057 400.291 30.4932C399.637 30.8858 398.882 31.0821 398.032 31.0821C397.181 31.0821 396.467 30.8858 395.822 30.4932C395.178 30.1007 394.68 29.5722 394.323 28.9079C393.965 28.2386 393.789 27.4686 393.789 26.5979C393.789 25.7272 393.965 24.9522 394.323 24.2879C394.68 23.6185 395.178 23.0951 395.822 22.7177C396.467 22.3402 397.201 22.149 398.032 22.149C398.862 22.149 399.622 22.3402 400.256 22.7177C400.89 23.0951 401.394 23.6185 401.776 24.2879C402.154 24.9572 402.345 25.7272 402.345 26.5979C402.345 27.4686 402.169 28.2436 401.811 28.9079Z"
fill="#445667"/>
</g>
<defs>
<clipPath id="clip0_211_155">
<rect width="343" height="63.5331" fill="white" transform="translate(64 10)"/>
</clipPath>
</defs>
</svg>
</div>
<div class="block-customization__logo">
<svg width="72" height="25" viewBox="0 0 72 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#C0C5CD"/>
<path d="M40.8664 17.3662V14.5852H36.075V5H33V17.3662H40.8664Z" fill="#C0C5CD"/>
<path d="M46.4339 17.5886C49.4017 17.5886 51.1538 15.4009 51.1538 12.8795C51.1538 10.3581 49.4017 8.18888 46.4339 8.18888C43.5019 8.18888 41.732 10.3581 41.732 12.8795C41.732 15.4009 43.5019 17.5886 46.4339 17.5886ZM46.4339 15.0672C45.2361 15.0672 44.5746 14.0846 44.5746 12.8795C44.5746 11.6929 45.2361 10.7103 46.4339 10.7103C47.6496 10.7103 48.329 11.6929 48.329 12.8795C48.329 14.0846 47.6496 15.0672 46.4339 15.0672Z"
fill="#C0C5CD"/>
<path d="M52.3725 19.6651C53.481 20.6107 54.7146 21 56.1985 21C58.3439 21 61.1329 20.2213 61.1329 16.5689V8.41136H58.3975V9.46813C57.7002 8.57822 56.8063 8.18888 55.8409 8.18888C53.6777 8.18888 52.0329 9.74623 52.0329 12.6941C52.0329 15.7161 53.7313 17.2178 55.8409 17.2178C56.8242 17.2178 57.6824 16.7914 58.3975 15.92V16.606C58.3975 18.2746 57.1103 18.664 56.1985 18.664C55.1973 18.664 54.2319 18.3673 53.5704 17.6257L52.3725 19.6651ZM58.3975 13.8992C58.0578 14.3812 57.3248 14.6964 56.7527 14.6964C55.6621 14.6964 54.8576 14.0104 54.8576 12.6941C54.8576 11.3963 55.6621 10.7103 56.7527 10.7103C57.3248 10.7103 58.0578 11.0255 58.3975 11.5075V13.8992Z"
fill="#C0C5CD"/>
<path d="M67.2802 17.5886C70.2479 17.5886 72 15.4009 72 12.8795C72 10.3581 70.2479 8.18888 67.2802 8.18888C64.3481 8.18888 62.5782 10.3581 62.5782 12.8795C62.5782 15.4009 64.3481 17.5886 67.2802 17.5886ZM67.2802 15.0672C66.0823 15.0672 65.4208 14.0846 65.4208 12.8795C65.4208 11.6929 66.0823 10.7103 67.2802 10.7103C68.4959 10.7103 69.1752 11.6929 69.1752 12.8795C69.1752 14.0846 68.4959 15.0672 67.2802 15.0672Z"
fill="#C0C5CD"/>
</svg>
</div>
</div>
<div class={`tabs__item ${tabActive === 1 && 'active'}`}>
<div class="skins" data-widget="skins" data-name="skins-bg">
<div class={`skins__item ${colorActive === 0 && 'active'}`} tabindex="0" role="button" on:keydown={() => false} on:click={() => colorActive = 0} data-theme="night"></div>
<div class={`skins__item ${colorActive === 1 && 'active'}`} tabindex="0" role="button" on:keydown={() => false} on:click={() => colorActive = 1} data-theme="grey"></div>
<div class={`skins__item ${colorActive === 2 && 'active'}`} tabindex="0" role="button" on:keydown={() => false} on:click={() => colorActive = 2} data-theme="jetblack"></div>
<div class={`skins__item ${colorActive === 3 && 'active'}`} tabindex="0" role="button" on:keydown={() => false} on:click={() => colorActive = 3} data-theme="white"></div>
</div>
</div>
<div class={`tabs__item ${tabActive === 2 && 'active'}`}>
<div class="block-customization__plus">
<svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="31" height="32" rx="1" fill="#C0C5CD"/>
</svg>
</div>
<div class="block-customization__list">
<img src={nightIcon} data-bg-list="skins-bg" data-theme="night" class={`${colorActive === 0 && 'active'}`} alt="" loading="lazy">
<img src={greyIcon} data-bg-list="skins-bg" data-theme="grey" class={`${colorActive === 1 && 'active'}`} alt="" loading="lazy">
<img src={jetblackIcon} data-bg-list="skins-bg" data-theme="jetblack" class={`${colorActive === 2 && 'active'}`} alt="" loading="lazy">
<img src={whiteIcon} data-bg-list="skins-bg" data-theme="white" class={`${colorActive === 3 && 'active'}`} alt="" loading="lazy">
</div>
</div>
</div>
<Button text={$t("trading-platform.Get Started")} onClick={() => popupForm.set(true)}></Button>
</div>
</div>
</div>
<div class="folderHeader">
<div class="row red">
<svg width="761" height="42" viewBox="0 0 761 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.353516 42H760.352C752.348 40.5635 744.911 36.7084 739.091 30.8703L720.037 11.7586C712.532 4.23092 702.34 0 691.71 0H68.3407C57.4618 0 47.0522 4.43104 39.511 12.2719L22.1169 30.357C16.23 36.4778 8.59508 40.5208 0.353516 42Z" fill="#FCFCFC"/>
</svg>
<svg class="tabL" width="335" height="26" viewBox="0 0 335 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 25.1056H3.70766C7.63257 25.1056 11.3094 23.1862 13.5533 19.9659L23.884 5.13967C26.1279 1.91941 29.8047 0 33.7296 0H301.65C305.503 0 309.122 1.8502 311.378 4.97373L322.326 20.1318C324.582 23.2554 328.201 25.1056 332.054 25.1056H334.999H163.999H0.5Z" fill="#FCFCFC"/>
</svg>
</div>
<div class="row"></div>
</div>
</section>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
@import 'src/scss/trading-platform/mixins';
@import 'src/scss/trading-platform/folderStyle';
.block-customization{
position: relative;
padding-top: 70px;
padding-bottom: 80px;
margin-top: -10px;
@include breakpoint-down('deskL') {
padding-top: 30px;
padding-bottom: 70px;
}
@include breakpoint-down('tabL') {
padding-top: 22px;
padding-bottom: 60px;
}
@include breakpoint-down('tabM') {
padding-top: 35px;
padding-bottom: 40px;
}
&__wrapper {
display: flex;
flex-direction: column;
gap: 48px;
@include breakpoint-down('deskL') {
gap: 16px;
}
@include breakpoint-down('deskS') {
gap: 22px;
}
@include breakpoint-down('tabM') {
gap: 10px;
}
}
&__text {
z-index: 2;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
text-align: center;
@include breakpoint-down('deskL') {
gap: 10px;
}
@include breakpoint-down('tabL') {
gap: 5px;
}
@include breakpoint-down('tabM') {
gap: 14px;
}
&__titleBlock {
text-align: center;
display: flex;
flex-direction: column;
gap: 13px;
@include breakpoint-down('deskL') {
gap: 12px;
}
@include breakpoint-down('tabL') {
gap: 8px;
}
@include breakpoint-down('tabM') {
color: #141414;
width: 246px;
}
}
}
&__title {
@include titleBlock;
width: 832px;
@include breakpoint-down('deskL') {
width: 530px;
}
@include breakpoint-down('tabL') {
width: 455px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
&__underTitle {
@include underTitle;
color: $redPrimary;
}
.description {
@include text;
width: 538px;
text-align: center;
@include breakpoint-down('deskL') {
width: 418px;
}
@include breakpoint-down('tabL') {
width: 55%;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14.4px;
width: 70%;
}
}
&__logo-info {
svg {
@include breakpoint-down('deskS') {
width: 208px;
height: 39px;
}
}
}
&__logo {
animation-name: blink;
animation-timing-function: linear;
animation-duration: .8s;
animation-iteration-count: infinite;
svg {
@include breakpoint-down('deskS') {
width: 46px;
}
@include breakpoint-down('tabM') {
width: 35px;
height: 20px;
}
}
}
&__plus {
width: 31px;
height: 31px;
animation-name: blink;
animation-timing-function: linear;
animation-duration: .8s;
animation-iteration-count: infinite;
svg {
@include breakpoint-down('deskS') {
width: 20px;
height: 20px;
}
@include breakpoint-down('tabM') {
width: 15px;
height: 15px;
}
}
}
&__list {
box-shadow: 0 45px 40px -25px rgba(93, 96, 99, 0.5);
border-radius: 8px;
width: 267px;
height: 343px;
@include breakpoint-down('deskS') {
width: 193px;
height: 254px;
padding: 16px 0;
}
img {
width: 100%;
display: none;
&.active {
display: block;
}
}
}
&__item {
&-name {
display: flex;
align-items: center;
}
&-icon {
margin-right: 12px;
@include breakpoint-down('deskS') {
margin-right: 7px;
}
svg {
@include breakpoint-down('deskS') {
width: 16px;
height: 15px;
}
}
}
&-text {
font-weight: 600;
font-size: 17px;
line-height: 140%;
color: $techWhite;
@include breakpoint-down('deskS') {
font-size: 11px;
}
}
&-count {
font-weight: 700;
font-size: 16px;
line-height: 110%;
color: $techWhite;
width: 48px;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
background: #51586B;
border-radius: 30px;
@include breakpoint-down('deskS') {
background: none;
width: auto;
height: auto;
font-size: 11px;
}
}
}
@keyframes blink {
0% {
opacity: .8;
}
50% {
opacity: .5;
}
100% {
opacity: .8;
}
}
.folderHeader {
.row.red {
svg {
height: 263px;
width: 772px;
top: -121px;
@include breakpoint-down('deskL') {
width: 581px;
top: -129px;
}
@include breakpoint-down('tabL') {
display: none;
width: 334px;
top: -124px;
}
@include breakpoint-down('tabM') {
width: 163px;
top: -123px;
}
}
.tabL {
display: none;
@include breakpoint-down('tabL') {
display: flex !important;
}
}
}
.row {
height: 96px;
@include breakpoint-down('deskL') {
height: 82px;
}
@include breakpoint-down('tabL') {
height: 52px;
}
@include breakpoint-down('tabM') {
height: 25px;
}
&:last-of-type {
margin-top: -65px;
@include breakpoint-down('tabL') {
margin-top: -34px;
}
@include breakpoint-down('tabM') {
margin-top: -11px;
}
}
}
}
}
.tabs {
&__list {
display: flex;
align-items: center;
justify-content: center;
}
&__btn {
cursor: pointer;
transition: .4s;
&.active {
pointer-events: none;
}
}
&__item {
display: none;
&.active {
display: block;
}
}
&--block-customization{
.tabs__content {
box-shadow: 0 45px 40px -25px $hintHover;
width: 810px;
height: 530px;
margin: 100px auto 52px;
position: relative;
border-radius: 16px;
@include breakpoint-down('deskL') {
margin: 70px auto 40px;
width: 612px;
height: 401px;
}
@include breakpoint-down('deskS') {
width: 451px;
height: 295px;
margin: 96px auto 56px;
border-radius: 8px;
}
@include breakpoint-down('tabL') {
width: 612px;
height: 401px;
margin: 70px auto 41px;
}
@include breakpoint-down('tabM') {
width: 320.47px;
height: 210px;
margin-bottom: 34px;
border-radius: 8px;
}
&-bg {
border-radius: 16px;
overflow: hidden;
width: 100%;
height: 100%;
@include breakpoint-down('deskS') {
border-radius: 8px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
&.active {
display: block;
}
}
}
.skins {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -57px;
@include breakpoint-down('deskL') {
top: -40px;
}
}
.block-customization__logo-info {
position: absolute;
left: -64px;
top: -51px;
@include breakpoint-down('deskL') {
left: -100px;
top: -37px;
svg {
height: 35px;
}
}
@include breakpoint-down('deskS') {
left: 12px;
top: -49px;
}
@include breakpoint-down('tabM') {
left: 0;
top: -43px;
}
}
.block-customization__logo {
position: absolute;
left: 22px;
top: 15px;
@include breakpoint-down('deskL') {
left: 18px;
top: 10px;
svg {
height: 20px;
width: 100%;
}
}
@include breakpoint-down('tabL') {
left: 14px;
top: 11px;
}
@include breakpoint-down('tabM') {
left: 6px;
top: 1px;
svg {
height: 12px;
}
}
}
.block-customization__plus {
position: absolute;
left: 274px;
top: 10px;
@include breakpoint-down('deskL') {
left: 203px;
top: 7px;
svg {
height: 25px;
}
}
@include breakpoint-down('tabL') {
left: 208px;
top: 8px;
}
@include breakpoint-down('tabM') {
left: 109px;
top: 1px;
svg {
width: 12px;
height: 12px;
}
}
}
.block-customization__list {
position: absolute;
top: -56px;
right: 226px;
@include breakpoint-down('deskL') {
height: 100px;
width: auto;
top: -17px;
right: 175px;
}
@include breakpoint-down('tabL') {
top: -35px;
right: 180px;
}
@include breakpoint-down('tabM') {
top: -27px;
right: 87px;
width: 100px;
height: 147px;
}
}
}
.tabs__list {
@include breakpoint-down('deskL') {
margin-left: -24px;
}
@include breakpoint-down('tabM') {
gap: 3px;
margin-left: 0px;
}
}
.tabs__btn {
min-width: 180px;
margin-right: 40px;
background: $dove;
border-radius: 40px;
padding: 10px 40px;
line-height: 21px;
display: flex;
align-items: center;
justify-content: center;
@include breakpoint-down('deskL') {
margin-right: 10px;
padding: 5px 24px;
min-width: 100px;
}
@include breakpoint-down('deskS') {
min-width: 100px;
padding: 8px 32px;
margin-right: 20px;
font-size: 11px;
line-height: 15px;
}
@include breakpoint-down('tabM') {
margin-right: 0;
text-align: center;
font-size: 8px;
line-height: 11.2px;
padding: 2px 11px;
min-width: fit-content;
}
&:last-of-type {
margin-right: 0;
}
&:hover {
background: $doveHover;
}
&.active {
background: $techBluePrimary;
color: $techWhite;
}
}
}
}
.skins {
display: flex;
align-items: center;
&__item {
width: 26px;
height: 26px;
border-radius: 100%;
margin-right: 30px;
position: relative;
cursor: pointer;
@include breakpoint-down('deskL') {
width: 18px;
height: 18px;
}
&:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.4);
width: 35px;
height: 35px;
border: 2px solid $graphite;
border-radius: 100%;
opacity: 0;
z-index: -2;
transition: .4s ease-in-out;
@include breakpoint-down('deskL') {
width: 25px;
height: 25px;
}
}
&:last-of-type {
margin-right: 0;
}
&[data-theme="night"] {
background: #233A5E;
}
&[data-theme="grey"] {
background: #656565;
}
&[data-theme="jetblack"] {
background: #171717;
}
&[data-theme="white"] {
background: #F2F2F2;
}
&.active {
pointer-events: none;
&:before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
}
}
:global(.block-customization__title span){
color: $redPrimary;
}
:global(.block-customization .button) {
@include heading2;
min-width: 384px;
padding: 20px 34px;
margin: 0 auto;
@include breakpoint-down('deskL') {
min-width: 284px;
padding: 16px 19px;
}
@include breakpoint-down('deskS') {
padding: 16px 83px;
}
@include breakpoint-down('tabL') {
padding: 12px 73px;
min-width: fit-content;
width: fit-content;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
</style>