Skip to content

Commit 01a35ef

Browse files
maxsonferovantemaxsonferovante
committed
Refactor HTML templates for certificate responses: Revamp styles and structure in certificate download, not found, not generated, UUID invalid, and server error templates. Update to a unified design with improved user experience, including new headers, buttons, and error messages, while ensuring consistency across all templates.
1 parent eaebc02 commit 01a35ef

File tree

6 files changed

+877
-77
lines changed

6 files changed

+877
-77
lines changed

‎mailtechfloripa.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<style>
6+
body {
7+
font-family: Manrope, sans-serif;
8+
margin: 0;
9+
padding: 0;
10+
background-color: #f4f4f4;
11+
}
12+
13+
.email-container {
14+
width: 100%;
15+
max-width: 600px;
16+
margin: 0 auto;
17+
background-color: #ffffff;
18+
padding: 20px;
19+
border-radius: 10px;
20+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
21+
}
22+
23+
.email-header {
24+
background-color: #000000;
25+
color: #ffffff;
26+
padding: 10px;
27+
border-radius: 10px 10px 0 0;
28+
text-align: center;
29+
font-size: 36px;
30+
font-weight: bold;
31+
}
32+
33+
.email-footer {
34+
background-color: #000000;
35+
color: #ffffff;
36+
padding: 10px;
37+
border-radius: 0 0 10px 10px;
38+
text-align: center;
39+
font-size: 14px;
40+
margin-top: 20px;
41+
}
42+
43+
.email-body {
44+
padding: 20px;
45+
font-size: 16px;
46+
line-height: 1.6;
47+
}
48+
49+
.email-button-container {
50+
text-align: center;
51+
}
52+
53+
.email-button {
54+
display: inline-block;
55+
background-color: #000000;
56+
color: #ffffff !important;
57+
text-decoration: none;
58+
padding: 10px 20px;
59+
border-radius: 5px;
60+
font-size: 16px;
61+
font-weight: bold;
62+
text-align: center;
63+
margin: 20px 0;
64+
transition: background-color 0.3s ease;
65+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
66+
}
67+
68+
.email-button:hover {
69+
background-color: #353535;
70+
}
71+
72+
.email-note {
73+
font-size: 14px;
74+
color: #666666;
75+
margin-top: 10px;
76+
text-align: center;
77+
}
78+
</style>
79+
</head>
80+
<body>
81+
<div class="email-container">
82+
<div class="email-header">
83+
<!-- Custom Header Image -->
84+
<img src="https://tech.floripa.br/wp-content/uploads/2025/03/Tech-Floripa.jpg"
85+
alt="Logo"
86+
style="
87+
display: block;
88+
margin: 0 auto;
89+
max-width: 200px;
90+
height: auto;
91+
border-top-left-radius: 10px;
92+
border-top-right-radius: 10px;
93+
">
94+
<!-- End Custom Header Image -->
95+
</div>
96+
<div class="email-body">Olá Jardel, seu certificado para o evento "Evento de Teste" está pronto. Você pode baixá-lo aqui: https://j6rgb6tlr9.execute-api.us-east-1.amazonaws.com/dev/api/v1/certificate/download?id=a381c1c9-8001-45f1-bc81-0eda541818f9</div>
97+
<div class="email-footer">
98+
<h3 style="color: #fff;">Ajude a fortalecer a Comunidade Tech de Floripa!</h3><p>Indique o Tech Floripa para outros eventos<br><a href="https://tech.floripa.br/" style="color: #fff; text-decoration: none;">→ tech.floripa.br</a></p>
99+
</div>
100+
</div>
101+
</body>
102+
</html>

‎src/main/presentation/templates/certificate_download.html‎

