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")); ?> <i class="bi bi-chevron-left ms-2"></i> </a> </div> <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")); ?> <i class="bi bi-chevron-left ms-2"></i> </a> </div> <div class="text-center pt-2 pb-2 plans-top"> <h1 class="plans-title mb-2 fw-bold"> <?php echo e(__('Complete Adding links')); ?></h1> <p class="text-secondary mb-3 text-center"> <?php echo e(__("Complete the fields below to add your content to your new link")); ?> </p> </div> <div class="d-flex justify-content-center align-items-center mb-4"> <div> <p class="text-start"> <?php echo e(__("Your selections")); ?></p> <div id="selected-icons"> </div> </div> </div> <div class="d-flex justify-content-center align-items-center mb-2"> <div> <p class="text-start"> <?php echo e(__("Add your own links")); ?></p> <div> <div class="d-flex justify-content-center align-items-center mb-4"> <div class="iconer link-iconer d-flex justify-content-center align-items-center me-2" style="background:${background}"> <i class="bi bi-link-45deg fs-3"></i> </div> <div class="prespective-subscribe container position-relative"> <div class="prespective-subscribe"> <div class="first-url-container"> <div class="input-parent"> <input type="text" class="formInput text-start url-typer" name="link[0][link]" placeholder="<?php echo e(__("Link url")); ?>"> <span class="text-secondary small namer d-none"> <?php echo e(__("Name it >")); ?> <span> </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="d-flex justify-content-center align-items-center mb-4"> <div class="iconer link-iconer d-flex justify-content-center align-items-center me-2" style="background:${background}"> <i class="bi bi-link-45deg fs-3"></i> </div> <div class="prespective-subscribe container position-relative"> <div class="prespective-subscribe"> <div class="first-url-container"> <div class="input-parent"> <input type="text" class="formInput text-start url-typer" name="link[1][link]" placeholder="<?php echo e(__("Link url")); ?>"> <span class="text-secondary small namer d-none"> <?php echo e(__("Name it >")); ?> <span> </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="d-flex justify-content-center align-items-center mb-4"> <div class="iconer link-iconer d-flex justify-content-center align-items-center me-2" style="background:${background}"> <i class="bi bi-link-45deg fs-3"></i> </div> <div class="prespective-subscribe container position-relative"> <div class="prespective-subscribe"> <div class="first-url-container"> <div class="input-parent"> <input type="text" class="formInput text-start url-typer" name="link[2][link]" placeholder="<?php echo e(__("Link url")); ?>"> <span class="text-secondary small namer d-none"> <?php echo e(__("Name it >")); ?> <span> </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> <div class="page-footer d-flex justify-content-center align-items-end pb-3"> <button class="form-submit w-50" type="submit"> <?php echo e(__("Continue")); ?> </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**/ ?>
SAVE
CANCEL