Skip to content
Merged
47 changes: 41 additions & 6 deletions shopkeeper.css
Original file line number Diff line number Diff line change
Expand Up @@ -380,15 +380,50 @@ body {
.results-summary {
text-align: center;
margin-bottom: 2rem;
padding: 0.75rem 1.5rem;
background: var(--light-green);
border-radius: 25px;
color: var(--dark-green);
font-weight: 600;
}

/* Modern pill badge */
.dealer-badge {
display: inline-flex;
align-items: center;
gap: 8px;

padding: 10px 20px;
border-radius: 999px; /* pill shape */

background: linear-gradient(135deg, #22c55e, #16a34a); /* gradient green */
color: #fff;
font-size: 1rem;
display: inline-block;
font-weight: 700;

box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
transition: all 0.3s ease;
animation: pulseGlow 2.5s infinite;
}

/* Hover/focus effect */
.dealer-badge:hover,
.dealer-badge:focus {
background: linear-gradient(135deg, #16a34a, #15803d);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.6);
cursor: pointer;
}

/* Glow animation */
@keyframes pulseGlow {
0% {
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}
50% {
box-shadow: 0 0 18px rgba(34, 197, 94, 0.8);
}
100% {
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}
}


#resultsCount {
font-weight: 700;
font-size: 1.1rem;
Expand Down
28 changes: 23 additions & 5 deletions shopkeeper.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,19 @@
</a>

<!-- Center: Navigation Links -->
<nav class="nav-links">
<a href="/main.html">Home</a>
<a href="/about.html">About</a>
<a href="/blog.html">Blog</a>
</nav>
<!-- Center: Navigation Links -->
<nav class="nav-links">
<a href="index.html">
Home
</a>
<a href="about.html">
About
</a>
<a href="blog.html">
Blog
</a>
</nav>


<button class="theme-toggle" type="button" id="themeToggle" title="Switch theme" aria-label="Switch theme">
<svg class="theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
Expand Down Expand Up @@ -134,6 +142,16 @@ <h1 class="hero-title">Punjab Agricultural Dealers Directory</h1>
</button>
</div>

<!-- Results Summary -->
<div class="results-summary" id="resultsSummary">
<span class="dealer-badge">
<i class="fa-solid fa-store">
</i>
10 dealers found
</span>
</div>


<!-- Results Summary -->
<div class="results-summary" id="resultsSummary">
<span id="resultsCount">10</span> dealers found
Expand Down
Loading
Loading