File: //var/www/quadcode.com/src/components/blocks/white-label-binary-options/Customization.svelte
<script lang="ts">
import {t} from '$lib/translations';
import logoInfo from '../../../assets/images/trading-platform/customization/logo_info.svg';
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';
import folderCrest1800 from '../../../assets/images/white-label-binary-options/styling/folderCrestRed1800.svg';
import folderCrest1366 from '../../../assets/images/white-label-binary-options/styling/folderCrestRed1366.svg';
import folderCrest768 from '../../../assets/images/white-label-binary-options/styling/folderCrestRed768.svg';
import folderCrest375 from '../../../assets/images/white-label-binary-options/styling/folderCrestRed375.svg';
let tabs = [$t('white-label-binary-options.Brand logo'), $t('white-label-binary-options.Interface skin'), $t('white-label-binary-options.Trading tools')];
let tabActive = 1;
let colorActive = 0;
</script>
<section class="affiliate_broker__customization block-customization">
<div class="block-customization__content">
<div class="container">
<div class="block-customization__wrapper">
<div class="block-customization__text">
<div class="block-customization__text__titleBlock">
<p class="block-customization__aboveTitle" >{$t('white-label-binary-options.Customization')}</p>
<h2 class="block-customization__title title" >
{@html $t('white-label-binary-options.Make Your Brand Stand Out')}
</h2>
</div>
<p class="description" >{$t('white-label-binary-options.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">
<img src={logoInfo} alt="logo info">
</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" aria-label="Night" on:keydown={() => false} on:click={() => colorActive = 0} data-theme="night"></div>
<div class={`skins__item ${colorActive === 1 && 'active'}`} tabindex="0" role="button" aria-label="Grey" on:keydown={() => false} on:click={() => colorActive = 1} data-theme="grey"></div>
<div class={`skins__item ${colorActive === 2 && 'active'}`} tabindex="0" role="button" aria-label="Jetblack" on:keydown={() => false} on:click={() => colorActive = 2} data-theme="jetblack"></div>
<div class={`skins__item ${colorActive === 3 && 'active'}`} tabindex="0" role="button" aria-label="White" 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("white-label-binary-options.Get Started")} onClick={() => popupForm.set(true)}></Button>
</div>
</div>
</div>
<div class="folderHeader">
<div class="row red">
<picture>
<source srcset={folderCrest375} media="(max-width: 766px)">
<source srcset={folderCrest768} media="(max-width: 1024px)">
<source srcset={folderCrest1366} media="(max-width: 1799px)">
<img class="block-customization__folderŠ”rest" src={folderCrest1800} alt="folder crest">
</picture>
<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>
</div>
</section>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
@import 'src/scss/trading-platform/mixins';
@import 'src/scss/mixins';
@import 'src/scss/trading-platform/folderStyle';
.block-customization{
position: relative;
padding-top: 76px;
margin-top: -10px;
background: rgba(245, 245, 245, 1);
@include breakpoint-down('deskL') {
padding-top: 57px;
}
@include breakpoint-down('tabL') {
padding-top: 22px;
}
@include breakpoint-down('tabM') {
padding-top: 35px;
}
&__content {
background: rgb(255, 255, 255);
border-radius: 0 0 40px 40px;
padding-bottom: 90px;
border-bottom: 1px solid $techBlue3;
@include breakpoint-down('deskL') {
border-radius: 0 0 30px 30px;
padding-bottom: 80px;
}
@include breakpoint-down('tabL') {
border-radius: 0 0 16px 16px;
padding-bottom: 40px;
}
@include breakpoint-down('tabM') {
border-radius: 0 0 20px 20px;
padding-bottom: 54px;
}
}
&__wrapper {
display: flex;
flex-direction: column;
gap: 48px;
@include breakpoint-down('deskL') {
gap: 38px;
}
@include breakpoint-down('deskS') {
gap: 12px;
margin-left: -12px;
}
@include breakpoint-down('tabM') {
gap: 14px;
margin-left: 0;
}
}
&__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: 16px;
}
@include breakpoint-down('tabM') {
gap: 14px;
}
&__titleBlock {
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
@include breakpoint-down('deskL') {
gap: 12px;
}
@include breakpoint-down('tabL') {
gap: 8px;
}
@include breakpoint-down('tabM') {
color: #141414;
width: 246px;
}
}
}
&__title {
@include titleBlock;
width: 950px;
@include breakpoint-down('deskL') {
width: 530px;
}
@include breakpoint-down('tabL') {
width: 455px;
}
@include breakpoint-down('tabM') {
width: 100%;
}
}
&__aboveTitle {
@include underTitle;
color: $redPrimary;
@include breakpoint-down('tabM') {
display: none;
}
}
.description {
@include text;
width: 700px;
text-align: center;
@include breakpoint-down('deskL') {
@include body;
width: 418px;
}
@include breakpoint-down('tabL') {
width: 55%;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14.4px;
width: 63%;
}
}
&__logo-info {
img {
@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;
}
}
&__folderŠ”rest {
top: -41px;
left: 21px;
right: 0;
margin: auto;
width: 774px;
height: 81px;
position: absolute;
z-index: 1;
@include breakpoint-down('deskL') {
width: 633px;
height: 69px;
top: -30px;
}
@include breakpoint-down('tabL') {
width: 361px;
height: 48px;
top: -25px;
}
@include breakpoint-down('tabM') {
width: 199px;
height: 48px;
top: -13px;
left: 0;
}
}
.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: 43px;
}
&:last-of-type {
margin-top: -72px;
@include breakpoint-down('deskL') {
margin-top: -64px;
}
@include breakpoint-down('tabL') {
margin-top: -42px;
}
@include breakpoint-down('tabM') {
margin-top: -28px;
}
}
}
}
}
.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') {
top: -52px;
}
@include breakpoint-down('deskS') {
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: 0;
}
@include breakpoint-down('tabM') {
gap: 3px;
}
}
.tabs__btn {
min-width: 180px;
margin-right: 40px;
background: $dove;
border-radius: 40px;
padding: 10px 33px;
line-height: 21px;
display: flex;
align-items: center;
justify-content: center;
@include breakpoint-down('deskL') {
@include subtext;
margin-right: 10px;
padding: 7px 27px;
min-width: 134px;
}
@include breakpoint-down('deskS') {
padding: 8px 32px;
margin-right: 10px;
font-size: 11px;
line-height: 15px;
}
@include breakpoint-down('tabM') {
margin-right: 0;
text-align: center;
font-size: 8px;
line-height: 11.2px;
padding: 1px 6px;
min-width: 62px;
}
&: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: 406px;
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>