Savema_Aureliandaru
/
MIF_E31230690
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perbarui tampilan prt 3

This commit is contained in:
Sveemaaa 2026-04-10 11:28:28 +07:00
parent d2e645c206
commit 62c5887282
6 changed files with 710 additions and 817 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

339
project/resources/views/auth/login.blade.php
View File

@ -5,344 +5,156 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>PosSehat - Login</title> <title>PosSehat - Login</title>
<!-- Bootstrap CSS --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>
<style> <style>
body { body {
background-color: #f0f8ff; background-color: #fffaf7; /* Warna oranye sangat muda */
font-family: 'Segoe UI', sans-serif; font-family: 'Poppins', sans-serif;
} }
.navbar-brand { /* Navbar Brand */
font-weight: bold; .navbar-brand { font-weight: bold; font-size: 1.5rem; color: #FF782D !important; }
font-size: 1.5rem; .nav-link { font-weight: 500; color: #333 !important; }
color: #ff5757; .nav-link:hover { color: #FF782D !important; }
}
.navbar-brand span {
color: #ff5757;
}
.nav-link {
font-weight: 500;
color: #333;
}
.nav-link:hover {
color: #ff5757;
}
/* Buttons */
.btn-primary { .btn-primary {
background: linear-gradient(90deg, #ff5757, #ff5757); background: #FF782D;
border: none; border: none;
font-weight: 600;
transition: all 0.3s ease;
} }
.btn-primary:hover { .btn-primary:hover {
background: linear-gradient(90deg, #ff5757, #ff5757); background: #e66a25;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 120, 45, 0.3);
} }
/* Hero & Card */
.hero-section { .hero-section {
background-color: #fff7f2; height: 100vh;
min-height: 100vh; /* agar tetap bisa lebih tinggi dari viewport jika konten bertambah */
display: flex; display: flex;
align-items: center; align-items: center;
padding-top: 100px; /* agar konten tidak tertutup navbar fixed-top */ padding-top: 80px;
} }
.login-card {
.card {
background-color: #ffffff; background-color: #ffffff;
padding: 2rem; padding: 2.5rem;
border: none; border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border-radius: 1rem; border-radius: 20px;
} }
@media (max-width: 768px) {
.hero-section {
padding-top: 120px;
flex-direction: column;
align-items: start;
}
}
.form-control { .form-control {
border: 1px solid #ddd; padding: 12px;
border-radius: 10px;
border: 1px solid #eee;
} }
.form-control:focus { .form-control:focus {
border-color: #ff5757; border-color: #FF782D;
box-shadow: 0 0 0 0.2rem rgba(94, 121, 255, 0.25); box-shadow: 0 0 0 0.25rem rgba(255, 120, 45, 0.1);
} }
/* Animasi Lingkaran */
.circle-background { .circle-background {
position: absolute; position: absolute;
top: 30%; top: 50%;
left: 10%; left: 50%;
width: 250px; transform: translate(-50%, -50%);
height: 250px; width: 350px;
background: rgba(173, 216, 230, 0.2); height: 350px;
background: rgba(255, 120, 45, 0.08);
border-radius: 50%; border-radius: 50%;
animation: expandCircle 3s ease-in-out infinite; z-index: -1;
animation: expandCircle 4s ease-in-out infinite;
} }
@keyframes expandCircle { @keyframes expandCircle {
0% { width: 250px; height: 250px; } 0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { width: 300px; height: 300px; } 50% { transform: translate(-50%, -50%) scale(1.2); }
100% { width: 250px; height: 250px; }
} }
.animated { /* Animasi Muncul */
opacity: 0; .animate-up {
animation: fadeInUp 1s forwards; animation: fadeInUp 1s forwards;
} }
@keyframes fadeInUp { @keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); } from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
.image-container img { .image-container img {
max-width: 100%; max-width: 100%;
border-radius: 1rem; z-index: 2;
animation-delay: 1.5s;
} }
.btn-primary {
background: linear-gradient(90deg, #ff5757, #ff5757);
border: none;
}
.btn-primary:hover {
background: linear-gradient(90deg, #ff5757, #ff5757);
}
.hero-section {
background-color: #fff7f2;
height: 100vh;
display: flex;
align-items: center;
}
.hero-section img {
max-width: 100%;
}
.section-title {
font-weight: bold;
color: #27304b;
}
.service-card {
border-radius: 16px;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.footer {
background-color: #d47c64;
color: #fff;
padding: 40px 0;
}
.footer a {
color: #fff;
text-decoration: none;
}
.footer a:hover {
color: #fff;
}
.circle-background {
position: absolute;
top: 30%;
left: 10%;
width: 250px;
height: 250px;
background: #ffeadc(173, 216, 230, 0.2);
border-radius: 50%;
animation: expandCircle 3s ease-in-out infinite;
}
@keyframes expandCircle {
0% {
width: 250px;
height: 250px;
}
50% {
width: 300px;
height: 300px;
}
100% {
width: 250px;
height: 250px;
}
}
.gradient-icon {
background: linear-gradient(90deg, #ff5757, #ff5757);
/* -webkit-background-clip: text; */
-webkit-text-fill-color: transparent;
}
.fade-left,
.fade-right,
.fade-up {
opacity: 0;
transition: opacity 1s ease-out;
}
.fade-left.animate__fadeInLeft {
animation: fadeInLeft 1s forwards;
}
.fade-right.animate__fadeInRight {
animation: fadeInRight 1s forwards;
}
.fade-up.animate__fadeInUp {
animation: fadeInUp 1s forwards;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.shadow-card {
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.shadow-card:hover {
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
transition: all 0.3s ease-in-out;
}
.navbar-brand {
font-weight: bold;
font-size: 1.5rem;
color: #ff5757;
}
.navbar-brand span {
color: #00bcd4;
}
.nav-link {
font-weight: 500;
color: #333;
}
.nav-link:hover {
color: #ff5757;
}
</style> </style>
</head> </head>
<body> <body>
<!-- Navbar langsung dalam file -->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm fixed-top"> <nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm fixed-top">
<div class="container"> <div class="container">
<a class="navbar-brand" href="/">PosSehat<span></span></a> <a class="navbar-brand" href="/">PosSehat</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <div class="collapse navbar-collapse justify-content-end">
<span class="navbar-toggler-icon"></span> <ul class="navbar-nav align-items-center">
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Beranda</a></li> <li class="nav-item"><a class="nav-link" href="/">Beranda</a></li>
<li class="nav-item"><a class="nav-link" href="#fiturutama">Fitur</a></li>
<li class="nav-item"><a class="nav-link" href="#footer">Kontak</a></li>
<li class="nav-item"><a class="btn btn-primary rounded-pill px-4 ms-3" href="/login">Login</a></li> <li class="nav-item"><a class="btn btn-primary rounded-pill px-4 ms-3" href="/login">Login</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Login Section -->
<section class="hero-section"> <section class="hero-section">
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center g-5">
<!-- Image --> <div class="col-md-6 text-center position-relative d-none d-md-block">
<div class="col-md-6 text-center"> <div class="circle-background"></div>
<div class="image-container position-relative"> <div class="image-container animate-up">
<img src="assets/img/posyandu.png" alt="Login Illustration" class="animated fadeInUp"> <img src="{{ asset('assets/img/posyandu.png') }}" alt="PosSehat Illustration">
<!-- <div class="circle-background"></div> -->
</div> </div>
</div> </div>
<!-- Login Form -->
<div class="col-md-6"> <div class="col-md-6">
<div class="card shadow-lg animated" style="animation-delay: 1s;"> <div class="login-card animate-up" style="animation-delay: 0.3s;">
<h3 class="text-center fw-bold mb-3 " style="animation-delay: 0.5s; color: #ff5757">Selamat Datang</h3> <div class="mb-4">
<p class="text-center text-muted mb-4 animated" style="animation-delay: 0.7s;">Silakan masuk untuk melanjutkan</p> <h3 class="fw-bold" style="color: #FF782D">Selamat Datang</h3>
<p class="text-muted">Silakan masuk ke akun petugas Anda</p>
</div>
@if(session('error')) @if(session('error'))
<div class="alert alert-danger"> <div class="alert alert-danger border-0 small" style="border-radius: 10px;">
{{ session('error') }} <i class="bi bi-exclamation-triangle me-2"></i> {{ session('error') }}
</div> </div>
@endif @endif
<form action="/proseslogin" method="POST"> <form action="/proseslogin" method="POST">
@csrf @csrf
<div class="mb-3 animated" style="animation-delay: 0.9s;"> <div class="mb-3">
<label for="email" class="form-label">Email</label> <label for="email" class="form-label small fw-bold text-muted">Email</label>
<input type="email" class="form-control rounded-3" id="email" name="email" placeholder="Masukkan email Anda" required> <div class="input-group">
<span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-envelope"></i></span>
<input type="email" class="form-control border-start-0" id="email" name="email" placeholder="nama@email.com" required>
</div> </div>
<div class="mb-3 animated" style="animation-delay: 1.1s;">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control rounded-3" id="password" name="password" placeholder="Masukkan password Anda" required>
</div> </div>
<button type="submit" class="btn btn-primary w-100 rounded-pill mt-3 animated" style="animation-delay: 1.3s;">Masuk</button>
<div class="mb-4">
<label for="password" class="form-label small fw-bold text-muted">Password</label>
<div class="input-group">
<span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-lock"></i></span>
<input type="password" class="form-control border-start-0" id="password" name="password" placeholder="••••••••" required>
</div>
</div>
<button type="submit" class="btn btn-primary w-100 rounded-pill py-2 shadow-sm">
Masuk Sekarang <i class="bi bi-arrow-right-short ms-1"></i>
</button>
</form> </form>
<div class="text-center mt-4 animated" style="animation-delay: 1.5s;"> <div class="text-center mt-4">
<a href="#" class="text-muted small">Lupa password?</a> <a href="#" class="text-muted small text-decoration-none">Lupa password? Hubungi Admin</a>
</div> </div>
</div> </div>
</div> </div>
@ -351,7 +163,6 @@
</div> </div>
</section> </section>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

301
project/resources/views/landingPage/index.blade.php
View File

@ -9,189 +9,143 @@
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" rel="stylesheet" />
<style> <style>
/* === Styles kamu yang lama dipertahankan === */ html {
body { scroll-behavior: smooth;
font-family: 'Segoe UI', sans-serif;
background-color: #f8f9ff;
} }
body {
font-family: 'Poppins', 'Segoe UI', sans-serif; /* Poppins terasa lebih modern */
background-color: #ffffff;
overflow-x: hidden;
}
section {
scroll-margin-top: 100px;
}
/* Warna Utama: Oranye PosSehat */
.btn-primary { .btn-primary {
background: linear-gradient(90deg, #ff5757, #ff5757); background: #FF782D;
border: none; border: none;
transition: all 0.3s ease;
} }
.btn-primary:hover { .btn-primary:hover {
background: linear-gradient(90deg, #ff5757, #ff5757); background: #e66a25;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 120, 45, 0.3);
} }
.hero-section { .hero-section {
background-color: #fff7f2; background-color: #fffaf7; /* Oranye sangat muda */
height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
} position: relative;
.hero-section img {
max-width: 100%;
} }
.section-title { .section-title {
font-weight: bold; font-weight: 800;
color: #27304b; color: #2c3e50;
}
.fitur-scroll {
padding-top: 100px; /* Jarak agar konten turun */
margin-top: -100px; /* Menarik section kembali ke atas secara layout */
} }
.service-card { .service-card {
border-radius: 16px; border-radius: 20px;
padding: 20px; padding: 30px;
background-color: #fff; background-color: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(255, 120, 45, 0.1);
} }
.footer { .footer {
background-color: #d47c64; background-color: #2c3e50; /* Gelap elegan agar oranye lebih menyala */
color: #fff; color: #fff;
padding: 40px 0; padding: 60px 0 20px 0;
} }
.footer a { .footer a { color: #bdc3c7; text-decoration: none; transition: 0.3s; }
color: #fff; .footer a:hover { color: #FF782D; }
text-decoration: none;
}
.footer a:hover {
color: #fff;
}
/* Perbaikan Lingkaran Background */
.circle-background { .circle-background {
position: absolute; position: absolute;
top: 30%; top: 50%;
left: 10%; left: 50%;
width: 250px; transform: translate(-50%, -50%); /* Menjaga di tengah */
height: 250px; width: 300px;
background: #ffeadc(173, 216, 230, 0.2); height: 300px;
background: rgba(255, 120, 45, 0.1); /* Oranye transparan */
border-radius: 50%; border-radius: 50%;
animation: expandCircle 3s ease-in-out infinite; z-index: 1; /* Di bawah gambar */
animation: expandCircle 4s ease-in-out infinite;
} }
@keyframes expandCircle { @keyframes expandCircle {
0% { 0%, 100% { transform: translate(-50%, -50%) scale(1); }
width: 250px; 50% { transform: translate(-50%, -50%) scale(1.3); }
height: 250px;
}
50% {
width: 300px;
height: 300px;
}
100% {
width: 250px;
height: 250px;
}
} }
/* Perbaikan Ikon Gradient */
.gradient-icon { .gradient-icon {
background: linear-gradient(90deg, #ff5757, #ff5757); background: linear-gradient(135deg, #FF782D, #ffb38e);
/* -webkit-background-clip: text; */ -webkit-background-clip: text; /* WAJIB ADA */
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
display: inline-block;
} }
.fade-left, /* Navbar Style */
.fade-right, .navbar-brand { font-weight: 800; color: #FF782D !important; letter-spacing: 1px; }
.fade-up { .navbar-brand span { color: #2c3e50; }
.nav-link { font-weight: 600; color: #555 !important; margin: 0 10px; }
.nav-link:hover { color: #FF782D !important; }
/* Animations Base */
.fade-left, .fade-right, .fade-up { opacity: 0; }
@keyframes myFadeInLeft {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes myFadeInRight {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes myFadeInUp {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
/* Class yang akan dipicu JavaScript */
.show-now {
opacity: 1 !important;
}
.animate-left { animation: myFadeInLeft 1s forwards; }
.animate-right { animation: myFadeInRight 1s forwards; }
.animate-up { animation: myFadeInUp 1s forwards; }
/* Dasar transparan agar bisa dianimasikan */
.fade-left, .fade-right, .fade-up {
opacity: 0; opacity: 0;
transition: opacity 1s ease-out; transition: opacity 0.5s ease;
} }
.fade-left.animate__fadeInLeft {
animation: fadeInLeft 1s forwards;
}
.fade-right.animate__fadeInRight {
animation: fadeInRight 1s forwards;
}
.fade-up.animate__fadeInUp {
animation: fadeInUp 1s forwards;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.shadow-card {
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.shadow-card:hover {
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
transition: all 0.3s ease-in-out;
}
.navbar-brand {
font-weight: bold;
font-size: 1.5rem;
color: #ff5757;
}
.navbar-brand span {
color: #00bcd4;
}
.nav-link {
font-weight: 500;
color: #333;
}
.nav-link:hover {
color: #5e79ff;
}
</style> </style>
</head> </head>
<body> <body>
<!-- Navbar --> <!-- Navbar -->
<!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm fixed-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm fixed-top">
<div class="container"> <div class="container">
<a class="navbar-brand" href="/">PosSehat<span></span></a> <a class="navbar-brand" href="/">PosSehat<span></span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@ -206,29 +160,30 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Hero Section --> <section class="hero-section">
<section class="hero-section pt-5"> <div class="container">
<div class="container pt-5"> <div class="row align-items-center">
<div class="row align-items-center pt-5">
<div class="col-md-6 fade-left"> <div class="col-md-6 fade-left">
<h1 class="mb-3 display-5 fw-bold text-dark">Sistem Informasi yang Mendukung Kegiatan Posyandu</h1> <h1 class="mb-3 display-4 fw-bold text-dark">Sistem Informasi Digital <span style="color: #FF782D;">PosSehat</span></h1>
<p class="lead text-dark mb-4">Gunakan Teknologi untuk Meningkatkan Pendataan dan Pelayanan Posyandu Secara Efisien dan Terintegrasi.</p> <p class="lead text-muted mb-4">Gunakan teknologi untuk meningkatkan efisiensi pendataan dan deteksi dini kesehatan Ibu & Balita di Posyandu.</p>
<div class="d-flex gap-3">
<a href="/login" class="btn btn-primary btn-lg rounded-pill px-5">Mulai Sekarang</a>
<a href="#fiturutama" class="btn btn-outline-secondary btn-lg rounded-pill px-4">Pelajari Fitur</a>
</div> </div>
<div class="col-md-6 text-center fade-right"> </div>
<div class="image-container position-relative"> <div class="col-md-6 text-center fade-right position-relative">
<img src="assets/img/posyandu.png" alt="Anak" class="img-fluid animated fadeInUp" style="animation-delay: 1.5s;">
<div class="circle-background"></div> <div class="circle-background"></div>
</div> <img src="assets/img/posyandu.png" alt="Posyandu" class="img-fluid position-relative" style="z-index: 2;">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Fitur --> <!-- Fitur -->
<section class="py-5" id="fiturutama"> <section class="py-3" id="fiturutama">
<div class="container"> <div class="container">
<h3 class="section-title text-center mb-5 display-6 fade-up">Fitur Utama</h3> <h3 class="section-title text-center mb-5 display-6 fade-up">Fitur Utama</h3>
<div class="row g-5"> <div class="row g-5">
@ -268,7 +223,7 @@
</div> </div>
</div> </div>
</section> </section>
<!-- Footer --> <!-- Footer -->
@ -310,26 +265,34 @@
<!-- JS --> <!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
// Scroll animation handler document.addEventListener("DOMContentLoaded", function() {
const addFadeInClass = (entries, observer) => { const observerOptions = {
entries.forEach(entry => { threshold: 0.1 // 10% muncul di layar langsung gerak
if (entry.isIntersecting) {
const section = entry.target;
if (section.classList.contains('fade-left')) {
section.classList.add('animate__fadeInLeft');
} else if (section.classList.contains('fade-right')) {
section.classList.add('animate__fadeInRight');
} else if (section.classList.contains('fade-up')) {
section.classList.add('animate__fadeInUp');
}
observer.unobserve(section);
}
});
}; };
const observer = new IntersectionObserver(addFadeInClass, { threshold: 0.5 }); const observer = new IntersectionObserver((entries) => {
document.querySelectorAll('.fade-left, .fade-right, .fade-up').forEach(el => observer.observe(el)); entries.forEach(entry => {
</script> if (entry.isIntersecting) {
const el = entry.target;
// Paksa opacity jadi 1
el.classList.add('show-now');
// Tambahkan animasi sesuai class awal
if (el.classList.contains('fade-left')) el.classList.add('animate-left');
if (el.classList.contains('fade-right')) el.classList.add('animate-right');
if (el.classList.contains('fade-up')) el.classList.add('animate-up');
observer.unobserve(el);
}
});
}, observerOptions);
// Ambil semua elemen yang mau dianimasikan
document.querySelectorAll('.fade-left, .fade-right, .fade-up').forEach(el => {
observer.observe(el);
});
});
</script>
</body> </body>
</html> </html>

128
project/resources/views/pdf/hasil_ibu_hamil.blade.php
View File

@ -1,50 +1,88 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Laporan Hasil Pengukuran Ibu Hamil</title> <title>Laporan Pengukuran Ibu Hamil - {{ $pengukuran->ibuHamil->nama ?? 'Data' }}</title>
<style> <style>
body { font-family: sans-serif; font-size: 12px; } body { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 12px; color: #333; line-height: 1.5; }
.header { text-align: center; margin-bottom: 20px; } .header { text-align: center; margin-bottom: 25px; border-bottom: 2px solid #FF782D; padding-bottom: 10px; }
.table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .header h2 { color: #FF782D; margin: 0; text-transform: uppercase; font-size: 18px; }
.table th, .table td { border: 1px solid #ddd; padding: 8px; text-align: left; } .header p { margin: 5px 0; color: #666; font-size: 10px; letter-spacing: 1px; }
.table th { background-color: #f2f2f2; }
.chart-container { text-align: center; margin-top: 20px; }
.chart-image { width: 100%; max-width: 600px; border: 1px solid #eee; }
.footer { margin-top: 30px; font-style: italic; font-size: 10px; }
.text-bold { font-weight: bold; }
.info-box { .info-box {
background-color: #fdf2f5; /* Pink muda khas Ibu Hamil */ background-color: #fff5f0; /* Oranye sangat muda */
border-left: 5px solid #9c3a5b; border-left: 5px solid #FF782D;
padding: 10px; padding: 12px;
margin-bottom: 15px; margin-bottom: 20px;
font-size: 11px; font-size: 11px;
line-height: 1.4; border-radius: 0 5px 5px 0;
} }
.table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.table th, .table td { border: 1px solid #eee; padding: 10px; text-align: left; }
.table th { background-color: #fafafa; color: #555; font-weight: bold; width: 35%; }
.section-title {
color: #FF782D;
font-size: 14px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
border-bottom: 1px solid #ffccbc;
padding-bottom: 5px;
}
.chart-container { text-align: center; margin: 20px 0; padding: 10px; border: 1px solid #f9f9f9; }
.chart-image { width: 100%; max-width: 580px; }
.edukasi-item { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed #eee; }
.edukasi-item strong { color: #FF782D; font-size: 12px; }
.rekomendasi {
margin-top: 20px;
background-color: #fffaf0;
border: 1px solid #ffeccb;
padding: 15px;
border-radius: 8px;
color: #856404;
}
.footer {
margin-top: 40px;
border-top: 1px solid #eee;
padding-top: 10px;
font-style: italic;
font-size: 9px;
color: #999;
text-align: right;
}
.text-bold { font-weight: bold; }
.status-text { color: #FF782D; font-weight: bold; font-size: 13px; }
</style> </style>
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<h2 style="color: #9c3a5b;">LAPORAN HASIL PENGUKURAN IBU HAMIL</h2> <h2>LAPORAN HASIL PENGUKURAN IBU HAMIL</h2>
<p>Aplikasi PosSehat - Kesehatan Ibu & Anak</p> <p>Aplikasi PosSehat Digital - Kesehatan Ibu & Anak</p>
</div> </div>
<div class="info-box"> <div class="info-box">
<span class="text-bold">Panduan Indeks Massa Tubuh (IMT):</span><br> <span class="text-bold">Panduan Indeks Massa Tubuh (IMT):</span><br>
IMT digunakan untuk memantau apakah status gizi Ibu selama kehamilan berada dalam kondisi ideal.<br> IMT memantau status gizi Ibu selama kehamilan:<br>
• <span class="text-bold">Gizi Kurang:</span> < 18.5 | • <span class="text-bold">Kurang:</span> < 18.5 |
<span class="text-bold">Gizi Normal:</span> 18.5 - 24.9 | <span class="text-bold">Normal:</span> 18.5 - 24.9 |
<span class="text-bold">Gizi Lebih:</span> 24.9 - 29.9 | <span class="text-bold">Lebih:</span> 25.0 - 29.9 |
<span class="text-bold">Obesitas:</span> > 29.9 <span class="text-bold">Obesitas:</span> > 30.0
</div> </div>
<table class="table"> <table class="table">
<tr> <tr>
<th style="width: 30%;">Nama Ibu</th> <th>Nama Ibu Hamil</th>
<td>{{ $pengukuran->ibuHamil->nama ?? '-' }}</td> <td><strong style="font-size: 13px;">{{ $pengukuran->ibuHamil->nama ?? '-' }}</strong></td>
</tr> </tr>
<tr> <tr>
<th>Tanggal Periksa</th> <th>Tanggal Pemeriksaan</th>
<td>{{ $pengukuran->tanggal }}</td> <td>{{ \Carbon\Carbon::parse($pengukuran->tanggal)->translatedFormat('d F Y') }}</td>
</tr> </tr>
<tr> <tr>
<th>Usia Kehamilan</th> <th>Usia Kehamilan</th>
@ -64,40 +102,40 @@
</tr> </tr>
<tr> <tr>
<th>Status Gizi</th> <th>Status Gizi</th>
<td><strong style="color: #9c3a5b;">{{ $pengukuran->status_gizi }}</strong></td> <td><span class="status-text">{{ strtoupper($pengukuran->status_gizi) }}</span></td>
</tr> </tr>
</table> </table>
<h3>Grafik Perkembangan (BB & IMT)</h3> <div class="section-title">Grafik Perkembangan (BB & IMT)</div>
<div class="chart-container"> <div class="chart-container">
@if($chartImage) @if($chartImage)
<img src="{{ $chartImage }}" class="chart-image"> <img src="{{ $chartImage }}" class="chart-image">
@else @else
<p style="color: red;">Grafik tidak tersedia. Pastikan grafik muncul di layar sebelum mencetak.</p> <p style="color: #999;">Grafik visual tidak tersedia dalam laporan ini.</p>
@endif @endif
</div> </div>
<h3>Edukasi & Informasi Kesehatan</h3> <div class="section-title">Edukasi & Rekomendasi</div>
@forelse($edukasi as $item) <div class="rekomendasi">
<div style="margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 5px;"> <strong>Pesan Petugas Kesehatan:</strong><br>
<strong style="color: #9c3a5b;">{{ $item->judul }}</strong> @if(strtolower($pengukuran->status_gizi) == 'ibu hamil gizi normal')
<p style="margin-top: 5px;">{{ $item->konten }}</p> Status gizi Ibu terpantau <strong>Baik/Normal</strong>. Pertahankan asupan nutrisi seimbang, konsumsi tablet tambah darah, dan rutin lakukan kontrol kehamilan.
</div>
@empty
<p>Edukasi belum tersedia.</p>
@endforelse
<div style="margin-top: 20px; border: 1px solid #9c3a5b; padding: 10px; border-radius: 5px;">
<span class="text-bold">Rekomendasi Medis:</span><br>
@if($pengukuran->status_gizi == 'Normal')
Status gizi Ibu terpantau baik. Pertahankan asupan nutrisi seimbang, konsumsi tablet tambah darah, dan rutin lakukan kontrol kehamilan sesuai jadwal.
@else @else
Ibu disarankan untuk berkonsultasi lebih lanjut dengan Bidan atau Dokter di Puskesmas mengenai pola makan dan kenaikan berat badan yang ideal selama kehamilan. Status gizi Ibu memerlukan perhatian lebih. Mohon konsultasikan hasil ini dengan Bidan atau Dokter untuk mengatur pola makan yang ideal.
@endif @endif
</div> </div>
<div style="margin-top: 15px;">
@foreach($edukasi as $item)
<div class="edukasi-item">
<strong>{{ $item->judul }}</strong>
<p style="margin: 3px 0 0 0; color: #555;">{{ $item->konten }}</p>
</div>
@endforeach
</div>
<div class="footer"> <div class="footer">
Dicetak pada: {{ date('d-m-Y H:i:s') }} oleh Petugas: {{ $pengukuran->petugas->nama ?? 'Sistem PosSehat' }} Dicetak pada: {{ date('d-m-Y H:i') }} | Petugas: {{ $pengukuran->petugas->nama ?? 'Sistem PosSehat' }}
</div> </div>
</body> </body>
</html> </html>

134
project/resources/views/pengukuran_ibuhamil/create.blade.php
View File

@ -1,46 +1,60 @@
@extends('layouts.dashboard') @extends('layouts.dashboard')
@section('title', 'Pengukuran Ibu Hamil') @section('title', 'Form Pengukuran Ibu Hamil')
@section('content') @section('content')
<div class="pagetitle mb-4"> <div class="pagetitle mb-4">
<h1 style="color: #9c3a5b;">Form Pengukuran Ibu Hamil</h1> <h1 style="color: #FF782D; font-weight: 700;">Form Pengukuran Ibu Hamil</h1>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ route('pengukuran_ibu_hamil.index') }}">Data Pengukuran</a></li>
<li class="breadcrumb-item active">Tambah Data</li>
</ol>
</nav>
</div> </div>
<section class="section"> <section class="section">
<div class="row"> <div class="row justify-content-center">
<div class="col-lg-10"> <div class="col-lg-10">
<div class="card"> <div class="card shadow-sm border-0" style="border-radius: 20px;">
<div class="card-body"> <div class="card-body p-4">
<h5 class="card-title">Tambah Data Pengukuran</h5> <div class="d-flex align-items-center mb-4">
<div class="icon-box me-3" style="background: #fff5f0; padding: 10px; border-radius: 12px;">
<i class="bi bi-droplet-half" style="color: #FF782D; font-size: 1.5rem;"></i>
</div>
<h5 class="card-title mb-0" style="color: #2c3e50; font-weight: 600;">Input Pemeriksaan Ibu Hamil</h5>
</div>
<!-- General Form Elements -->
@if ($errors->any()) @if ($errors->any())
<div class="alert alert-danger"> <div class="alert alert-danger border-0 shadow-sm mb-4" style="border-radius: 12px;">
<ul> <ul class="mb-0">
@foreach ($errors->all() as $error) @foreach ($errors->all() as $error)
<li>{{ $error }}</li> <li>{{ $error }}</li>
@endforeach @endforeach
</ul> </ul>
</div> </div>
@endif @endif
<form action="{{ route('pengukuran_ibu_hamil.store') }}" method="POST"> <form action="{{ route('pengukuran_ibu_hamil.store') }}" method="POST">
@csrf @csrf
<div class="row mb-3">
<label for="tanggal" class="col-sm-2 col-form-label">Tanggal</label> <div class="row">
<div class="col-sm-10"> <div class="col-md-6 mb-3">
<input type="date" class="form-control" name="tanggal" id="tanggal_ukur" value="{{ date('Y-m-d') }}" required> <label class="form-label fw-semibold">Tanggal Periksa</label>
<div class="input-group">
<span class="input-group-text bg-white border-end-0"><i class="bi bi-calendar-check text-muted"></i></span>
<input type="date" class="form-control border-start-0 custom-input" name="tanggal" id="tanggal_ukur" value="{{ date('Y-m-d') }}" required>
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="col-md-6 mb-3">
<label class="col-sm-2 col-form-label">Nama</label> <label class="form-label fw-semibold">Nama Ibu Hamil</label>
<div class="col-sm-10"> <div class="input-group">
<select name="ibu_hamil_id" id="ibu_id" class="form-control select2" required> <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
<option value="">-- Pilih Ibu Hamil --</option> <select name="ibu_hamil_id" id="ibu_id" class="form-select border-start-0 custom-input select2" required>
<option value="" selected disabled>Cari nama ibu...</option>
@foreach($ibu_hamil as $ibu) @foreach($ibu_hamil as $ibu)
<option value="{{ $ibu->id }}" data-tgl="{{ $ibu->tgl_lahir }}"> <option value="{{ $ibu->id }}" data-tgl="{{ $ibu->tgl_lahir }}">
{{ $ibu->nama }} {{ $ibu->nama }}
@ -50,75 +64,89 @@
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="col-md-6 mb-3">
<label for="nama" class="col-sm-2 col-form-label">Usia</label> <label class="form-label fw-semibold text-muted">Usia Ibu (Tahun)</label>
<div class="col-sm-10"> <input type="text" id="usia" name="usia" class="form-control bg-light border-0 px-3" readonly placeholder="Otomatis terisi" style="border-radius: 10px;">
<input type="text" id="usia" name="usia" class="form-control" readonly> </div>
<div class="col-md-6 mb-3">
<label class="form-label fw-semibold">Usia Kehamilan (Minggu)</label>
<div class="input-group">
<span class="input-group-text bg-white border-end-0"><i class="bi bi-clock-history text-muted"></i></span>
<input type="number" class="form-control border-start-0 custom-input" name="usia_kehamilan" required placeholder="Contoh: 12">
<span class="input-group-text bg-light border-start-0 text-muted">Minggu</span>
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="col-12"><hr class="my-4 opacity-25"></div>
<label for="berat_badan" class="col-sm-2 col-form-label">Berat Badan</label>
<div class="col-sm-10"> <div class="col-md-4 mb-3">
<input type="number" class="form-control" name="berat_badan" required placeholder="kg"> <label class="form-label fw-semibold">Berat Badan</label>
<div class="input-group">
<input type="number" step="0.1" class="form-control custom-input fs-5 fw-bold text-center" name="berat_badan" required placeholder="0.0">
<span class="input-group-text bg-light border-start-0 text-muted">kg</span>
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="col-md-4 mb-3">
<label for="tinggi_badan" class="col-sm-2 col-form-label">Tinggi Badan</label> <label class="form-label fw-semibold">Tinggi Badan</label>
<div class="col-sm-10"> <div class="input-group">
<input type="number" class="form-control" name="tinggi_badan" required placeholder="cm"> <input type="number" step="0.1" class="form-control custom-input fs-5 fw-bold text-center" name="tinggi_badan" required placeholder="0.0">
<span class="input-group-text bg-light border-start-0 text-muted">cm</span>
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="col-md-4 mb-3">
<label for="lila" class="col-sm-2 col-form-label">Lila</label> <label class="form-label fw-semibold">LILA (Lingkar Lengan)</label>
<div class="col-sm-10"> <div class="input-group">
<input type="number" class="form-control" name="lila" required> <input type="number" step="0.1" class="form-control custom-input fs-5 fw-bold text-center" name="lila" required placeholder="0.0">
<span class="input-group-text bg-light border-start-0 text-muted">cm</span>
</div>
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="d-flex justify-content-end gap-2 border-top mt-4 pt-4">
<label for="usia_kehamilan" class="col-sm-2 col-form-label">Usia Kehamilan</label> <a href="{{ route('pengukuran_ibu_hamil.index') }}" class="btn btn-light px-4" style="border-radius: 10px;">Batal</a>
<div class="col-sm-10"> <button type="submit" class="btn btn-orange px-4 py-2" style="background-color: #FF782D; color: white; border-radius: 10px; font-weight: 600; border: none;">
<input type="number" class="form-control" name="usia_kehamilan" required placeholder="minggu"> <i class="bi bi-save me-2"></i>Simpan Data Pengukuran
</div> </button>
</div> </div>
<div class="row mb-3"> </form>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Submit Form</button>
</div>
</div>
</form><!-- End General Form Elements -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<style>
.custom-input:focus {
border-color: #FF782D !important;
box-shadow: 0 0 0 0.25rem rgba(255, 120, 45, 0.1) !important;
}
.input-group-text { border-radius: 10px 0 0 10px; }
.custom-input { border-radius: 0 10px 10px 0 !important; }
/* Style untuk baris BB/TB/LILA */
.col-md-4 .custom-input { border-radius: 10px 0 0 10px !important; }
.col-md-4 .input-group-text { border-radius: 0 10px 10px 0; }
</style>
<script> <script>
document.getElementById("ibu_id").addEventListener("change", function() { document.getElementById("ibu_id").addEventListener("change", function() {
let selected = this.options[this.selectedIndex]; let selected = this.options[this.selectedIndex];
let tgl_lahir = selected.getAttribute("data-tgl"); let tgl_lahir = selected.getAttribute("data-tgl");
if(tgl_lahir){ if(tgl_lahir){
let lahir = new Date(tgl_lahir); let lahir = new Date(tgl_lahir);
let today = new Date(); let today = new Date();
let usia = today.getFullYear() - lahir.getFullYear(); let usia = today.getFullYear() - lahir.getFullYear();
let m = today.getMonth() - lahir.getMonth(); let m = today.getMonth() - lahir.getMonth();
if (m < 0 || (m === 0 && today.getDate() < lahir.getDate())) { if (m < 0 || (m === 0 && today.getDate() < lahir.getDate())) {
usia--; usia--;
} }
document.getElementById("usia").value = usia + " Tahun";
document.getElementById("usia").value = usia;
} }
}); });
</script> </script>
@endsection @endsection

160
project/resources/views/pengukuran_ibuhamil/data.blade.php
View File

@ -4,97 +4,106 @@
@section('content') @section('content')
<!-- Page Title -->
<div class="pagetitle mb-4"> <div class="pagetitle mb-4">
<h1 style="color: #9c3a5b;">Data Pengukuran Ibu Hamil</h1> <h1 style="color: #FF782D; font-weight: 700;">Data Pengukuran Ibu Hamil</h1>
<p class="text-muted">Monitoring kesehatan nutrisi dan perkembangan ibu hamil secara berkala.</p>
</div> </div>
<!-- Card --> <div class="card shadow-sm border-0" style="border-radius: 20px;">
<div class="card shadow-sm"> <div class="card-body p-4">
<div class="card-body">
<!-- Card Header --> <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
<div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="card-title mb-0" style="color: #2c3e50; font-weight: 600;">Daftar Hasil Pengukuran</h5>
<h5 class="card-title mb-0">Daftar Hasil Pengukuran</h5>
<a href="{{ route('pengukuran_ibu_hamil.create') }}" class="btn btn-success btn-sm"> <div class="mt-3 mt-md-0">
<i class="bi bi-plus-circle me-1"></i> Tambah Pengukuran <a href="{{ route('pengukuran_ibu_hamil.create') }}" class="btn btn-orange px-4 py-2 shadow-sm" style="background-color: #FF782D; color: white; border-radius: 10px; font-weight: 500;">
<i class="bi bi-plus-circle me-2"></i> Tambah Pengukuran
</a> </a>
</div> </div>
</div>
<form method="GET" action="{{ route('pengukuran_ibu_hamil.index') }}" class="mb-3"> <form method="GET" action="{{ route('pengukuran_ibu_hamil.index') }}" class="mb-4">
<div class="input-group" style="max-width: 300px;"> <div class="input-group search-bar" style="max-width: 400px;">
<input type="text" name="search" class="form-control" id="search" <span class="input-group-text bg-white border-end-0" style="border-radius: 10px 0 0 10px;">
placeholder="Cari nama..." <i class="bi bi-search" style="color: #FF782D;"></i>
value="{{ request('search') }}"> </span>
<input type="text" name="search" class="form-control border-start-0 custom-input" id="search"
<button class="btn btn-primary" type="submit"> placeholder="Cari nama ibu hamil..."
<i class="bi bi-search"></i> Cari value="{{ request('search') }}" style="border-radius: 0 10px 10px 0;">
</button>
</div> </div>
</form> </form>
<!-- Table -->
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover align-middle datatable"> <table class="table table-hover align-middle custom-table">
<thead class="table-light"> <thead>
<tr> <tr>
<th style="width: 5%" >No</th> <th style="width: 5%">No</th>
<th>Petugas</th> <th>Tanggal & Petugas</th>
<th>Tanggal</th> <th>Identitas Ibu</th>
<th>Nama</th> <th>Fisik (BB/TB/LILA)</th>
<th>Usia</th> <th class="text-center">Kehamilan</th>
<th>Berat Badan</th> <th class="text-center">IMT & Status</th>
<th>Tinggi Badan</th> <th style="width: 10%" class="text-center">Aksi</th>
<th>Lila</th>
<th>Usia Kehamilan</th>
<th>IMT</th>
<th>Status Gizi</th>
<th style="width: 15%" class="text-center">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody id="pengukuran-ibuhamil-table"> <tbody id="pengukuran-ibuhamil-table">
@forelse ($p_ibuhamil as $index => $ibu) @forelse ($p_ibuhamil as $index => $ibu)
<tr> <tr>
<td>{{ $p_ibuhamil->firstItem() + $index }}</td> <td class="fw-bold text-muted">{{ $p_ibuhamil->firstItem() + $index }}</td>
<td>{{ $ibu->petugas->nama ?? '-' }}</td> <td>
<td>{{ $ibu->tanggal }}</td> <div class="fw-bold text-dark">{{ \Carbon\Carbon::parse($ibu->tanggal)->translatedFormat('d M Y') }}</div>
<td>{{ $ibu->ibuHamil->nama ?? '-' }}</td> <small class="text-muted"><i class="bi bi-person-badge me-1"></i>{{ $ibu->petugas->nama ?? '-' }}</small>
<td>{{ \Carbon\Carbon::parse($ibu->ibuHamil->tgl_lahir)->age ?? '-' }}</td> </td>
<td>{{ $ibu->berat_badan }}</td> <td>
<td>{{ $ibu->tinggi_badan }}</td> <div class="fw-bold text-dark">{{ $ibu->ibuHamil->nama ?? '-' }}</div>
<td>{{ $ibu->lila }}</td> <small class="text-muted">{{ \Carbon\Carbon::parse($ibu->ibuHamil->tgl_lahir)->age }} Tahun</small>
<td class="text-center">{{ $ibu->usia_kehamilan }}</td> </td>
<td>{{ $ibu->imt }}</td> <td>
<td>{{ $ibu->status_gizi }}</td> <div class="small">
<span class="badge bg-blue-soft text-primary mb-1">BB: {{ $ibu->berat_badan }}kg</span>
<span class="badge bg-green-soft text-success mb-1">TB: {{ $ibu->tinggi_badan }}cm</span>
<br>
<span class="badge bg-purple-soft text-purple">LILA: {{ $ibu->lila }}cm</span>
</div>
</td>
<td class="text-center"> <td class="text-center">
<!-- Detail --> <div class="badge bg-light text-dark border px-3 py-2" style="border-radius: 8px;">
<a href="{{ route('pengukuran_ibu_hamil.detail', $ibu->id) }}" {{ $ibu->usia_kehamilan }} <small>Minggu</small>
class="btn btn-sm btn-info" </div>
title="Detail"> </td>
<td class="text-center">
<div class="fw-bold text-dark mb-1">IMT: {{ $ibu->imt }}</div>
@php
$statusClass = match(strtolower($ibu->status_gizi)) {
'gizi kurang' => 'bg-danger',
'gizi normal', 'normal' => 'bg-success',
'gizi lebih', 'obesitas' => 'bg-warning text-dark',
default => 'bg-secondary'
};
@endphp
<span class="badge {{ $statusClass }} px-2 py-1" style="font-size: 10px; border-radius: 5px;">
{{ strtoupper($ibu->status_gizi) }}
</span>
</td>
<td class="text-center">
<div class="d-flex justify-content-center gap-1">
<a href="{{ route('pengukuran_ibu_hamil.detail', $ibu->id) }}" class="btn btn-sm btn-detail-custom" title="Detail">
<i class="bi bi-eye"></i> <i class="bi bi-eye"></i>
</a> </a>
<form action="{{ route('pengukuran_ibu_hamil.destroy', $ibu->id) }}" method="POST" style="display:inline;">
<!-- Delete --> @csrf @method('DELETE')
<form action="{{ route('pengukuran_ibu_hamil.destroy', $ibu->id) }}" <button class="btn btn-sm btn-delete-custom" onclick="return confirm('Hapus data pengukuran ini?')" title="Hapus">
method="POST"
style="display:inline;">
@csrf
@method('DELETE')
<button class="btn btn-sm btn-danger"
onclick="return confirm('Yakin ingin menghapus data?')"
title="Hapus">
<i class="bi bi-trash"></i> <i class="bi bi-trash"></i>
</button> </button>
</form> </form>
</div>
</td> </td>
</tr> </tr>
@empty @empty
<tr> <tr>
<td colspan="12" class="text-center text-muted"> <td colspan="7" class="text-center py-5 text-muted">
Belum ada data pengukuran <i class="bi bi-clipboard-x d-block mb-2" style="font-size: 3rem; color: #dee2e6;"></i>
Belum ada data pengukuran ditemukan
</td> </td>
</tr> </tr>
@endforelse @endforelse
@ -102,15 +111,31 @@ class="btn btn-sm btn-info"
</table> </table>
</div> </div>
<div class="d-flex justify-content-center mt-3"> <div class="d-flex justify-content-center mt-4">
{{ $p_ibuhamil->withQueryString()->links() }} {{ $p_ibuhamil->withQueryString()->links() }}
</div> </div>
</div>
</div>
</div> <style>
</div> .custom-table th { color: #7a7a7a; font-weight: 600; text-transform: uppercase; font-size: 11px; padding: 15px; border: none; }
.custom-table td { padding: 15px; border-bottom: 1px solid #f8f9fa; }
/* Soft Badges */
.bg-blue-soft { background-color: #e7f3ff; color: #007bff; }
.bg-green-soft { background-color: #eafff1; color: #28a745; }
.bg-purple-soft { background-color: #f3e8ff; color: #6f42c1; }
.text-purple { color: #6f42c1; }
/* Action Buttons */
.btn-detail-custom { background-color: #e7f3ff; color: #007bff; border: none; border-radius: 8px; }
.btn-detail-custom:hover { background-color: #007bff; color: white; }
.btn-delete-custom { background-color: #fff5f5; color: #fa5252; border: none; border-radius: 8px; }
.btn-delete-custom:hover { background-color: #fa5252; color: white; }
</style>
<script> <script>
let delayTimer; let delayTimer;
document.getElementById('search').addEventListener('keyup', function () { document.getElementById('search').addEventListener('keyup', function () {
clearTimeout(delayTimer); clearTimeout(delayTimer);
@ -129,6 +154,7 @@ class="btn btn-sm btn-info"
}); });
}, 300); }, 300);
}); });
</script> </script>
@endsection @endsection

155
project/resources/views/pengukuran_ibuhamil/detail.blade.php
View File

@ -1,90 +1,117 @@
@extends('layouts.dashboard') @extends('layouts.dashboard')
@section('title','Detail Edukasi Ibu Hamil') @section('title','Detail Perkembangan Ibu Hamil')
@section('content') @section('content')
<div class="pagetitle"> <div class="pagetitle mb-4">
<h1>Detail Edukasi</h1> <h1 style="color: #FF782D; font-weight: 700;">Laporan Kesehatan Ibu Hamil</h1>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ route('pengukuran_ibu_hamil.index') }}">Data Pengukuran</a></li>
<li class="breadcrumb-item active">Detail Laporan</li>
</ol>
</nav>
</div> </div>
<section class="section">
<div class="row">
<div class="col-lg-4">
<div class="card shadow-sm border-0 mb-4" style="border-radius: 20px;">
<div class="card-body pt-4">
<div class="text-center mb-4">
<div class="d-inline-flex align-items-center justify-content-center bg-orange-light rounded-circle mb-3" style="width: 80px; height: 80px;">
<i class="bi bi-person-heart" style="font-size: 2.5rem; color: #FF782D;"></i>
</div>
<h4 class="fw-bold text-dark mb-0">{{ $pengukuran->ibuHamil->nama ?? '-' }}</h4>
<span class="text-muted">{{ \Carbon\Carbon::parse($pengukuran->ibuHamil->tgl_lahir)->age ?? '-' }} Tahun</span>
</div>
<section class="section"> <div class="status-box p-3 rounded-4 mb-3 text-center" style="background-color: #f8f9fa;">
<div class="row align-items-top"> <small class="text-uppercase fw-bold text-muted d-block mb-1">Status Gizi (IMT)</small>
<div class="col-lg-13"> @php
$statusClass = match(strtolower($pengukuran->status_gizi)) {
'normal' => 'bg-success',
'gizi kurang' => 'bg-danger',
'gizi lebih', 'obesitas' => 'bg-warning text-dark',
default => 'bg-secondary'
};
@endphp
<span class="badge {{ $statusClass }} fs-6 px-4 py-2" style="border-radius: 10px;">
{{ strtoupper($pengukuran->status_gizi) }}
</span>
</div>
<!-- Default Card --> <ul class="list-group list-group-flush small">
<div class="card"> <li class="list-group-item d-flex justify-content-between px-0">
<div class="card-body"> <span class="text-muted">Usia Kehamilan:</span>
<form id="formPdf" action="/cetak-ibu-hamil/{{ $pengukuran->id }}" method="POST"> <span class="fw-bold text-orange">{{ $pengukuran->usia_kehamilan }} Minggu</span>
</li>
<li class="list-group-item d-flex justify-content-between px-0">
<span class="text-muted">Nilai IMT:</span>
<span class="fw-bold">{{ $pengukuran->imt }}</span>
</li>
<li class="list-group-item d-flex justify-content-between px-0">
<span class="text-muted">LILA:</span>
<span class="fw-bold">{{ $pengukuran->lila }} cm</span>
</li>
<li class="list-group-item d-flex justify-content-between px-0">
<span class="text-muted">BB / TB:</span>
<span class="fw-bold">{{ $pengukuran->berat_badan }}kg / {{ $pengukuran->tinggi_badan }}cm</span>
</li>
</ul>
<form id="formPdf" action="/cetak-ibu-hamil/{{ $pengukuran->id }}" method="POST" class="mt-4">
@csrf @csrf
<input type="hidden" name="chartImage" id="chartImage"> <input type="hidden" name="chartImage" id="chartImage">
<button type="submit" class="btn btn-danger w-100 py-2 shadow-sm" style="border-radius: 12px;">
<button type="submit" class="btn btn-danger"> <i class="bi bi-file-pdf me-2"></i> Cetak Laporan PDF
Cetak PDF
</button> </button>
</form> </form>
</div>
<h5 class="card-title">Hasil Pengukuran</h5> </div>
<!-- Table -->
<div class="table-responsive">
<table class="table table-hover align-middle datatable">
<thead class="table-light">
<tr>
<th>Petugas</th>
<th>Tanggal</th>
<th>Nama</th>
<th>Usia</th>
<th>Berat Badan</th>
<th>Tinggi Badan</th>
<th>Lila</th>
<th>Usia Kehamilan</th>
<th>IMT</th>
<th>Status Gizi</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ $pengukuran->petugas->nama ?? '-' }}</td>
<td>{{ $pengukuran->tanggal }}</td>
<td>{{ $pengukuran->ibuHamil->nama ?? '-' }}</td>
<td>{{ \Carbon\Carbon::parse($pengukuran->ibuHamil->tgl_lahir)->age ?? '-' }}</td>
<td>{{ $pengukuran->berat_badan }}</td>
<td>{{ $pengukuran->tinggi_badan }}</td>
<td>{{ $pengukuran->lila }}</td>
<td class="text-center">{{ $pengukuran->usia_kehamilan }}</td>
<td>{{ $pengukuran->imt }}</td>
<td>{{ $pengukuran->status_gizi }}</td>
</tr>
</tbody>
</table>
</div> </div>
<!-- Grafik Perkembangan --> <div class="col-lg-8">
<h5 class="card-title">Grafik Perkembangan Pengukuran Ibu Hamil</h5> <div class="card shadow-sm border-0 mb-4" style="border-radius: 20px;">
<div class="card-body">
<h5 class="card-title" style="color: #2c3e50;"><i class="bi bi-activity me-2 text-orange"></i>Grafik BB & IMT</h5>
<div id="grafikIbuHamil"></div>
</div>
</div>
<div id="grafikIbuHamil" style="min-height:350px;"></div> <div class="card shadow-sm border-0" style="border-radius: 20px;">
<hr> <div class="card-body">
<h5 class="card-title" style="color: #2c3e50;"><i class="bi bi-lightbulb me-2 text-warning"></i>Saran Kesehatan Ibu</h5>
<h5 class="card-title">Edukasi dan Informasi Kesehatan</h5> <div class="edukasi-content mt-2">
<div class="edukasi-content p-3 bg-light rounded">
@forelse($edukasi as $item) @forelse($edukasi as $item)
<div class="mb-3"> <div class="d-flex align-items-start p-3 mb-3 border-0 shadow-sm rounded-4" style="background-color: #fffaf0;">
<h6 class="fw-bold text-primary"><i class="bi bi-info-circle-fill me-2"></i>{{ $item->judul }}</h6> <div class="icon-circle me-3" style="color: #FF782D;">
<p class="mb-0">{{ $item->konten }}</p> <i class="bi bi-info-circle-fill fs-4"></i>
</div>
<div>
<h6 class="fw-bold mb-1" style="color: #FF782D;">{{ $item->judul }}</h6>
<p class="mb-0 text-muted small" style="line-height: 1.6;">{{ $item->konten }}</p>
</div>
</div> </div>
@empty @empty
<p class="text-danger">Edukasi belum tersedia untuk kategori ini.</p> <div class="alert alert-light border-0 text-center py-4">
<i class="bi bi-info-circle d-block mb-2 fs-2 text-muted"></i>
<p class="text-muted mb-0">Edukasi belum tersedia untuk kategori gizi ini.</p>
</div>
@endforelse @endforelse
</div> </div>
</div><!-- End Default Card -->
</div> </div>
</div> </div>
</section> </div>
</div> </div>
</div> </section>
<style>
.bg-orange-light { background-color: #fff5f0; }
.text-orange { color: #FF782D; }
.rounded-4 { border-radius: 1rem !important; }
</style>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script> <script>