06/18 Phase 7

app/templates/base.html

@@ -4,6 +4,16 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}Classifieds{% endblock %}</title>
+  {% block meta_description %}<meta name="description" content="Classifieds — buy, sell, find jobs and services in your local Vietnamese and Hispanic community across the US.">{% endblock %}
+  {# Open Graph #}
+  <meta property="og:site_name" content="Classifieds">
+  <meta property="og:title" content="{% block og_title %}Classifieds{% endblock %}">
+  <meta property="og:description" content="{% block og_description %}Buy, sell, find jobs and services in your local community.{% endblock %}">
+  <meta property="og:type" content="{% block og_type %}website{% endblock %}">
+  {% block og_image %}{% endblock %}
+  {% block og_url %}<meta property="og:url" content="{{ request.url }}">{% endblock %}
+  {# Canonical #}
+  <link rel="canonical" href="{{ request.base_url }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
   {% block head %}{% endblock %}
 </head>
@@ -12,6 +22,7 @@
     {% set slot = "header" %}{% include "ads/_slot.html" %}
     <div class="wrap">
       <a class="brand" href="{{ url_for('main.index') }}">Classifieds</a>
+      <button class="nav-toggle" aria-label="{{ _('Menu') }}" onclick="document.querySelector('.nav').classList.toggle('open')">&#9776;</button>
       <nav class="nav">
         <a href="{{ url_for('listings.browse') }}">{{ _('Browse') }}</a>
         <a href="{{ url_for('payments.pricing') }}">{{ _('Pricing') }}</a>
@@ -60,5 +71,19 @@
     {% set slot = "footer" %}{% include "ads/_slot.html" %}
     <div class="wrap">© {{ 2025 }} Classifieds · <a href="{{ url_for('ads.sponsor_directory') }}">{{ _('Sponsors') }}</a></div>
   </footer>
+  {% block scripts %}{% endblock %}
+  <script>
+    // Auto-dismiss flash toasts after 5 s
+    document.querySelectorAll('.flash').forEach(function(el) {
+      setTimeout(function(){ el.style.opacity='0'; setTimeout(function(){ el.remove(); }, 400); }, 5000);
+      el.style.transition = 'opacity .4s';
+    });
+    // Close mobile nav on link click
+    document.querySelectorAll('.nav a').forEach(function(a) {
+      a.addEventListener('click', function() {
+        document.querySelector('.nav').classList.remove('open');
+      });
+    });
+  </script>
 </body>
 </html>