+
-
-
+
+
-
+
+
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index a8f8a53..92f0a2a 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,5 @@
+@import '../styles';
+
body.light-theme {
background-color: #ffffff;
color: #000000;
@@ -10,6 +12,18 @@ body.dark-theme {
/* Autres styles pour le thème sombre */
}
-main {
- flex: 1;
+.app {
+ min-height: 100dvh;
+ display: flex;
+ flex-direction: column;
+
+ footer {
+ display: flex;
+ flex: 1;
+ align-items: flex-end;
+
+ app-footer {
+ width: 100%;
+ }
+ }
}
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 7f03bbb..0d07bd0 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,61 +1,66 @@
-
+
+
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 8a9be90..c7d1dda 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -1,122 +1,91 @@
-.toolbar {
- &.dark-theme {
- background-color: black !important;
- }
+@import '../../../styles';
- &.light-theme {
- background-color: white !important;
- }
+.header {
padding: 0 1rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 4rem;
-}
-
-.left_part {
- display: flex;
- flex-direction: row;
- gap: 4rem;
-}
-
-.left_part .logo_container {
- display: flex;
- flex-direction: row;
- gap: 2rem;
-}
-
-.left_part .menu {
- display: flex;
- flex-direction: row;
- gap: 2rem;
-
- align-items: flex-end;
-}
-
-.left_part .menu a {
- &.dark-theme {
- color: black !important;
- }
-
- &.light-theme {
- color: white !important;
- }
- text-decoration: none;
- padding: .5rem .5rem 0;
-}
-
-.left_part .menu a:hover {
- &.dark-theme {
- background-color: black !important;
- }
- &.light-theme {
- background-color: white !important;
- }
- transition: background-color .3s ease;
-}
-
-.left_part .menu a.active {
- &.dark-theme {
- background-color: black !important;
+ .left_part {
+ display: flex;
+ flex-direction: row;
+ gap: 4rem;
+
+ &__logo {
+ &--container{
+ display: flex;
+ flex-direction: row;
+ gap: 2rem;
+ }
+
+ &--sandkasten{
+ width: 4rem;
+ height: auto;
+ aspect-ratio: 1;
+ }
+ }
}
+
+ .right_part {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 2rem;
- &.light-theme {
- background-color: white !important;
+ &--menu {
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+
+ a {
+ color: $color-black;
+ text-decoration: none;
+ }
+ }
+
+ &__connexion {
+ display: flex;
+ flex-direction: row;
+ gap: 2rem;
+
+ &--login {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ color: $color-purple;
+ }
+
+ &--register {
+ cursor: pointer;
+ border: 1px solid $color-black;
+ border-radius: 10px;
+ padding: .75rem 2rem;
+ }
+ }
}
}
-.sandkasten-logo {
- width: 4rem;
- height: auto;
- aspect-ratio: 1;
-}
-
-.logo_title {
- font-size: 1.5rem;
- font-weight: 500;
- &.dark-theme {
- color: black !important;
- }
-
- &.light-theme {
- color: white !important;
+.dark-theme {
+ .right_part {
+ &--menu {
+ a {
+ color: $color-white;
+ }
+ }
+ &__connexion {
+ &--register {
+ border-color: $color-white;
+ }
+ }
}
}
-.right_part {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 2rem;
- &.dark-theme {
- color: black !important;
- }
-
- &.light-theme {
- color: white !important;
- }
-}
-
-.gitea_logo_container .gitea-logo {
- width: 4rem;
- height: auto;
- aspect-ratio: 1;
-}
@media (max-width: 1024px) {
- .toolbar {
- gap: 2rem;
- }
- .toolbar .left_part {
- gap: 2rem;
- }
-
- .toolbar .left_part .logo_container .logo_title {
- display: none;
- }
}
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index ddeb23c..be4055e 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -1,6 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
-import {Router} from "@angular/router";
+import {Component, Input, OnInit} from '@angular/core';
import { TranslationService } from '../../services/translation.service';
@Component({
@@ -13,6 +11,7 @@ export class HeaderComponent implements OnInit {
version!: string;
sandkasten_logo!: string;
gitea_logo!: string;
+ @Input() themeClass!: string;
ngOnInit(): void {
this.title = 'Sandkasten';
diff --git a/src/app/components/landing-page/landing-page.component.html b/src/app/components/landing-page/landing-page.component.html
index a5eb4ce..2903d2c 100644
--- a/src/app/components/landing-page/landing-page.component.html
+++ b/src/app/components/landing-page/landing-page.component.html
@@ -1,11 +1,9 @@
-
+
-
+ ![Logo-Sandkasten]()
+
+
-
- ![Logo-Sandkasten]()
-
+ {{ title }}
-
+
-
-
-
-
+
+
+
+
+ Log In
+
+
+
+
+ Register Now
+
+
-
-
- {{ 'LandingPage.Welcome' | translate}}
- {{ 'LandingPage.Description' | translate}} -
-
-
+
+
diff --git a/src/app/components/landing-page/landing-page.component.scss b/src/app/components/landing-page/landing-page.component.scss
index cd12a31..eb409ae 100644
--- a/src/app/components/landing-page/landing-page.component.scss
+++ b/src/app/components/landing-page/landing-page.component.scss
@@ -1,59 +1,37 @@
-.landing-block {
+@import '../../../styles';
+
+.landing-page {
padding: 6rem;
display: flex;
flex-direction: row;
gap: 2rem;
-}
-
-/* Upper block*/
-.hero-container {
- display: flex;
- flex-direction: column;
- gap: 2.5rem;
- padding: 2rem 1rem;
- background: #686AB7;
-}
-
-.landing-links {
- width: 100%;
- text-align: center;
-}
-button{
- font-size: 20px;
-}
+ color: $color-black;
-/* Animated Button*/
-.landing-links {
- width: fit-content;
- padding: 1rem;
- height: fit-content;
-
-}
+ &--container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
-.button-container {
- position: relative;
- margin: auto;
+ &--title {
+ font-size: 5rem;
+ font-weight: 700;
+ margin: 0;
+ }
- &:before {
- content: "";
- position: absolute;
- top: 0;
- left: -1rem;
- border-radius: 100px;
- width: 2rem;
- height: 2rem;
- transform: translate(0%, -25%);
- background: rgba(0, 0, 255, 0.5);
- transition: width 0.3s ease;
+ &--subtitle {
+ font-size: 1rem;
+ font-weight: 400;
+ margin: 0;
}
-}
-.landing-links:hover .button-container:before {
- width: calc(100% + 2rem);
-}
+ &__button {
+ padding: .75rem 2rem;
+ background: $color-purple;
+ border-radius: 10px;
+ width: fit-content;
-.button-container .animated-button {
- position: relative;
- white-space: nowrap;
-}
+ color: $color-white;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 7071a31..6a7c57b 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -5,7 +5,6 @@
"Try" : "Try it now !"
},
"HeaderPage": {
- "Language" : "You can choose your language here :",
"Home" : "Home",
"Editor" : "Editor",
"Documentation" : "Documentation",
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index 2bea94b..7732f81 100644
--- a/src/assets/i18n/fr.json
+++ b/src/assets/i18n/fr.json
@@ -1,11 +1,10 @@
{
"LandingPage": {
- "Welcome" : "Bienvenue sur Sandkasten",
+ "Welcome" : "Bienvenue sur Sandkasten",
"Description" : "Vous voici arrivé sur le meilleur site bac à sable de test de code ! Nous vous permettons de tester tous vos programmes sur vos langages préférés. Grâce à l’éditeur Code Mirror et à notre gestion personalisée de l’exécution sur des conteneurs, votre code devient complétement inoffensif et vous pouvez donc vous amusez autant que vous le souhaitez !",
"Try" : "Essayez maintenant !"
},
"HeaderPage": {
- "Language" : "Vous pouvez choisir votre langage ici :",
"Home" : "Accueil",
"Editor" : "Éditeur",
"Documentation" : "Documentation",
diff --git a/src/styles.scss b/src/styles.scss
index f405c2f..dbad135 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,10 +1,17 @@
@import 'codemirror/lib/codemirror.css';
@import 'codemirror/theme/material.css';
+//region Colors
+$color-purple: #605FFC;
+$color-white: #FFFFFF;
+$color-black: #000000;
+//endregion
+
* {
font-family: Roboto, Helvetica, sans-serif;
}
body {
margin: 0;
-}
\ No newline at end of file
+}
+
+