From d1149bac9921e0175b12c17256740ee290f82f3c Mon Sep 17 00:00:00 2001 From: name Date: Sat, 28 Sep 2024 16:17:41 +0200 Subject: [PATCH 01/10] Resolve the horizontal scroll on mobile devices, remove the rotate buble effect and merge "LandingPage2.jsx" to "LandingPage.jsx" --- src/components/LandingPage/LandingPage.css | 876 ++++++++++++++++---- src/components/LandingPage/LandingPage.jsx | 722 +++++++++++----- src/components/LandingPage/LandingPage2.css | 550 ------------ 3 files changed, 1232 insertions(+), 916 deletions(-) delete mode 100644 src/components/LandingPage/LandingPage2.css diff --git a/src/components/LandingPage/LandingPage.css b/src/components/LandingPage/LandingPage.css index 6e62bd4..b09a3ff 100644 --- a/src/components/LandingPage/LandingPage.css +++ b/src/components/LandingPage/LandingPage.css @@ -1,219 +1,817 @@ /* Navigation Bar */ .landing-page header { - position: fixed; - width: 100%; - height: 55px; - top: 3rem; - padding-inline: 2rem; - z-index: 10; + position: fixed; + width: 100%; + height: 55px; + top: 3rem; + padding-inline: 2rem; + z-index: 10; - display: flex; - justify-content: space-between; - transition: top 0.3s; + display: flex; + justify-content: space-between; + transition: top 0.3s; } .nav-links { - /* Display nav-links in a flex container with a gap between items */ - border-radius: 999px; - display: flex; - padding: 0.7rem; - gap: 2rem; - height: 100%; + /* Display nav-links in a flex container with a gap between items */ + border-radius: 999px; + display: flex; + padding: 0.7rem; + gap: 2rem; + height: 100%; } .landing-page header .nav-links a[href="/edp-unblock"] { - /* Display EDP Unblock link as a flex container with a gap between items */ - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: 15px; + /* Display EDP Unblock link as a flex container with a gap between items */ + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 15px; } .landing-page header .edpu-logo { - /* Style the EDP Unblock logo */ - height: 20px; - transform: scale(1.3); - transition: .2s ease; + /* Style the EDP Unblock logo */ + height: 20px; + transform: scale(1.3); + transition: 0.2s ease; } #nav-bar .edpu-logo > path { - fill: rgba(var(--text-color-alt), .7); + fill: rgba(var(--text-color-alt), 0.7); } a[href="/edp-unblock"]:hover .edpu-logo > path { - fill: rgba(var(--text-color-main-reverse), 0.7) !important; + fill: rgba(var(--text-color-main-reverse), 0.7) !important; } .landing-page .nav-links a { - /* Style the links on the landing page */ - text-decoration: none; - padding: 1rem 1.6rem; - border-radius: 99px; - font-weight: 500; - transition: .2s ease; - display: flex; - align-items: center; - justify-content: center; + /* Style the links on the landing page */ + text-decoration: none; + padding: 1rem 1.6rem; + border-radius: 99px; + font-weight: 500; + transition: 0.2s ease; + display: flex; + align-items: center; + justify-content: center; } -.landing-page :is( +.landing-page + :is( .nav-links a.selected, .nav-links a:hover, .nav-login:hover, .change-theme:hover -) { - background-color: rgba(var(--text-color-alt), .8); - color: rgba(var(--text-color-main-reverse), 0.8); + ) { + background-color: rgba(var(--text-color-alt), 0.8); + color: rgba(var(--text-color-main-reverse), 0.8); } -.landing-page :is( - .nav-logo, - .nav-login, - .change-theme, - .nav-links, - .go-to-top -) { - background-color: rgb(var(--background-color-2), .7); - backdrop-filter: blur(4px); +.landing-page + :is(.nav-logo, .nav-login, .change-theme, .nav-links, .go-to-top) { + background-color: rgb(var(--background-color-2), 0.7); + backdrop-filter: blur(4px); } .landing-page .nav-links a:hover svg path { - fill: rgb(var(--text-color-main-reverse)); - transition: .1s; + fill: rgb(var(--text-color-main-reverse)); + transition: 0.1s; } .landing-logo { - height: 50px; - width: auto; + height: 50px; + width: auto; } /* Go to Top Button */ .go-to-top { - /* Style the go-to-top button */ - position: fixed; - z-index: 100; - display: flex; - padding: 14px; - /* background-color: rgb(var(--background-color-3)); */ - background-color: rgb(var(--background-color-2), .7); - cursor: pointer; - border-radius: 99px; - bottom: 26px; - right: 26px; - border: solid 1px transparent; - outline: none; - transition: .25s; + /* Style the go-to-top button */ + position: fixed; + z-index: 100; + display: flex; + padding: 14px; + /* background-color: rgb(var(--background-color-3)); */ + background-color: rgb(var(--background-color-2), 0.7); + cursor: pointer; + border-radius: 99px; + bottom: 26px; + right: 26px; + border: solid 1px transparent; + outline: none; + transition: 0.25s; } .go-to-top.active { - /* Style the active go-to-top button */ - opacity: 1; + /* Style the active go-to-top button */ + opacity: 1; } .go-to-top.unactive { - /* Style the inactive go-to-top button */ - opacity: 0.45; - bottom: -43px; - right: -62px; + /* Style the inactive go-to-top button */ + opacity: 0.45; + bottom: -43px; + right: -62px; } .go-to-top:is(:hover, :focus-visible) { - /* Style the hovered go-to-top button */ - transform: scale(1.1); - border-color: rgb(var(--text-color-alt)); + /* Style the hovered go-to-top button */ + transform: scale(1.1); + border-color: rgb(var(--text-color-alt)); } .go-to-top:active { - transform: scale(.9); - opacity: .8; + transform: scale(0.9); + opacity: 0.8; } /* Up Arrow */ .up-arrow { - /* Style the up arrow */ - z-index: 110; - display: flex; - justify-content: center; - align-items: center; - height: 18px; - fill: rgb(var(--text-color-alt)); - transition: all .4s ease; - transform: rotate(270deg); + /* Style the up arrow */ + z-index: 110; + display: flex; + justify-content: center; + align-items: center; + height: 18px; + fill: rgb(var(--text-color-alt)); + transition: all 0.4s ease; + transform: rotate(270deg); } .go-to-top.active .up-arrow { - /* Style the active up arrow */ - transform: rotate(0deg); + /* Style the active up arrow */ + transform: rotate(0deg); } .landing-page .nav-buttons { - display: flex; - height: 100%; - gap: 10px; + display: flex; + height: 100%; + gap: 10px; } .landing-page .nav-buttons a { - height: 100%; - transition: .2s; - display: flex; - padding-inline: 2.6rem; - border-radius: 1rem; - text-decoration: none; - align-items: center; - justify-content: center; + height: 100%; + transition: 0.2s; + display: flex; + padding-inline: 2.6rem; + border-radius: 1rem; + text-decoration: none; + align-items: center; + justify-content: center; } .landing-page .change-theme { - transition: .2s; - display: flex; - position: relative; - padding: 2.65rem; - border: none; - border-radius: 1rem; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; + transition: 0.2s; + display: flex; + position: relative; + padding: 2.65rem; + border: none; + border-radius: 1rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; } .landing-page .change-theme::after { - /* Style the theme button's pseudo-elements */ - position: absolute; - content: ""; - border-radius: 100%; - width: 23px; - height: 23px; - transition: all 0.2s ease-in; + /* Style the theme button's pseudo-elements */ + position: absolute; + content: ""; + border-radius: 100%; + width: 23px; + height: 23px; + transition: all 0.2s ease-in; } .dark .landing-page .change-theme::after { - /* Style the theme button's before pseudo-element */ - background-color: #bebec880; - background-image: - radial-gradient(circle at 10% 20%, #c8c8d2b3, transparent 30%), - radial-gradient(circle at 30% 70%, #b4b4beb3, transparent 30%), - radial-gradient(circle at 70% 40%, #d2d2dcb3, transparent 30%), - radial-gradient(circle at 20% 60%, #bebec8b3, transparent 30%), - radial-gradient(circle at 50% 80%, #aaaab4b3, transparent 30%); - box-shadow: 1px 0 4px rgb(0, 0, 0); + /* Style the theme button's before pseudo-element */ + background-color: #bebec880; + background-image: radial-gradient( + circle at 10% 20%, + #c8c8d2b3, + transparent 30% + ), + radial-gradient(circle at 30% 70%, #b4b4beb3, transparent 30%), + radial-gradient(circle at 70% 40%, #d2d2dcb3, transparent 30%), + radial-gradient(circle at 20% 60%, #bebec8b3, transparent 30%), + radial-gradient(circle at 50% 80%, #aaaab4b3, transparent 30%); + box-shadow: 1px 0 4px rgb(0, 0, 0); } .light .landing-page .change-theme::after { - /* Style the theme button's after pseudo-element */ - background-color: #ffc85080; - background-image: - radial-gradient(circle at 10% 20%, #ffc850b3, transparent 30%), - radial-gradient(circle at 30% 70%, #ffb43c50, transparent 30%), - radial-gradient(circle at 70% 40%, #ffdc64b3, transparent 30%), - radial-gradient(circle at 20% 60%, #ffbe5ab3, transparent 30%), - radial-gradient(circle at 50% 80%, #ffd246b3, transparent 30%); - box-shadow: 0 0 0 1px #ffc850, 0 0 5px 0px #ffc850; + /* Style the theme button's after pseudo-element */ + background-color: #ffc85080; + background-image: radial-gradient( + circle at 10% 20%, + #ffc850b3, + transparent 30% + ), + radial-gradient(circle at 30% 70%, #ffb43c50, transparent 30%), + radial-gradient(circle at 70% 40%, #ffdc64b3, transparent 30%), + radial-gradient(circle at 20% 60%, #ffbe5ab3, transparent 30%), + radial-gradient(circle at 50% 80%, #ffd246b3, transparent 30%); + box-shadow: 0 0 0 1px #ffc850, 0 0 5px 0px #ffc850; } /* Login */ .landing-page .nav-login { - /* Style the login link */ - padding: 1.7rem; - font-weight: 500; - transition: all .3s ease; -} \ No newline at end of file + /* Style the login link */ + padding: 1.7rem; + font-weight: 500; + transition: all 0.3s ease; +} +html:has(.landing-page) { + overflow-x: hidden; + scroll-behavior: smooth; +} + +/* -------------------------------------------------------------------------- */ +/* HEADER MENU */ +/* -------------------------------------------------------------------------- */ + +.landing-page .nav-logo { + height: 100%; + padding: 1.7rem 1.4rem; + border-radius: 1rem; + display: flex; + align-items: center; + gap: 10px; + background-color: rgb(var(--background-color-2)); + text-decoration: none; + user-select: none; + cursor: default; +} + +.landing-page .nav-logo svg { + height: 100%; +} + +/* -------------------------------------------------------------------------- */ +/* HERO BANNER */ +/* -------------------------------------------------------------------------- */ + +#home { + width: 100%; + padding-top: 250px; +} + +#home::before { + /* that could be done with the hero-banner background, but it's necessary + to keep the height of hero-banner flexible in order to keep a coherent + stacking of elements, that's why we use ::before here */ + content: ""; + z-index: -1; + width: 100%; + + height: calc(min(100vh, 1100px) + 2px); + position: absolute; + top: 0; + + border-bottom: 2px solid rgba(var(--text-color-alt), 0.5); + background: radial-gradient( + circle at bottom left, + rgba(var(--text-color-alt), 0.3) 0, + rgba(var(--text-color-alt), 0.1) 50%, + transparent 100% + ); +} + +/* AFFILIATION DISCLAIMER */ + +.landing-page .affiliation-disclaimer { + font-size: var(--font-size-13); + background: rgb(var(--text-color-alt), 0.1); + color: rgb(var(--text-color-alt)); + border: 1px solid rgb(var(--text-color-alt), 0.2); + border-radius: 15px; + width: max-content; + padding: 5px 10px; + margin: 0 auto; + margin-bottom: 30px; + display: flex; + align-items: center; + flex-flow: row nowrap; + gap: 8px; +} +.landing-page .affiliation-disclaimer svg { + height: 12px; + transform: scale(1.6); +} +.landing-page .affiliation-disclaimer svg path { + stroke: rgb(var(--text-color-alt)); +} + +/* HERO CONTENT */ + +.landing-page .text-center { + /* position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); */ + width: min(654px, 100%); + margin: 0 auto; + padding-inline: 10px; + /* margin-top: 300px; */ + text-align: center; +} + +.landing-page h1 { + font-size: var(--font-size-36); +} +.landing-page .heading-emphasis { + color: rgb(var(--text-color-alt)); +} +#home p { + color: rgb(var(--text-color-alt)); + margin: 0 auto; + margin-top: 20px; +} + +.landing-page .login-call-to-action { + display: inline-block; + margin-top: 45px; + text-decoration: none; + border: 2px solid rgb(var(--text-color-main)); + border-radius: 10px; + font-weight: var(--font-weight-semi-bold); + padding: 10px 15px; + transition: 0.2s; + outline: none; + overflow: hidden; +} +.landing-page .login-call-to-action::after { + content: "-->"; + display: inline-block; + white-space: nowrap; + padding: 0; + opacity: 0; + width: 0; + transition: 0.2s; +} + +.landing-page .login-call-to-action:is(:hover, :focus-visible) { + background-color: rgb(var(--text-color-main)); + color: rgb(var(--text-color-main-reverse)); + box-shadow: 0 0 20px rgb(var(--text-color-main), 0.3); +} +.landing-page .login-call-to-action:is(:hover, :focus-visible)::after { + content: "-->"; + opacity: 1; + padding-left: 10px; + width: 35px; + color: rgb(var(--text-color-main-reverse)); +} + +.landing-page .login-call-to-action:active { + opacity: 0.6; +} + +.landing-page .fade-out-image { + margin: 0 auto; + margin-top: 100px; + width: min(1200px, calc(100% - 40px)); + overflow: hidden; + position: relative; + transition: transform 0.3s ease; +} +.landing-page .fade-out-image:has(.mobile) { + width: min(350px, calc(100% - 40px)); +} +.landing-page .fade-out-image:has(.tablet) { + width: min(450px, calc(100% - 40px)); +} +.landing-page .fade-out-image img { + width: 100%; + display: block; + border: 1px solid rgba(var(--text-color-alt), 0.2); + border-radius: 10px; +} +.landing-page .fade-out-image::after { + content: ""; + background: linear-gradient( + 180deg, + transparent, + rgb(var(--background-color-0)) 90%, + rgb(var(--background-color-0)) + ); + height: 90%; + bottom: -1px; + left: -1px; + width: calc(100% + 2px); + position: absolute; +} + +.landing-page .section-title { + font-size: var(--font-size-32); +} + +/* -------------------------------------------------------------------------- */ +/* FEATURES OVERVIEW */ +/* -------------------------------------------------------------------------- */ + +#bento { + margin-top: 200px; + display: flex; + flex-flow: column nowrap; + width: min(740px, 100%); + gap: 100px; +} + +#bento .bento-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: repeat(5, minmax(0, 1fr)); + gap: 20px; + /* height: 700px; */ +} + +#bento .bento-card { + border: 2px solid rgba(var(--text-color-alt), 0.2); + border-radius: 10px; + box-shadow: rgb(var(--background-color-0)) 0px 0px 0px 0px, + rgb(var(--background-color-0), 0.1) 0px 0px 0px 1px, + rgb(var(--text-color-alt), 0.1) 0px 1px 3px 0px, + rgb(var(--text-color-alt), 0.1) 0px 1px 2px -1px; +} + +#bento .bento-outline-effect { + height: 100%; + background-color: rgb(var(--background-color-0)); + padding: 20px; + border-radius: 8px; + transition: background 0.2s; +} + +#bento .bento-card:hover { + /* scale: 1.03; */ + box-shadow: rgb(var(--background-color-0)) 0px 0px 0px 0px, + rgb(var(--background-color-0), 0.1) 0px 0px 0px 1px, + rgb(var(--text-color-alt), 0.1) 0px 1px 3px 0px, + rgb(var(--text-color-alt), 0.1) 0px 1px 2px -1px, + 0px 5px 8px -2px rgb(var(--text-color-alt), 0.2); + /* transform: translateY(-4px); */ +} + +#bento .bento-card h4 { + margin-bottom: 10px; +} +#bento .bento-card p { + color: rgb(var(--text-color-alt)); +} +#bento .bento-card:hover p { + color: rgba(var(--text-color-main), 0.9); +} + +#bento .bento-outline-effect:hover { + background-color: rgba(var(--background-color-0), 0.95); +} + +.div1 { + grid-area: 1 / 1 / 2 / 2; +} +.div2 { + grid-area: 1 / 2 / 3 / 3; +} +.div3 { + grid-area: 2 / 1 / 4 / 2; +} +.div4 { + grid-area: 3 / 2 / 4 / 3; +} +.div5 { + grid-area: 4 / 1 / 5 / 2; +} +.div6 { + grid-area: 5 / 1 / 6 / 2; +} +.div7 { + grid-area: 4 / 2 / 6 / 3; +} + +#bento .div3 .inner-container { + height: 100%; + display: flex; + flex-direction: column; + gap: 30px; +} + +#bento .div3 .theme-buttons { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 30px; + padding-bottom: 40px; + flex-grow: 1; +} + +#bento .div3 .theme-buttons button { + border: solid 2px transparent; + display: flex; + flex-grow: 1; + transition: 0.2s !important; +} + +#bento .div3 .theme-buttons button:first-child { + margin-right: -1px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + background-color: #d2d2ff; +} + +#bento .div3 .theme-buttons button:last-child { + margin-left: -1px; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + background-color: #323257; +} + +#bento + .div3 + .theme-buttons + button:first-child:not(.activated):is(:hover, :focus-visible) { + outline: none; + background-color: #bebef3; + border-color: transparent; +} + +#bento + .div3 + .theme-buttons + button:first-child:is(.activated, :hover, :focus-visible) { + outline: none; + background-color: #bebef3; + border-color: #323257; +} + +#bento + .div3 + .theme-buttons + button:last-child:not(.activated):is(:hover, :focus-visible) { + outline: none; + background-color: #434369; + border-color: transparent; +} + +#bento + .div3 + .theme-buttons + button:last-child:is(.activated, :hover, :focus-visible) { + outline: none; + background-color: #434369; + border-color: #d2d2ff; +} + +#bento .div3 .theme-buttons button svg { + padding: 25%; + transition: 0.5s !important; +} + +#bento .div3 .theme-buttons button.activated:first-child svg { + rotate: 180deg; +} + +#bento .div3 .theme-buttons button.activated:last-child svg { + scale: -1 1; +} + +#bento .div3 .theme-buttons button:first-child svg path { + stroke: black; +} + +#bento .div3 .theme-buttons button:last-child svg path { + stroke: white; +} + +/* ------------------------------------------------------------------------ */ +/* PARALAX ITEMS (in mobile first) */ +/* ------------------------------------------------------------------------ */ + +.parallax { + position: absolute; + width: 100%; + margin-top: -25%; +} + +.parallax-items { + position: relative; + width: 100%; +} + +.b-right { + position: absolute; + right: 0; + width: 200px; +} + +.b-left { + width: 250px; +} +.blob { + opacity: 0.5; + filter: blur(50px); + will-change: transform; +} +.blob path { + fill: rgb(var(--text-color-alt)); +} + +@media only screen and (min-width: 869px) { + /* This for desktop media */ + .parallax { + margin-top: 0; + } +} + +/* -------------------------------------------------------------------------- */ +/* FLOATING SECTIONS (community & open-source sections) */ +/* -------------------------------------------------------------------------- */ + +.floating-section { + margin-top: 400px; + box-sizing: border-box; + transition: opacity 2s; + width: 100%; + display: flex; + flex-flow: column nowrap; + align-items: center; + /* justify-content: center; */ + gap: 75px; +} + +.floating-section a { + color: rgba(var(--text-color-main), 0.9); + text-decoration-color: rgba(var(--text-color-main), 0); + transition: text-decoration-color 0.1s; +} + +.floating-section a:hover { + text-decoration-color: rgba(var(--text-color-main), 1); +} + +.floating-section > h2 { + padding-inline: 10%; + text-align: center; + opacity: 0; + transform: translateY(-50px); + transition: opacity 2s, transform 1s; +} + +.floating-section > div { + width: 50%; + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + gap: 50px; +} + +.floating-section > div > :is(p, a) { + opacity: 0; + transform: translateY(-50px); + transition: opacity 2s, transform 1s; +} + +.floating-section p { + flex: 1; + font-size: var(--font-size-20); + color: rgb(var(--text-color-alt)); +} + +.floating-section > div > a { + width: 250px; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 2s, transform 2s, filter 0.2s; +} +.floating-section > div > a:is(:hover, :focus-visible) { + filter: drop-shadow(0 0 15px rgba(var(--text-color-main), 0.3)); +} +.floating-section .github-logo { + width: 180px; +} + +.floating-section .visible { + opacity: 1; + transform: translate(0, 0); +} + +#open-source p { + text-align: right; +} + +/* LAST CALL TO ACTION */ + +.last-call-to-action { + width: 50%; + margin: 0 auto; + margin-top: 300px; + text-align: center; + border: 2px solid rgba(var(--text-color-alt), 0.2); + border-radius: 10px; + + display: flex; + flex-flow: column nowrap; +} +.last-call-to-action h3 { + font-size: var(--font-size-24); +} +.last-call-to-action p { + color: rgb(var(--text-color-alt)); +} +.last-call-to-action a { + width: max-content; + margin: 0 auto; +} + +.last-call-to-action .outline-effect-div { + height: 100%; + background-color: rgb(var(--background-color-0)); + transition: 0.25s ease-in-out; + padding: 60px; + border-radius: 8px; + transition: background 0.2s; +} + +/* -------------------------------------------------------------------------- */ +/* FOOTER */ +/* -------------------------------------------------------------------------- */ + +.landing-page footer { + margin-top: 100px; + padding: 80px 50px; + background: radial-gradient( + circle at 90% 400%, + rgba(var(--text-color-alt), 0.2) 0, + transparent 100% + ); + border-top: 2px solid rgba(var(--text-color-alt), 0.5); + + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 100px; +} + +.landing-page .footer-logo { + height: 50px; + width: auto; + flex: 1; +} + +.landing-page ul.sitemap { + list-style: none; + flex: 2; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + gap: 30px 50px; +} + +.landing-page ul.sitemap li { + flex-basis: 200px; +} + +.landing-page ul.sitemap a { + text-decoration: none; + color: rgb(var(--text-color-alt)); + transition: 0.1s; +} +.landing-page ul.sitemap a:is(:hover, :focus-visible) { + color: rgb(var(--text-color-main)); +} +.landing-page ul.sitemap a:active { + opacity: 0.8; +} +.landing-page ul.sitemap a.disabled { + pointer-events: none; + opacity: 0.5; +} + +@media only screen and (max-width: 869px) { + .landing-page footer { + flex-flow: column nowrap; + } + .landing-page .footer-logo { + flex: auto; + } +} + +@media only screen and (max-width: 500px) { + .landing-page .nav-logo svg { + display: none; + } +} + +@media only screen and (max-width: 737px) { + #bento .bento-grid { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + #bento .bento-grid > div { + max-width: 400px; + } +} diff --git a/src/components/LandingPage/LandingPage.jsx b/src/components/LandingPage/LandingPage.jsx index 4431a7e..e9032b7 100644 --- a/src/components/LandingPage/LandingPage.jsx +++ b/src/components/LandingPage/LandingPage.jsx @@ -1,195 +1,346 @@ -import { useRef, useEffect, useContext, useState } from "react"; +import { useContext, useEffect, useRef, useState } from "react"; import { Link, useLocation, useNavigate } from "react-router-dom"; +import { AppContext } from "../../App"; import OutlineEffectDiv from "../generic/CustomDivs/OutlineEffectDiv"; -import { AppContext } from "../../App" // graphics -import EdpuLogo from "../graphics/EdpuLogo"; -import InfoTypoIcon from "../graphics/InfoTypoIcon"; -import UpArrow from "../graphics/UpArrow"; +import HoverFollowDiv from "../generic/CustomDivs/HoverFollowDiv"; +import DiscordFullLogo from "../graphics/DiscordFullLogo"; import EDPLogo from "../graphics/EDPLogo"; import EDPLogoFullWidth from "../graphics/EDPLogoFullWidth"; -import DiscordFullLogo from "../graphics/DiscordFullLogo"; +import EdpuLogo from "../graphics/EdpuLogo"; import GitHubFullLogo from "../graphics/GitHubFullLogo"; -import SunIcon from "../graphics/SunIcon"; -import MoonIcon from "../graphics/MoonIcon"; -import HoverFollowDiv from "../generic/CustomDivs/HoverFollowDiv"; +import InfoTypoIcon from "../graphics/InfoTypoIcon"; +import UpArrow from "../graphics/UpArrow"; import "./LandingPage.css"; -import "./LandingPage2.css"; export default function LandingPage({ token, accountsList }) { - const { isMobileLayout, isTabletLayout, actualDisplayTheme, useUserSettings } = useContext(AppContext); + const { + isMobileLayout, + isTabletLayout, + actualDisplayTheme, + useUserSettings, + } = useContext(AppContext); - const [isLoggedIn, setIsLoggedIn] = useState(token && accountsList.length > 0); // this one is different from the one in App.jsx + const [isLoggedIn, setIsLoggedIn] = useState( + token && accountsList.length > 0 + ); // this one is different from the one in App.jsx - const [isTop, setIsTop] = useState(true); - const [isScrollNAvigation, setIsScrollNavigation] = useState(false); - const homeSectionRef = useRef(null) - const communitySectionRef = useRef(null) - const openSourceSectionRef = useRef(null) + const [isTop, setIsTop] = useState(true); + const [isScrollNAvigation, setIsScrollNavigation] = useState(false); + const [scrollState, setScrollState] = useState(""); + const homeSectionRef = useRef(null); + const communitySectionRef = useRef(null); + const openSourceSectionRef = useRef(null); - const location = useLocation() - const navigate = useNavigate() + const location = useLocation(); + const navigate = useNavigate(); - const theme = useUserSettings("displayTheme") - const displayMode = useUserSettings("displayMode").get(); + const theme = useUserSettings("displayTheme"); + const displayMode = useUserSettings("displayMode").get(); - const changeTheme = () => { - theme.set(actualDisplayTheme === "light" ? "dark" : "light"); - }; + const changeTheme = () => { + theme.set(actualDisplayTheme === "light" ? "dark" : "light"); + }; - useEffect(() => { - setIsLoggedIn(token && accountsList.length > 0); - }, [token, accountsList]) + useEffect(() => { + setIsLoggedIn(token && accountsList.length > 0); + }, [token, accountsList]); - useEffect(() => { - const observer = new IntersectionObserver((intersections) => { - for (const intersection of intersections) { - if (intersection.isIntersecting) { - const elementChildren = intersection.target.children - const elements = [elementChildren[0], elementChildren[1].children[0], elementChildren[1].children[1]].flat(); - for (let i = 0; i <= elements.length; ++i) { - setTimeout(() => { - if (elements[i]) { - // elements[i].style.opacity = 1 - elements[i].classList.toggle("visible", true); - } - }, i * 200) - } + useEffect(() => { + const observer = new IntersectionObserver( + (intersections) => { + for (const intersection of intersections) { + if (intersection.isIntersecting) { + const elementChildren = intersection.target.children; + const elements = [ + elementChildren[0], + elementChildren[1].children[0], + elementChildren[1].children[1], + ].flat(); + for (let i = 0; i <= elements.length; ++i) { + setTimeout(() => { + if (elements[i]) { + // elements[i].style.opacity = 1 + elements[i].classList.toggle("visible", true); } + }, i * 200); } - }, { - rootMargin: "0px 0px -250px 0px", - threshold: 0.1, - }) - - if (communitySectionRef.current && openSourceSectionRef.current) { - observer.observe(communitySectionRef.current) - observer.observe(openSourceSectionRef.current) - return () => { - if (communitySectionRef.current) observer.unobserve(communitySectionRef.current) - if (openSourceSectionRef.current) observer.unobserve(openSourceSectionRef.current) - } + } } - }, []); + }, + { + rootMargin: "0px 0px -250px 0px", + threshold: 0.1, + } + ); - useEffect(() => { - const handleScroll = () => { - setIsTop(window.scrollY === 0); - }; - window.addEventListener("scroll", handleScroll); + if (communitySectionRef.current && openSourceSectionRef.current) { + observer.observe(communitySectionRef.current); + observer.observe(openSourceSectionRef.current); + return () => { + if (communitySectionRef.current) + observer.unobserve(communitySectionRef.current); + if (openSourceSectionRef.current) + observer.unobserve(openSourceSectionRef.current); + }; + } + }, []); - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, []); + useEffect(() => { + const handleScroll = () => { + setIsTop(window.scrollY === 0); + }; + window.addEventListener("scroll", handleScroll); - useEffect(() => { - if (!location.hash) { - navigate("#home", { replace: true }); - } - const section = document.getElementById(location.hash.slice(1)) - if (section) { - section.scrollIntoView({ block: (location.hash === "#home" ? "start" : "center") }) - } - }, [location.hash]); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + useEffect(() => { + if (!location.hash) { + navigate("#home", { replace: true }); + } + const section = document.getElementById(location.hash.slice(1)); + if (section) { + section.scrollIntoView({ + block: location.hash === "#home" ? "start" : "center", + }); + } + }, [location.hash]); - useEffect(() => { - const handleScroll = () => { - const parallaxItems = document.querySelectorAll(".parallax-item"); - let scrollPosition = window.scrollY; + useEffect(() => { + const handleScroll = () => { + const parallaxItems = document.querySelectorAll(".parallax-items"); + let scrollPosition = window.scrollY; - parallaxItems.forEach(item => { - let speed = item.getAttribute("data-speed"); - let yPos = -(scrollPosition * speed); - item.style.transform = `translateY(${yPos}px)`; - }); - } + parallaxItems.forEach((item) => { + let speed = item.getAttribute("data-speed"); + let yPos = -(scrollPosition * speed); + item.style.transform = `translateY(${yPos}px)`; + }); + }; - document.addEventListener("scroll", handleScroll); + document.addEventListener("scroll", handleScroll); - return () => { - document.removeEventListener("scroll", handleScroll); - } + return () => { + document.removeEventListener("scroll", handleScroll); + }; + }, []); - }, []) + useEffect(() => { + const handleRotate = () => { + const rotateItems = document.querySelectorAll(".rotate-item"); + let scrollPosition = window.scrollY; - return (
- {!isMobileLayout && } -
- -
Service open source non-affilié à Aplim
-
-

