|
|
<!doctype html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta |
|
|
name="viewport" |
|
|
content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" |
|
|
/> |
|
|
<title>{% block title %}{% endblock %} - {{ app_name }}</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link |
|
|
rel="stylesheet" |
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" |
|
|
/> |
|
|
|
|
|
|
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
fontFamily: { |
|
|
sans: ["DM Sans", "sans-serif"], |
|
|
}, |
|
|
colors: { |
|
|
bg: "#111827", |
|
|
card: "#1F2937", |
|
|
cardLight: "#374151", |
|
|
primary: "#10B981", |
|
|
primaryDark: "#059669", |
|
|
accent: "#FBBF24", |
|
|
danger: "#EF4444", |
|
|
textMuted: "#9CA3AF", |
|
|
}, |
|
|
boxShadow: { |
|
|
glow: "0 0 20px rgba(16, 185, 129, 0.15)", |
|
|
float: "0 10px 30px -10px rgba(0, 0, 0, 0.5)", |
|
|
}, |
|
|
animation: { |
|
|
pop: "pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)", |
|
|
"slide-up": "slideUp 0.3s ease-out", |
|
|
}, |
|
|
keyframes: { |
|
|
pop: { |
|
|
"0%": { transform: "scale(0.95)" }, |
|
|
"100%": { transform: "scale(1)" }, |
|
|
}, |
|
|
slideUp: { |
|
|
"0%": { transform: "translateY(100%)" }, |
|
|
"100%": { transform: "translateY(0)" }, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
</script> |
|
|
<link |
|
|
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" |
|
|
rel="stylesheet" |
|
|
/> |
|
|
|
|
|
<style> |
|
|
body { |
|
|
font-family: "DM Sans", sans-serif; |
|
|
background-color: #111827; |
|
|
color: white; |
|
|
-webkit-tap-highlight-color: transparent; |
|
|
} |
|
|
|
|
|
|
|
|
.no-scrollbar::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.btn-press:active { |
|
|
transform: scale(0.96); |
|
|
transition: transform 0.1s; |
|
|
} |
|
|
|
|
|
|
|
|
.nav-link.active { |
|
|
color: white; |
|
|
} |
|
|
.nav-link.active i { |
|
|
color: #fbbf24; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
|
|
|
#toast-box { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
z-index: 100; |
|
|
width: 90%; |
|
|
max-width: 400px; |
|
|
pointer-events: none; |
|
|
} |
|
|
.toast { |
|
|
background: #374151; |
|
|
color: white; |
|
|
padding: 12px 16px; |
|
|
border-radius: 12px; |
|
|
margin-bottom: 8px; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
border-left: 4px solid; |
|
|
animation: slideDown 0.3s; |
|
|
pointer-events: auto; |
|
|
} |
|
|
@keyframes slideDown { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(-20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
{% block extra_css %}{% endblock %} |
|
|
</head> |
|
|
<body class="overflow-x-hidden"> |
|
|
|
|
|
<div id="toast-box"></div> |
|
|
|
|
|
|
|
|
{% if current_user.is_authenticated %} |
|
|
<header |
|
|
class="px-6 pt-8 pb-4 flex justify-between items-center bg-bg sticky top-0 z-30" |
|
|
> |
|
|
<div class="flex flex-col"> |
|
|
<span |
|
|
class="text-textMuted text-xs font-bold uppercase tracking-wider" |
|
|
>Espace Membre</span |
|
|
> |
|
|
<span class="text-xl font-bold text-white tracking-tight" |
|
|
>Apex Ores<span class="text-accent">.</span></span |
|
|
> |
|
|
</div> |
|
|
<a |
|
|
href="{{ url_for('main.referral') }}" |
|
|
class="w-10 h-10 bg-card rounded-full flex items-center justify-center border border-gray-700 cursor-pointer hover:border-accent transition" |
|
|
> |
|
|
<span class="font-bold text-gray-300 text-sm"> |
|
|
{% if current_user.name %} {{ current_user.name[:2].upper() |
|
|
}} {% else %} U {% endif %} |
|
|
</span> |
|
|
</a> |
|
|
</header> |
|
|
{% endif %} |
|
|
|
|
|
|
|
|
<div class="px-5 mt-4"> |
|
|
{% with messages = get_flashed_messages(with_categories=true) %} {% |
|
|
if messages %} {% for category, message in messages %} |
|
|
<div |
|
|
class="mb-4 p-4 rounded-xl flex items-center gap-3 animate-pop {% if category == 'success' %}bg-primary/10 border-l-4 border-primary text-primary{% elif category == 'error' %}bg-danger/10 border-l-4 border-danger text-danger{% else %}bg-cardLight border-l-4 border-accent text-accent{% endif %}" |
|
|
> |
|
|
<i |
|
|
class="fa-solid {% if category == 'success' %}fa-circle-check{% elif category == 'error' %}fa-circle-xmark{% else %}fa-circle-info{% endif %}" |
|
|
></i> |
|
|
<p class="text-sm font-medium">{{ message }}</p> |
|
|
</div> |
|
|
{% endfor %} {% endif %} {% endwith %} |
|
|
</div> |
|
|
|
|
|
|
|
|
<main class="pb-32">{% block content %}{% endblock %}</main> |
|
|
|
|
|
|
|
|
{% if current_user.is_authenticated %} |
|
|
<nav |
|
|
class="fixed bottom-6 left-4 right-4 h-16 bg-card/90 backdrop-blur-xl border border-gray-700/50 rounded-full shadow-float z-40 px-2 flex justify-between items-center max-w-md mx-auto" |
|
|
> |
|
|
<a |
|
|
href="{{ url_for('main.dashboard') }}" |
|
|
class="nav-link flex-1 h-full flex flex-col items-center justify-center gap-1 text-gray-500 transition-colors {% if request.endpoint == 'main.dashboard' %}active{% endif %}" |
|
|
> |
|
|
<i class="fa-solid fa-house text-lg"></i> |
|
|
<span class="text-[10px] font-medium">Accueil</span> |
|
|
</a> |
|
|
|
|
|
<a |
|
|
href="{{ url_for('main.notifications') }}" |
|
|
class="nav-link flex-1 h-full flex flex-col items-center justify-center gap-1 text-gray-500 transition-colors {% if request.endpoint == 'main.notifications' %}active{% endif %}" |
|
|
> |
|
|
<i class="fa-solid fa-clock-rotate-left text-lg"></i> |
|
|
<span class="text-[10px] font-medium">Notifs</span> |
|
|
</a> |
|
|
|
|
|
|
|
|
<div class="relative w-16 flex justify-center"> |
|
|
<a |
|
|
href="{{ url_for('main.market') }}" |
|
|
class="absolute -top-6 w-14 h-14 bg-accent text-gray-900 rounded-full flex items-center justify-center shadow-lg shadow-amber-500/30 border-4 border-bg transform active:scale-95 transition-transform" |
|
|
> |
|
|
<i class="fa-solid fa-cart-shopping text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div |
|
|
class="flex-1 h-full flex flex-col items-center justify-center gap-1 text-gray-500" |
|
|
> |
|
|
<span class="text-[10px] font-medium mt-6">Marché</span> |
|
|
</div> |
|
|
|
|
|
<a |
|
|
href="{{ url_for('main.referral') }}" |
|
|
class="nav-link flex-1 h-full flex flex-col items-center justify-center gap-1 text-gray-500 transition-colors {% if request.endpoint == 'main.referral' %}active{% endif %}" |
|
|
> |
|
|
<i class="fa-solid fa-user text-lg"></i> |
|
|
<span class="text-[10px] font-medium">Profil</span> |
|
|
</a> |
|
|
</nav> |
|
|
{% endif %} |
|
|
|
|
|
<script> |
|
|
function showToast(message, type = "info") { |
|
|
const box = document.getElementById("toast-box"); |
|
|
const toast = document.createElement("div"); |
|
|
toast.className = "toast"; |
|
|
|
|
|
let color = |
|
|
type === "error" |
|
|
? "#EF4444" |
|
|
: type === "success" |
|
|
? "#10B981" |
|
|
: "#FBBF24"; |
|
|
let icon = |
|
|
type === "error" |
|
|
? "fa-circle-xmark" |
|
|
: type === "success" |
|
|
? "fa-circle-check" |
|
|
: "fa-info-circle"; |
|
|
|
|
|
toast.style.borderColor = color; |
|
|
toast.innerHTML = `<i class="fa-solid ${icon}" style="color:${color}"></i> <span>${message}</span>`; |
|
|
|
|
|
box.appendChild(toast); |
|
|
setTimeout(() => { |
|
|
toast.style.opacity = "0"; |
|
|
toast.style.transform = "translateY(-20px)"; |
|
|
setTimeout(() => toast.remove(), 300); |
|
|
}, 3000); |
|
|
} |
|
|
</script> |
|
|
{% block extra_js %}{% endblock %} |
|
|
</body> |
|
|
</html> |
|
|
|
