93 lines
1.9 KiB
Plaintext
93 lines
1.9 KiB
Plaintext
<div id="<%= dom_id(ziyara) %>" class="dashboard-card">
|
|
<div class="icon-wrapper">
|
|
<i class="bi bi-mosque"></i>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h5 class="card-title"><%= ziyara.name %></h5>
|
|
|
|
<% if ziyara.respond_to?(:location) %>
|
|
<p class="card-text"><strong>Location:</strong> <%= ziyara.location %></p>
|
|
<% end %>
|
|
|
|
<% if ziyara.respond_to?(:date) %>
|
|
<p class="card-text"><strong>Date:</strong> <%= ziyara.date.strftime('%B %d, %Y') %></p>
|
|
<% end %>
|
|
|
|
<%= link_to "View Details →", ziyara, class: "view-link" %>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* === Modern Dashboard Card === */
|
|
.dashboard-card {
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
|
|
padding: 18px 20px;
|
|
width: 280px;
|
|
height: 180px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
text-align: left;
|
|
margin: 10px;
|
|
}
|
|
|
|
.dashboard-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* === Icon Circle === */
|
|
.icon-wrapper {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
|
|
color: #1e88e5;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* === Card Text === */
|
|
.card-title {
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.card-text {
|
|
font-size: 0.9rem;
|
|
color: #555;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* === View Link === */
|
|
.view-link {
|
|
display: inline-block;
|
|
color: #1e88e5;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.view-link:hover {
|
|
color: #1565c0;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* === Optional Grid for multiple cards === */
|
|
.dashboard-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
}
|
|
</style>
|