246 lines
11 KiB
PHP
246 lines
11 KiB
PHP
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Sistem Pakar Kucing</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="all,follow">
|
|
<!-- Bootstrap CSS-->
|
|
<link rel="stylesheet" href="https://d19m59y37dris4.cloudfront.net/landy/1-0/vendor/bootstrap/css/bootstrap.min.css">
|
|
<!-- Font Awesome CSS-->
|
|
<link rel="stylesheet" href="https://d19m59y37dris4.cloudfront.net/landy/1-0/vendor/font-awesome/css/font-awesome.min.css">
|
|
<!-- Custom Font Icons CSS-->
|
|
<link rel="stylesheet" href="https://d19m59y37dris4.cloudfront.net/landy/1-0/css/landy-iconfont.css">
|
|
<!-- Google fonts - Open Sans-->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800">
|
|
<!-- owl carousel-->
|
|
<link rel="stylesheet" href="https://d19m59y37dris4.cloudfront.net/landy/1-0/vendor/owl.carousel/assets/owl.carousel.css">
|
|
<link rel="stylesheet" href="https://d19m59y37dris4.cloudfront.net/landy/1-0/vendor/owl.carousel/assets/owl.theme.default.css">
|
|
<!-- theme stylesheet-->
|
|
<!--<link rel="stylesheet" href="https://d19m59y37dris4.cloudfront.net/landy/1-0/css/style.default.css" id="theme-stylesheet">-->
|
|
<link href="{{ asset('landy/css/style.default.css') }}" id="theme-stylesheet" rel="stylesheet">
|
|
<!-- Custom stylesheet - for your changes-->
|
|
<link rel="stylesheet" href="https://d19m59y37dris4.cloudfront.net/landy/1-0/css/custom.css">
|
|
<!-- Favicon-->
|
|
<link rel="shortcut icon" href="favicon.png">
|
|
<!-- Tweaks for older IEs--><!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
|
|
</head>
|
|
<body>
|
|
<!-- navbar-->
|
|
@include('landingpage.navbar')
|
|
|
|
<!--home publik-->
|
|
<section id="beranda" class="hero hero-home bg-gray">
|
|
<div class="container">
|
|
<div class="row d-flex">
|
|
<div class="col-lg-6 text-center order-2 order-lg-1">
|
|
<h1>SELAMAT DATANG DI WEBSITE SISTEM PAKAR DUGAAN PENYAKIT PADA KUCING</h1>
|
|
<h1>"Cat Health"</h1>
|
|
</div>
|
|
<div class="col-lg-6 order-1 order-lg-2 text-right">
|
|
<img id="slideshow1" class="slideshow img-fluid" src="{{ asset('landy/img/home_kucing_1.png') }}" alt="Gambar Kucing" width="600" height="500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
var index = 0;
|
|
var images = [
|
|
'{{ asset('landy/img/home_kucing_1.png') }}',
|
|
'{{ asset('landy/img/home_kucing_2.png') }}',
|
|
'{{ asset('landy/img/home_kucing_3.png') }}',
|
|
'{{ asset('landy/img/home_kucing_4.png') }}',
|
|
'{{ asset('landy/img/home_kucing_5.png') }}',
|
|
'{{ asset('landy/img/home_kucing_6.png') }}',
|
|
];
|
|
var slideshows = [];
|
|
|
|
// Initialize array of image elements
|
|
for (var i = 1; i <= images.length; i++) {
|
|
slideshows.push(document.getElementById('slideshow' + i));
|
|
}
|
|
|
|
function changeImage() {
|
|
index = (index + 1) % images.length;
|
|
for (var i = 0; i < slideshows.length; i++) {
|
|
slideshows[i].src = images[index];
|
|
}
|
|
}
|
|
|
|
// Ganti gambar setiap lima detik
|
|
setInterval(changeImage, 2000);
|
|
</script>
|
|
|
|
|
|
|
|
<!--Tentang Kami-->
|
|
<section id="tentang-kami" class="tentang-kami bg-gray">
|
|
<div class="container">
|
|
<h2>Tentang Kami</h2>
|
|
<div class="row">
|
|
<p class="lead col-lg-10">Cat Health merupakan situs website yang dirancang untuk membantu pemilik kucing dalam memberikan informasi penyakit pada kucing,
|
|
membantu memberikan dugaan penyakit yang menyerang kucing melalui pemilihan gejala sesuai yang dialami, memberikan saran penanganan dan pencegahan
|
|
yang dapat dilakukan untuk meminimalisir penyakit tersebut.</p>
|
|
</div>
|
|
<!-- Button untuk analisis dugaan -->
|
|
<a href="{{ url('/analisis')}}" class="btn btn-primary btn-shadow btn-gradient" id="analisisButton">Analisis Dugaan</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!--Galeri Kucing-->
|
|
<section id="galeri" class="browser bg-light">
|
|
<div class="container">
|
|
<div class="row d-flex justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<h2 class="h3 mb-5">Galeri Kucing</h2>
|
|
<div class="row">
|
|
<p class="lead col-lg-8 mx-auto">Menurut data pada Gramedia Blog, terdapat 16 jenis-jenis kucing peliharaan populer</p>
|
|
<p class="lead col-lg-8 mx-auto"><a href="https://www.gramedia.com/best-seller/jenis-kucing/" target="_blank">Lihat lebih lanjut di sini</a></p>
|
|
</div>
|
|
<div class="browser-mockup">
|
|
<div id="nav-tabContent" class="tab-content">
|
|
@foreach($galeri as $index => $kucing)
|
|
<div id="nav-{{ $kucing->id }}" role="tabpanel" aria-labelledby="nav-{{ $kucing->id }}-tab" class="tab-pane fade {{ $index == 0 ? 'show active' : '' }}">
|
|
<img src="{{ asset('img/galeri/' . $kucing->gambar_kucing) }}" alt="{{ $kucing->nama_kucing }}" class="img-fluid">
|
|
<p>{{ $kucing->deskripsi }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="myTab" role="tablist" class="nav nav-tabs">
|
|
@foreach($galeri as $index => $kucing)
|
|
<div class="col-md-3 text-center">
|
|
<a id="nav-{{ $kucing->id }}-tab" data-toggle="tab" href="#nav-{{ $kucing->id }}" role="tab" aria-controls="nav-{{ $kucing->id }}" aria-selected="{{ $index == 0 ? 'true' : 'false' }}" class="nav-item goto-preview-content nav-link {{ $index == 0 ? 'active' : '' }}">
|
|
<span class="number">{{ $index + 1 }}</span><br>
|
|
<span style="white-space: nowrap; overflow: hidden;">{{ $kucing->nama_kucing }}</span>
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--Informasi Penyakit-->
|
|
<section id="informasi-penyakit" class="informasi-penyakit bg-gray">
|
|
<div class="container">
|
|
<div class="row d-flex justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<h2>Informasi Penyakit Kucing</h2>
|
|
<div class="row">
|
|
<div class="col-lg-10">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="text-center">No</th>
|
|
<th scope="col" class="text-center">Nama Penyakit</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($penyakit as $key => $item)
|
|
<tr>
|
|
<td class="text-center">{{ $key + 1 }}</td>
|
|
<td class="text-center"><a href="#" data-toggle="modal" data-target="#deskripsi{{$key}}">{{$item->nama_penyakit}}</a></td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Modal Deskripsi Penyakit -->
|
|
@foreach($penyakit as $key => $item)
|
|
<div class="modal fade" id="deskripsi{{$key}}" tabindex="-1" role="dialog" aria-labelledby="deskripsi{{$key}}Label" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deskripsi{{$key}}Label">{{$item->nama_penyakit}}</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>{{ $item->deskripsi_penyakit }}</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
|
|
<!--Profile pakar-->
|
|
<section id="profil-pakar" class="tentang-kami bg-gray">
|
|
<div class="container text-center">
|
|
<h2>Profil Pakar</h2><br>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 text-center">
|
|
<div class="card bg-primary">
|
|
<!-- Tambahkan class "rounded-circle" untuk membuat gambar menjadi lingkaran -->
|
|
<img src="/img/dokter-A.jpeg" class="card-img-top img-fluid rounded-circle mx-auto" alt="Foto Pakar" style="width: 150px; height: 150px;">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Drh. Annisa Nurbani Ibrahim</h4>
|
|
{{-- <p class="card-text">SIP. XXXXX</p> --}}
|
|
<p class="card-text">Dokter Hewan </p>
|
|
<p class="card-text">Jember, Jawa Timur</p>
|
|
|
|
<!-- Hapus tombol "Lihat Profil Lengkap" -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="scrollTop">
|
|
<div class="d-flex align-items-center justify-content-end"><i class="fa fa-long-arrow-up"></i>To Top</div>
|
|
</div>
|
|
<!--footer-->
|
|
@include('landingpage.footer')
|
|
|
|
|
|
</div>
|
|
<!-- Javascript files-->
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"> </script>
|
|
<script src="https://d19m59y37dris4.cloudfront.net/landy/1-0/vendor/bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="https://d19m59y37dris4.cloudfront.net/landy/1-0/vendor/jquery.cookie/jquery.cookie.js"> </script>
|
|
<script src="https://d19m59y37dris4.cloudfront.net/landy/1-0/vendor/owl.carousel/owl.carousel.min.js"></script>
|
|
<script src="https://d19m59y37dris4.cloudfront.net/landy/1-0/js/front.js"></script>
|
|
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID.-->
|
|
<!---->
|
|
<script>
|
|
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
|
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
|
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
|
e.src='//www.google-analytics.com/analytics.js';
|
|
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
|
ga('create','UA-XXXXX-X');ga('send','pageview');
|
|
</script>
|
|
|
|
<script>
|
|
$(document).on('click','.goto-preview-content', function(e){
|
|
let el = $($(this).attr('href'))
|
|
console.log(el.offset())
|
|
|
|
$('body, html').stop().animate({
|
|
scrollTop: $('#galeri').offset().top + 250
|
|
}, 1000)
|
|
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|