From 5d50fa194b217789fbc16917774169dcda0ccdb5 Mon Sep 17 00:00:00 2001 From: Amir Date: Mon, 9 Jun 2025 13:48:34 +0200 Subject: [PATCH] Style for form application,confirmations, playment --- .../accounts/confirmation_expired.html | 26 +- .../accounts/confirmation_success.html | 23 +- backend/core/static/css/getstarted.css | 211 +++++++ backend/core/static/css/index.css | 24 + backend/core/static/js/formHandling.js | 2 +- backend/core/templates/payment.html | 21 +- backend/core/templates/signup.html | 594 ++++++++++++------ 7 files changed, 680 insertions(+), 221 deletions(-) create mode 100644 backend/core/static/css/getstarted.css diff --git a/backend/accounts/templates/accounts/confirmation_expired.html b/backend/accounts/templates/accounts/confirmation_expired.html index 66e6a9b..b29d190 100644 --- a/backend/accounts/templates/accounts/confirmation_expired.html +++ b/backend/accounts/templates/accounts/confirmation_expired.html @@ -1,10 +1,24 @@ {% extends "base.html" %} -{%block content%} -

Link has expired!

-
- {% csrf_token %} - +{% block content %} +
+
+

Link has expired!

+

+ The confirmation link you used has expired or is no longer valid.
+ Please click the button below to receive a new confirmation link. +

+ + {% csrf_token %} + + +
+
+ + - {% endblock %} \ No newline at end of file diff --git a/backend/accounts/templates/accounts/confirmation_success.html b/backend/accounts/templates/accounts/confirmation_success.html index a26424f..4d96eff 100644 --- a/backend/accounts/templates/accounts/confirmation_success.html +++ b/backend/accounts/templates/accounts/confirmation_success.html @@ -1,11 +1,22 @@ {% extends "base.html" %} -{%block content%} -
-
-

Email Confirmed!

-

Your email {{ email }} has been successfully verified.

+{% block content %} +
+
+

Email Confirmed!

+

+ Your email {{ email }} has been successfully verified.
+ Thank you for confirming your email. We are currently generating your document. A link to access your document will be sent to you shortly. +

+ + Go back to Homepage +
-{%endblock%} + +{% endblock %} \ No newline at end of file diff --git a/backend/core/static/css/getstarted.css b/backend/core/static/css/getstarted.css new file mode 100644 index 0000000..5f01678 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/backend/core/static/css/index.css b/backend/core/static/css/index.css index 2612b16..d931954 100644 --- a/backend/core/static/css/index.css +++ b/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; diff --git a/backend/core/static/js/formHandling.js b/backend/core/static/js/formHandling.js index e667b51..7b3d39e 100644 --- a/backend/core/static/js/formHandling.js +++ b/backend/core/static/js/formHandling.js @@ -230,7 +230,7 @@ function progressBar() { basicProgress.innerHTML = `Basic question ✓`; 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 + "%"; diff --git a/backend/core/templates/payment.html b/backend/core/templates/payment.html index ab52439..6a6a516 100644 --- a/backend/core/templates/payment.html +++ b/backend/core/templates/payment.html @@ -1,14 +1,23 @@ {% extends 'base.html' %} {% block content %} -
-
-

Payment

-

Click the button below to pay and access your document.

+
+
+

Payment

+

+ Click the button below to pay and access your document. +

{% csrf_token %} - +
+
-
+ + + {% endblock %} \ No newline at end of file diff --git a/backend/core/templates/signup.html b/backend/core/templates/signup.html index aeb235d..e2cded4 100644 --- a/backend/core/templates/signup.html +++ b/backend/core/templates/signup.html @@ -1,22 +1,33 @@ -{% extends "base.html" %} -{% block content %} +{% load static %} + + + Risk Assessment Questions + + + + + + + + + + +
+ +
+
+
+
+
+
+
-
- Steps image -
-

Risk Assessment Questions

-
-
-
-
-
-
- -
-
-
+
+
{% if form.errors %} @@ -59,27 +70,39 @@
- +
- +
- +
- +
- +
- +
Helps determine the scale of IT infrastructure and security @@ -99,27 +122,39 @@
- +
- +
- +
- +
- +
- +
Indicates available resources for cybersecurity investments @@ -134,24 +169,28 @@
- - + +
- - + +
- - + +
- - + +
Reveals the complexity of your technology landscape and @@ -168,55 +207,79 @@
-
+
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
@@ -235,59 +298,85 @@
-
+
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
@@ -311,25 +400,25 @@
@@ -351,43 +440,63 @@
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
Assesses the potential impact of data breaches and @@ -409,25 +518,25 @@
@@ -450,25 +559,25 @@
@@ -483,24 +592,28 @@
- - + +
- - + +
- - + +
- - + +
Evaluates remote access security requirements and potential @@ -513,24 +626,28 @@
- - + +
- - + +
- - + +
- - + +
Assesses supply chain risk and the need for vendor security @@ -551,13 +668,13 @@
@@ -571,29 +688,34 @@
- - + +
- - + +
- - + +
- - + +
- - + +
Determines specific cybersecurity controls. @@ -633,23 +755,33 @@
- +
- +
- +
- +
- +
Helps understand the complexity and vulnerability points in @@ -670,19 +802,27 @@
- +
- +
- +
- +
Determines exposure to different cybersecurity @@ -702,15 +842,21 @@
- +
- +
- +
Assesses potential impact of data breaches. @@ -730,23 +876,33 @@
- +
- +
- +
- +
- +
Defines data protection requirements. @@ -766,15 +922,21 @@
- +
- +
- +
Indicates the variety of systems requiring @@ -794,15 +956,21 @@
- +
- +
- +
Assesses third-party cybersecurity risks. @@ -815,29 +983,34 @@
- - + +
- - + +
- - + +
- - + +
- - + +
Evaluates cybersecurity needs based on IP @@ -850,34 +1023,40 @@
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
Identifies compliance frameworks. @@ -897,25 +1076,25 @@
@@ -936,19 +1115,19 @@
@@ -970,27 +1149,39 @@
- +
- +
- +
- +
- +
- +
@@ -1034,8 +1225,7 @@
-{% endblock content %} -{% block bottom %} -{% endblock bottom %} + +