sandkasten
/
sandkasten-web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add the new Landing Page style and fix the Footer position issue

Browse Source
pull/5/head
Colin FRIZOT 1 year ago
parent d21d0bf64d
commit d51cb3957f
10 changed files with 200 additions and 232 deletions
Show Stats Download Patch File Download Diff File

4
src/app/app.component.html
Unescape View File

@ -1,9 +1,9 @@
<body [ngClass]="themeClass">
<div [ngClass]="themeClass">
<div [ngClass]="themeClass" class="app">
<button (click)="toggleTheme()">Toggle Theme</button>
<header>
<app-header></app-header>
<app-header [ngClass]="themeClass" [themeClass]="themeClass"></app-header>
</header>
<main>

16
src/app/app.component.scss
Unescape View File

@ -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 {
.app {
min-height: 100dvh;
display: flex;
flex-direction: column;
footer {
display: flex;
flex: 1;
align-items: flex-end;
app-footer {
width: 100%;
}
}
}

51
src/app/components/header/header.component.html
Unescape View File

@ -1,17 +1,16 @@
<div class="toolbar" role="banner">
<div class="header" role="banner" [ngClass]="themeClass">
<div class="left_part">
<div class="logo_container">
<img class="sandkasten-logo"
<div class="left_part__logo--container">
<img class="left_part__logo--sandkasten"
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[src]="sandkasten_logo" alt="Logo-Sandkasten" />
<h2 class="logo_title">{{ title }}</h2>
</div>
</div>
<nav class="menu">
<div class="right_part">
<nav class="right_part--menu">
<a
routerLink=""
routerLinkActive="active"
@ -35,27 +34,33 @@
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ 'HeaderPage.Contact' | translate }}</a>
</nav>
</div>
<div class="right_part">
<p>{{ 'HeaderPage.Language' | translate }}
<select (change)="onLanguageChange($event)">
<option value="fr">Français</option>
<option value="en">English</option>
<option value="fr">🇫🇷 Français</option>
<option value="en">🇬🇧 English</option>
</select>
<img [src]="getFlagImageUrl()" alt="Language Flag" width="50" height="30" />
</p>
<a href="https://codefirst.iut.uca.fr/git/sandkasten"
class="gitea_logo_container">
<img class="gitea-logo"
[src]="gitea_logo" alt="Logo-Gitea" />
</a>
<p>Version : {{ version }}</p>
<div class="right_part__connexion">
<!--Login-->
<div class="right_part__connexion--login">
<span>Log In</span>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_67_222)">
<path d="M15 28.8462C11.4456 28.8462 8.214 27.495 5.7624 25.2936C7.1148 22.0764 10.2576 20.3334 14.9862 20.3334C19.7196 20.3334 22.8696 22.1598 24.231 25.3842C21.7806 27.5796 18.5484 28.8462 15 28.8462ZM15.1668 7.6662C18.123 7.6662 20.3334 9.9534 20.3334 12.993C20.3334 16.119 18.0084 18.6666 15.1668 18.6666C12.3252 18.6666 10.0002 16.119 10.0002 12.993C10.0002 9.9534 12.2106 7.6662 15.1668 7.6662ZM15 0C6.7158 0 0 6.7158 0 15C0 15.549 0.0336 16.0896 0.0912 16.623C0.1104 16.8 0.1458 16.9716 0.171 17.1468C0.222 17.5002 0.2748 17.8524 0.3498 18.1974C0.3936 18.4002 0.4512 18.5964 0.5034 18.7956C0.5844 19.1046 0.6672 19.4118 0.7668 19.713C0.8352 19.9182 0.9126 20.118 0.9888 20.319C1.0968 20.6046 1.2102 20.886 1.335 21.1626C1.4244 21.3612 1.5198 21.5568 1.6182 21.7506C1.7532 22.0182 1.896 22.2804 2.0466 22.5384C2.1558 22.7256 2.2656 22.9098 2.3826 23.0916C2.5458 23.3454 2.7186 23.5908 2.8962 23.8338C3.0204 24.0042 3.1422 24.1746 3.2736 24.3384C3.4686 24.5832 3.6762 24.816 3.8856 25.0476C4.0176 25.194 4.1448 25.344 4.2828 25.4844C4.5258 25.7334 4.7826 25.965 5.0418 26.196C5.1456 26.2884 5.2392 26.391 5.346 26.481L5.3484 26.4744C8.04719 28.7544 11.467 30.0036 15 30C18.5284 30.004 21.9442 28.7581 24.6414 26.4834C24.6421 26.4854 24.6427 26.4874 24.6432 26.4894C24.7464 26.403 24.8376 26.304 24.9372 26.2146C25.2024 25.9794 25.4652 25.7424 25.713 25.4892C25.8498 25.35 25.9752 25.2018 26.106 25.0572C26.3172 24.8238 26.5266 24.5892 26.7228 24.3426C26.8536 24.1794 26.9754 24.009 27.099 23.8398C27.2772 23.5968 27.4512 23.3502 27.6144 23.0958C28.0087 22.4779 28.3592 21.8331 28.6632 21.1662C28.788 20.8896 28.902 20.6082 29.0106 20.3226C29.0868 20.121 29.1642 19.9212 29.232 19.7154C29.3322 19.4142 29.415 19.107 29.496 18.7974C29.5482 18.5982 29.6058 18.402 29.6496 18.1998C29.7252 17.8542 29.778 17.5014 29.829 17.1474C29.8542 16.9722 29.8896 16.8012 29.9088 16.6242C29.9658 16.0902 30 15.5496 30 15C30 6.7158 23.2842 0 15 0Z" fill="#605FFC"/>
</g>
<defs>
<clipPath id="clip0_67_222">
<rect width="30" height="30" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<!--Register-->
<div class="right_part__connexion--register">
<span>Register Now</span>
</div>
</div>
</div>
</div>

