maher
326 lines
7.8 KiB
HTML
326 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Votre vidéo est prête – VideoPowerPME</title>
|
||
<style>
|
||
/* Reset */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
background-color: #f0f4f8;
|
||
font-family: 'Segoe UI', Arial, sans-serif;
|
||
color: #2d3748;
|
||
padding: 32px 16px;
|
||
}
|
||
|
||
/* Wrapper */
|
||
.wrapper {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Header */
|
||
.header {
|
||
background: #2563eb;
|
||
border-radius: 16px 16px 0 0;
|
||
padding: 36px 40px 28px;
|
||
text-align: center;
|
||
border-bottom: 3px solid #f97316;
|
||
}
|
||
.header .logo {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
letter-spacing: 1px;
|
||
color: #ffffff;
|
||
}
|
||
.header .logo span {
|
||
color: #fde68a;
|
||
}
|
||
.header .tagline {
|
||
font-size: 12px;
|
||
color: #bfdbfe;
|
||
margin-top: 4px;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Body */
|
||
.body {
|
||
background-color: #ffffff;
|
||
padding: 40px 40px 32px;
|
||
}
|
||
|
||
/* Success badge */
|
||
.badge-wrapper {
|
||
text-align: center;
|
||
margin-bottom: 28px;
|
||
}
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: #d1fae5;
|
||
border: 1px solid #16a34a;
|
||
border-radius: 50px;
|
||
padding: 10px 22px;
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
.badge-text {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #15803d;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* Greeting */
|
||
.greeting {
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
margin-bottom: 10px;
|
||
}
|
||
.greeting span {
|
||
color: #2563eb;
|
||
}
|
||
.subtitle {
|
||
font-size: 15px;
|
||
color: #64748b;
|
||
line-height: 1.6;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
/* Info card */
|
||
.info-card {
|
||
background: #f8fafc;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 12px;
|
||
padding: 24px 28px;
|
||
margin-bottom: 28px;
|
||
}
|
||
.info-card .card-title {
|
||
font-size: 11px;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
color: #94a3b8;
|
||
margin-bottom: 18px;
|
||
font-weight: 600;
|
||
}
|
||
.info-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
.info-row:last-child {
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
}
|
||
.info-icon {
|
||
width: 39px;
|
||
height: 36px;
|
||
border-radius: 8px;
|
||
background-color: #f0f0f0; /* Exemple */
|
||
|
||
/* Remplacement de Flexbox */
|
||
display: inline-block;
|
||
text-align: center;
|
||
line-height: 36px; /* Doit être égal à height */
|
||
vertical-align: middle;
|
||
|
||
font-size: 16px;
|
||
}
|
||
.icon-user { background-color: #dbeafe; }
|
||
.icon-video { background-color: #ede9fe; }
|
||
.icon-clock { background-color: #dcfce7; }
|
||
.info-content .label {
|
||
font-size: 11px;
|
||
color: #94a3b8;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
margin-bottom: 3px;
|
||
}
|
||
.info-content .value {
|
||
font-size: 15px;
|
||
color: #1e293b;
|
||
font-weight: 500;
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* CTA button */
|
||
.cta-wrapper {
|
||
text-align: center;
|
||
margin-bottom: 32px;
|
||
}
|
||
.cta-btn {
|
||
display: inline-block;
|
||
background: #2563eb;
|
||
color: #ffffff;
|
||
text-decoration: none;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
padding: 16px 44px;
|
||
border-radius: 50px;
|
||
letter-spacing: 0.5px;
|
||
box-shadow: 0 6px 24px rgba(37, 99, 235, 0.35);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.cta-btn:hover { opacity: 0.88; }
|
||
.cta-note {
|
||
font-size: 12px;
|
||
color: #94a3b8;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* Divider */
|
||
.divider {
|
||
border: none;
|
||
border-top: 1px solid #e2e8f0;
|
||
margin: 28px 0;
|
||
}
|
||
|
||
/* Info message */
|
||
.info-msg {
|
||
background: #eff6ff;
|
||
border-left: 3px solid #2563eb;
|
||
border-radius: 0 8px 8px 0;
|
||
padding: 14px 18px;
|
||
font-size: 13px;
|
||
color: #475569;
|
||
line-height: 1.7;
|
||
}
|
||
.info-msg strong { color: #1e40af; }
|
||
|
||
/* Footer */
|
||
.footer {
|
||
background: #f1f5f9;
|
||
border-radius: 0 0 16px 16px;
|
||
padding: 24px 40px;
|
||
text-align: center;
|
||
border-top: 1px solid #e2e8f0;
|
||
}
|
||
.footer .site {
|
||
font-size: 13px;
|
||
color: #2563eb;
|
||
font-weight: 700;
|
||
letter-spacing: 0.5px;
|
||
text-decoration: none;
|
||
}
|
||
.footer .copyright {
|
||
font-size: 11px;
|
||
color: #94a3b8;
|
||
margin-top: 8px;
|
||
}
|
||
.footer .links {
|
||
margin-top: 10px;
|
||
}
|
||
.footer .links a {
|
||
font-size: 11px;
|
||
color: #64748b;
|
||
text-decoration: none;
|
||
margin: 0 8px;
|
||
}
|
||
.footer .links a:hover { color: #2563eb; }
|
||
|
||
/* Responsive */
|
||
@media (max-width: 480px) {
|
||
.body, .header, .footer { padding-left: 22px; padding-right: 22px; }
|
||
.greeting { font-size: 22px; }
|
||
.cta-btn { padding: 14px 32px; font-size: 15px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrapper">
|
||
|
||
<!-- HEADER -->
|
||
<div class="header">
|
||
<div class="logo">Video<span>Power</span>PME</div>
|
||
<div class="tagline">Téléchargeur de vidéos professionnel</div>
|
||
</div>
|
||
|
||
<!-- BODY -->
|
||
<div class="body">
|
||
|
||
<!-- Badge statut -->
|
||
<div class="badge-wrapper">
|
||
<div class="badge">
|
||
<span class="badge-text">Téléchargement terminé</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Salutation -->
|
||
<div class="greeting">
|
||
Bonjour, <span>{{ .Tx.Data.name }}</span> 👋
|
||
</div>
|
||
<p class="subtitle">
|
||
Bonne nouvelle ! Votre vidéo a été téléchargée avec succès et est maintenant prête à être récupérée.
|
||
</p>
|
||
|
||
<!-- Carte infos -->
|
||
<div class="info-card">
|
||
<div class="card-title">Détails du téléchargement</div>
|
||
|
||
<div class="info-row">
|
||
<div class="info-icon icon-user">👤</div>
|
||
<div class="info-content">
|
||
<div class="label">Utilisateur</div>
|
||
<div class="value">{{ .Tx.Data.name }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-row">
|
||
<div class="info-icon icon-video">🎬</div>
|
||
<div class="info-content">
|
||
<div class="label">Vidéo téléchargée</div>
|
||
<div class="value">{{ .Tx.Data.video }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-row">
|
||
<div class="info-icon icon-clock">🕐</div>
|
||
<div class="info-content">
|
||
<div class="label">Fin du téléchargement</div>
|
||
<div class="value">{{ .Tx.Data.date }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bouton CTA -->
|
||
<div class="cta-wrapper">
|
||
<a href="{{ .Tx.Data.url }}" class="cta-btn">
|
||
⬇️ Télécharger ma vidéo
|
||
</a>
|
||
<p class="cta-note">Le lien est valable pendant <strong>24 heures</strong></p>
|
||
</div>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- Note d'info -->
|
||
<div class="info-msg">
|
||
<strong>⚠️ Important :</strong> Assurez-vous de télécharger votre fichier avant expiration du lien.
|
||
Passé ce délai, vous devrez relancer une nouvelle demande. Si vous rencontrez un problème,
|
||
contactez notre support à <strong>video@powerpme.com</strong>.
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<div class="footer">
|
||
<a href="https://video.powerpme.com" class="site">VideoPowerPME.com</a>
|
||
<p class="copyright">© 2025 VideoPowerPME – Tous droits réservés.</p>
|
||
<div class="links">
|
||
<a href="#">Se désabonner</a>
|
||
<a href="#">Politique de confidentialité</a>
|
||
<a href="#">Support</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|