Découvrez Ecole Directe Plus

-

EDP offre une expérience unique avec une interface moderne et intuitive, enrichie de fonctionnalités exclusives, le tout de façon gratuite, libre et open-source.

- {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} -
-
- Capture d'écran du site + rotateItems.forEach((item) => { + let speed = item.getAttribute("rotate-speed"); + let degRotation = speed * scrollPosition * 2; + + item.style.transform = `rotate(${degRotation}deg)`; + }); + }; + + document.addEventListener("scroll", handleRotate); + + return () => { + document.removeEventListener("scroll", handleRotate); + }; + }, []); + + useEffect(() => { + const handleScroll = () => { + const scrollPosition = window.scrollY; + setScrollState(scrollPosition); + }; + window.addEventListener("scroll", handleScroll); + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + + return ( +
+ {!isMobileLayout && ( + + )} +
+ + + +
+ {" "} + + Service open source non-affilié à Aplim +
+
+

+ Découvrez{" "} + Ecole Directe Plus +

+

+ EDP offre une expérience unique avec une interface moderne et + intuitive, enrichie de fonctionnalités exclusives, le tout de façon + gratuite, libre et open-source. +

+ + {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} + +
+
+ Capture d'écran du site +
+
+
+ {displayMode !== "performance" && ( + <> +
+
+ + + +
+
+ + + +
-
-
- {(displayMode !== "performance") && <> - {/*
- - - -
*/} -
- - - + + )} +
+

+ Une multitude de
+ + fonctionnalités inédites + +

+
+ + +

Points forts

+

+ Découvrez vos talents cachés grâce à un aperçu rapide de vos + points forts. Parce que vous méritez de savoir à quel point + vous êtes incroyable, nous mettons en lumière les matières + dans lesquelles vous excellez. +

+ + + + +

Calcul automatique et instantané des moyennes

+

+ Fini les calculs laborieux à la main. EDP fait tout le boulot + pour vous. Parce que votre temps est précieux et doit être + consacré à des choses plus importantes, comme procrastiner + efficacement. +

+ + + + +
+

Thème de couleur

+

+ Choisissez votre camp : clair comme le jour ou sombre comme + votre âme. Passez du mode Clair au mode Sombre en un clic et + offrez à vos yeux le repos qu'ils méritent. Parce que même + votre interface se doit d'avoir du style. +

-
- - - -
- {/*
- - - -
*/} - } -
-

Une multitude de
fonctionnalités inédites

-
- - -

Points forts

-

Découvrez vos talents cachés grâce à un aperçu rapide de vos points forts. Parce que vous méritez de savoir à quel point vous êtes incroyable, nous mettons en lumière les matières dans lesquelles vous excellez.

- - - - -

Calcul automatique et instantané des moyennes

-

Fini les calculs laborieux à la main. EDP fait tout le boulot pour vous. Parce que votre temps est précieux et doit être consacré à des choses plus importantes, comme procrastiner efficacement.

- - - - -
-

Thème de couleur

-

