diff --git a/sandkasten-web b/sandkasten-web new file mode 160000 index 0000000..74a68d9 --- /dev/null +++ b/sandkasten-web @@ -0,0 +1 @@ +Subproject commit 74a68d9743e012636495f0ae3ac630739083f087 diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index e405958..66feb0e 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -74,338 +74,340 @@ $theme-transition: all 0.3s ease-in-out; } } } + } + } - .right_part, - .mobile_menu { - // Dark mode button - .wrapper { - text-align: center; - display: flex; - align-items: center; - - .toggle { - position: relative; - display: inline-block; - width: 100px; - padding: 4px; - border-radius: 40px; - scale: 0.75; - } + .right_part, + .mobile_menu { + + // Dark mode button + .wrapper { + text-align: center; + display: flex; + align-items: center; + + .toggle { + position: relative; + display: inline-block; + width: 100px; + padding: 4px; + border-radius: 40px; + scale: 0.75; + } - &:before, - &:after { - content: ''; - display: table; - } + &:before, + &:after { + content: ''; + display: table; + } + + &:after { + clear: both; + } + + .toggle-bg { + position: absolute; + top: -4px; + left: -4px; + width: 100%; + height: 100%; + background-color: $color-parent-inner; + border-radius: 40px; + border: 4px solid $color-parent-outer; + transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + .toggle-input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 1px solid red; + border-radius: 40px; + z-index: 2; + opacity: 0; + + &:checked~.toggle-switch { + margin-left: 0; + border-color: $color-moon-outer; + background-color: $color-moon-inner; + } + + &:checked~.toggle-bg { + background-color: #484848; + border-color: #202020; + } + + &:checked~.toggle-switch .toggle-switch-figure { + margin-left: 40px; + opacity: 0; + transform: scale(0.1); + } + + &:checked~.toggle-switch .toggle-switch-figureAlt { + transform: scale(1); + } + } + + .toggle-switch { + position: relative; + width: 30px; + height: 30px; + margin-left: 60px; + background-color: #f5eb42; + border: 4px solid $color-sun; + border-radius: 50%; + transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); + + .toggle-switch-figure { + position: absolute; + bottom: -14px; + left: -50px; + display: block; + width: 80px; + height: 30px; + border: 8px solid $color-cloud-outer; + border-radius: 20px; + background-color: #fff; + transform: scale(0.4); + transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); &:after { - clear: both; + @include cloudBubble(-65px, -42px, 15px, 15px, 70deg); } - .toggle-bg { - position: absolute; - top: -4px; - left: -4px; - width: 100%; - height: 100%; - background-color: $color-parent-inner; - border-radius: 40px; - border: 4px solid $color-parent-outer; - transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); + &:before { + @include cloudBubble(-25px, -10px, 30px, 30px, 30deg); } + } + + .toggle-switch-figureAlt { + @include crater(5px, 2px, 2px); - .toggle-input { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 1px solid red; - border-radius: 40px; - z-index: 2; - opacity: 0; - - &:checked ~ .toggle-switch { - margin-left: 0; - border-color: $color-moon-outer; - background-color: $color-moon-inner; - } - - &:checked ~ .toggle-bg { - background-color: #484848; - border-color: #202020; - } - - &:checked ~ .toggle-switch .toggle-switch-figure { - margin-left: 40px; - opacity: 0; - transform: scale(0.1); - } - - &:checked ~ .toggle-switch .toggle-switch-figureAlt { - transform: scale(1); - } + box-shadow: + 42px -7px 0 -3px $color-stars, + 75px -10px 0 -3px $color-stars, + 54px 4px 0 -4px $color-stars, + 83px 7px 0 -2px $color-stars, + 63px 18px 0 -4px $color-stars, + 44px 23px 0 -2px $color-stars, + 78px 21px 0 -3px $color-stars; + + transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transform: scale(0); + + &:before { + @include crater(-6px, 12px, 7px); } - .toggle-switch { - position: relative; - width: 30px; - height: 30px; - margin-left: 60px; - background-color: #f5eb42; - border: 4px solid $color-sun; - border-radius: 50%; - transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); - - .toggle-switch-figure { - position: absolute; - bottom: -14px; - left: -50px; - display: block; - width: 80px; - height: 30px; - border: 8px solid $color-cloud-outer; - border-radius: 20px; - background-color: #fff; - transform: scale(0.4); - transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); - - &:after { - @include cloudBubble(-65px, -42px, 15px, 15px, 70deg); - } - - &:before { - @include cloudBubble(-25px, -10px, 30px, 30px, 30deg); - } - } - - .toggle-switch-figureAlt { - @include crater(5px, 2px, 2px); - - box-shadow: - 42px -7px 0 -3px $color-stars, - 75px -10px 0 -3px $color-stars, - 54px 4px 0 -4px $color-stars, - 83px 7px 0 -2px $color-stars, - 63px 18px 0 -4px $color-stars, - 44px 23px 0 -2px $color-stars, - 78px 21px 0 -3px $color-stars; - - transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); - transform: scale(0); - - &:before { - @include crater(-6px, 12px, 7px); - } - - &:after { - @include crater(10px, 6px, 2px); - } - } + &:after { + @include crater(10px, 6px, 2px); } } } + } + } - .right_part { - display: flex; - flex-direction: row; - align-items: center; - gap: 2rem; + .right_part { + display: flex; + flex-direction: row; + align-items: center; + gap: 2rem; - &--menu { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 1rem; + &--menu { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; - a { - color: $color-black; - text-decoration: none; - white-space: nowrap; + a { + color: $color-black; + text-decoration: none; + white-space: nowrap; - transition: $theme-transition; - } - } + transition: $theme-transition; + } + } - &--menu_mobile { - cursor: pointer; - display: none; - z-index: 100; - } + &--menu_mobile { + cursor: pointer; + display: none; + z-index: 100; + } - &--bottom { - display: flex; - flex-direction: row; - gap: 2rem; - align-items: center; - } + &--bottom { + display: flex; + flex-direction: row; + gap: 2rem; + align-items: center; + } - &--toggles { - display: flex; - flex-direction: row; - gap: 2rem; - align-items: center; - } + &--toggles { + display: flex; + flex-direction: row; + gap: 2rem; + align-items: center; + } - &__lang { - height: fit-content; - } + &__lang { + height: fit-content; + } - &__connexion { - display: flex; - flex-direction: row; - gap: 1rem; + &__connexion { + display: flex; + flex-direction: row; + gap: 1rem; - &--login { - cursor: pointer; - display: flex; - align-items: center; - gap: 0.5rem; + &--login { + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; - color: $color-purple; - white-space: nowrap; - } + color: $color-purple; + white-space: nowrap; + } - &--register { - cursor: pointer; - border: 1px solid $color-black; - border-radius: 10px; - padding: 0.75rem 2rem; - white-space: nowrap; + &--register { + cursor: pointer; + border: 1px solid $color-black; + border-radius: 10px; + padding: 0.75rem 2rem; + white-space: nowrap; - transition: border 0.3s ease-in-out; - } - } + transition: border 0.3s ease-in-out; } + } + } - .mobile_menu { - position: absolute; - top: 0; - right: 0; - width: 50%; - height: 100vh; - background: $color-white; - transform: translateX(100%); - z-index: 99; - - transition: - transform 0.3s ease-in-out, - box-shadow 0.3s ease-in-out, - background 0.3s ease-in-out; - - &.opened { - transform: translateX(0); - box-shadow: $color-black 0 0 5px 0; - } - - &--wrapper { - //padding-top: 6rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 3rem; + .mobile_menu { + position: absolute; + top: 0; + right: 0; + width: 50%; + height: 100vh; + background: $color-white; + transform: translateX(100%); + z-index: 99; + + transition: + transform 0.3s ease-in-out, + box-shadow 0.3s ease-in-out, + background 0.3s ease-in-out; + + &.opened { + transform: translateX(0); + box-shadow: $color-black 0 0 5px 0; + } - height: 100%; - } + &--wrapper { + //padding-top: 6rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3rem; - &--toggles { - display: flex; - flex-direction: column; - align-items: center; - gap: 2rem; - } + height: 100%; + } - &--menu { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; + &--toggles { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + } - a { - color: $color-black; - text-decoration: none; - white-space: nowrap; + &--menu { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; - transition: $theme-transition; - } - } + a { + color: $color-black; + text-decoration: none; + white-space: nowrap; - &__connexion { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - } + transition: $theme-transition; } } - .dark-theme { - .right_part { - &--menu { - a { - color: $color-white; - } - } + &__connexion { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + } + } +} - &__connexion { - &--register { - border-color: $color-white; - } - } +.dark-theme { + .right_part { + &--menu { + a { + color: $color-white; } + } - .mobile_menu { - background: $color-light-black; + &__connexion { + &--register { + border-color: $color-white; + } + } + } - &.opened { - box-shadow: $color-white 0 0 5px 0; - } + .mobile_menu { + background: $color-light-black; - &--menu { - a { - color: $color-white; - } - } + &.opened { + box-shadow: $color-white 0 0 5px 0; + } - &__connexion { - &--register { - border-color: $color-white; - } - } + &--menu { + a { + color: $color-white; } } - @media (max-width: 1024px) { - .header { - .right_part { - flex-direction: column-reverse; + &__connexion { + &--register { + border-color: $color-white; + } + } + } +} - &--menu_mobile { - display: flex; - } - &--menu { - display: none; - } +@media (max-width: 1024px) { + .header { + .right_part { + flex-direction: column-reverse; - &__connexion { - display: none; - } + &--menu_mobile { + display: flex; + } - &--toggles { - display: none; - } - } + &--menu { + display: none; } - } - @media (max-width: 767px) { - .header { - .mobile_menu { - width: 75%; - } + &__connexion { + display: none; + } + + &--toggles { + display: none; } } } } + +@media (max-width: 767px) { + .header { + .mobile_menu { + width: 75%; + } + } +} \ No newline at end of file diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 6fff10c..663fb00 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -36,7 +36,7 @@ export class HeaderComponent { @Input() themeService!: ThemeService; // Instanciation du service pour les actions de traduction - constructor(private translationService: TranslationService) {} + constructor(private translationService: TranslationService) { } // Méthode pour changer la langue onLanguageChange(event: Event) { @@ -58,6 +58,7 @@ export class HeaderComponent { @HostListener('document:click', ['$event']) clickout(event: MouseEvent) { + event.stopPropagation(); // If the menu is open and click is outside the menu, we close it if (this.isMenuOpen && !this.menuRef.nativeElement.contains(event.target)) { this.isMenuOpen = false; diff --git a/src/app/components/landing-page/landing-page.component.html b/src/app/components/landing-page/landing-page.component.html index c1f1f91..695bd13 100644 --- a/src/app/components/landing-page/landing-page.component.html +++ b/src/app/components/landing-page/landing-page.component.html @@ -8,31 +8,25 @@ {{ 'LandingPage.Description' | translate - }} + }}
- - + + +
- landing page + landing page
@@ -41,22 +35,17 @@

- Everything you need to start a website + Ce dont vous avez besoin de savoir sur notre éditeur

- Astro comes batteries included. It takes the best parts of - state-of-the-art tools and adds its own innovations. + Astro comes batteries included. It takes the best + parts of + state-of-the-art tools and adds its own innovations.
- + data-source-solid @@ -80,12 +69,7 @@
- + @@ -105,16 +89,9 @@