tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

login screen csc

Browse source
This commit is contained in:
Tykayn 2025-08-22 12:27:34 +02:00 • committed by tykayn
parent dc0f735be8
commit 9307e1852f
3 changed files with 118 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
my-workspace/projects/sae-lib/src/styles/_variables.scss
View file

@ -53,7 +53,7 @@ $shadow-color: #dedede;
// CSC project variables
$csc-light-yellow-color: #FFF3D8;
$csc-magic-color: #EEA100;
$csc-magic-color: #a86FCD;
$csc-bg-color: #F5F5F5;
$csc-title-color: #000;

51
sae-csc/src/app/pages/login/login.html
View file

@ -1,18 +1,53 @@
<div id="cscLogin">
<!-- login page CSC-->
<div class="Aligner">
<div class="Aligner-item Aligner-item--top">…</div>
<div class="Aligner-item">…</div>
<div class="Aligner-item Aligner-item--bottom">…</div>
</div>
<!-- <div class="Aligner-item Aligner-item&#45;&#45;top">…</div>-->
<div class="Aligner-item login-left">
<div class="left">
<h1 class="title">
Welcome to <br>
CSC Solution Matcher
</h1>
<div class="sub-title">
Your <span class="magic-text">
AI assistant
<i class="ri-sparkling-fill"></i>
</span> for the best solution
</div>
<p>
First time to use CSC Solution Matcher ?
<a class="external-link" href="https://example.com/ask-access">
<span class="label">
Ask an access for login
</span>
<!-- <i class="ri-open-arm-line"></i>-->
</a>
</p>
<p>
<button class="button has-gradient">
<span class="label">
Login to start |
</span>
<i class="ri-arrow-right-line"></i>
</button>
</p>
<div class="columns">
<div class="column form-login">
</div>
<div class="Aligner-item Aligner-item--bottom">
<a class="external-link" href="https://example.com/technical">
<span class="label">
Contact for a technical issue
</span>
<i class="ri-open-arm-line"></i>
</a>
</div>
</div>
<div class="column bg-login">
<div class="bg-login">
<!-- right-->
</div>
</div>
</div>

79
sae-csc/src/app/pages/login/login.scss
View file

@ -1,3 +1,6 @@
@use '../../../styles/variables-barrel' as variables;
#cscLogin {
background: #1b1d27;
color: white;
@ -6,10 +9,64 @@
height: 100vh;
padding: 121px 127px;
.bg-login {
background: url('/safran_bg.jpg') center no-repeat;
background-size: cover;
width: 600px;
.sub-title {
color: #FFF;
font-family: Barlow;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 40px;
}
p {
margin-bottom: 40px;
a {
color: var(--Dark-brand-primary-400, #337DC3);
/* Body/Body 4/Sb */
font-family: Barlow;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
&:hover {
color: white;
}
}
}
.external-link {
color: #337DC3;
width: 100%;
}
.magic-text {
color: variables.$csc-magic-color;
}
.button {
display: inline-flex;
height: 44px;
padding: 14px 16px;
align-items: center;
gap: 8px;
flex-shrink: 0;
background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%);
color: var(--Light-base-solid-white, #FFF);
border-radius: 10px;
border: 0;
/* Body/Body 3/Sb */
font-family: Barlow;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
}
@ -20,7 +77,19 @@
}
.Aligner-item {
max-width: 50%;
flex-direction: row;
}
.login-left {
padding-right: 100px;
}
.bg-login {
background: url(/safran_bg.jpg) center no-repeat;
background-size: cover;
width: 600px;
height: 100%;
border-radius: 8px;
}
.Aligner-item--top {