Choisissez votre camp : clair comme le jour ou sombre comme votre âme. Passez du mode Clair au mode Sombre en un clic et offrez à vos yeux le repos qu'ils méritent. Parce que même votre interface se doit d'avoir du style.

-
- {/*
+ {/*
@@ -197,73 +348,190 @@ export default function LandingPage({ token, accountsList }) {
*/} - - - - -

Dernières notes

-

Un coup d'œil et vous saurez tout. Avec l'aperçu rapide des dernières notes, regarder vos résultats en vif pendant l'intercours sera plus rapide que la formule 1 de Max Verstappen.

- - - - -

Score de Streak

-

Atteignez le nirvana académique avec le Score de streak. Surpassez vous, cumulez les bonnes notes et débloquez des badges ! N'hésitez pas à flex quand vous avez une meilleure streak que vos amis.

- - - - -

Contrôles à venir

-

Restez aux aguets avec l'aperçu des prochains contrôles. Anticipez les futurs contrôles et organisez vos révisions comme un pro. Enfin, en théorie… on ne peut pas vous garantir que vous ne procrastinerez pas quand même.

- - - - -

Sécurité et confidentialité

-

Votre sécurité, notre priorité, parce qu’il n’y a que vous et votre conscience qui devez connaître vos petits secrets académiques. EDP ne collecte AUCUNE information personnelle ou personnellement identifiable sur les utilisateurs du service. En tant que service non-affilié à Aplim, nous utilisons l'API d'EcoleDirecte pour que vous ayez accès à vos informations.

- - -
-
-
-
-

Un communauté passionnée et bienveillante

-
- -

Rejoignez notre serveur Discord !
Vous pourrez y rencontrer les développeurs et discuter avec les membres les plus investis d'Ecole Directe Plus !

-
-
-
-

Un projet développé par des élèves, pour les élèves

-
-

EDP est un projet open source distribué sous licence MIT, n'importe qui peut participer !
Nous partageons en toute transparence le code source d'EDP sur notre dépôt GitHub. Ainsi, n'importe qui peut contribuer au projet, rapporter des bugs, ou auditer le code à la recherche de failles. C'est une garantie de sécurité, de fiabilité et de résilience.

- -
-
-
- -

Prêt à basculer sur Ecole Directe Plus ?

-

Il vous suffit d'identifiants EcoleDirecte

- {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} - + + + + +

Dernières notes

+

+ Un coup d'œil et vous saurez tout. Avec l'aperçu rapide des + dernières notes, regarder vos résultats en vif pendant + l'intercours sera plus rapide que la formule 1 de Max + Verstappen. +

+ + + + +

Score de Streak

+

+ Atteignez le nirvana académique avec le Score de streak. + Surpassez vous, cumulez les bonnes notes et débloquez des + badges ! N'hésitez pas à flex quand vous avez une meilleure + streak que vos amis. +

+ + + + +

Contrôles à venir

+

+ Restez aux aguets avec l'aperçu des prochains contrôles. + Anticipez les futurs contrôles et organisez vos révisions + comme un pro. Enfin, en théorie… on ne peut pas vous garantir + que vous ne procrastinerez pas quand même. +

+ + + + +

Sécurité et confidentialité

+

+ Votre sécurité, notre priorité, parce qu’il n’y a que vous et + votre conscience qui devez connaître vos petits secrets + académiques. EDP ne collecte AUCUNE information personnelle ou + personnellement identifiable sur les utilisateurs du service. + En tant que service non-affilié à Aplim, nous utilisons l'API + d'EcoleDirecte pour que vous ayez accès à vos informations. +

+ + +
-
- -
    -
  • Connexion
    • -
  • Confidentialité
    • -
  • Conditions d'utilisation
    • -
  • Faire un retour
    • -
  • Tableau de bord
    • -
  • Notes
    • -
  • Cahier de texte
    • -
  • Emploi du temps
    • -
  • Messagerie
    • -
  • Paramètres
    • -
  • Compte
    • -
  • EDP Unblock
    • -
- -
-
); -} \ No newline at end of file +
+
+

+ Un communauté passionnée{" "} + et bienveillante +

+
+ + + +

+ Rejoignez notre{" "} + + serveur Discord + {" "} + !
+ Vous pourrez y rencontrer les développeurs et discuter avec les + membres les plus investis d'Ecole Directe Plus ! +

+
+
+
+

+ Un projet développé{" "} + par des élèves,{" "} + pour les élèves +

+
+

+ EDP est un projet open source distribué sous licence MIT, n'importe + qui peut participer !
+ Nous partageons en toute transparence le code source d'EDP sur notre{" "} + + dépôt GitHub + + . Ainsi, n'importe qui peut contribuer au projet, rapporter des + bugs, ou auditer le code à la recherche de failles. C'est une + garantie de sécurité, de fiabilité et de résilience. +

+ + + +
+
+
+ +

Prêt à basculer sur Ecole Directe Plus ?

+

Il vous suffit d'identifiants EcoleDirecte

+ + {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} + + +
+
+ +
    +
  • + Connexion +
    • +
  • + Confidentialité +
    • +
  • + Conditions d'utilisation +
    • +
  • + Faire un retour +
    • +
  • + + Tableau de bord + +
    • +
  • + + Notes + +
    • +
  • + + Cahier de texte + +
    • +
  • + + Emploi du temps + +
    • +
  • + + Messagerie + +
    • +
  • + + Paramètres + +
    • +
  • + + Compte + +
    • +
  • + EDP Unblock +
    • +
