CORE_V5 // onboarding

PATH: home / rwabteecom / project_11 / resources / views / web / onboarding /

Editing: socials.blade.php

@extends('web.layouts.base')

@section('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;
}
@if(LaravelLocalization::getCurrentLocale() == 'ar')
.namer,.urler{
    right: auto;
    left: 11px;
}
@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>
@endsection

@section('body')
<section class="social-page">

<form action="{{route('dashboard.onboarding.socials')}}" method="POST">
    @csrf

<div class="text-center pt-2 pb-2 plans-top">
                    <h1 class="plans-title mb-2 fw-bold"> {{ __('Add your social links') }}</h1>
                    <p class="text-secondary mb-3 text-center"> {{__("Choose your theme style, and start building on it")}} </p>
                </div>
                <div class="d-flex justify-content-center flex-wrap mb-5 pb-5">
                    @foreach ($icons as $icon)
                        <button class="socialMediaLink text-center p-2 m-3" data-id="{{ $icon->id }}"
                            data-title="{{ $icon->title }}" data-icon="{{ $icon->icon }}"
                            data-background="{{ $icon->background }}" data-color="{{ $icon->color }}" type="button">
                            <div>
                                <div class="icon-link-container" style="background: {{ $icon->background }}">
                                    <i class="{{ $icon->icon }} fs-3" style="color:#fff"></i>
                                </div>
                                <p class="m-0 mx-auto socialname small text-center">{{ $icon->title }}</p>
                            </div>
                        </button>
                    @endforeach
                </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">
                    {{__("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="{{route('dashboard.onboarding')}}?skip=1" class="lang-link p-3">
                        {{__("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"> {{ __('Complete Adding links') }}</h1>
                    <p class="text-secondary mb-3 text-center"> {{__("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"> {{__("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"> {{__("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>
                                </div>

</div>

</div>
                                </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">
                    {{__("Continue")}}
                </button>
            </div>

</div>
    </div>

<form>

</section>
@endsection

@section('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>
@endsection

CANCEL