562 lines
32 KiB
PHP
562 lines
32 KiB
PHP
@extends('indexlayout')
|
|
|
|
@section('title', 'lokasi')
|
|
@push('style')
|
|
@endpush
|
|
@section('content')
|
|
<div class="row">
|
|
<main id="js-page-content" role="main" class="page-content">
|
|
<ol class="breadcrumb page-breadcrumb">
|
|
<li class="breadcrumb-item"><a href="javascript:void(0);">Sarana & Prasarana</a></li>
|
|
<li class="breadcrumb-item active">TPS3R</li>
|
|
<li class="breadcrumb-item active">Lokasi TPS</li>
|
|
<li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
|
|
</ol>
|
|
|
|
|
|
<div class="container1">
|
|
|
|
|
|
{{-- <div class="image-container1">
|
|
<div class="card-group">
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
|
|
</div>
|
|
</div> --}}
|
|
<div class="popup-image">
|
|
{{-- <span style="color: blue">×</span> --}}
|
|
<img src="" alt="">
|
|
</div>
|
|
|
|
<div class="card-group">
|
|
|
|
<div class="card-group">
|
|
<div class="container1" style="width: 1550px;">
|
|
<div class="panel-hdr">
|
|
<h2 style="justify-content: center; font-size:1.5rem">
|
|
Lokasi TPS Ketapang
|
|
</h2>
|
|
</div>
|
|
<div class="image-container1">
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_myjen1.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_myjen1.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_ketapang4.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_ketapang5.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_ketapang6.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container1">
|
|
|
|
|
|
{{-- <div class="image-container1">
|
|
<div class="card-group">
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
|
|
</div>
|
|
</div> --}}
|
|
<div class="popup-image">
|
|
{{-- <span style="color: blue">×</span> --}}
|
|
<img src="" alt="">
|
|
</div>
|
|
|
|
<div class="card-group">
|
|
|
|
<div class="card-group">
|
|
<div class="container1" style="width: 1550px;">
|
|
<div class="panel-hdr">
|
|
<h2 style="justify-content: center; font-size:1.5rem" id="tps-mayjend">
|
|
Lokasi TPS Mayjend Sutoyo (PLN)
|
|
</h2>
|
|
</div>
|
|
<div class="image-container1">
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_myjen1.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_myjen2.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_myjen3.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_myjen4.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_myjen5.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_myjen6.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container1">
|
|
|
|
|
|
{{-- <div class="image-container1">
|
|
<div class="card-group">
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
|
|
</div>
|
|
</div> --}}
|
|
<div class="popup-image">
|
|
{{-- <span style="color: blue">×</span> --}}
|
|
<img src="" alt="">
|
|
</div>
|
|
|
|
<div class="card-group">
|
|
|
|
<div class="card-group">
|
|
<div class="container1" style="width: 1550px;">
|
|
<div class="panel-hdr">
|
|
<h2 style="justify-content: center; font-size:1.5rem" id="tps-mayjend">
|
|
Lokasi TPS H. Naman
|
|
</h2>
|
|
</div>
|
|
<div class="image-container1">
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_naman1.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_naman2.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_naman3.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_naman4.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_naman5.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_naman6.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container1">
|
|
|
|
|
|
{{-- <div class="image-container1">
|
|
<div class="card-group">
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
|
|
</div>
|
|
</div> --}}
|
|
<div class="popup-image">
|
|
{{-- <span style="color: blue">×</span> --}}
|
|
<img src="" alt="">
|
|
</div>
|
|
|
|
<div class="card-group">
|
|
|
|
<div class="card-group">
|
|
<div class="container1" style="width: 1550px;">
|
|
<div class="panel-hdr">
|
|
<h2 style="justify-content: center; font-size:1.5rem" id="tps-mayjend">
|
|
Lokasi TPS PIK II
|
|
</h2>
|
|
</div>
|
|
<div class="image-container1">
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pik1.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pik2.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pik3.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pik4.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pik5.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pik6.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container1">
|
|
|
|
|
|
{{-- <div class="image-container1">
|
|
<div class="card-group">
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
|
|
<div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
|
|
</div>
|
|
</div> --}}
|
|
<div class="popup-image">
|
|
{{-- <span style="color: blue">×</span> --}}
|
|
<img src="" alt="">
|
|
</div>
|
|
|
|
<div class="card-group">
|
|
|
|
<div class="card-group">
|
|
<div class="container1" style="width: 1550px;">
|
|
<div class="panel-hdr">
|
|
<h2 style="justify-content: center; font-size:1.5rem" id="tps-mayjend">
|
|
Lokasi TPS Pondok Kopi
|
|
</h2>
|
|
</div>
|
|
<div class="image-container1">
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pondokkopi1.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pondokkopi2.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pondokkopi3.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pondokkopi4.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and
|
|
make up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pondokkopi5.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="width: 450px;">
|
|
<img src="{{ 'layout/dist/img/2022/tps_pondokkopi6.jpeg' }}" class="card-img-top"
|
|
alt="...">
|
|
<h5 class="card-title" style="padding: 10px">Card title</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make
|
|
up
|
|
the
|
|
bulk
|
|
of the card's content.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('script')
|
|
<script src="{{ asset('layout/dist/js/datagrid/datatables/datatables.bundle.js') }}"></script>
|
|
{{-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> --}}
|
|
<script src="{{ asset('layout/dist/js/tabel.js') }}"></script>
|
|
<script src="{{ asset('layout/dist/js/linechart.js') }}"></script>
|
|
<script src="{{ asset('layout/dist/js/iku.js') }}"></script>
|
|
<script src="{{ asset('layout/dist/css/image.css') }}"></script>
|
|
<script>
|
|
document.querySelectorAll('.image-container1 img').forEach(image => {
|
|
image.onclick = () => {
|
|
document.querySelector('.popup-image').style.display = 'block';
|
|
document.querySelector('.popup-image img').src = image.getAttribute('src');
|
|
}
|
|
});
|
|
|
|
document.querySelector('.popup-image img').onclick = () => {
|
|
document.querySelector('.popup-image').style.display = 'none';
|
|
}
|
|
</script>
|
|
@endpush
|