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',
|
'new_badge' => 'NEW',
|
||||||
'monthly_giving' => 'Join our monthly giving circle',
|
'monthly_giving' => 'Join our monthly giving circle',
|
||||||
'clear_search' => 'Clear Search',
|
'clear_search' => 'Clear Search',
|
||||||
|
'priority_notice' => 'LATEST UPDATES'
|
||||||
],
|
],
|
||||||
'ar' => [
|
'ar' => [
|
||||||
'title' => 'ادعم قضية',
|
'title' => 'ادعم قضية',
|
||||||
@ -65,6 +66,7 @@ $texts = [
|
|||||||
'new_badge' => 'جديد',
|
'new_badge' => 'جديد',
|
||||||
'monthly_giving' => 'انضم إلى دائرة العطاء الشهري',
|
'monthly_giving' => 'انضم إلى دائرة العطاء الشهري',
|
||||||
'clear_search' => 'مسح البحث',
|
'clear_search' => 'مسح البحث',
|
||||||
|
'priority_notice' => 'آخر التحديثات'
|
||||||
]
|
]
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -165,10 +167,106 @@ function safe_truncate($text, $limit = 120) {
|
|||||||
padding: 0;
|
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 {
|
.navbar {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-bottom: 1px solid #e5e7eb;
|
border-bottom: 1px solid #e5e7eb;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
|
z-index: 1040;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-text {
|
.brand-text {
|
||||||
@ -185,62 +283,6 @@ function safe_truncate($text, $limit = 120) {
|
|||||||
margin-inline-end: 12px;
|
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 {
|
.hero {
|
||||||
padding: 4rem 0 3rem 0;
|
padding: 4rem 0 3rem 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@ -464,6 +506,39 @@ function safe_truncate($text, $limit = 120) {
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<nav class="navbar sticky-top">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="brand-text" href="index.php?lang=<?= $lang ?>">
|
<a class="brand-text" href="index.php?lang=<?= $lang ?>">
|
||||||
@ -481,36 +556,6 @@ function safe_truncate($text, $limit = 120) {
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</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">
|
<header class="hero">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1><?= $t['hero_title'] ?></h1>
|
<h1><?= $t['hero_title'] ?></h1>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user