535 lines
15 KiB
Plaintext
535 lines
15 KiB
Plaintext
<style>
|
||
/* ---------------- Video Header ---------------- */
|
||
.video-header {
|
||
position: relative;
|
||
height: 80vh;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.bg-video {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.video-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.video-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 2rem;
|
||
color: white;
|
||
text-align: center;
|
||
padding-top: 30vh;
|
||
}
|
||
|
||
.video-content h1 {
|
||
font-size: 3rem;
|
||
margin-bottom: 1rem;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.video-content h2 {
|
||
font-size: 2rem;
|
||
margin-bottom: 0.5rem;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* ---------------- Body & Layout ---------------- */
|
||
html, body {
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: "Poppins", sans-serif;
|
||
background: linear-gradient(135deg, #0f1724, #1e293b);
|
||
color: #e6eef6;
|
||
}
|
||
|
||
.page-wrapper {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1900px;
|
||
margin: 0 auto;
|
||
padding-top: 20px;
|
||
flex: 1;
|
||
}
|
||
|
||
/* ---------------- Header ---------------- */
|
||
.page-header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.page-header h2 {
|
||
font-weight: 700;
|
||
font-size: 2.9rem;
|
||
background: linear-gradient(90deg, #1e88e5, #43a047, #fdd835, #fb8c00, #e53935);
|
||
background-size: 200% auto;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: gradient-move 3s linear infinite;
|
||
}
|
||
|
||
@keyframes gradient-move {
|
||
0% { background-position: 0% center; }
|
||
100% { background-position: 200% center; }
|
||
}
|
||
|
||
.logo-img {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.divider {
|
||
width: 100px;
|
||
height: 4px;
|
||
background: linear-gradient(to right, #1e88e5, #43a047);
|
||
margin: 15px auto;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* ---------------- Stats Row ---------------- */
|
||
.stats-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
margin-bottom: 35px;
|
||
}
|
||
|
||
.stat-card {
|
||
flex: 0 0 auto;
|
||
width: 140px;
|
||
padding: 12px 16px;
|
||
background: rgba(255,255,255,0.05);
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
|
||
transition: 0.3s ease;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
|
||
}
|
||
|
||
.stat-label {
|
||
font-weight: 600;
|
||
font-size: 0.85rem;
|
||
color: #cfd8dc;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: #7dd3fc;
|
||
}
|
||
|
||
/* ---------------- Glass Cards ---------------- */
|
||
.glass-card {
|
||
background: rgba(255, 255, 255, 0.05); /* Lowered opacity for more transparency */
|
||
backdrop-filter: blur(1px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border-radius: 18px;
|
||
padding: 25px;
|
||
width: 100%;
|
||
transition: 0.3s ease;
|
||
}
|
||
|
||
.glass-card:hover {
|
||
transform: translateY(-15px);
|
||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
|
||
}
|
||
|
||
/* ---------------- Section Titles ---------------- */
|
||
.section-title {
|
||
font-weight: 700;
|
||
font-size: 1.4rem;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ---------------- Item Cards ---------------- */
|
||
.item-card {
|
||
border-radius: 12px;
|
||
background: rgba(255,255,255,0.95);
|
||
border: 1px solid rgba(0,0,0,0.1);
|
||
padding: 12px 15px;
|
||
margin-bottom: 10px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.item-card:hover {
|
||
transform: scale(1.03);
|
||
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 1.05rem;
|
||
font-weight: 600;
|
||
color: #1e88e5;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.item-desc {
|
||
font-size: 0.9rem;
|
||
color: #37474f;
|
||
}
|
||
|
||
.item-footer {
|
||
text-align: right;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* ---------------- Buttons ---------------- */
|
||
.btn-custom {
|
||
padding: 10px 18px;
|
||
border-radius: 12px;
|
||
font-weight: 600;
|
||
transition: 0.3s ease;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
|
||
.btn-primary-custom { background: #1e88e5; color: #fff; }
|
||
.btn-primary-custom:hover { background: #1565c0; transform: translateY(-2px); }
|
||
|
||
.btn-success-custom { background: #43a047; color: #fff; }
|
||
.btn-success-custom:hover { background: #2e7d32; transform: translateY(-2px); }
|
||
|
||
/* ---------------- Expense & Income Cards ---------------- */
|
||
.expense-card, .income-card {
|
||
background: rgba(255,255,255,0.1);
|
||
backdrop-filter: blur(12px);
|
||
border-radius: 18px;
|
||
padding: 25px;
|
||
width: 100%;
|
||
text-align: center;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.expense-card:hover, .income-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
|
||
}
|
||
|
||
.expense-card h1, .income-card h1 {
|
||
font-size: 1.6rem;
|
||
margin-bottom: 15px;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.expense-card .btn, .income-card .btn {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
/* ---------------- Responsive ---------------- */
|
||
@media (max-width: 992px) {
|
||
.stats-row { flex-direction: column; align-items: center; }
|
||
.row.g-4 { flex-direction: column; }
|
||
.col-lg-6, .col-lg-5 { max-width: 95%; margin: 0 auto; }
|
||
}
|
||
.finance-card {
|
||
background: rgba(255,255,255,0.08);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||
padding: 30px;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.finance-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 40px rgba(0,0,0,0.25);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
color: #facc15; /* golden color for finance numbers */
|
||
margin: 10px 0;
|
||
text-align: center;
|
||
}
|
||
.just {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 70%;
|
||
margin-left: 250px;
|
||
}
|
||
|
||
</style>
|
||
|
||
<div class="page-wrapper">
|
||
<div class="container">
|
||
|
||
|
||
<!-- Header -->
|
||
<div class="page-header d-flex flex-column align-items-center">
|
||
<%= image_tag("unnamed.jpg", alt: "Logo", class: "logo-img") %>
|
||
<h2>BADAR MADEENA CULTURAL CENTER AND CHARITY TRUST</h2>
|
||
<div class="divider"></div>
|
||
</div>
|
||
|
||
|
||
<div class="video-header">
|
||
<video autoplay muted loop playsinline class="bg-video">
|
||
<source src="<%= asset_path('just.mp4') %>" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
|
||
<div class="video-overlay"></div>
|
||
|
||
<div class="video-content text-center">
|
||
<h2 class="text-primary">From Him To Him</h2>
|
||
<h1 class="text-white fw-bold">A Shelter for the destitute</h1>
|
||
<h1 class="text-white fw-bold">EDUCATIONAL INSTITUTIONS</h1>
|
||
<h1 class="text-white fw-bold">AND CHARITY TRUST</h1>
|
||
<h1 class="text-white fw-bold">MANAGEMENT SYSTEM</h1>
|
||
<h1 class="text-white fw-bold">GENERATION OF THOUGHTS</h1>
|
||
|
||
<div class="just">
|
||
<div class="glass-card p-4 w-50">
|
||
<% if @institutions.present? %>
|
||
<div class="mb-4">
|
||
<label for="institution_select" class="form-label fw-bold">Study With Our College</label>
|
||
<select id="institution_select" class="form-select" onchange="if(this.value){ window.location = '/institutions/' + this.value }">
|
||
<option value="">-- Choose an institution --</option>
|
||
<% @institutions.each do |institution| %>
|
||
<option value="<%= institution.id %>"><%= institution.name %></option>
|
||
<% end %>
|
||
</select>
|
||
</div>
|
||
<% else %>
|
||
<p class="item-desc text-center text-muted">No institutions added yet.</p>
|
||
<% end %>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<!-- Stats Row -->
|
||
<div class="stats-row">
|
||
<div class="stat-card">
|
||
<div class="stat-label">INSTITUTIONS</div>
|
||
<div class="stat-value"><%= @institution_count || 0 %></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">PROGRAMS</div>
|
||
<div class="stat-value"><%= @program_count || 0 %></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">STUDENTS</div>
|
||
<div class="stat-value"><%= @student_count || 0 %></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">ZIYARAS</div>
|
||
<div class="stat-value"><%= @ziyara_count || 0 %></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">TRADITIONAL RECORDS</div>
|
||
<div class="stat-value"><%= @exclusive_traditional_records_count || 0 %></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Two-column sections -->
|
||
<div class="row g-4">
|
||
|
||
<!-- Institutions -->
|
||
<div class="col-lg-6 d-flex justify-content-center">
|
||
<div class="glass-card p-4 w-100">
|
||
<h3 class="section-title text-primary mb-3">🏫 Institutions</h3>
|
||
<% if @institutions.present? %>
|
||
<div class="mb-4">
|
||
<label for="institution_select" class="form-label fw-bold">Select Institution</label>
|
||
<select id="institution_select" class="form-select" onchange="if(this.value){ window.location = '/institutions/' + this.value }">
|
||
<option value="">-- Choose an institution --</option>
|
||
<% @institutions.each do |institution| %>
|
||
<option value="<%= institution.id %>"><%= institution.name %></option>
|
||
<% end %>
|
||
</select>
|
||
</div>
|
||
<% else %>
|
||
<p class="item-desc text-center text-muted">No institutions added yet.</p>
|
||
<% end %>
|
||
<div class="text-center mt-3">
|
||
<%= link_to "➕ New Institution", new_institution_path, class: "btn btn-success-custom me-2" %>
|
||
<%= link_to "📚 All Students", students_path, class: "btn btn-primary-custom" %>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Programs -->
|
||
<div class="col-lg-6 d-flex justify-content-center">
|
||
<div class="glass-card p-4 w-100">
|
||
<h3 class="section-title text-success mb-3">🎓 Programs</h3>
|
||
<% if @programs.present? %>
|
||
<div class="mb-4">
|
||
<label for="program_select" class="form-label fw-bold">Select Program</label>
|
||
<select id="program_select" class="form-select" onchange="if(this.value){ window.location = '/programs/' + this.value }">
|
||
<option value="">-- Choose a program --</option>
|
||
<% @programs.each do |program| %>
|
||
<option value="<%= program.id %>"><%= program.name %></option>
|
||
<% end %>
|
||
</select>
|
||
</div>
|
||
<% else %>
|
||
<p class="item-desc text-center text-muted">No programs available yet.</p>
|
||
<% end %>
|
||
<div class="text-center mt-3">
|
||
<%= link_to "➕ New Program", new_program_path, class: "btn btn-success-custom me-2" %>
|
||
<%= link_to "📚 All Programs", programs_path, class: "btn btn-primary-custom" %>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ziyara & Traditional Records -->
|
||
<div class="row g-4 mt-4 justify-content-center">
|
||
|
||
<!-- Ziyara -->
|
||
<div class="col-lg-5 d-flex justify-content-center">
|
||
<div class="glass-card p-4 w-100">
|
||
<h3 class="section-title text-primary mb-3">🕌 Ziyara</h3>
|
||
<% if @ziyaras.present? %>
|
||
<div class="mb-4">
|
||
<label for="ziyara_select" class="form-label fw-bold">Select Ziyara</label>
|
||
<select id="ziyara_select" class="form-select" onchange="if(this.value){ window.location = '/ziyaras/' + this.value }">
|
||
<option value="">-- Choose a Ziyara --</option>
|
||
<% @ziyaras.each do |ziyara| %>
|
||
<option value="<%= ziyara.id %>"><%= ziyara.name %></option>
|
||
<% end %>
|
||
</select>
|
||
</div>
|
||
<% else %>
|
||
<p class="item-desc text-center text-muted">No Ziyara records yet.</p>
|
||
<% end %>
|
||
<div class="text-center mt-3">
|
||
<%= link_to "➕ New Ziyara", new_ziyara_path, class: "btn btn-success-custom me-2" %>
|
||
<%= link_to "📚 All Ziyara", ziyaras_path, class: "btn btn-primary-custom" %>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Exclusive Traditional Records -->
|
||
<div class="col-lg-5 d-flex justify-content-center">
|
||
<div class="glass-card p-4 w-100">
|
||
<h3 class="section-title text-secondary mb-3">📜 Exclusive Traditional Records</h3>
|
||
<% if @exclusive_traditional_records.present? %>
|
||
<div class="mb-4">
|
||
<label for="record_select" class="form-label fw-bold">Select Record</label>
|
||
<select id="record_select" class="form-select" onchange="if(this.value){ window.location = '/exclusive_traditional_records/' + this.value }">
|
||
<option value="">-- Choose a Record --</option>
|
||
<% @exclusive_traditional_records.each do |record| %>
|
||
<option value="<%= record.id %>"><%= record.name if record.respond_to?(:name) %></option>
|
||
<% end %>
|
||
</select>
|
||
</div>
|
||
<% else %>
|
||
<p class="item-desc text-center text-muted">No exclusive traditional records yet.</p>
|
||
<% end %>
|
||
<div class="text-center mt-3">
|
||
<%= link_to "➕ New Record", new_exclusive_traditional_record_path, class: "btn btn-success-custom me-2" %>
|
||
<%= link_to "📚 All Records", exclusive_traditional_records_path, class: "btn btn-primary-custom" %>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Finance Card -->
|
||
<div class="row mt-4 justify-content-center">
|
||
<div class="col-12 d-flex justify-content-center">
|
||
<div class="finance-card p-4 w-100">
|
||
<h2 class="section-title text-warning mb-4">💼 Finance Overview</h2>
|
||
|
||
<div class="row g-4 justify-content-center">
|
||
<!-- Expense Card -->
|
||
<div class="col-lg-5 d-flex justify-content-center">
|
||
<div class="expense-card w-100">
|
||
<% if notice.present? %>
|
||
<div class="flash-notice"><%= notice %></div>
|
||
<% end %>
|
||
<h3>📊 Expenses</h3>
|
||
<p class="stat-value"><%= number_to_currency(@total_expense || 0) %></p>
|
||
<%= link_to "Expenses List", expenses_path, class: "btn btn-primary-custom mt-2" %>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Income Card -->
|
||
<div class="col-lg-5 d-flex justify-content-center">
|
||
<div class="income-card w-100">
|
||
<% if notice.present? %>
|
||
<div class="flash-notice"><%= notice %></div>
|
||
<% end %>
|
||
<h3>💰 Incomes</h3>
|
||
<p class="stat-value"><%= number_to_currency(@total_income || 0) %></p>
|
||
<%= link_to "Incomes List", incomes_path, class: "btn btn-primary-custom mt-2" %>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Profit Summary -->
|
||
<div class="text-center mt-4">
|
||
<h3>📈 BALANCE</h3>
|
||
<p class="stat-value fs-3"><%= number_to_currency(@profit || 0) %></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div> <!-- container -->
|
||
</div> <!-- page-wrapper -->
|
||
<!-- JavaScript to handle the text change effect -->
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
let h1Elements = document.querySelectorAll('h1');
|
||
let currentIndex = 0;
|
||
|
||
// Initially hide all h1 elements
|
||
h1Elements.forEach((el, index) => {
|
||
el.style.display = 'none';
|
||
});
|
||
|
||
// Show the first h1 element
|
||
h1Elements[currentIndex].style.display = 'block';
|
||
|
||
// Change text every 3 seconds
|
||
setInterval(function() {
|
||
h1Elements[currentIndex].style.display = 'none'; // Hide current
|
||
currentIndex = (currentIndex + 1) % h1Elements.length; // Move to next h1
|
||
h1Elements[currentIndex].style.display = 'block'; // Show next
|
||
}, 3000); // 3 seconds
|
||
});
|
||
</script> |