moving adds at the top
This commit is contained in:
Flatlogic Bot
parent
852ef148fa
commit
157c143969
BIN
assets/images/cases/case_698edda6587b1.jpg
Normal file
BIN
assets/images/cases/case_698edda6587b1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
217
index.php
217
index.php
@ -36,6 +36,7 @@ $texts = [
|
||||
'new_badge' => 'NEW',
|
||||
'monthly_giving' => 'Join our monthly giving circle',
|
||||
'clear_search' => 'Clear Search',
|
||||
'priority_notice' => 'LATEST UPDATES'
|
||||
],
|
||||
'ar' => [
|
||||
'title' => 'ادعم قضية',
|
||||
@ -65,6 +66,7 @@ $texts = [
|
||||
'new_badge' => 'جديد',
|
||||
'monthly_giving' => 'انضم إلى دائرة العطاء الشهري',
|
||||
'clear_search' => 'مسح البحث',
|
||||
'priority_notice' => 'آخر التحديثات'
|
||||
]
|
||||
];
|
||||
|
||||
@ -165,10 +167,106 @@ function safe_truncate($text, $limit = 120) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Top Priority Bar Styles */
|
||||
.top-priority-bar {
|
||||
background: #1e293b;
|
||||
color: #fff;
|
||||
padding: 10px 0;
|
||||
font-size: 0.875rem;
|
||||
position: relative;
|
||||
z-index: 1050;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.priority-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.priority-label {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
margin-inline-end: 20px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-shadow: 10px 0 15px #1e293b;
|
||||
}
|
||||
[dir="rtl"] .priority-label {
|
||||
box-shadow: -10px 0 15px #1e293b;
|
||||
}
|
||||
|
||||
.priority-scroller-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.priority-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
will-change: transform;
|
||||
animation: marquee 30s linear infinite;
|
||||
}
|
||||
|
||||
.priority-items:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
0% { left: 100%; transform: translateX(0); }
|
||||
100% { left: 0; transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
[dir="rtl"] .priority-items {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
animation: marquee-rtl 30s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes marquee-rtl {
|
||||
0% { right: 100%; transform: translateX(0); }
|
||||
100% { right: 0; transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.priority-item {
|
||||
color: #e2e8f0;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.priority-item:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.priority-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #10b981;
|
||||
border-radius: 50%;
|
||||
margin-inline-end: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding: 1rem 0;
|
||||
z-index: 1040;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
@ -185,62 +283,6 @@ function safe_truncate($text, $limit = 120) {
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
/* Ads/Featured Section Styles */
|
||||
.ads-container {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ads-scroller {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.ads-scroller::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ad-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 9999px;
|
||||
padding: 4px 16px 4px 6px;
|
||||
white-space: nowrap;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-main);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ad-item:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: #fff;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.ad-badge {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
padding: 4px 10px;
|
||||
border-radius: 9999px;
|
||||
margin-inline-end: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ad-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 4rem 0 3rem 0;
|
||||
background: #fff;
|
||||
@ -464,6 +506,39 @@ function safe_truncate($text, $limit = 120) {
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top Priority Bar (Ads) -->
|
||||
<div class="top-priority-bar">
|
||||
<div class="container">
|
||||
<div class="priority-wrapper">
|
||||
<span class="priority-label"><?= $t['priority_notice'] ?></span>
|
||||
|
||||
<div class="priority-scroller-container">
|
||||
<div class="priority-items">
|
||||
<?php if (empty($featured_cases)): ?>
|
||||
<div class="priority-item">
|
||||
<span class="priority-dot"></span>
|
||||
<?= $t['subtitle'] ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php foreach ($featured_cases as $fc): ?>
|
||||
<div class="priority-item" onclick="highlightCase(<?= $fc['id'] ?>)">
|
||||
<span class="priority-dot"></span>
|
||||
<strong>[<?= $fc['importance'] == 'top_priority' ? $t['top_priority'] : $t['urgent'] ?>]</strong>
|
||||
<?= htmlspecialchars($lang === 'en' ? $fc['title_en'] : $fc['title_ar']) ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="priority-item">
|
||||
<span class="priority-dot" style="background: #3b82f6;"></span>
|
||||
<?= $t['monthly_giving'] ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar sticky-top">
|
||||
<div class="container">
|
||||
<a class="brand-text" href="index.php?lang=<?= $lang ?>">
|
||||
@ -481,36 +556,6 @@ function safe_truncate($text, $limit = 120) {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Ads Section -->
|
||||
<div class="ads-container shadow-sm">
|
||||
<div class="container">
|
||||
<div class="ads-scroller">
|
||||
<?php if (empty($featured_cases)): ?>
|
||||
<!-- Default Ad if no featured cases -->
|
||||
<div class="ad-item">
|
||||
<span class="ad-badge" style="background: var(--primary-color);"><?= $t['featured'] ?></span>
|
||||
<span class="ad-title"><?= $t['subtitle'] ?></span>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php foreach ($featured_cases as $fc): ?>
|
||||
<div class="ad-item" onclick="highlightCase(<?= $fc['id'] ?>)">
|
||||
<span class="ad-badge <?= $fc['importance'] == 'top_priority' ? '' : 'bg-warning text-dark' ?>">
|
||||
<?= $fc['importance'] == 'top_priority' ? $t['top_priority'] : $t['urgent'] ?>
|
||||
</span>
|
||||
<span class="ad-title"><?= htmlspecialchars($lang === 'en' ? $fc['title_en'] : $fc['title_ar']) ?></span>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Constant "Ad" for general donations or impact -->
|
||||
<div class="ad-item">
|
||||
<span class="ad-badge" style="background: #3b82f6;"><?= $t['new_badge'] ?></span>
|
||||
<span class="ad-title"><?= $t['monthly_giving'] ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header class="hero">
|
||||
<div class="container">
|
||||
<h1><?= $t['hero_title'] ?></h1>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user