Kumi
79e83aa0a7
This update vastly improves the user experience for registration and email confirmation processes within the app. By integrating Flask-WTF, the commit introduces form handling with enhanced data validation and user feedback. It also refactors the SMTP configuration to utilize dynamic sender selection and improves the handling of SSL settings, ensuring a more reliable email delivery setup. To provide better security and a smoother user interface, we've implemented CSRF protection with FlaskForm and utilized WTForms for input fields, applying validators to ensure data integrity. The introduction of user existence checks before registration helps prevent duplicate usernames in the system, contributing to a cleaner and more manageable user database. Email composition in the send_email function has been streamlined for readability, and several new templates were added to provide users with clear instructions after submitting requests or completing registration, enhancing overall usability. By addressing these areas, the commit not only elevates the security posture of the application but also significantly enriches the user interaction, making the system more robust and user-friendly. Relevant configurations for SMTP and system random secret key generation have been adjusted for better compliance and security standards. Additionally, unnecessary scripts and redundant code blocks were removed for a cleaner code base, and CSS adjustments were made for improved form presentation and application aesthetics. Overall, this comprehensive update lays a stronger foundation for user management and interaction within the application, setting the stage for future enhancements and a better end-user experience.
203 lines
2.7 KiB
CSS
203 lines
2.7 KiB
CSS
/* Reset and base styles */
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: "Roboto", sans-serif;
|
|
background-color: #f7f7f7;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
a {
|
|
color: #5d5d5d;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.container {
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
padding: 20px 0;
|
|
}
|
|
|
|
header h1 {
|
|
color: #5d5d5d;
|
|
text-align: center;
|
|
margin: 0;
|
|
font-size: 36px;
|
|
}
|
|
|
|
header nav ul {
|
|
list-style: none;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
header nav ul li {
|
|
display: inline;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
header nav ul li a {
|
|
color: #5d5d5d;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
background-color: #e8e8e8;
|
|
padding: 50px 0;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.hero h2 {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
color: #333;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.hero p {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
color: #666;
|
|
}
|
|
|
|
/* IP Display Cards */
|
|
.ip-display {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.ip-card {
|
|
background-color: #fff;
|
|
padding: 30px 10px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
flex-basis: calc(50% - 10px);
|
|
text-align: center;
|
|
}
|
|
|
|
.ip-card h3 {
|
|
margin-bottom: 15px;
|
|
color: #5d5d5d;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.ip-card p {
|
|
font-size: 20px;
|
|
color: #333;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* About Section */
|
|
#about {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
#about h2 {
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
font-size: 24px;
|
|
}
|
|
|
|
#about p {
|
|
font-size: 18px;
|
|
color: #666;
|
|
}
|
|
|
|
/* API Section */
|
|
#api {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
#api h2 {
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
font-size: 24px;
|
|
}
|
|
|
|
#api p {
|
|
font-size: 18px;
|
|
color: #666;
|
|
}
|
|
|
|
/* Footer */
|
|
main {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
footer {
|
|
background-color: #fff;
|
|
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
footer p {
|
|
margin: 0;
|
|
color: #5d5d5d;
|
|
}
|
|
|
|
footer a {
|
|
color: #5d5d5d;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Form Styles */
|
|
|
|
input {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
border: none;
|
|
background-color: #333;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #5d5d5d;
|
|
}
|
|
|
|
input:focus,
|
|
button:focus {
|
|
outline: none;
|
|
border-color: #5d5d5d;
|
|
box-shadow: 0 0 0 2px rgba(93, 93, 93, 0.5);
|
|
}
|