From b7ebda5633ccbbbc90bec4bfa78a17eed871e7a6 Mon Sep 17 00:00:00 2001
From: p2405951 <malo.leblond@etu.univ-lyon1.fr>
Date: Fri, 24 Oct 2025 17:45:48 +0200
Subject: [PATCH 1/3] anim background+style form

---
 src/components/background/background.jsx      | 54 +++++++++++--
 .../background/background.module.css          | 15 ++++
 src/components/form/form.jsx                  | 78 ++++++++++++++++++-
 src/components/form/form.module.css           | 32 +++-----
 src/index.css                                 |  4 +-
 src/pages/Login/LoginPage.module.css          |  2 +-
 6 files changed, 151 insertions(+), 34 deletions(-)

diff --git a/src/components/background/background.jsx b/src/components/background/background.jsx
index 0a5838b..b77ce82 100644
--- a/src/components/background/background.jsx
+++ b/src/components/background/background.jsx
@@ -1,15 +1,55 @@
-import styles from "./background.module.css"; 
+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>
   );
 };
 
-export default Background;
\ No newline at end of file
+export default Background;
diff --git a/src/components/background/background.module.css b/src/components/background/background.module.css
index 41d0a05..6d3c524 100644
--- a/src/components/background/background.module.css
+++ b/src/components/background/background.module.css
@@ -57,4 +57,19 @@
   background-color: rgba(240, 240, 41, 0.827);
   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));
+  }
 }
\ No newline at end of file
diff --git a/src/components/form/form.jsx b/src/components/form/form.jsx
index 2771332..5fedf71 100644
--- a/src/components/form/form.jsx
+++ b/src/components/form/form.jsx
@@ -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;
 
diff --git a/src/components/form/form.module.css b/src/components/form/form.module.css
index a58ec84..009b834 100644
--- a/src/components/form/form.module.css
+++ b/src/components/form/form.module.css
@@ -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;
-}
diff --git a/src/index.css b/src/index.css
index d208144..39d9264 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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);
diff --git a/src/pages/Login/LoginPage.module.css b/src/pages/Login/LoginPage.module.css
index b913811..fc62d28 100644
--- a/src/pages/Login/LoginPage.module.css
+++ b/src/pages/Login/LoginPage.module.css
@@ -2,7 +2,7 @@
     position: relative;
     z-index: 2;
     display: flex;
-    width: 30%;
+    width: 600px;
     overflow: hidden;
     max-height: 80%;
     justify-content: center;

From 47fee29d4802dde9a64b8f0e749158c235bff6d3 Mon Sep 17 00:00:00 2001
From: p2405951 <malo.leblond@etu.univ-lyon1.fr>
Date: Fri, 7 Nov 2025 11:36:55 +0100
Subject: [PATCH 2/3] end responsive background

---
 .../background/background.module.css          | 65 ++++++++++++++++---
 src/components/form/form.jsx                  |  5 +-
 src/components/form/form.module.css           |  5 +-
 3 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/src/components/background/background.module.css b/src/components/background/background.module.css
