Demo for sponsor banners

This commit is contained in:
Michael Panchenko committed 2025-11-05 13:39:25 +07:00
1 parent bb1cc5c33e
commit 234aba4aba
3 files changed
+320 -3

No files matched your search

+4 -3
View File
@@ -9,19 +9,20 @@ from pprint import pprint
from serena.agent import SerenaAgent
from serena.config.serena_config import SerenaConfig
from serena.constants import REPO_ROOT
from serena.tools import FindFileTool, FindReferencingSymbolsTool, GetSymbolsOverviewTool, SearchForPatternTool
from serena.tools import FindFileTool, FindReferencingSymbolsTool, GetSymbolsOverviewTool, SearchForPatternTool, JetBrainsFindSymbolTool
if __name__ == "__main__":
agent = SerenaAgent(project=REPO_ROOT, serena_config=SerenaConfig(gui_log_window_enabled=False, web_dashboard=True))
agent = SerenaAgent(project=REPO_ROOT)
# apply a tool
find_symbol_tool = agent.get_tool(JetBrainsFindSymbolTool)
find_refs_tool = agent.get_tool(FindReferencingSymbolsTool)
find_file_tool = agent.get_tool(FindFileTool)
search_pattern_tool = agent.get_tool(SearchForPatternTool)
overview_tool = agent.get_tool(GetSymbolsOverviewTool)
result = agent.execute_task(
lambda: overview_tool.apply_ex(relative_file_path="src/solidlsp/ls.py"),
lambda: find_symbol_tool.apply("displayBasicStats"),
)
pprint(json.loads(result))
# input("Press Enter to continue...")
@@ -143,6 +143,178 @@ body {
margin: 5px 0;
}
/* 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;
}
.platinum-banner {
position: relative;
width: 100%;
max-width: 800px;
height: 80px;
overflow: hidden;
}
.platinum-sponsor-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
}
.platinum-sponsor-slide.active {
opacity: 1;
pointer-events: auto;
}
.platinum-sponsor-slide .sponsor-content {
font-size: 60px;
font-weight: bold;
color: var(--text-primary);
text-align: center;
width: 100%;
transition: background-color 0.3s ease, color 0.3s ease;
}
.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);
}
.gold-banner {
position: relative;
width: 100%;
max-width: 900px;
height: 60px;
overflow: hidden;
}
.gold-sponsor-group {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
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 {
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;
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;
}
.sponsor-nav-btn {
position: absolute;
background-color: transparent;
color: var(--text-muted);
border: none;
font-size: 36px;
cursor: pointer;
padding: 10px 15px;
transition: color 0.3s ease;
z-index: 10;
user-select: none;
opacity: 0.3;
}
.sponsor-nav-btn:hover {
color: var(--text-primary);
}
.sponsor-nav-btn:active {
color: var(--btn-primary);
}
.platinum-sponsors-section .sponsor-nav-left {
left: 7px;
}
.platinum-sponsors-section .sponsor-nav-right {
right: 7px;
}
.gold-sponsors-section .sponsor-nav-btn {
font-size: 28px;
}
.gold-sponsors-section .sponsor-nav-left {
left: 7px;
}
.gold-sponsors-section .sponsor-nav-right {
right: 7px;
}
/* Responsive adjustments for sponsors */
@media (max-width: 768px) {
.platinum-sponsor-slide .sponsor-content {
font-size: 24px;
padding: 15px;
}
.gold-sponsor-item .sponsor-content {
font-size: 14px;
padding: 8px 10px;
}
.sponsor-nav-btn {
font-size: 28px;
padding: 5px 10px;
}
.gold-sponsors-section .sponsor-nav-btn {
font-size: 24px;
}
}
.page-view {
max-width: 1600px;
margin: 0 auto;
+144
View File
@@ -38,6 +38,59 @@
</div>
</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">
@@ -315,8 +368,99 @@
</div> <!-- End of Main -->
<script>
// Sponsor Banner Rotation Manager
class SponsorRotation {
constructor() {
this.platinumIndex = 0;
this.goldIndex = 0;
this.platinumTimer = null;
this.goldTimer = null;
this.platinumInterval = 30000; // 30 seconds
this.goldInterval = 30000; // 30 seconds
this.init();
}
init() {
// Initialize platinum rotation
this.startPlatinumRotation();
// Initialize gold rotation
this.startGoldRotation();
// Setup manual navigation buttons
$('#platinum-prev').on('click', () => this.rotatePlatinum('prev'));
$('#platinum-next').on('click', () => this.rotatePlatinum('next'));
$('#gold-prev').on('click', () => this.rotateGold('prev'));
$('#gold-next').on('click', () => this.rotateGold('next'));
}
startPlatinumRotation() {
const self = this;
this.platinumTimer = setInterval(() => {
self.rotatePlatinum('next');
}, this.platinumInterval);
}
startGoldRotation() {
const self = this;
this.goldTimer = setInterval(() => {
self.rotateGold('next');
}, this.goldInterval);
}
rotatePlatinum(direction) {
const $slides = $('.platinum-sponsor-slide');
const total = $slides.length;
if (total === 0) return;
// Remove active class from current slide
$slides.eq(this.platinumIndex).removeClass('active');
// Calculate next index
if (direction === 'next') {
this.platinumIndex = (this.platinumIndex + 1) % total;
} else {
this.platinumIndex = (this.platinumIndex - 1 + total) % total;
}
// Add active class to new slide
$slides.eq(this.platinumIndex).addClass('active');
// Reset timer
clearInterval(this.platinumTimer);
this.startPlatinumRotation();
}
rotateGold(direction) {
const $groups = $('.gold-sponsor-group');
const total = $groups.length;
if (total === 0) return;
// Remove active class from current group
$groups.eq(this.goldIndex).removeClass('active');
// Calculate next index
if (direction === 'next') {
this.goldIndex = (this.goldIndex + 1) % total;
} else {
this.goldIndex = (this.goldIndex - 1 + total) % total;
}
// Add active class to new group
$groups.eq(this.goldIndex).addClass('active');
// Reset timer
clearInterval(this.goldTimer);
this.startGoldRotation();
}
}
$(document).ready(function () {
const dashboard = new Dashboard();
const sponsorRotation = new SponsorRotation();
});
</script>
</body>