+
+
+ ); +} diff --git a/src/components/LandingPage/LandingPage2.css b/src/components/LandingPage/LandingPage2.css deleted file mode 100644 index 23e4fd4..0000000 --- a/src/components/LandingPage/LandingPage2.css +++ /dev/null @@ -1,550 +0,0 @@ - - -html:has(.landing-page) { - overflow-x: hidden; - scroll-behavior: smooth; -} - -/* -------------------------------------------------------------------------- */ -/* HEADER MENU */ -/* -------------------------------------------------------------------------- */ - -.landing-page .nav-logo { - height: 100%; - padding: 1.7rem 1.4rem; - border-radius: 1rem; - display: flex; - align-items: center; - gap: 10px; - background-color: rgb(var(--background-color-2)); - text-decoration: none; - user-select: none; - cursor: default; -} - -.landing-page .nav-logo svg { - height: 100%; -} - -/* -------------------------------------------------------------------------- */ -/* HERO BANNER */ -/* -------------------------------------------------------------------------- */ - -#home { - width: 100%; - padding-top: 250px; -} - -#home::before { - /* that could be done with the hero-banner background, but it's necessary - to keep the height of hero-banner flexible in order to keep a coherent - stacking of elements, that's why we use ::before here */ - content: ""; - z-index: -1; - width: 100%; - height: calc(min(100vh, 1100px) + 2px); - position: absolute; - top: 0; - border-bottom: 2px solid rgba(var(--text-color-alt), .5); - background: radial-gradient(circle at bottom left, rgba(var(--text-color-alt), .3) 0, rgba(var(--text-color-alt), .1) 50%, transparent 100%); -} - -/* AFFILIATION DISCLAIMER */ - -.landing-page .affiliation-disclaimer { - font-size: var(--font-size-13); - background: rgb(var(--text-color-alt), .1); - color: rgb(var(--text-color-alt)); - border: 1px solid rgb(var(--text-color-alt), .2); - border-radius: 15px; - width: max-content; - padding: 5px 10px; - margin: 0 auto; - margin-bottom: 30px; - display: flex; - align-items: center; - flex-flow: row nowrap; - gap: 8px; -} -.landing-page .affiliation-disclaimer svg { - height: 12px; - transform: scale(1.6); -} -.landing-page .affiliation-disclaimer svg path { - stroke: rgb(var(--text-color-alt)); -} - -/* HERO CONTENT */ - -.landing-page .text-center { - /* position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); */ - width: min(654px, 100%); - margin: 0 auto; - padding-inline: 10px; - /* margin-top: 300px; */ - text-align: center; -} - -.landing-page h1 { - font-size: var(--font-size-36); -} -.landing-page .heading-emphasis { - color: rgb(var(--text-color-alt)); -} -#home p { - color: rgb(var(--text-color-alt)); - margin: 0 auto; - margin-top: 20px; -} - -.landing-page .login-call-to-action { - display: inline-block; - margin-top: 45px; - text-decoration: none; - border: 2px solid rgb(var(--text-color-main)); - border-radius: 10px; - font-weight: var(--font-weight-semi-bold); - padding: 10px 15px; - transition: .2s; - outline: none; - overflow: hidden; -} -.landing-page .login-call-to-action::after { - content: "-->"; - display: inline-block; - white-space: nowrap; - padding: 0; - opacity: 0; - width: 0; - transition: .2s; -} - - -.landing-page .login-call-to-action:is(:hover, :focus-visible) { - background-color: rgb(var(--text-color-main)); - color: rgb(var(--text-color-main-reverse)); - box-shadow: 0 0 20px rgb(var(--text-color-main), .3); -} -.landing-page .login-call-to-action:is(:hover, :focus-visible)::after { - content: "-->"; - opacity: 1; - padding-left: 10px; - width: 35px; - color: rgb(var(--text-color-main-reverse)); -} - -.landing-page .login-call-to-action:active { - opacity: .6; -} - -.landing-page .fade-out-image { - margin: 0 auto; - margin-top: 100px; - width: min(1200px, calc(100% - 40px)); - overflow: hidden; - position: relative; - transition: transform .3s ease; -} -.landing-page .fade-out-image:has(.mobile) { - width: min(350px, calc(100% - 40px)); -} -.landing-page .fade-out-image:has(.tablet) { - width: min(450px, calc(100% - 40px)); -} -.landing-page .fade-out-image img { - width: 100%; - display: block; - border: 1px solid rgba(var(--text-color-alt), .2); - border-radius: 10px; -} -.landing-page .fade-out-image::after { - content: ""; - background: linear-gradient(180deg, transparent, rgb(var(--background-color-0)) 90%, rgb(var(--background-color-0))); - height: 90%; - bottom: -1px; - left: -1px; - width: calc(100% + 2px); - position: absolute; -} - -.landing-page .section-title { - font-size: var(--font-size-32) -} - -/* -------------------------------------------------------------------------- */ -/* FEATURES OVERVIEW */ -/* -------------------------------------------------------------------------- */ - -#bento { - margin-top: 200px; - display: flex; - flex-flow: column nowrap; - width: min(740px, 100%); - gap: 100px; -} - -#bento .bento-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - grid-template-rows: repeat(5, minmax(0, 1fr)); - gap: 20px; - /* height: 700px; */ -} - -#bento .bento-card { - border: 2px solid rgba(var(--text-color-alt), .2); - border-radius: 10px; - box-shadow: rgb(var(--background-color-0)) 0px 0px 0px 0px, rgb(var(--background-color-0), .1) 0px 0px 0px 1px, rgb(var(--text-color-alt), .1) 0px 1px 3px 0px, rgb(var(--text-color-alt), .1) 0px 1px 2px -1px; -} - -#bento .bento-outline-effect { - height: 100%; - background-color: rgb(var(--background-color-0)); - padding: 20px; - border-radius: 8px; - transition: background .2s; -} - -#bento .bento-card:hover { - /* scale: 1.03; */ - box-shadow: rgb(var(--background-color-0)) 0px 0px 0px 0px, rgb(var(--background-color-0), .1) 0px 0px 0px 1px, rgb(var(--text-color-alt), .1) 0px 1px 3px 0px, rgb(var(--text-color-alt), .1) 0px 1px 2px -1px, 0px 5px 8px -2px rgb(var(--text-color-alt), .2); - /* transform: translateY(-4px); */ -} - -#bento .bento-card h4 { - margin-bottom: 10px; -} -#bento .bento-card p { - color: rgb(var(--text-color-alt)); -} -#bento .bento-card:hover p { - color: rgba(var(--text-color-main), .9); -} - -#bento .bento-outline-effect:hover { - background-color: rgba(var(--background-color-0), .95); -} - -.div1 { grid-area: 1 / 1 / 2 / 2; } -.div2 { grid-area: 1 / 2 / 3 / 3; } -.div3 { grid-area: 2 / 1 / 4 / 2; } -.div4 { grid-area: 3 / 2 / 4 / 3; } -.div5 { grid-area: 4 / 1 / 5 / 2; } -.div6 { grid-area: 5 / 1 / 6 / 2; } -.div7 { grid-area: 4 / 2 / 6 / 3; } - -#bento .div3 .inner-container { - height: 100%; - display: flex; - flex-direction: column; - gap: 30px; -} - -#bento .div3 .theme-buttons { - width: 100%; - display: flex; - justify-content: center; - align-items: center; - padding: 30px; - padding-bottom: 40px; - flex-grow: 1; -} - -#bento .div3 .theme-buttons button { - border: solid 2px transparent; - display: flex; - flex-grow: 1; - transition: .2s !important; -} - -#bento .div3 .theme-buttons button:first-child { - margin-right: -1px; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - background-color: #D2D2FF; -} - -#bento .div3 .theme-buttons button:last-child { - margin-left: -1px; - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; - background-color: #323257; -} - -#bento .div3 .theme-buttons button:first-child:not(.activated):is(:hover, :focus-visible) { - outline: none; - background-color: #BEBEF3; - border-color: transparent; -} - -#bento .div3 .theme-buttons button:first-child:is(.activated, :hover, :focus-visible) { - outline: none; - background-color: #BEBEF3; - border-color: #323257; -} - -#bento .div3 .theme-buttons button:last-child:not(.activated):is(:hover, :focus-visible) { - outline: none; - background-color: #434369; - border-color: transparent; -} - -#bento .div3 .theme-buttons button:last-child:is(.activated, :hover, :focus-visible) { - outline: none; - background-color: #434369; - border-color: #D2D2FF; -} - -#bento .div3 .theme-buttons button svg { - padding: 25%; - transition: .5s !important; -} - -#bento .div3 .theme-buttons button.activated:first-child svg { - rotate: 180deg; -} - -#bento .div3 .theme-buttons button.activated:last-child svg { - scale: -1 1; -} - -#bento .div3 .theme-buttons button:first-child svg path{ - stroke: black; -} - -#bento .div3 .theme-buttons button:last-child svg path{ - stroke: white; -} - -/* -------------------------------------------------------------------------- */ -/* PARALAX ITEMS */ -/* -------------------------------------------------------------------------- */ - -.parallax-item { - position: absolute; -} -.parallax-item.blob1 { - left: -80px; - top: min(130vh, 1500px); - width: 200px; -} -.parallax-item.blob2 { - right: -70px; - top: min(130vh, 1500px); - width: 250px; -} - -.blob { - width: 100%; - opacity: .5; - filter: blur(50px); - animation: blob-rotate linear 10s infinite; -} -.blob path { - fill: rgb(var(--text-color-alt)) -} - -@keyframes blob-rotate { - from { - rotate: 0deg; - } - to { - rotate: 359deg; - } -} - - - -/* -------------------------------------------------------------------------- */ -/* FLOATING SECTIONS (community & open-source sections) */ -/* -------------------------------------------------------------------------- */ - -.floating-section { - margin-top: 400px; - box-sizing: border-box; - transition: opacity 2s; - width: 100%; - display: flex; - flex-flow: column nowrap; - align-items: center; - /* justify-content: center; */ - gap: 75px; -} - -.floating-section a { - color: rgba(var(--text-color-main), .9); - text-decoration-color: rgba(var(--text-color-main), 0); - transition: text-decoration-color .1s; -} - -.floating-section a:hover { - text-decoration-color: rgba(var(--text-color-main), 1); -} - -.floating-section > h2 { - padding-inline: 10%; - text-align: center; - opacity: 0; - transform: translateY(-50px); - transition: opacity 2s, transform 1s; -} - -.floating-section > div { - width: 50%; - display: flex; - flex-flow: row wrap; - justify-content: center; - align-items: center; - gap: 50px; -} - -.floating-section > div > :is(p, a) { - opacity: 0; - transform: translateY(-50px); - transition: opacity 2s, transform 1s; -} - -.floating-section p { - flex: 1; - font-size: var(--font-size-20); - color: rgb(var(--text-color-alt)); -} - -.floating-section > div > a { - width: 250px; - display: flex; - align-items: center; - justify-content: center; - transition: opacity 2s, transform 2s, filter .2s; -} -.floating-section > div > a:is(:hover, :focus-visible) { - filter: drop-shadow(0 0 15px rgba(var(--text-color-main), .3)) -} -.floating-section .github-logo { - width: 180px; -} - -.floating-section .visible { - opacity: 1; - transform: translate(0, 0); -} - -#open-source p { - text-align: right; -} - - -/* LAST CALL TO ACTION */ - -.last-call-to-action { - width: 50%; - margin: 0 auto; - margin-top: 300px; - text-align: center; - border: 2px solid rgba(var(--text-color-alt), .2); - border-radius: 10px; - - display: flex; - flex-flow: column nowrap; -} -.last-call-to-action h3 { - font-size: var(--font-size-24); -} -.last-call-to-action p { - color: rgb(var(--text-color-alt)); -} -.last-call-to-action a { - width: max-content; - margin: 0 auto; -} - -.last-call-to-action .outline-effect-div { - height: 100%; - background-color: rgb(var(--background-color-0)); - transition: .25s ease-in-out; - padding: 60px; - border-radius: 8px; - transition: background .2s; -} - -/* -------------------------------------------------------------------------- */ -/* FOOTER */ -/* -------------------------------------------------------------------------- */ - -.landing-page footer { - margin-top: 100px; - padding: 80px 50px; - background: radial-gradient(circle at 90% 400%, rgba(var(--text-color-alt), .2) 0, transparent 100%); - border-top: 2px solid rgba(var(--text-color-alt), .5); - - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: 100px; -} - -.landing-page .footer-logo { - height: 50px; - width: auto; - flex: 1; -} - -.landing-page ul.sitemap { - list-style: none; - flex: 2; - display: flex; - flex-flow: row wrap; - justify-content: space-between; - gap: 30px 50px; -} - -.landing-page ul.sitemap li { - flex-basis: 200px; -} - -.landing-page ul.sitemap a { - text-decoration: none; - color: rgb(var(--text-color-alt)); - transition: .1s; -} -.landing-page ul.sitemap a:is(:hover, :focus-visible) { - color: rgb(var(--text-color-main)); -} -.landing-page ul.sitemap a:active { - opacity: .8; -} -.landing-page ul.sitemap a.disabled { - pointer-events: none; - opacity: .5; -} - -@media only screen and (max-width: 869px) { - .landing-page footer { - flex-flow: column nowrap; - } - .landing-page .footer-logo { - flex: auto; - } -} - -@media only screen and (max-width: 500px) { - .landing-page .nav-logo svg { - display: none; - } -} - -@media only screen and (max-width: 737px) { - #bento .bento-grid { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - - #bento .bento-grid > div { - max-width: 400px; - } -} \ No newline at end of file From 0d979fd56f26af14103f0fdf6af2773154138865 Mon Sep 17 00:00:00 2001 From: name Date: Sat, 28 Sep 2024 16:24:16 +0200 Subject: [PATCH 02/10] change indentation 2 to 4 --- src/components/LandingPage/LandingPage.css | 939 +++++++++--------- src/components/LandingPage/LandingPage.jsx | 1033 +++++++++++--------- 2 files changed, 1027 insertions(+), 945 deletions(-) diff --git a/src/components/LandingPage/LandingPage.css b/src/components/LandingPage/LandingPage.css index b09a3ff..dacf6c2 100644 --- a/src/components/LandingPage/LandingPage.css +++ b/src/components/LandingPage/LandingPage.css @@ -1,227 +1,229 @@ /* Navigation Bar */ .landing-page header { - position: fixed; - width: 100%; - height: 55px; - top: 3rem; - padding-inline: 2rem; - z-index: 10; + position: fixed; + width: 100%; + height: 55px; + top: 3rem; + padding-inline: 2rem; + z-index: 10; - display: flex; - justify-content: space-between; - transition: top 0.3s; + display: flex; + justify-content: space-between; + transition: top 0.3s; } .nav-links { - /* Display nav-links in a flex container with a gap between items */ - border-radius: 999px; - display: flex; - padding: 0.7rem; - gap: 2rem; - height: 100%; + /* Display nav-links in a flex container with a gap between items */ + border-radius: 999px; + display: flex; + padding: 0.7rem; + gap: 2rem; + height: 100%; } .landing-page header .nav-links a[href="/edp-unblock"] { - /* Display EDP Unblock link as a flex container with a gap between items */ - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: 15px; + /* Display EDP Unblock link as a flex container with a gap between items */ + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 15px; } .landing-page header .edpu-logo { - /* Style the EDP Unblock logo */ - height: 20px; - transform: scale(1.3); - transition: 0.2s ease; + /* Style the EDP Unblock logo */ + height: 20px; + transform: scale(1.3); + transition: 0.2s ease; } #nav-bar .edpu-logo > path { - fill: rgba(var(--text-color-alt), 0.7); + fill: rgba(var(--text-color-alt), 0.7); } a[href="/edp-unblock"]:hover .edpu-logo > path { - fill: rgba(var(--text-color-main-reverse), 0.7) !important; + fill: rgba(var(--text-color-main-reverse), 0.7) !important; } .landing-page .nav-links a { - /* Style the links on the landing page */ - text-decoration: none; - padding: 1rem 1.6rem; - border-radius: 99px; - font-weight: 500; - transition: 0.2s ease; - display: flex; - align-items: center; - justify-content: center; + /* Style the links on the landing page */ + text-decoration: none; + padding: 1rem 1.6rem; + border-radius: 99px; + font-weight: 500; + transition: 0.2s ease; + display: flex; + align-items: center; + justify-content: center; } .landing-page - :is( - .nav-links a.selected, - .nav-links a:hover, - .nav-login:hover, - .change-theme:hover - ) { - background-color: rgba(var(--text-color-alt), 0.8); - color: rgba(var(--text-color-main-reverse), 0.8); + :is( + .nav-links a.selected, + .nav-links a:hover, + .nav-login:hover, + .change-theme:hover + ) { + background-color: rgba(var(--text-color-alt), 0.8); + color: rgba(var(--text-color-main-reverse), 0.8); } .landing-page - :is(.nav-logo, .nav-login, .change-theme, .nav-links, .go-to-top) { - background-color: rgb(var(--background-color-2), 0.7); - backdrop-filter: blur(4px); + :is(.nav-logo, .nav-login, .change-theme, .nav-links, .go-to-top) { + background-color: rgb(var(--background-color-2), 0.7); + backdrop-filter: blur(4px); } .landing-page .nav-links a:hover svg path { - fill: rgb(var(--text-color-main-reverse)); - transition: 0.1s; + fill: rgb(var(--text-color-main-reverse)); + transition: 0.1s; } .landing-logo { - height: 50px; - width: auto; + height: 50px; + width: auto; } /* Go to Top Button */ .go-to-top { - /* Style the go-to-top button */ - position: fixed; - z-index: 100; - display: flex; - padding: 14px; - /* background-color: rgb(var(--background-color-3)); */ - background-color: rgb(var(--background-color-2), 0.7); - cursor: pointer; - border-radius: 99px; - bottom: 26px; - right: 26px; - border: solid 1px transparent; - outline: none; - transition: 0.25s; + /* Style the go-to-top button */ + position: fixed; + z-index: 100; + display: flex; + padding: 14px; + /* background-color: rgb(var(--background-color-3)); */ + background-color: rgb(var(--background-color-2), 0.7); + cursor: pointer; + border-radius: 99px; + bottom: 26px; + right: 26px; + border: solid 1px transparent; + outline: none; + transition: 0.25s; } .go-to-top.active { - /* Style the active go-to-top button */ - opacity: 1; + /* Style the active go-to-top button */ + opacity: 1; } .go-to-top.unactive { - /* Style the inactive go-to-top button */ - opacity: 0.45; - bottom: -43px; - right: -62px; + /* Style the inactive go-to-top button */ + opacity: 0.45; + bottom: -43px; + right: -62px; } .go-to-top:is(:hover, :focus-visible) { - /* Style the hovered go-to-top button */ - transform: scale(1.1); - border-color: rgb(var(--text-color-alt)); + /* Style the hovered go-to-top button */ + transform: scale(1.1); + border-color: rgb(var(--text-color-alt)); } .go-to-top:active { - transform: scale(0.9); - opacity: 0.8; + transform: scale(0.9); + opacity: 0.8; } /* Up Arrow */ .up-arrow { - /* Style the up arrow */ - z-index: 110; - display: flex; - justify-content: center; - align-items: center; - height: 18px; - fill: rgb(var(--text-color-alt)); - transition: all 0.4s ease; - transform: rotate(270deg); + /* Style the up arrow */ + z-index: 110; + display: flex; + justify-content: center; + align-items: center; + height: 18px; + fill: rgb(var(--text-color-alt)); + transition: all 0.4s ease; + transform: rotate(270deg); } .go-to-top.active .up-arrow { - /* Style the active up arrow */ - transform: rotate(0deg); + /* Style the active up arrow */ + transform: rotate(0deg); } .landing-page .nav-buttons { - display: flex; - height: 100%; - gap: 10px; + display: flex; + height: 100%; + gap: 10px; } .landing-page .nav-buttons a { - height: 100%; - transition: 0.2s; - display: flex; - padding-inline: 2.6rem; - border-radius: 1rem; - text-decoration: none; - align-items: center; - justify-content: center; + height: 100%; + transition: 0.2s; + display: flex; + padding-inline: 2.6rem; + border-radius: 1rem; + text-decoration: none; + align-items: center; + justify-content: center; } .landing-page .change-theme { - transition: 0.2s; - display: flex; - position: relative; - padding: 2.65rem; - border: none; - border-radius: 1rem; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; + transition: 0.2s; + display: flex; + position: relative; + padding: 2.65rem; + border: none; + border-radius: 1rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; } .landing-page .change-theme::after { - /* Style the theme button's pseudo-elements */ - position: absolute; - content: ""; - border-radius: 100%; - width: 23px; - height: 23px; - transition: all 0.2s ease-in; + /* Style the theme button's pseudo-elements */ + position: absolute; + content: ""; + border-radius: 100%; + width: 23px; + height: 23px; + transition: all 0.2s ease-in; } .dark .landing-page .change-theme::after { - /* Style the theme button's before pseudo-element */ - background-color: #bebec880; - background-image: radial-gradient( - circle at 10% 20%, - #c8c8d2b3, - transparent 30% - ), - radial-gradient(circle at 30% 70%, #b4b4beb3, transparent 30%), - radial-gradient(circle at 70% 40%, #d2d2dcb3, transparent 30%), - radial-gradient(circle at 20% 60%, #bebec8b3, transparent 30%), - radial-gradient(circle at 50% 80%, #aaaab4b3, transparent 30%); - box-shadow: 1px 0 4px rgb(0, 0, 0); + /* Style the theme button's before pseudo-element */ + background-color: #bebec880; + background-image: radial-gradient( + circle at 10% 20%, + #c8c8d2b3, + transparent 30% + ), + radial-gradient(circle at 30% 70%, #b4b4beb3, transparent 30%), + radial-gradient(circle at 70% 40%, #d2d2dcb3, transparent 30%), + radial-gradient(circle at 20% 60%, #bebec8b3, transparent 30%), + radial-gradient(circle at 50% 80%, #aaaab4b3, transparent 30%); + box-shadow: 1px 0 4px rgb(0, 0, 0); } .light .landing-page .change-theme::after { - /* Style the theme button's after pseudo-element */ - background-color: #ffc85080; - background-image: radial-gradient( - circle at 10% 20%, - #ffc850b3, - transparent 30% - ), - radial-gradient(circle at 30% 70%, #ffb43c50, transparent 30%), - radial-gradient(circle at 70% 40%, #ffdc64b3, transparent 30%), - radial-gradient(circle at 20% 60%, #ffbe5ab3, transparent 30%), - radial-gradient(circle at 50% 80%, #ffd246b3, transparent 30%); - box-shadow: 0 0 0 1px #ffc850, 0 0 5px 0px #ffc850; + /* Style the theme button's after pseudo-element */ + background-color: #ffc85080; + background-image: radial-gradient( + circle at 10% 20%, + #ffc850b3, + transparent 30% + ), + radial-gradient(circle at 30% 70%, #ffb43c50, transparent 30%), + radial-gradient(circle at 70% 40%, #ffdc64b3, transparent 30%), + radial-gradient(circle at 20% 60%, #ffbe5ab3, transparent 30%), + radial-gradient(circle at 50% 80%, #ffd246b3, transparent 30%); + box-shadow: + 0 0 0 1px #ffc850, + 0 0 5px 0px #ffc850; } /* Login */ .landing-page .nav-login { - /* Style the login link */ - padding: 1.7rem; - font-weight: 500; - transition: all 0.3s ease; + /* Style the login link */ + padding: 1.7rem; + font-weight: 500; + transition: all 0.3s ease; } html:has(.landing-page) { - overflow-x: hidden; - scroll-behavior: smooth; + overflow-x: hidden; + scroll-behavior: smooth; } /* -------------------------------------------------------------------------- */ @@ -229,20 +231,20 @@ html:has(.landing-page) { /* -------------------------------------------------------------------------- */ .landing-page .nav-logo { - height: 100%; - padding: 1.7rem 1.4rem; - border-radius: 1rem; - display: flex; - align-items: center; - gap: 10px; - background-color: rgb(var(--background-color-2)); - text-decoration: none; - user-select: none; - cursor: default; + height: 100%; + padding: 1.7rem 1.4rem; + border-radius: 1rem; + display: flex; + align-items: center; + gap: 10px; + background-color: rgb(var(--background-color-2)); + text-decoration: none; + user-select: none; + cursor: default; } .landing-page .nav-logo svg { - height: 100%; + height: 100%; } /* -------------------------------------------------------------------------- */ @@ -250,158 +252,158 @@ html:has(.landing-page) { /* -------------------------------------------------------------------------- */ #home { - width: 100%; - padding-top: 250px; + width: 100%; + padding-top: 250px; } #home::before { - /* that could be done with the hero-banner background, but it's necessary + /* that could be done with the hero-banner background, but it's necessary to keep the height of hero-banner flexible in order to keep a coherent stacking of elements, that's why we use ::before here */ - content: ""; - z-index: -1; - width: 100%; + content: ""; + z-index: -1; + width: 100%; - height: calc(min(100vh, 1100px) + 2px); - position: absolute; - top: 0; + height: calc(min(100vh, 1100px) + 2px); + position: absolute; + top: 0; - border-bottom: 2px solid rgba(var(--text-color-alt), 0.5); - background: radial-gradient( - circle at bottom left, - rgba(var(--text-color-alt), 0.3) 0, - rgba(var(--text-color-alt), 0.1) 50%, - transparent 100% - ); + border-bottom: 2px solid rgba(var(--text-color-alt), 0.5); + background: radial-gradient( + circle at bottom left, + rgba(var(--text-color-alt), 0.3) 0, + rgba(var(--text-color-alt), 0.1) 50%, + transparent 100% + ); } /* AFFILIATION DISCLAIMER */ .landing-page .affiliation-disclaimer { - font-size: var(--font-size-13); - background: rgb(var(--text-color-alt), 0.1); - color: rgb(var(--text-color-alt)); - border: 1px solid rgb(var(--text-color-alt), 0.2); - border-radius: 15px; - width: max-content; - padding: 5px 10px; - margin: 0 auto; - margin-bottom: 30px; - display: flex; - align-items: center; - flex-flow: row nowrap; - gap: 8px; + font-size: var(--font-size-13); + background: rgb(var(--text-color-alt), 0.1); + color: rgb(var(--text-color-alt)); + border: 1px solid rgb(var(--text-color-alt), 0.2); + border-radius: 15px; + width: max-content; + padding: 5px 10px; + margin: 0 auto; + margin-bottom: 30px; + display: flex; + align-items: center; + flex-flow: row nowrap; + gap: 8px; } .landing-page .affiliation-disclaimer svg { - height: 12px; - transform: scale(1.6); + height: 12px; + transform: scale(1.6); } .landing-page .affiliation-disclaimer svg path { - stroke: rgb(var(--text-color-alt)); + stroke: rgb(var(--text-color-alt)); } /* HERO CONTENT */ .landing-page .text-center { - /* position: absolute; + /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */ - width: min(654px, 100%); - margin: 0 auto; - padding-inline: 10px; - /* margin-top: 300px; */ - text-align: center; + width: min(654px, 100%); + margin: 0 auto; + padding-inline: 10px; + /* margin-top: 300px; */ + text-align: center; } .landing-page h1 { - font-size: var(--font-size-36); + font-size: var(--font-size-36); } .landing-page .heading-emphasis { - color: rgb(var(--text-color-alt)); + color: rgb(var(--text-color-alt)); } #home p { - color: rgb(var(--text-color-alt)); - margin: 0 auto; - margin-top: 20px; + color: rgb(var(--text-color-alt)); + margin: 0 auto; + margin-top: 20px; } .landing-page .login-call-to-action { - display: inline-block; - margin-top: 45px; - text-decoration: none; - border: 2px solid rgb(var(--text-color-main)); - border-radius: 10px; - font-weight: var(--font-weight-semi-bold); - padding: 10px 15px; - transition: 0.2s; - outline: none; - overflow: hidden; + display: inline-block; + margin-top: 45px; + text-decoration: none; + border: 2px solid rgb(var(--text-color-main)); + border-radius: 10px; + font-weight: var(--font-weight-semi-bold); + padding: 10px 15px; + transition: 0.2s; + outline: none; + overflow: hidden; } .landing-page .login-call-to-action::after { - content: "-->"; - display: inline-block; - white-space: nowrap; - padding: 0; - opacity: 0; - width: 0; - transition: 0.2s; + content: "-->"; + display: inline-block; + white-space: nowrap; + padding: 0; + opacity: 0; + width: 0; + transition: 0.2s; } .landing-page .login-call-to-action:is(:hover, :focus-visible) { - background-color: rgb(var(--text-color-main)); - color: rgb(var(--text-color-main-reverse)); - box-shadow: 0 0 20px rgb(var(--text-color-main), 0.3); + background-color: rgb(var(--text-color-main)); + color: rgb(var(--text-color-main-reverse)); + box-shadow: 0 0 20px rgb(var(--text-color-main), 0.3); } .landing-page .login-call-to-action:is(:hover, :focus-visible)::after { - content: "-->"; - opacity: 1; - padding-left: 10px; - width: 35px; - color: rgb(var(--text-color-main-reverse)); + content: "-->"; + opacity: 1; + padding-left: 10px; + width: 35px; + color: rgb(var(--text-color-main-reverse)); } .landing-page .login-call-to-action:active { - opacity: 0.6; + opacity: 0.6; } .landing-page .fade-out-image { - margin: 0 auto; - margin-top: 100px; - width: min(1200px, calc(100% - 40px)); - overflow: hidden; - position: relative; - transition: transform 0.3s ease; + margin: 0 auto; + margin-top: 100px; + width: min(1200px, calc(100% - 40px)); + overflow: hidden; + position: relative; + transition: transform 0.3s ease; } .landing-page .fade-out-image:has(.mobile) { - width: min(350px, calc(100% - 40px)); + width: min(350px, calc(100% - 40px)); } .landing-page .fade-out-image:has(.tablet) { - width: min(450px, calc(100% - 40px)); + width: min(450px, calc(100% - 40px)); } .landing-page .fade-out-image img { - width: 100%; - display: block; - border: 1px solid rgba(var(--text-color-alt), 0.2); - border-radius: 10px; + width: 100%; + display: block; + border: 1px solid rgba(var(--text-color-alt), 0.2); + border-radius: 10px; } .landing-page .fade-out-image::after { - content: ""; - background: linear-gradient( - 180deg, - transparent, - rgb(var(--background-color-0)) 90%, - rgb(var(--background-color-0)) - ); - height: 90%; - bottom: -1px; - left: -1px; - width: calc(100% + 2px); - position: absolute; + content: ""; + background: linear-gradient( + 180deg, + transparent, + rgb(var(--background-color-0)) 90%, + rgb(var(--background-color-0)) + ); + height: 90%; + bottom: -1px; + left: -1px; + width: calc(100% + 2px); + position: absolute; } .landing-page .section-title { - font-size: var(--font-size-32); + font-size: var(--font-size-32); } /* -------------------------------------------------------------------------- */ @@ -409,177 +411,179 @@ html:has(.landing-page) { /* -------------------------------------------------------------------------- */ #bento { - margin-top: 200px; - display: flex; - flex-flow: column nowrap; - width: min(740px, 100%); - gap: 100px; + margin-top: 200px; + display: flex; + flex-flow: column nowrap; + width: min(740px, 100%); + gap: 100px; } #bento .bento-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - grid-template-rows: repeat(5, minmax(0, 1fr)); - gap: 20px; - /* height: 700px; */ + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: repeat(5, minmax(0, 1fr)); + gap: 20px; + /* height: 700px; */ } #bento .bento-card { - border: 2px solid rgba(var(--text-color-alt), 0.2); - border-radius: 10px; - box-shadow: rgb(var(--background-color-0)) 0px 0px 0px 0px, - rgb(var(--background-color-0), 0.1) 0px 0px 0px 1px, - rgb(var(--text-color-alt), 0.1) 0px 1px 3px 0px, - rgb(var(--text-color-alt), 0.1) 0px 1px 2px -1px; + border: 2px solid rgba(var(--text-color-alt), 0.2); + border-radius: 10px; + box-shadow: + rgb(var(--background-color-0)) 0px 0px 0px 0px, + rgb(var(--background-color-0), 0.1) 0px 0px 0px 1px, + rgb(var(--text-color-alt), 0.1) 0px 1px 3px 0px, + rgb(var(--text-color-alt), 0.1) 0px 1px 2px -1px; } #bento .bento-outline-effect { - height: 100%; - background-color: rgb(var(--background-color-0)); - padding: 20px; - border-radius: 8px; - transition: background 0.2s; + height: 100%; + background-color: rgb(var(--background-color-0)); + padding: 20px; + border-radius: 8px; + transition: background 0.2s; } #bento .bento-card:hover { - /* scale: 1.03; */ - box-shadow: rgb(var(--background-color-0)) 0px 0px 0px 0px, - rgb(var(--background-color-0), 0.1) 0px 0px 0px 1px, - rgb(var(--text-color-alt), 0.1) 0px 1px 3px 0px, - rgb(var(--text-color-alt), 0.1) 0px 1px 2px -1px, - 0px 5px 8px -2px rgb(var(--text-color-alt), 0.2); - /* transform: translateY(-4px); */ + /* scale: 1.03; */ + box-shadow: + rgb(var(--background-color-0)) 0px 0px 0px 0px, + rgb(var(--background-color-0), 0.1) 0px 0px 0px 1px, + rgb(var(--text-color-alt), 0.1) 0px 1px 3px 0px, + rgb(var(--text-color-alt), 0.1) 0px 1px 2px -1px, + 0px 5px 8px -2px rgb(var(--text-color-alt), 0.2); + /* transform: translateY(-4px); */ } #bento .bento-card h4 { - margin-bottom: 10px; + margin-bottom: 10px; } #bento .bento-card p { - color: rgb(var(--text-color-alt)); + color: rgb(var(--text-color-alt)); } #bento .bento-card:hover p { - color: rgba(var(--text-color-main), 0.9); + color: rgba(var(--text-color-main), 0.9); } #bento .bento-outline-effect:hover { - background-color: rgba(var(--background-color-0), 0.95); + background-color: rgba(var(--background-color-0), 0.95); } .div1 { - grid-area: 1 / 1 / 2 / 2; + grid-area: 1 / 1 / 2 / 2; } .div2 { - grid-area: 1 / 2 / 3 / 3; + grid-area: 1 / 2 / 3 / 3; } .div3 { - grid-area: 2 / 1 / 4 / 2; + grid-area: 2 / 1 / 4 / 2; } .div4 { - grid-area: 3 / 2 / 4 / 3; + grid-area: 3 / 2 / 4 / 3; } .div5 { - grid-area: 4 / 1 / 5 / 2; + grid-area: 4 / 1 / 5 / 2; } .div6 { - grid-area: 5 / 1 / 6 / 2; + grid-area: 5 / 1 / 6 / 2; } .div7 { - grid-area: 4 / 2 / 6 / 3; + grid-area: 4 / 2 / 6 / 3; } #bento .div3 .inner-container { - height: 100%; - display: flex; - flex-direction: column; - gap: 30px; + height: 100%; + display: flex; + flex-direction: column; + gap: 30px; } #bento .div3 .theme-buttons { - width: 100%; - display: flex; - justify-content: center; - align-items: center; - padding: 30px; - padding-bottom: 40px; - flex-grow: 1; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 30px; + padding-bottom: 40px; + flex-grow: 1; } #bento .div3 .theme-buttons button { - border: solid 2px transparent; - display: flex; - flex-grow: 1; - transition: 0.2s !important; + border: solid 2px transparent; + display: flex; + flex-grow: 1; + transition: 0.2s !important; } #bento .div3 .theme-buttons button:first-child { - margin-right: -1px; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - background-color: #d2d2ff; + margin-right: -1px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + background-color: #d2d2ff; } #bento .div3 .theme-buttons button:last-child { - margin-left: -1px; - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; - background-color: #323257; + margin-left: -1px; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + background-color: #323257; } #bento - .div3 - .theme-buttons - button:first-child:not(.activated):is(:hover, :focus-visible) { - outline: none; - background-color: #bebef3; - border-color: transparent; + .div3 + .theme-buttons + button:first-child:not(.activated):is(:hover, :focus-visible) { + outline: none; + background-color: #bebef3; + border-color: transparent; } #bento - .div3 - .theme-buttons - button:first-child:is(.activated, :hover, :focus-visible) { - outline: none; - background-color: #bebef3; - border-color: #323257; + .div3 + .theme-buttons + button:first-child:is(.activated, :hover, :focus-visible) { + outline: none; + background-color: #bebef3; + border-color: #323257; } #bento - .div3 - .theme-buttons - button:last-child:not(.activated):is(:hover, :focus-visible) { - outline: none; - background-color: #434369; - border-color: transparent; + .div3 + .theme-buttons + button:last-child:not(.activated):is(:hover, :focus-visible) { + outline: none; + background-color: #434369; + border-color: transparent; } #bento - .div3 - .theme-buttons - button:last-child:is(.activated, :hover, :focus-visible) { - outline: none; - background-color: #434369; - border-color: #d2d2ff; + .div3 + .theme-buttons + button:last-child:is(.activated, :hover, :focus-visible) { + outline: none; + background-color: #434369; + border-color: #d2d2ff; } #bento .div3 .theme-buttons button svg { - padding: 25%; - transition: 0.5s !important; + padding: 25%; + transition: 0.5s !important; } #bento .div3 .theme-buttons button.activated:first-child svg { - rotate: 180deg; + rotate: 180deg; } #bento .div3 .theme-buttons button.activated:last-child svg { - scale: -1 1; + scale: -1 1; } #bento .div3 .theme-buttons button:first-child svg path { - stroke: black; + stroke: black; } #bento .div3 .theme-buttons button:last-child svg path { - stroke: white; + stroke: white; } /* ------------------------------------------------------------------------ */ @@ -587,39 +591,39 @@ html:has(.landing-page) { /* ------------------------------------------------------------------------ */ .parallax { - position: absolute; - width: 100%; - margin-top: -25%; + position: absolute; + width: 100%; + margin-top: -25%; } .parallax-items { - position: relative; - width: 100%; + position: relative; + width: 100%; } .b-right { - position: absolute; - right: 0; - width: 200px; + position: absolute; + right: 0; + width: 200px; } .b-left { - width: 250px; + width: 250px; } .blob { - opacity: 0.5; - filter: blur(50px); - will-change: transform; + opacity: 0.5; + filter: blur(50px); + will-change: transform; } .blob path { - fill: rgb(var(--text-color-alt)); + fill: rgb(var(--text-color-alt)); } @media only screen and (min-width: 869px) { - /* This for desktop media */ - .parallax { - margin-top: 0; - } + /* This for desktop media */ + .parallax { + margin-top: 0; + } } /* -------------------------------------------------------------------------- */ @@ -627,110 +631,117 @@ html:has(.landing-page) { /* -------------------------------------------------------------------------- */ .floating-section { - margin-top: 400px; - box-sizing: border-box; - transition: opacity 2s; - width: 100%; - display: flex; - flex-flow: column nowrap; - align-items: center; - /* justify-content: center; */ - gap: 75px; + margin-top: 400px; + box-sizing: border-box; + transition: opacity 2s; + width: 100%; + display: flex; + flex-flow: column nowrap; + align-items: center; + /* justify-content: center; */ + gap: 75px; } .floating-section a { - color: rgba(var(--text-color-main), 0.9); - text-decoration-color: rgba(var(--text-color-main), 0); - transition: text-decoration-color 0.1s; + color: rgba(var(--text-color-main), 0.9); + text-decoration-color: rgba(var(--text-color-main), 0); + transition: text-decoration-color 0.1s; } .floating-section a:hover { - text-decoration-color: rgba(var(--text-color-main), 1); + text-decoration-color: rgba(var(--text-color-main), 1); } .floating-section > h2 { - padding-inline: 10%; - text-align: center; - opacity: 0; - transform: translateY(-50px); - transition: opacity 2s, transform 1s; + padding-inline: 10%; + text-align: center; + opacity: 0; + transform: translateY(-50px); + transition: + opacity 2s, + transform 1s; } .floating-section > div { - width: 50%; - display: flex; - flex-flow: row wrap; - justify-content: center; - align-items: center; - gap: 50px; + width: 50%; + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + gap: 50px; } .floating-section > div > :is(p, a) { - opacity: 0; - transform: translateY(-50px); - transition: opacity 2s, transform 1s; + opacity: 0; + transform: translateY(-50px); + transition: + opacity 2s, + transform 1s; } .floating-section p { - flex: 1; - font-size: var(--font-size-20); - color: rgb(var(--text-color-alt)); + flex: 1; + font-size: var(--font-size-20); + color: rgb(var(--text-color-alt)); } .floating-section > div > a { - width: 250px; - display: flex; - align-items: center; - justify-content: center; - transition: opacity 2s, transform 2s, filter 0.2s; + width: 250px; + display: flex; + align-items: center; + justify-content: center; + transition: + opacity 2s, + transform 2s, + filter 0.2s; } .floating-section > div > a:is(:hover, :focus-visible) { - filter: drop-shadow(0 0 15px rgba(var(--text-color-main), 0.3)); + filter: drop-shadow(0 0 15px rgba(var(--text-color-main), 0.3)); } .floating-section .github-logo { - width: 180px; + width: 180px; } .floating-section .visible { - opacity: 1; - transform: translate(0, 0); + opacity: 1; + transform: translate(0, 0); } #open-source p { - text-align: right; + text-align: right; } /* LAST CALL TO ACTION */ .last-call-to-action { - width: 50%; - margin: 0 auto; - margin-top: 300px; - text-align: center; - border: 2px solid rgba(var(--text-color-alt), 0.2); - border-radius: 10px; + width: 50%; + margin: 0 auto; + margin-top: 300px; + text-align: center; + border: 2px solid rgba(var(--text-color-alt), 0.2); + border-radius: 10px; - display: flex; - flex-flow: column nowrap; + display: flex; + flex-flow: column nowrap; } .last-call-to-action h3 { - font-size: var(--font-size-24); + font-size: var(--font-size-24); } .last-call-to-action p { - color: rgb(var(--text-color-alt)); + color: rgb(var(--text-color-alt)); } .last-call-to-action a { - width: max-content; - margin: 0 auto; + width: max-content; + margin: 0 auto; } .last-call-to-action .outline-effect-div { - height: 100%; - background-color: rgb(var(--background-color-0)); - transition: 0.25s ease-in-out; - padding: 60px; - border-radius: 8px; - transition: background 0.2s; + height: 100%; + background-color: rgb(var(--background-color-0)); + transition: 0.25s ease-in-out; + padding: 60px; + border-radius: 8px; + transition: background 0.2s; } /* -------------------------------------------------------------------------- */ @@ -738,80 +749,80 @@ html:has(.landing-page) { /* -------------------------------------------------------------------------- */ .landing-page footer { - margin-top: 100px; - padding: 80px 50px; - background: radial-gradient( - circle at 90% 400%, - rgba(var(--text-color-alt), 0.2) 0, - transparent 100% - ); - border-top: 2px solid rgba(var(--text-color-alt), 0.5); + margin-top: 100px; + padding: 80px 50px; + background: radial-gradient( + circle at 90% 400%, + rgba(var(--text-color-alt), 0.2) 0, + transparent 100% + ); + border-top: 2px solid rgba(var(--text-color-alt), 0.5); - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: 100px; + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 100px; } .landing-page .footer-logo { - height: 50px; - width: auto; - flex: 1; + height: 50px; + width: auto; + flex: 1; } .landing-page ul.sitemap { - list-style: none; - flex: 2; - display: flex; - flex-flow: row wrap; - justify-content: space-between; - gap: 30px 50px; + list-style: none; + flex: 2; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + gap: 30px 50px; } .landing-page ul.sitemap li { - flex-basis: 200px; + flex-basis: 200px; } .landing-page ul.sitemap a { - text-decoration: none; - color: rgb(var(--text-color-alt)); - transition: 0.1s; + text-decoration: none; + color: rgb(var(--text-color-alt)); + transition: 0.1s; } .landing-page ul.sitemap a:is(:hover, :focus-visible) { - color: rgb(var(--text-color-main)); + color: rgb(var(--text-color-main)); } .landing-page ul.sitemap a:active { - opacity: 0.8; + opacity: 0.8; } .landing-page ul.sitemap a.disabled { - pointer-events: none; - opacity: 0.5; + pointer-events: none; + opacity: 0.5; } @media only screen and (max-width: 869px) { - .landing-page footer { - flex-flow: column nowrap; - } - .landing-page .footer-logo { - flex: auto; - } + .landing-page footer { + flex-flow: column nowrap; + } + .landing-page .footer-logo { + flex: auto; + } } @media only screen and (max-width: 500px) { - .landing-page .nav-logo svg { - display: none; - } + .landing-page .nav-logo svg { + display: none; + } } @media only screen and (max-width: 737px) { - #bento .bento-grid { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - - #bento .bento-grid > div { - max-width: 400px; - } + #bento .bento-grid { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + #bento .bento-grid > div { + max-width: 400px; + } } diff --git a/src/components/LandingPage/LandingPage.jsx b/src/components/LandingPage/LandingPage.jsx index e9032b7..66431b1 100644 --- a/src/components/LandingPage/LandingPage.jsx +++ b/src/components/LandingPage/LandingPage.jsx @@ -17,330 +17,366 @@ import UpArrow from "../graphics/UpArrow"; import "./LandingPage.css"; export default function LandingPage({ token, accountsList }) { - const { - isMobileLayout, - isTabletLayout, - actualDisplayTheme, - useUserSettings, - } = useContext(AppContext); + const { + isMobileLayout, + isTabletLayout, + actualDisplayTheme, + useUserSettings, + } = useContext(AppContext); - const [isLoggedIn, setIsLoggedIn] = useState( - token && accountsList.length > 0 - ); // this one is different from the one in App.jsx + const [isLoggedIn, setIsLoggedIn] = useState( + token && accountsList.length > 0, + ); // this one is different from the one in App.jsx - const [isTop, setIsTop] = useState(true); - const [isScrollNAvigation, setIsScrollNavigation] = useState(false); - const [scrollState, setScrollState] = useState(""); - const homeSectionRef = useRef(null); - const communitySectionRef = useRef(null); - const openSourceSectionRef = useRef(null); + const [isTop, setIsTop] = useState(true); + const [isScrollNAvigation, setIsScrollNavigation] = useState(false); + const [scrollState, setScrollState] = useState(""); + const homeSectionRef = useRef(null); + const communitySectionRef = useRef(null); + const openSourceSectionRef = useRef(null); - const location = useLocation(); - const navigate = useNavigate(); + const location = useLocation(); + const navigate = useNavigate(); - const theme = useUserSettings("displayTheme"); - const displayMode = useUserSettings("displayMode").get(); + const theme = useUserSettings("displayTheme"); + const displayMode = useUserSettings("displayMode").get(); - const changeTheme = () => { - theme.set(actualDisplayTheme === "light" ? "dark" : "light"); - }; + const changeTheme = () => { + theme.set(actualDisplayTheme === "light" ? "dark" : "light"); + }; - useEffect(() => { - setIsLoggedIn(token && accountsList.length > 0); - }, [token, accountsList]); + useEffect(() => { + setIsLoggedIn(token && accountsList.length > 0); + }, [token, accountsList]); - useEffect(() => { - const observer = new IntersectionObserver( - (intersections) => { - for (const intersection of intersections) { - if (intersection.isIntersecting) { - const elementChildren = intersection.target.children; - const elements = [ - elementChildren[0], - elementChildren[1].children[0], - elementChildren[1].children[1], - ].flat(); - for (let i = 0; i <= elements.length; ++i) { - setTimeout(() => { - if (elements[i]) { - // elements[i].style.opacity = 1 - elements[i].classList.toggle("visible", true); + useEffect(() => { + const observer = new IntersectionObserver( + (intersections) => { + for (const intersection of intersections) { + if (intersection.isIntersecting) { + const elementChildren = intersection.target.children; + const elements = [ + elementChildren[0], + elementChildren[1].children[0], + elementChildren[1].children[1], + ].flat(); + for (let i = 0; i <= elements.length; ++i) { + setTimeout(() => { + if (elements[i]) { + // elements[i].style.opacity = 1 + elements[i].classList.toggle( + "visible", + true, + ); + } + }, i * 200); + } + } } - }, i * 200); - } - } + }, + { + rootMargin: "0px 0px -250px 0px", + threshold: 0.1, + }, + ); + + if (communitySectionRef.current && openSourceSectionRef.current) { + observer.observe(communitySectionRef.current); + observer.observe(openSourceSectionRef.current); + return () => { + if (communitySectionRef.current) + observer.unobserve(communitySectionRef.current); + if (openSourceSectionRef.current) + observer.unobserve(openSourceSectionRef.current); + }; } - }, - { - rootMargin: "0px 0px -250px 0px", - threshold: 0.1, - } - ); + }, []); - if (communitySectionRef.current && openSourceSectionRef.current) { - observer.observe(communitySectionRef.current); - observer.observe(openSourceSectionRef.current); - return () => { - if (communitySectionRef.current) - observer.unobserve(communitySectionRef.current); - if (openSourceSectionRef.current) - observer.unobserve(openSourceSectionRef.current); - }; - } - }, []); + useEffect(() => { + const handleScroll = () => { + setIsTop(window.scrollY === 0); + }; + window.addEventListener("scroll", handleScroll); - useEffect(() => { - const handleScroll = () => { - setIsTop(window.scrollY === 0); - }; - window.addEventListener("scroll", handleScroll); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, []); + useEffect(() => { + if (!location.hash) { + navigate("#home", { replace: true }); + } + const section = document.getElementById(location.hash.slice(1)); + if (section) { + section.scrollIntoView({ + block: location.hash === "#home" ? "start" : "center", + }); + } + }, [location.hash]); - useEffect(() => { - if (!location.hash) { - navigate("#home", { replace: true }); - } - const section = document.getElementById(location.hash.slice(1)); - if (section) { - section.scrollIntoView({ - block: location.hash === "#home" ? "start" : "center", - }); - } - }, [location.hash]); + useEffect(() => { + const handleScroll = () => { + const parallaxItems = document.querySelectorAll(".parallax-items"); + let scrollPosition = window.scrollY; - useEffect(() => { - const handleScroll = () => { - const parallaxItems = document.querySelectorAll(".parallax-items"); - let scrollPosition = window.scrollY; + parallaxItems.forEach((item) => { + let speed = item.getAttribute("data-speed"); + let yPos = -(scrollPosition * speed); + item.style.transform = `translateY(${yPos}px)`; + }); + }; - parallaxItems.forEach((item) => { - let speed = item.getAttribute("data-speed"); - let yPos = -(scrollPosition * speed); - item.style.transform = `translateY(${yPos}px)`; - }); - }; + document.addEventListener("scroll", handleScroll); - document.addEventListener("scroll", handleScroll); + return () => { + document.removeEventListener("scroll", handleScroll); + }; + }, []); - return () => { - document.removeEventListener("scroll", handleScroll); - }; - }, []); + useEffect(() => { + const handleRotate = () => { + const rotateItems = document.querySelectorAll(".rotate-item"); + let scrollPosition = window.scrollY; - useEffect(() => { - const handleRotate = () => { - const rotateItems = document.querySelectorAll(".rotate-item"); - let scrollPosition = window.scrollY; + rotateItems.forEach((item) => { + let speed = item.getAttribute("rotate-speed"); + let degRotation = speed * scrollPosition * 2; - rotateItems.forEach((item) => { - let speed = item.getAttribute("rotate-speed"); - let degRotation = speed * scrollPosition * 2; + item.style.transform = `rotate(${degRotation}deg)`; + }); + }; - item.style.transform = `rotate(${degRotation}deg)`; - }); - }; + document.addEventListener("scroll", handleRotate); - document.addEventListener("scroll", handleRotate); + return () => { + document.removeEventListener("scroll", handleRotate); + }; + }, []); - return () => { - document.removeEventListener("scroll", handleRotate); - }; - }, []); + useEffect(() => { + const handleScroll = () => { + const scrollPosition = window.scrollY; + setScrollState(scrollPosition); + }; + window.addEventListener("scroll", handleScroll); - useEffect(() => { - const handleScroll = () => { - const scrollPosition = window.scrollY; - setScrollState(scrollPosition); - }; - window.addEventListener("scroll", handleScroll); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, []); - - return ( -
- {!isMobileLayout && ( - - )} -
- - - -
- {" "} - - Service open source non-affilié à Aplim -
-
-

