Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

anim background+style form

Browse Source
This commit is contained in:
p2405951
2025-10-24 17:45:48 +02:00
parent ffb78723fa
commit b7ebda5633
6 changed files with 151 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/background/background.jsx
+45 -5
View File
@@ -1,12 +1,52 @@
import styles from "./background.module.css";
import { useEffect, useRef } from "react";
const Background = ({ children, className }) => {
const circlesRef = useRef([]);
const getRandomTranslation = () => {
const randomX = Math.floor(Math.random() * 100) - 30;
const randomY = Math.floor(Math.random() * 100) - 30;
return { x: randomX, y: randomY };
};
useEffect(() => {
circlesRef.current.forEach((circle) => {
if (circle) {
const { x, y } = getRandomTranslation();
circle.style.setProperty('--random-x', `${x}px`);
circle.style.setProperty('--random-y', `${y}px`);
}
});
}, []);
return (
<div className={`${styles["background-container"]} ${className || ''}`}>
<div className={styles["circle"] + " " + styles["circle-1"]}></div>
<div className={styles["circle"] + " " + styles["circle-2"]}></div>
<div className={styles["circle"] + " " + styles["circle-3"]}></div>
<div className={styles["circle"] + " " + styles["circle-4"]}></div>
<div className={styles["circle"] + " " + styles["circle-5"]}></div>
<div
ref={(el) => (circlesRef.current[0] = el)}
className={`${styles["circle"]} ${styles["circle-1"]}`}
style={{ "--random-x": "0px", "--random-y": "0px" }}
></div>
<div
ref={(el) => (circlesRef.current[1] = el)}
className={`${styles["circle"]} ${styles["circle-2"]}`}
style={{ "--random-x": "0px", "--random-y": "0px" }}
></div>
<div
ref={(el) => (circlesRef.current[2] = el)}
className={`${styles["circle"]} ${styles["circle-3"]}`}
style={{ "--random-x": "0px", "--random-y": "0px" }}
></div>
<div
ref={(el) => (circlesRef.current[3] = el)}
className={`${styles["circle"]} ${styles["circle-4"]}`}
style={{ "--random-x": "0px", "--random-y": "0px" }}
></div>
<div
ref={(el) => (circlesRef.current[4] = el)}
className={`${styles["circle"]} ${styles["circle-5"]}`}
style={{ "--random-x": "0px", "--random-y": "0px" }}
></div>
{children}
</div>
);
src/components/background/background.module.css
+15
View File
@@ -58,3 +58,18 @@
top: 2%;
right: 2%;
}
.circle-1,.circle-2, .circle-3, .circle-4, .circle-5 {
animation: float 6s ease-in-out infinite;
}
.circle {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(var(--random-x), var(--random-y));
}
}
src/components/form/form.jsx
+75 -3
View File
@@ -1,4 +1,4 @@
import { useState } from "react";
/*import { useState } from "react";
import login from "../../utils/login.js";
import getUser from "../../utils/getUser.js";
import styles from "./form.module.css";
@@ -11,13 +11,13 @@ function LoginForm({ className }) {
getUser();
}
return (
<div className={className}>
<div className={`${className} ${"glassCard"}`}>
<div className={styles.formgroup}>
<input type="email" id="email" value={email} placeholder="Adresse mail" onChange={e => setEmail(e.target.value)} required/>
</div>
<div className={styles.formgroup}>
<input type="password" id="password" value={password} placeholder="Adresse mail" onChange={e => setPassword(e.target.value)} required/>
<input type="password" id="password" value={password} placeholder="Mot de passe" onChange={e => setPassword(e.target.value)} required/>
<br/>
</div>
<div className={styles.logButton} >
@@ -26,5 +26,77 @@ function LoginForm({ className }) {
</div>
);
}
export default LoginForm;*/
import { useState } from "react";
import login from "../../utils/login.js";
import getUser from "../../utils/getUser.js";
import styles from "./form.module.css";
function LoginForm({ className }) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
async function handleSubmit(e) {
e.preventDefault();
await login(email, password);
getUser();
}
const toggleShowPassword = () => {
setShowPassword(!showPassword);
};
return (
<div className={`${className} ${"glassCard"}`}>
<div className={styles.formgroup}>
<input
type="email"
id="email"
className="glassCard"
value={email}
placeholder="Adresse mail"
onChange={e => setEmail(e.target.value)}
required
/>
</div>
<div className={styles.formgroup}>
<div style={{ position: 'relative', width: '100%' }}>
<input
type={showPassword ? "text" : "password"}
id="password"
value={password}
placeholder="Mot de passe"
onChange={e => setPassword(e.target.value)}
required
style={{ width: '100%', paddingRight: '40px' }} // Espace pour le bouton
/>
<button
type="button"
onClick={toggleShowPassword}
style={{
position: 'absolute',
width: '30px',
right: '10px',
top: '50%',
transform: 'translateY(-50%)',
background: 'none',
border: 'none',
cursor: 'pointer',
fontSize: '16px',
}}
>
{showPassword ? '👁️' : '🔒'}
</button>
</div>
</div>
<div className={styles.logButton}>
<button className={styles.loginButton} onClick={handleSubmit}>Se connecter</button>
</div>
</div>
);
}
export default LoginForm;
src/components/form/form.module.css
+11 -21
View File
@@ -5,9 +5,10 @@ input {
padding: 0px 10px;
border: none;
border-radius: 10px;
font-size: 16px;
font-size: 19px;
color: #111;
box-shadow: 0 2px 6px rgba(0,0,0,0.06) inset;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 2px 6px rgba(91, 90, 90, 0.06) inset;
}
input::placeholder{
@@ -27,21 +28,22 @@ input::placeholder{
/* style scoped (module) */
.loginButton {
display: inline-block;
padding: 0.55rem 1rem;
height: 55px;
border-radius: 6px;
background-color: #2b6cb0;
color: #fff;
height: 50px;
width:90%;
border-radius: 16px;
margin-bottom:3%;
margin-top:3%;
background-color: rgba(255, 255, 255, 0.335);
color: #000000;
font-weight: 600;
border: none;
box-shadow: 0 2px 6px rgba(43,108,176,0.15);
cursor: pointer;
transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
font-size: 15px;
}
.loginButton:hover {
background-color: #235a9a;
background-color: #54585e;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(43,108,176,0.18);
}
@@ -51,18 +53,6 @@ input::placeholder{
box-shadow: 0 3px 8px rgba(43,108,176,0.12);
}
.loginButton:focus {
outline: 2px solid rgba(43,108,176,0.24);
outline-offset: 2px;
}
.loginButton:active {
transform: translateY(0);
box-shadow: 0 3px 8px rgba(43,108,176,0.12);
}
.loginButton:focus {
outline: 2px solid rgba(43,108,176,0.24);
outline-offset: 2px;
}
src/index.css
+2 -2
View File
@@ -38,8 +38,8 @@ body {
.glassCard {
width: 240px;
height: 360px;
width: 100%;
padding: 12px 12px 12px 12px;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
src/pages/Login/LoginPage.module.css
+1 -1
View File
@@ -2,7 +2,7 @@
position: relative;
z-index: 2;
display: flex;
width: 30%;
width: 600px;
overflow: hidden;
max-height: 80%;
justify-content: center;