index 6d3c524..255a1ae 100644
--- a/src/components/background/background.module.css
+++ b/src/components/background/background.module.css
@@ -1,9 +1,10 @@
 /* BACKGROUND ////////////////////////////////////////////////////////*/
 .background-container {
+  z-index: 0;
   margin: 0;
   padding: 0;
   min-height: 100vh;
-  background: linear-gradient(135deg, #ff9500, #ffb347);
+  background: #00F0FF;
   overflow: hidden;
   position: relative;
   width: 100vw;
@@ -22,7 +23,7 @@
 .circle-1 {
   width: 600px;
   height: 600px;
-  background-color: rgba(255, 255, 204, 0.6);
+  background-color: #019AFF;
   top: -10%;
   left: -10%;
 }
@@ -30,7 +31,7 @@
 .circle-2 {
   width: 250px;
   height: 250px;
-  background-color: rgba(255, 255, 153, 0.829);
+  background-color: #91FCFF;
   top: 51%;
   left: 10%;
 }
@@ -38,26 +39,27 @@
 .circle-3 {
   width: 280px;
   height: 280px;
-  background-color: rgba(255, 255, 204, 0.439);
-  top: 17%;
+  background-color: #91FCFF;
+  top: 28%;
   right: 9%;
 }
 
 .circle-4 {
   width: 500px;
   height: 500px;
-  background-color: rgb(244, 244, 172);
-  bottom: 0%;
-  right: 0%;
+  background-color: #019AFF;
+  bottom: 0;
+  right: 0;
 }
 
 .circle-5 {
   width: 240px;
   height: 240px;
-  background-color: rgba(240, 240, 41, 0.827);
+  background-color: #015AFF;
   top: 2%;
   right: 2%;
 }
+
 .circle-1,.circle-2, .circle-3, .circle-4, .circle-5 {
   animation: float 6s ease-in-out infinite;
 }
@@ -72,4 +74,49 @@
   50% {
     transform: translate(var(--random-x), var(--random-y));
   }
+}
+
+@media (max-width:600px) {
+ 
+
+  .circle-1 {
+  width: 300px;
+  height: 300px;
+  background-color: #019AFF;
+  top: -5%;
+  left: -5%;
+}
+
+.circle-2 {
+  width: 175px;
+  height: 175px;
+  background-color: #91FCFF;
+  top: 58%;
+  left: 10%;
+}
+
+.circle-3 {
+  width: 140px;
+  height: 140px;
+  background-color: #91FCFF;
+  top: 29%;
+  right: 9%;
+}
+
+.circle-4 {
+  width: 250px;
+  height: 250px;
+  background-color: #019AFF;
+  bottom: 0;
+  right: 0;
+}
+
+.circle-5 {
+  width: 240px;
+  height: 240px;
+  background-color: #015AFF;
+  top: 2%;
+  right: 10%;
+}
+  
 }
\ No newline at end of file
diff --git a/src/components/form/form.jsx b/src/components/form/form.jsx
index 5fedf71..fc46bcd 100644
--- a/src/components/form/form.jsx
+++ b/src/components/form/form.jsx
@@ -54,7 +54,7 @@ function LoginForm({ className }) {
                 <input
                     type="email"
                     id="email"
-                    className="glassCard"
+                    className={styles.input} 
                     value={email}
                     placeholder="Adresse mail"
                     onChange={e => setEmail(e.target.value)}
@@ -66,11 +66,12 @@ function LoginForm({ className }) {
                     <input
                         type={showPassword ? "text" : "password"}
                         id="password"
+                        className={styles.input} 
                         value={password}
                         placeholder="Mot de passe"
                         onChange={e => setPassword(e.target.value)}
                         required
-                        style={{ width: '100%', paddingRight: '40px' }} // Espace pour le bouton
+                        style={{ width: '100%', paddingRight: '40px' }}
                     />
                     <button
                         type="button"
diff --git a/src/components/form/form.module.css b/src/components/form/form.module.css
index 009b834..6b5626e 100644
--- a/src/components/form/form.module.css
+++ b/src/components/form/form.module.css
@@ -1,3 +1,6 @@
+:global(.glassCard) {
+	--glass-bg: #ffffff9f;
+}
 
 input {
     width: 100%;
@@ -7,7 +10,7 @@ input {
     border-radius: 10px;
     font-size: 19px;
     color: #111;
-    background: rgba(255, 255, 255, 0.5);
+    background: var(--glass-bg);
     box-shadow: 0 2px 6px rgba(91, 90, 90, 0.06) inset;
 }
 

From 044fed0bb5db4d66e7e78333df0cc65d21418ea3 Mon Sep 17 00:00:00 2001
From: p2405951 <malo.leblond@etu.univ-lyon1.fr>
Date: Fri, 7 Nov 2025 11:44:56 +0100
Subject: [PATCH 3/3] last update

---
 src/pages/Login/LoginPage.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/Login/LoginPage.jsx b/src/pages/Login/LoginPage.jsx
index dcf460b..95a194a 100644
--- a/src/pages/Login/LoginPage.jsx
+++ b/src/pages/Login/LoginPage.jsx
@@ -1,14 +1,11 @@
 import styles from "./LoginPage.module.css";
 import LoginForm from "../../components/form/form.jsx";
-import Background from "../../components/background/background.jsx";
 
 function LoginPage() {
   return (
-    <Background>
       <div className={styles.container}>
         <LoginForm />
       </div>
-    </Background>
   );
 }