Lines changed: 144 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,160 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Download do Certificado</title>
4+
<title>Download do Certificado - Tech Floripa</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<style>
8-
body {{ font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f8f9fa; }}
9-
.container {{ max-width: 600px; margin: 0 auto; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }}
10-
.success-icon {{ font-size: 48px; color: #28a745; margin-bottom: 20px; }}
11-
h1 {{ color: #155724; margin-bottom: 20px; }}
12-
p {{ color: #6c757d; line-height: 1.6; margin-bottom: 20px; }}
13-
.download-link {{ background-color: #28a745; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block; margin-top: 20px; }}
14-
.download-link:hover {{ background-color: #218838; }}
15-
.loading {{ display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #28a745; border-radius: 50%; animation: spin 1s linear infinite; }}
16-
@keyframes spin {{ 0% {{ transform: rotate(0deg); }} 100% {{ transform: rotate(360deg); }} }}
8+
body {{
9+
font-family: Manrope, sans-serif;
10+
margin: 0;
11+
padding: 10px;
12+
background-color: #f4f4f4;
13+
min-height: 100vh;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
}}
18+
19+
.email-container {{
20+
width: 100%;
21+
max-width: 500px;
22+
background-color: #ffffff;
23+
padding: 15px;
24+
border-radius: 10px;
25+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
26+
}}
27+
28+
.email-header {{
29+
background-color: #000000;
30+
color: #ffffff;
31+
padding: 15px;
32+
border-radius: 10px 10px 0 0;
33+
text-align: center;
34+
margin: -15px -15px 15px -15px;
35+
}}
36+
37+
.email-body {{
38+
padding: 15px;
39+
font-size: 14px;
40+
line-height: 1.5;
41+
text-align: center;
42+
}}
43+
44+
.success-icon {{
45+
font-size: 48px;
46+
margin-bottom: 15px;
47+
}}
48+
49+
h1 {{
50+
color: #000000;
51+
margin-bottom: 15px;
52+
font-size: 22px;
53+
font-weight: bold;
54+
}}
55+
56+
p {{
57+
color: #333333;
58+
margin-bottom: 10px;
59+
}}
60+
61+
.email-button-container {{
62+
text-align: center;
63+
margin: 20px 0;
64+
}}
65+
66+
.email-button {{
67+
display: inline-block;
68+
background-color: #000000;
69+
color: #ffffff !important;
70+
text-decoration: none;
71+
padding: 12px 24px;
72+
border-radius: 5px;
73+
font-size: 14px;
74+
font-weight: bold;
75+
text-align: center;
76+
transition: background-color 0.3s ease;
77+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
78+
}}
79+
80+
.email-button:hover {{
81+
background-color: #353535;
82+
}}
83+
84+
.loading {{
85+
display: inline-block;
86+
width: 20px;
87+
height: 20px;
88+
border: 2px solid #f3f3f3;
89+
border-top: 2px solid #000000;
90+
border-radius: 50%;
91+
animation: spin 1s linear infinite;
92+
margin: 15px 0;
93+
}}
94+
95+
@keyframes spin {{
96+
0% {{ transform: rotate(0deg); }}
97+
100% {{ transform: rotate(360deg); }}
98+
}}
99+
100+
.email-note {{
101+
font-size: 12px;
102+
color: #666666;
103+
margin-top: 10px;
104+
}}
105+
106+
.email-footer {{
107+
background-color: #000000;
108+
color: #ffffff;
109+
padding: 12px;
110+
border-radius: 0 0 10px 10px;
111+
text-align: center;
112+
font-size: 12px;
113+
margin: 15px -15px -15px -15px;
114+
}}
115+
116+
.email-footer a {{
117+
color: #ffffff;
118+
text-decoration: none;
119+
}}
17120
</style>
18121
</head>
19122
<body>
20-
<div class="container">
21-
<div class="success-icon">📄</div>
22-
<h1>Download do Certificado</h1>
23-
<div class="loading"></div>
24-
<p>Redirecionando para download do certificado...</p>
25-
<p>Se o download não iniciar automaticamente:</p>
26-
<a href="{certificate_url}" class="download-link">Clique aqui para baixar</a>
123+
<div class="email-container">
124+
<div class="email-header">
125+
<img src="https://tech.floripa.br/wp-content/uploads/2025/03/Tech-Floripa.jpg"
126+
alt="Tech Floripa"
127+
style="display: block; margin: 0 auto; max-width: 200px; height: auto;">
128+
</div>
129+
130+
<div class="email-body">
131+
<div class="loading"></div>
132+
<p class="email-note">O download iniciará automaticamente em alguns segundos.</p>
133+
<div class="email-button-container">
134+
<a href="{certificate_url}" class="email-button">
135+
📥 Baixar Certificado
136+
</a>
137+
</div>
138+
139+
<p class="email-note">
140+
Se o download não iniciar automaticamente, clique no botão acima.
141+
</p>
142+
</div>
143+
144+
<div class="email-footer">
145+
<h3 style="color: #fff; margin: 0 0 10px 0;">Ajude a fortalecer a Comunidade Tech de Floripa!</h3>
146+
<p style="margin: 0;">
147+
Indique o Tech Floripa para outros eventos<br>
148+
<a href="https://tech.floripa.br/">→ tech.floripa.br</a>
149+
</p>
150+
</div>
27151
</div>
152+
28153
<script>
29-
// Redirect após 2 segundos para dar tempo de ver a página
154+
// Redirect após 3 segundos para dar tempo de ver a página
30155
setTimeout(function() {{
31156
window.location.href = "{certificate_url}";
32-
}}, 2000);
157+
}}, 3000);
33158
</script>
34159
</body>
35160
</html>

0 commit comments

Comments
 (0)