Skip to content

feat: add theme comparison page with dashboard previews #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SamXop123 merged 4 commits into from
Jun 11, 2026
+743 −12
Merged

feat: add theme comparison page with dashboard previews #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5afa2a0
feat: Add Theme Preview Gallery to Landing Page
openhands-agent Jun 11, 2026
32690da
Move theme comparison button to middle of themes section
openhands-agent Jun 11, 2026
a64291f
style: improve theme action button alignment
vaishnavikhatri3 Jun 11, 2026
d122e57
style: adjust theme comparison CTA layout
vaishnavikhatri3 Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 23 additions & 7 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,8 @@ <h2 class="section-title">Stunning Themes for Every Taste</h2>
<p class="theme-result-count" id="themeResultCount"></p>
</div>

<!-- Theme Comparison CTA - In the middle -->

<div class="themes-grid" id="themesGrid">
<div class="theme-card" data-theme="" data-cat="minimal" data-colors="black purple white" tabindex="0"
role="button" aria-label="Select Dark theme">
Expand Down Expand Up @@ -570,13 +572,27 @@ <h4 class="theme-name">Pastel Dream</h4>
</div>
<!-- Show More / Show Less button -->
<div class="theme-show-more-wrapper" id="themeShowMoreWrapper">
<button class="theme-show-more-btn" id="themeShowMoreBtn">
Show All Themes
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6" />
</svg>
</button>
</div>

<button class="theme-show-more-btn" id="themeShowMoreBtn">
Show All Themes
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6" />
</svg>
</button>

<br><br>
&nbsp;&nbsp;&nbsp;

<a href="/theme-comparison"
class="theme-show-more-btn"
style="text-decoration: none; display: inline-flex; align-items: center;">
View Theme Comparison
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</a>

</div>
<!-- Empty state shown when nothing matches -->
<div class="theme-empty-state" id="themeEmptyState" style="display:none;">
<p>No themes match your search.</p>
Expand Down
43 changes: 43 additions & 0 deletions public/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2106,3 +2106,46 @@ html {
max-width: 260px;
}
}

/* ===== Theme Comparison CTA ===== */
.theme-comparison-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
margin: var(--spacing-xl) auto;
padding: var(--spacing-lg) var(--spacing-xl);
background: var(--bg-secondary);
border: 1px dashed var(--border-light);
border-radius: var(--radius-lg);
max-width: 500px;
}

.theme-comparison-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
}

.theme-comparison-btn svg {
transition: transform var(--transition-base);
}

.theme-comparison-btn:hover svg {
transform: translateX(4px);
}

.theme-comparison-hint {
font-size: 0.85rem;
color: var(--text-tertiary);
text-align: center;
}

@media (max-width: 768px) {
.theme-comparison-cta {
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
}
}
Loading
Loading