<!DOCTYPE html>
<!-- SPDX-License-Identifier: MIT OR Apache-2.0 -->
<!-- Copyright (c) 2025 Pierre Fitness Intelligence -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<meta name="referrer" content="no-referrer">
<title>Connection Failed - Pierre</title>
<style>
/* Pierre Design System - BRAND.md compliant */
:root {
--pierre-violet: #7C3AED;
--pierre-cyan: #06B6D4;
--pierre-activity: #10B981;
--pierre-activity-dark: #059669;
--pierre-nutrition: #F59E0B;
--pierre-nutrition-dark: #D97706;
--pierre-recovery: #6366F1;
--pierre-recovery-dark: #4F46E5;
--pierre-gray-50: #f9fafb;
--pierre-gray-500: #6b7280;
--pierre-gray-700: #374151;
--pierre-gray-900: #1f2937;
--pierre-error: #dc2626;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: var(--pierre-gray-50);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.card {
background: white;
padding: 2.5rem;
border-radius: 1rem;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
text-align: center;
max-width: 360px;
width: 100%;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--pierre-violet), var(--pierre-cyan));
}
.logo { margin-bottom: 1rem; }
.brand {
font-size: 1.125rem;
font-weight: 700;
color: var(--pierre-gray-900);
letter-spacing: -0.5px;
margin-bottom: 2rem;
}
h1 {
color: var(--pierre-error);
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
p {
color: var(--pierre-gray-500);
line-height: 1.6;
}
@media (max-width: 640px) {
body { padding: 0.75rem; }
.card { padding: 1.5rem; }
h1 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
</style>
</head>
<body>
<div class="card">
<div class="logo">
<!-- Pierre Data Nodes Logo - Three Pillars Design -->
<svg width="80" height="80" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="logo-title logo-desc">
<title id="logo-title">Pierre Fitness Intelligence</title>
<desc id="logo-desc">Holistic fitness intelligence - running figure composed of data nodes representing Activity, Nutrition, and Recovery pillars</desc>
<defs>
<linearGradient id="pg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#7C3AED"/>
<stop offset="100%" style="stop-color:#06B6D4"/>
</linearGradient>
<linearGradient id="ag" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#10B981"/>
<stop offset="100%" style="stop-color:#059669"/>
</linearGradient>
<linearGradient id="ng" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#F59E0B"/>
<stop offset="100%" style="stop-color:#D97706"/>
</linearGradient>
<linearGradient id="rg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6366F1"/>
<stop offset="100%" style="stop-color:#4F46E5"/>
</linearGradient>
</defs>
<g stroke-width="2" opacity="0.5" stroke-linecap="round">
<line x1="40" y1="30" x2="52" y2="42" stroke="url(#ag)"/>
<line x1="52" y1="42" x2="70" y2="35" stroke="url(#ag)"/>
<line x1="52" y1="42" x2="48" y2="55" stroke="url(#pg)"/>
<line x1="48" y1="55" x2="75" y2="52" stroke="url(#ng)"/>
<line x1="48" y1="55" x2="55" y2="72" stroke="url(#pg)"/>
<line x1="55" y1="72" x2="35" y2="85" stroke="url(#rg)"/>
<line x1="55" y1="72" x2="72" y2="82" stroke="url(#rg)"/>
</g>
<circle cx="40" cy="30" r="7" fill="url(#ag)"/>
<circle cx="52" cy="42" r="5" fill="url(#ag)"/>
<circle cx="70" cy="35" r="3.5" fill="url(#ag)"/>
<circle cx="48" cy="55" r="6" fill="url(#pg)"/>
<circle cx="48" cy="55" r="3" fill="#fff" opacity="0.9"/>
<circle cx="75" cy="52" r="4.5" fill="url(#ng)"/>
<circle cx="88" cy="60" r="3.5" fill="url(#ng)"/>
<circle cx="55" cy="72" r="5" fill="url(#rg)"/>
<circle cx="35" cy="85" r="4" fill="url(#rg)"/>
<circle cx="72" cy="82" r="4" fill="url(#rg)"/>
</svg>
</div>
<div class="brand">Pierre Fitness Intelligence</div>
<h1>Connection Failed</h1>
<p>Please try again.</p>
</div>
</body>
</html>
