Style for form application,confirmations, playment

backend/accounts/templates/accounts/confirmation_expired.html

@@ -1,10 +1,24 @@
 {% extends "base.html" %}
 
-{%block content%}
-<h2>Link has expired! </h2>
-<form method="POST">
-    {% csrf_token %}
-    <button type="submit">Resend link</button>
+{% block content %}
+<div class="confirmed">
+    <div class="confirmation-card">
+        <h2 class="title-org">Link has expired!</h2>
+        <p class="info-p">
+            The confirmation link you used has expired or is no longer valid.<br>
+            Please click the button below to receive a new confirmation link.
+        </p>
+        <form method="POST">
+            {% csrf_token %}
+            <button type="submit" class="btn-primary-orn">Resend link</button>
+        </form>
+    </div>
+</div>
+
+<script>
+    nav = document.querySelector('nav');
+    confirmed = document.querySelector('.confirmed');
+    confirmed.style.height = `calc(100vh - ${nav.offsetHeight}px)`;
+</script>
 
-</form>
 {% endblock %}

backend/accounts/templates/accounts/confirmation_success.html

@@ -1,11 +1,22 @@
 {% extends "base.html" %}
 
-{%block content%}
-<div class="out-risk-management">
-    <div class="risk-management">
-        <h1>Email Confirmed!</h1>
-        <p>Your email {{ email }} has been successfully verified.</p>
+{% block content %}
+<div class="confirmed">
+    <div class="confirmation-card">
+        <h1 class="title-org">Email Confirmed!</h1>
+        <p class="info-p">
+            Your email <strong style="color: #FAA95E;">{{ email }}</strong> has been successfully verified.<br>
+            Thank you for confirming your email. We are currently generating your document. A link to access your document will be sent to you shortly.
+        </p>
+        <a href="{% url 'core:index' %}" class="btn-primary-orn" style="margin-top: 1rem;">
+            Go back to Homepage
+        </a>
     </div>
 </div>
 
-{%endblock%}
+<script>
+    nav = document.querySelector('nav');
+    confirmed = document.querySelector('.confirmed');
+    confirmed.style.height = `calc(100vh - ${nav.offsetHeight}px)`;
+</script>
+{% endblock %}

backend/core/static/css/getstarted.css

