146 lines
4.5 KiB
PHP
146 lines
4.5 KiB
PHP
<a href="#home" class="navbar-brand d-flex align-items-center px-4 px-lg-5">
|
|
<h1 class="m-0 text-primary d-flex align-items-center">
|
|
<img src="{{ asset('logo/baru/HC.png') }}" alt="Hospital Icon" class="me-2" style="width: 50px; height: auto; transition: all 0.3s ease;">
|
|
<span class="brand-text">HeartChoice</span>
|
|
</h1>
|
|
</a>
|
|
|
|
<button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
<div class="navbar-nav ms-auto p-4 p-lg-0">
|
|
<a href="#home" class="nav-item nav-link">
|
|
<i class="fas fa-home me-2"></i>Home
|
|
</a>
|
|
<a href="#about" class="nav-item nav-link">
|
|
<i class="fas fa-info-circle me-2"></i>About
|
|
</a>
|
|
<!-- <a href="#features" class="nav-item nav-link">Features</a> -->
|
|
<!-- Sign In untuk layar kecil -->
|
|
<a href="{{ route('login') }}" class="nav-item nav-link d-lg-none">
|
|
<i class="fas fa-sign-in-alt me-2"></i>Sign In
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Tombol untuk layar besar -->
|
|
<a href="{{ route('login') }}" class="btn btn-primary py-2 px-4 ms-3 d-none d-lg-flex align-items-center">
|
|
<i class="fas fa-sign-in-alt me-2"></i>
|
|
Sign In
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
|
<!-- Animate.css -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
|
|
|
<style>
|
|
.navbar {
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
background: white;
|
|
}
|
|
|
|
.navbar-brand img:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.brand-text {
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
background: linear-gradient(45deg, #2196F3, #1976D2);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-item {
|
|
position: relative;
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 0.5rem 1rem !important;
|
|
transition: all 0.3s ease;
|
|
border-radius: 0.5rem;
|
|
color: #555 !important;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background-color: rgba(33, 150, 243, 0.1);
|
|
color: #2196F3 !important;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background-color: #2196F3 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(45deg, #2196F3, #1976D2);
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.navbar-nav {
|
|
background-color: white;
|
|
border-radius: 1rem;
|
|
padding: 1rem;
|
|
margin-top: 1rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.nav-item {
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
/* Add smooth scroll behavior */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Add active class to nav items based on scroll position
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
|
|
function onScroll() {
|
|
const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop - 100;
|
|
const sectionBottom = sectionTop + section.offsetHeight;
|
|
const sectionId = section.getAttribute('id');
|
|
|
|
if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href') === `#${sectionId}`) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
window.addEventListener('scroll', onScroll);
|
|
});
|
|
</script>
|