Skip to content
Snippets Groups Projects
Commit 683b1fd3 authored by Saravanan, Mukesh (PG/T - Comp Sci & Elec Eng)'s avatar Saravanan, Mukesh (PG/T - Comp Sci & Elec Eng)
Browse files

Replace _messages.html

parent 3897f92b
No related branches found
No related tags found
1 merge request!32Final frontend
Hide whitespace changes
Inline Side-by-side
frontend/application/templates/_messages.html
+ 75
− 11
View file @ 683b1fd3
<div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<ul>
{% for category, message in messages %}
<li class="{{ category }}">{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flash Messages</title>
<style>
.flash-messages {
display: flex;
justify-content: center;
align-items: center;
}
.flash-messages__list {
margin: 0;
padding: 0;
list-style: none;
}
.flash-messages__item {
margin: 0 0 10px;
padding: 15px;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
display: flex;
align-items: center;
}
.flash-messages__item--error {
background-color: #f44336;
border: 1px solid #f44336;
}
.flash-messages__item--warning {
background-color: #ff9800;
border: 1px solid #ff9800;
}
.flash-messages__item--success {
background-color: #4caf50;
border: 1px solid #4caf50;
}
.flash-messages__icon {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
}
.flash-messages__icon--error {
background-color: #f44336;
}
.flash-messages__icon--warning {
background-color: #ff9800;
}
.flash-messages__icon--success {
background-color: #4caf50;
}
.flash-messages__text {
color: #fff;
}
</style>
</head>
<body>
<div class="flash-messages">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<ul class="flash-messages__list">
{% for category, message in messages %}
<li class="flash-messages__item flash-messages__item--{{ category }}">
<span class="flash-messages__icon"></span>
<span class="flash-messages__text">{{ message }}</span>
</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment