initial commit
This commit is contained in:
@@ -0,0 +1,278 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">About us</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 alt-font breadcrumb justify-content-center justify-content-md-end text-small sm-margin-10px-top">
|
||||
<!-- start breadcrumb -->
|
||||
<ul>
|
||||
<li><a href="{{url('')}}" class="text-dark-gray">Home</a></li>
|
||||
<!-- <li><a href="#" class="text-dark-gray">About</a></li> -->
|
||||
<li class="text-dark-gray">About us</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
<!-- start section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-4 text-center text-lg-start md-margin-30px-bottom md-padding-80px-lr sm-padding-15px-lr wow animate__fadeIn">
|
||||
<img src="images/logo_thegreaterchiangmai_2.png" class="logo-dark margin-20px-bottom" alt="GREATER CHIANG MAI">
|
||||
<!-- <h5 class="alt-font font-weight-700 text-extra-dark-gray text-uppercase w-80 lg-w-100">THE GREATER CHIANG MAI</h5> -->
|
||||
<div class="separator-line-verticle-extra-small bg-extra-dark-gray w-50 md-w-70 mx-auto ms-lg-0 margin-30px-bottom md-margin-20px-bottom"></div>
|
||||
<p class="w-95 lg-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
|
||||
when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
|
||||
<!-- <a class="btn btn-small btn-dark-gray font-weight-700" href="team-simple.html">Meet Out Team</a> -->
|
||||
</div>
|
||||
<div class="col-12 col-lg-4 col-md-6 sm-margin-15px-bottom wow animate__fadeIn" data-wow-delay="0.2s">
|
||||
<img src="images/about/01pic_about.jpg" alt="GREATER CHIANG MAI"/>
|
||||
</div>
|
||||
<div class="col-12 col-lg-4 col-md-6 wow animate__fadeIn" data-wow-delay="0.4s">
|
||||
<img src="images/about/02pic_about.jpg" alt="GREATER CHIANG MAI"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end section -->
|
||||
<!-- start feature box section -->
|
||||
<section class="p-0 wow animate__fadeIn bg-light-gray">
|
||||
<div class="container-fluid">
|
||||
<div class="row row-cols-1 row-cols-lg-2">
|
||||
<div class="col cover-background md-h-500px sm-h-350px wow animate__fadeInLeft" style="background-image:url('images/banner/image_2.jpg');"><div class="h-sm-400px"></div></div>
|
||||
<div class="col padding-five-tb padding-five-half-lr lg-padding-50px-tb md-padding-70px-tb md-padding-15px-lr wow animate__fadeInRight">
|
||||
<div class="row justify-content-center m-0">
|
||||
<div class="col-12 col-md-12 col-sm-8 margin-four-bottom lg-margin-six-bottom md-margin-40px-bottom sm-margin-30px-bottom sm-no-padding-lr text-center text-md-start">
|
||||
<h5 class="alt-font text-extra-dark-gray text-center text-lg-start text-uppercase font-weight-700 md-w-70 mx-auto mx-lg-0 md-no-margin-bottom sm-w-100">GREATER CHIANG MAI</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-xl-2 row-cols-lg-1 row-cols-md-2 row-cols-sm-2 justify-content-center m-0">
|
||||
<!-- start feature box item-->
|
||||
<div class="col margin-six-bottom md-margin-40px-bottom last-paragraph-no-margin text-center text-md-start">
|
||||
<div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">01.</span>We believe in Tradition</div>
|
||||
<p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- start feature box item-->
|
||||
<div class="col margin-six-bottom md-margin-40px-bottom last-paragraph-no-margin text-center text-md-start">
|
||||
<div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">02.</span>We believe in Culture</div>
|
||||
<p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- start feature box item-->
|
||||
<div class="col lg-margin-six-bottom md-margin-40px-bottom last-paragraph-no-margin text-center text-md-start">
|
||||
<div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">03.</span>We believe in Rituals</div>
|
||||
<p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- start feature box item-->
|
||||
<div class="col last-paragraph-no-margin text-center text-md-start">
|
||||
<div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">04.</span>We believe in relation</div>
|
||||
<p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end feature box section -->
|
||||
<!-- start counter section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-4">
|
||||
<!-- start counter item-->
|
||||
<div class="col text-center md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp">
|
||||
<div class="counter-feature-box-1 w-100 padding-5px-all">
|
||||
<div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
|
||||
<i class="icon-camera icon-medium text-medium-gray margin-15px-bottom"></i>
|
||||
<h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="450" data-speed="2000">450</h6>
|
||||
<span>IMAGES</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end counter item-->
|
||||
<!-- start counter item-->
|
||||
<div class="col text-center md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp" data-wow-delay="0.2s">
|
||||
<div class="counter-feature-box-1 w-100 padding-5px-all">
|
||||
<div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
|
||||
<i class="icon-laptop icon-medium text-medium-gray margin-15px-bottom"></i>
|
||||
<h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="390" data-speed="2000">390</h6>
|
||||
<span>VDO</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end counter item-->
|
||||
<!-- start counter item-->
|
||||
<div class="col text-center xs-margin-15px-bottom wow animate__fadeInUp" data-wow-delay="0.4s">
|
||||
<div class="counter-feature-box-1 w-100 padding-5px-all">
|
||||
<div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
|
||||
<i class="icon-mic icon-medium text-medium-gray margin-15px-bottom"></i>
|
||||
<h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="580" data-speed="2000">580</h6>
|
||||
<span>SOUND</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end counter item-->
|
||||
<!-- start counter item-->
|
||||
<div class="col text-center wow animate__fadeInUp" data-wow-delay="0.6s">
|
||||
<div class="counter-feature-box-1 w-100 padding-5px-all">
|
||||
<div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
|
||||
<i class="far fa-file icon-medium text-medium-gray margin-15px-bottom"></i>
|
||||
<h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="674" data-speed="2000">674</h6>
|
||||
<span>DOCUMENTS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end counter item-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end feature box section -->
|
||||
<!-- start parallax section -->
|
||||
<section class="wow animate__fadeIn p-0 parallax one-fourth-screen md-h-500px sm-h-350px background-position-x-50" data-parallax-background-ratio="0.5" style="background-image: url('images/banner/02banner.jpg')"></section>
|
||||
<!-- end parallax section -->
|
||||
<!-- start information section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<!-- start feature box item -->
|
||||
<div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-60px-bottom sm-margin-40px-bottom text-center text-md-start wow animate__fadeInRight">
|
||||
<h5 class="text-light-gray font-weight-300 alt-font mb-0">01</h5>
|
||||
<span class="text-extra-dark-gray alt-font text-large margin-15px-bottom d-block md-margin-5px-bottom">Title</span>
|
||||
<p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry. Lorem Ipsum has been.</p>
|
||||
<div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto mx-md-0"></div>
|
||||
</div>
|
||||
<!-- end feature box item -->
|
||||
<!-- start feature box item -->
|
||||
<div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-60px-bottom sm-margin-40px-bottom text-center text-md-start wow animate__fadeInRight" data-wow-delay="0.2s">
|
||||
<h5 class="text-light-gray font-weight-300 alt-font mb-0">02</h5>
|
||||
<span class="text-extra-dark-gray alt-font text-large margin-15px-bottom d-block md-margin-5px-bottom">Title</span>
|
||||
<p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry. Lorem Ipsum has been.</p>
|
||||
<div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto mx-md-0"></div>
|
||||
</div>
|
||||
<!-- end feature box item -->
|
||||
<!-- start feature box item -->
|
||||
<div class="col-12 col-lg-4 col-md-6 col-sm-8 text-center text-md-start wow animate__fadeInRight" data-wow-delay="0.4s">
|
||||
<h5 class="text-light-gray font-weight-300 alt-font mb-0">03</h5>
|
||||
<span class="text-extra-dark-gray alt-font text-large margin-15px-bottom d-block md-margin-5px-bottom">Title</span>
|
||||
<p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry. Lorem Ipsum has been.</p>
|
||||
<div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto mx-md-0"></div>
|
||||
</div>
|
||||
<!-- end feature box item -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end information sevtion -->
|
||||
<!-- start section -->
|
||||
<section class="extra-big-section parallax wow animate__fadeIn" data-parallax-background-ratio="0.5" style="background-image: url('images/banner/03banner.jpg')">
|
||||
<div class="opacity-full-dark bg-extra-dark-gray"></div>
|
||||
<div class="container position-relative">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-8 col-md-11 text-center">
|
||||
<div class="alt-font text-medium-gray text-uppercase text-small margin-20px-bottom">Greater Chiang Mai</div>
|
||||
<h5 class="text-light-gray alt-font margin-40px-bottom sm-margin-30px-bottom">Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry.</h5>
|
||||
<!-- <a href="portfolio-full-width-grid-overlay.html" class="btn btn-medium btn-white btn-rounded">Latest Portfolio</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end section -->
|
||||
<!-- start clients logo section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 align-items-center">
|
||||
<!-- start client logo item -->
|
||||
<div class="col margin-three-bottom text-center wow animate__fadeInDown">
|
||||
<a href="#"><img src="images/logo-7.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.2s">
|
||||
<a href="#"><img src="images/logo-8.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.4s">
|
||||
<a href="#"><img src="images/logo-7.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.6s">
|
||||
<a href="#"><img src="images/logo-8.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col md-margin-three-bottom text-center wow animate__fadeInDown">
|
||||
<a href="#"><img src="images/logo-7.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col md-margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.2s">
|
||||
<a href="#"><img src="images/logo-8.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col xs-margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.4s">
|
||||
<a href="#"><img src="images/logo-7.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col text-center wow animate__fadeInDown" data-wow-delay="0.6s">
|
||||
<a href="#"><img src="images/logo-8.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end clients logo section -->
|
||||
<!-- start section -->
|
||||
<section class="p-0 bg-light-gray wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12 col-lg-5 order-1 order-lg-2 text-center text-lg-start offset-lg-1 md-padding-50px-all sm-padding-15px-lr">
|
||||
<i class="fas fa-quote-left text-deep-pink icon-medium margin-15px-bottom"></i>
|
||||
<h5 class="text-extra-dark-gray alt-font text-uppercase font-weight-700">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h5>
|
||||
<p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
|
||||
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
||||
<img src="images/signature-dark.png" alt="" class="margin-15px-top">
|
||||
<span class="text-extra-dark-gray text-large d-block margin-30px-top alt-font font-weight-600">Name Surname</span>
|
||||
<span class="d-block">Greater Chiang Mai</span>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 order-2 order-lg-1 text-center align-self-end">
|
||||
<img src="images/about/03_about_us_greaterchiangmai.jpg" alt="GREATER CHIANG MAI">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end section -->
|
||||
<!-- start call to action section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-8 col-md-10 text-center">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end call to action section -->
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
|
||||
|
||||
|
||||
278
think.greaterchiangmai.com/resources/views/about/index.blade.php
Normal file
278
think.greaterchiangmai.com/resources/views/about/index.blade.php
Normal file
@@ -0,0 +1,278 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">About us</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 alt-font breadcrumb justify-content-center justify-content-md-end text-small sm-margin-10px-top">
|
||||
<!-- start breadcrumb -->
|
||||
<ul>
|
||||
<li><a href="{{url('')}}" class="text-dark-gray">หน้าแรก</a></li>
|
||||
<!-- <li><a href="#" class="text-dark-gray">About</a></li> -->
|
||||
<li class="text-dark-gray">เกี่ยวกับเรา</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
<!-- start section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-4 text-center text-lg-start md-margin-30px-bottom md-padding-80px-lr sm-padding-15px-lr wow animate__fadeIn">
|
||||
<img src="images/logo_thegreaterchiangmai_2.png" class="logo-dark margin-20px-bottom" alt="GREATER CHIANG MAI">
|
||||
<!-- <h5 class="alt-font font-weight-700 text-extra-dark-gray text-uppercase w-80 lg-w-100">THE GREATER CHIANG MAI</h5> -->
|
||||
<div class="separator-line-verticle-extra-small bg-extra-dark-gray w-50 md-w-70 mx-auto ms-lg-0 margin-30px-bottom md-margin-20px-bottom"></div>
|
||||
<p class="w-95 lg-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
|
||||
when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
|
||||
<!-- <a class="btn btn-small btn-dark-gray font-weight-700" href="team-simple.html">Meet Out Team</a> -->
|
||||
</div>
|
||||
<div class="col-12 col-lg-4 col-md-6 sm-margin-15px-bottom wow animate__fadeIn" data-wow-delay="0.2s">
|
||||
<img src="images/about/01pic_about.jpg" alt="GREATER CHIANG MAI"/>
|
||||
</div>
|
||||
<div class="col-12 col-lg-4 col-md-6 wow animate__fadeIn" data-wow-delay="0.4s">
|
||||
<img src="images/about/02pic_about.jpg" alt="GREATER CHIANG MAI"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end section -->
|
||||
<!-- start feature box section -->
|
||||
<section class="p-0 wow animate__fadeIn bg-light-gray">
|
||||
<div class="container-fluid">
|
||||
<div class="row row-cols-1 row-cols-lg-2">
|
||||
<div class="col cover-background md-h-500px sm-h-350px wow animate__fadeInLeft" style="background-image:url('images/banner/image_2.jpg');"><div class="h-sm-400px"></div></div>
|
||||
<div class="col padding-five-tb padding-five-half-lr lg-padding-50px-tb md-padding-70px-tb md-padding-15px-lr wow animate__fadeInRight">
|
||||
<div class="row justify-content-center m-0">
|
||||
<div class="col-12 col-md-12 col-sm-8 margin-four-bottom lg-margin-six-bottom md-margin-40px-bottom sm-margin-30px-bottom sm-no-padding-lr text-center text-md-start">
|
||||
<h5 class="alt-font text-extra-dark-gray text-center text-lg-start text-uppercase font-weight-700 md-w-70 mx-auto mx-lg-0 md-no-margin-bottom sm-w-100">GREATER CHIANG MAI</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-xl-2 row-cols-lg-1 row-cols-md-2 row-cols-sm-2 justify-content-center m-0">
|
||||
<!-- start feature box item-->
|
||||
<div class="col margin-six-bottom md-margin-40px-bottom last-paragraph-no-margin text-center text-md-start">
|
||||
<div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">01.</span>We believe in Tradition</div>
|
||||
<p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- start feature box item-->
|
||||
<div class="col margin-six-bottom md-margin-40px-bottom last-paragraph-no-margin text-center text-md-start">
|
||||
<div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">02.</span>We believe in Culture</div>
|
||||
<p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- start feature box item-->
|
||||
<div class="col lg-margin-six-bottom md-margin-40px-bottom last-paragraph-no-margin text-center text-md-start">
|
||||
<div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">03.</span>We believe in Rituals</div>
|
||||
<p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- start feature box item-->
|
||||
<div class="col last-paragraph-no-margin text-center text-md-start">
|
||||
<div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">04.</span>We believe in relation</div>
|
||||
<p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end feature box section -->
|
||||
<!-- start counter section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-4">
|
||||
<!-- start counter item-->
|
||||
<div class="col text-center md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp">
|
||||
<div class="counter-feature-box-1 w-100 padding-5px-all">
|
||||
<div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
|
||||
<i class="icon-camera icon-medium text-medium-gray margin-15px-bottom"></i>
|
||||
<h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="450" data-speed="2000">450</h6>
|
||||
<span>IMAGES</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end counter item-->
|
||||
<!-- start counter item-->
|
||||
<div class="col text-center md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp" data-wow-delay="0.2s">
|
||||
<div class="counter-feature-box-1 w-100 padding-5px-all">
|
||||
<div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
|
||||
<i class="icon-laptop icon-medium text-medium-gray margin-15px-bottom"></i>
|
||||
<h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="390" data-speed="2000">390</h6>
|
||||
<span>VDO</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end counter item-->
|
||||
<!-- start counter item-->
|
||||
<div class="col text-center xs-margin-15px-bottom wow animate__fadeInUp" data-wow-delay="0.4s">
|
||||
<div class="counter-feature-box-1 w-100 padding-5px-all">
|
||||
<div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
|
||||
<i class="icon-mic icon-medium text-medium-gray margin-15px-bottom"></i>
|
||||
<h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="580" data-speed="2000">580</h6>
|
||||
<span>SOUND</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end counter item-->
|
||||
<!-- start counter item-->
|
||||
<div class="col text-center wow animate__fadeInUp" data-wow-delay="0.6s">
|
||||
<div class="counter-feature-box-1 w-100 padding-5px-all">
|
||||
<div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
|
||||
<i class="far fa-file icon-medium text-medium-gray margin-15px-bottom"></i>
|
||||
<h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="674" data-speed="2000">674</h6>
|
||||
<span>DOCUMENTS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end counter item-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end feature box section -->
|
||||
<!-- start parallax section -->
|
||||
<section class="wow animate__fadeIn p-0 parallax one-fourth-screen md-h-500px sm-h-350px background-position-x-50" data-parallax-background-ratio="0.5" style="background-image: url('images/banner/02banner.jpg')"></section>
|
||||
<!-- end parallax section -->
|
||||
<!-- start information section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<!-- start feature box item -->
|
||||
<div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-60px-bottom sm-margin-40px-bottom text-center text-md-start wow animate__fadeInRight">
|
||||
<h5 class="text-light-gray font-weight-300 alt-font mb-0">01</h5>
|
||||
<span class="text-extra-dark-gray alt-font text-large margin-15px-bottom d-block md-margin-5px-bottom">Title</span>
|
||||
<p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry. Lorem Ipsum has been.</p>
|
||||
<div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto mx-md-0"></div>
|
||||
</div>
|
||||
<!-- end feature box item -->
|
||||
<!-- start feature box item -->
|
||||
<div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-60px-bottom sm-margin-40px-bottom text-center text-md-start wow animate__fadeInRight" data-wow-delay="0.2s">
|
||||
<h5 class="text-light-gray font-weight-300 alt-font mb-0">02</h5>
|
||||
<span class="text-extra-dark-gray alt-font text-large margin-15px-bottom d-block md-margin-5px-bottom">Title</span>
|
||||
<p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry. Lorem Ipsum has been.</p>
|
||||
<div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto mx-md-0"></div>
|
||||
</div>
|
||||
<!-- end feature box item -->
|
||||
<!-- start feature box item -->
|
||||
<div class="col-12 col-lg-4 col-md-6 col-sm-8 text-center text-md-start wow animate__fadeInRight" data-wow-delay="0.4s">
|
||||
<h5 class="text-light-gray font-weight-300 alt-font mb-0">03</h5>
|
||||
<span class="text-extra-dark-gray alt-font text-large margin-15px-bottom d-block md-margin-5px-bottom">Title</span>
|
||||
<p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry. Lorem Ipsum has been.</p>
|
||||
<div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto mx-md-0"></div>
|
||||
</div>
|
||||
<!-- end feature box item -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end information sevtion -->
|
||||
<!-- start section -->
|
||||
<section class="extra-big-section parallax wow animate__fadeIn" data-parallax-background-ratio="0.5" style="background-image: url('images/banner/03banner.jpg')">
|
||||
<div class="opacity-full-dark bg-extra-dark-gray"></div>
|
||||
<div class="container position-relative">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-8 col-md-11 text-center">
|
||||
<div class="alt-font text-medium-gray text-uppercase text-small margin-20px-bottom">Greater Chiang Mai</div>
|
||||
<h5 class="text-light-gray alt-font margin-40px-bottom sm-margin-30px-bottom">Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry.</h5>
|
||||
<!-- <a href="portfolio-full-width-grid-overlay.html" class="btn btn-medium btn-white btn-rounded">Latest Portfolio</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end section -->
|
||||
<!-- start clients logo section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 align-items-center">
|
||||
<!-- start client logo item -->
|
||||
<div class="col margin-three-bottom text-center wow animate__fadeInDown">
|
||||
<a href="#"><img src="images/logo-7.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.2s">
|
||||
<a href="#"><img src="images/logo-8.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.4s">
|
||||
<a href="#"><img src="images/logo-7.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.6s">
|
||||
<a href="#"><img src="images/logo-8.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col md-margin-three-bottom text-center wow animate__fadeInDown">
|
||||
<a href="#"><img src="images/logo-7.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col md-margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.2s">
|
||||
<a href="#"><img src="images/logo-8.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col xs-margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.4s">
|
||||
<a href="#"><img src="images/logo-7.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
<!-- start client logo item -->
|
||||
<div class="col text-center wow animate__fadeInDown" data-wow-delay="0.6s">
|
||||
<a href="#"><img src="images/logo-8.png" alt=""></a>
|
||||
</div>
|
||||
<!-- end client logo item -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end clients logo section -->
|
||||
<!-- start section -->
|
||||
<section class="p-0 bg-light-gray wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12 col-lg-5 order-1 order-lg-2 text-center text-lg-start offset-lg-1 md-padding-50px-all sm-padding-15px-lr">
|
||||
<i class="fas fa-quote-left text-deep-pink icon-medium margin-15px-bottom"></i>
|
||||
<h5 class="text-extra-dark-gray alt-font text-uppercase font-weight-700">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h5>
|
||||
<p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
|
||||
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
||||
<img src="images/signature-dark.png" alt="" class="margin-15px-top">
|
||||
<span class="text-extra-dark-gray text-large d-block margin-30px-top alt-font font-weight-600">Name Surname</span>
|
||||
<span class="d-block">Greater Chiang Mai</span>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 order-2 order-lg-1 text-center align-self-end">
|
||||
<img src="images/about/03_about_us_greaterchiangmai.jpg" alt="GREATER CHIANG MAI">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end section -->
|
||||
<!-- start call to action section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-8 col-md-10 text-center">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end call to action section -->
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{-- {{ $subCategoryView->name_en }}</h1> --}}
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category/chiangmai') }}" class="text-white">Categories</a></li>
|
||||
<li class="text-white">
|
||||
{{-- {{ $subCategoryView->name_en }}</li> --}}
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
Subjects</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{-- {{ $subCategoryView->name_en }} --}}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
@if ($item->category_id == 1)
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
@if ($item->category_id == 1)
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
@endif
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,132 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{-- {{ $subCategoryView->name }} --}}
|
||||
</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">หน้าแรก</a></li>
|
||||
<li><a href="{{ url('category/chiangmai') }}" class="text-white">หมวดหมู่</a></li>
|
||||
{{-- <li class="text-white">{{ $subCategoryView->name }}</li> --}}
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
เรื่องราว</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{-- {{ $subCategoryView->name }} --}}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
@if ($item->category_id == 1)
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
@if ($item->category_id == 1)
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
@endif
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('YYYY') + 543 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,405 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image-tool__caption,
|
||||
.inline-image__caption,
|
||||
.ce-toolbar--opened {
|
||||
/*display: none;*/
|
||||
border: unset;
|
||||
box-shadow: unset;
|
||||
font-style: oblique;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
padding-top: 0
|
||||
}
|
||||
|
||||
.ce-paragraph {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
|
||||
.video-wrapper {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name_en }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category/where-else') }}" class="text-white">Categories</a></li>
|
||||
<li class="text-white">{{ $itemView->name_en }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start tab style 01 section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container tab-style2">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="THE GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
|
||||
{{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $itemView->name_en }}</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-5">
|
||||
|
||||
<h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
|
||||
style="font-size: 26px">{{ $itemView->name_en }}</h2>
|
||||
<div style="text-align: right;" class="right-text">View: {{ $itemView->count_view ?? 0 }}</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description" name="description"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
|
||||
{{-- Random Articles --}}
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($randomArticlesView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}" alt="">
|
||||
<div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function initAjaxSetupToken() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateArticleCount() {
|
||||
|
||||
const articleId = "{{ $itemView->id }}";
|
||||
|
||||
// set up ajax
|
||||
initAjaxSetupToken();
|
||||
|
||||
const ajaxProp = {
|
||||
url: "{{ url('update-article-count') }}", // Endpoint to update count
|
||||
dataType: 'json',
|
||||
method: 'POST', // Use POST to update data
|
||||
data: JSON.stringify({
|
||||
id: articleId
|
||||
}), // Corrected stringify method
|
||||
contentType: 'application/json', // Send JSON payload
|
||||
processData: false, // Not needed, but harmless
|
||||
success: function(response) {
|
||||
//console.log('Article view count updated:', response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Error updating view count:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.ajax(ajaxProp).done(function(res) {
|
||||
if (res.status) {
|
||||
console.log('update success');
|
||||
} else {
|
||||
console.log('update fail')
|
||||
}
|
||||
}).fail(function(xhr, status, error) {
|
||||
console.log('update fail')
|
||||
});
|
||||
}
|
||||
updateArticleCount();
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Include Editor.js core -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
||||
|
||||
<!-- Include the plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-break-line"></script>
|
||||
|
||||
<script>
|
||||
// Custom video tool for embedding videos
|
||||
class VideoTool {
|
||||
constructor({
|
||||
data
|
||||
}) {
|
||||
this.data = data || {};
|
||||
}
|
||||
|
||||
// Render input for video URL
|
||||
render() {
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.style.pointerEvents = 'none'; // Disable all events on the wrapper
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.controls = true; // Enable controls for playback
|
||||
video.style.width = "100%";
|
||||
video.style.marginTop = "10px";
|
||||
video.src = this.data.url || "";
|
||||
|
||||
wrapper.appendChild(video);
|
||||
return wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
class YoutubeEmbed {
|
||||
/**
|
||||
* Define the toolbox settings for the Editor.js toolbar.
|
||||
*/
|
||||
static get toolbox() {
|
||||
return {
|
||||
title: "YouTube",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
|
||||
};
|
||||
}
|
||||
|
||||
constructor({
|
||||
data,
|
||||
config,
|
||||
api,
|
||||
readOnly
|
||||
}) {
|
||||
this.data = data || {};
|
||||
this.readOnly = readOnly;
|
||||
this.wrapper = null;
|
||||
this.url = this.data.url || '';
|
||||
this.isEdited = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the input field and YouTube preview.
|
||||
*/
|
||||
render() {
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.classList.add('block-wrapper');
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.value = this.url;
|
||||
input.placeholder = "Paste YouTube URL here...";
|
||||
input.style.width = '100%';
|
||||
|
||||
this.wrapper.appendChild(input);
|
||||
this._createIframe(this.url);
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
this.isEdited = true;
|
||||
this.url = event.target.value;
|
||||
this._createIframe(this.url);
|
||||
});
|
||||
|
||||
return this.wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the iframe for the YouTube video.
|
||||
*/
|
||||
_createIframe(url) {
|
||||
const videoId = this._extractVideoID(url);
|
||||
if (!videoId) {
|
||||
if (this.isEdited) {
|
||||
this.wrapper.querySelector('input').classList.add('invalid');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.wrapper.innerHTML = ''; // Clear the wrapper
|
||||
|
||||
const plyrContainer = document.createElement('div');
|
||||
plyrContainer.classList.add('video-wrapper');
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
||||
iframe.allowFullscreen = true;
|
||||
|
||||
plyrContainer.appendChild(iframe);
|
||||
this.wrapper.appendChild(plyrContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the YouTube video ID from the URL.
|
||||
*/
|
||||
_extractVideoID(url) {
|
||||
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
|
||||
const match = url.match(regex);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the saved data for this block.
|
||||
*/
|
||||
save(blockContent) {
|
||||
return {
|
||||
url: this.url,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Notify the core that this tool supports read-only mode.
|
||||
*/
|
||||
static get isReadOnlySupported() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const tools = {
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
breakLine: {
|
||||
class: BreakLine,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+ENTER',
|
||||
},
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
image: {
|
||||
class: ImageTool,
|
||||
},
|
||||
inlineImage: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
}
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description_en) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
//readOnly: true,
|
||||
minHeight: 0,
|
||||
data: JSON.parse(descriptionData),
|
||||
onReady: () => {
|
||||
const editorContainer = document.querySelector('#description');
|
||||
|
||||
// Disable editing for all tools
|
||||
if (editorContainer) {
|
||||
const allElements = editorContainer.querySelectorAll('*');
|
||||
allElements.forEach(element => {
|
||||
if (element.hasAttribute('contenteditable')) {
|
||||
element.setAttribute('contenteditable', 'false'); // Set to non-editable
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'video') {
|
||||
element.style.pointerEvents = 'auto';
|
||||
return;
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'a') {
|
||||
element.setAttribute('target', '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Hide toolbar actions
|
||||
const toolbarActions = document.querySelectorAll(
|
||||
'.ce-toolbar__actions, .ce-toolbar__actions--opened');
|
||||
toolbarActions.forEach(action => {
|
||||
action.style.display = 'none'; // Hide the action toolbars
|
||||
});
|
||||
|
||||
// Optionally hide any popups
|
||||
const popoverContainer = document.querySelector('.ce-popover__container');
|
||||
if (popoverContainer) {
|
||||
popoverContainer.style.display = 'none';
|
||||
}
|
||||
const elements = $(".image-tool__caption[data-placeholder='Caption']");
|
||||
// Iterate over the matched elements and hide them
|
||||
elements.each(function() {
|
||||
$(this).attr("data-placeholder", ""); // Replace "Caption" with an empty string
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,405 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image-tool__caption,
|
||||
.inline-image__caption,
|
||||
.ce-toolbar--opened {
|
||||
/*display: none;*/
|
||||
border: unset;
|
||||
box-shadow: unset;
|
||||
font-style: oblique;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
padding-top: 0
|
||||
}
|
||||
|
||||
.ce-paragraph {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">หน้าแรก</a></li>
|
||||
<li><a href="{{ url('category/where-else') }}" class="text-white">หมวดหมู่</a></li>
|
||||
<li class="text-white">{{ $itemView->name }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start tab style 01 section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container tab-style2">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="THE GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
|
||||
{{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $itemView->name }}</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-5">
|
||||
|
||||
<h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
|
||||
style="font-size: 26px">{{ $itemView->name }}</h2>
|
||||
<div style="text-align: right;" class="right-text">View: {{ $itemView->count_view ?? 0 }}</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description" name="description"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
{{-- Random Articles --}}
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($randomArticlesView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}" alt="">
|
||||
<div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('YYYY') + 543 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function initAjaxSetupToken() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateArticleCount() {
|
||||
|
||||
const articleId = "{{ $itemView->id }}";
|
||||
|
||||
// set up ajax
|
||||
initAjaxSetupToken();
|
||||
|
||||
const ajaxProp = {
|
||||
url: "{{ url('update-article-count') }}", // Endpoint to update count
|
||||
dataType: 'json',
|
||||
method: 'POST', // Use POST to update data
|
||||
data: JSON.stringify({
|
||||
id: articleId
|
||||
}), // Corrected stringify method
|
||||
contentType: 'application/json', // Send JSON payload
|
||||
processData: false, // Not needed, but harmless
|
||||
success: function(response) {
|
||||
//console.log('Article view count updated:', response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Error updating view count:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.ajax(ajaxProp).done(function(res) {
|
||||
if (res.status) {
|
||||
console.log('update success');
|
||||
} else {
|
||||
console.log('update fail')
|
||||
}
|
||||
}).fail(function(xhr, status, error) {
|
||||
console.log('update fail')
|
||||
});
|
||||
}
|
||||
updateArticleCount();
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Include Editor.js core -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
||||
|
||||
<!-- Include the plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-break-line"></script>
|
||||
|
||||
<script>
|
||||
// Custom video tool for embedding videos
|
||||
class VideoTool {
|
||||
constructor({
|
||||
data
|
||||
}) {
|
||||
this.data = data || {};
|
||||
}
|
||||
|
||||
// Render input for video URL
|
||||
render() {
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.style.pointerEvents = 'none'; // Disable all events on the wrapper
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.controls = true; // Enable controls for playback
|
||||
video.style.width = "100%";
|
||||
video.style.marginTop = "10px";
|
||||
video.src = this.data.url || "";
|
||||
|
||||
wrapper.appendChild(video);
|
||||
return wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
class YoutubeEmbed {
|
||||
/**
|
||||
* Define the toolbox settings for the Editor.js toolbar.
|
||||
*/
|
||||
static get toolbox() {
|
||||
return {
|
||||
title: "YouTube",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
|
||||
};
|
||||
}
|
||||
|
||||
constructor({
|
||||
data,
|
||||
config,
|
||||
api,
|
||||
readOnly
|
||||
}) {
|
||||
this.data = data || {};
|
||||
this.readOnly = readOnly;
|
||||
this.wrapper = null;
|
||||
this.url = this.data.url || '';
|
||||
this.isEdited = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the input field and YouTube preview.
|
||||
*/
|
||||
render() {
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.classList.add('block-wrapper');
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.value = this.url;
|
||||
input.placeholder = "Paste YouTube URL here...";
|
||||
input.style.width = '100%';
|
||||
|
||||
this.wrapper.appendChild(input);
|
||||
this._createIframe(this.url);
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
this.isEdited = true;
|
||||
this.url = event.target.value;
|
||||
this._createIframe(this.url);
|
||||
});
|
||||
|
||||
return this.wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the iframe for the YouTube video.
|
||||
*/
|
||||
_createIframe(url) {
|
||||
const videoId = this._extractVideoID(url);
|
||||
if (!videoId) {
|
||||
if (this.isEdited) {
|
||||
this.wrapper.querySelector('input').classList.add('invalid');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.wrapper.innerHTML = ''; // Clear the wrapper
|
||||
|
||||
const plyrContainer = document.createElement('div');
|
||||
plyrContainer.classList.add('video-wrapper');
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
||||
iframe.allowFullscreen = true;
|
||||
|
||||
plyrContainer.appendChild(iframe);
|
||||
this.wrapper.appendChild(plyrContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the YouTube video ID from the URL.
|
||||
*/
|
||||
_extractVideoID(url) {
|
||||
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
|
||||
const match = url.match(regex);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the saved data for this block.
|
||||
*/
|
||||
save(blockContent) {
|
||||
return {
|
||||
url: this.url,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Notify the core that this tool supports read-only mode.
|
||||
*/
|
||||
static get isReadOnlySupported() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const tools = {
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
breakLine: {
|
||||
class: BreakLine,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+ENTER',
|
||||
},
|
||||
youtube: YoutubeEmbed,
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
image: {
|
||||
class: ImageTool,
|
||||
},
|
||||
inlineImage: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
}
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
//readOnly: true,
|
||||
minHeight: 0,
|
||||
data: JSON.parse(descriptionData),
|
||||
onReady: () => {
|
||||
const editorContainer = document.querySelector('#description');
|
||||
|
||||
// Disable editing for all tools
|
||||
if (editorContainer) {
|
||||
const allElements = editorContainer.querySelectorAll('*');
|
||||
allElements.forEach(element => {
|
||||
if (element.hasAttribute('contenteditable')) {
|
||||
element.setAttribute('contenteditable', 'false'); // Set to non-editable
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'video') {
|
||||
element.style.pointerEvents = 'auto';
|
||||
return;
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'a') {
|
||||
element.setAttribute('target', '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Hide toolbar actions
|
||||
const toolbarActions = document.querySelectorAll(
|
||||
'.ce-toolbar__actions, .ce-toolbar__actions--opened');
|
||||
toolbarActions.forEach(action => {
|
||||
action.style.display = 'none'; // Hide the action toolbars
|
||||
});
|
||||
|
||||
// Optionally hide any popups
|
||||
const popoverContainer = document.querySelector('.ce-popover__container');
|
||||
if (popoverContainer) {
|
||||
popoverContainer.style.display = 'none';
|
||||
}
|
||||
const elements = $(".image-tool__caption[data-placeholder='Caption']");
|
||||
// Iterate over the matched elements and hide them
|
||||
elements.each(function() {
|
||||
$(this).attr("data-placeholder", ""); // Replace "Caption" with an empty string
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,196 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{ $subCategoryView->name_en }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category/where-else') }}" class="text-white">Categories</a></li>
|
||||
<li class="text-white">
|
||||
{{ $subCategoryView->name_en }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANGMAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
Subjects</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $subCategoryView->name_en }}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="ชื่อหัวข้อ.." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="From date.." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="To date.." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const subCategoryId = "{{ $subCategoryView->id }}"; // Sub category ID
|
||||
const baseUrl = `/category/where-else/article/${subCategoryId}`; // Base URL for your route
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,196 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{ $subCategoryView->name }}
|
||||
</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">หน้าแรก</a></li>
|
||||
<li><a href="{{ url('category/where-else') }}" class="text-white">หมวดหมู่</a></li>
|
||||
<li class="text-white">{{ $subCategoryView->name }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANGMAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
เรื่องราว</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $subCategoryView->name }}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="ชื่อหัวข้อ.." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="ตั้งแต่วันที่.." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="ถึงวันที่.." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">ค้นหา</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('YYYY') + 543 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const subCategoryId = "{{ $subCategoryView->id }}"; // Sub category ID
|
||||
const baseUrl = `/category/where-else/article/${subCategoryId}`; // Base URL for your route
|
||||
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,102 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">Categories</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li class="text-white">Categories</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom category">
|
||||
<div class="container-fluid" style="margin-bottom: 100px;">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">Categories
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
WHERE ELSE</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView['sub_category'] as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/where-else/article/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a href="{{ url('category/where-else/article/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name_en }}
|
||||
</span></a>
|
||||
<p class="text-medium-gray text-extra-small text-uppercase">
|
||||
({{ $itemView['count_article'][$item->id] ?? 0 }})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,110 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">หมวดหมู่</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">หน้าแรก</a></li>
|
||||
<li class="text-white">หมวดหมู่</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start portfolio section -->
|
||||
<section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom category">
|
||||
<div class="container-fluid" style="margin-bottom: 100px;">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANGMAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">หมวดหมู่ที่น่าสนใจ</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
WHERE ELSE</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView['sub_category'] as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/where-else/article/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a href="{{ url('category/where-else/article/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name }}
|
||||
</span></a>
|
||||
<p class="text-medium-gray text-extra-small text-uppercase">
|
||||
({{ $itemView['count_article'][$item->id] ?? 0 }})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView['sub_category']])
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end portfolio section -->
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,406 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image-tool__caption,
|
||||
.inline-image__caption,
|
||||
.ce-toolbar--opened {
|
||||
/*display: none;*/
|
||||
border: unset;
|
||||
box-shadow: unset;
|
||||
font-style: oblique;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
padding-top: 0
|
||||
}
|
||||
|
||||
.ce-paragraph {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
|
||||
.video-wrapper {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name_en }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category/chiangmai') }}" class="text-white">Categories</a></li>
|
||||
<li class="text-white">{{ $itemView->name_en }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start tab style 01 section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container tab-style2">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
|
||||
{{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $itemView->name_en }}</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-5">
|
||||
|
||||
<h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
|
||||
style="font-size: 26px">{{ $itemView->name_en }}</h2>
|
||||
<div style="text-align: right;" class="right-text">View: {{ $itemView->count_view ?? 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description" name="description"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
{{-- Random Articles --}}
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($randomArticlesView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}" alt="">
|
||||
<div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function initAjaxSetupToken() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateArticleCount() {
|
||||
|
||||
const articleId = "{{ $itemView->id }}";
|
||||
|
||||
// set up ajax
|
||||
initAjaxSetupToken();
|
||||
|
||||
const ajaxProp = {
|
||||
url: "{{ url('update-article-count') }}", // Endpoint to update count
|
||||
dataType: 'json',
|
||||
method: 'POST', // Use POST to update data
|
||||
data: JSON.stringify({
|
||||
id: articleId
|
||||
}), // Corrected stringify method
|
||||
contentType: 'application/json', // Send JSON payload
|
||||
processData: false, // Not needed, but harmless
|
||||
success: function(response) {
|
||||
//console.log('Article view count updated:', response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Error updating view count:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.ajax(ajaxProp).done(function(res) {
|
||||
if (res.status) {
|
||||
console.log('update success');
|
||||
} else {
|
||||
console.log('update fail')
|
||||
}
|
||||
}).fail(function(xhr, status, error) {
|
||||
console.log('update fail')
|
||||
});
|
||||
}
|
||||
updateArticleCount();
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Include Editor.js core -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
||||
|
||||
<!-- Include the plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-break-line"></script>
|
||||
|
||||
<script>
|
||||
// Custom video tool for embedding videos
|
||||
class VideoTool {
|
||||
constructor({
|
||||
data
|
||||
}) {
|
||||
this.data = data || {};
|
||||
}
|
||||
|
||||
// Render input for video URL
|
||||
render() {
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.style.pointerEvents = 'none'; // Disable all events on the wrapper
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.controls = true; // Enable controls for playback
|
||||
video.style.width = "100%";
|
||||
video.style.marginTop = "10px";
|
||||
video.src = this.data.url || "";
|
||||
|
||||
wrapper.appendChild(video);
|
||||
return wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
class YoutubeEmbed {
|
||||
/**
|
||||
* Define the toolbox settings for the Editor.js toolbar.
|
||||
*/
|
||||
static get toolbox() {
|
||||
return {
|
||||
title: "YouTube",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
|
||||
};
|
||||
}
|
||||
|
||||
constructor({
|
||||
data,
|
||||
config,
|
||||
api,
|
||||
readOnly
|
||||
}) {
|
||||
this.data = data || {};
|
||||
this.readOnly = readOnly;
|
||||
this.wrapper = null;
|
||||
this.url = this.data.url || '';
|
||||
this.isEdited = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the input field and YouTube preview.
|
||||
*/
|
||||
render() {
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.classList.add('block-wrapper');
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.value = this.url;
|
||||
input.placeholder = "Paste YouTube URL here...";
|
||||
input.style.width = '100%';
|
||||
|
||||
this.wrapper.appendChild(input);
|
||||
this._createIframe(this.url);
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
this.isEdited = true;
|
||||
this.url = event.target.value;
|
||||
this._createIframe(this.url);
|
||||
});
|
||||
|
||||
return this.wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the iframe for the YouTube video.
|
||||
*/
|
||||
_createIframe(url) {
|
||||
const videoId = this._extractVideoID(url);
|
||||
if (!videoId) {
|
||||
if (this.isEdited) {
|
||||
this.wrapper.querySelector('input').classList.add('invalid');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.wrapper.innerHTML = ''; // Clear the wrapper
|
||||
|
||||
const plyrContainer = document.createElement('div');
|
||||
plyrContainer.classList.add('video-wrapper');
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
||||
iframe.allowFullscreen = true;
|
||||
|
||||
plyrContainer.appendChild(iframe);
|
||||
this.wrapper.appendChild(plyrContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the YouTube video ID from the URL.
|
||||
*/
|
||||
_extractVideoID(url) {
|
||||
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
|
||||
const match = url.match(regex);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the saved data for this block.
|
||||
*/
|
||||
save(blockContent) {
|
||||
return {
|
||||
url: this.url,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Notify the core that this tool supports read-only mode.
|
||||
*/
|
||||
static get isReadOnlySupported() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const tools = {
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
breakLine: {
|
||||
class: BreakLine,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+ENTER',
|
||||
},
|
||||
youtube: YoutubeEmbed,
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
image: {
|
||||
class: ImageTool,
|
||||
},
|
||||
inlineImage: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
}
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description_en) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
//readOnly: true,
|
||||
data: JSON.parse(descriptionData),
|
||||
minHeight: 0,
|
||||
onReady: () => {
|
||||
const editorContainer = document.querySelector('#description');
|
||||
|
||||
// Disable editing for all tools
|
||||
if (editorContainer) {
|
||||
const allElements = editorContainer.querySelectorAll('*');
|
||||
allElements.forEach(element => {
|
||||
if (element.hasAttribute('contenteditable')) {
|
||||
element.setAttribute('contenteditable', 'false'); // Set to non-editable
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'video') {
|
||||
element.style.pointerEvents = 'auto';
|
||||
return;
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'a') {
|
||||
element.setAttribute('target', '_blank');
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Hide toolbar actions
|
||||
const toolbarActions = document.querySelectorAll(
|
||||
'.ce-toolbar__actions, .ce-toolbar__actions--opened');
|
||||
toolbarActions.forEach(action => {
|
||||
action.style.display = 'none'; // Hide the action toolbars
|
||||
});
|
||||
|
||||
// Optionally hide any popups
|
||||
const popoverContainer = document.querySelector('.ce-popover__container');
|
||||
if (popoverContainer) {
|
||||
popoverContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
const elements = $(".image-tool__caption[data-placeholder='Caption']");
|
||||
// Iterate over the matched elements and hide them
|
||||
elements.each(function() {
|
||||
$(this).attr("data-placeholder", ""); // Replace "Caption" with an empty string
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,407 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image-tool__caption,
|
||||
.inline-image__caption,
|
||||
.ce-toolbar--opened {
|
||||
/*display: none;*/
|
||||
border: unset;
|
||||
box-shadow: unset;
|
||||
font-style: oblique;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
padding-top: 0
|
||||
}
|
||||
|
||||
.ce-paragraph {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
|
||||
.video-wrapper {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">หน้าแรก</a></li>
|
||||
<li><a href="{{ url('category/chiangmai') }}" class="text-white">หมวดหมู่</a></li>
|
||||
<li class="text-white">{{ $itemView->name }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start tab style 01 section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container tab-style2">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
|
||||
{{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $itemView->name }}</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-5">
|
||||
|
||||
<h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
|
||||
style="font-size: 26px">{{ $itemView->name }}</h2>
|
||||
<div style="text-align: right;" class="right-text">View: {{ $itemView->count_view ?? 0 }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description" name="description"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
|
||||
{{-- Random Articles --}}
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($randomArticlesView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}" alt="">
|
||||
<div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('YYYY') + 543 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
|
||||
<script>
|
||||
function initAjaxSetupToken() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateArticleCount() {
|
||||
|
||||
const articleId = "{{ $itemView->id }}";
|
||||
|
||||
// set up ajax
|
||||
initAjaxSetupToken();
|
||||
|
||||
const ajaxProp = {
|
||||
url: "{{ url('update-article-count') }}", // Endpoint to update count
|
||||
dataType: 'json',
|
||||
method: 'POST', // Use POST to update data
|
||||
data: JSON.stringify({
|
||||
id: articleId
|
||||
}), // Corrected stringify method
|
||||
contentType: 'application/json', // Send JSON payload
|
||||
processData: false, // Not needed, but harmless
|
||||
success: function(response) {
|
||||
//console.log('Article view count updated:', response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Error updating view count:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.ajax(ajaxProp).done(function(res) {
|
||||
if (res.status) {
|
||||
console.log('update success');
|
||||
} else {
|
||||
console.log('update fail')
|
||||
}
|
||||
}).fail(function(xhr, status, error) {
|
||||
console.log('update fail')
|
||||
});
|
||||
}
|
||||
updateArticleCount();
|
||||
</script>
|
||||
|
||||
<!-- Include Editor.js core -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
||||
|
||||
<!-- Include the plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-break-line"></script>
|
||||
|
||||
<script>
|
||||
// Custom video tool for embedding videos
|
||||
class VideoTool {
|
||||
constructor({
|
||||
data
|
||||
}) {
|
||||
this.data = data || {};
|
||||
}
|
||||
|
||||
// Render input for video URL
|
||||
render() {
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.style.pointerEvents = 'none'; // Disable all events on the wrapper
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.controls = true; // Enable controls for playback
|
||||
video.style.width = "100%";
|
||||
video.style.marginTop = "10px";
|
||||
video.src = this.data.url || "";
|
||||
|
||||
wrapper.appendChild(video);
|
||||
return wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
class YoutubeEmbed {
|
||||
/**
|
||||
* Define the toolbox settings for the Editor.js toolbar.
|
||||
*/
|
||||
static get toolbox() {
|
||||
return {
|
||||
title: "YouTube",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
|
||||
};
|
||||
}
|
||||
|
||||
constructor({
|
||||
data,
|
||||
config,
|
||||
api,
|
||||
readOnly
|
||||
}) {
|
||||
this.data = data || {};
|
||||
this.readOnly = readOnly;
|
||||
this.wrapper = null;
|
||||
this.url = this.data.url || '';
|
||||
this.isEdited = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the input field and YouTube preview.
|
||||
*/
|
||||
render() {
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.classList.add('block-wrapper');
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.value = this.url;
|
||||
input.placeholder = "Paste YouTube URL here...";
|
||||
input.style.width = '100%';
|
||||
|
||||
this.wrapper.appendChild(input);
|
||||
this._createIframe(this.url);
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
this.isEdited = true;
|
||||
this.url = event.target.value;
|
||||
this._createIframe(this.url);
|
||||
});
|
||||
|
||||
return this.wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the iframe for the YouTube video.
|
||||
*/
|
||||
_createIframe(url) {
|
||||
const videoId = this._extractVideoID(url);
|
||||
if (!videoId) {
|
||||
if (this.isEdited) {
|
||||
this.wrapper.querySelector('input').classList.add('invalid');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.wrapper.innerHTML = ''; // Clear the wrapper
|
||||
|
||||
const plyrContainer = document.createElement('div');
|
||||
plyrContainer.classList.add('video-wrapper');
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
||||
iframe.allowFullscreen = true;
|
||||
|
||||
plyrContainer.appendChild(iframe);
|
||||
this.wrapper.appendChild(plyrContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the YouTube video ID from the URL.
|
||||
*/
|
||||
_extractVideoID(url) {
|
||||
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
|
||||
const match = url.match(regex);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the saved data for this block.
|
||||
*/
|
||||
save(blockContent) {
|
||||
return {
|
||||
url: this.url,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Notify the core that this tool supports read-only mode.
|
||||
*/
|
||||
static get isReadOnlySupported() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const tools = {
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
breakLine: {
|
||||
class: BreakLine,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+ENTER',
|
||||
},
|
||||
youtube: YoutubeEmbed,
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
image: {
|
||||
class: ImageTool,
|
||||
},
|
||||
inlineImage: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
}
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
//readOnly: true,
|
||||
data: JSON.parse(descriptionData),
|
||||
minHeight: 0,
|
||||
onReady: () => {
|
||||
const editorContainer = document.querySelector('#description');
|
||||
// Disable editing for all tools
|
||||
if (editorContainer) {
|
||||
const allElements = editorContainer.querySelectorAll('*');
|
||||
allElements.forEach(element => {
|
||||
|
||||
if (element.hasAttribute('contenteditable')) {
|
||||
element.setAttribute('contenteditable', 'false');
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'video') {
|
||||
element.style.pointerEvents = 'auto';
|
||||
return;
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'a') {
|
||||
element.setAttribute('target', '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Hide toolbar actions
|
||||
const toolbarActions = document.querySelectorAll(
|
||||
'.ce-toolbar__actions, .ce-toolbar__actions--opened');
|
||||
toolbarActions.forEach(action => {
|
||||
action.style.display = 'none'; // Hide the action toolbars
|
||||
});
|
||||
|
||||
// Optionally hide any popups
|
||||
const popoverContainer = document.querySelector('.ce-popover__container');
|
||||
if (popoverContainer) {
|
||||
popoverContainer.style.display = 'none';
|
||||
}
|
||||
const elements = $(".image-tool__caption[data-placeholder='Caption']");
|
||||
// Iterate over the matched elements and hide them
|
||||
elements.each(function() {
|
||||
$(this).attr("data-placeholder", ""); // Replace "Caption" with an empty string
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,197 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{ $subCategoryView->name_en }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category/chiangmai') }}" class="text-white">Categories</a></li>
|
||||
<li class="text-white">
|
||||
{{ $subCategoryView->name_en }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
Subjects</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $subCategoryView->name_en }}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="Subject.." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="From date.." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="To date.." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
|
||||
@section('js')
|
||||
|
||||
<script>
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const subCategoryId = "{{ $subCategoryView->id }}"; // Sub category ID
|
||||
const baseUrl = `/category/chiangmai/article/${subCategoryId}`; // Base URL for your route
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,195 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{ $subCategoryView->name }}
|
||||
</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">หน้าแรก</a></li>
|
||||
<li><a href="{{ url('category/chiangmai') }}" class="text-white">หมวดหมู่</a></li>
|
||||
<li class="text-white">{{ $subCategoryView->name }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
เรื่องราว</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $subCategoryView->name }}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="ชื่อหัวข้อ.." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="ตั้งแต่วันที่.." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="ถึงวันที่.." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">ค้นหา</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('YYYY') + 543 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const subCategoryId = "{{ $subCategoryView->id }}"; // Sub category ID
|
||||
const baseUrl = `/category/chiangmai/article/${subCategoryId}`; // Base URL for your route
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,102 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">Categories</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li class="text-white">Categories</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom category">
|
||||
<div class="container-fluid" style="margin-bottom: 100px;">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">Categories
|
||||
</p>
|
||||
<h6 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
CHIANG MAI AND NOWHERE ELSE</h6>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView['sub_category'] as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/chiangmai/article/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a href="{{ url('category/chiangmai/article/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name_en }}
|
||||
</span></a>
|
||||
<p class="text-medium-gray text-extra-small text-uppercase">
|
||||
({{ $itemView['count_article'][$item->id] ?? 0 }})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,110 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">หมวดหมู่</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">หน้าแรก</a></li>
|
||||
<li class="text-white">หมวดหมู่</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start portfolio section -->
|
||||
<section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom category">
|
||||
<div class="container-fluid" style="margin-bottom: 100px;">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="THE GREATER CHIANGMAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">หมวดหมู่ที่น่าสนใจ</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
CHIANG MAI AND NOWHERE ELSE</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView['sub_category'] as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/chiangmai/article/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a href="{{ url('category/chiangmai/article/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name }}
|
||||
</span></a>
|
||||
<p class="text-medium-gray text-extra-small text-uppercase">
|
||||
({{ $itemView['count_article'][$item->id] ?? 0 }})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView['sub_category']])
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end portfolio section -->
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,362 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.video-wrapper {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name_en }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category') }}" class="text-white">Categories</a></li>
|
||||
<li><a href="{{ url('category/subject/' . $categoryView->id) }}"
|
||||
class="text-white">{{ $categoryView->name_en }}</a></li>
|
||||
<li class="text-white">{{ $itemView->name_en }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start tab style 01 section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container tab-style2">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo.png') }}" class="logo-dark margin-50px-bottom" alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
|
||||
{{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $itemView->name_en }}</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
<div class="col-12 my-5">
|
||||
|
||||
<h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
|
||||
style="font-size: 26px">{{ $itemView->name_en }}</h2>
|
||||
|
||||
{{-- <p>
|
||||
{!! $itemView->description_en !!}</p>
|
||||
|
||||
<br /> --}}
|
||||
|
||||
<div class="card-body pt-0">
|
||||
|
||||
<div class="mb-10 fv-row">
|
||||
<label class="required form-label">Categories</label>
|
||||
<div class="d-flex align-items-center mt-3">
|
||||
@foreach ($categoriesView as $item)
|
||||
<label
|
||||
class="form-check form-check-custom form-check-inline form-check-solid me-5 is-invalid">
|
||||
<input class="form-check-input" name="categories[]" type="checkbox"
|
||||
value="{{ $item->id }}" @if (in_array($item->id, explode(',', $itemView->category_ids))) checked @endif>
|
||||
<span class="fw-semibold ps-2 fs-6">
|
||||
{{ $item->name . '(' . $item->name_en . ')' }}
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-10 fv-row">
|
||||
<div class="position-relative d-flex align-items-center">
|
||||
<span class="svg-icon svg-icon-2 position-absolute mx-4">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.3"
|
||||
d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
</span>
|
||||
<input class="form-control form-control-solid ps-12" type="text" id="due_date"
|
||||
name="due_date"
|
||||
value="{{ $itemView->due_date ? date('d-m-Y', strtotime($itemView->due_date)) : '' }}">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-10 fv-row">
|
||||
<label class="required form-label">Subject</label>
|
||||
<input disabled type="text" name="name" class="form-control mb-2 col-6"
|
||||
value="{{ $itemView->name }}" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-10 fv-row">
|
||||
<label class="required form-label">Subject (EN)</label>
|
||||
<input disabled type="text" name="name_en" class="form-control mb-2 col-6"
|
||||
value="{{ $itemView->name_en }}" />
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
<!-- Include Editor.js core -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
||||
|
||||
<!-- Include the plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link"></script>
|
||||
|
||||
<script>
|
||||
// Custom video tool for embedding videos
|
||||
class VideoTool {
|
||||
constructor({
|
||||
data
|
||||
}) {
|
||||
this.data = data || {};
|
||||
}
|
||||
|
||||
// Render input for video URL
|
||||
render() {
|
||||
const wrapper = document.createElement("div");
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.placeholder = "Enter video URL";
|
||||
input.value = this.data.url || "";
|
||||
input.style.width = "100%";
|
||||
input.style.display = "none";
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.controls = true;
|
||||
video.style.width = "100%";
|
||||
video.style.marginTop = "10px";
|
||||
video.src = this.data.url || "";
|
||||
|
||||
|
||||
wrapper.appendChild(video);
|
||||
return wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
class YoutubeEmbed {
|
||||
/**
|
||||
* Define the toolbox settings for the Editor.js toolbar.
|
||||
*/
|
||||
static get toolbox() {
|
||||
return {
|
||||
title: "YouTube",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
|
||||
};
|
||||
}
|
||||
|
||||
constructor({
|
||||
data,
|
||||
config,
|
||||
api,
|
||||
readOnly
|
||||
}) {
|
||||
this.data = data || {};
|
||||
this.readOnly = readOnly;
|
||||
this.wrapper = null;
|
||||
this.url = this.data.url || '';
|
||||
this.isEdited = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the input field and YouTube preview.
|
||||
*/
|
||||
render() {
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.classList.add('block-wrapper');
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.value = this.url;
|
||||
input.placeholder = "Paste YouTube URL here...";
|
||||
input.style.width = '100%';
|
||||
|
||||
this.wrapper.appendChild(input);
|
||||
this._createIframe(this.url);
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
this.isEdited = true;
|
||||
this.url = event.target.value;
|
||||
this._createIframe(this.url);
|
||||
});
|
||||
|
||||
return this.wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the iframe for the YouTube video.
|
||||
*/
|
||||
_createIframe(url) {
|
||||
const videoId = this._extractVideoID(url);
|
||||
if (!videoId) {
|
||||
if (this.isEdited) {
|
||||
this.wrapper.querySelector('input').classList.add('invalid');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.wrapper.innerHTML = ''; // Clear the wrapper
|
||||
|
||||
const plyrContainer = document.createElement('div');
|
||||
plyrContainer.classList.add('video-wrapper');
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
||||
iframe.allowFullscreen = true;
|
||||
|
||||
plyrContainer.appendChild(iframe);
|
||||
this.wrapper.appendChild(plyrContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the YouTube video ID from the URL.
|
||||
*/
|
||||
_extractVideoID(url) {
|
||||
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
|
||||
const match = url.match(regex);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the saved data for this block.
|
||||
*/
|
||||
save(blockContent) {
|
||||
return {
|
||||
url: this.url,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Notify the core that this tool supports read-only mode.
|
||||
*/
|
||||
static get isReadOnlySupported() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const tools = {
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: ['link', 'bold', 'italic'], // Enable toolbar options
|
||||
config: {
|
||||
placeholder: 'Enter a header',
|
||||
levels: [2, 3, 4], // Set header levels
|
||||
defaultLevel: 3,
|
||||
},
|
||||
},
|
||||
breakLine: {
|
||||
class: BreakLine,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+ENTER',
|
||||
},
|
||||
youtube: YoutubeEmbed,
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
services: {
|
||||
youtube: true,
|
||||
vimeo: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
linkTool: {
|
||||
class: LinkTool,
|
||||
config: {
|
||||
endpoint: '',
|
||||
},
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
image: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
embed: {
|
||||
display: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const isReadOnly = true;
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
minHeight: 0,
|
||||
data: JSON.parse(descriptionData)
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,295 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.video-wrapper {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category') }}" class="text-white">Categories</a></li>
|
||||
<li><a href="{{ url('category/subject/' . $categoryView->id) }}"
|
||||
class="text-white">{{ $categoryView->name }}</a></li>
|
||||
<li class="text-white">{{ $itemView->name }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start tab style 01 section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container tab-style2">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo.png') }}" class="logo-dark margin-50px-bottom" alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
|
||||
{{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $itemView->name }}</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-5">
|
||||
|
||||
<h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
|
||||
style="font-size: 26px">{{ $itemView->name }}</h2>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description" name="description"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
|
||||
<!-- Include Editor.js core -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
||||
|
||||
<!-- Include the plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link"></script>
|
||||
|
||||
<script>
|
||||
// Custom video tool for embedding videos
|
||||
class VideoTool {
|
||||
constructor({
|
||||
data
|
||||
}) {
|
||||
this.data = data || {};
|
||||
}
|
||||
|
||||
// Render input for video URL
|
||||
render() {
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.style.pointerEvents = 'none'; // Disable all events on the wrapper
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.controls = true; // Enable controls for playback
|
||||
video.style.width = "100%";
|
||||
video.style.marginTop = "10px";
|
||||
video.src = this.data.url || "";
|
||||
|
||||
wrapper.appendChild(video);
|
||||
return wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
class YoutubeEmbed {
|
||||
/**
|
||||
* Define the toolbox settings for the Editor.js toolbar.
|
||||
*/
|
||||
static get toolbox() {
|
||||
return {
|
||||
title: "YouTube",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
|
||||
};
|
||||
}
|
||||
|
||||
constructor({
|
||||
data,
|
||||
config,
|
||||
api,
|
||||
readOnly
|
||||
}) {
|
||||
this.data = data || {};
|
||||
this.readOnly = readOnly;
|
||||
this.wrapper = null;
|
||||
this.url = this.data.url || '';
|
||||
this.isEdited = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the input field and YouTube preview.
|
||||
*/
|
||||
render() {
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.classList.add('block-wrapper');
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.value = this.url;
|
||||
input.placeholder = "Paste YouTube URL here...";
|
||||
input.style.width = '100%';
|
||||
|
||||
this.wrapper.appendChild(input);
|
||||
this._createIframe(this.url);
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
this.isEdited = true;
|
||||
this.url = event.target.value;
|
||||
this._createIframe(this.url);
|
||||
});
|
||||
|
||||
return this.wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the iframe for the YouTube video.
|
||||
*/
|
||||
_createIframe(url) {
|
||||
const videoId = this._extractVideoID(url);
|
||||
if (!videoId) {
|
||||
if (this.isEdited) {
|
||||
this.wrapper.querySelector('input').classList.add('invalid');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.wrapper.innerHTML = ''; // Clear the wrapper
|
||||
|
||||
const plyrContainer = document.createElement('div');
|
||||
plyrContainer.classList.add('video-wrapper');
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
||||
iframe.allowFullscreen = true;
|
||||
|
||||
plyrContainer.appendChild(iframe);
|
||||
this.wrapper.appendChild(plyrContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the YouTube video ID from the URL.
|
||||
*/
|
||||
_extractVideoID(url) {
|
||||
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
|
||||
const match = url.match(regex);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the saved data for this block.
|
||||
*/
|
||||
save(blockContent) {
|
||||
return {
|
||||
url: this.url,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Notify the core that this tool supports read-only mode.
|
||||
*/
|
||||
static get isReadOnlySupported() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const tools = {
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
youtube: YoutubeEmbed,
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
linkTool: {
|
||||
class: LinkTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
image: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
}
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
//readOnly: true,
|
||||
data: JSON.parse(descriptionData),
|
||||
minHeight: 0,
|
||||
onReady: () => {
|
||||
const editorContainer = document.querySelector('#description');
|
||||
|
||||
// Disable editing for all tools
|
||||
if (editorContainer) {
|
||||
const allElements = editorContainer.querySelectorAll('*');
|
||||
allElements.forEach(element => {
|
||||
if (element.hasAttribute('contenteditable')) {
|
||||
element.setAttribute('contenteditable', 'false'); // Set to non-editable
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hide toolbar actions
|
||||
const toolbarActions = document.querySelectorAll(
|
||||
'.ce-toolbar__actions, .ce-toolbar__actions--opened');
|
||||
toolbarActions.forEach(action => {
|
||||
action.style.display = 'none'; // Hide the action toolbars
|
||||
});
|
||||
|
||||
// Optionally hide any popups
|
||||
const popoverContainer = document.querySelector('.ce-popover__container');
|
||||
if (popoverContainer) {
|
||||
popoverContainer.style.display = 'none';
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,213 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{ $categoryView->name_en }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category') }}" class="text-white">Categories</a></li>
|
||||
<li class="text-white">
|
||||
{{ $categoryView->name_en }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
Subjects</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
CULTURE</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="ชื่อหัวข้อ..." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="From date..." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="To date..." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a
|
||||
href="{{ url('category/subject/detail/' . $categoryView->id . '/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/subject/detail') }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
{{-- <div class=" text-center margin-100px-top md-margin-50px-top wow animate__fadeInUp">
|
||||
<div class="pagination text-small text-uppercase text-extra-dark-gray">
|
||||
<ul class="mx-auto">
|
||||
<li><a href="#"><i
|
||||
class="fas fa-long-arrow-alt-left margin-5px-right d-none d-md-inline-block"></i>
|
||||
Prev</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">Next <i
|
||||
class="fas fa-long-arrow-alt-right margin-5px-left d-none d-md-inline-block"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> --}}
|
||||
<!-- end pagination -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
const baseUrl = "{{ url('category/subject') }}";
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const id = "{{ $categoryView->id }}"; // Category ID
|
||||
const baseUrl = `/category/subject/${id}`; // Base URL for your route
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,213 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{ $categoryView->name }}
|
||||
</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">หน้าแรก</a></li>
|
||||
<li><a href="{{ url('category') }}" class="text-white">หมวดหมู่</a></li>
|
||||
<li class="text-white">ประเพณี</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
หัวข้อ</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $categoryView->name }}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="ชื่อหัวข้อ..." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="ตั้งแต่วันที่..." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="ถึงวันที่..." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">ค้นหา</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a
|
||||
href="{{ url('category/subject/detail/' . $categoryView->id . '/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/subject/detail') }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('YYYY') + 543 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
{{-- <div class=" text-center margin-100px-top md-margin-50px-top wow animate__fadeInUp">
|
||||
<div class="pagination text-small text-uppercase text-extra-dark-gray">
|
||||
<ul class="mx-auto">
|
||||
<li><a href="#"><i
|
||||
class="fas fa-long-arrow-alt-left margin-5px-right d-none d-md-inline-block"></i>
|
||||
ก่อนหน้า</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">ถัดไป <i
|
||||
class="fas fa-long-arrow-alt-right margin-5px-left d-none d-md-inline-block"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> --}}
|
||||
<!-- end pagination -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
const baseUrl = "{{ url('category/subject') }}";
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const id = "{{ $categoryView->id }}"; // Category ID
|
||||
const baseUrl = `/category/subject/${id}`; // Base URL for your route
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,156 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 col-md-6 text-md-start text-center">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">Contact us</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 breadcrumb text-small alt-font justify-content-center justify-content-md-end sm-margin-15px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul>
|
||||
<li><a href="{{url('')}}" class="text-dark-gray">Home</a></li>
|
||||
<!-- <li><a href="#" class="text-dark-gray">Contact</a></li> -->
|
||||
<li class="text-dark-gray">Contact us</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- end help section -->
|
||||
<!-- start help section -->
|
||||
<section class="wow animate__fadeIn big-section">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-8 text-center">
|
||||
<img src="images/logo_thegreaterchiangmai_2.png" class="logo-dark margin-20px-bottom" alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-small text-uppercase">We appreciate your contact.</p>
|
||||
<h2 class="alt-font font-weight-700 letter-spacing-minus-1 text-extra-dark-gray">How we can help</h2>
|
||||
<p class="w-75 mx-auto sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry. Lorem Ipsum is simply dummy text of the printing and industry.</p>
|
||||
<a href="#start-your-project" class="btn btn-large btn-transparent-dark-gray margin-10px-top inner-link">Start your Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end help section -->
|
||||
<!-- start contact section -->
|
||||
<section class="no-padding bg-extra-dark-gray">
|
||||
<div class="container-fluid">
|
||||
<div class="row row-cols-1 row-cols-lg-2">
|
||||
<div class="col p-0 cover-background md-h-450px sm-h-350px wow animate__fadeInLeft" style="background-image:url('images/banner/image_2.jpg');"></div>
|
||||
<div class="col p-0 wow animate__fadeInRight">
|
||||
<div class="row row-cols-1 row-cols-sm-2 m-0">
|
||||
<!-- start contact item -->
|
||||
<div class="col bg-extra-dark-gray d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
|
||||
<i class="icon-map text-deep-pink icon-medium margin-25px-bottom"></i>
|
||||
<div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">Contact Address</div>
|
||||
<p class="w-60 lg-w-80 mx-auto text-medium">Greater Chiang Mai , Chiang Mai , Thailand.</p>
|
||||
</div>
|
||||
<!-- end contact item -->
|
||||
<!-- start contact item -->
|
||||
<div class="col bg-black d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
|
||||
<i class="icon-chat text-deep-pink icon-medium margin-25px-bottom"></i>
|
||||
<div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">Let's Talk</div>
|
||||
<p class="mx-auto text-medium mb-0">Line : @thegreaterchiangmai</p>
|
||||
<!-- <p class="mx-auto text-medium">Fax: 1-800-222-002</p> -->
|
||||
</div>
|
||||
<!-- end contact item -->
|
||||
<!-- start contact item -->
|
||||
<div class="col bg-black d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
|
||||
<i class="icon-envelope text-deep-pink icon-medium margin-25px-bottom"></i>
|
||||
<div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">Email Us</div>
|
||||
<p class="mx-auto text-medium mb-0"><a href="mailto:greaterchiangmai@gmail.com">greaterchiangmai@gmail.com</a></p>
|
||||
<!-- <p class="mx-auto text-medium"><a href="mailto:hire@domain.com">hire@domain.com</a></p> -->
|
||||
</div>
|
||||
<!-- end contact item -->
|
||||
<!-- start contact item -->
|
||||
<div class="col bg-extra-dark-gray d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
|
||||
<i class="icon-clock text-deep-pink icon-medium margin-25px-bottom"></i>
|
||||
<div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">Working Hours</div>
|
||||
<p class="mx-auto text-medium mb-0">Mon to Sat - 9 AM to 11 PM</p>
|
||||
<p class="mx-auto text-medium">Sunday - 10 AM to 6 PM</p>
|
||||
</div>
|
||||
<!-- end contact item -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end contact section -->
|
||||
<!-- start form section -->
|
||||
<section class="wow animate__fadeIn" id="start-your-project">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-xl-6 col-lg-7 col-md-9 col-sm-10 margin-eight-bottom md-margin-40px-bottom sm-margin-30px-bottom text-center last-paragraph-no-margin">
|
||||
<h5 class="alt-font font-weight-700 text-extra-dark-gray text-uppercase">tell us about your project</h5>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry. Lorem Ipsum is simply dummy text.</p>
|
||||
</div>
|
||||
</div>
|
||||
<form id="project-contact-form" action="email-templates/contact-form-budget.php" method="post">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-results d-none"></div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<input type="text" name="name" id="name" placeholder="Name *" class="big-input required">
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<input type="tel" name="phone" id="phone" placeholder="Phone" class="big-input">
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<input type="email" name="email" id="email" placeholder="E-mail *" class="big-input required">
|
||||
</div>
|
||||
<!-- <div class="col-12 col-md-6">
|
||||
<div class="select-style big-select">
|
||||
<select name="budget" id="budget" class="bg-transparent mb-0">
|
||||
<option value="">Select your budget</option>
|
||||
<option value="$500 - $1000">$500 - $1000</option>
|
||||
<option value="$1000 - $2000">$1000 - $2000</option>
|
||||
<option value="$2000 - $5000">$2000 - $5000</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col-12">
|
||||
<textarea name="comment" id="comment" placeholder="Describe your project" rows="6" class="big-textarea"></textarea>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<button id="project-contact-us-button" type="submit" class="btn btn-transparent-dark-gray btn-large margin-20px-top submit">send message</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end form section -->
|
||||
<!-- <section class="wow animate__fadeIn bg-light-gray">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center social-style-4">
|
||||
<span class="text-medium font-weight-600 text-uppercase d-block alt-font text-extra-dark-gray margin-30px-bottom">On social networks</span>
|
||||
<div class="social-icon-style-4">
|
||||
<ul class="margin-30px-top large-icon">
|
||||
<li><a class="facebook" href="http://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i><span></span></a></li>
|
||||
<li><a class="twitter" href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i><span></span></a></li>
|
||||
<li><a class="google" href="http://google.com" target="_blank"><i class="fab fa-google-plus-g"></i><span></span></a></li>
|
||||
<li><a class="dribbble" href="http://dribbble.com" target="_blank"><i class="fab fa-dribbble"></i><span></span></a></li>
|
||||
<li><a class="linkedin" href="http://linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i><span></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 col-md-6 text-md-start text-center">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">ติดต่อเรา</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 breadcrumb text-small alt-font justify-content-center justify-content-md-end sm-margin-15px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul>
|
||||
<li><a href="{{url('')}}" class="text-dark-gray">หน้าแรก</a></li>
|
||||
<!-- <li><a href="#" class="text-dark-gray">Contact</a></li> -->
|
||||
<li class="text-dark-gray">ติดต่อเรา</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- end help section -->
|
||||
<!-- start help section -->
|
||||
<section class="wow animate__fadeIn big-section">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-8 text-center">
|
||||
<img src="images/logo_thegreaterchiangmai_2.png" class="logo-dark margin-20px-bottom" alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-small text-uppercase">ยินดีที่คุณติดต่อเรามา</p>
|
||||
<h2 class="alt-font font-weight-700 letter-spacing-minus-1 text-extra-dark-gray">ให้เราเป็นส่วนหนึ่งของคุณ</h2>
|
||||
<p class="w-75 mx-auto sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry. Lorem Ipsum is simply dummy text of the printing and industry.</p>
|
||||
<a href="#start-your-project" class="btn btn-large btn-transparent-dark-gray margin-10px-top inner-link">Start your Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end help section -->
|
||||
<!-- start contact section -->
|
||||
<section class="no-padding bg-extra-dark-gray">
|
||||
<div class="container-fluid">
|
||||
<div class="row row-cols-1 row-cols-lg-2">
|
||||
<div class="col p-0 cover-background md-h-450px sm-h-350px wow animate__fadeInLeft" style="background-image:url('images/banner/image_2.jpg');"></div>
|
||||
<div class="col p-0 wow animate__fadeInRight">
|
||||
<div class="row row-cols-1 row-cols-sm-2 m-0">
|
||||
<!-- start contact item -->
|
||||
<div class="col bg-extra-dark-gray d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
|
||||
<i class="icon-map text-deep-pink icon-medium margin-25px-bottom"></i>
|
||||
<div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">ที่ติดต่อ</div>
|
||||
<p class="w-60 lg-w-80 mx-auto text-medium">Greater Chiang Mai , เชียงใหม่ , ไทยแลนด์.</p>
|
||||
</div>
|
||||
<!-- end contact item -->
|
||||
<!-- start contact item -->
|
||||
<div class="col bg-black d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
|
||||
<i class="icon-chat text-deep-pink icon-medium margin-25px-bottom"></i>
|
||||
<div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">คุยกับเราผ่านช่องทาง</div>
|
||||
<p class="mx-auto text-medium mb-0">Line : @thegreaterchiangmai</p>
|
||||
<!-- <p class="mx-auto text-medium">Fax: 1-800-222-002</p> -->
|
||||
</div>
|
||||
<!-- end contact item -->
|
||||
<!-- start contact item -->
|
||||
<div class="col bg-black d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
|
||||
<i class="icon-envelope text-deep-pink icon-medium margin-25px-bottom"></i>
|
||||
<div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">อีเมล</div>
|
||||
<p class="mx-auto text-medium mb-0"><a href="mailto:greaterchiangmai@gmail.com">greaterchiangmai@gmail.com</a></p>
|
||||
<!-- <p class="mx-auto text-medium"><a href="mailto:hire@domain.com">hire@domain.com</a></p> -->
|
||||
</div>
|
||||
<!-- end contact item -->
|
||||
<!-- start contact item -->
|
||||
<div class="col bg-extra-dark-gray d-flex flex-column justify-content-center align-items-center text-center h-350px lg-h-300px sm-h-250px last-paragraph-no-margin">
|
||||
<i class="icon-clock text-deep-pink icon-medium margin-25px-bottom"></i>
|
||||
<div class="text-white-2 text-uppercase alt-font font-weight-600 margin-5px-bottom">เวลาทำการ</div>
|
||||
<p class="mx-auto text-medium mb-0">จันทร์ to เสาร์ - 9.00 - 16.00 น.</p>
|
||||
<p class="mx-auto text-medium">อาทิตย์ - 10.00 - 11.00 น</p>
|
||||
</div>
|
||||
<!-- end contact item -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end contact section -->
|
||||
<!-- start form section -->
|
||||
<section class="wow animate__fadeIn" id="start-your-project">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-xl-6 col-lg-7 col-md-9 col-sm-10 margin-eight-bottom md-margin-40px-bottom sm-margin-30px-bottom text-center last-paragraph-no-margin">
|
||||
<h5 class="alt-font font-weight-700 text-extra-dark-gray text-uppercase">tell us about your project</h5>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry. Lorem Ipsum is simply dummy text.</p>
|
||||
</div>
|
||||
</div>
|
||||
<form id="project-contact-form" action="email-templates/contact-form-budget.php" method="post">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-results d-none"></div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<input type="text" name="name" id="name" placeholder="ชื่อ *" class="big-input required">
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<input type="tel" name="phone" id="phone" placeholder="เบอร์โทรศัพท์" class="big-input">
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<input type="email" name="email" id="email" placeholder="อีเมล *" class="big-input required">
|
||||
</div>
|
||||
<!-- <div class="col-12 col-md-6">
|
||||
<div class="select-style big-select">
|
||||
<select name="budget" id="budget" class="bg-transparent mb-0">
|
||||
<option value="">Select your budget</option>
|
||||
<option value="$500 - $1000">$500 - $1000</option>
|
||||
<option value="$1000 - $2000">$1000 - $2000</option>
|
||||
<option value="$2000 - $5000">$2000 - $5000</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col-12">
|
||||
<textarea name="comment" id="comment" placeholder="ข้อความ" rows="6" class="big-textarea"></textarea>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<button id="project-contact-us-button" type="submit" class="btn btn-transparent-dark-gray btn-large margin-20px-top submit">ส่งข้อความ</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end form section -->
|
||||
<!-- <section class="wow animate__fadeIn bg-light-gray">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center social-style-4">
|
||||
<span class="text-medium font-weight-600 text-uppercase d-block alt-font text-extra-dark-gray margin-30px-bottom">On social networks</span>
|
||||
<div class="social-icon-style-4">
|
||||
<ul class="margin-30px-top large-icon">
|
||||
<li><a class="facebook" href="http://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i><span></span></a></li>
|
||||
<li><a class="twitter" href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i><span></span></a></li>
|
||||
<li><a class="google" href="http://google.com" target="_blank"><i class="fab fa-google-plus-g"></i><span></span></a></li>
|
||||
<li><a class="dribbble" href="http://dribbble.com" target="_blank"><i class="fab fa-dribbble"></i><span></span></a></li>
|
||||
<li><a class="linkedin" href="http://linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i><span></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
|
||||
216
think.greaterchiangmai.com/resources/views/index-en.blade.php
Normal file
216
think.greaterchiangmai.com/resources/views/index-en.blade.php
Normal file
@@ -0,0 +1,216 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
{{-- @extends('uc.header') --}}
|
||||
|
||||
@section('main')
|
||||
|
||||
|
||||
<section class="wow animate__fadeIn p-0 parallax sm-background-image-center" data-parallax-background-ratio="0.5"
|
||||
style="background-image: url('images/banner/01banner.jpg')">
|
||||
<div class="opacity-extra-medium bg-black"></div>
|
||||
<div class="container-fluid position-relative full-screen">
|
||||
<div class="row h-100 justify-content-end align-items-end">
|
||||
<div
|
||||
class="col-12 col-xl-7 col-xxl-6 col-lg-8 text-center text-md-start position-relative bg-deep-pink-opacity padding-six-lr lg-padding-seven-lr padding-five-tb sm-padding-30px-all last-paragraph-no-margin">
|
||||
<div class="box-separator-line w-180px bg-white lg-w-120px md-w-90px d-none d-lg-block"></div>
|
||||
<h1 class="font-weight-600 alt-font text-white-2 w-95 md-w-100">GREATER CHIANG MAI</h1>
|
||||
<p class="text-large font-weight-300 text-white-2 w-75 lg-w-85 md-w-95 sm-w-100 d-none d-md-block">Lorem
|
||||
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
|
||||
industry's standard dummy text ever since the 1500s.</p>
|
||||
<a href="{{ url('category/chiangmai') }}"
|
||||
class="btn btn-medium btn-white margin-40px-top text-link-deep-pink sm-margin-10px-top">CHIANG MAI
|
||||
AND NOWHERE ELSE</a>
|
||||
<a href="{{ url('category/where-else') }}"
|
||||
class="btn btn-medium btn-white margin-40px-top text-link-deep-pink sm-margin-10px-top">WHERE
|
||||
ELSE</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-xl-8 col-lg-9 col-md-11 text-center margin-six-bottom sm-margin-30px-bottom">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-80px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<div class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">About Greater
|
||||
Chiang Mai</div>
|
||||
<h6 class="font-weight-300 text-extra-dark-gray mb-0">Lorem Ipsum is simply dummy <strong
|
||||
class="font-weight-400">text of the printing</strong> and typesetting industry. Lorem Ipsum has
|
||||
been the <strong class="font-weight-400"> dummy text ever</strong> since the 1500s.</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center">
|
||||
<!-- feature box item-->
|
||||
<div class="col md-margin-30px-bottom xs-margin-15px-bottom last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<div class="feature-box">
|
||||
<div class="content">
|
||||
<!-- <i class="icon-browser text-medium-gray icon-large margin-25px-bottom md-margin-15px-bottom"></i> -->
|
||||
<div
|
||||
class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom md-margin-5px-bottom">
|
||||
Tradition</div>
|
||||
<p class="w-85 mx-auto md-w-100">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- feature box item-->
|
||||
<div class="col md-margin-30px-bottom xs-margin-15px-bottom last-paragraph-no-margin wow animate__fadeInUp"
|
||||
data-wow-delay="0.2s">
|
||||
<div class="feature-box">
|
||||
<div class="content">
|
||||
<!-- <i class="icon-book-open text-medium-gray icon-large margin-25px-bottom md-margin-15px-bottom"></i> -->
|
||||
<div
|
||||
class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom md-margin-5px-bottom">
|
||||
Culture</div>
|
||||
<p class="w-85 mx-auto md-w-100">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- feature box item-->
|
||||
<div class="col last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.4s">
|
||||
<div class="feature-box">
|
||||
<div class="content">
|
||||
<div
|
||||
class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom md-margin-5px-bottom">
|
||||
Way of life</div>
|
||||
<p class="w-85 mx-auto md-w-100">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="parallax one-second-screen parallax-feature-box md-h-auto" data-parallax-background-ratio="0.3"
|
||||
style="background-image:url('images/banner/image_1.jpg');">
|
||||
<div class="opacity-medium bg-extra-dark-gray"></div>
|
||||
<div class="container position-relative">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-xl-6 col-lg-7 col-sm-8 text-center md-margin-60px-bottom sm-margin-40px-bottom">
|
||||
<!-- <a class="popup-youtube" href="#">
|
||||
<img src="images/icon-play.png" class="w-130px" alt="" /></a> -->
|
||||
<h4 class="alt-font text-white-2">Culture and Heritage Think tank</h4>
|
||||
<p class="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dicta quos
|
||||
laboriosam, cupiditate repellat voluptates illo, libero ex dolore doloribus corrupti veritatis,
|
||||
suscipit quod deserunt sunt? Odit dolore expedita veniam?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom">
|
||||
<div class="container-fluid" style="margin-bottom: 100px;">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">Selected latest Story
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
Articles</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Chiangmai --}}
|
||||
<h6 class="text-center alt-font font-weight-400 letter-spacing-minus-1 text-extra-dark-gray">
|
||||
CHIANGMAI AND NOWHERE ELSE
|
||||
</h6>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name_en }}
|
||||
</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{-- Where Else --}}
|
||||
<h6 class="text-center alt-font font-weight-400 letter-spacing-minus-1 text-extra-dark-gray">
|
||||
WHERE ELSE
|
||||
</h6>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemViewWhereElse as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a
|
||||
href="{{ url('category/where-else/article-detail/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name }}
|
||||
</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
216
think.greaterchiangmai.com/resources/views/index.blade.php
Normal file
216
think.greaterchiangmai.com/resources/views/index.blade.php
Normal file
@@ -0,0 +1,216 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
{{-- @extends('uc.header') --}}
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start parallax hero section -->
|
||||
<section class="wow animate__fadeIn p-0 parallax sm-background-image-center" data-parallax-background-ratio="0.5"
|
||||
style="background-image: url('images/banner/01banner.jpg')">
|
||||
<div class="opacity-extra-medium bg-black"></div>
|
||||
<div class="container-fluid position-relative full-screen">
|
||||
<div class="row h-100 justify-content-end align-items-end">
|
||||
<div
|
||||
class="col-12 col-xl-7 col-xxl-6 col-lg-8 text-center text-md-start position-relative bg-deep-pink-opacity padding-six-lr lg-padding-seven-lr padding-five-tb sm-padding-30px-all last-paragraph-no-margin">
|
||||
<div class="box-separator-line w-180px bg-white lg-w-120px md-w-90px d-none d-lg-block"></div>
|
||||
<h1 class="font-weight-600 alt-font text-white-2 w-95 md-w-100">GREATER CHIANG MAI</h1>
|
||||
<p class="text-large font-weight-300 text-white-2 w-75 lg-w-85 md-w-95 sm-w-100 d-none d-md-block">Lorem
|
||||
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
|
||||
industry's standard dummy text ever since the 1500s.</p>
|
||||
<a href="{{ url('category/chiangmai') }}"
|
||||
class="btn btn-medium btn-white margin-40px-top text-link-deep-pink sm-margin-10px-top">CHIANG MAI
|
||||
AND NOWHERE ELSE</a>
|
||||
<a href="{{ url('category/where-else') }}"
|
||||
class="btn btn-medium btn-white margin-40px-top text-link-deep-pink sm-margin-10px-top">WHERE
|
||||
ELSE</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-xl-8 col-lg-9 col-md-11 text-center margin-six-bottom sm-margin-30px-bottom">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-80px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<div class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">เกี่ยวกับ Greater
|
||||
Chiang Mai</div>
|
||||
<h6 class="font-weight-300 text-extra-dark-gray mb-0">Lorem Ipsum is simply dummy <strong
|
||||
class="font-weight-400">text of the printing</strong> and typesetting industry. Lorem Ipsum has
|
||||
been the <strong class="font-weight-400"> dummy text ever</strong> since the 1500s.</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center">
|
||||
<!-- feature box item-->
|
||||
<div class="col md-margin-30px-bottom xs-margin-15px-bottom last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<div class="feature-box">
|
||||
<div class="content">
|
||||
<!-- <i class="icon-browser text-medium-gray icon-large margin-25px-bottom md-margin-15px-bottom"></i> -->
|
||||
<div
|
||||
class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom md-margin-5px-bottom">
|
||||
Tradition</div>
|
||||
<p class="w-85 mx-auto md-w-100">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- feature box item-->
|
||||
<div class="col md-margin-30px-bottom xs-margin-15px-bottom last-paragraph-no-margin wow animate__fadeInUp"
|
||||
data-wow-delay="0.2s">
|
||||
<div class="feature-box">
|
||||
<div class="content">
|
||||
<!-- <i class="icon-book-open text-medium-gray icon-large margin-25px-bottom md-margin-15px-bottom"></i> -->
|
||||
<div
|
||||
class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom md-margin-5px-bottom">
|
||||
Culture</div>
|
||||
<p class="w-85 mx-auto md-w-100">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
<!-- feature box item-->
|
||||
<div class="col last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.4s">
|
||||
<div class="feature-box">
|
||||
<div class="content">
|
||||
<!-- <i class="icon-wallet text-medium-gray icon-large margin-25px-bottom md-margin-15px-bottom"></i> -->
|
||||
<div
|
||||
class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom md-margin-5px-bottom">
|
||||
Way of life</div>
|
||||
<p class="w-85 mx-auto md-w-100">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end feature box item-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="parallax one-second-screen parallax-feature-box md-h-auto" data-parallax-background-ratio="0.3"
|
||||
style="background-image:url('images/banner/image_1.jpg');">
|
||||
<div class="opacity-medium bg-extra-dark-gray"></div>
|
||||
<div class="container position-relative">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-xl-6 col-lg-7 col-sm-8 text-center md-margin-60px-bottom sm-margin-40px-bottom">
|
||||
<!-- <a class="popup-youtube" href="#">
|
||||
<img src="images/icon-play.png" class="w-130px" alt="" /></a> -->
|
||||
<h4 class="alt-font text-white-2">Culture and Heritage Think tank</h4>
|
||||
<p class="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dicta quos
|
||||
laboriosam, cupiditate repellat voluptates illo, libero ex dolore doloribus corrupti veritatis,
|
||||
suscipit quod deserunt sunt? Odit dolore expedita veniam?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom">
|
||||
<div class="container-fluid" style="margin-bottom: 100px;">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">Selected latest Story
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
บทความ</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{-- Chiangmai --}}
|
||||
<h6 class="text-center alt-font font-weight-400 letter-spacing-minus-1 text-extra-dark-gray">
|
||||
CHIANGMAI AND NOWHERE ELSE
|
||||
</h6>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name }}
|
||||
</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Where Else --}}
|
||||
<h6 class="text-center alt-font font-weight-400 letter-spacing-minus-1 text-extra-dark-gray">
|
||||
WHERE ELSE
|
||||
</h6>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemViewWhereElse as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a
|
||||
href="{{ url('category/where-else/article-detail/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name }}
|
||||
</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,341 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
|
||||
<head>
|
||||
<!-- title -->
|
||||
<title>GREATER CHIANG MAI</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
|
||||
<meta name="author" content="GREATER CHIANG MAI">
|
||||
<!-- description -->
|
||||
<meta name="description" content="GREATER CHIANG MAI">
|
||||
<!-- keywords -->
|
||||
<meta name="keywords" content="GREATER CHIANG MAI">
|
||||
<!-- favicon -->
|
||||
<link rel="shortcut icon" href="{{ url('images/favicon.png') }}">
|
||||
<link rel="apple-touch-icon" href="{{ url('images/apple-touch-icon-57x57.png') }}">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="{{ url('images/apple-touch-icon-72x72.png') }}">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="{{ url('images/apple-touch-icon-114x114.png') }}">
|
||||
<!-- style sheets and font icons -->
|
||||
<link rel="stylesheet" type="text/css" href="{{ url('css/bootsnav.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url('css/font-icons.min.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url('css/theme-vendors.min.css') }}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url('css/style.css') }}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ url('css/responsive.css') }}" />
|
||||
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<style>
|
||||
.navbar-nav li a {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.act-link {
|
||||
color: #E23134 !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: rgb(24, 24, 24);
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: #f1f1f1;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.customer-footer-bg {
|
||||
background-color: #FF0000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.customer-footer-bg a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.customer-footer-bg-bar {
|
||||
background-color: #D30000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.customer-footer-bg-bar a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.border-color-medium-dark-gray {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
.custom-navbar-bg {
|
||||
background-color: #FF0000 !important;
|
||||
}
|
||||
|
||||
.custom-navbar-bg a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.custom-navbar-bg a.act-link,
|
||||
.custom-navbar-bg a:hover,
|
||||
.custom-navbar-bg a:active,
|
||||
.custom-navbar-bg a:focus {
|
||||
color: #E6FF7D !important;
|
||||
}
|
||||
|
||||
|
||||
.custom-navbar-bg .header-searchbar {
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- start header -->
|
||||
<header>
|
||||
<!-- start navigation -->
|
||||
<nav
|
||||
class="navbar custom-navbar-bg navbar-default bootsnav navbar-fixed-top header-light dark-link navbar-expand-lg">
|
||||
<div class="container-lg nav-header-container">
|
||||
<!-- start logo -->
|
||||
<div class="col-auto ps-0">
|
||||
<a href="{{ url('') }}" title="GREATER CHIANG MAI" class="logo"><img
|
||||
src="{{ url('images/logo_thegreaterchiangmai_white2.png') }}"
|
||||
data-at2x="{{ url('images/logo_thegreaterchiangmai_white2.png') }}"
|
||||
alt="GREATER CHIANG MAI"></a>
|
||||
</div>
|
||||
<!-- end logo -->
|
||||
<div class="col accordion-menu pe-0 pe-md-3">
|
||||
<button type="button" class="navbar-toggler collapsed" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbar-collapse-toggle-1">
|
||||
<span class="sr-only">toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse justify-content-end" id="navbar-collapse-toggle-1">
|
||||
<ul id="accordion" class="nav navbar-nav no-margin alt-font text-normal"
|
||||
data-in="animate__fadeIn" data-out="animate__fadeOut">
|
||||
<!-- start menu item -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ Request::is('/*') ? 'act-link' : '' }}"
|
||||
href="{{ url('') }}">{{ trans('global.menu_home') }}</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="dropdown-btn nav-link {{ Request::is('category*') ? 'act-link' : '' }}"
|
||||
onclick="toggleDropdown()">{{ trans('global.menu_category') }}</a>
|
||||
<ul class="dropdown-content" id="dropdown-menu">
|
||||
<li><a href="{{ url('category/chiangmai') }}">CHIANGMAI AND NOWHERE ELSE</a></li>
|
||||
<li><a href="{{ url('category/where-else') }}">WHERE ELSE</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ Request::is('about*') ? 'act-link' : '' }}"
|
||||
href="{{ url('about') }}">{{ trans('global.menu_about') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ Request::is('contact*') ? 'act-link' : '' }}"
|
||||
href="{{ url('contact') }}">{{ trans('global.menu_contact') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto pe-0">
|
||||
<div class="header-searchbar d-flex">
|
||||
@if (session()->get('locale') == 'th')
|
||||
<li class="nav-item">
|
||||
<a class="nav-link act-link" aria-current="page" href="javascript:void(0)">TH</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-black" aria-current="page"
|
||||
href="{{ url('change-lang/en') }}">EN</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-black" aria-current="page"
|
||||
href="{{ url('change-lang/th') }}">TH</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link act-link" aria-current="page" href="javascript:void(0)">EN</a>
|
||||
</li>
|
||||
@endif
|
||||
<li class="nav-item">
|
||||
<a style="color:#fff!important;" href="#search-header"
|
||||
class="nav-link act-link header-search-form">
|
||||
<i class="fas fa-search search-button"></i>
|
||||
</a>
|
||||
<form id="search-header" method="post" name="search-header"
|
||||
class="search-form-result mfp-hide">
|
||||
<div class="search-form position-relative">
|
||||
<input type="text" name="search" class="search-input"
|
||||
placeholder="{{ trans('global.enter_keyword') }}" autocomplete="off"
|
||||
onkeydown="handleEnter(event)"
|
||||
style="border-top: none; border-right: none; border-bottom: 2px solid rgba(255, 255, 255, 0.5); border-left: none; border-image: initial;">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- end header -->
|
||||
|
||||
@yield('main')
|
||||
|
||||
<!-- start footer -->
|
||||
<footer class="footer-standard-dark bg-extra-dark-gray customer-footer-bg">
|
||||
<div class="footer-widget-area padding-five-tb sm-padding-30px-tb">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-lg-3 col-sm-6 widget border-right border-color-medium-dark-gray md-no-border-right md-margin-30px-bottom text-center text-sm-start">
|
||||
<!-- start logo -->
|
||||
<a href="{{ url('') }}" class="margin-20px-bottom d-inline-block"><img
|
||||
class="footer-logo" src="{{ url('images/logo_thegreaterchiangmai_white2.png') }}"
|
||||
data-at2x="{{ url('images/logo_thegreaterchiangmai_white2.png') }}"
|
||||
alt=""></a>
|
||||
<!-- end logo -->
|
||||
<p class="text-small d-inline-block w-95 lg-w-100 xs-w-95">Lorem Ipsum is simply dummy text of
|
||||
the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry.</p>
|
||||
<!-- start social media -->
|
||||
<div class="social-icon-style-8 d-inline-block align-middle">
|
||||
<ul class="small-icon no-margin-bottom">
|
||||
<li><a class="facebook text-white-2" href="https://www.facebook.com/"
|
||||
target="_blank"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
|
||||
<li><a class="twitter text-white-2" href="https://twitter.com/" target="_blank"><i
|
||||
class="fab fa-twitter"></i></a></li>
|
||||
<li><a class="google text-white-2" href="https://plus.google.com" target="_blank"><i
|
||||
class="fab fa-google-plus-g"></i></a></li>
|
||||
<li><a class="instagram text-white-2" href="https://instagram.com/"
|
||||
target="_blank"><i class="fab fa-instagram no-margin-right"
|
||||
aria-hidden="true"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end social media -->
|
||||
</div>
|
||||
<!-- start additional links -->
|
||||
<div
|
||||
class="col-lg-3 col-sm-6 widget border-right border-color-medium-dark-gray padding-45px-left md-padding-15px-left md-no-border-right md-margin-30px-bottom text-center text-sm-start">
|
||||
<div
|
||||
class="widget-title alt-font text-small text-uppercase margin-10px-bottom font-weight-600">
|
||||
Additional Links</div>
|
||||
<ul class="list-unstyled">
|
||||
<li><a class="text-small" href="{{ url('') }}">{{ trans('global.menu_home') }}</a>
|
||||
</li>
|
||||
<li><a class="text-small"
|
||||
href="{{ url('category') }}">{{ trans('global.menu_category') }}</a></li>
|
||||
<li><a class="text-small"
|
||||
href="{{ url('about') }}">{{ trans('global.menu_about') }}</a></li>
|
||||
<li><a class="text-small"
|
||||
href="{{ url('contact') }}">{{ trans('global.menu_contact') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end additional links -->
|
||||
<!-- start contact information -->
|
||||
<div
|
||||
class="col-lg-3 col-sm-6 widget border-right border-color-medium-dark-gray padding-45px-left md-padding-15px-left md-no-border-right xs-margin-30px-bottom text-center text-sm-start">
|
||||
<div
|
||||
class="widget-title alt-font text-small text-uppercase margin-10px-bottom font-weight-600">
|
||||
Contact Info</div>
|
||||
<p class="text-small d-block margin-15px-bottom w-80 sm-w-100">GREATER CHIANG MAI <br>
|
||||
Chiang Mai , Thailand</p>
|
||||
<div class="text-small">Email: <a
|
||||
href="mailto:sales@domain.com">greaterchiangmai@gmail.com</a></div>
|
||||
<div class="text-small">Line : @greaterchiangmai</div>
|
||||
<!-- <a href="contact-us-modern.html" class="text-small text-uppercase text-decoration-underline">View Direction</a> -->
|
||||
</div>
|
||||
<!-- end contact information -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-dark-footer padding-50px-tb text-center sm-padding-30px-tb customer-footer-bg-bar">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- start copyright -->
|
||||
<div class="col-md-6 text-md-start text-small text-center">© 2024 GREATER CHIANG MAI</div>
|
||||
<div class="col-md-6 text-md-end text-small text-center">
|
||||
<a target="_blank" href="{{ url('privacy-policy') }}" class="text-dark-gray">Privacy
|
||||
Policy</a>
|
||||
</div>
|
||||
<!-- end copyright -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- end footer -->
|
||||
<!-- start scroll to top -->
|
||||
<a class="scroll-top-arrow" href="javascript:void(0);"><i class="ti-arrow-up"></i></a>
|
||||
<!-- end scroll to top -->
|
||||
<!-- javascript -->
|
||||
<script type="text/javascript" src="{{ url('js/jquery.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url('js/bootsnav.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url('js/jquery.nav.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url('js/hamburger-menu.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url('js/theme-vendors.min.js') }}"></script>
|
||||
<!-- setting -->
|
||||
<script type="text/javascript" src="{{ url('js/main.js') }}"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||||
<script>
|
||||
function toggleDropdown() {
|
||||
document.getElementById("dropdown-menu").classList.toggle("show");
|
||||
}
|
||||
|
||||
// Close the dropdown if the user clicks outside of it
|
||||
window.onclick = function(event) {
|
||||
if (!event.target.matches('.dropdown-btn')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdown-content");
|
||||
for (let i = 0; i < dropdowns.length; i++) {
|
||||
let openDropdown = dropdowns[i];
|
||||
if (openDropdown.classList.contains('show')) {
|
||||
openDropdown.classList.remove('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleEnter(event) {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault(); // Prevent form submission
|
||||
triggerSearch(); // Call the search function
|
||||
}
|
||||
}
|
||||
|
||||
function triggerSearch() {
|
||||
const searchInput = document.querySelector('.search-input').value.trim();
|
||||
|
||||
if (searchInput) {
|
||||
const baseUrl = "{{ url('article') }}";
|
||||
window.location.href = `${baseUrl}?search=${encodeURIComponent(searchInput)}`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@yield('js')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,146 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">
|
||||
Personal Data Protection Policy</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 alt-font breadcrumb justify-content-center justify-content-md-end text-small sm-margin-10px-top">
|
||||
<!-- start breadcrumb -->
|
||||
<ul>
|
||||
<li><a href="{{ url('') }}" class="text-dark-gray">Home</a></li>
|
||||
|
||||
<li class="text-dark-gray">Personal Data Protection Policy</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- start feature box section -->
|
||||
<section class="p-0 wow animate__fadeIn bg-light-gray page-title-small">
|
||||
<div class="container">
|
||||
<p>
|
||||
GREATER CHIANG MAI welcomes all service users to the website. <a
|
||||
href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> which is under the
|
||||
supervision of GREATER CHIANG MAI and is being prepared This “Privacy Policy” was created to protect the
|
||||
personal information of users who come to use the website's services. <a
|
||||
href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> by GREATER
|
||||
CHIANG MAI has a duty to maintain reliability. Therefore, the following actions are taken in order to
|
||||
protect users' personal information from other people as follows:
|
||||
</p>
|
||||
<p>
|
||||
<ul>
|
||||
<li>1. GREATER CHIANG MAI implements personal information security according to specified standards.</li>
|
||||
<li>2. Dissemination of information or sharing must be in accordance with the law.</li>
|
||||
<li>3. GREATER CHIANG MAI will release personal information only with consent.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p class="mt-2">
|
||||
This privacy policy will be used to deal with <a
|
||||
href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> and , or other platforms located
|
||||
under the domain name <a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> If there are
|
||||
any changes If something happens to the Personal
|
||||
Data Protection Policy, GREATER CHIANG MAI will immediately notify the user.
|
||||
</p>
|
||||
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">Collection of personal information
|
||||
</h1>
|
||||
<p>
|
||||
<ul>
|
||||
<li>
|
||||
1. For the benefit of providing services And to improve the quality of service even further, GREATER
|
||||
CHIANG MAI needs to collect additional information including IP Address, Browser, Domain name, time of
|
||||
visit, service usage before coming to the website. <a
|
||||
href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> Viewed content and user
|
||||
experience within the website <a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
</li>
|
||||
<li>2. Contact information includes first name, last name, email, telephone number.</li>
|
||||
<li>
|
||||
3. <a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> Users are advised to check
|
||||
the privacy policy. If the user deems it
|
||||
inappropriate and do not want to accept such conditions Users can cancel immediately.
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">Use of personal information</h1>
|
||||
<p>
|
||||
<ul>
|
||||
<li>
|
||||
1. <a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> We certify that we will not
|
||||
use the personal information of users that we
|
||||
have collected. Do not distribute it to outsiders unless you receive it. User consent only
|
||||
</li>
|
||||
<li>
|
||||
2. In the case where <a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> has hired
|
||||
another agency to process users' personal
|
||||
information, such as statistical data analysis or Carrying out various activities
|
||||
<a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> will require the company or
|
||||
person assigned to do so Maintain confidentiality
|
||||
and Safety of user information It is strictly prohibited to distribute personal information outside of
|
||||
the Company's activities. <a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> only
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">Right to control personal
|
||||
information
|
||||
</h1>
|
||||
<p>
|
||||
For the sake of maintaining the security and confidentiality of personal information.
|
||||
<a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> Therefore, it sets rules and rights
|
||||
to access personal information and provides a
|
||||
secure communication channel for information by encrypting information by using Secure Socket (SSL) Protocol
|
||||
to use in data transmission.
|
||||
</p>
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">
|
||||
Using cookies (Cookies)
|
||||
</h1>
|
||||
<p>
|
||||
Cookies are information that <a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a> sends
|
||||
to the user's browser. And when cookies are
|
||||
installed into the user's system will make the website <a
|
||||
href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a>. User information can be
|
||||
saved until the user exits the browser or deletes cookies. or do not allow cookies to function first
|
||||
</p>
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">
|
||||
Privacy policy updates
|
||||
</h1>
|
||||
<p>
|
||||
Cookies are information at <a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a>. May
|
||||
update or amend the Privacy Policy without prior
|
||||
notice to users. This is for the suitability and efficiency of providing services. We therefore recommend
|
||||
that users read the privacy policy every time they visit the website.
|
||||
</p>
|
||||
<p>In case of any questions, suggestions or criticisms regarding the privacy policy. or privacy policy
|
||||
<a href="https://www.greaterchiangmai.com">www.greaterchiangmai.com</a>. Happy to answer questions and
|
||||
suggestions that will be beneficial to service
|
||||
improvement. You can contact us via the channels below.
|
||||
</p>
|
||||
<p>Email : <a target="_blank" href="mailto:greaterchiangmai@gmail.com">greaterchiangmai@gmail.com</a> </p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,127 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">
|
||||
นโยบายคุ้มครองข้อมูลส่วนบุคคล</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 alt-font breadcrumb justify-content-center justify-content-md-end text-small sm-margin-10px-top">
|
||||
<!-- start breadcrumb -->
|
||||
<ul>
|
||||
<li><a href="{{ url('') }}" class="text-dark-gray">หน้าแรก</a></li>
|
||||
|
||||
<li class="text-dark-gray">นโยบายคุ้มครองข้อมูลส่วนบุคคล</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- start feature box section -->
|
||||
<section class="p-0 wow animate__fadeIn bg-light-gray page-title-small">
|
||||
<div class="container">
|
||||
<p>GREATER CHIANG MAI ยินดีต้อนรับผู้ใช้บริการทุกท่านเข้าสู่เว็บไซต์ <a
|
||||
href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
ซึ่งอยู่ในความดูแลของ GREATER CHIANG MAI และดำเนินการจัดทำ “นโยบายสิทธิส่วนบุคคล” (Privacy Policy)
|
||||
ฉบับนี้ขึ้น เพื่อคุ้มครองข้อมูลส่วนบุคคลของผู้ใช้ที่เข้ามาใช้บริการของเว็บไซต์ <a
|
||||
href="https://greaterchiangmai.com">www.greaterchiangmai.com</a> โดย
|
||||
GREATER CHIANG MAI มีหน้าที่ในการรักษาความน่าเชื่อถือ
|
||||
จึงดำเนินการดังต่อไปนี้เพื่อเป็นการปกป้องข้อมูลส่วนตัวของผู้ใช้จากบุคคลอื่นดังนี้</p>
|
||||
<p>
|
||||
<ul>
|
||||
<li>• GREATER CHIANG MAI ดำเนินการรักษาความปลอดภัยข้อมูลส่วนบุคคลตามมาตรฐานที่กำหนด</li>
|
||||
<li>• การเผยแพร่ข้อมูลหรือการแบ่งปันให้เป็นไปตามที่กฎหมายกำหนด</li>
|
||||
<li>• GREATER CHIANG MAI จะเผยแพร่ข้อมูลส่วนบุคคลเมื่อได้รับความยินยอมเท่านั้น</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p class="mt-2">นโยบายสิทธิส่วนบุคคลนี้จะใช้ดำเนินการกับ <a
|
||||
href="https://greaterchiangmai.com">www.greaterchiangmai.com</a> และ , หรือ แพลตฟอร์มอื่นๆ
|
||||
ที่อยู่ภายใต้โดเมนเนม <a href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
หากมีการเปลี่ยนแปลงใดๆ
|
||||
เกิดขึ้นกับนโยบายคุ้มครองข้อมูลส่วนบุคคล GREATER CHIANG MAI จะดำเนินการแจ้งผู้ใช้ทันที</p>
|
||||
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">การเก็บรวบรวมข้อมูลส่วนบุคคล</h1>
|
||||
<p>
|
||||
<ul>
|
||||
<li>• เพื่อประโยชน์ในการให้บริการ และการปรับปรุงคุณภาพการบริการให้ดียิ่งขึ้น GREATER CHIANG MAI
|
||||
จำเป็นต้องเก็บรวบรวมข้อมูลเพิ่มเติม ได้แก่ IP Address, Browser, Domain name, เวลาที่เยี่ยมชม,
|
||||
การใช้บริการก่อนที่เข้ามาที่เว็บไซต์ <a href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
เนื้อหาที่รับชม
|
||||
และประสบการณ์ของผู้ใช้ภายในเว็บ <a href="https://greaterchiangmai.com">www.greaterchiangmai.com</a></li>
|
||||
<li>• ข้อมูลติดต่อ ได้แก่ ชื่อ , นามสกุล , อีเมล , หมายเลขโทรศัพท์</li>
|
||||
<li>• <a href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
ขอแนะนำให้ผู้ใช้ตรวจสอบนโยบายสิทธิส่วนบุคคล หากผู้ใช้เห็นว่าไม่สมควร
|
||||
และไม่ต้องการยอมรับเงื่อนไขดังกล่าว ผู้ใช้สามารถยกเลิกได้ทันที</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">การใช้ข้อมูลส่วนบุคคล</h1>
|
||||
<p>
|
||||
<ul>
|
||||
<li>• <a href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
ขอรับรองว่าจะไม่นำข้อมูลส่วนบุคคลของผู้ใช้ที่ได้เก็บรวบรวมไว้
|
||||
ไปเผยแพร่แก่บุคคลภายนอกโดยเด็ดขาดเว้นเสียแต่จะได้รับ การยินยอมจากผู้ใช้เท่านั้น</li>
|
||||
<li>• ในกรณีที่
|
||||
<a
|
||||
href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>ได้ว่าจ้างหน่วยงานอื่นเพื่อดำเนินการเกี่ยวกับข้อมูลส่วนบุคคลของผู้ใช้
|
||||
เช่น
|
||||
การวิเคราะห์ข้อมูลเชิงสถิติหรือการ ดำเนินกิจกรรมต่างๆ <a
|
||||
href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
จะกำหนดให้บริษัทหรือบุคคลที่ได้รับมอบหมายให้ดำเนินการดังกล่าว เก็บรักษาความลับและความ
|
||||
ปลอดภัยของข้อมูลผู้ใช้ ห้ามมิให้นำข้อมูลส่วนบุคคลไปเผยแพร่โดยเด็ดขาดนอกเหนือจากกิจกรรมของ
|
||||
<a href="https://greaterchiangmai.com">www.greaterchiangmai.com</a> เท่านั้น
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">สิทธิในการควบคุมข้อมูลส่วนบุคคล
|
||||
</h1>
|
||||
<p>เพื่อประโยชน์ในการรักษาความปลอดภัยและความลับของข้อมูลส่วนบุคคล <a
|
||||
href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
จึงกำหนดกฎและสิทธิในการเข้าถึงข้อมูลส่วนบุคคลและจัดให้มีช่องทางการสื่อสารแบบปลอดภัยสำหรับข้อมูลด้วยการเข้ารหัสข้อมูล
|
||||
โดยการใช้ Secure Socket (SSL) Protocal เข้ามาใช้ในการรับส่งข้อมูล</p>
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">การใช้คุกกี้ (Cookies)
|
||||
</h1>
|
||||
<p>คุกกี้ คือ ข้อมูลที่ <a href="https://greaterchiangmai.com">www.greaterchiangmai.com</a> ส่งไปยัง Browser
|
||||
ของผู้ใช้บริการ
|
||||
และเมื่อมีการติดตั้งคุกกี้ลงไปในระบบของผู้ใช้แล้ว จะทำให้เว็บไซต์ <a
|
||||
href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
สามารถบันทึกข้อมูลของผู้ใช้ไว้จนกว่าผู้ใช้จะออกจาก Browser หรือ ทำการลบคุกกี้
|
||||
หรือไม่อนุญาตให้คุกกี้ทำงานก่อน</p>
|
||||
|
||||
<h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">การปรับปรุงนโยบายความเป็นส่วนตัว
|
||||
</h1>
|
||||
<p>คุกกี้ คือ ข้อมูลที่ <a href="https://greaterchiangmai.com">www.greaterchiangmai.com</a>
|
||||
อาจจะทำการปรับปรุงหรือแก้ไขนโยบายความเป็นส่วนตัวโดยไม่แจ้งให้ผู้ใช้ทราบล่วงหน้า
|
||||
ทั้งนี้เพื่อความเหมาะสมและประสิทธิภาพในการให้บริการ
|
||||
จึงขอแนะนำให้ผู้ใช้บริการอ่านนโยบายความเป็นส่วนตัวทุกครั้งที่เข้าเยี่ยมชมเว็บไซต์</p>
|
||||
<p>ในกรณีที่มีข้อสงสัย ข้อเสนอแนะ หรือติชมเกี่ยวกับนโยบายสิทธิส่วนบุคคล หรือนโยบายความเป็นส่วนตัว
|
||||
<a href="https://greaterchiangmai.com">www.greaterchiangmai.com</a> ยินดีที่จะตอบข้อสงสัย ข้อเสนอแนะ
|
||||
อันจะเป็นประโยชน์ต่อการปรับปรุงบริการ
|
||||
สามารถติดต่อได้ตามช่องทางด้านล่างนี้
|
||||
</p>
|
||||
<p>อีเมล : <a target="_blank" href="mailto:greaterchiangmai@gmail.com">greaterchiangmai@gmail.com</a> </p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,22 @@
|
||||
<!-- Main Slider Section Starts -->
|
||||
<div id="demo" class="carousel slide" data-bs-ride="carousel">
|
||||
<!-- Indicators/dots -->
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
|
||||
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
|
||||
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
|
||||
</div>
|
||||
<!-- The slideshow/carousel -->
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="http://via.placeholder.com/1200x580" class="d-block" style="width:100%">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="http://via.placeholder.com/1200x580" class="d-block" style="width:100%">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="http://via.placeholder.com/1200x580" class="d-block" style="width:100%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Slider Section Ends -->
|
||||
@@ -0,0 +1,99 @@
|
||||
<style>
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
color: #E23134;
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
background-color: #E23134;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.pagination .active .page-link {
|
||||
background-color: #E23134;
|
||||
color: #fff;
|
||||
border-color: #E23134;
|
||||
}
|
||||
|
||||
.page-item:first-child .page-link,
|
||||
.page-item:last-child .page-link {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@if (is_object($data) && $data->hasPages())
|
||||
<ul class="pagination">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($data->onFirstPage())
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">«</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $data->previousPageUrl() }}" rel="prev">«</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Pagination Elements --}}
|
||||
@foreach ($data->links()->elements as $element)
|
||||
{{-- "Three Dots" Separator --}}
|
||||
@if (is_string($element))
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">{{ $element }}</span>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Array of Links --}}
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $data->currentPage())
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">{{ $page }}</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $url }}">{{ $page }}</a>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($data->hasMorePages())
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $data->nextPageUrl() }}" rel="next">»</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">»</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
@endif
|
||||
Reference in New Issue
Block a user