diff --git a/frontend/index.html b/frontend/index.html index e4b78ea..8f28e76 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,6 +1,7 @@ + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e2320f2..e2e50a5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,6 +11,7 @@ "@types/react-router": "^5.1.20", "react": "^19.1.1", "react-dom": "^19.1.1", + "react-icons": "^5.5.0", "react-router-dom": "^7.8.1" }, "devDependencies": { @@ -2922,6 +2923,15 @@ "react": "^19.1.1" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index e66c53a..8351fea 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "@types/react-router": "^5.1.20", "react": "^19.1.1", "react-dom": "^19.1.1", + "react-icons": "^5.5.0", "react-router-dom": "^7.8.1" }, "devDependencies": { diff --git a/frontend/src/pages/home/reset.module.css b/frontend/reset.css similarity index 100% rename from frontend/src/pages/home/reset.module.css rename to frontend/reset.css diff --git a/frontend/src/components/Forms/ContactMe/ContactMeForm.jsx.a b/frontend/src/components/Forms/ContactMe/ContactMeForm.jsx.a deleted file mode 100644 index ef1596b..0000000 --- a/frontend/src/components/Forms/ContactMe/ContactMeForm.jsx.a +++ /dev/null @@ -1,99 +0,0 @@ -/*TODO: Implement the contact form functionality*/ - -{% load static %} - - - -
-
- -
-
-
- {% csrf_token %} - {{ contactme_form }} - - -
-
-
-
- -
- - - -contact-me.js: - -$(document).ready(function () { - $("#contactme-form").submit(function (event) { - event.preventDefault(); // Prevent normal form submission - - $.ajax({ - url: "/submit-contactme/", // URL of the Django view - type: "POST", - data: $(this).serialize(), // Serialize form data - success: function (response) { - if (response.success) { - close_contact(); - - $("#contactme-form .success-form-alert").fadeIn(); - $("#contactme-form")[0].reset(); // Clear the form - - alert("Zpráva odeslaná!") - } - }, - error: function (response) { - alert("Zpráva nebyla odeslaná, zkontrolujte si připojení k internetu nebo naskytl u nás problém :(") - } - }); - - }); - - $("#contactme-form .success-form .close").click(function () { - $("#contactme-form .success-form-alert").fadeOut(); - }); - - var opened_contact = false; - - $(document).on("click", ".contact-me .opening", function () { - console.log("toggle mail"); - - const opening = $(".contact-me .opening"); - - - - - // Check if we're opening or closing - if (opened_contact === false) { - // Toggle rotation - opening.toggleClass('rotate-opening'); - - // Wait for the rotation to finish - setTimeout(function() { - $(".contact-me .content").addClass('content-moveup-index'); - }, 500); - - setTimeout(function() { - $(".contact-me .content")[0].offsetHeight; - - $(".contact-me .content").addClass('content-moveup'); - }, 1000); // Small delay to trigger transition - - opened_contact = true; - } else { - close_contact(); - } - }); - - function close_contact(){ - $(".contact-me .content").removeClass('content-moveup'); - - setTimeout(function() { - $(".contact-me .content").toggleClass('content-moveup-index'); - $(".contact-me .opening").toggleClass('rotate-opening'); - }, 700); - - opened_contact = false; - } -}); \ No newline at end of file diff --git a/frontend/src/components/Forms/ContactMe/ContactMeForm.tsx b/frontend/src/components/Forms/ContactMe/ContactMeForm.tsx index fe75414..f4b2add 100644 --- a/frontend/src/components/Forms/ContactMe/ContactMeForm.tsx +++ b/frontend/src/components/Forms/ContactMe/ContactMeForm.tsx @@ -1,82 +1,64 @@ -import React, { useState } from "react" +import React, { useState, useRef } from "react" import styles from "./contact-me.module.css" - -interface ContactFormResponse { - success: boolean - [key: string]: any -} +import { LuMousePointerClick } from "react-icons/lu"; export default function ContactMeForm() { const [opened, setOpened] = useState(false) - const [formData, setFormData] = useState({ message: "", email: "" }) - const [loading, setLoading] = useState(false) + const [contentMoveUp, setContentMoveUp] = useState(false) + const [openingBehind, setOpeningBehind] = useState(false) const [success, setSuccess] = useState(false) - const [error, setError] = useState(null) + const openingRef = useRef(null) + + function handleSubmit() { + // form submission logic here + } const toggleOpen = () => { - setOpened((prev) => !prev) - } - - const handleChange = ( - e: React.ChangeEvent - ) => { - const { name, value } = e.target - setFormData((prev) => ({ ...prev, [name]: value })) - } - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault() - setLoading(true) - setError(null) - - try { - const response = await fetch("/submit-contactme/", { - method: "POST", - headers: { - "Content-Type": "application/json", - "X-CSRFToken": getCSRFToken(), - }, - body: JSON.stringify(formData), - }) - - const data: ContactFormResponse = await response.json() - - if (data.success) { - setSuccess(true) - setFormData({ message: "", email: "" }) - } else { - setError("Zpráva nebyla odeslaná.") - } - } catch (err) { - setError("Chyba připojení nebo serveru.") - } finally { - setLoading(false) + if (!opened) { + setOpened(true) + setOpeningBehind(false) + setContentMoveUp(false) + // Wait for the rotate-opening animation to finish before moving content up + // The actual moveUp will be handled in onTransitionEnd + } else { + setContentMoveUp(false) + setOpeningBehind(false) + setTimeout(() => setOpened(false), 1000) // match transition duration } } - // Utility to read CSRF token from cookies (Django) - const getCSRFToken = (): string => { - const match = document.cookie.match(/csrftoken=([^;]+)/) - return match ? match[1] : "" + const handleTransitionEnd = (e: React.TransitionEvent) => { + if (opened && e.propertyName === "transform") { + setContentMoveUp(true) + // Move the opening behind after the animation + setTimeout(() => setOpeningBehind(true), 10) + } + if (!opened && e.propertyName === "transform") { + setOpeningBehind(false) + } } return (
- +
@@ -85,27 +67,15 @@ export default function ContactMeForm() { type="email" name="email" placeholder="Váš email" - value={formData.email} - onChange={handleChange} required />