- Découvrez{" "} - Ecole Directe Plus -

-

- EDP offre une expérience unique avec une interface moderne et - intuitive, enrichie de fonctionnalités exclusives, le tout de façon - gratuite, libre et open-source. -

- - {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} - -
-
- Capture d'écran du site -
-
-
- {displayMode !== "performance" && ( - <> -
-
- + {!isMobileLayout && ( + + + Ecole Directe Plus + + {!isTabletLayout && !isMobileLayout && ( + + )} +
+ + {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} + +
+ + )} +
+ - - -
-
- - - -
-
- - )} -
-

- Une multitude de
- - fonctionnalités inédites - -

-
- - -

Points forts

-

- Découvrez vos talents cachés grâce à un aperçu rapide de vos - points forts. Parce que vous méritez de savoir à quel point - vous êtes incroyable, nous mettons en lumière les matières - dans lesquelles vous excellez. -

- - - - -

Calcul automatique et instantané des moyennes

-

- Fini les calculs laborieux à la main. EDP fait tout le boulot - pour vous. Parce que votre temps est précieux et doit être - consacré à des choses plus importantes, comme procrastiner - efficacement. -

- - - - -
-

Thème de couleur

-

- Choisissez votre camp : clair comme le jour ou sombre comme - votre âme. Passez du mode Clair au mode Sombre en un clic et - offrez à vos yeux le repos qu'ils méritent. Parce que même - votre interface se doit d'avoir du style. -

