File: /home/niyknzcu/nexlancedigital.com/templates.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Templates — Nexlance</title>
<link rel="icon" type="image/png" href="images/fav.png">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
.page-hero {
padding: 140px 0 60px;
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #f8fafc 100%);
text-align: center;
position: relative; overflow: hidden;
}
.page-hero::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(79,70,229,0.07); top:-150px; right:-150px; }
.page-hero::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(124,58,237,0.07); bottom:-80px; left:-80px; }
.page-hero .container { position:relative; z-index:1; }
.page-hero-label { display:inline-block; font-size:var(--font-size-sm); font-weight:600; color:var(--color-secondary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.page-hero h1 { font-size:var(--font-size-5xl); font-weight:800; line-height:1.15; margin-bottom:1rem; }
.page-hero p { font-size:var(--font-size-lg); color:var(--color-text-light); max-width:600px; margin:0 auto 2rem; line-height:1.7; }
/* Search bar */
.search-wrap { max-width:520px; margin:0 auto; position:relative; }
.search-wrap input {
width:100%; padding:1rem 1.25rem 1rem 3rem;
border:2px solid var(--color-border); border-radius:var(--radius-full);
font-family:var(--font-family); font-size:var(--font-size-base); color:var(--color-text);
background:#fff; outline:none; transition:border-color .2s,box-shadow .2s;
}
.search-wrap input:focus { border-color:var(--color-secondary); box-shadow:0 0 0 3px rgba(79,70,229,.1); }
.search-icon { position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-size:1.1rem; pointer-events:none; }
/* Stats bar */
.stats-bar { display:flex; justify-content:center; gap:3rem; margin-top:2rem; }
.stats-bar span { font-size:var(--font-size-sm); color:var(--color-text-lighter); }
.stats-bar strong { color:var(--color-text); font-weight:700; }
/* Category tabs */
.cat-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem; }
.cat-tab {
padding:.6rem 1.25rem; font-size:var(--font-size-sm); font-weight:500;
color:var(--color-text-light); background:#fff; border:1.5px solid var(--color-border);
border-radius:var(--radius-full); cursor:pointer; transition:all .2s;
}
.cat-tab:hover, .cat-tab.active { color:var(--color-secondary); border-color:var(--color-secondary); background:rgba(79,70,229,.05); }
/* Sort bar */
.sort-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.result-count { font-size:var(--font-size-sm); color:var(--color-text-lighter); }
.sort-select {
padding:.5rem 1rem; border:1.5px solid var(--color-border); border-radius:var(--radius-md);
font-family:var(--font-family); font-size:var(--font-size-sm); color:var(--color-text);
background:#fff; outline:none; cursor:pointer;
}
/* Templates grid */
.tpl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.tpl-card { background:#fff; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--color-border); transition:all .25s; }
.tpl-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.tpl-preview { position:relative; height:220px; overflow:hidden; }
.tpl-preview img { width:100%; height:100%; object-fit:cover; }
.tpl-preview-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3.5rem; }
.tpl-overlay { position:absolute; inset:0; background:rgba(0,0,0,.72); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.85rem; opacity:0; transition:opacity .2s; }
.tpl-card:hover .tpl-overlay { opacity:1; }
.tpl-badge { position:absolute; top:12px; left:12px; padding:.25rem .75rem; border-radius:var(--radius-full); font-size:var(--font-size-xs); font-weight:700; }
.badge-new { background:#10b981; color:#fff; }
.badge-pop { background:var(--color-secondary); color:#fff; }
.badge-free { background:#f59e0b; color:#fff; }
.tpl-info { padding:1.25rem; display:flex; justify-content:space-between; align-items:center; }
.tpl-info h4 { font-size:var(--font-size-base); font-weight:700; margin-bottom:.2rem; }
.tpl-info span { font-size:var(--font-size-sm); color:var(--color-text-lighter); }
.tpl-rating { display:flex; align-items:center; gap:.35rem; font-size:var(--font-size-sm); font-weight:600; }
.star { color:#f59e0b; }
/* No results */
.no-results { display:none; text-align:center; padding:4rem 2rem; color:var(--color-text-light); }
.no-results-icon { font-size:3rem; margin-bottom:1rem; }
/* Pagination */
.pagination { display:flex; justify-content:center; gap:.5rem; margin-top:3rem; }
.page-btn { width:40px; height:40px; border-radius:var(--radius-md); border:1.5px solid var(--color-border); background:#fff; font-size:var(--font-size-sm); font-weight:600; color:var(--color-text-light); cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; }
.page-btn:hover, .page-btn.active { border-color:var(--color-secondary); color:var(--color-secondary); background:rgba(79,70,229,.05); }
@media(max-width:1024px){ .tpl-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .tpl-grid{grid-template-columns:1fr;} .stats-bar{flex-direction:column;gap:.75rem;} }
</style>
</head>
<body>
<nav class="navbar" id="navbar">
<div class="nav-container">
<a href="index.html" class="logo"><span class="logo-icon">◆</span> Nexlance</a>
<ul class="nav-menu" id="nav-menu">
<li class="nav-item has-dropdown">
<a href="#">Products <span class="arrow">▾</span></a>
<div class="dropdown"><div class="dropdown-grid">
<a href="#" class="dropdown-item"><span class="dropdown-icon">🌐</span><div><h4>Websites</h4><p>Professional site builder</p></div></a>
<a href="#" class="dropdown-item"><span class="dropdown-icon">🛒</span><div><h4>E-commerce</h4><p>Online store solutions</p></div></a>
<a href="#" class="dropdown-item"><span class="dropdown-icon">📧</span><div><h4>Email Marketing</h4><p>Campaign tools</p></div></a>
<a href="#" class="dropdown-item"><span class="dropdown-icon">📅</span><div><h4>Scheduling</h4><p>Appointment booking</p></div></a>
</div></div>
</li>
<li class="nav-item has-dropdown">
<a href="templates.html">Templates <span class="arrow">▾</span></a>
<div class="dropdown dropdown-templates">
<div class="dropdown-grid templates-grid">
<a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#667eea,#764ba2);"><img src="images/f2.webp" alt="Portfolio Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Portfolio</span></a>
<a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#f093fb,#f5576c);"><img src="images/business.jpg" alt="Business Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Business</span></a>
<a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#4facfe,#00f2fe);"><img src="images/creative.jpg" alt="Blog Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Blog</span></a>
<a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#43e97b,#38f9d7);"><img src="images/store.avif" alt="Store Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Store</span></a>
</div>
<a href="templates.html" class="dropdown-view-all">View All Templates →</a>
</div>
</li>
<li class="nav-item"><a href="pricing.html">Pricing</a></li>
<li class="nav-item"><a href="features.html">Features</a></li>
<li class="nav-item"><a href="#">Resources</a></li>
</ul>
<div class="nav-actions">
<a href="login.html" class="btn-text">Log In</a>
<a href="login.html" class="btn-primary">Get Started</a>
</div>
<button class="mobile-toggle" id="mobile-toggle"><span></span><span></span><span></span></button>
</div>
</nav>
<!-- Hero -->
<section class="page-hero">
<div class="container">
<span class="page-hero-label">Templates</span>
<h1>Find your perfect <span class="gradient-text">template</span></h1>
<p>200+ professionally designed templates for every industry and purpose. Fully customizable — no design skills needed.</p>
<div class="search-wrap">
<span class="search-icon">🔍</span>
<input type="text" id="tplSearch" placeholder="Search templates (e.g. restaurant, portfolio, shop…)">
</div>
<div class="stats-bar">
<span><strong>200+</strong> Templates</span>
<span><strong>15</strong> Categories</span>
<span><strong>Free</strong> to Use</span>
<span><strong>Mobile</strong> Responsive</span>
</div>
</div>
</section>
<!-- Gallery -->
<section style="background:#fff;">
<div class="container">
<!-- Category Tabs -->
<div class="cat-tabs" id="catTabs">
<button class="cat-tab active" data-cat="all">All</button>
<button class="cat-tab" data-cat="portfolio">Portfolio</button>
<button class="cat-tab" data-cat="business">Business</button>
<button class="cat-tab" data-cat="ecommerce">E-commerce</button>
<button class="cat-tab" data-cat="blog">Blog</button>
<button class="cat-tab" data-cat="restaurant">Restaurant</button>
<button class="cat-tab" data-cat="photography">Photography</button>
<button class="cat-tab" data-cat="agency">Agency</button>
<button class="cat-tab" data-cat="landing">Landing Page</button>
</div>
<!-- Sort -->
<div class="sort-bar">
<span class="result-count" id="resultCount">Showing all 18 templates</span>
<select class="sort-select" id="sortSelect">
<option value="popular">Most Popular</option>
<option value="newest">Newest First</option>
<option value="az">A – Z</option>
</select>
</div>
<!-- Grid -->
<div class="tpl-grid" id="tplGrid">
<div class="tpl-card" data-cat="portfolio" data-name="Minimal Portfolio">
<div class="tpl-preview">
<img src="images/portfolio.jpg" alt="Minimal Portfolio Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#e0e7ff,#c4b5fd);">🎨</div>
<span class="tpl-badge badge-pop">Popular</span>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Minimal Portfolio</h4><span>Portfolio</span></div>
<div class="tpl-rating"><span class="star">★</span>4.9</div>
</div>
</div>
<div class="tpl-card" data-cat="business" data-name="Agency Pro">
<div class="tpl-preview">
<img src="images/agency.jpg" alt="agency pro preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#1e1b4b,#4f46e5);">🏢</div>
<span class="tpl-badge badge-pop">Popular</span>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Agency Pro</h4><span>Business</span></div>
<div class="tpl-rating"><span class="star">★</span>4.8</div>
</div>
</div>
<div class="tpl-card" data-cat="ecommerce" data-name="Fashion Store">
<div class="tpl-preview">
<img src="images/f4.avif" alt="Fashion Store Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#ff6b6b,#feca57);">👗</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Fashion Store</h4><span>E-commerce</span></div>
<div class="tpl-rating"><span class="star">★</span>4.7</div>
</div>
</div>
<div class="tpl-card" data-cat="blog" data-name="Writer's Blog">
<div class="tpl-preview">
<img src="images/writing.webp" alt="writing blog preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#a29bfe,#6c5ce7);">✍️</div>
<span class="tpl-badge badge-new">New</span>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Writer's Blog</h4><span>Blog</span></div>
<div class="tpl-rating"><span class="star">★</span>4.6</div>
</div>
</div>
<div class="tpl-card" data-cat="photography" data-name="Photographer">
<div class="tpl-preview">
<img src="images/photogrPHER.avif" alt="photographer preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#00b894,#00cec9);">📷</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Photographer</h4><span>Photography</span></div>
<div class="tpl-rating"><span class="star">★</span>4.8</div>
</div>
</div>
<div class="tpl-card" data-cat="business" data-name="Startup Landing">
<div class="tpl-preview">
<img src="images/startup.avif" alt="Startup Landing Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#2d3436,#636e72);">🚀</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Startup Landing</h4><span>Business</span></div>
<div class="tpl-rating"><span class="star">★</span>4.7</div>
</div>
</div>
<div class="tpl-card" data-cat="restaurant" data-name="Fine Dining">
<div class="tpl-preview">
<img src="images/dinner.jpg" alt="Fine Dining Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#d63031,#c0392b);">🍽️</div>
<span class="tpl-badge badge-new">New</span>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Fine Dining</h4><span>Restaurant</span></div>
<div class="tpl-rating"><span class="star">★</span>4.9</div>
</div>
</div>
<div class="tpl-card" data-cat="ecommerce" data-name="Electronics Store">
<div class="tpl-preview">
<img src="images/electronic.jpg" alt="Electronics Store Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#0984e3,#74b9ff);">💻</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Electronics Store</h4><span>E-commerce</span></div>
<div class="tpl-rating"><span class="star">★</span>4.5</div>
</div>
</div>
<div class="tpl-card" data-cat="agency" data-name="Creative Agency">
<div class="tpl-preview">
<img src="images/creative.jpg" alt="Creative Agency Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#6c5ce7,#a29bfe);">🎭</div>
<span class="tpl-badge badge-pop">Popular</span>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Creative Agency</h4><span>Agency</span></div>
<div class="tpl-rating"><span class="star">★</span>4.8</div>
</div>
</div>
<div class="tpl-card" data-cat="portfolio" data-name="Designer Portfolio">
<div class="tpl-preview">
<img src="images/design.jpg" alt="Designer Portfolio Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#fd79a8,#e84393);">💼</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Designer Portfolio</h4><span>Portfolio</span></div>
<div class="tpl-rating"><span class="star">★</span>4.6</div>
</div>
</div>
<div class="tpl-card" data-cat="landing" data-name="SaaS Product">
<div class="tpl-preview">
<img src="images/SaaS-Development.avif" alt="saas preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#00cec9,#55efc4);">⚡</div>
<span class="tpl-badge badge-new">New</span>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>SaaS Product</h4><span>Landing Page</span></div>
<div class="tpl-rating"><span class="star">★</span>4.9</div>
</div>
</div>
<div class="tpl-card" data-cat="restaurant" data-name="Café & Bakery">
<div class="tpl-preview">
<img src="images/cafe.webp" alt="cafe preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#fdcb6e,#e17055);">☕</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Café & Bakery</h4><span>Restaurant</span></div>
<div class="tpl-rating"><span class="star">★</span>4.7</div>
</div>
</div>
<div class="tpl-card" data-cat="blog" data-name="Tech Blog">
<div class="tpl-preview">
<img src="images/tech.jpg" alt="tech preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#2d3436,#0984e3);">💡</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Tech Blog</h4><span>Blog</span></div>
<div class="tpl-rating"><span class="star">★</span>4.5</div>
</div>
</div>
<div class="tpl-card" data-cat="business" data-name="Consulting Firm">
<div class="tpl-preview">
<img src="images/consulting.jpg" alt="Consulting Firm Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#b2bec3,#636e72);">📊</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Consulting Firm</h4><span>Business</span></div>
<div class="tpl-rating"><span class="star">★</span>4.6</div>
</div>
</div>
<div class="tpl-card" data-cat="photography" data-name="Wedding Gallery">
<div class="tpl-preview">
<img src="images/wedding.jpg" alt="Wedding Gallery Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#ffeaa7,#fab1a0);">💍</div>
<span class="tpl-badge badge-pop">Popular</span>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Wedding Gallery</h4><span>Photography</span></div>
<div class="tpl-rating"><span class="star">★</span>4.9</div>
</div>
</div>
<div class="tpl-card" data-cat="agency" data-name="Digital Marketing">
<div class="tpl-preview">
<img src="images/digital.jpg" alt="digital marketing preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#fd79a8,#6c5ce7);">📱</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Digital Marketing</h4><span>Agency</span></div>
<div class="tpl-rating"><span class="star">★</span>4.7</div>
</div>
</div>
<div class="tpl-card" data-cat="ecommerce" data-name="Jewelry & Luxury">
<div class="tpl-preview">
<img src="images/luxury.jpg" alt="Jewelry & Luxury Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#1e1b4b,#6c5ce7);">💎</div>
<span class="tpl-badge badge-new">New</span>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>Jewelry & Luxury</h4><span>E-commerce</span></div>
<div class="tpl-rating"><span class="star">★</span>4.8</div>
</div>
</div>
<div class="tpl-card" data-cat="landing" data-name="App Download">
<div class="tpl-preview">
<img src="images/app.avif" alt="App Download Preview">
<div class="tpl-preview-placeholder" style="background:linear-gradient(135deg,#00b894,#6c5ce7);">📲</div>
<div class="tpl-overlay">
<button class="btn-preview">Preview</button>
<a href="login.html" class="btn-use">Use Template</a>
</div>
</div>
<div class="tpl-info">
<div><h4>App Download</h4><span>Landing Page</span></div>
<div class="tpl-rating"><span class="star">★</span>4.6</div>
</div>
</div>
</div>
<div class="no-results" id="noResults">
<div class="no-results-icon">🔍</div>
<p>No templates match your search. Try a different keyword or category.</p>
</div>
<!-- <div class="pagination">
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">›</button>
</div> -->
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="container">
<div class="cta-content">
<h2>Can't find the right template?</h2>
<p>Start from a blank canvas or let our AI build a custom site for you in seconds.</p>
<a href="login.html" class="btn-primary btn-large">Start Building Free</a>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="index.html" class="logo"><span class="logo-icon">◆</span> Nexlance</a>
<p>Build beautiful websites without writing a single line of code.</p>
<div class="social-links">
<a href="#" aria-label="Twitter">𝕏</a><a href="#" aria-label="LinkedIn">in</a>
</div>
</div>
<div class="footer-links"><h4>Product</h4><ul>
<li><a href="templates.html">Templates</a></li><li><a href="features.html">Features</a></li>
<li><a href="pricing.html">Pricing</a></li><li><a href="updates.html">Updates</a></li>
</ul></div>
<div class="footer-links"><h4>Resources</h4><ul>
<li><a href="help-center.html">Help Center</a></li><li><a href="webinars.html">Webinars</a></li>
<li><a href="blog.html">Blog</a></li><li><a href="developers.html">Developers</a></li>
</ul></div>
<div class="footer-links"><h4>Company</h4><ul>
<li><a href="about.html">About Us</a></li><li><a href="careers.html">Careers</a></li>
<li><a href="press.html">Press</a></li><li><a href="contact.html">Contact</a></li>
</ul></div>
<div class="footer-links"><h4>Legal</h4><ul>
<li><a href="privacy.html">Privacy Policy</a></li><li><a href="terms.html">Terms of Service</a></li>
<li><a href="refund.html">Refund Policy</a></li> </ul></div>
</div>
<div class="footer-bottom">
<p>© 2026 Nexlance. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="terms.html">Terms & Services</a><a href="sitemap.html">Sitemap</a><a href="status.html">Status</a><a href="security.html">Security</a>
</div>
</div>
</div>
</footer>
<button class="back-to-top" id="back-to-top" aria-label="Back to top">↑</button>
<script src="main.js"></script>
<script>
const cards = Array.from(document.querySelectorAll('.tpl-card'));
const catTabs = document.querySelectorAll('.cat-tab');
const searchInput = document.getElementById('tplSearch');
const noResults = document.getElementById('noResults');
const resultCount = document.getElementById('resultCount');
function applyFilter() {
const activeCat = document.querySelector('.cat-tab.active').dataset.cat;
const query = searchInput.value.toLowerCase().trim();
let visible = 0;
cards.forEach(card => {
const catMatch = activeCat === 'all' || card.dataset.cat === activeCat;
const nameMatch = !query || card.dataset.name.toLowerCase().includes(query);
const show = catMatch && nameMatch;
card.style.display = show ? '' : 'none';
if (show) visible++;
});
noResults.style.display = visible === 0 ? 'block' : 'none';
resultCount.textContent = `Showing ${visible} template${visible !== 1 ? 's' : ''}`;
}
catTabs.forEach(btn => {
btn.addEventListener('click', () => {
catTabs.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
applyFilter();
});
});
searchInput.addEventListener('input', applyFilter);
// Preview modal placeholder
document.querySelectorAll('.btn-preview').forEach(btn => {
btn.addEventListener('click', () => alert('Preview coming soon! Use "Use Template" to get started.'));
});
applyFilter();
</script>
</body>
</html>