127
src/app/components/header/header.component.scss
Unescape View File

@ -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 {
.left_part {
display: flex;
flex-direction: row;
gap: 4rem;
}
.left_part .logo_container {
&__logo {
&--container{
display: flex;
flex-direction: row;
gap: 2rem;
}
}
&--sandkasten{
width: 4rem;
height: auto;
aspect-ratio: 1;
}
}
}
.left_part .menu {
.right_part {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
align-items: flex-end;
}
&--menu {
display: flex;
flex-direction: row;
gap: 1rem;
.left_part .menu a {
&.dark-theme {
color: black !important;
a {
color: $color-black;
text-decoration: none;
}
&.light-theme {
color: white !important;
}
text-decoration: none;
padding: .5rem .5rem 0;
}
.left_part .menu a:hover {
&.dark-theme {
background-color: black !important;
}
&__connexion {
display: flex;
flex-direction: row;
gap: 2rem;
&.light-theme {
background-color: white !important;
&--login {
cursor: pointer;
display: flex;
align-items: center;
gap: 1rem;
color: $color-purple;
}
transition: background-color .3s ease;
}
.left_part .menu a.active {
&.dark-theme {
background-color: black !important;
&--register {
cursor: pointer;
border: 1px solid $color-black;
border-radius: 10px;
padding: .75rem 2rem;
}
}
&.light-theme {
background-color: white !important;
}
}
.sandkasten-logo {
width: 4rem;
height: auto;
aspect-ratio: 1;
}
.logo_title {
font-size: 1.5rem;
font-weight: 500;
&.dark-theme {
color: black !important;
.dark-theme {
.right_part {
&--menu {
a {
color: $color-white;
}
&.light-theme {
color: white !important;
}
}
.right_part {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
&.dark-theme {
color: black !important;
&__connexion {
&--register {
border-color: $color-white;
}
}
&.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;
}
}

5
src/app/components/header/header.component.ts
Unescape View File

@ -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';

14
src/app/components/landing-page/landing-page.component.html
Unescape View File

@ -1,11 +1,9 @@
<div class="landing-block">
<div class="hero-container">
<h2 class="hero-title">{{ 'LandingPage.Welcome' | translate}}</h2>
<span class="hero-text">{{ 'LandingPage.Description' | translate}}</span>
</div>
<div class="landing-links">
<div class="button-container">
<a class="animated-button" (click)="onContinue()">{{ 'LandingPage.Try' | translate}}</a>
<div class="landing-page">
<div class="landing-page--container">
<h2 class="landing-page--title">{{ 'LandingPage.Welcome' | translate}}</h2>
<span class="landing-page--subtitle">{{ 'LandingPage.Description' | translate}}</span>
<div class="landing-page__button">
<a class="landing-page__button--link" (click)="onContinue()">{{ 'LandingPage.Try' | translate}}</a>
</div>
</div>
</div>

68
src/app/components/landing-page/landing-page.component.scss
Unescape View File

@ -1,59 +1,37 @@
.landing-block {
@import '../../../styles';
.landing-page {
padding: 6rem;
display: flex;
flex-direction: row;
gap: 2rem;
}
/* Upper block*/
.hero-container {
color: $color-black;
&--container {
display: flex;
flex-direction: column;
gap: 2.5rem;
padding: 2rem 1rem;
background: #686AB7;
}
gap: 1rem;
}
.landing-links {
width: 100%;
text-align: center;
}
&--title {
font-size: 5rem;
font-weight: 700;
margin: 0;
}
button{
font-size: 20px;
}
&--subtitle {
font-size: 1rem;
font-weight: 400;
margin: 0;
}
/* Animated Button*/
.landing-links {
&__button {
padding: .75rem 2rem;
background: $color-purple;
border-radius: 10px;
width: fit-content;
padding: 1rem;
height: fit-content;
}
.button-container {
position: relative;
margin: auto;
&: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;
color: $color-white;
}
}
.landing-links:hover .button-container:before {
width: calc(100% + 2rem);
}
.button-container .animated-button {
position: relative;
white-space: nowrap;
}

1
src/assets/i18n/en.json
Unescape View File

@ -5,7 +5,6 @@
"Try" : "Try it now !"
},
"HeaderPage": {
"Language" : "You can choose your language here :",
"Home" : "Home",
"Editor" : "Editor",
"Documentation" : "Documentation",

3
src/assets/i18n/fr.json
Unescape View File

@ -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",

7
src/styles.scss
Unescape View File

@ -1,6 +1,12 @@
@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;
}
@ -8,3 +14,4 @@
body {
margin: 0;
}

Write Preview
Loading…
Cancel
Save