CORE_V5 // onboarding

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

Editing: themes.blade.php

@extends('web.layouts.base')

@section('css')
<style>
.theme-img-container{
    width:100%;
    height:420px;
    overflow:hidden;
    border-radius:12px;
    cursor:pointer;
}
.theme-img-container img{
    width:100%;
    height:100%;
    object-fit: cover
}
.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));
}
.ticker{
    padding: 4px;
    border-radius: 16px;
    border: 4px solid transparent
}
.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);
}
</style>
@endsection

@section('body')
<section class="themes-page">
    <form action="{{ route('dashboard.design.update.updateTheme') }}?boarding=1" method="POST">
    @csrf
    <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"> {{ __('Select a template') }}</h1>
            <p class="text-secondary mb-3 text-center"> {{__("Select your links to get started")}} </p>
        </div>
        <div class="row mb-5 pb-5">
            @foreach ($themes as $theme)
                <div class="col-12 col-md-3 mb-4">
                    <div class="form-check">
                        <input class="form-check-input" hidden type="radio" name="theme_id" data-value="{{ $theme->id }}" id="theme{{ $theme->id }}" value="{{ $theme->id }}" />
                        <label class="form-check-label w-100" for="theme{{ $theme->id }}">
                            <div class="theme-img-con mb-2">
                                <span class="theme-check">
                                    <svg width="15" height="16" viewBox="0 0 15 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M6.18449 10.694L4.16033 8.52529C4.05126 8.40843 3.90332 8.34277 3.74908 8.34277C3.59483 8.34277 3.4469 8.40843 3.33783 8.52529C3.22876 8.64215 3.16748 8.80064 3.16748 8.96591C3.16748 9.04774 3.18252 9.12877 3.21175 9.20438C3.24098 9.27998 3.28382 9.34867 3.33783 9.40654L5.77616 12.019C6.00366 12.2628 6.37116 12.2628 6.59866 12.019L12.7703 5.40654C12.8794 5.28968 12.9407 5.13118 12.9407 4.96591C12.9407 4.80064 12.8794 4.64215 12.7703 4.52529C12.6613 4.40843 12.5133 4.34277 12.3591 4.34277C12.2048 4.34277 12.0569 4.40843 11.9478 4.52529L6.18449 10.694Z"
                                            fill="white" />
                                    </svg>
                                </span>
                                <div class="ticker">
                                    <div class="theme-img-container">
                                        <img src="{{ $theme->Image }}" class="img-fluid" alt="theme">
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            @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="formSubmit">
            {{__("Select theme")}}
        </button>
    </div>
    </form>
</section>
@endsection

@section('js')
<script>
$(document).ready(function(){
    $(".form-check").on("click" , function(){
        $(".ticker").removeClass("active");
        $(this).find(".ticker").addClass("active");
        $(".form-submit").removeClass("d-none");
    })
})
</script>
@endsection

CANCEL