417 lines
12 KiB
Plaintext
417 lines
12 KiB
Plaintext
<style>
|
||
/* ---------------- 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;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1900px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
flex: 1;
|
||
}
|
||
|
||
/* ---------------- Header ---------------- */
|
||
.page-header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.page-header h1 {
|
||
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.1);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border-radius: 18px;
|
||
padding: 25px;
|
||
width: 100%;
|
||
transition: 0.3s ease;
|
||
}
|
||
|
||
.glass-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
|
||
}
|
||
|
||
/* ---------------- 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;
|
||
}
|
||
|
||
</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") %>
|
||
<h1>BADAR MADEENA CULTURAL CENTER AND CHARITY TRUST</h1>
|
||
<div class="divider"></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 -->
|