feat(captcha & content): stylize all css's and prepare imporvement of english content stuff

-
pull/1/head
TBS093A 2025-05-12 12:08:00 +02:00
parent 043dd5ce3d
commit 2ebe31cd79
7 changed files with 456 additions and 101 deletions

View File

@ -1,2 +0,0 @@
export GATSBY_RECAPTCHA_SITE_KEY=""
export GATSBY_RECAPTCHA_SECRET_KEY=""

180
package-lock.json generated
View File

@ -13,6 +13,7 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-google-recaptcha": "^3.1.0",
"react-simple-captcha": "^9.3.1",
"sass": "^1.49.7"
}
},
@ -12538,6 +12539,106 @@
"node": ">=0.10.0"
}
},
"node_modules/react-simple-captcha": {
"version": "9.3.1",
"resolved": "https://registry.npmjs.org/react-simple-captcha/-/react-simple-captcha-9.3.1.tgz",
"integrity": "sha512-pQ/WKjXns9ukhjjbaSZhl2P0QygHs50N9hxMmPAiFMh+0xXt2AocvSsEe24LyW/eOzOso+2Ifiuym/TZMyYDsA==",
"license": "MIT",
"dependencies": {
"react-html-parser": "^2.0.2"
},
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-simple-captcha/node_modules/dom-serializer": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
"integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
"license": "MIT",
"dependencies": {
"domelementtype": "^2.0.1",
"entities": "^2.0.0"
}
},
"node_modules/react-simple-captcha/node_modules/dom-serializer/node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
],
"license": "BSD-2-Clause"
},
"node_modules/react-simple-captcha/node_modules/dom-serializer/node_modules/entities": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
"license": "BSD-2-Clause",
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/react-simple-captcha/node_modules/domelementtype": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
"license": "BSD-2-Clause"
},
"node_modules/react-simple-captcha/node_modules/domhandler": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
"license": "BSD-2-Clause",
"dependencies": {
"domelementtype": "1"
}
},
"node_modules/react-simple-captcha/node_modules/domutils": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
"integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
"license": "BSD-2-Clause",
"dependencies": {
"dom-serializer": "0",
"domelementtype": "1"
}
},
"node_modules/react-simple-captcha/node_modules/entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
"license": "BSD-2-Clause"
},
"node_modules/react-simple-captcha/node_modules/htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
"integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
"license": "MIT",
"dependencies": {
"domelementtype": "^1.3.1",
"domhandler": "^2.3.0",
"domutils": "^1.5.1",
"entities": "^1.1.1",
"inherits": "^2.0.1",
"readable-stream": "^3.1.1"
}
},
"node_modules/react-simple-captcha/node_modules/react-html-parser": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
"integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
"license": "MIT",
"dependencies": {
"htmlparser2": "^3.9.0"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16.0.0-0"
}
},
"node_modules/read": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@ -24818,6 +24919,85 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
"integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ=="
},
"react-simple-captcha": {
"version": "9.3.1",
"resolved": "https://registry.npmjs.org/react-simple-captcha/-/react-simple-captcha-9.3.1.tgz",
"integrity": "sha512-pQ/WKjXns9ukhjjbaSZhl2P0QygHs50N9hxMmPAiFMh+0xXt2AocvSsEe24LyW/eOzOso+2Ifiuym/TZMyYDsA==",
"requires": {
"react-html-parser": "^2.0.2"
},
"dependencies": {
"dom-serializer": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
"integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
"requires": {
"domelementtype": "^2.0.1",
"entities": "^2.0.0"
},
"dependencies": {
"domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
},
"entities": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
}
}
},
"domelementtype": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
},
"domhandler": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
"requires": {
"domelementtype": "1"
}
},
"domutils": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
"integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
"requires": {
"dom-serializer": "0",
"domelementtype": "1"
}
},
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
},
"htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
"integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
"requires": {
"domelementtype": "^1.3.1",
"domhandler": "^2.3.0",
"domutils": "^1.5.1",
"entities": "^1.1.1",
"inherits": "^2.0.1",
"readable-stream": "^3.1.1"
}
},
"react-html-parser": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
"integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
"requires": {
"htmlparser2": "^3.9.0"
}
}
}
},
"read": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

View File

@ -20,6 +20,7 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-google-recaptcha": "^3.1.0",
"react-simple-captcha": "^9.3.1",
"sass": "^1.49.7"
}
}

View File

