Skip to content

Commit 19445a6

Browse files
NekshaDeSilvaNekshaDeSilva
committed
updated
1 parent afbcbc4 commit 19445a6

File tree

2 files changed

+66
-30
lines changed

2 files changed

+66
-30
lines changed

‎scripts/opennetwork-banner.js‎

Lines changed: 65 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
statusApiUrl: 'https://status.opennetworked.org/api/status', // Placeholder API
1515
animationDuration: 15000, // 15 seconds for marquee
1616
checkInterval: 300000, // 5 minutes status check
17-
position: 'bottom' // 'top' or 'bottom'
17+
position: 'top', // 'top' or 'bottom'
18+
insertMode: 'static' // 'static' (top of page) or 'fixed' (floating)
1819
};
1920

2021
// Global state
@@ -159,33 +160,41 @@
159160
const createBannerStyles = () => {
160161
const style = document.createElement('style');
161162
style.id = 'opennetwork-banner-styles';
163+
164+
const isStatic = CONFIG.insertMode === 'static';
165+
162166
style.textContent = `
163167
.opennetwork-banner {
164-
position: fixed;
165-
${CONFIG.position}: 0;
166-
left: 0;
167-
right: 0;
168+
${isStatic ? 'position: relative; width: 100%;' : `position: fixed; ${CONFIG.position}: 0; left: 0; right: 0;`}
168169
background: linear-gradient(135deg, #000000ff 0%, #000000ff 100%);
169170
color: white;
170171
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
171172
font-size: 13px;
172173
line-height: 1.4;
173-
z-index: 999999;
174-
box-shadow: ${CONFIG.position === 'bottom' ? '0 -2px 12px rgba(0,0,0,0.15)' : '0 2px 12px rgba(0,0,0,0.15)'};
175-
border-${CONFIG.position === 'bottom' ? 'top' : 'bottom'}: 1px solid rgba(255,255,255,0.1);
174+
${isStatic ? '' : 'z-index: 999999;'}
175+
box-shadow: ${isStatic ? '0 2px 8px rgba(0,0,0,0.1)' : CONFIG.position === 'bottom' ? '0 -2px 12px rgba(0,0,0,0.15)' : '0 2px 12px rgba(0,0,0,0.15)'};
176+
${isStatic ? '' : `border-${CONFIG.position === 'bottom' ? 'top' : 'bottom'}: 1px solid rgba(255,255,255,0.1);`}
176177
backdrop-filter: blur(10px);
177178
-webkit-backdrop-filter: blur(10px);
178179
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
179-
padding: 8px 16px;
180-
min-height: 40px;
180+
padding: 10px 16px;
181+
min-height: 44px;
181182
display: flex;
182183
align-items: center;
184+
${isStatic ? 'margin: 0; border-bottom: 1px solid rgba(255,255,255,0.1);' : ''}
183185
}
184186
185187
.opennetwork-banner:hover {
186-
background: linear-gradient(135deg, #000000ff 0%, #000000ff 100%);
187-
transform: translateY(${CONFIG.position === 'bottom' ? '-1px' : '1px'});
188+
background: linear-gradient(135deg, #1a1a1aff 0%, #1a1a1aff 100%);
189+
${isStatic ? 'box-shadow: 0 4px 12px rgba(0,0,0,0.15);' : `transform: translateY(${CONFIG.position === 'bottom' ? '-1px' : '1px'});`}
190+
}
191+
192+
${isStatic ? `
193+
body.opennetwork-banner-active {
194+
margin-top: 0 !important;
195+
padding-top: 0 !important;
188196
}
197+
` : ''}
189198
190199
.on-banner-content {
191200
display: flex;
@@ -206,8 +215,8 @@
206215
}
207216
208217
.on-flag-logo {
209-
width: 20px;
210-
height: 20px;
218+
width: 22px;
219+
height: 22px;
211220
margin-right: 12px;
212221
border-radius: 3px;
213222
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
@@ -250,7 +259,7 @@
250259
display: flex;
251260
align-items: center;
252261
background: rgba(255,255,255,0.1);
253-
padding: 4px 8px;
262+
padding: 6px 10px;
254263
border-radius: 20px;
255264
font-size: 12px;
256265
font-weight: 500;
@@ -289,10 +298,21 @@
289298
50% { opacity: 0.7; }
290299
}
291300
292-
@keyframes slideIn {
301+
@keyframes slideInTop {
302+
from {
303+
opacity: 0;
304+
transform: translateY(-100%);
305+
}
306+
to {
307+
opacity: 1;
308+
transform: translateY(0);
309+
}
310+
}
311+
312+
@keyframes slideInBottom {
293313
from {
294314
opacity: 0;
295-
transform: translateY(${CONFIG.position === 'bottom' ? '100%' : '-100%'});
315+
transform: translateY(100%);
296316
}
297317
to {
298318
opacity: 1;
@@ -301,26 +321,26 @@
301321
}
302322
303323
.opennetwork-banner.on-animate-in {
304-
animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
324+
animation: ${isStatic ? 'slideInTop' : CONFIG.position === 'bottom' ? 'slideInBottom' : 'slideInTop'} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
305325
}
306326
307327
/* Responsive design */
308328
@media (max-width: 768px) {
309329
.opennetwork-banner {
310330
font-size: 12px;
311-
padding: 6px 12px;
312-
min-height: 36px;
331+
padding: 8px 12px;
332+
min-height: 40px;
313333
}
314334
315335
.on-flag-logo {
316-
width: 16px;
317-
height: 16px;
336+
width: 18px;
337+
height: 18px;
318338
margin-right: 8px;
319339
}
320340
321341
.on-status {
322342
font-size: 11px;
323-
padding: 3px 6px;
343+
padding: 4px 8px;
324344
}
325345
326346
.on-left-section {
@@ -331,16 +351,17 @@
331351
@media (max-width: 480px) {
332352
.opennetwork-banner {
333353
font-size: 11px;
334-
padding: 5px 8px;
354+
padding: 6px 8px;
355+
min-height: 36px;
335356
}
336357
337358
.on-status-text {
338359
display: none;
339360
}
340361
341362
.on-status {
342-
width: 20px;
343-
height: 20px;
363+
width: 24px;
364+
height: 24px;
344365
justify-content: center;
345366
padding: 0;
346367
border-radius: 50%;
@@ -371,8 +392,20 @@
371392
const styles = createBannerStyles();
372393
document.head.appendChild(styles);
373394

374-
// Add banner to body
375-
document.body.appendChild(banner);
395+
// Insert banner based on mode
396+
if (CONFIG.insertMode === 'static') {
397+
// Insert at the very top of the page
398+
if (document.body.firstChild) {
399+
document.body.insertBefore(banner, document.body.firstChild);
400+
} else {
401+
document.body.appendChild(banner);
402+
}
403+
// Add body class for any additional styling needs
404+
document.body.classList.add('opennetwork-banner-active');
405+
} else {
406+
// Add as floating banner (original behavior)
407+
document.body.appendChild(banner);
408+
}
376409

377410
// Setup event listeners
378411
window.addEventListener('resize', checkTextOverflow);
@@ -389,7 +422,7 @@
389422
updateStatusIndicator(newStatus.status, newStatus.message);
390423
}, CONFIG.checkInterval);
391424

392-
console.log('OpenNetwork Banner initialized for:', domain);
425+
console.log('OpenNetwork Banner initialized for:', domain, `(${CONFIG.insertMode} mode)`);
393426
};
394427

395428
const destroyBanner = () => {
@@ -398,6 +431,9 @@
398431
banner = null;
399432
}
400433

434+
// Remove body class if it was added
435+
document.body.classList.remove('opennetwork-banner-active');
436+
401437
if (statusCheck) {
402438
clearInterval(statusCheck);
403439
statusCheck = null;

0 commit comments

Comments
 (0)