+ + +
+ {" "} + + Service open source non-affilié à Aplim +
+
+

+ Découvrez{" "} + + Ecole Directe Plus + +

+

+ EDP offre une expérience unique avec une interface + moderne et intuitive, enrichie de fonctionnalités + exclusives, le tout de façon gratuite, libre et + open-source. +

+ + {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} +
- {/*
+
+ Capture d'écran du site +
+
+
+ {displayMode !== "performance" && ( + <> +
+
+ + + +
+
+ + + +
+
+ + )} +
+

+ Une multitude de
+ + fonctionnalités inédites + +

+
+ + +

Points forts

+

+ Découvrez vos talents cachés grâce à un + aperçu rapide de vos points forts. Parce que + vous méritez de savoir à quel point vous + êtes incroyable, nous mettons en lumière les + matières dans lesquelles vous excellez. +

+ + + + +

+ Calcul automatique et instantané des + moyennes +

+

+ Fini les calculs laborieux à la main. EDP + fait tout le boulot pour vous. Parce que + votre temps est précieux et doit être + consacré à des choses plus importantes, + comme procrastiner efficacement. +

+ + + + +
+

Thème de couleur

+

+ Choisissez votre camp : clair comme le + jour ou sombre comme votre âme. Passez + du mode Clair au mode Sombre en un clic + et offrez à vos yeux le repos qu'ils + méritent. Parce que même votre interface + se doit d'avoir du style. +

+
+ {/*
@@ -348,190 +384,225 @@ export default function LandingPage({ token, accountsList }) {
*/} - - - - -

Dernières notes

-

- Un coup d'œil et vous saurez tout. Avec l'aperçu rapide des - dernières notes, regarder vos résultats en vif pendant - l'intercours sera plus rapide que la formule 1 de Max - Verstappen. -

- - - - -

Score de Streak

-

- Atteignez le nirvana académique avec le Score de streak. - Surpassez vous, cumulez les bonnes notes et débloquez des - badges ! N'hésitez pas à flex quand vous avez une meilleure - streak que vos amis. -

- - - - -

Contrôles à venir

-

- Restez aux aguets avec l'aperçu des prochains contrôles. - Anticipez les futurs contrôles et organisez vos révisions - comme un pro. Enfin, en théorie… on ne peut pas vous garantir - que vous ne procrastinerez pas quand même. -

- - - + + + +

Dernières notes

+

+ Un coup d'œil et vous saurez tout. Avec + l'aperçu rapide des dernières notes, + regarder vos résultats en vif pendant + l'intercours sera plus rapide que la formule + 1 de Max Verstappen. +

+ + + + +

Score de Streak

+

+ Atteignez le nirvana académique avec le + Score de streak. Surpassez vous, cumulez les + bonnes notes et débloquez des badges ! + N'hésitez pas à flex quand vous avez une + meilleure streak que vos amis. +

+ + + + +

Contrôles à venir

+

+ Restez aux aguets avec l'aperçu des + prochains contrôles. Anticipez les futurs + contrôles et organisez vos révisions comme + un pro. Enfin, en théorie… on ne peut pas + vous garantir que vous ne procrastinerez pas + quand même. +

+ + + + +

Sécurité et confidentialité

+

+ Votre sécurité, notre priorité, parce qu’il + n’y a que vous et votre conscience qui devez + connaître vos petits secrets académiques. + EDP ne collecte AUCUNE information + personnelle ou personnellement identifiable + sur les utilisateurs du service. En tant que + service non-affilié à Aplim, nous utilisons + l'API d'EcoleDirecte pour que vous ayez + accès à vos informations. +

+ + +
+
+
+
- -

Sécurité et confidentialité

-

- Votre sécurité, notre priorité, parce qu’il n’y a que vous et - votre conscience qui devez connaître vos petits secrets - académiques. EDP ne collecte AUCUNE information personnelle ou - personnellement identifiable sur les utilisateurs du service. - En tant que service non-affilié à Aplim, nous utilisons l'API - d'EcoleDirecte pour que vous ayez accès à vos informations. -

- - -
- - -
-

- Un communauté passionnée{" "} - et bienveillante -

-
- - - -

- Rejoignez notre{" "} - - serveur Discord - {" "} - !
- Vous pourrez y rencontrer les développeurs et discuter avec les - membres les plus investis d'Ecole Directe Plus ! -

-
-
-
-

- Un projet développé{" "} - par des élèves,{" "} - pour les élèves -

-
-

- EDP est un projet open source distribué sous licence MIT, n'importe - qui peut participer !
- Nous partageons en toute transparence le code source d'EDP sur notre{" "} - + Un communauté{" "} + passionnée et{" "} + bienveillante + +

+ + + +

+ Rejoignez notre{" "} + + serveur Discord + {" "} + !
+ Vous pourrez y rencontrer les développeurs et discuter + avec les membres les plus investis d'Ecole Directe Plus + ! +

+
+
+
- dépôt GitHub - - . Ainsi, n'importe qui peut contribuer au projet, rapporter des - bugs, ou auditer le code à la recherche de failles. C'est une - garantie de sécurité, de fiabilité et de résilience. -

- - - +

+ Un projet développé{" "} + par des élèves + ,{" "} + + pour les élèves + +

+
+

+ EDP est un projet open source distribué sous licence + MIT, n'importe qui peut participer !
+ Nous partageons en toute transparence le code source + d'EDP sur notre{" "} + + dépôt GitHub + + . Ainsi, n'importe qui peut contribuer au projet, + rapporter des bugs, ou auditer le code à la recherche de + failles. C'est une garantie de sécurité, de fiabilité et + de résilience. +

+ + + +
+
+
+ +

Prêt à basculer sur Ecole Directe Plus ?

+

Il vous suffit d'identifiants EcoleDirecte

+ + {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} + + +
+
+ +
    +
  • + Connexion +
    • +
  • + Confidentialité +
    • +
  • + Conditions d'utilisation +
    • +
  • + Faire un retour +
    • +
  • + + Tableau de bord + +
    • +
  • + + Notes + +
    • +
  • + + Cahier de texte + +
    • +
  • + + Emploi du temps + +
    • +
  • + + Messagerie + +
    • +
  • + + Paramètres + +
    • +
  • + + Compte + +
    • +
  • + EDP Unblock +
    • +
+
- -
- -

Prêt à basculer sur Ecole Directe Plus ?

-

Il vous suffit d'identifiants EcoleDirecte

- - {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} - - -
-
- -
    -
  • - Connexion -
    • -
  • - Confidentialité -
    • -
  • - Conditions d'utilisation -
    • -
  • - Faire un retour -
    • -
  • - - Tableau de bord - -
    • -
  • - - Notes - -
    • -
  • - - Cahier de texte - -
    • -
  • - - Emploi du temps - -
    • -
  • - - Messagerie - -
    • -
  • - - Paramètres - -
    • -
  • - - Compte - -
    • -
  • - EDP Unblock -
    • -
