Files
OspowWebsite/templates/base.html
2026-03-16 16:11:19 +01:00

137 lines
6.9 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ── SEO : titre & description ─────────────────────────────────────────── -->
<title>{% block title %}Ospow — Cloud souverain, Vidéosurveillance & Open-Source{% endblock %}</title>
<meta name="description" content="{% block meta_description %}Ospow conçoit et déploie des solutions open-source souveraines : vidéosurveillance IP locale, cloud personnel auto-hébergé, déploiement de logiciels libres pour particuliers et entreprises partout en France.{% endblock %}" />
<link rel="canonical" href="{{ request.host_url.rstrip('/') }}{{ request.path }}" />
<!-- ── Open Graph (Facebook, LinkedIn, WhatsApp…) ────────────────────────── -->
<meta property="og:site_name" content="Ospow" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:type" content="{% block og_type %}website{% endblock %}" />
<meta property="og:title" content="{{ self.title() }}" />
<meta property="og:description" content="{{ self.meta_description() }}" />
<meta property="og:url" content="{{ request.url }}" />
<!-- ── Twitter Card ──────────────────────────────────────────────────────── -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="{{ self.title() }}" />
<meta name="twitter:description" content="{{ self.meta_description() }}" />
<!-- ── Feuille de style ──────────────────────────────────────────────────── -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
<!-- ── JSON-LD : Organisation (présent sur toutes les pages) ─────────────── -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Ospow",
"url": "{{ request.host_url.rstrip('/') }}",
"description": "Collectif d'auto-entrepreneurs spécialisés dans les solutions open-source souveraines : vidéosurveillance IP, cloud personnel auto-hébergé et déploiement de logiciels libres.",
"areaServed": "France",
"contactPoint": {
"@type": "ContactPoint",
"email": "contact@ospow.fr",
"contactType": "customer service",
"availableLanguage": "French"
}
}
</script>
<!-- ── JSON-LD spécifique à la page (breadcrumb, service, person…) ────────── -->
{% block json_ld %}{% endblock %}
</head>
<body>
<!-- ═══════════════════════════════ HEADER / NAV ═══════════════════════════ -->
<header class="site-header">
<div class="container header-inner">
<!-- Logo -->
<a href="{{ url_for('index') }}" class="logo" aria-label="Ospow — Accueil">
<span class="logo-icon"></span>
<span class="logo-text">Ospow</span>
</a>
<!-- Burger (mobile) -->
<button class="nav-toggle" aria-label="Ouvrir le menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<!-- Navigation principale -->
<nav class="main-nav" id="main-nav" aria-label="Navigation principale">
<ul>
<li><a href="{{ url_for('index') }}" {% if request.endpoint == 'index' %}class="active" aria-current="page"{% endif %}>Accueil</a></li>
<li><a href="{{ url_for('surveillance') }}" {% if request.endpoint == 'surveillance' %}class="active" aria-current="page"{% endif %}>Vidéosurveillance</a></li>
<li><a href="{{ url_for('cloud') }}" {% if request.endpoint == 'cloud' %}class="active" aria-current="page"{% endif %}>Cloud souverain</a></li>
<li><a href="{{ url_for('opensource') }}" {% if request.endpoint == 'opensource' %}class="active" aria-current="page"{% endif %}>Open-Source</a></li>
<li><a href="{{ url_for('equipe') }}" {% if request.endpoint == 'equipe' %}class="active" aria-current="page"{% endif %}>L'équipe</a></li>
<li><a href="{{ url_for('contact') }}" {% if request.endpoint == 'contact' %}class="active" aria-current="page"{% endif %}>Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- ═══════════════════════════════ BANNIÈRE (optionnelle) ════════════════ -->
{% block banner %}{% endblock %}
<!-- ═══════════════════════════════ CONTENU PRINCIPAL ════════════════════ -->
<main id="main-content">
<!-- Messages flash (succès / erreur formulaire) -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="container flash-messages" role="alert">
{% for category, message in messages %}
<div class="flash flash--{{ category }}">{{ message }}</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
<!-- ═══════════════════════════════ FOOTER ════════════════════════════════ -->
<footer class="site-footer" aria-label="Pied de page">
<div class="container footer-inner">
<div class="footer-brand">
<span class="logo-icon" aria-hidden="true"></span>
<span class="logo-text">Ospow</span>
<p>Solutions numériques souveraines et open-source.</p>
</div>
<nav class="footer-nav" aria-label="Services">
<h3>Services</h3>
<ul>
<li><a href="{{ url_for('surveillance') }}">Vidéosurveillance</a></li>
<li><a href="{{ url_for('cloud') }}">Cloud souverain</a></li>
<li><a href="{{ url_for('opensource') }}">Déploiement Open-Source</a></li>
<li><a href="{{ url_for('equipe') }}">L'équipe</a></li>
</ul>
</nav>
<div class="footer-contact">
<h3>Contact</h3>
<p><a href="{{ url_for('contact') }}">Formulaire de contact</a></p>
<p><a href="mailto:contact@ospow.fr">contact@ospow.fr</a></p>
</div>
</div>
<div class="footer-bottom">
<p>&copy; {{ current_year }} Ospow — Tous droits réservés</p>
</div>
</footer>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>