Skip to content

Commit b9ceed8

Browse files
NekshaDeSilvaNekshaDeSilva
committed
uodated
1 parent 19445a6 commit b9ceed8

File tree

2 files changed

+30
-66
lines changed

2 files changed

+30
-66
lines changed

‎scripts/opennetwork-banner.js‎

Lines changed: 29 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@
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: 'top', // 'top' or 'bottom'
18-
insertMode: 'static' // 'static' (top of page) or 'fixed' (floating)
17+
position: 'bottom' // 'top' or 'bottom'
1918
};
2019

2120
// Global state
@@ -160,41 +159,33 @@
160159
const createBannerStyles = () => {
161160
const style = document.createElement('style');
162161
style.id = 'opennetwork-banner-styles';
163-
164-
const isStatic = CONFIG.insertMode === 'static';
165-
166162
style.textContent = `
167163
.opennetwork-banner {
168-
${isStatic ? 'position: relative; width: 100%;' : `position: fixed; ${CONFIG.position}: 0; left: 0; right: 0;`}
164+
position: fixed;
165+
${CONFIG.position}: 0;
166+
left: 0;
167+
right: 0;
169168
background: linear-gradient(135deg, #000000ff 0%, #000000ff 100%);
170169
color: white;
171170
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
172171
font-size: 13px;
173172
line-height: 1.4;
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);`}
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);
177176
backdrop-filter: blur(10px);
178177
-webkit-backdrop-filter: blur(10px);
179178
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
180-
padding: 10px 16px;
181-
min-height: 44px;
179+
padding: 8px 16px;
180+
min-height: 40px;
182181
display: flex;
183182
align-items: center;
184-
${isStatic ? 'margin: 0; border-bottom: 1px solid rgba(255,255,255,0.1);' : ''}
185183
}
186184
187185
.opennetwork-banner:hover {
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;
186+
background: linear-gradient(135deg, #000000ff 0%, #000000ff 100%);
187+
transform: translateY(${CONFIG.position === 'bottom' ? '-1px' : '1px'});
196188
}
197-
` : ''}
198189
199190
.on-banner-content {
200191
display: flex;
@@ -215,8 +206,8 @@
215206
}
216207
217208
.on-flag-logo {
218-
width: 22px;
219-
height: 22px;
209+
width: 20px;
210+
height: 20px;
220211
margin-right: 12px;
221212
border-radius: 3px;
222213
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
@@ -259,7 +250,7 @@
259250
display: flex;
260251
align-items: center;
261252
background: rgba(255,255,255,0.1);
262-
padding: 6px 10px;
253+
padding: 4px 8px;
263254
border-radius: 20px;
264255
font-size: 12px;
265256
font-weight: 500;
@@ -298,21 +289,10 @@
298289
50% { opacity: 0.7; }
299290
}
300291
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 {
292+
@keyframes slideIn {
313293
from {
314294
opacity: 0;
315-
transform: translateY(100%);
295+
transform: translateY(${CONFIG.position === 'bottom' ? '100%' : '-100%'});
316296
}
317297
to {
318298
opacity: 1;
@@ -321,26 +301,26 @@
321301
}
322302
323303
.opennetwork-banner.on-animate-in {
324-
animation: ${isStatic ? 'slideInTop' : CONFIG.position === 'bottom' ? 'slideInBottom' : 'slideInTop'} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
304+
animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
325305
}
326306
327307
/* Responsive design */
328308
@media (max-width: 768px) {
329309
.opennetwork-banner {
330310
font-size: 12px;
331-
padding: 8px 12px;
332-
min-height: 40px;
311+
padding: 6px 12px;
312+
min-height: 36px;
333313
}
334314
335315
.on-flag-logo {
336-
width: 18px;
337-
height: 18px;
316+
width: 16px;
317+
height: 16px;
338318
margin-right: 8px;
339319
}
340320
341321
.on-status {
342322
font-size: 11px;
343-
padding: 4px 8px;
323+
padding: 3px 6px;
344324
}
345325
346326
.on-left-section {
@@ -351,17 +331,16 @@
351331
@media (max-width: 480px) {
352332
.opennetwork-banner {
353333
font-size: 11px;
354-
padding: 6px 8px;
355-
min-height: 36px;
334+
padding: 5px 8px;
356335
}
357336
358337
.on-status-text {
359338
display: none;
360339
}
361340
362341
.on-status {
363-
width: 24px;
364-
height: 24px;
342+
width: 20px;
343+
height: 20px;
365344
justify-content: center;
366345
padding: 0;
367346
border-radius: 50%;
@@ -392,20 +371,8 @@
392371
const styles = createBannerStyles();
393372
document.head.appendChild(styles);
394373

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-
}
374+
// Add banner to body
375+
document.body.appendChild(banner);
409376

410377
// Setup event listeners
411378
window.addEventListener('resize', checkTextOverflow);
@@ -422,7 +389,7 @@
422389
updateStatusIndicator(newStatus.status, newStatus.message);
423390
}, CONFIG.checkInterval);
424391

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

428395
const destroyBanner = () => {
@@ -431,9 +398,6 @@
431398
banner = null;
432399
}
433400

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

0 commit comments

Comments
 (0)