-
- - ); + ); } From 9c6443db2fd2a7c389bd79b0d7dc6d72cf9244a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= Date: Sat, 12 Oct 2024 23:45:30 +0200 Subject: [PATCH 03/10] fix(Messaging): disable messages number limit --- src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index 3a40d3f..4b0e537 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1721,7 +1721,7 @@ export default function App({ edpFetch }) { anneeMessages: getUserSettingValue("isSchoolYearEnabled") ? getUserSettingValue("schoolYear").join("-") : getCurrentSchoolYear().join("-"), } edpFetch( - getProxiedURL(`https://api.ecoledirecte.com/v3/${accountsListState[userId].accountType === "E" ? "eleves/" + accountsListState[userId].id : "familles/" + accountsListState[userId].familyId}/messages.awp?force=false&typeRecuperation=received&idClasseur=${folderId}&orderBy=date&order=desc&query=&onlyRead=&page=0&itemsPerPage=100&getAll=0&verbe=get&v=${apiVersion}`, true), + getProxiedURL(`https://api.ecoledirecte.com/v3/${accountsListState[userId].accountType === "E" ? "eleves/" + accountsListState[userId].id : "familles/" + accountsListState[userId].familyId}/messages.awp?force=false&typeRecuperation=received&idClasseur=${folderId}&orderBy=date&order=desc&query=&onlyRead=&getAll=1&verbe=get&v=${apiVersion}`, true), { method: "POST", headers: { From a893f53cda88e49540e05728f816fa5e277d1251 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= Date: Wed, 16 Oct 2024 11:51:21 +0200 Subject: [PATCH 04/10] feat(Inbox): kick regexp search since it's not well implemented --- src/components/app/Messaging/Inbox.jsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/app/Messaging/Inbox.jsx b/src/components/app/Messaging/Inbox.jsx index 87e1e02..e71d741 100644 --- a/src/components/app/Messaging/Inbox.jsx +++ b/src/components/app/Messaging/Inbox.jsx @@ -55,15 +55,21 @@ export default function Inbox({ selectedMessage, setSelectedMessage, selectedFol } const filterResearch = (message) => { - let regexp; + // let regexp; + let query = removeAccents(search.toLowerCase()); + if (query === "") { + return true; + } + console.log("filterResearch ~ query:", query) try { - regexp = new RegExp(removeAccents(search.toLowerCase())); + // regexp = new RegExp(removeAccents(search.toLowerCase())); } catch { return -1 } const filterBy = [message.subject, message.from.name, message.content?.content, message.files?.map((file) => file.name)].flat(); for (let filter of filterBy) { if (filter) { filter = removeAccents(filter.toLowerCase()); - if (regexp.test(filter)) { + // if (regexp.test(filter)) { + if (filter.includes(query)) { return true; } } From 219bfb404899432ab633e93e0ae91d8c531aa592 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= Date: Wed, 16 Oct 2024 12:01:41 +0200 Subject: [PATCH 05/10] fix(Dashboard > homeworks): file pop-up was always empty --- src/components/app/Dashboard/Dashboard.jsx | 16 ++++++++++++++-- src/components/app/Messaging/Inbox.jsx | 1 - 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/app/Dashboard/Dashboard.jsx b/src/components/app/Dashboard/Dashboard.jsx index ef9fe89..0a1fb9f 100644 --- a/src/components/app/Dashboard/Dashboard.jsx +++ b/src/components/app/Dashboard/Dashboard.jsx @@ -17,6 +17,8 @@ import UpcomingAssignments from "../Homeworks/UpcomingAssignments"; import PopUp from "../../generic/PopUps/PopUp"; import "./Dashboard.css"; +import { formatDateRelative } from "../../../utils/date"; +import FileComponent from "../../generic/FileComponent"; export default function Dashboard({ fetchUserGrades, grades, fetchHomeworks, activeAccount, isLoggedIn, useUserData, sortGrades, isTabletLayout }) { const navigate = useNavigate(); @@ -120,8 +122,18 @@ export default function Dashboard({ fetchUserGrades, grades, fetchHomeworks, act {selectedTask.sessionContent} } {(hashParameters.length > 2 && hashParameters[2] === "f" && selectedTask) && { navigate(`${hashParameters[0]};${hashParameters[1]}`, { replace: true }) }}> -

Fichiers

-
{selectedTask.file}
+
+

Fichiers joints

+

{selectedTask.subject} • {formatDateRelative(new Date(selectedTask.addDate))}

+
+
+
+

Note : maintenir pour télécharger

+ {selectedTask.type === "task" + ? selectedTask.files.map((file) => ) + : selectedTask.sessionContentFiles.map((file) => )} +
+
} ) diff --git a/src/components/app/Messaging/Inbox.jsx b/src/components/app/Messaging/Inbox.jsx index e71d741..ae5f2e6 100644 --- a/src/components/app/Messaging/Inbox.jsx +++ b/src/components/app/Messaging/Inbox.jsx @@ -60,7 +60,6 @@ export default function Inbox({ selectedMessage, setSelectedMessage, selectedFol if (query === "") { return true; } - console.log("filterResearch ~ query:", query) try { // regexp = new RegExp(removeAccents(search.toLowerCase())); } catch { return -1 } From 1a4720f31839642ec33009e64a0ac4850987d5c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= Date: Wed, 16 Oct 2024 18:27:35 +0200 Subject: [PATCH 06/10] fix: now detects teacher accounts and reports to the user that it's not supported yet --- src/App.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 4b0e537..d62fc13 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -71,7 +71,7 @@ function consoleLogEDPLogo() { consoleLogEDPLogo(); const currentEDPVersion = "0.4.0"; -const apiVersion = "4.60.5"; +const apiVersion = "4.64.0"; // secret webhooks const carpeConviviale = "CARPE_CONVIVIALE_WEBHOOK_URL"; @@ -1355,7 +1355,12 @@ export default function App({ edpFetch }) { } let token = response.token // collecte du token let accountsList = []; - let accounts = response.data.accounts[0]; + let accounts = response.data.accounts.find((account) => account.typeCompte !== "P") ?? response.data.accounts[0]; + if (response.data.accounts.some((account) => account.typeCompte === "P")) { + messages.submitButtonText = "Échec de la connexion"; + messages.submitErrorMessage = "Les comptes enseignants ne sont pas supportés par Ecole Directe Plus"; + return; + } const accountType = accounts.typeCompte; // collecte du type de compte if (accountType === "E") { // compte élève From 8ed7630a45a67f3c238fafea50f03b9ed6423306 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= Date: Sun, 20 Oct 2024 00:17:44 +0200 Subject: [PATCH 07/10] feat: link with EDP-Unblock and adapt website behavior --- src/App.jsx | 21 +++++++++++++++++++-- src/components/EdpUnblock/EdpUnblock.jsx | 13 ++++++++++--- src/components/Login/Login.css | 4 ++++ src/components/Login/Login.jsx | 19 +++++++++++-------- src/components/Root.jsx | 7 ++++--- src/utils/iframeRequest/iframe.js | 2 +- 6 files changed, 49 insertions(+), 17 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d62fc13..20418df 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -273,6 +273,7 @@ export default function App({ edpFetch }) { const [isTabletLayout, setIsTabletLayout] = useState(() => window.matchMedia(`(max-width: ${WINDOW_WIDTH_BREAKPOINT_TABLET_LAYOUT}px)`).matches); const [isFullScreen, setIsFullScreen] = useState(false); const [isEDPUnblockInstalled, setIsEDPUnblockInstalled] = useState(true); + const [isEDPUnblockActuallyInstalled, setIsEDPUnblockActuallyInstalled] = useState(false); const [isStandaloneApp, setIsStandaloneApp] = useState(((window.navigator.standalone ?? false) || window.matchMedia('(display-mode: standalone)').matches)); // détermine si l'utilisateur a installé le site comme application, permet également de modifier le layout en conséquence const [appKey, setAppKey] = useState(() => crypto.randomUUID()); const [proxyError, setProxyError] = useState(false); // en cas d'erreur sur le serveur proxy d'EDP (toutes les requêtes passent par lui pour contourner les restrictions d'EcoleDirecte) @@ -517,6 +518,20 @@ export default function App({ edpFetch }) { localStorage.setItem("oldActiveAccount", activeAccount) }, [activeAccount]); + useEffect(() => { + const handleMessage = (event) => { + if (event.data.type === "EDP_UNBLOCK") { + console.log("EDP Unblock v" + event.data.payload.version + " installed"); + setIsEDPUnblockActuallyInstalled(true); + } + }; + + window.addEventListener("message", handleMessage, false); + return () => { + window.removeEventListener("message", handleMessage, false); + } + }, []) + // fonctions de type utils pour modifier le userData function changeUserData(data, value) { setUserData((oldData) => { @@ -2142,6 +2157,8 @@ export default function App({ edpFetch }) { handleEdBan={handleEdBan} isEDPUnblockInstalled={isEDPUnblockInstalled} setIsEDPUnblockInstalled={setIsEDPUnblockInstalled} + isEDPUnblockActuallyInstalled={isEDPUnblockActuallyInstalled} + setIsEDPUnblockActuallyInstalled={setIsEDPUnblockActuallyInstalled} requireA2F={requireA2F} setRequireA2F={setRequireA2F} fetchA2F={fetchA2F} @@ -2161,7 +2178,7 @@ export default function App({ edpFetch }) { path: "feedback", }, { - element: , + element: , path: "edp-unblock", }, { @@ -2181,7 +2198,7 @@ export default function App({ edpFetch }) { path: "unsubscribe-emails", }, { - element: , + element: , path: "login", }, { diff --git a/src/components/EdpUnblock/EdpUnblock.jsx b/src/components/EdpUnblock/EdpUnblock.jsx index acb4452..c290ea3 100644 --- a/src/components/EdpUnblock/EdpUnblock.jsx +++ b/src/components/EdpUnblock/EdpUnblock.jsx @@ -14,6 +14,7 @@ import AboutArrow from "../graphics/AboutArrow"; import "./EdpUnblock.css"; import { getZoomedBoudingClientRect } from "../../utils/zoom"; +import BadgeCheck from "../graphics/BadgeCheck"; const browserLogosInfos = { @@ -59,7 +60,7 @@ console.log("userOS:", userOS, "userBrowser:", userBrowser); const compatibilityCondition = ((userOS === "iOS" && nonCompatibleIOSBrowsers.includes(userBrowser)) || (userOS === "Android" && nonCompatibleAndroidBrowsers.includes(userBrowser)) || (userOS === "MacOS" && userBrowser === "Safari")); -export default function EdpUnblock() { +export default function EdpUnblock({ isEDPUnblockActuallyInstalled }) { const location = useLocation(); const aboutRef = useRef(null); @@ -124,8 +125,14 @@ export default function EdpUnblock() { {compatibilityCondition && (userOS !== "iOS" ? <>

Malheureusement, l'extension Ecole Directe Plus Unblock n'est pas disponible sur votre navigateur. 😥

S'il vous plaît considérez l'usage d'un navigateur compatible comme le {userOS === "iOS" ? "navigateur Orion" : "navigateur Firefox"}.

:

Malheureusement, l'extension Ecole Directe Plus Unblock n'est pas compatible avec les navigateurs sur iOS et iPadOS. S'il vous plaît, considérez l'usage d'un autre appareil avec un système d'exploitation compatible comme un ordinateur sous Windows ou Linux, ou un appareil mobile sous Android.

) } {browserLogosInfos[userBrowser] && browserLogosInfos[userBrowser].logo} - {compatibilityCondition ? Navigateur incompatible : Ajouter l’extension} - {compatibilityCondition ?
✕
: } + {isEDPUnblockActuallyInstalled + ? Extension installée + : (compatibilityCondition ? Navigateur incompatible : Ajouter l’extension) + } + {isEDPUnblockActuallyInstalled + ? + : (compatibilityCondition ?
✕
: ) + } { location.hash === "#about" && scrollToAbout() }}> diff --git a/src/components/Login/Login.css b/src/components/Login/Login.css index 964e10b..2beba9c 100644 --- a/src/components/Login/Login.css +++ b/src/components/Login/Login.css @@ -13,7 +13,9 @@ border: 2px solid rgb(var(--text-color-alt)); border-radius: 10px; + opacity: 0; animation: edp-unblock-ad-pop-in .3s var(--timing-function-spring-effect) forwards; + animation-delay: .5s; transition: border-color .1s, background-color .1s; cursor: pointer; text-decoration: none; @@ -75,9 +77,11 @@ @keyframes edp-unblock-ad-pop-in { from { + opacity: 1; transform: translate(-50%, calc(-100% - 15px)); } to { + opacity: 1; transform: translate(-50%, 0); } } diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx index e9c11af..8075ade 100644 --- a/src/components/Login/Login.jsx +++ b/src/components/Login/Login.jsx @@ -12,20 +12,20 @@ import EDPLogoFullWidth from "../graphics/EDPLogoFullWidth"; import "./Login.css"; import ExtensionIcon from "../graphics/ExtensionIcon"; -if (sessionStorage.getItem('april') === "true"){ +if (sessionStorage.getItem('april') === "true") { import("./april.css").then((something) => { console.log("April fools styles loaded"); }) } -export default function Login({ keepLoggedIn, setKeepLoggedIn, A2FInfo, setRequireA2F, bufferUserIds, fetchLogin, logout, loginFromOldAuthInfo, currentEDPVersion }) { +export default function Login({ keepLoggedIn, setKeepLoggedIn, A2FInfo, setRequireA2F, bufferUserIds, fetchLogin, logout, loginFromOldAuthInfo, isEDPUnblockInstalledActuallyInstalled, currentEDPVersion }) { const location = useLocation(); if (localStorage.userSettings) { if (((JSON.parse(localStorage.userSettings)[0].displayTheme) !== "dark") && (localStorage.getItem('april') === "true")) { document.body.style.backgroundColor = "white"; } else { - document.body.style.backgroundColor = "" ; + document.body.style.backgroundColor = ""; } } @@ -35,11 +35,14 @@ export default function Login({ keepLoggedIn, setKeepLoggedIn, A2FInfo, setRequi - - - Installez l'extension EDP Unblock pour accéder en continu à Ecole Directe Plus ! Ecole Directe Plus a besoin de son extension pour accéder au contenu fourni par l’API d’EcoleDirecte. - En savoir plus - + {!isEDPUnblockInstalledActuallyInstalled + ? + + Installez l'extension EDP Unblock pour accéder en continu à Ecole Directe Plus ! Ecole Directe Plus a besoin de son extension pour accéder au contenu fourni par l’API d’EcoleDirecte. + En savoir plus + + : null + } diff --git a/src/components/Root.jsx b/src/components/Root.jsx index 32929b5..4aed95b 100644 --- a/src/components/Root.jsx +++ b/src/components/Root.jsx @@ -9,7 +9,7 @@ import ProxyErrorNotification from "./Errors/ProxyErrorNotification"; import { useCreateNotification } from "./generic/PopUps/Notification"; import A2FLogin from "./Login/A2FLogin"; -export default function Root({ currentEDPVersion, token, accountsList, fakeLogin, resetUserData, syncSettings, createFolderStorage, setDisplayTheme, displayTheme, displayMode, setDisplayModeState, activeAccount, setActiveAccount, setIsFullScreen, globalSettings, useUserSettings, entryURL, logout, isStandaloneApp, isTabletLayout, proxyError, fetchHomeworks, handleEdBan, isEDPUnblockInstalled, setIsEDPUnblockInstalled, requireA2F, setRequireA2F, fetchA2F }) { +export default function Root({ currentEDPVersion, token, accountsList, fakeLogin, resetUserData, syncSettings, createFolderStorage, setDisplayTheme, displayTheme, displayMode, setDisplayModeState, activeAccount, setActiveAccount, setIsFullScreen, globalSettings, useUserSettings, entryURL, logout, isStandaloneApp, isTabletLayout, proxyError, fetchHomeworks, handleEdBan, isEDPUnblockInstalled, setIsEDPUnblockInstalled, isEDPUnblockActuallyInstalled, setIsEDPUnblockActuallyInstalled, requireA2F, setRequireA2F, fetchA2F }) { const navigate = useNavigate(); const location = useLocation(); @@ -447,8 +447,9 @@ export default function Root({ currentEDPVersion, token, accountsList, fakeLogin } {isAdmin && } - {isAdmin && } - {isAdmin && { fetchHomeworks((new AbortController()), new Date("2024-05-27")) }} value="FETCH DAY HOMEWORKS" />} + {isAdmin && setIsEDPUnblockActuallyInstalled(!isEDPUnblockActuallyInstalled)} value={"EDPU INSTALLED: " + isEDPUnblockActuallyInstalled} />} + {isAdmin && } + {/* {isAdmin && { fetchHomeworks((new AbortController()), new Date("2024-05-27")) }} value="FETCH DAY HOMEWORKS" />} */} {isAdmin && { setIsAdmin(false) }} value="HIDE CONTROLS" />} {(!isAdmin && (!process.env.NODE_ENV || process.env.NODE_ENV === "development")) && { setIsAdmin(true) }} value="-->" style={(!isAdmin ? { opacity: 0.2 } : {})} />} diff --git a/src/utils/iframeRequest/iframe.js b/src/utils/iframeRequest/iframe.js index 49aa1d8..1489912 100644 --- a/src/utils/iframeRequest/iframe.js +++ b/src/utils/iframeRequest/iframe.js @@ -37,8 +37,8 @@ handleAbort(values); return; } - }; + window.addEventListener("message", handleMessage, false); })() \ No newline at end of file From 76c88c9b13f068f387de383fe46d7526c560ecb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= Date: Sat, 26 Oct 2024 02:58:39 +0200 Subject: [PATCH 08/10] Revert some changes (especially formatting and onscroll blob rotating) --- src/components/LandingPage/LandingPage.css | 45 +- src/components/LandingPage/LandingPage.jsx | 670 +++++---------------- 2 files changed, 187 insertions(+), 528 deletions(-) diff --git a/src/components/LandingPage/LandingPage.css b/src/components/LandingPage/LandingPage.css index dacf6c2..b3c6e90 100644 --- a/src/components/LandingPage/LandingPage.css +++ b/src/components/LandingPage/LandingPage.css @@ -590,39 +590,42 @@ html:has(.landing-page) { /* PARALAX ITEMS (in mobile first) */ /* ------------------------------------------------------------------------ */ -.parallax { +.parallax-item { position: absolute; - width: 100%; - margin-top: -25%; -} - -.parallax-items { - position: relative; - width: 100%; } - -.b-right { - position: absolute; - right: 0; +.parallax-item.blob1 { + left: -80px; + top: min(130vh, 1500px); width: 200px; } - -.b-left { +.parallax-item.blob2 { + right: -70px; + top: min(130vh, 1500px); width: 250px; } + .blob { - opacity: 0.5; + width: 100%; + opacity: .5; filter: blur(50px); - will-change: transform; + animation: blob-rotate linear 10s infinite; } .blob path { - fill: rgb(var(--text-color-alt)); + fill: rgb(var(--text-color-alt)) } -@media only screen and (min-width: 869px) { - /* This for desktop media */ - .parallax { - margin-top: 0; +@keyframes blob-rotate { + from { + rotate: 0deg; + } + to { + rotate: 359deg; + } +} + +@media only screen and (max-width: 869px) { + .parallax-item { + display: none; } } diff --git a/src/components/LandingPage/LandingPage.jsx b/src/components/LandingPage/LandingPage.jsx index 66431b1..7f25697 100644 --- a/src/components/LandingPage/LandingPage.jsx +++ b/src/components/LandingPage/LandingPage.jsx @@ -17,20 +17,11 @@ import UpArrow from "../graphics/UpArrow"; import "./LandingPage.css"; export default function LandingPage({ token, accountsList }) { - const { - isMobileLayout, - isTabletLayout, - actualDisplayTheme, - useUserSettings, - } = useContext(AppContext); + const { isMobileLayout, isTabletLayout, actualDisplayTheme, useUserSettings } = useContext(AppContext); - const [isLoggedIn, setIsLoggedIn] = useState( - token && accountsList.length > 0, - ); // this one is different from the one in App.jsx + const [isLoggedIn, setIsLoggedIn] = useState(token && accountsList.length > 0); // this one is different from the one in App.jsx const [isTop, setIsTop] = useState(true); - const [isScrollNAvigation, setIsScrollNavigation] = useState(false); - const [scrollState, setScrollState] = useState(""); const homeSectionRef = useRef(null); const communitySectionRef = useRef(null); const openSourceSectionRef = useRef(null); @@ -50,45 +41,33 @@ export default function LandingPage({ token, accountsList }) { }, [token, accountsList]); useEffect(() => { - const observer = new IntersectionObserver( - (intersections) => { - for (const intersection of intersections) { - if (intersection.isIntersecting) { - const elementChildren = intersection.target.children; - const elements = [ - elementChildren[0], - elementChildren[1].children[0], - elementChildren[1].children[1], - ].flat(); - for (let i = 0; i <= elements.length; ++i) { - setTimeout(() => { - if (elements[i]) { - // elements[i].style.opacity = 1 - elements[i].classList.toggle( - "visible", - true, - ); - } - }, i * 200); - } + const observer = new IntersectionObserver((intersections) => { + for (const intersection of intersections) { + if (intersection.isIntersecting) { + const elementChildren = intersection.target.children + const elements = [elementChildren[0], elementChildren[1].children[0], elementChildren[1].children[1]].flat(); + for (let i = 0; i <= elements.length; ++i) { + setTimeout(() => { + if (elements[i]) { + // elements[i].style.opacity = 1 + elements[i].classList.toggle("visible", true); + } + }, i * 200) } } - }, - { - rootMargin: "0px 0px -250px 0px", - threshold: 0.1, - }, - ); - + } + }, { + rootMargin: "0px 0px -250px 0px", + threshold: 0.1, + }) + if (communitySectionRef.current && openSourceSectionRef.current) { observer.observe(communitySectionRef.current); observer.observe(openSourceSectionRef.current); return () => { - if (communitySectionRef.current) - observer.unobserve(communitySectionRef.current); - if (openSourceSectionRef.current) - observer.unobserve(openSourceSectionRef.current); - }; + if (communitySectionRef.current) observer.unobserve(communitySectionRef.current) + if (openSourceSectionRef.current) observer.unobserve(openSourceSectionRef.current) + } } }, []); @@ -109,15 +88,13 @@ export default function LandingPage({ token, accountsList }) { } const section = document.getElementById(location.hash.slice(1)); if (section) { - section.scrollIntoView({ - block: location.hash === "#home" ? "start" : "center", - }); + section.scrollIntoView({ block: (location.hash === "#home" ? "start" : "center") }) } }, [location.hash]); useEffect(() => { const handleScroll = () => { - const parallaxItems = document.querySelectorAll(".parallax-items"); + const parallaxItems = document.querySelectorAll(".parallax-item"); let scrollPosition = window.scrollY; parallaxItems.forEach((item) => { @@ -131,252 +108,83 @@ export default function LandingPage({ token, accountsList }) { return () => { document.removeEventListener("scroll", handleScroll); - }; - }, []); - - useEffect(() => { - const handleRotate = () => { - const rotateItems = document.querySelectorAll(".rotate-item"); - let scrollPosition = window.scrollY; - - rotateItems.forEach((item) => { - let speed = item.getAttribute("rotate-speed"); - let degRotation = speed * scrollPosition * 2; - - item.style.transform = `rotate(${degRotation}deg)`; - }); - }; - - document.addEventListener("scroll", handleRotate); - - return () => { - document.removeEventListener("scroll", handleRotate); - }; - }, []); - - useEffect(() => { - const handleScroll = () => { - const scrollPosition = window.scrollY; - setScrollState(scrollPosition); - }; - window.addEventListener("scroll", handleScroll); + } - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, []); + }, []) - return ( -
- {!isMobileLayout && ( - - )} -
- - - -
- {" "} - - Service open source non-affilié à Aplim -
-
-

- Découvrez{" "} - - Ecole Directe Plus - -

-

- EDP offre une expérience unique avec une interface - moderne et intuitive, enrichie de fonctionnalités - exclusives, le tout de façon gratuite, libre et - open-source. -

- - {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} - + return (
+ {!isMobileLayout && } +
+ +
Service open source non-affilié à Aplim
+
+

Découvrez Ecole Directe Plus

+

EDP offre une expérience unique avec une interface moderne et intuitive, enrichie de fonctionnalités exclusives, le tout de façon gratuite, libre et open-source.

+ {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} +
+
+ Capture d'écran du site +
+
+
+ {(displayMode !== "performance") && <> + {/*
+ + + +
*/} +
+ + +
-
- Capture d'écran du site +
+ + +
-
-
- {displayMode !== "performance" && ( - <> -
-
- - - + {/*
+ + + +
*/} + } +
+

Une multitude de
fonctionnalités inédites

+
+ + +

Points forts

+

Découvrez vos talents cachés grâce à un aperçu rapide de vos points forts. Parce que vous méritez de savoir à quel point vous êtes incroyable, nous mettons en lumière les matières dans lesquelles vous excellez.

+ + + + +

Calcul automatique et instantané des moyennes

+

Fini les calculs laborieux à la main. EDP fait tout le boulot pour vous. Parce que votre temps est précieux et doit être consacré à des choses plus importantes, comme procrastiner efficacement.

+ + + + +
+

Thème de couleur

+

Choisissez votre camp : clair comme le jour ou sombre comme votre âme. Passez du mode Clair au mode Sombre en un clic et offrez à vos yeux le repos qu'ils méritent. Parce que même votre interface se doit d'avoir du style.

-
- - - -
-
- - )} -
-

- Une multitude de
- - fonctionnalités inédites - -

-
- - -

Points forts

-

- Découvrez vos talents cachés grâce à un - aperçu rapide de vos points forts. Parce que - vous méritez de savoir à quel point vous - êtes incroyable, nous mettons en lumière les - matières dans lesquelles vous excellez. -

- - - - -

- Calcul automatique et instantané des - moyennes -

-

- Fini les calculs laborieux à la main. EDP - fait tout le boulot pour vous. Parce que - votre temps est précieux et doit être - consacré à des choses plus importantes, - comme procrastiner efficacement. -

- - - - -
-

Thème de couleur

-

- Choisissez votre camp : clair comme le - jour ou sombre comme votre âme. Passez - du mode Clair au mode Sombre en un clic - et offrez à vos yeux le repos qu'ils - méritent. Parce que même votre interface - se doit d'avoir du style. -

-
- {/*
+ {/*
@@ -384,225 +192,73 @@ export default function LandingPage({ token, accountsList }) {
*/} - - - - -

Dernières notes

-

- Un coup d'œil et vous saurez tout. Avec - l'aperçu rapide des dernières notes, - regarder vos résultats en vif pendant - l'intercours sera plus rapide que la formule - 1 de Max Verstappen. -

- - - - -

Score de Streak

-

- Atteignez le nirvana académique avec le - Score de streak. Surpassez vous, cumulez les - bonnes notes et débloquez des badges ! - N'hésitez pas à flex quand vous avez une - meilleure streak que vos amis. -

- - - - -

Contrôles à venir

-

- Restez aux aguets avec l'aperçu des - prochains contrôles. Anticipez les futurs - contrôles et organisez vos révisions comme - un pro. Enfin, en théorie… on ne peut pas - vous garantir que vous ne procrastinerez pas - quand même. -

- - - - -

Sécurité et confidentialité

-

- Votre sécurité, notre priorité, parce qu’il - n’y a que vous et votre conscience qui devez - connaître vos petits secrets académiques. - EDP ne collecte AUCUNE information - personnelle ou personnellement identifiable - sur les utilisateurs du service. En tant que - service non-affilié à Aplim, nous utilisons - l'API d'EcoleDirecte pour que vous ayez - accès à vos informations. -

- - -
-
-
-
-

- Un communauté{" "} - passionnée et{" "} - bienveillante -

-
- - - -

- Rejoignez notre{" "} - - serveur Discord - {" "} - !
- Vous pourrez y rencontrer les développeurs et discuter - avec les membres les plus investis d'Ecole Directe Plus - ! -

+ + + + +

Dernières notes

+

Un coup d'œil et vous saurez tout. Avec l'aperçu rapide des dernières notes, regarder vos résultats en vif pendant l'intercours sera plus rapide que la formule 1 de Max Verstappen.

+ + + + +

Score de Streak

+

Atteignez le nirvana académique avec le Score de streak. Surpassez vous, cumulez les bonnes notes et débloquez des badges ! N'hésitez pas à flex quand vous avez une meilleure streak que vos amis.

+ + + + +

Contrôles à venir

+

Restez aux aguets avec l'aperçu des prochains contrôles. Anticipez les futurs contrôles et organisez vos révisions comme un pro. Enfin, en théorie… on ne peut pas vous garantir que vous ne procrastinerez pas quand même.

+ + + + +

Sécurité et confidentialité

+

Votre sécurité, notre priorité, parce qu’il n’y a que vous et votre conscience qui devez connaître vos petits secrets académiques. EDP ne collecte AUCUNE information personnelle ou personnellement identifiable sur les utilisateurs du service. En tant que service non-affilié à Aplim, nous utilisons l'API d'EcoleDirecte pour que vous ayez accès à vos informations.

+ +
-
-
-

- Un projet développé{" "} - par des élèves - ,{" "} - - pour les élèves - -

-
-

- EDP est un projet open source distribué sous licence - MIT, n'importe qui peut participer !
- Nous partageons en toute transparence le code source - d'EDP sur notre{" "} - - dépôt GitHub - - . Ainsi, n'importe qui peut contribuer au projet, - rapporter des bugs, ou auditer le code à la recherche de - failles. C'est une garantie de sécurité, de fiabilité et - de résilience. -

- - - -
-
-
- -

Prêt à basculer sur Ecole Directe Plus ?

-

Il vous suffit d'identifiants EcoleDirecte

- - {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} - -
-
- -
    -
  • - Connexion -
    • -
  • - Confidentialité -
    • -
  • - Conditions d'utilisation -
    • -
  • - Faire un retour -
    • -
  • - - Tableau de bord - -
    • -
  • - - Notes - -
    • -
  • - - Cahier de texte - -
    • -
  • - - Emploi du temps - -
    • -
  • - - Messagerie - -
    • -
  • - - Paramètres - -
    • -
  • - - Compte - -
    • -
  • - EDP Unblock -
    • -
-
+
+
+

Un communauté passionnée et bienveillante

+
+ +

Rejoignez notre serveur Discord !
Vous pourrez y rencontrer les développeurs et discuter avec les membres les plus investis d'Ecole Directe Plus !

+
+
+
+

Un projet développé par des élèves, pour les élèves

+
+

EDP est un projet open source distribué sous licence MIT, n'importe qui peut participer !
Nous partageons en toute transparence le code source d'EDP sur notre dépôt GitHub. Ainsi, n'importe qui peut contribuer au projet, rapporter des bugs, ou auditer le code à la recherche de failles. C'est une garantie de sécurité, de fiabilité et de résilience.

+ +
+
+
+ +

Prêt à basculer sur Ecole Directe Plus ?

+

Il vous suffit d'identifiants EcoleDirecte

+ {isLoggedIn ? "Ouvrir l'app" : "Se connecter"} +
- ); +
+ +
    +
  • Connexion
    • +
  • Confidentialité
    • +
  • Conditions d'utilisation
    • +
  • Faire un retour
    • +
  • Tableau de bord
    • +
  • Notes
    • +
  • Cahier de texte
    • +
  • Emploi du temps
    • +
  • Messagerie
    • +
  • Paramètres
    • +
  • Compte
    • +
  • EDP Unblock
    • +
+ +
+
); } From a39b8f605560c5e7b1bc4762cd449c1e74e6c5e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= Date: Sat, 26 Oct 2024 03:25:45 +0200 Subject: [PATCH 09/10] fix(LandingPage): responsive fixes --- src/components/LandingPage/LandingPage.css | 36 +++++++++++++++++++++- src/components/LandingPage/LandingPage.jsx | 4 +-- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/src/components/LandingPage/LandingPage.css b/src/components/LandingPage/LandingPage.css index b3c6e90..13d23ee 100644 --- a/src/components/LandingPage/LandingPage.css +++ b/src/components/LandingPage/LandingPage.css @@ -683,6 +683,7 @@ html:has(.landing-page) { } .floating-section p { + min-width: 250px; flex: 1; font-size: var(--font-size-20); color: rgb(var(--text-color-alt)); @@ -809,14 +810,47 @@ html:has(.landing-page) { .landing-page .footer-logo { flex: auto; } + + .landing-page .floating-section p { + text-align: center !important; + } + + .landing-page .last-call-to-action { + width: 90%; + } + + .landing-page ul.sitemap { + text-align: center; + justify-content: center; + } } -@media only screen and (max-width: 500px) { +@media only screen and (max-width: 470px) { + .landing-page .change-theme { + display: none; + } +} + +@media only screen and (max-width: 415px) { .landing-page .nav-logo svg { display: none; } } +@media only screen and (max-width: 365px) { + .landing-page .nav-logo { + display: none; + } + + .nav-buttons { + width: 100%; + } + .nav-login { + width: 100%; + } +} + + @media only screen and (max-width: 737px) { #bento .bento-grid { width: 100%; diff --git a/src/components/LandingPage/LandingPage.jsx b/src/components/LandingPage/LandingPage.jsx index 2ce9bae..afc7b8b 100644 --- a/src/components/LandingPage/LandingPage.jsx +++ b/src/components/LandingPage/LandingPage.jsx @@ -113,7 +113,7 @@ export default function LandingPage({ token, accountsList }) { }, []) return (
- {!isMobileLayout &&
-

Un communauté passionnée et bienveillante

+

Une communauté passionnée et bienveillante

Rejoignez notre serveur Discord !
Vous pourrez y rencontrer les développeurs et discuter avec les membres les plus investis d'Ecole Directe Plus !

From 95f63d449e3de80467a943f8182718d4fd026458 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= Date: Sat, 26 Oct 2024 03:44:17 +0200 Subject: [PATCH 10/10] fix a bug caused by invalid hash due to #feedback on /homeworks and /dashboard. (temporary fix) TODO: clear that sht --- src/components/app/Header/AccountSelector.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/app/Header/AccountSelector.jsx b/src/components/app/Header/AccountSelector.jsx index 7c6bf59..6f757fa 100644 --- a/src/components/app/Header/AccountSelector.jsx +++ b/src/components/app/Header/AccountSelector.jsx @@ -172,7 +172,8 @@ export default function AccountSelector({ accountsList, activeAccount, setActive
Paramètres Compte - Faire un retour + {/* TODO: REMOVE THAT SHIT ↓ */} + Faire un retour Patch Notes