migrate to gtea from bistbucket
This commit is contained in:
60
resources/views/web/components/blog.blade.php
Normal file
60
resources/views/web/components/blog.blade.php
Normal file
@@ -0,0 +1,60 @@
|
||||
<section class="blog-section p-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-8">
|
||||
<div class="row">
|
||||
@foreach ($blogs as $blog)
|
||||
<div class="col-lg-6 pb-4">
|
||||
<div class="blog-shadow rounded-16">
|
||||
<div class="text-center blog-image mb-3">
|
||||
<img src="{{ asset($blog->image) }}" alt="product-image"
|
||||
class="w-100 h-100 object-fit-cover rounded-8" />
|
||||
</div>
|
||||
<div class="p-3 pt-0">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<img src="assets/web/images/icons/clock.svg" alt="" />
|
||||
<p class="ms-1 mb-0">{{ formatted_date($blog->updated_at) }}</p>
|
||||
</div>
|
||||
<h6 class="h6-line-clamp">{{ $blog->title }}</h6>
|
||||
<p>
|
||||
{!! Str::limit(strip_tags($blog->descriptions), 120) !!}
|
||||
@if (strpos($blog->descriptions, '<img') !== false)
|
||||
<span class="text-muted"></span>
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<br>
|
||||
<a href="{{ route('blogs.show', $blog->slug) }}"
|
||||
class="custom-clr-primary">{{ $page_data['headings']['blog_btn_text'] ?? '' }}<span
|
||||
class="font-monospace">></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
@foreach ($recent_blogs as $blog)
|
||||
<div class="blog-shadow rounded-16 mb-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="{{ asset($blog->image) }}"
|
||||
class="object-fit-cover rounded-1 home-blog-small-image" alt="..." />
|
||||
<div class="mx-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="assets/web/images/icons/clock.svg" alt="" />
|
||||
<p class="ms-1 mb-0">{{ formatted_date($blog->updated_at) }}</p>
|
||||
</div>
|
||||
<p class="p-2nd-line-clamp mb-1">
|
||||
<strong>{{ $blog->title }}</strong>
|
||||
</p>
|
||||
<a href="{{ route('blogs.show', $blog->slug) }}"
|
||||
class="custom-clr-primary">{{ $page_data['headings']['blog_btn_text'] ?? '' }}<span
|
||||
class="font-monospace">></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
21
resources/views/web/components/feature.blade.php
Normal file
21
resources/views/web/components/feature.blade.php
Normal file
@@ -0,0 +1,21 @@
|
||||
<section class="service-section">
|
||||
<div class="container">
|
||||
<div class="section-title text-center">
|
||||
<h2>{{ $page_data['headings']['feature_title'] ?? '' }}</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
@foreach ($features as $feature)
|
||||
<div class="col-6 col-md-4 col-lg-3 mb-4">
|
||||
<div class="text-center service-card" style="background: {{ $feature->bg_color }}">
|
||||
<div class="image">
|
||||
<img src="{{ asset($feature->image) }}" alt="image" />
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h6>{{ $feature->title }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
81
resources/views/web/components/plan.blade.php
Normal file
81
resources/views/web/components/plan.blade.php
Normal file
@@ -0,0 +1,81 @@
|
||||
<section class="pricing-plan-section plans-list">
|
||||
<div class="container">
|
||||
<div class="section-title text-center">
|
||||
<h2>{{ $page_data['headings']['pricing_title'] ?? '' }}</h2>
|
||||
<p class="section-description">
|
||||
{{ $page_data['headings']['pricing_description'] ?? '' }}
|
||||
</p>
|
||||
<div class="d-flex align-items-center justify-content-center gap-4">
|
||||
<div class="w-100 d-flex flex-column align-items-center">
|
||||
|
||||
<div class="tab-content w-100">
|
||||
<div class="tab-pane fade show active" id="nav-monthly" role="tabpanel"
|
||||
aria-labelledby="nav-monthly-tab">
|
||||
<div class="row">
|
||||
@foreach ($plans as $plan)
|
||||
<div class="col-12 col-md-6 col-lg-4 mt-3">
|
||||
<div class="card">
|
||||
<div class="card-header py-3 border-0 font-size-update">
|
||||
<p>{{ $plan['subscriptionName'] ?? '' }}</p>
|
||||
<h4>
|
||||
@if (($plan['offerPrice'] && $plan['subscriptionPrice'] !== null) || $plan['offerPrice'] || $plan['subscriptionPrice'])
|
||||
@if ($plan['offerPrice'])
|
||||
{{ currency_format($plan['offerPrice']) }}
|
||||
@else
|
||||
{{ currency_format($plan['subscriptionPrice']) }}
|
||||
@endif
|
||||
@else
|
||||
@if ($plan['offerPrice'] || $plan['subscriptionPrice'])
|
||||
{{ currency_format($plan['offerPrice'] ?? $plan['subscriptionPrice']) }}
|
||||
@else
|
||||
{{ __('Free') }}
|
||||
@endif
|
||||
@endif
|
||||
<span class="price-span">/{{ $plan['duration'] . ' ' . __('Days') }}</span>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body text-start">
|
||||
<p>{{ __('Features Of Free Plan') }} 👇</p>
|
||||
|
||||
<ul>
|
||||
@foreach ($plan['features'] ?? [] as $key => $item)
|
||||
<li>
|
||||
<i class="fas {{ isset($item[1]) ? 'fa-check-circle text-success' : 'fa-times-circle text-danger' }} me-1"></i>
|
||||
{{ $item[0] ?? '' }}
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
@if (moduleCheck('MultiBranchAddon'))
|
||||
<li><i class="fas {{ $plan->allow_multibranch == 1 ? 'fa-check-circle text-success' : 'fa-times-circle text-danger' }} me-1"></i>
|
||||
{{ __('Multi-branch Allowed') }}
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if (moduleCheck('CustomDomainAddon'))
|
||||
<li><i class="fas {{ $plan->addon_domain_limit > 0 ? 'fa-check-circle text-success' : 'fa-times-circle text-danger' }} me-1"></i>
|
||||
{{ $plan->addon_domain_limit > 0 ? __('Addon Limit:') . ' ' . $plan->addon_domain_limit : __('Addon Domain Available?') }}
|
||||
</li>
|
||||
|
||||
<li><i class="fas {{ $plan->subdomain_limit > 0 ? 'fa-check-circle text-success' : 'fa-times-circle text-danger' }} me-1"></i>
|
||||
{{ $plan->subdomain_limit > 0 ? __('Subdomain Limit:') . ' ' . $plan->subdomain_limit : __('Subdomain Available?') }}
|
||||
</li>
|
||||
@endif
|
||||
|
||||
</ul>
|
||||
|
||||
<a class="btn subscribe-plan d-block mt-4 mb-2" data-plan-id="{{ $plan->id }}" data-google-url="{{ url('login/google?plan_id=') . $plan->id }}" data-twitter-url="{{ url('login/twitter?plan_id=') . $plan->id }}">{{ __('Buy Now') }}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<input type="hidden" value="{{ route('get-business-categories') }}" id="get-business-categories">
|
||||
169
resources/views/web/components/signup.blade.php
Normal file
169
resources/views/web/components/signup.blade.php
Normal file
@@ -0,0 +1,169 @@
|
||||
<!-- create free account Modal Start -->
|
||||
<div class="modal fade" id="createFreeAccount" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content success-content">
|
||||
<div class="modal-header border-bottom-0">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body create-account-body pt-0">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<img class="create-account-logo" src="{{ asset(get_option('general')['common_header_logo'] ?? 'assets/img/icon/1.svg') }}" alt="">
|
||||
</div>
|
||||
<h4 class="text-center">{{ __('Create an Free Account!') }}</h4>
|
||||
<p class="text-center">{{ __('Hey, Enter Your details to get Sign Up to your account') }}</p>
|
||||
|
||||
<form action="{{ route('register') }}" method="post" class="sign_up_form">
|
||||
@csrf
|
||||
|
||||
<div class="">
|
||||
<div class="mt-2 ">
|
||||
<label class="custom-label">{{ __('Email') }}</label>
|
||||
<input type="email" placeholder="{{ __('Enter Email Address') }}" class="form-control" name="email" />
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="custom-label">{{ __('Password') }}</label>
|
||||
<input type="hidden" value="" id="plan_id" name="plan_id">
|
||||
<input type="password" placeholder="{{ __('Enter Password') }}" class="form-control" name="password" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn login-btn submit-btn mt-4 " type="submit">
|
||||
{{ __('Sign Up') }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@if (moduleCheck('SocialLoginAddon'))
|
||||
<div class="d-flex align-items-center ">
|
||||
<hr class="flex-grow-1 border-1 border-secondary-subtle" />
|
||||
<span class="px-3 text-muted">{{ __('Or Continue with') }}</span>
|
||||
<hr class="flex-grow-1 border-1 border-secondary-subtle" />
|
||||
</div>
|
||||
|
||||
<div class="social-login my-3">
|
||||
<div class=" d-flex align-items-center justify-content-center">
|
||||
<a href="{{ url('login/twitter') }}" class="login-social x-login w-100 text-center">
|
||||
<img src="{{ 'assets/img/icon/X.jpg' }}" alt="Not found">
|
||||
{{ __('Log in with X') }}
|
||||
</a>
|
||||
</div>
|
||||
<div class=" d-flex align-items-center justify-content-center">
|
||||
<a href="" class="login-social google-login w-100 text-center">
|
||||
<img src="{{ 'assets/img/icon/google.svg' }}" alt="">
|
||||
{{ __('Log in with Google') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<p class="text-center m-2 have-account">{{ __('Already have an Account?') }} <a href="{{ route('login') }}">{{ __('Log In') }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- create free account Modal end -->
|
||||
|
||||
<!--Verify Modal Start -->
|
||||
<div class="modal fade" id="verifymodal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content verify-content">
|
||||
<div class="modal-header border-bottom-0">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body verify-modal-body text-center">
|
||||
|
||||
<h4 class="mb-0">{{ __('Email Verification') }}</h4>
|
||||
<p class="des p-8-0 pb-3">{{ __('we sent an OTP in your email address') }} <br>
|
||||
<span id="dynamicEmail"></span>
|
||||
</p>
|
||||
<form action="{{ route('otp-submit') }}" method="post" class="verify_form">
|
||||
@csrf
|
||||
<div class="code-input pin-container">
|
||||
<input class="pin-input otp-input" id="pin-1" type="number" name="otp[]" maxlength="1">
|
||||
<input class="pin-input otp-input" id="pin-2" type="number" name="otp[]" maxlength="1">
|
||||
<input class="pin-input otp-input" id="pin-3" type="number" name="otp[]" maxlength="1">
|
||||
<input class="pin-input otp-input" id="pin-4" type="number" name="otp[]" maxlength="1">
|
||||
<input class="pin-input otp-input" id="pin-5" type="number" name="otp[]" maxlength="1">
|
||||
<input class="pin-input otp-input" id="pin-6" type="number" name="otp[]" maxlength="1">
|
||||
</div>
|
||||
|
||||
<p class="des p-24-0 pt-2">
|
||||
{{ __('Code send in') }} <span id="countdown" class="countdown"></span>
|
||||
<span class="reset text-primary cursor-pointer" id="otp-resend" data-route="{{ route('otp-resend') }}">{{ __('Resend code') }}</span>
|
||||
</p>
|
||||
<button class="verify-btn btn btn-outline-danger submit-btn">{{ __('Verify') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Verify Modal end -->
|
||||
|
||||
<!-- setup profile Modal Start -->
|
||||
<div class="modal fade" id="setupAccountModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content success-content">
|
||||
<div class="modal-header border-bottom-0">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body setup-account-body pt-0">
|
||||
<h4 class="text-center mb-3">{{ __('Setup Your Profile') }}</h4>
|
||||
<form action="{{ route('business-setup') }}" method="post" class="business_setup_form">
|
||||
@csrf
|
||||
|
||||
<div class="">
|
||||
<div class="mt-2">
|
||||
<label class="custom-label">{{ __('Company/Business Name') }} <span class="text-danger">*</span></label>
|
||||
<input type="text" placeholder="{{ __('Enter company/business name') }}" class="form-control" name="companyName" required />
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<label class="custom-label">{{ __('Business Category') }}</label>
|
||||
<select class="form-control business-categories" name="business_category_id">
|
||||
<option value="">{{ __('Select a category') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<label class="custom-label">{{ __('Opening Balance') }}</label>
|
||||
<input type="number" step="any" placeholder="{{ __('Ex: $500') }}" class="form-control" name="shopOpeningBalance" />
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<label class="custom-label">{{ __('Phone') }}</label>
|
||||
<input type="text" placeholder="{{ __('Enter phone number') }}" class="form-control" name="phoneNumber" />
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<label class="custom-label">{{ __('Company Address') }}</label>
|
||||
<textarea placeholder="{{ __('Enter company address') }}" class="form-control" name="address"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="submit-btn btn btn-primary text-white mt-4 btn-outline-danger" type="submit">
|
||||
{{ __('Continue') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- setup profile Modal end -->
|
||||
|
||||
<!-- success Modal Start -->
|
||||
<div class="modal fade" id="successModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content success-content">
|
||||
<div class="modal-header border-bottom-0">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body success-modal-body text-center">
|
||||
<img src="{{ asset(get_option('general')['common_header_logo'] ?? 'assets/img/icon/1.svg') }}" alt="">
|
||||
<h4>{{ __('Successfully!') }}</h4>
|
||||
<p>{{ __('Congratulations, Your account has been') }} <br> {{ __('successfully created') }}</p>
|
||||
<a href="{{ get_option('general')['app_link'] ?? '' }}" target="_blank" class="cancel-btn btn btn-outline-danger">{{ __('Download Apk') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--success Modal end -->
|
||||
514
resources/views/web/components/term.blade.php
Normal file
514
resources/views/web/components/term.blade.php
Normal file
@@ -0,0 +1,514 @@
|
||||
@extends('layouts.web.master')
|
||||
|
||||
@section('title')
|
||||
{{ __('Terms & Conditions') }}
|
||||
@endsection
|
||||
|
||||
@section('main_content')
|
||||
|
||||
<div id="reading-progress"></div>
|
||||
|
||||
<button id="toc-toggle">
|
||||
☰ Contents
|
||||
</button>
|
||||
|
||||
<section class="banner-bg py-4">
|
||||
<div class="container">
|
||||
<p class="mb-0 fw-semibold custom-clr-dark">
|
||||
{{ __('Home') }} <span class="mx-1">></span> {{ __('Terms & Conditions') }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@php
|
||||
|
||||
function generateTermsHTML($text){
|
||||
|
||||
if(!$text) return ['html'=>'','toc'=>[]];
|
||||
|
||||
$text=e($text);
|
||||
|
||||
$lines=preg_split("/\r\n|\n|\r/",$text);
|
||||
|
||||
$html="";
|
||||
$toc=[];
|
||||
$inList=false;
|
||||
|
||||
foreach($lines as $line){
|
||||
|
||||
$line=trim($line);
|
||||
|
||||
if($line===''){
|
||||
|
||||
if($inList){
|
||||
$html.="</ul>";
|
||||
$inList=false;
|
||||
}
|
||||
|
||||
continue;
|
||||
|
||||
}
|
||||
|
||||
/* main heading */
|
||||
|
||||
if(preg_match('/^(\d+)\.\s+(.*)$/',$line,$match)){
|
||||
|
||||
if($inList){
|
||||
$html.="</ul>";
|
||||
$inList=false;
|
||||
}
|
||||
|
||||
$id="section-".$match[1];
|
||||
|
||||
$toc[]=[
|
||||
'id'=>$id,
|
||||
'title'=>$match[1].". ".$match[2]
|
||||
];
|
||||
|
||||
$html.="<h3 id='$id' class='terms-heading'>
|
||||
{$match[1]}. {$match[2]}
|
||||
<a href='#$id' class='anchor-link'>#</a>
|
||||
</h3>";
|
||||
|
||||
continue;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* sub heading */
|
||||
|
||||
if(preg_match('/^(\d+\.\d+)\s+(.*)$/',$line,$match)){
|
||||
|
||||
if($inList){
|
||||
$html.="</ul>";
|
||||
$inList=false;
|
||||
}
|
||||
|
||||
$html.="<h4 class='terms-subheading'>{$match[1]} {$match[2]}</h4>";
|
||||
|
||||
continue;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* bullet */
|
||||
|
||||
if(preg_match('/^[•\-]\s*(.*)$/u',$line,$match)){
|
||||
|
||||
if(!$inList){
|
||||
$html.="<ul class='terms-list'>";
|
||||
$inList=true;
|
||||
}
|
||||
|
||||
$html.="<li>{$match[1]}</li>";
|
||||
|
||||
continue;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* paragraph */
|
||||
|
||||
if($inList){
|
||||
$html.="</ul>";
|
||||
$inList=false;
|
||||
}
|
||||
|
||||
$html.="<p>$line</p>";
|
||||
|
||||
}
|
||||
|
||||
if($inList){
|
||||
$html.="</ul>";
|
||||
}
|
||||
|
||||
return[
|
||||
'html'=>$html,
|
||||
'toc'=>$toc
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
$data1=generateTermsHTML($term_condition->value['description_one'] ?? '');
|
||||
$data2=generateTermsHTML($term_condition->value['description_two'] ?? '');
|
||||
|
||||
$toc=array_merge($data1['toc'],$data2['toc']);
|
||||
|
||||
@endphp
|
||||
|
||||
|
||||
|
||||
<section class="terms-wrapper py-5">
|
||||
<div class="container">
|
||||
|
||||
<div class="row g-4">
|
||||
|
||||
|
||||
<div class="col-lg-3">
|
||||
|
||||
<div class="terms-sidebar">
|
||||
|
||||
<div class="sidebar-title">
|
||||
Contents
|
||||
</div>
|
||||
|
||||
<input type="text" id="toc-search" placeholder="Search section...">
|
||||
|
||||
<ul id="toc-list">
|
||||
|
||||
@foreach($toc as $item)
|
||||
|
||||
<li>
|
||||
<a href="#{{ $item['id'] }}">
|
||||
{{ $item['title'] }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-lg-9">
|
||||
|
||||
<div class="terms-card">
|
||||
|
||||
<h1 class="terms-title">
|
||||
{{ $term_condition->value['term_title'] ?? '' }}
|
||||
</h1>
|
||||
|
||||
<div class="terms-content">
|
||||
{!! $data1['html'] !!}
|
||||
</div>
|
||||
|
||||
<div class="terms-content mt-4">
|
||||
{!! $data2['html'] !!}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
/* progress bar */
|
||||
|
||||
#reading-progress{
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
height:3px;
|
||||
background:linear-gradient(90deg,#6366f1,#8b5cf6);
|
||||
width:0%;
|
||||
z-index:9999;
|
||||
}
|
||||
|
||||
|
||||
/* mobile button */
|
||||
|
||||
#toc-toggle{
|
||||
display:none;
|
||||
position:fixed;
|
||||
bottom:20px;
|
||||
right:20px;
|
||||
background:#6366f1;
|
||||
color:#fff;
|
||||
border:none;
|
||||
padding:12px 16px;
|
||||
border-radius:8px;
|
||||
font-size:14px;
|
||||
box-shadow:0 10px 25px rgba(0,0,0,.15);
|
||||
z-index:1000;
|
||||
}
|
||||
|
||||
|
||||
/* wrapper */
|
||||
|
||||
.terms-wrapper{
|
||||
background:linear-gradient(180deg,#f8fafc,#f1f5f9);
|
||||
}
|
||||
|
||||
|
||||
/* card */
|
||||
|
||||
.terms-card{
|
||||
background:rgba(255,255,255,0.95);
|
||||
backdrop-filter:blur(8px);
|
||||
padding:55px;
|
||||
border-radius:16px;
|
||||
box-shadow:0 15px 40px rgba(0,0,0,.06);
|
||||
transition:.3s;
|
||||
}
|
||||
|
||||
.terms-card:hover{
|
||||
box-shadow:0 20px 50px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
|
||||
/* title */
|
||||
|
||||
.terms-title{
|
||||
font-size:34px;
|
||||
font-weight:700;
|
||||
margin-bottom:35px;
|
||||
}
|
||||
|
||||
|
||||
/* typography */
|
||||
|
||||
.terms-content{
|
||||
font-size:16px;
|
||||
line-height:1.9;
|
||||
color:#334155;
|
||||
text-align:justify;
|
||||
}
|
||||
|
||||
.terms-content p{
|
||||
margin-bottom:15px;
|
||||
text-align:justify;
|
||||
text-indent:28px;
|
||||
}
|
||||
|
||||
|
||||
/* heading */
|
||||
|
||||
.terms-heading{
|
||||
font-size:23px;
|
||||
font-weight:700;
|
||||
margin-top:45px;
|
||||
margin-bottom:12px;
|
||||
padding-left:12px;
|
||||
border-left:4px solid #6366f1;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
|
||||
/* anchor */
|
||||
|
||||
.anchor-link{
|
||||
margin-left:8px;
|
||||
font-size:13px;
|
||||
opacity:0;
|
||||
text-decoration:none;
|
||||
color:#94a3b8;
|
||||
}
|
||||
|
||||
.terms-heading:hover .anchor-link{
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
|
||||
/* sub */
|
||||
|
||||
.terms-subheading{
|
||||
font-size:18px;
|
||||
font-weight:600;
|
||||
margin-top:25px;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
|
||||
/* list */
|
||||
|
||||
.terms-list{
|
||||
list-style:none;
|
||||
padding:0;
|
||||
margin:12px 0;
|
||||
}
|
||||
|
||||
.terms-list li{
|
||||
padding-left:22px;
|
||||
position:relative;
|
||||
margin-bottom:7px;
|
||||
}
|
||||
|
||||
.terms-list li::before{
|
||||
content:"•";
|
||||
position:absolute;
|
||||
left:0;
|
||||
font-size:18px;
|
||||
color:#6366f1;
|
||||
}
|
||||
|
||||
|
||||
/* sidebar */
|
||||
|
||||
.terms-sidebar{
|
||||
position:sticky;
|
||||
top:110px;
|
||||
background:#fff;
|
||||
padding:22px;
|
||||
border-radius:14px;
|
||||
box-shadow:0 8px 25px rgba(0,0,0,.05);
|
||||
max-height:75vh;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.sidebar-title{
|
||||
font-weight:700;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
|
||||
/* search */
|
||||
|
||||
#toc-search{
|
||||
width:100%;
|
||||
padding:8px 10px;
|
||||
border-radius:6px;
|
||||
border:1px solid #e2e8f0;
|
||||
margin-bottom:12px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
|
||||
/* links */
|
||||
|
||||
.terms-sidebar ul{
|
||||
list-style:none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.terms-sidebar li{
|
||||
margin-bottom:7px;
|
||||
}
|
||||
|
||||
.terms-sidebar a{
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
font-size:14px;
|
||||
padding:6px 8px;
|
||||
border-radius:6px;
|
||||
color:#475569;
|
||||
transition:.2s;
|
||||
}
|
||||
|
||||
.terms-sidebar a:hover{
|
||||
background:#eef2ff;
|
||||
color:#6366f1;
|
||||
}
|
||||
|
||||
.terms-sidebar a.active{
|
||||
background:#6366f1;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
|
||||
/* mobile */
|
||||
|
||||
@media(max-width:992px){
|
||||
|
||||
.terms-sidebar{
|
||||
position:fixed;
|
||||
left:-280px;
|
||||
top:0;
|
||||
width:260px;
|
||||
height:100%;
|
||||
z-index:1000;
|
||||
transition:.3s;
|
||||
}
|
||||
|
||||
.terms-sidebar.open{
|
||||
left:0;
|
||||
}
|
||||
|
||||
#toc-toggle{
|
||||
display:block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
/* progress bar */
|
||||
|
||||
window.addEventListener("scroll",function(){
|
||||
|
||||
let winScroll=document.documentElement.scrollTop;
|
||||
|
||||
let height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
|
||||
|
||||
let scrolled=(winScroll/height)*100;
|
||||
|
||||
document.getElementById("reading-progress").style.width=scrolled+"%";
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* scroll spy */
|
||||
|
||||
const sections=document.querySelectorAll("h3[id]");
|
||||
const navLinks=document.querySelectorAll("#toc-list a");
|
||||
|
||||
window.addEventListener("scroll",()=>{
|
||||
|
||||
let current="";
|
||||
|
||||
sections.forEach(section=>{
|
||||
|
||||
const sectionTop=section.offsetTop;
|
||||
|
||||
if(pageYOffset>=sectionTop-120){
|
||||
current=section.getAttribute("id");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
navLinks.forEach(link=>{
|
||||
|
||||
link.classList.remove("active");
|
||||
|
||||
if(link.getAttribute("href")==="#"+current){
|
||||
link.classList.add("active");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* sidebar search */
|
||||
|
||||
document.getElementById("toc-search").addEventListener("keyup",function(){
|
||||
|
||||
let value=this.value.toLowerCase();
|
||||
|
||||
document.querySelectorAll("#toc-list li").forEach(li=>{
|
||||
|
||||
let text=li.innerText.toLowerCase();
|
||||
|
||||
li.style.display=text.includes(value) ? "block" : "none";
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* mobile toggle */
|
||||
|
||||
document.getElementById("toc-toggle").onclick=function(){
|
||||
|
||||
document.querySelector(".terms-sidebar").classList.toggle("open");
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user