Initial commit: Complete multilingual website with translation system
This commit is contained in:
192
templates/base.html
Normal file
192
templates/base.html
Normal file
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ get_current_language() }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<title>{% block title %}{{ t('Kobelly Web Solutions') }}{% endblock %}</title>
|
||||
<meta name="description" content="{% block description %}{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}{% endblock %}">
|
||||
<meta name="keywords" content="{% block keywords %}{{ t('website design, web development, small business, Belgium, Brussels, professional websites, affordable web design') }}{% endblock %}">
|
||||
<meta name="author" content="Kobe Amerijckx">
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<!-- Open Graph Meta Tags -->
|
||||
<meta property="og:title" content="{% block og_title %}{{ t('Kobelly Web Solutions') }}{% endblock %}">
|
||||
<meta property="og:description" content="{% block og_description %}{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}{% endblock %}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="{{ request.url }}">
|
||||
<meta property="og:image" content="{{ url_for('static', filename='images/og-image.jpg', _external=True) }}">
|
||||
<meta property="og:site_name" content="Kobelly Web Solutions">
|
||||
<meta property="og:locale" content="{{ get_current_language() }}">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{% block twitter_title %}{{ t('Kobelly Web Solutions') }}{% endblock %}">
|
||||
<meta name="twitter:description" content="{% block twitter_description %}{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}{% endblock %}">
|
||||
<meta name="twitter:image" content="{{ url_for('static', filename='images/og-image.jpg', _external=True) }}">
|
||||
<meta name="twitter:creator" content="@kobelly">
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="{{ request.url }}">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
|
||||
|
||||
<!-- Structured Data (JSON-LD) -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "Kobelly Web Solutions",
|
||||
"description": "{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}",
|
||||
"url": "{{ request.url_root }}",
|
||||
"telephone": "+32 486 21 07 07",
|
||||
"email": "info@kobelly.com",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "Blijkheerstraat 92",
|
||||
"addressLocality": "Pajottegem",
|
||||
"addressCountry": "BE",
|
||||
"addressRegion": "Vlaams-Brabant",
|
||||
"postalCode": "1755"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": "50.8503",
|
||||
"longitude": "4.3517"
|
||||
},
|
||||
"openingHours": "Mo-Fr 09:00-18:00",
|
||||
"priceRange": "€€",
|
||||
"currenciesAccepted": "EUR",
|
||||
"paymentAccepted": "Cash, Credit Card, Bank Transfer",
|
||||
"areaServed": ["Belgium", "Europe"],
|
||||
"serviceType": ["Website Design", "Web Development", "E-commerce Solutions"],
|
||||
"founder": {
|
||||
"@type": "Person",
|
||||
"name": "Kobe Amerijckx",
|
||||
"jobTitle": "Web Developer",
|
||||
"description": "Professional web developer specializing in small business websites"
|
||||
},
|
||||
"sameAs": [
|
||||
"https://www.linkedin.com/company/kobelly",
|
||||
"https://www.facebook.com/kobelly",
|
||||
"https://twitter.com/kobelly"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
{# Import components macros #}
|
||||
{% import 'components/cta_section.html' as components %}
|
||||
{% import 'components/testimonials_section.html' as testimonials %}
|
||||
{% import 'components/hero_section.html' as hero %}
|
||||
{% import 'components/stats_section.html' as stats %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ url_for('index') }}">
|
||||
<i class="fas fa-code me-2"></i>{{ t('Kobelly') }}
|
||||
</a>
|
||||
<div class="d-flex ms-auto align-items-center flex-row">
|
||||
<!-- Dark/Light Mode Toggle: Always visible in navbar -->
|
||||
<button class="btn-toggle-dark d-lg-none me-2" id="theme-toggle" title="Toggle light/dark mode">
|
||||
<i class="fas fa-moon" id="theme-icon"></i>
|
||||
</button>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('index') }}">{{ t('Home') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('services') }}">{{ t('Services') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('about') }}">{{ t('About') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('portfolio') }}">{{ t('Portfolio') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('contact') }}">{{ t('Contact') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Language Selector -->
|
||||
<div class="language-selector me-2">
|
||||
<button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
<i class="fas fa-globe me-1"></i>
|
||||
{% if get_current_language() == 'en' %}English
|
||||
{% elif get_current_language() == 'de' %}Deutsch
|
||||
{% elif get_current_language() == 'fr' %}Français
|
||||
{% elif get_current_language() == 'nl' %}Nederlands
|
||||
{% else %}🇬🇧 English{% endif %}
|
||||
</button>
|
||||
<ul class="dropdown-menu language-dropdown">
|
||||
<li><a class="dropdown-item" href="{{ url_for('set_language_route', language='en') }}">🇬🇧 English</a></li>
|
||||
<li><a class="dropdown-item" href="{{ url_for('set_language_route', language='nl') }}">🇳🇱 Nederlands</a></li>
|
||||
<li><a class="dropdown-item" href="{{ url_for('set_language_route', language='fr') }}">🇫🇷 Français</a></li>
|
||||
<li><a class="dropdown-item" href="{{ url_for('set_language_route', language='de') }}">🇩🇪 Deutsch</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Dark/Light Mode Toggle: visible on desktop only -->
|
||||
<div class="d-none d-lg-block">
|
||||
<button class="btn-toggle-dark ms-2" id="theme-toggle-desktop" title="Toggle light/dark mode">
|
||||
<i class="fas fa-moon" id="theme-icon-desktop"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h5>{{ t('Kobelly Web Solutions') }}</h5>
|
||||
<p>{{ t('Creating professional websites for small businesses and entrepreneurs.') }}</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5>{{ t('Services') }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>{{ t('Website Design') }}</li>
|
||||
<li>{{ t('E-commerce Solutions') }}</li>
|
||||
<li>{{ t('Maintenance & Support') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5>{{ t('Contact') }}</h5>
|
||||
<p>
|
||||
<i class="fas fa-envelope me-2"></i><a href="mailto:info@kobelly.com" class="text-decoration-none">{{ t('info@kobelly.com') }}</a><br>
|
||||
<i class="fas fa-phone me-2"></i><a href="tel:+32486210707" class="text-decoration-none">{{ t('+32 486 21 07 07') }}</a><br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="text-center">
|
||||
<p>© {{ current_year }} {{ t('Kobelly Web Solutions. All rights reserved.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user