header fixed

This commit is contained in:
Dharmaraj Shrestha 2025-02-19 16:47:53 +05:45
parent e827dc6ccb
commit 799daccb2f
2 changed files with 41 additions and 59 deletions

20
.vscode/settings.json vendored
View File

@ -1,22 +1,2 @@
{ {
"workbench.colorCustomizations": {
"activityBar.activeBackground": "#2f7c47",
"activityBar.background": "#2f7c47",
"activityBar.foreground": "#e7e7e7",
"activityBar.inactiveForeground": "#e7e7e799",
"activityBarBadge.background": "#422c74",
"activityBarBadge.foreground": "#e7e7e7",
"commandCenter.border": "#e7e7e799",
"sash.hoverBorder": "#2f7c47",
"statusBar.background": "#215732",
"statusBar.foreground": "#e7e7e7",
"statusBarItem.hoverBackground": "#2f7c47",
"statusBarItem.remoteBackground": "#215732",
"statusBarItem.remoteForeground": "#e7e7e7",
"titleBar.activeBackground": "#215732",
"titleBar.activeForeground": "#e7e7e7",
"titleBar.inactiveBackground": "#21573299",
"titleBar.inactiveForeground": "#e7e7e799"
},
"peacock.color": "#215732"
} }

View File

@ -1,41 +1,3 @@
<!-- Bootstrap CSS (Include if not already added) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Toast Container (Fixed Position) -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 1050">
<?php if (isset($_GET['status'])): ?>
<div id="statusToast" class="toast align-items-center text-white bg-<?php echo ($_GET['status'] == 'success' ? 'success' : ($_GET['status'] == 'error' ? 'danger' : 'warning')); ?> border-0 show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<?php
if ($_GET['status'] == 'success') {
echo "✅ Message sent successfully!";
} elseif ($_GET['status'] == 'error') {
// echo "❌ There was an error sending your message. Please try again.";
echo "❌ There was an error: " . htmlspecialchars($_GET['message']);
} elseif ($_GET['status'] == 'missing_fields') {
echo "⚠️ Please fill in all required fields.";
}
?>
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<?php $_GET['status'] = null; ?>
<?php endif; ?>
</div>
<!-- Bootstrap JS & Auto Hide Toast Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
let statusToast = document.getElementById("statusToast");
if (statusToast) {
let toast = new bootstrap.Toast(statusToast, { delay: 3000 }); // Auto-hide after 3s
toast.show();
}
});
</script>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -324,4 +286,44 @@
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<!-- Bootstrap CSS (Include if not already added) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Toast Container (Fixed Position) -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 1050">
<?php if (isset($_GET['status'])): ?>
<div id="statusToast" class="toast align-items-center text-white bg-<?php echo ($_GET['status'] == 'success' ? 'success' : ($_GET['status'] == 'error' ? 'danger' : 'warning')); ?> border-0 show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<?php
if ($_GET['status'] == 'success') {
echo "✅ Message sent successfully!";
} elseif ($_GET['status'] == 'error') {
// echo "❌ There was an error sending your message. Please try again.";
echo "❌ There was an error: " . htmlspecialchars($_GET['message']);
} elseif ($_GET['status'] == 'missing_fields') {
echo "⚠️ Please fill in all required fields.";
}
?>
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<?php $_GET['status'] = null; ?>
<?php endif; ?>
</div>
<!-- Bootstrap JS & Auto Hide Toast Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
let statusToast = document.getElementById("statusToast");
if (statusToast) {
let toast = new bootstrap.Toast(statusToast, { delay: 3000 }); // Auto-hide after 3s
toast.show();
}
});
</script>