mirror of
https://github.com/tiennm99/serena.git
synced 2026-10-13 10:16:00 +00:00
Better positioning of sponsor banners
This commit is contained in:
Michael Panchenko committed
1 parent
234aba4aba
commit
5b6b6cac20
3 files changed
+239
-94
No files matched your search
@@ -62,18 +62,21 @@ body {
|
||||
right: 0;
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 20px;
|
||||
padding: 20px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
z-index: 1000;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
min-height: 70px;
|
||||
min-height: 90px;
|
||||
box-shadow: var(--shadow);
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
@@ -87,6 +90,7 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
@@ -144,28 +148,42 @@ body {
|
||||
}
|
||||
|
||||
/* Sponsor Banners */
|
||||
.sponsors-container {
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.platinum-sponsors-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
box-shadow: var(--shadow);
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Platinum sponsor in header */
|
||||
.platinum-sponsors-section.header-sponsor {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.platinum-banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-sponsor .platinum-banner {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.platinum-sponsor-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -186,7 +204,7 @@ body {
|
||||
}
|
||||
|
||||
.platinum-sponsor-slide .sponsor-content {
|
||||
font-size: 60px;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
@@ -194,25 +212,30 @@ body {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.header-sponsor .platinum-sponsor-slide .sponsor-content {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.gold-sponsors-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
background-color: var(--bg-primary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gold-banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gold-sponsor-group {
|
||||
.gold-sponsor-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -221,33 +244,22 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gold-sponsor-group.active {
|
||||
.gold-sponsor-slide.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.gold-sponsor-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gold-sponsor-item .sponsor-content {
|
||||
font-size: 18px;
|
||||
.gold-sponsor-slide .sponsor-content {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
padding: 10px 15px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background-color: var(--bg-secondary);
|
||||
width: 100%;
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
@@ -257,17 +269,18 @@ body {
|
||||
background-color: transparent;
|
||||
color: var(--text-muted);
|
||||
border: none;
|
||||
font-size: 36px;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
padding: 10px 15px;
|
||||
padding: 8px 12px;
|
||||
transition: color 0.3s ease;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
opacity: 0.3;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.sponsor-nav-btn:hover {
|
||||
color: var(--text-primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.sponsor-nav-btn:active {
|
||||
@@ -275,44 +288,67 @@ body {
|
||||
}
|
||||
|
||||
.platinum-sponsors-section .sponsor-nav-left {
|
||||
left: 7px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.platinum-sponsors-section .sponsor-nav-right {
|
||||
right: 7px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.gold-sponsors-section .sponsor-nav-btn {
|
||||
font-size: 28px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.gold-sponsors-section .sponsor-nav-left {
|
||||
left: 7px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.gold-sponsors-section .sponsor-nav-right {
|
||||
right: 7px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for sponsors */
|
||||
@media (max-width: 768px) {
|
||||
.platinum-sponsor-slide .sponsor-content {
|
||||
font-size: 24px;
|
||||
padding: 15px;
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.gold-sponsor-item .sponsor-content {
|
||||
.header-sponsor .platinum-sponsor-slide .sponsor-content {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.gold-sponsor-slide .sponsor-content {
|
||||
font-size: 14px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.sponsor-nav-btn {
|
||||
font-size: 28px;
|
||||
padding: 5px 10px;
|
||||
font-size: 22px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.gold-sponsors-section .sponsor-nav-btn {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-wrap: wrap;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.header-sponsor {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.page-view {
|
||||
|
||||
@@ -243,6 +243,9 @@ class Dashboard {
|
||||
// Initialize theme
|
||||
this.initializeTheme();
|
||||
|
||||
// Initialize sponsor rotation
|
||||
this.initializeSponsorRotation();
|
||||
|
||||
// Add ESC key handler for closing modals
|
||||
$(document).keydown(function (e) {
|
||||
if (e.key === 'Escape' || e.keyCode === 27) {
|
||||
@@ -1831,4 +1834,114 @@ class Dashboard {
|
||||
// Close menu
|
||||
self.$menuDropdown.hide();
|
||||
}
|
||||
|
||||
// ===== Sponsor Rotation Methods =====
|
||||
|
||||
initializeSponsorRotation() {
|
||||
const self = this;
|
||||
|
||||
// Platinum sponsor rotation
|
||||
this.platinumCurrentIndex = 0;
|
||||
this.platinumInterval = null;
|
||||
|
||||
$('#platinum-prev').click(function() {
|
||||
self.rotatePlatinumSponsor('prev');
|
||||
});
|
||||
|
||||
$('#platinum-next').click(function() {
|
||||
self.rotatePlatinumSponsor('next');
|
||||
});
|
||||
|
||||
// Start automatic platinum rotation
|
||||
this.startPlatinumRotation();
|
||||
|
||||
// Gold sponsor rotation
|
||||
this.goldCurrentIndex = 0;
|
||||
this.goldInterval = null;
|
||||
|
||||
$('#gold-prev').click(function() {
|
||||
self.rotateGoldSponsor('prev');
|
||||
});
|
||||
|
||||
$('#gold-next').click(function() {
|
||||
self.rotateGoldSponsor('next');
|
||||
});
|
||||
|
||||
// Start automatic gold rotation
|
||||
this.startGoldRotation();
|
||||
}
|
||||
|
||||
rotatePlatinumSponsor(direction) {
|
||||
const $slides = $('.platinum-sponsor-slide');
|
||||
const totalSlides = $slides.length;
|
||||
|
||||
if (totalSlides === 0) return;
|
||||
|
||||
// Remove active class from current slide
|
||||
$slides.eq(this.platinumCurrentIndex).removeClass('active');
|
||||
|
||||
// Calculate new index
|
||||
if (direction === 'next') {
|
||||
this.platinumCurrentIndex = (this.platinumCurrentIndex + 1) % totalSlides;
|
||||
} else {
|
||||
this.platinumCurrentIndex = (this.platinumCurrentIndex - 1 + totalSlides) % totalSlides;
|
||||
}
|
||||
|
||||
// Add active class to new slide
|
||||
$slides.eq(this.platinumCurrentIndex).addClass('active');
|
||||
|
||||
// Reset auto-rotation timer
|
||||
this.startPlatinumRotation();
|
||||
}
|
||||
|
||||
startPlatinumRotation() {
|
||||
const self = this;
|
||||
|
||||
// Clear existing interval
|
||||
if (this.platinumInterval) {
|
||||
clearInterval(this.platinumInterval);
|
||||
}
|
||||
|
||||
// Start new interval (30 seconds)
|
||||
this.platinumInterval = setInterval(function() {
|
||||
self.rotatePlatinumSponsor('next');
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
rotateGoldSponsor(direction) {
|
||||
const $slides = $('.gold-sponsor-slide');
|
||||
const totalSlides = $slides.length;
|
||||
|
||||
if (totalSlides === 0) return;
|
||||
|
||||
// Remove active class from current slide
|
||||
$slides.eq(this.goldCurrentIndex).removeClass('active');
|
||||
|
||||
// Calculate new index
|
||||
if (direction === 'next') {
|
||||
this.goldCurrentIndex = (this.goldCurrentIndex + 1) % totalSlides;
|
||||
} else {
|
||||
this.goldCurrentIndex = (this.goldCurrentIndex - 1 + totalSlides) % totalSlides;
|
||||
}
|
||||
|
||||
// Add active class to new slide
|
||||
$slides.eq(this.goldCurrentIndex).addClass('active');
|
||||
|
||||
// Reset auto-rotation timer
|
||||
this.startGoldRotation();
|
||||
}
|
||||
|
||||
startGoldRotation() {
|
||||
const self = this;
|
||||
|
||||
// Clear existing interval
|
||||
if (this.goldInterval) {
|
||||
clearInterval(this.goldInterval);
|
||||
}
|
||||
|
||||
// Start new interval (30 seconds)
|
||||
this.goldInterval = setInterval(function() {
|
||||
self.rotateGoldSponsor('next');
|
||||
}, 30000);
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,25 @@
|
||||
<div class="logo-container">
|
||||
<img id="serena-logo" src="serena-logs.png" alt="Serena">
|
||||
</div>
|
||||
|
||||
<!-- Platinum Sponsors in Header -->
|
||||
<div class="platinum-sponsors-section header-sponsor">
|
||||
<button class="sponsor-nav-btn sponsor-nav-left" id="platinum-prev" aria-label="Previous platinum sponsor">
|
||||
‹
|
||||
</button>
|
||||
<div class="platinum-banner" id="platinum-banner">
|
||||
<div class="platinum-sponsor-slide active" data-sponsor="1">
|
||||
<div class="sponsor-content">PLATINUM SPONSOR 1</div>
|
||||
</div>
|
||||
<div class="platinum-sponsor-slide" data-sponsor="2">
|
||||
<div class="sponsor-content">PLATINUM SPONSOR 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sponsor-nav-btn sponsor-nav-right" id="platinum-next" aria-label="Next platinum sponsor">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="header-nav">
|
||||
<button id="theme-toggle" class="theme-toggle">
|
||||
<span id="theme-icon">🌙</span>
|
||||
@@ -39,63 +58,13 @@
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Sponsor Banners -->
|
||||
<div class="sponsors-container">
|
||||
<!-- Platinum Sponsors -->
|
||||
<div class="platinum-sponsors-section">
|
||||
<button class="sponsor-nav-btn sponsor-nav-left" id="platinum-prev" aria-label="Previous platinum sponsor">
|
||||
‹
|
||||
</button>
|
||||
<div class="platinum-banner" id="platinum-banner">
|
||||
<div class="platinum-sponsor-slide active" data-sponsor="1">
|
||||
<div class="sponsor-content">PLATINUM SPONSOR 1</div>
|
||||
</div>
|
||||
<div class="platinum-sponsor-slide" data-sponsor="2">
|
||||
<div class="sponsor-content">PLATINUM SPONSOR 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sponsor-nav-btn sponsor-nav-right" id="platinum-next" aria-label="Next platinum sponsor">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Gold Sponsors -->
|
||||
<div class="gold-sponsors-section">
|
||||
<button class="sponsor-nav-btn sponsor-nav-left gold-nav" id="gold-prev" aria-label="Previous gold sponsors">
|
||||
‹
|
||||
</button>
|
||||
<div class="gold-banner" id="gold-banner">
|
||||
<div class="gold-sponsor-group active" data-group="1">
|
||||
<div class="gold-sponsor-item">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 1</div>
|
||||
</div>
|
||||
<div class="gold-sponsor-item">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gold-sponsor-group" data-group="2">
|
||||
<div class="gold-sponsor-item">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 3</div>
|
||||
</div>
|
||||
<div class="gold-sponsor-item">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 4</div>
|
||||
</div>
|
||||
<div class="gold-sponsor-item">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sponsor-nav-btn sponsor-nav-right gold-nav" id="gold-next" aria-label="Next gold sponsors">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<!-- Overview Page (Landing) -->
|
||||
<div id="page-overview" class="page-view">
|
||||
<div class="overview-container">
|
||||
<div class="overview-left">
|
||||
|
||||
<section class="config-section">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
|
||||
<h2 style="margin: 0;">Current Configuration</h2>
|
||||
@@ -174,6 +143,33 @@
|
||||
<div class="loading">Loading contexts...</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gold Sponsors -->
|
||||
<section class="gold-sponsors-section">
|
||||
<button class="sponsor-nav-btn sponsor-nav-left gold-nav" id="gold-prev" aria-label="Previous gold sponsor">
|
||||
‹
|
||||
</button>
|
||||
<div class="gold-banner" id="gold-banner">
|
||||
<div class="gold-sponsor-slide active" data-sponsor="1">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 1</div>
|
||||
</div>
|
||||
<div class="gold-sponsor-slide" data-sponsor="2">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 2</div>
|
||||
</div>
|
||||
<div class="gold-sponsor-slide" data-sponsor="3">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 3</div>
|
||||
</div>
|
||||
<div class="gold-sponsor-slide" data-sponsor="4">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 4</div>
|
||||
</div>
|
||||
<div class="gold-sponsor-slide" data-sponsor="5">
|
||||
<div class="sponsor-content gold">GOLD SPONSOR 5</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sponsor-nav-btn sponsor-nav-right gold-nav" id="gold-next" aria-label="Next gold sponsor">
|
||||
›
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user