306 lines
8.9 KiB
Plaintext
306 lines
8.9 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title><%= content_for(:title) || "Badar Madeena" %></title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<%= csrf_meta_tags %>
|
|
<%= csp_meta_tag %>
|
|
|
|
<!-- Include compiled application CSS (includes Trix/ActionText styles) -->
|
|
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
|
|
|
|
<!-- Importmap / application JS (Turbo, Stimulus, Trix, ActionText, etc.) -->
|
|
<%= javascript_importmap_tags %>
|
|
|
|
<%= yield :head %>
|
|
|
|
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
|
|
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
|
|
|
|
<link rel="icon" href="/icon.png" type="image/png">
|
|
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="/icon.png">
|
|
|
|
<!-- Bootstrap CSS for modern UI -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<!-- Add scroll effect to navbar -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const navbar = document.querySelector('.navbar');
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
color: #e0e0e0 !important;
|
|
background: linear-gradient(-45deg, #1e88e5, #43a047, #6a1b9a, #d81b60);
|
|
background-size: 400% 400%;
|
|
animation: gradientBG 15s ease infinite;
|
|
}
|
|
|
|
@keyframes gradientBG {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
|
|
.bg-white {
|
|
background-color: #181a1b !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
.navbar {
|
|
background-color: rgba(35, 39, 43, 0.95) !important;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1030;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.footer {
|
|
background-color: #23272b !important;
|
|
}
|
|
|
|
.navbar-brand, .footer, .text-muted {
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
/* Add padding to body to prevent content from going under navbar */
|
|
body {
|
|
padding-top: 76px; /* Adjust this value based on your navbar height */
|
|
}
|
|
|
|
/* Make navbar more compact on scroll */
|
|
.navbar.scrolled {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
background-color: rgba(35, 39, 43, 0.98) !important;
|
|
}
|
|
.alert-success {
|
|
background-color: #1e2d24 !important;
|
|
color: #b8e994 !important;
|
|
border-color: #1e2d24 !important;
|
|
}
|
|
.alert-danger {
|
|
background-color: #2d1e1e !important;
|
|
color: #ff6f61 !important;
|
|
border-color: #2d1e1e !important;
|
|
}
|
|
.form-label, label {
|
|
color: #e0e0e0 !important;
|
|
}
|
|
input, textarea, select {
|
|
background-color: #181a1b !important;
|
|
color: #e0e0e0 !important;
|
|
border: 1px solid #444 !important;
|
|
}
|
|
.btn-primary {
|
|
background-color: #007bff !important;
|
|
border-color: #007bff !important;
|
|
}
|
|
.btn {
|
|
color: #e0e0e0 !important;
|
|
}
|
|
.dropdown-menu {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
background-color: #2a3038 !important;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
}
|
|
.dropdown-item {
|
|
color: #e0e0e0 !important;
|
|
padding: 8px 16px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.dropdown-item:hover {
|
|
background: rgba(30,136,229,0.2) !important;
|
|
color: #fff !important;
|
|
}
|
|
.dropdown-divider {
|
|
border-color: rgba(255,255,255,0.1);
|
|
}
|
|
.dropdown-menu.show {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
.nav-item.dropdown .dropdown-menu {
|
|
margin-top: 0.5rem;
|
|
min-width: 200px;
|
|
}
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
</style>
|
|
|
|
<%# Includes all stylesheet files in app/assets/stylesheets %>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Navigation Bar -->
|
|
<nav class="navbar navbar-expand-lg glass-navbar shadow-sm">
|
|
<div class="container-fluid">
|
|
<!-- Logo & Brand -->
|
|
<%= link_to root_path, class: "navbar-brand d-flex align-items-center" do %>
|
|
<%= image_tag("unnamed.jpg", alt: "Logo", class: "nav-logo me-2") %>
|
|
<span>Badar Madeena pullarikode</span>
|
|
<% end %>
|
|
|
|
<!-- Toggler (for mobile) -->
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
|
|
aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Nav Links -->
|
|
<div class="collapse navbar-collapse" id="mainNav">
|
|
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<%= link_to "🏠 Home", root_path, class: "nav-link active" %>
|
|
</li>
|
|
<li class="nav-item">
|
|
<%= link_to "🎓 Programs", programs_path, class: "nav-link" %>
|
|
</li>
|
|
<li class="nav-item">
|
|
<%= link_to "🕌 Ziyara", ziyaras_path, class: "nav-link" %>
|
|
</li>
|
|
<li class="nav-item">
|
|
<%= link_to "📚 All Students", students_path, class: "nav-link" %>
|
|
</li>
|
|
<li class="nav-item">
|
|
<%= link_to "💰 Income", incomes_path, class: "nav-link" %>
|
|
</li>
|
|
<li class="nav-item">
|
|
<%= link_to "📊 Expenses", expenses_path, class: "nav-link" %>
|
|
</li>
|
|
<li class="nav-item">
|
|
<%= link_to "🏫 Records", exclusive_traditional_records_path, class: "nav-link" %>
|
|
</li>
|
|
<li class="nav-item">
|
|
<%= link_to "📞 Contact", contact_path, class: "nav-link" %>
|
|
</li>
|
|
<% if user_signed_in? %>
|
|
<%= button_to "Sign Out", destroy_user_session_path, method: :delete, class: "btn btn-danger" %>
|
|
<% else %>
|
|
<%= link_to "Sign In", new_user_session_path, class: "btn btn-primary" %>
|
|
<% end %>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<style>
|
|
/* ====== NAVBAR STYLING ====== */
|
|
.glass-navbar {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 2px solid rgba(30, 136, 229, 0.2);
|
|
font-family: "Poppins", sans-serif;
|
|
padding: 10px 30px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.glass-navbar .navbar-brand {
|
|
font-weight: 700;
|
|
font-size: 1.9rem;
|
|
color: #1e88e5;
|
|
background: linear-gradient(90deg, #1e88e5, #43a047);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.nav-logo {
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
font-weight: 600;
|
|
color: #91e59b !important;
|
|
padding: 8px 18px;
|
|
border-radius: 25px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.navbar-nav .nav-link:hover,
|
|
.navbar-nav .nav-link.active {
|
|
background: linear-gradient(90deg, #1e88e5, #43a047);
|
|
color: white !important;
|
|
box-shadow: 0 3px 10px rgba(30, 136, 229, 0.2);
|
|
}
|
|
|
|
.navbar-toggler {
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(30,136,229, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.glass-navbar {
|
|
padding: 8px 20px;
|
|
}
|
|
.navbar-nav .nav-link {
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<p class="text-success text-center"><%= notice %></p>
|
|
|
|
<% content_for :title, "Institutions & Programs" %>
|
|
|
|
|
|
|
|
<% if flash.any? %>
|
|
<% flash.each do |name, message| %>
|
|
<% if name.to_s == 'notice' || name.to_s == 'alert' %>
|
|
<div class="alert alert-<%= name.to_s == 'notice' ? 'success' : 'danger' %>">
|
|
<%= message %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<div class="container shadow rounded p-4 bg-white mt-4">
|
|
<%= yield %>
|
|
|
|
</div>
|
|
<footer class="footer text-center mt-5 mb-3 text-muted">
|
|
© <%= Time.current.year %> Badar Madeena
|
|
</footer>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|