various normal layout improvements + captcha support

templates/snippets/layout/homepage/normal.html

@@ -1,6 +1,7 @@
 {% include 'snippets/layout/description/normal.html' %}
 
-<div class="col-sm-{% if combined %}4{% else %}6{% endif %}{% if not combined %} m-auto{% endif %}">
+<div class="row">
+	<div class="col-lg-{% if combined %}4{% else %}6{% endif %} col-xxl-3{% if not combined %} m-auto{% endif %}">
 		<div class="mb-5 sticky-md-top">
 			{% if cfg.lockInbox == false %}
 			<br>
@@ -10,7 +11,7 @@
 					<i class="bi bi-plus-lg me-1"></i> Add CW
 				</button>
 			</h2>
-		<form class="d-lg-block" hx-post="{{ url_for('api.addQuestion') }}" id="question-form" hx-target="#response-container" hx-swap="none">
+			<form class="d-lg-block" hx-post="{{ url_for('api.addQuestion') }}" id="question-form" hx-target="#response-container" hx-swap="none" hx-disabled-elt="#ask-btn">
 				<div class="collapse" id="cw-collapse">
 					<div class="form-floating mb-2">
 						<input class="form-control" type="text" name="cw" id="cw" placeholder="Content warning">
@@ -26,10 +27,28 @@
 					<label for="question">Write your question...</label>
 					<p class="text-end mt-1 small d-flex align-itemcenter justify-content-between"><span class="text-body-secondary"><i class="bi bi-markdown me-1"></i> Markdown supported</span> <span id="charCount">{{ cfg.charLimit }}</span></p>
 				</div>
+				{% if cfg.antispam.enabled %}
+				{% if cfg.antispam.type == 'basic' %}
 				<div class="form-group mb-2">
 					<label for="antispam">Anti-spam: please enter the word <code class="text-uppercase">{{ getRandomWord() }}</code> in lowercase</label>
 					<input class="form-control" type="text" required name="antispam" id="antispam" autocomplete="off">
 				</div>
+				{% elif cfg.antispam.type == 'recaptcha' %}
+				<div class="form-group mb-2">
+					{% if cfg.antispam.recaptcha.sitekey %}
+					<div class="g-recaptcha" data-sitekey="{{ cfg.antispam.recaptcha.sitekey }}"></div>
+					{% else %}
+					<div class="alert alert-warning" role="alert"><b>Warning:</b> reCAPTCHA site key is not set!</div>
+					{% endif %}
+				</div>
+				{% elif cfg.antispam.type == 'turnstile' %}
+				<div class="cf-turnstile" data-sitekey="{{ cfg.antispam.turnstile.sitekey }}"></div>
+				{% elif cfg.antispam.type == 'frc' %}
+				<div class="frc-captcha" data-sitekey="{{ cfg.antispam.frc.sitekey }}"></div>
+				{% else %}
+				<div class="alert alert-warning"><b>Warning:</b> antispam type is not set!</div>
+				{% endif %}
+				{% endif %}
 				<div class="form-group d-grid d-lg-flex align-items-center justify-content-lg-end mt-3">
 					{#
 					<div class="form-check mb-0 w-100">
@@ -43,7 +62,7 @@
 						<label for="_private" class="form-check-label">Ask privately</label>
 					</div>
 					#}
-				<button type="submit" class="btn btn-primary col-sm-4" id="ask-btn">
+					<button type="submit" class="btn btn-primary col-lg-4" id="ask-btn">
 						<span class="me-1 spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
 						<span class="visually-hidden" role="status">Loading...</span>
 						Ask
@@ -56,9 +75,9 @@
 			<h2 class="text-center">New questions cannot be asked right now.</h2>
 			{% endif %}
 		</div>
-</div>
+	</div>
-{% if combined %}
+	{% if combined %}
-<div class="col-sm-8">
+	<div class="col-lg-8 col-xxl-9">
 		{% if cfg.showQuestionCount == true %}
 		<h3 class="fs-4">{{ len(combined) }} <span class="fw-light">question(s)</span></h3>
 		{% endif %}
@@ -66,5 +85,6 @@
 		<div id="questions-container">
 			{% include 'snippets/layout/questions_list.html' %}
 		</div>
+	</div>
+	{% endif %}
 </div>
-{% endif %}