fix(EDPUnblock): improve visuals, add about content

Magic-Fishes · Mar 25, 2024 · 5f73aed · 5f73aed
1 parent 0e022f6
commit 5f73aed
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 21 deletions.
diff --git a/src/components/EdpUnblock/EdpUnblock.css b/src/components/EdpUnblock/EdpUnblock.css
@@ -1,15 +1,21 @@
-html :has(.edpu-page) {
+
+#edpu-background-image {
     background-image: url("/images/edpu-background.png");
     background-repeat: no-repeat;
     background-size: cover;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .edpu-back-arrow {
     position: fixed;
     z-index: 1;
 }
 
-.edpu-back-arrow path{
+.edpu-back-arrow path {
     fill: white;
 }
 
@@ -23,14 +29,15 @@ html :has(.edpu-page) {
 }
 
 .edpu-page {
-    height: 100vh;
-    overflow-y: scroll;
+    height: 100%;
+    overflow-y: auto;
+    scroll-padding-top: 20px;
     -webkit-backdrop-filter: blur(10px) brightness(0.7);
     backdrop-filter: blur(10px) brightness(0.7);
 }
 
 .edpu-page main {
-    height: 100vh;
+    height: 100%;
     display: flex;
     align-items: center;
     flex-direction: column;
@@ -142,34 +149,54 @@ html :has(.edpu-page) {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    width: 80%;
-    max-width: calc(100vw - 185px);
+    width: 100%;
+    max-width: clamp(800px, 80%, 1200px);
     padding: 50px;
     border-top-left-radius: 40px;
     border-top-right-radius: 40px;
-    border: solid #30305846 2px;
+    border: solid #4a4a5556 2px;
     border-bottom: none;
-    background-color: #151523;
-
+    background-color: #151523c9;
+    margin-top: 20px;
+}
+
+.edpu-about-h2 {
+    margin-bottom: 20px;
+}
+
+.edpu-about-explanation, .edpu-about-explanation > a {
+    color: #b4b4f0;
+}
+
+.edpu-about-explanation:not(:last-child) {
+    margin-bottom: 50px;
 }
 
 .edpu-feedback-link {
     text-decoration: none;
+    padding: 7px 10px;
+    border-radius: 7px;
+    background-color: rgba(0, 0, 0, .25);
+    border: 1px solid #ffffff38;
     color: #b4b4f0;
-    position: absolute;
+    position: fixed;
     bottom: 20px;
-    left: 30px;
-    transition: 0.2s;
+    left: 20px;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    transition: .1s;
+    z-index: 1;
 }
 
 .edpu-feedback-link:is(:hover, :focus-visible) {
+    background-color: rgba(0, 0, 0, .5);
     color: white;
     outline: none;
 }
 
 .edpu-feedback-link:active {
     color: white;
-    opacity: 0.9;
+    opacity: 0.75;
 }
 
 .edpu-about-link {
@@ -179,12 +206,12 @@ html :has(.edpu-page) {
     display: flex;
     flex-flow: column;
     justify-content: space-between;
-    gap: 10px;
+    gap: 15px;
     transition: 0.2s;
     transition-property: transform;
 }
 
-.edpu-about-link h5{
+.edpu-about-link h5 {
     color: rgb(var(--text-color-alt));
     scale: 1.2;
     transition: 0.2s;
@@ -206,7 +233,7 @@ html :has(.edpu-page) {
 
 .edpu-about-link:is(:active) {
     padding-top: 15px;
-    transform: translateY(15px);
+    transform: translateY(10px);
 }
 
 .edpu-about-link:is(:hover, :focus-visible) h5 {

diff --git a/src/components/EdpUnblock/EdpUnblock.jsx b/src/components/EdpUnblock/EdpUnblock.jsx
@@ -97,13 +97,15 @@ export default function EdpUnblock() {
     }, [location.hash])
 
     return (<>
+        <div id="edpu-background-image"></div>
         <span className="edpu-back-arrow">
             <GoBackArrow />
         </span>
         <span className="edpu-social">
             <DiscordLink />
             <GithubLink />
         </span>
+        <Link to="/feedback" className="edpu-feedback-link">Besoin d’aide ? </Link>
         <div className="edpu-page">
             <main ref={heroBannerRef}>
                 <div>
@@ -123,16 +125,18 @@ export default function EdpUnblock() {
                         <DownloadIcon />
                     </a>
                 </div>
-                <Link to="/feedback" className="edpu-feedback-link">Besoin d’aide ? </Link>
                 <Link ref={aboutButtonRef} to="#about" className="edpu-about-link" replace onClick={() => { location.hash === "#about" && scrollToAbout() }}>
                     <h5>En savoir plus</h5>
                     <AboutArrow viewBox="0 36 100 26" />
                 </Link>
             </main>
             <div className="edpu-about" ref={aboutRef}>
-                {/* placeholder purpose only obviously */}
-                {/* Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. */}
-                <h1>Lorem <br />ipsum<br /> dolor <br />sit<br /> amet<br />,<br /> consectetur<br /> adipiscing<br /> elit<br />,<br /> sed<br /> do<br /> eiusmod<br /> tempor<br /> incididunt<br /> ut<br /> labore<br /> et<br /> dolore<br /> magna<br /> aliqua<br />.<br /> Ut<br /> enim<br /> ad<br /> minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
+                <h2 className="edpu-about-h2">Pourquoi dois-je installer Ecole Directe Plus Unblock ?</h2>
+                <p className="edpu-about-explanation">EDP Unblock permet un accès ininterrompu à Ecole Directe Plus en donnant l'accès en continu aux données fournis par l'API d'EcoleDirecte. Cette extension est nécessaire au bon fonctionnement d'Ecole Directe Plus.</p>
+                <h2 className="edpu-about-h2">Vie privée et confidentialité</h2>
+                <p className="edpu-about-explanation">EDP Unblock est uniquement actif sur les domaines `ecole-directe.plus` ainsi que `ecoledirecte.com`. L'application n'est pas autorisée à accéder aux informations sur n'importe quel autre site. De plus, EDP Unblock ne lit aucune donnée : l'extension sert simplement de passerelle aux requêtes pour "arriver correction à destination", mais n'a pas accès à leur contenu</p>
+                <h2 className="edpu-about-h2">Divers</h2>
+                <p className="edpu-about-explanation">L'extension Ecole Directe Plus Unblock, tout comme le site Ecole Directe Plus, est un projet open-source sous license MIT, vous pouvez donc retrouver le code source en ligne, visitez le <a href="https://github.com/Magic-Fishes/Ecole-Directe-Plus-Unblock">dépôt Github</a>.</p>
             </div>
         </div>
     </>)