Website Logo

๐Ÿ“‚ google-search-snippet-preview-html-template.txt

Size: 50.05 KB

๐Ÿ“„ File Preview:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#1a73e8">
<meta name="description" content="Free Google Search Snippet Preview tool. See exactly how your webpage title, meta description, and URL will appear in Google search results. Optimize your SEO snippets before publishing.">
<title>Google Search Snippet Preview โ€” See How Your Page Appears in Google</title>
<link rel="canonical" href="https://example.com/">
<!-- SEO Topic Tags: google snippet preview, serp preview, seo tool, meta description preview, title tag checker, search result preview -->
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Google Search Snippet Preview โ€” See How Your Page Appears in Google">
<meta property="og:description" content="Preview your Google search snippet before publishing. Check title tag, meta description, and URL appearance in real-time.">
<meta property="og:url" content="https://example.com/">
<meta property="og:site_name" content="SnippetPreview">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Google Search Snippet Preview Tool">
<meta name="twitter:description" content="See exactly how your page will appear in Google search results before publishing.">
<!-- Favicon (SVG data URI) -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%231a73e8'/%3E%3Ccircle cx='14' cy='14' r='7' fill='none' stroke='white' stroke-width='2.5'/%3E%3Cline x1='19' y1='19' x2='26' y2='26' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E">
<style>
/* ============ RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#1a73e8;
  --blue-dark:#1557b0;
  --blue-light:#e8f0fe;
  --green:#137333;
  --green-light:#e6f4ea;
  --text:#202124;
  --text-muted:#5f6368;
  --border:#dadce0;
  --bg:#ffffff;
  --bg-alt:#f8f9fa;
  --radius:12px;
  --shadow:0 1px 3px rgba(60,64,67,.15),0 4px 12px rgba(60,64,67,.08);
  --shadow-hover:0 2px 6px rgba(60,64,67,.2),0 8px 20px rgba(60,64,67,.12);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ============ LAYOUT ============ */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section-alt{background:var(--bg-alt)}
