kulakpos_web/resources/views/web/policy/index.blade.php

@extends('layouts.web.master')

@section('title')
{{ __('Privacy Policy') }}
@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> {{ __('Privacy Policy') }}
</p>
</div>
</section>


@php

function generatePolicyHTML($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='policy-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='policy-subheading'>{$match[1]} {$match[2]}</h4>";

continue;

}

/* bullet */
if(preg_match('/^[•\-]\s*(.*)$/u',$line,$match)){

if(!$inList){
$html.="<ul class='policy-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=generatePolicyHTML($privacy_policy->value['description_one'] ?? '');
$data2=generatePolicyHTML($privacy_policy->value['description_two'] ?? '');

$toc=array_merge($data1['toc'],$data2['toc']);

@endphp



<section class="policy-wrapper py-5">
<div class="container">

<div class="row g-4">


{{-- SIDEBAR --}}
<div class="col-lg-3">

<div class="policy-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>



{{-- CONTENT --}}
<div class="col-lg-9">

<div class="policy-card">

<h1 class="policy-title">
{{ $privacy_policy->value['privacy_title'] ?? ''}}
</h1>

<div class="policy-content">
{!! $data1['html'] !!}
</div>

<div class="policy-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 */

.policy-wrapper{
background:linear-gradient(180deg,#f8fafc,#f1f5f9);
}


/* card */

.policy-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;
}

.policy-card:hover{
box-shadow:0 20px 50px rgba(0,0,0,.08);
}


/* title */

.policy-title{
font-size:34px;
font-weight:700;
margin-bottom:35px;
}


/* typography */

.policy-content{
font-size:16px;
line-height:1.9;
color:#334155;
}

.policy-content p{
margin-bottom:15px;
}


/* heading */

.policy-heading{
font-size:23px;
font-weight:700;
margin-top:45px;
margin-bottom:12px;
position:relative;
padding-left:12px;
border-left:4px solid #6366f1;
}


/* anchor */

.anchor-link{
margin-left:8px;
font-size:13px;
opacity:0;
text-decoration:none;
color:#94a3b8;
}

.policy-heading:hover .anchor-link{
opacity:1;
}


/* sub heading */

.policy-subheading{
font-size:18px;
font-weight:600;
margin-top:25px;
margin-bottom:6px;
}


/* list */

.policy-list{
list-style:none;
padding:0;
margin:12px 0;
}

.policy-list li{
padding-left:22px;
position:relative;
margin-bottom:7px;
}

.policy-list li::before{
content:"•";
position:absolute;
left:0;
font-size:18px;
color:#6366f1;
}


/* sidebar */

.policy-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 */

.policy-sidebar ul{
list-style:none;
padding:0;
margin:0;
}

.policy-sidebar li{
margin-bottom:7px;
}

.policy-sidebar a{
display:block;
text-decoration:none;
font-size:14px;
padding:6px 8px;
border-radius:6px;
color:#475569;
transition:.2s;
}

.policy-sidebar a:hover{
background:#eef2ff;
color:#6366f1;
}

.policy-sidebar a.active{
background:#6366f1;
color:#fff;
}


/* mobile */

@media(max-width:992px){

.policy-sidebar{
position:fixed;
left:-280px;
top:0;
width:260px;
height:100%;
z-index:1000;
transition:.3s;
}

.policy-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");
}

});

});


/* 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(".policy-sidebar").classList.toggle("open");

};

</script>

@endsection