feat: add FAQ question form with email notifications and validations

- Created `FaqQuestionForm` in `forms.py` with custom field validations
- Added FAQ form to the FAQ section with CSRF protection and error handling
- Integrated email notifications to administrator upon FAQ submission
- Updated styles and scripts for form inputs, validation messages, and messages UI
- Adjusted FAQ section layout in `faq.html` and related CSS for responsiveness
- Implemented tests for FAQ form submission and email notifications

static/css/index.css

@@ -560,6 +560,33 @@
     padding-bottom: 90px;
 }
 
+.faq-messages {
+    margin-top: 28px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.faq-message {
+    padding: 14px 18px;
+    border: 1px solid #63768d;
+    background: rgba(99, 118, 141, 0.08);
+    color: #36213e;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 1.35;
+}
+
+.faq-message--success {
+    border-color: #4f7d4f;
+    background: rgba(79, 125, 79, 0.1);
+}
+
+.faq-message--error {
+    border-color: #a14b4b;
+    background: rgba(161, 75, 75, 0.1);
+}
+
 .faq-section h2 {
     font-weight: 400;
     font-size: 44px;
@@ -696,7 +723,8 @@
     margin-top: 25px;
     display: inline-block;
 
-    & > input[type=text] {
+    & > input[type=text],
+    & > textarea {
         width: 540px;
         height: 43px;
         padding: 1px 5px;
@@ -706,6 +734,12 @@
 
         border: 1px solid #554971;
     }
+
+    & > textarea {
+        min-height: 140px;
+        resize: vertical;
+        padding-top: 10px;
+    }
 }
 
 .back-form-accept-checkbox {
@@ -729,6 +763,25 @@
     }
 }
 
+.back-form .errorlist {
+    margin: 10px 0 0;
+    padding: 0;
+    list-style: none;
+    color: #a14b4b;
+    font-size: 16px;
+    line-height: 1.35;
+    max-width: 540px;
+}
+
+.back-form .errorlist li {
+    margin: 0;
+}
+
+.back-form .errorlist.nonfield {
+    margin-top: 20px;
+    text-align: center;
+}
+
 .back-form-submit {
     margin-top: 69px;
     background: #63768d;
@@ -742,4 +795,4 @@
     text-align: left;
 
     color: #b8f3ff;
-}
+}

static/css/login.css

@@ -6,7 +6,9 @@
 
 .auth-section {
     flex: 1;
-    padding: 60px 0 100px;
+    height: 100%;
+    padding-top: 60px;
+    padding-bottom: 60px;
     background:
         radial-gradient(circle at top right, rgba(184, 243, 255, 0.45) 0, rgba(184, 243, 255, 0) 26%),
         linear-gradient(180deg, rgba(99, 118, 141, 0.06) 0%, rgba(99, 118, 141, 0.12) 100%);
@@ -27,14 +29,12 @@
     flex: 1 1 480px;
     min-height: 540px;
     padding: 56px 48px;
-    background: #63768d;
     color: #ffffff;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    background-repeat: no-repeat;
     background-size: cover;
-    background-position: center;
+    background: #63768d no-repeat center;
 }
 
 .auth-intro--login {
@@ -180,6 +180,10 @@
     margin-top: 0;
 }
 
+.register-auth-actions {
+    margin-top: 25px;
+}
+
 .auth-buttons {
     display: flex;
     flex-wrap: wrap;

static/css/style.css

@@ -75,10 +75,84 @@ body {
     overflow-x: hidden;
 }
 
+.site-toast-stack {
+    position: fixed;
+    top: 24px;
+    right: 24px;
+    z-index: 1200;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: min(420px, calc(100vw - 32px));
+}
+
+.site-toast {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 16px 18px;
+    border: 1px solid rgba(54, 33, 62, 0.14);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0 18px 40px rgba(54, 33, 62, 0.18);
+    color: var(--dark);
+    backdrop-filter: blur(10px);
+    transform: translateY(0);
+    opacity: 1;
+    transition: opacity 0.22s ease, transform 0.22s ease;
+}
+
+.site-toast.is-hiding {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+
+.site-toast--success {
+    border-color: rgba(79, 125, 79, 0.25);
+}
+
+.site-toast--error {
+    border-color: rgba(161, 75, 75, 0.25);
+}
+
+.site-toast--warning {
+    border-color: rgba(176, 133, 56, 0.25);
+}
+
+.site-toast__content {
+    font-size: 16px;
+    line-height: 1.45;
+    font-weight: 500;
+}
+
+.site-toast__close {
+    flex: 0 0 auto;
+    border: 0;
+    background: transparent;
+    color: var(--mid);
+    font-size: 26px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.site-toast__close:hover {
+    color: var(--dark);
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-family: 'BerlinType', serif;
 }
 
+@media (max-width: 640px) {
+    .site-toast-stack {
+        top: 12px;
+        right: 12px;
+        left: 12px;
+        width: auto;
+    }
+}
+
 /* Container to maintain consistent width */
 .container {
     max-width: 1160px;
@@ -362,4 +436,4 @@ footer {
         grid-template-columns: 1fr 1fr;
         padding: 40px 24px;
     }
-}
+}

static/css/warranty.css

@@ -0,0 +1,34 @@
+.warranty {
+    padding-bottom: 40px;
+
+    & > h1 {
+        margin: 0;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 50px;
+        text-align: left;
+
+        color: #36213e;
+    }
+
+    & > h2 {
+        margin-top: 30px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 30px;
+        text-align: left;
+
+        color: #36213e;
+    }
+
+    & > p {
+        display: block;
+        margin-top: 30px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 21px;
+        text-align: left;
+
+        color: #36213e;
+    }
+}