CORE_V5 // views

PATH: home / rwabteecom / project_11 / storage / framework / views /

Editing: 06e67934770991453a26326a641f0f88.php

<?php $__env->startSection('css'); ?>
<style>
.page-footer{
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to top, rgba(250,250,250,1), rgba(250,250,250,0));
    left: 0;
    right: 0
}
.ticker.active{
    border-color: var(--main-color);
}
.form-submit {
	height: 50px;
	border-radius: 16px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border: none;
	font-weight: 600;
	line-height: 21px;
	letter-spacing: 0em;
	color: #fff;
	background-color: var(--main-color);
}
.socialMediaLink{
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 14px;
    background: #f6f7f5;
    border:3.5px solid transparent
}
.socialMediaLink.active{
    border-color: var(--main-color);
}
.socialname{
    color: #666
}
.icon-link-container{
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    margin: auto;
    margin-bottom: 6px;
}
.pager{
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    transform: translateY(35px);
    height: 0;
    overflow: hidden;
}
.pager.active{
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    height: 100% !important
}
.pages-container{
    overflow: hidden;
    min-height: 100vh;
}
.iconer{
    width: 64px;
    height: 51px;
    border-radius: 13px;
}
.link-iconer{
    border: 1px solid #eee
}
.input-parent{
    position: relative;
    overflow: hidden;
}
.namer,.urler{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    left:auto;
    right: 11px;
    background:#f2f2f2;
    padding: 7px 0 7px 8px;
}
<?php if(LaravelLocalization::getCurrentLocale() == 'ar'): ?>
.namer,.urler{
    right: auto;
    left: 11px;
}
<?php endif; ?>

.prespective-subscribe {
	perspective: 600px;
	transform-style: preserve-3d;
	transform-origin: center;
	transition: 1.2s;
}

.first-url-container{
    transform: rotateX(0deg) translateZ(2px);
    position: absolute
}
.second-url-container{
    transform: rotateX(180deg) translateZ(2px);

}
.rotated_perspective{
    transform: rotateX(180deg);
}
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('body'); ?>
<section class="social-page">

<form action="<?php echo e(route('dashboard.onboarding.socials')); ?>" method="POST">
    <?php echo csrf_field(); ?>

<div class="pages-container">
        <div class="active pager first-page">
            <div class="container text-center">
                <div class="d-flex justify-content-end py-3">
                    <a href="<?php echo e(route('dashboard.onboarding')); ?>?skip=1" class="lang-link p-3">
                        <?php echo e(__("Skip")); ?>

<div class="text-center pt-2 pb-2 plans-top">
                    <h1 class="plans-title mb-2 fw-bold"> <?php echo e(__('Add your social links')); ?></h1>
                    <p class="text-secondary mb-3 text-center"> <?php echo e(__("Choose your theme style, and start building on it")); ?> </p>
                </div>
                <div class="d-flex justify-content-center flex-wrap mb-5 pb-5">
                    <?php $__currentLoopData = $icons; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $icon): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <button class="socialMediaLink text-center p-2 m-3" data-id="<?php echo e($icon->id); ?>"
                            data-title="<?php echo e($icon->title); ?>" data-icon="<?php echo e($icon->icon); ?>"
                            data-background="<?php echo e($icon->background); ?>" data-color="<?php echo e($icon->color); ?>" type="button">
                            <div>
                                <div class="icon-link-container" style="background: <?php echo e($icon->background); ?>">
                                    <i class="<?php echo e($icon->icon); ?> fs-3" style="color:#fff"></i>
                                </div>
                                <p class="m-0 mx-auto socialname small text-center"><?php echo e($icon->title); ?></p>
                            </div>
                        </button>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
            <div class="page-footer d-flex justify-content-center align-items-end pb-3">
                <button class="form-submit w-50 d-none" id="proceed-to-form" type="button">
                    <?php echo e(__("Continue")); ?>

</button>
            </div>
        </div>

<div class="pager second-page">
            <div class="container text-center">
                <div class="d-flex justify-content-end py-3">
                    <a href="<?php echo e(route('dashboard.onboarding')); ?>?skip=1" class="lang-link p-3">
                        <?php echo e(__("Skip")); ?>

</div>
                    </div>
                </div>

<div class="second-url-container">
                                            <div class="input-parent">
                                                <input type="text" class="formInput text-start" name="link[0][title]" placeholder="<?php echo e(__("Link title")); ?>" value="<?php echo e(__('Website')); ?>">
                                                <span class="text-secondary small urler"> <?php echo e(__("Back to URL >")); ?> <span>
                                            </div>
                                        </div>

</div>
                                </div>

</div>

<div class="second-url-container">
                                            <div class="input-parent">
                                                <input type="text" class="formInput text-start" name="link[1][title]" placeholder="<?php echo e(__("Link title")); ?>" value="<?php echo e(__('Website')); ?>">
                                                <span class="text-secondary small urler"> <?php echo e(__("Back to URL >")); ?> <span>
                                            </div>
                                        </div>

</div>
                                </div>

</div>

<div class="second-url-container">
                                            <div class="input-parent">
                                                <input type="text" class="formInput text-start" name="link[2][title]" placeholder="<?php echo e(__("Link title")); ?>" value="<?php echo e(__('Website')); ?>">
                                                <span class="text-secondary small urler"> <?php echo e(__("Back to URL >")); ?> <span>
                                            </div>
                                        </div>

</div>
                                </div>

</div>

</div>
                    </div>
                </div>

</div>

</button>
            </div>

</div>
    </div>

<form>

</section>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>
<script>
$(document).ready(function(){
    $(".socialMediaLink").on("click" , function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
        }else{
            $(this).addClass("active");
        }
        checkSelectedSocials();
    })

function checkSelectedSocials()
    {
        if($(".socialMediaLink.active").length > 0){
            $(".page-footer .form-submit").removeClass("d-none");
            $("#selected-icons").html('');
            $(".socialMediaLink.active").each(function(){
                let icon          = $(this).data("icon");
                let id            = $(this).data("id");
                let title         = $(this).data("title");
                let background    = $(this).data("background");
                let color         = $(this).data("color");

$("#selected-icons").append(`
                    <div class="d-flex justify-content-center align-items-center mb-4">
                        <div class="iconer d-flex justify-content-center align-items-center me-2" style="background:${background}">
                            <i class="${icon} fs-4" style="color:${color}"></i>
                        </div>
                        <input  type="url" class="formInput text-start" name="links[${id}]" placeholder="${title} Link">
                    </div>
                `);
            })
        }else{
            $(".page-footer .form-submit").addClass("d-none");
        }
    }

$("#proceed-to-form").on("click" , function(){
        $(".first-page").addClass("d-none");
        $(".second-page").addClass("active");
    });

$(".url-typer").on("keyup", function(){
        $(this).siblings('.namer').addClass("d-none");
        if($(this).val().length > 2){
            $(this).siblings('.namer').removeClass("d-none");
        }
    });

$(".namer").on("click", function(){
        $(this).parent().parent().parent().addClass("rotated_perspective");
    })
    $(".urler").on("click", function(){
        $(this).parent().parent().parent().removeClass("rotated_perspective");
    })
})
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('web.layouts.base', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/rwabtee/project/resources/views/web/onboarding/socials.blade.php ENDPATH**/ ?>

CANCEL