@ -18,6 +18,7 @@ import WorkSiiLogo from "../images/work_sii_logo.png"
import WorkInfinidatLogo from "../images/work_infinidat_logo.png"
import WorkTechemLogo from "../images/work_techem_logo.png"
import WorkAdobeLogo from "../images/work_adobe_logo_2.png"
import WorkAptivLogo from "../images/work_aptiv_logo.png"
import InterestsBlockchainLogo from "../images/interests_blockchain_logo.png"
import InterestsBlenderLogo from "../images/interests_blender_logo.png"
@ -28,11 +29,12 @@ export const content_pl = [
type: "generalTitleSegment",
title: "Kamil Żuk",
image: MePng,
content_language: "pl",
content: {
"E-mail": "zukkamil.44@gmail.com",
"Github": "git.00x097.com/tbs093a",
"Telefon": "+48 570 688 112",
"Git": "git.00x097.com/tbs093a",
"Wykształcenie": "Wyższe / Inżynier",
"Miejsce Zamieszkania": "Rzeszów / Polska",
"Data Urodzenia": "30.06.1997 r.",
}
},
@ -359,12 +361,11 @@ export const content_pl = [
{
type: "workSubSegment",
tabs: 1,
title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024",
title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024 to 11.02.2025",
image: WorkSiiLogo,
branchBorderColor: "#0464a8",
mainBorderColor: "#0464a8",
content: [
"Ulepszanie bot'a inwestycyjnego pod automatyczne inwestowanie wyzwalane zewnętrznymi wiadomościami / sygnałami (Python / Mexc API / Kucoin API / Telegram API / OpenAI API)",
"Konserwacja inrastruktury (Terrafrom / Azure / Hetzner)",
"Konserwacja infrastruktury mikroserwisowej (Docker / Kubernetes / Helm)",
"Konserwacja serwerów (Linux)",
@ -378,6 +379,25 @@ export const content_pl = [
branchBorderColor: "#0464a8",
mainBorderColor: "#0464a8",
},
{
type: "workSubSegment",
tabs: 1,
title: "Aptiv PLC - DevOps Engineer & Python Developer - from 11.02.2025",
image: WorkAptivLogo,
branchBorderColor: "#000000",
mainBorderColor: "#0464a8",
content: [
"Konserwacja & Ulepszanie pipeline'ów & job'ów (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
"Automtizacja ręcznych zadań (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
"Praca z mikroserwisami (Docker / Kubernetes)",
],
},
{
type: "mergeBranchSegment",
tabs: 1,
branchBorderColor: "#000000",
mainBorderColor: "#0464a8",
},
{
type: "titleSegment",
title: "Zainteresowania",
@ -421,11 +441,12 @@ export const content_en = [
type: "generalTitleSegment",
title: "Kamil Żuk",
image: MePng,
content_language: "en",
content: {
"E-mail": "zukkamil.44@gmail.com",
"Github": "git.00x097.com/tbs093a",
"Phone": "+48 570 688 112",
"Git": "git.00x097.com/tbs093a",
"Education": "Higher / Engineer",
"Place of Residence": "Rzeszów / Poland",
"Date of Birth": "30.06.1997",
}
},
@ -450,12 +471,36 @@ export const content_en = [
{
type: "workSubSegment",
tabs: 1,
title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024",
title: "Aptiv PLC - DevOps Engineer & Python Developer - from 11.02.2025",
image: WorkAptivLogo,
branchBorderColor: "#000000",
mainBorderColor: "#0464a8",
content: [
"Pipelines & Jobs maintenance & improvements (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
"Automtization of manual tasks (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
"Work with microservices (Docker / Kubernetes)",
],
},
{
type: "mergeBranchSegment",
tabs: 1,
branchBorderColor: "#000000",
mainBorderColor: "#0464a8",
},
{
type: "createBranchSegment",
tabs: 1,
branchBorderColor: "#0464a8",
mainBorderColor: "#0464a8",
},
{
type: "workSubSegment",
tabs: 1,
title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024 to 11.02.2025",
image: WorkSiiLogo,
branchBorderColor: "#0464a8",
mainBorderColor: "#0464a8",
content: [
"Improving crypto / stock exchange bot for automatic investment triggered by outside messages / signals (Python / Mexc API / Kucoin API / Telegram API / OpenAI API)",
"Inrastructure maintenance (Terrafrom / Azure / Hetzner)",
"Microservices infrastructure maintenance (Docker / Kubernetes / Helm)",
"Servers maintenance (Linux)",
@ -672,19 +717,51 @@ export const content_en = [
},{
type: "workSubSegment",
tabs: 0,
title: "Programming - Python",
image: "", //SkillsPythonLogo,
title: "Programming",
image: "",
branchBorderColor: "#ffd748",
mainBorderColor: null,
firstElement: true,
content: [],
},
{
type: "workSubSegment",
tabs: 1,
title: "Coding & Scripting",
image: "",
branchBorderColor: "#6d3d00",
mainBorderColor: "#ffd748",
content: [
"Django",
"Django REST Framework",
"Channels 3.0",
"Celery (Task Manager)",
"Asyncio",
"Python",
"Bash / ZSH / Powershell",
"Javascript (Pure JS / ReactJS)",
],
},
{
type: "mergeBranchSegment",
tabs: 1,
branchBorderColor: "#6d3d00",
mainBorderColor: "#ffd748",
},
{
type: "workSubSegment",
tabs: 1,
title: "LLM & Other AI Tools",
image: "",
branchBorderColor: "#8b0000",
mainBorderColor: "#ffd748",
content: [
"Public LLMs (Claude / Gemini / ChatGPT)",
"Local LLMs (Ollama - Bielik AI / DeepSeek)",
"Coding Agents (Cursor AI / Copilot)",
],
},
{
type: "mergeBranchSegment",
tabs: 1,
branchBorderColor: "#8b0000",
mainBorderColor: "#ffd748",
},
{
type: "workSubSegment",
tabs: 0,
@ -702,9 +779,11 @@ export const content_en = [
mainBorderColor: "#2e8cb1",
content: [
"Jenkins (CI/CD / Routine Processes Automatization (Job's) / GitOps)",
"Ansible (Automatization of servers & dev environments configuration)",
"Ansible (Server Configuration Stuffs)",
"Terraform / OpenTofu (Infrastructure as Code)",
"Bash / ZSH (Linux)",
"Powershell (Windows)",
"Python (Cross-Platform)",
],
},
{
@ -713,45 +792,6 @@ export const content_en = [
branchBorderColor: "#4aa720",
mainBorderColor: "#2e8cb1",
},
{
type: "workSubSegment",
tabs: 1,
title: "Containerization",
image: "", //SkillsContainersLogo,
branchBorderColor: "#00b7ff",
mainBorderColor: "#2e8cb1",
content: [
"Docker",
"Docker-Compose (Microservices oriented on single servers or debug purposes)",
"MiniKube (Local debugging K8S manifests)",
"Kubernetes (Helm / Cert-Manager / Ingress / K9S)",
],
},
{
type: "mergeBranchSegment",
tabs: 1,
branchBorderColor: "#00b7ff",
mainBorderColor: "#2e8cb1",
},
{
type: "workSubSegment",
tabs: 1,
title: "Configuration",
image: "", //SkillsNginxLogo,
branchBorderColor: "#d90000",
mainBorderColor: "#2e8cb1",
content: [
"Apache",
"Nginx (https-portal)",
],
},
{
type: "mergeBranchSegment",
tabs: 1,
branchBorderColor: "#d90000",
mainBorderColor: "#2e8cb1",
},
{
type: "workSubSegment",
tabs: 1,
@ -763,6 +803,7 @@ export const content_en = [
"Hetzner",
"OVH",
"AWS",
"Azure",
],
},
{
@ -771,6 +812,49 @@ export const content_en = [
branchBorderColor: "#f96900",
mainBorderColor: "#2e8cb1",
},
{
type: "workSubSegment",
tabs: 1,
title: "Containerization",
image: "", //SkillsContainersLogo,
branchBorderColor: "#00b7ff",
mainBorderColor: "#2e8cb1",
content: [
"Docker & Docker-Compose",
"Podman",
"Kubernetes (Kubespray / Helm / Cert-Manager / Ingress / K9S)",
],
},
{
type: "mergeBranchSegment",
tabs: 1,
branchBorderColor: "#00b7ff",
mainBorderColor: "#2e8cb1",
},
{
type: "workSubSegment",
tabs: 1,
title: "Reliability & Monitoring",
image: "",
branchBorderColor: "#000000",
mainBorderColor: "#2e8cb1",
content: [
"Grafana",
"Prometheus",
"ElasticSearch",
"Kibana",
"Logstash",
"New Relic",
"Splunk",
"Fluent-Bit",
],
},
{
type: "mergeBranchSegment",
tabs: 1,
branchBorderColor: "#000000",
mainBorderColor: "#2e8cb1",
},
{
type: "workSubSegment",
tabs: 0,

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -2,49 +2,87 @@ import * as React from "react"
import "../styles/general.scss"
import { content_pl } from "../content/kamil"
import { content_en } from "../content/kamil"
import ReCAPTCHA from "react-google-recaptcha"
import { loadCaptchaEnginge, LoadCanvasTemplate, validateCaptcha } from 'react-simple-captcha'
// Klucz strony reCAPTCHA
const RECAPTCHA_SITE_KEY = process.env.GATSBY_RECAPTCHA_SITE_KEY || "YOUR_RECAPTCHA_SITE_KEY";
// Komponent obsługujący reCAPTCHA
const CaptchaWrapper = ({ onVerified }) => {
const SimpleCaptchaWrapper = ({ onVerified, language }) => {
const [error, setError] = React.useState(null);
const recaptchaRef = React.useRef(null);
const handleCaptchaChange = () => {
let content = {
"pl": {
"initial_information": "Wprowadź kod z obrazka aby wyświetlić informacje kontaktowe.",
"captcha_console_initialization": "Błąd inicjalizacji captcha:",
"captcha_ui_initialization": "Nie można załadować captcha",
"captcha_console_reload": "Błąd przeładowania captcha:",
"captcha_reload_button": "Odśwież kod",
"captcha": "Wprowadź kod z obrazka",
"button": "Potwierdź",
"error": "Nieprawidłowy kod. Spróbuj ponownie.",
},
"en": {
"initial_information": "Please enter the code from the image for display contact information.",
"captcha_console_initialization": "Captcha initialization error:",
"captcha_ui_initialization": "Cannot load captcha",
"captcha_console_reload": "Captcha reload error:",
"captcha_reload_button": "Reload code",
"captcha": "Enter the code from the image",
"button": "Confirm",
"error": "Invalid code. Try again.",
}
}
React.useEffect(() => {
try {
const token = recaptchaRef.current.getValue();
if (token) {
loadCaptchaEnginge(6, '#242424', '#a6a6a6');
} catch (err) {
console.error(content[language].captcha_console_initialization, err);
setError(content[language].captcha_ui_initialization);
}
}, []);
const handleSubmit = (e) => {
e.preventDefault();
const userCaptchaValue = document.getElementById('user_captcha_input').value;
if (validateCaptcha(userCaptchaValue)) {
onVerified(true);
setError(null);
}
} else {
setError(content[language].error);
document.getElementById('user_captcha_input').value = "";
// Przeładowanie captcha
try {
loadCaptchaEnginge(6, '#242424', '#a6a6a6');
} catch (err) {
console.error("reCAPTCHA error:", err);
setError("Wystąpił błąd podczas weryfikacji. Spróbuj ponownie.");
console.error(content[language].captcha_console_reload, err);
}
}
};
return (
<div className="captcha-container">
<ReCAPTCHA
ref={recaptchaRef}
sitekey={RECAPTCHA_SITE_KEY}
onChange={handleCaptchaChange}
onErrored={() => setError("Wystąpił błąd podczas weryfikacji. Spróbuj ponownie.")}
onExpired={() => {
if (recaptchaRef.current) {
recaptchaRef.current.reset();
}
}}
hl="pl"
<div className="captcha-form">
<p>
{content[language].initial_information}
</p>
<LoadCanvasTemplate reloadText={content[language].captcha_reload_button} reloadColor="#a6a6a6" />
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder={content[language].captcha}
id="user_captcha_input"
className="captcha-input"
/>
<button type="submit" className="captcha-button">
{content[language].button}
</button>
</form>
{error && (
<div className="error-message" role="alert">
<div className="error-message">
{error}
</div>
)}
</div>
</div>
);
};
@ -322,7 +360,10 @@ const SegmentGeneral = ({ segment }) => {
{segment.title}
</div>
{!isVerified ? (
<CaptchaWrapper onVerified={setIsVerified} />
<SimpleCaptchaWrapper
onVerified={setIsVerified}
language={segment.content_language}
/>
) : (
<div className="segment_content_image">
{typeof segment.content === "object" ? (

View File

@ -209,12 +209,62 @@ body {
}
.captcha-container {
float: right;
.captcha-form {
background-color: $div_background_color;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px 0;
padding: 10px;
width: 210px;
height: 250px;
p {
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
form {
width: 100%;
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: center;
}
a {
color: $color;
cursor: pointer;
padding-top: 20px;
padding-bottom: 5px;
padding-left: 35px;
padding-right: 35px;
}
.captcha-input {
width: 170px;
padding: 8px;
margin-bottom: 10px;
border: 1px solid $color;
background-color: $background_color;
color: $color;
font-size: 9pt;
}
.captcha-button {
width: 188px;
padding: 8px;
background-color: $background_color;
color: $color;
border: 1px solid $color;
cursor: pointer;
font-size: 9pt;
&:hover {
background-color: darken($background_color, 5%);
}
}
.error-message {
color: #ff4444;
@ -223,3 +273,4 @@ body {
text-align: center;
}
}
}