@@ -0,0 +1,211 @@
+header {
+    width: 100vw;
+    min-width: 100vw;
+    margin: 0;
+    padding: 0;
+    background: #222;
+    position: relative;
+}
+
+.gs-logo {
+    display: flex;
+    width: 100vw;
+    min-width: 100vw;
+    margin: 0;
+    background: #222;
+    color: #fff;
+    text-decoration: none;
+    font-size: 4rem;
+    font-weight: 700;
+    text-align: center;
+    letter-spacing: 2px;
+    box-sizing: border-box;
+}
+
+.gs-logo a{
+    padding: 0rem 2rem;
+    text-decoration: none;
+}
+.gs-logo a:hover {
+    color: white;
+}
+
+#basic-progress-bar-wrap,
+#advanced-progress-bar-wrap {
+    width: 100%;
+    margin: 0;
+    border-radius: 0;
+    height: 10px;
+    background: #222;
+}
+
+.progress {
+    border-radius: 0;
+    margin: 0;
+    height: 10px;
+    background: #222;
+}
+
+.container {
+    font-family: 'Archivo',sans-serif;
+    font-size: medium;
+}
+
+#basic-progress,
+#advanced-progress {
+    font-size: small;
+}
+
+.pb-3, .option-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px
+}
+
+.form-check-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    pointer-events: none;
+}
+
+.form-check-label {
+    display: inline-block;
+    padding: 0 10px;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    cursor: pointer;
+    background-color: #fff;
+    transition: all 0.2s ease;
+    color: black;
+    margin-bottom: 0.2rem;
+    min-width: 120px;
+    text-align: center;
+    box-shadow: 0 1px 2px 0 #0001;
+    user-select: none;
+    font-weight: 600;
+    width: fit-content;
+}
+
+.form-check-input:checked + .form-check-label {
+    background-color: #f0fbea;
+    border-color: #97e296;
+    color: #225d1e;
+    border: 1px solid;
+}
+
+.form-check-label:hover {
+    background-color: #f0fbea;
+    border-color: #225d1e;
+    color: #225d1e;
+}
+
+.option-grid{
+    display: grid;
+}
+
+#basic-progress {
+    display: flex;
+    color: #6c757d
+}
+
+.form-check-label {
+    font-size: 1rem;
+    min-width: 100px;
+    padding: 0.5rem 0.5rem;
+}
+
+.container, body {
+    background-color: #fbf8f3;
+}
+
+.form-check {
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+}
+
+#submit {
+    background-color: black;
+    color: white;
+    border: none;
+    border-radius: 5px;
+}
+#next {
+    background-color: black;
+    color: white;
+    border: none;
+}
+
+#next:hover, #submit:hover {
+    background-color: #97e296;
+    color: white;
+}
+
+#next, #submit {
+    width: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#back{
+    width: 50%;
+    background-color: #f4ede1;
+    color: #b19b81;
+    border: none;
+}
+
+#back:hover {
+    background-color: #d3c6b8;
+    color: #8f7a62;
+}
+
+.fa-solid {
+    color:#225d1e;
+}
+
+#halfsubmit {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media (max-width: 500px) {
+
+    .pb-3,
+    .option-grid {
+        display: flex !important;
+        gap: 0.5rem 1rem;
+    }
+    .form-check {
+        width: 100%;
+    }
+    .container {
+        width: 100% !important;
+        padding: 0 0.5rem !important;
+        margin: 0 !important;
+    }
+    .form-check-label {
+        font-size: 0.95rem;
+        min-width: 80px;
+        padding: 0.5rem 0.2rem;
+    }
+
+    #next, #submit, #back {
+        width: 100%;
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
+    }
+    .header {
+        width: 100%;
+        min-width: 100%;
+    }
+    .gs-logo {
+        font-size: 2.5rem;
+        padding: 1rem 0;
+    }
+    #q1 {
+        display: grid;
+    }
+}

backend/core/static/css/index.css

@@ -334,6 +334,30 @@ body {
     max-width: 350px;
 }
 
+.confirmed {
+    display: flex;
+    justify-content: center; 
+    align-items: center; 
+    background: #101010;
+}
+
+.confirmation-card {
+    max-width: 600px;
+    width: 100%;
+    text-align: center;
+    margin: 0 auto;
+    background: #19161C;
+    border-radius: 16px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+    border: 1px solid #453E4D;
+    padding: 48px 32px;
+}
+.info-p {
+    color: #fff;
+    font-size: 1.1em; 
+    margin-bottom: 2rem;
+}
+
 @media (max-width: 768px) {
     .form-check.other-gap .other-row {
         flex-direction: column;

backend/core/static/js/formHandling.js

@@ -230,7 +230,7 @@ function progressBar() {
             basicProgress.innerHTML = `<span class="text-success fw-bold">Basic question &#10003;</span>`;
             basicBarWrap.classList.add('d-none');
         } else {
-            basicProgress.innerText = `Question ${idxBasic + 1} / ${basic.length -1 }`;
+            basicProgress.innerText = `Question ${idxBasic + 1} / ${basic.length}`;
         }
         let percent = ((idxBasic + 1) / basic.length) * 100;
         basicBar.style.width = percent + "%";

backend/core/templates/payment.html

@@ -1,14 +1,23 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="out-risk-management">
-    <div class="risk-management">
-        <h2>Payment</h2>
-        <p>Click the button below to pay and access your document.</p>
+<div class="confirmed">
+    <div class="confirmation-card">
+        <h2 class="title-org">Payment</h2>
+        <p class="info-p">
+            Click the button below to pay and access your document.
+        </p>
         <form method="post">
             {% csrf_token %}
-            <button class="btn-bl" type="submit">Pay</button>
+            <button class="btn-primary-orn" type="submit">Pay</button>
         </form>
+    </div>
 </div>
-</div>
+
+<script>
+    nav = document.querySelector('nav');
+    confirmed = document.querySelector('.confirmed');
+    confirmed.style.height = `calc(100vh - ${nav.offsetHeight}px)`;
+</script>
+
 {% endblock %}