.section-title{font-size:clamp(1.5rem,3.5vw,2rem);font-weight:700;text-align:center;margin-bottom:12px;letter-spacing:-.02em}
.section-sub{text-align:center;color:var(--text-muted);max-width:640px;margin:0 auto 40px;font-size:1.05rem}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;color:var(--text);white-space:nowrap}
.logo:hover{text-decoration:none}
.logo-icon{width:34px;height:34px;flex-shrink:0}
.nav{display:flex;align-items:center;gap:4px;list-style:none}
.nav a{display:block;padding:8px 14px;border-radius:8px;font-size:.92rem;font-weight:500;color:var(--text-muted);transition:background .15s,color .15s}
.nav a:hover{background:var(--bg-alt);color:var(--text);text-decoration:none}
.menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px;color:var(--text)}
.menu-toggle:hover{background:var(--bg-alt)}
.menu-toggle svg{width:24px;height:24px}
@media(max-width:860px){
  .nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--border);padding:12px 20px;gap:2px;box-shadow:var(--shadow);display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 14px;font-size:1rem}
  .menu-toggle{display:flex}
}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:8px;font-weight:600;font-size:.95rem;transition:transform .12s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 3px rgba(26,115,232,.4)}
.btn-primary:hover{background:var(--blue-dark);text-decoration:none;box-shadow:var(--shadow-hover)}
.btn-secondary{background:#fff;color:var(--blue);border:1.5px solid var(--border)}
.btn-secondary:hover{background:var(--blue-light);border-color:var(--blue);text-decoration:none}
.btn-ghost{background:transparent;color:var(--text-muted);padding:8px 14px;font-weight:500}
.btn-ghost:hover{background:var(--bg-alt);color:var(--text);text-decoration:none}
.btn-sm{padding:8px 16px;font-size:.85rem}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* ============ HERO ============ */
.hero{padding:56px 0 40px;text-align:center;background:linear-gradient(180deg,var(--blue-light) 0%,#fff 100%)}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:100px;padding:6px 16px;font-size:.82rem;font-weight:600;color:var(--blue);margin-bottom:20px;box-shadow:0 1px 2px rgba(60,64,67,.1)}
.hero h1{font-size:clamp(1.8rem,4.5vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;max-width:760px;margin:0 auto 16px}
.hero p{font-size:clamp(1rem,2vw,1.15rem);color:var(--text-muted);max-width:600px;margin:0 auto 28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:32px}
.hero-benefits{display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:center;list-style:none;font-size:.88rem;color:var(--text-muted)}
.hero-benefits li{display:flex;align-items:center;gap:7px}
.hero-benefits svg{width:16px;height:16px;color:var(--green);flex-shrink:0}

/* ============ TOOL CARD ============ */
.tool-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;max-width:860px;margin:0 auto}
.tool-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);background:var(--bg-alt);flex-wrap:wrap;gap:10px}
.tool-head h2{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:8px}
.tool-head h2 svg{width:20px;height:20px;color:var(--blue)}
.tool-body{padding:24px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px}
.field label .hint{font-weight:400;color:var(--text-muted);font-size:.8rem}
.field input[type=text],.field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:.95rem;background:#fff;transition:border-color .15s,box-shadow .15s}
.field input[type=text]:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.15)}
.field textarea{resize:vertical;min-height:90px}
.char-count{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:.78rem;color:var(--text-muted)}
.char-count .over{color:#d93025;font-weight:600}
.char-count .ok{color:var(--green)}
.bar-wrap{height:4px;background:#e8eaed;border-radius:2px;margin-top:8px;overflow:hidden}
.bar-fill{height:100%;width:0%;background:var(--green);border-radius:2px;transition:width .2s,background .2s}

/* ============ PREVIEW ============ */
.preview-wrap{padding:0 24px 24px}
.preview-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.preview-label svg{width:14px;height:14px}
.serp-preview{background:#fff;border:1px solid var(--border);border-radius:10px;padding:20px 22px;font-family:arial,sans-serif;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}
.serp-url{font-size:.82rem;color:#202124;margin-bottom:3px;line-height:1.3;word-break:break-all}
.serp-url .breadcrumb{color:#202124}
.serp-url .arrow{color:#70757a;margin:0 2px}
.serp-title{font-size:1.22rem;color:#1a0dab;line-height:1.3;margin-bottom:3px;cursor:pointer;font-weight:400;word-break:break-word}
.serp-title:hover{text-decoration:underline}
.serp-desc{font-size:.86rem;color:#4d5156;line-height:1.58;word-break:break-word}
.serp-desc .date{color:#70757a}
.serp-favicon-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.serp-favicon{width:18px;height:18px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700;flex-shrink:0}
.serp-site{font-size:.82rem;color:#202124;font-weight:500}

/* ============ TOAST ============ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:#202124;color:#fff;padding:12px 22px;border-radius:8px;font-size:.9rem;font-weight:500;box-shadow:var(--shadow-hover);opacity:0;transition:transform .25s,opacity .25s;z-index:999;pointer-events:none;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast svg{width:18px;height:18px;vertical-align:middle;margin-right:6px}

/* ============ FEATURES GRID ============ */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card-icon{width:44px;height:44px;border-radius:10px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.card-icon svg{width:22px;height:22px;color:var(--blue)}
.card h3{font-size:1.02rem;font-weight:700;margin-bottom:6px}
.card p{font-size:.9rem;color:var(--text-muted);line-height:1.55}

/* ============ STEPS ============ */
.steps{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:step}
.step{position:relative;padding-left:52px}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1rem}
.step h3{font-size:1rem;font-weight:700;margin-bottom:4px}
.step p{font-size:.88rem;color:var(--text-muted)}

/* ============ FAQ ============ */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.faq-item summary{padding:16px 20px;font-weight:600;font-size:.95rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .15s}
.faq-item summary:hover{background:var(--bg-alt)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:20px;height:20px;color:var(--text-muted);flex-shrink:0;transition:transform .2s}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item .faq-body{padding:0 20px 18px;font-size:.9rem;color:var(--text-muted);line-height:1.65}

/* ============ CTA BANNER ============ */
.cta-banner{background:linear-gradient(135deg,var(--blue) 0%,#1557b0 100%);border-radius:var(--radius);padding:48px 32px;text-align:center;color:#fff}
.cta-banner h2{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:800;margin-bottom:10px}
.cta-banner p{opacity:.92;max-width:520px;margin:0 auto 24px;font-size:.98rem}
.cta-banner .btn-primary{background:#fff;color:var(--blue)}
.cta-banner .btn-primary:hover{background:var(--blue-light)}

/* ============ LEGAL MODAL ============ */
.modal-overlay{position:fixed;inset:0;background:rgba(32,33,36,.6);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:20px;z-index:200}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:var(--radius);max-width:720px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 24px 48px rgba(0,0,0,.3)}
.modal-head{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;z-index:1}
.modal-head h2{font-size:1.15rem;font-weight:700}
.modal-close{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0}
.modal-close:hover{background:var(--bg-alt);color:var(--text)}
.modal-close svg{width:20px;height:20px}
.modal-body{padding:24px;font-size:.9rem;color:var(--text-muted);line-height:1.7}
.modal-body h3{font-size:1rem;font-weight:700;color:var(--text);margin:20px 0 8px}
.modal-body h3:first-child{margin-top:0}
.modal-body p{margin-bottom:12px}
.modal-body ul{margin:0 0 12px 20px}
.modal-body li{margin-bottom:6px}
.modal-body a{word-break:break-word}

/* ============ FOOTER ============ */
.site-footer{background:#202124;color:#e8eaed;padding:48px 0 24px;margin-top:0}
.footer-grid{display:grid;gap:32px;grid-template-columns:1.5fr 1fr 1fr;margin-bottom:32px}
.footer-brand .logo{color:#fff;margin-bottom:12px}
.footer-brand p{font-size:.86rem;color:#9aa0a6;max-width:300px;line-height:1.6}
.footer-col h4{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:12px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col button,.footer-col a{font-size:.86rem;color:#9aa0a6;text-align:left;transition:color .15s}
.footer-col button:hover,.footer-col a:hover{color:#fff;text-decoration:none}
.footer-bottom{border-top:1px solid #3c4043;padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.8rem;color:#9aa0a6}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* ============ UTILITIES ============ */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.text-center{text-align:center}
.mt-24{margin-top:24px}
</style>
</head>
<body>

<!-- ============ HEADER ============ -->
<header class="site-header">
  <div class="container header-inner">
    <a href="#home" class="logo" aria-label="SnippetPreview Home">
      <svg class="logo-icon" viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <rect width="32" height="32" rx="7" fill="#1a73e8"/>
        <circle cx="14" cy="14" r="7" stroke="#fff" stroke-width="2.5"/>
        <line x1="19" y1="19" x2="26" y2="26" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
      </svg>
      <span>SnippetPreview</span>
    </a>
    <button class="menu-toggle" id="menuToggle" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="mainNav">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    </button>
    <nav aria-label="Main navigation">
      <ul class="nav" id="mainNav">
        <li><a href="#home">Home</a></li>
        <li><a href="#tool">Tool</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#how-it-works">How It Works</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<main id="home">

<!-- ============ TOP AD ============ -->
<!-- RESPONSIVE AD CONTAINER (ad-top) -->
<div id="ad-top" style="width:100%; max-width:970px; margin:20px auto; text-align:center;">
  <!-- Yahan poora original advertising network code rahega -->
  Ads Code Here
</div>

<!-- ============ HERO ============ -->
<section class="hero">
  <div class="container">
    <div class="hero-badge">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
      Free ยท Browser-based ยท No sign-up
    </div>
    <h1>See Exactly How Your Page Will Look in Google Search</h1>
    <p>Preview your title tag, meta description, and URL in a realistic Google search snippet. Optimize before you publish โ€” no plugins, no guesswork.</p>
    <div class="hero-cta">
      <a href="#tool" class="btn btn-primary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        Preview My Snippet
      </a>
      <a href="#how-it-works" class="btn btn-secondary">How It Works</a>
    </div>
    <ul class="hero-benefits">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg> Real-time preview</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg> Character limit warnings</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg> 100% private โ€” runs in your browser</li>
    </ul>
  </div>
</section>

<!-- ============ HERO AD ============ -->
<!-- RESPONSIVE AD CONTAINER (ad-hero) -->
<div id="ad-hero" style="width:100%; max-width:970px; margin:20px auto; text-align:center;">
  <!-- Yahan poora original advertising network code rahega -->
  Ads Code Here
</div>

<!-- ============ MAIN TOOL ============ -->
<section class="section" id="tool">
  <div class="container">
    <h2 class="section-title">Google Search Snippet Preview Tool</h2>
    <p class="section-sub">Enter your page title, meta description, and URL to see a live preview of how your page appears in Google search results.</p>

    <div class="tool-card">
      <div class="tool-head">
        <h2>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          Live Snippet Preview
        </h2>
        <button class="btn btn-ghost btn-sm" id="resetBtn" type="button">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
          Reset
        </button>
      </div>
      <div class="tool-body">
        <div class="field">
          <label for="pageUrl">Page URL <span class="hint">(the full address of your page)</span></label>
          <input type="text" id="pageUrl" placeholder="https://example.com/my-page" autocomplete="url" spellcheck="false">
        </div>
        <div class="field">
          <label for="pageTitle">Page Title <span class="hint">(the clickable headline in search results)</span></label>
          <input type="text" id="pageTitle" placeholder="Your Page Title โ€” Brand Name" maxlength="120" autocomplete="off" spellcheck="false">
          <div class="char-count">
            <span id="titleCount">0 / 60 characters (recommended)</span>
            <span id="titleStatus" class="ok">Good</span>
          </div>
          <div class="bar-wrap"><div class="bar-fill" id="titleBar"></div></div>
        </div>
        <div class="field">
          <label for="metaDesc">Meta Description <span class="hint">(the summary text shown below the title)</span></label>
          <textarea id="metaDesc" placeholder="Write a compelling description of your page (recommended: 120โ€“160 characters)." maxlength="320" spellcheck="false"></textarea>
          <div class="char-count">
            <span id="descCount">0 / 160 characters (recommended)</span>
            <span id="descStatus" class="ok">Good</span>
          </div>
          <div class="bar-wrap"><div class="bar-fill" id="descBar"></div></div>
        </div>
      </div>

      <div class="preview-wrap">
        <div class="preview-label">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          Google Search Preview
        </div>
        <div class="serp-preview" aria-live="polite">
          <div class="serp-favicon-row">
            <div class="serp-favicon" aria-hidden="true">SP</div>
            <div class="serp-site" id="previewSite">example.com</div>
          </div>
          <div class="serp-url" id="previewUrl">
            <span class="breadcrumb">https://example.com</span>
          </div>
          <div class="serp-title" id="previewTitle">Your Page Title โ€” Brand Name</div>
          <div class="serp-desc" id="previewDesc">Your meta description will appear here. Start typing above to see a live preview of how your page will appear in Google search results.</div>
        </div>
        <div class="text-center mt-24">
          <button class="btn btn-primary" id="copyBtn" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
            Copy Snippet
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ TOOL BOTTOM AD ============ -->
<!-- RESPONSIVE AD CONTAINER (ad-tool-bottom) -->
<div id="ad-tool-bottom" style="width:100%; max-width:970px; margin:20px auto; text-align:center;">
  <!-- Yahan poora original advertising network code rahega -->
  Ads Code Here
</div>

<!-- ============ FEATURES ============ -->
<section class="section section-alt" id="features">
  <div class="container">
    <h2 class="section-title">Why Use This Snippet Preview Tool?</h2>
    <p class="section-sub">Everything you need to craft search results that get clicked โ€” right in your browser.</p>
    <div class="grid">
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
        <h3>Real-Time Updates</h3>
        <p>The preview updates instantly as you type. No page reloads, no delays โ€” see the exact impact of every character.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
        <h3>Length Warnings</h3>
        <p>Google truncates long titles and descriptions. Color-coded character counters and progress bars warn you before you overrun.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
        <h3>100% Private</h3>
        <p>All processing happens locally in your browser. Your titles, descriptions, and URLs are never sent to any server.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></div>
        <h3>Copy to Clipboard</h3>
        <p>One click copies the full snippet โ€” title, description, and URL โ€” so you can paste it straight into your CMS or notes.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div>
        <h3>Responsive Layout</h3>
        <p>Works beautifully on desktop, tablet, and mobile. The preview adapts to your screen just like real search results do.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
        <h3>No Installation</h3>
        <p>No browser extension, no sign-up, no account. Just open the page and start optimizing your SEO snippets immediately.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ HOW IT WORKS ============ -->
<section class="section" id="how-it-works">
  <div class="container">
    <h2 class="section-title">How It Works</h2>
    <p class="section-sub">Three simple steps to a better-looking search result.</p>
    <div class="steps">
      <div class="step">
        <h3>Enter Your Page Details</h3>
        <p>Type or paste your page URL, title tag, and meta description into the fields above. The tool accepts any text โ€” real or draft.</p>
      </div>
      <div class="step">
        <h3>Watch the Live Preview</h3>
        <p>As you type, the Google-style snippet updates in real time. Color-coded counters show when you exceed recommended length limits.</p>
      </div>
      <div class="step">
        <h3>Copy and Publish</h3>
        <p>Happy with the result? Click "Copy Snippet" to grab your title and description, then paste them into your website's SEO settings.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ CONTENT AD ============ -->
<!-- RESPONSIVE AD CONTAINER (ad-content) -->
<div id="ad-content" style="width:100%; max-width:970px; margin:20px auto; text-align:center;">
  <!-- Yahan poora original advertising network code rahega -->
  Ads Code Here
</div>

<!-- ============ BENEFITS / USE CASES ============ -->
<section class="section section-alt" id="benefits">
  <div class="container">
    <h2 class="section-title">Practical Benefits &amp; Use Cases</h2>
    <p class="section-sub">Who gets value from previewing search snippets?</p>
    <div class="grid">
      <div class="card">
        <h3>SEO Specialists</h3>
        <p>Validate title tags and meta descriptions across dozens of pages before pushing them live. Catch truncation issues early.</p>
      </div>
      <div class="card">
        <h3>Content Writers</h3>
        <p>See how your headline and summary will actually read in search results. Fine-tune wording for higher click-through rates.</p>
      </div>
      <div class="card">
        <h3>Web Developers</h3>
        <p>Quickly verify that your CMS or framework is outputting the right metadata. No need to deploy and wait for Google to crawl.</p>
      </div>
      <div class="card">
        <h3>Business Owners</h3>
        <p>Make sure your homepage and product pages present well in search. Improve first impressions without hiring an agency.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ LIMITATIONS ============ -->
<section class="section" id="limitations">
  <div class="container">
    <h2 class="section-title">Important Limitations</h2>
    <p class="section-sub">This tool shows an approximation โ€” here's what to keep in mind.</p>
    <div class="grid">
      <div class="card">
        <h3>Google Is Dynamic</h3>
        <p>Google may rewrite titles and descriptions based on search queries. The snippet you see here is a best-effort approximation of the default appearance.</p>
      </div>
      <div class="card">
        <h3>Character Limits Vary</h3>
        <p>Recommended lengths (60 for titles, 160 for descriptions) are guidelines, not hard rules. Google truncates based on pixel width, not raw character count.</p>
      </div>
      <div class="card">
        <h3>No Live Crawling</h3>
        <p>This tool does not fetch your live page or check what Google has indexed. It previews what you manually type in.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ FAQ ============ -->
<section class="section section-alt" id="faq">
  <div class="container">
    <h2 class="section-title">Frequently Asked Questions</h2>
    <p class="section-sub">Quick answers about the snippet preview tool.</p>
    <div class="faq-list">
      <details class="faq-item">
        <summary>Is this tool really free?<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
        <div class="faq-body">Yes. The tool is completely free to use. There is no sign-up, no account, and no usage limit. You can use it as often as you like.</div>
      </details>
      <details class="faq-item">
        <summary>Is my data sent to a server?<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
        <div class="faq-body">No. All processing happens locally in your browser using JavaScript. Your titles, descriptions, and URLs never leave your device. If the site owner adds analytics or advertising code, that is a separate service with its own privacy policy.</div>
      </details>
      <details class="faq-item">
        <summary>How accurate is the preview?<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
        <div class="faq-body">The preview closely mimics Google's desktop search result layout, including the favicon circle, breadcrumb URL, blue title, and description text. However, Google's actual display depends on many factors โ€” including device, language, and whether Google chooses to rewrite your snippet โ€” so treat it as a helpful approximation, not a guarantee.</div>
      </details>
      <details class="faq-item">
        <summary>What are the recommended character limits?<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
        <div class="faq-body">Google typically truncates title tags around 60 characters and meta descriptions around 160 characters on desktop. These are not exact rules โ€” Google uses pixel width โ€” but staying within these ranges minimizes the chance of cutoff.</div>
      </details>
      <details class="faq-item">
        <summary>Does the tool generate the snippet automatically from a URL?<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
        <div class="faq-body">No. This tool does not fetch web pages or call external APIs. You manually enter the title and description you want to preview. This keeps the tool fast, private, and free of server dependencies.</div>
      </details>
      <details class="faq-item">
        <summary>Can I use this on mobile?<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
        <div class="faq-body">Yes. The tool is fully responsive and works on phones and tablets. The layout adapts to your screen size, and the preview remains readable on narrow displays.</div>
      </details>
    </div>
  </div>
</section>

<!-- ============ FINAL CTA ============ -->
<section class="section" id="get-started">
  <div class="container">
    <div class="cta-banner">
      <h2>Ready to Improve Your Search Results?</h2>
      <p>Scroll up and start typing โ€” the preview updates instantly. No sign-up, no fees, no data collection.</p>
      <a href="#tool" class="btn btn-primary">Preview My Snippet Now</a>
    </div>
  </div>
</section>

<!-- ============ FOOTER AD ============ -->
<!-- RESPONSIVE AD CONTAINER (ad-footer) -->
<div id="ad-footer" style="width:100%; max-width:970px; margin:20px auto; text-align:center;">
  <!-- Yahan poora original advertising network code rahega -->
  Ads Code Here
</div>

</main>

<!-- ============ FOOTER ============ -->
<footer class="site-footer" id="contact">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <a href="#home" class="logo" aria-label="SnippetPreview Home">
          <svg class="logo-icon" viewBox="0 0 32 32" fill="none" aria-hidden="true">
            <rect width="32" height="32" rx="7" fill="#1a73e8"/>
            <circle cx="14" cy="14" r="7" stroke="#fff" stroke-width="2.5"/>
            <line x1="19" y1="19" x2="26" y2="26" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
          </svg>
          <span>SnippetPreview</span>
        </a>
        <p>A free, private, browser-based tool for previewing Google search snippets. Optimize your title tags and meta descriptions before you publish.</p>
      </div>
      <div class="footer-col">
        <h4>Quick Links</h4>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#tool">Snippet Preview Tool</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#how-it-works">How It Works</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Legal &amp; Info</h4>
        <ul>
          <li><button type="button" data-modal="privacy">Privacy Policy</button></li>
          <li><button type="button" data-modal="disclaimer">Disclaimer</button></li>
          <li><button type="button" data-modal="about">About Us</button></li>
          <li><button type="button" data-modal="contact">Contact Us</button></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>&copy; <span id="year">2025</span> SnippetPreview. All rights reserved.</span>
      <span>Made for SEOs, writers, and developers.</span>
    </div>
  </div>
</footer>

<!-- ============ MODAL ============ -->
<div class="modal-overlay" id="modalOverlay" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div class="modal">
    <div class="modal-head">
      <h2 id="modalTitle">Privacy Policy</h2>
      <button class="modal-close" id="modalClose" aria-label="Close dialog">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
    <div class="modal-body" id="modalBody"><!-- injected --></div>
  </div>
</div>

<!-- ============ TOAST ============ -->
<div class="toast" id="toast" role="status" aria-live="polite"></div>

<script>
/* ============================================================
   SITE CONFIGURATION โ€” Replace these demo values before publishing
   ============================================================ */
const SITE_CONFIG = {
  siteName: "SnippetPreview",
  contactEmail: "contact@example.com",   // <-- replace with your real email
  phone: "+91-0000000000",               // <-- replace with your real phone
  address: "123 Example Street, New Delhi, India", // <-- replace
  domain: "https://example.com"          // <-- replace with your live domain
};

(function () {
  "use strict";

  /* ---------- Helpers ---------- */
  const $ = (id) => document.getElementById(id);
  const toastEl = $("toast");
  let toastTimer;
  function showToast(msg, isError) {
    clearTimeout(toastTimer);
    toastEl.textContent = msg;
    toastEl.style.background = isError ? "#d93025" : "#202124";
    toastEl.classList.add("show");
    toastTimer = setTimeout(() => toastEl.classList.remove("show"), 2600);
  }

  /* ---------- Mobile menu ---------- */
  const menuToggle = $("menuToggle");
  const mainNav = $("mainNav");
  menuToggle.addEventListener("click", () => {
    const open = mainNav.classList.toggle("open");
    menuToggle.setAttribute("aria-expanded", String(open));
  });
  mainNav.querySelectorAll("a").forEach((a) => {
    a.addEventListener("click", () => {
      mainNav.classList.remove("open");
      menuToggle.setAttribute("aria-expanded", "false");
    });
  });

  /* ---------- Snippet tool ---------- */
  const pageUrl = $("pageUrl");
  const pageTitle = $("pageTitle");
  const metaDesc = $("metaDesc");
  const previewUrl = $("previewUrl");
  const previewTitle = $("previewTitle");
  const previewDesc = $("previewDesc");
  const previewSite = $("previewSite");
  const titleCount = $("titleCount");
  const titleStatus = $("titleStatus");
  const titleBar = $("titleBar");
  const descCount = $("descCount");
  const descStatus = $("descStatus");
  const descBar = $("descBar");

  const DEFAULTS = { url: "", title: "", desc: "" };

  function normalizeUrl(raw) {
    const v = raw.trim();
    if (!v) return { display: "example.com", site: "example.com", full: "https://example.com" };
    let full = v;
    if (!/^https?:\/\//i.test(full)) full = "https://" + full;
    let host = "example.com";
    try {
      const u = new URL(full);
      host = u.hostname.replace(/^www\./, "");
      const path = u.pathname.replace(/\/$/, "");
      // Build a Google-style breadcrumb: host โ€บ path segments
      const segs = path.split("/").filter(Boolean).map(decodeURIComponent);
      let display = host;
      if (segs.length) display += " โ€บ " + segs.join(" โ€บ ");
      return { display, site: host, full: u.href };
    } catch (e) {
      return { display: v, site: v, full: v };
    }
  }

  function updateTitleMeter() {
    const len = pageTitle.value.length;
    const recommended = 60;
    const max = 120;
    const pct = Math.min(100, (len / max) * 100);
    titleBar.style.width = pct + "%";
    titleCount.textContent = len + " / " + recommended + " characters (recommended)";
    if (len === 0) {
      titleStatus.textContent = "Empty";
      titleStatus.className = "over";
      titleBar.style.background = "#dadce0";
    } else if (len <= recommended) {
      titleStatus.textContent = "Good";
      titleStatus.className = "ok";
      titleBar.style.background = "#137333";
    } else if (len <= max) {
      titleStatus.textContent = "Over recommended";
      titleStatus.className = "over";
      titleBar.style.background = "#f9ab00";
    } else {
      titleStatus.textContent = "Too long";
      titleStatus.className = "over";
      titleBar.style.background = "#d93025";
    }
  }

  function updateDescMeter() {
    const len = metaDesc.value.length;
    const recommended = 160;
    const max = 320;
    const pct = Math.min(100, (len / max) * 100);
    descBar.style.width = pct + "%";
    descCount.textContent = len + " / " + recommended + " characters (recommended)";
    if (len === 0) {
      descStatus.textContent = "Empty";
      descStatus.className = "over";
      descBar.style.background = "#dadce0";
    } else if (len <= recommended) {
      descStatus.textContent = "Good";
      descStatus.className = "ok";
      descBar.style.background = "#137333";
    } else if (len <= max) {
      descStatus.textContent = "Over recommended";
      descStatus.className = "over";
      descBar.style.background = "#f9ab00";
    } else {
      descStatus.textContent = "Too long";
      descStatus.className = "over";
      descBar.style.background = "#d93025";
    }
  }

  function render() {
    const info = normalizeUrl(pageUrl.value);
    previewSite.textContent = info.site || "example.com";

    // URL breadcrumb
    let display = info.display;
    if (display.length > 90) display = display.slice(0, 87) + "โ€ฆ";
    previewUrl.textContent = "";
    const span = document.createElement("span");
    span.className = "breadcrumb";
    span.textContent = display || "https://example.com";
    previewUrl.appendChild(span);

    // Title
    const t = pageTitle.value.trim();
    previewTitle.textContent = t || "Your Page Title โ€” Brand Name";

    // Description
    const d = metaDesc.value.trim();
    previewDesc.textContent = d ||
      "Your meta description will appear here. Start typing above to see a live preview of how your page will appear in Google search results.";

    updateTitleMeter();
    updateDescMeter();
  }

  [pageUrl, pageTitle, metaDesc].forEach((el) => {
    el.addEventListener("input", render);
  });

  /* ---------- Reset ---------- */
  $("resetBtn").addEventListener("click", () => {
    pageUrl.value = DEFAULTS.url;
    pageTitle.value = DEFAULTS.title;
    metaDesc.value = DEFAULTS.desc;
    render();
    showToast("Form reset to defaults.");
    pageUrl.focus();
  });

  /* ---------- Copy snippet ---------- */
  $("copyBtn").addEventListener("click", async () => {
    const t = pageTitle.value.trim();
    const d = metaDesc.value.trim();
    const u = pageUrl.value.trim();
    if (!t && !d && !u) {
      showToast("Nothing to copy โ€” fill in at least one field.", true);
      return;
    }
    const text = [
      "URL: " + (u || "(empty)"),
      "Title: " + (t || "(empty)"),
      "Description: " + (d || "(empty)")
    ].join("\n");

    try {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        await navigator.clipboard.writeText(text);
      } else {
        // Fallback for older browsers / non-secure contexts
        const ta = document.createElement("textarea");
        ta.value = text;
        ta.style.position = "fixed";
        ta.style.opacity = "0";
        document.body.appendChild(ta);
        ta.select();
        document.execCommand("copy");
        document.body.removeChild(ta);
      }
      showToast("Snippet copied to clipboard!");
    } catch (e) {
      showToast("Copy failed โ€” please select and copy manually.", true);
    }
  });

  /* ---------- Initial render ---------- */
  render();

  /* ---------- Footer year ---------- */
  $("year").textContent = new Date().getFullYear();

  /* ---------- Legal modals ---------- */
  const overlay = $("modalOverlay");
  const modalTitle = $("modalTitle");
  const modalBody = $("modalBody");
  let lastFocus = null;

  const LEGAL = {
    privacy: {
      title: "Privacy Policy",
      html: `
        <p><strong>Last updated:</strong> ${new Date().getFullYear()}</p>
        <p>${SITE_CONFIG.siteName} ("we", "us") operates this website. This Privacy Policy explains what information is handled when you use the Google Search Snippet Preview tool.</p>
        <h3>1. Information You Enter</h3>
        <p>The URL, page title, and meta description you type into the tool are processed <strong>entirely in your browser</strong> using JavaScript. They are <strong>not transmitted to, stored on, or seen by</strong> any server operated by us. Closing or refreshing the page clears them.</p>
        <h3>2. Cookies and Local Storage</h3>
        <p>The core tool does not set cookies and does not use localStorage or sessionStorage. If the site owner later adds analytics or advertising scripts, those third parties may set their own cookies โ€” see the section below.</p>
        <h3>3. Analytics and Advertising</h3>
        <p>If advertising code (for example, Google AdSense) or analytics code is added to this site by its owner, those services may collect information such as your IP address, device type, browser, and browsing behaviour, subject to their own privacy policies. As shipped, this page contains only non-functional advertisement <em>placeholders</em> and loads no third-party scripts.</p>
        <h3>4. Contact Information</h3>
        <p>If you contact us by email, we receive whatever information you choose to include in your message. We use it only to respond to your enquiry.</p>
        <h3>5. Children</h3>
        <p>This tool is not directed at children under 13, and we do not knowingly collect personal information from them.</p>
        <h3>6. Your Choices</h3>
        <p>Because we do not store your tool input, there is nothing to delete. You can block third-party scripts using your browser settings or an ad blocker.</p>
        <h3>7. Changes</h3>
        <p>We may update this policy from time to time. The "Last updated" date will reflect the most recent revision.</p>
        <h3>8. Contact</h3>
        <p>Questions? Email <a href="mailto:${SITE_CONFIG.contactEmail}">${SITE_CONFIG.contactEmail}</a>.</p>
      `
    },
    disclaimer: {
      title: "Disclaimer",
      html: `
        <p>The information and tools provided on ${SITE_CONFIG.siteName} are for general informational and educational purposes only.</p>
        <h3>No Guarantee of Accuracy</h3>
        <p>The Google Search Snippet Preview is an <strong>approximation</strong> of how a search result may appear. Google's actual display depends on many dynamic factors โ€” including query context, device, language, personalisation, and whether Google chooses to rewrite your snippet. We make no guarantee that your real search result will match the preview exactly.</p>
        <h3>No SEO Guarantee</h3>
        <p>Using this tool does not guarantee improved rankings, click-through rates, or search traffic. SEO outcomes depend on many factors outside our control.</p>
        <h3>External Links</h3>
        <p>This website may contain links to external websites. We are not responsible for the content, accuracy, or privacy practices of those sites.</p>
        <h3>Limitation of Liability</h3>
        <p>To the maximum extent permitted by law, ${SITE_CONFIG.siteName} shall not be liable for any loss or damage arising from the use of, or reliance on, this website or its tools.</p>
        <h3>Contact</h3>
        <p>If you have questions about this disclaimer, email <a href="mailto:${SITE_CONFIG.contactEmail}">${SITE_CONFIG.contactEmail}</a>.</p>
      `
    },
    about: {
      title: "About Us",
      html: `
        <p>${SITE_CONFIG.siteName} is a small, independent web project focused on one thing: helping people see how their pages appear in Google search results before they publish.</p>
        <h3>What We Offer</h3>
        <p>A single, focused tool โ€” the Google Search Snippet Preview โ€” that runs entirely in your browser. No sign-up, no account, no server round-trip. You type a title, description, and URL; you see a realistic search-result preview; you copy what you need.</p>
        <h3>Why We Built It</h3>
        <p>Many snippet preview tools are bloated with ads, require accounts, or send your data to a server. We wanted something fast, private, and free that just works. That's what this site is.</p>
        <h3>What We Are Not</h3>
        <p>We are not affiliated with Google. We are not an SEO agency. We do not offer consulting services, and we do not guarantee any specific search outcome.</p>
        <h3>Get in Touch</h3>
        <p>We welcome feedback and bug reports at <a href="mailto:${SITE_CONFIG.contactEmail}">${SITE_CONFIG.contactEmail}</a>.</p>
      `
    },
    contact: {
      title: "Contact Us",
      html: `
        <p>Have a question, suggestion, or bug report? We'd love to hear from you.</p>
        <h3>Email</h3>
        <p><a href="mailto:${SITE_CONFIG.contactEmail}">${SITE_CONFIG.contactEmail}</a></p>
        <h3>Phone</h3>
        <p>${SITE_CONFIG.phone}</p>
        <h3>Address</h3>
        <p>${SITE_CONFIG.address}</p>
        <h3>Response Time</h3>
        <p>We aim to reply to emails within 2โ€“3 business days. This is a small independent project, so we appreciate your patience.</p>
        <h3>Note</h3>
        <p>This site does not use a contact form because we do not operate a backend that could deliver messages. Please email us directly using the address above โ€” it is the most reliable way to reach us. The contact details shown here are <strong>demo placeholders</strong> that the site owner should replace before publishing.</p>
      `
    }
  };

  function openModal(key) {
    const data = LEGAL[key];
    if (!data) return;
    modalTitle.textContent = data.title;
    modalBody.innerHTML = data.html;
    overlay.classList.add("open");
    lastFocus = document.activeElement;
    $("modalClose").focus();
    document.body.style.overflow = "hidden";
  }

  function closeModal() {
    overlay.classList.remove("open");
    document.body.style.overflow = "";
    if (lastFocus && typeof lastFocus.focus === "function") lastFocus.focus();
  }

  document.querySelectorAll("[data-modal]").forEach((btn) => {
    btn.addEventListener("click", () => openModal(btn.getAttribute("data-modal")));
  });
  $("modalClose").addEventListener("click", closeModal);
  overlay.addEventListener("click", (e) => {
    if (e.target === overlay) closeModal();
  });
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && overlay.classList.contains("open")) closeModal();
  });

  /* ---------- Smooth-scroll for hash links (header height offset) ---------- */
  document.querySelectorAll('a[href^="#"]').forEach((a) => {
    a.addEventListener("click", (e) => {
      const id = a.getAttribute("href").slice(1);
      if (!id) return;
      const target = document.getElementById(id);
      if (!target) return;
      e.preventDefault();
      const top = target.getBoundingClientRect().top + window.scrollY - 72;
      window.scrollTo({ top, behavior: "smooth" });
      history.replaceState(null, "", "#" + id);
    });
  });
})();
</script>
</body>
</html>
โฌ‡๏ธ Download Now