514 lines
6.3 KiB
PHP
514 lines
6.3 KiB
PHP
@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 |