mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-06 14:58:48 +00:00
Basic Login Screen Desktop (Just Login)
This commit is contained in:
Ilay Eble
Luisa Bellitto
parent
ca8b895e9d
commit
e7c3b268db
7 changed files with 210 additions and 10 deletions
BIN
code/frontend/public/assets/images/BirdLogin.jpg
Normal file
BIN
code/frontend/public/assets/images/BirdLogin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
|
|
@ -36,3 +36,4 @@
|
|||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,11 @@
|
|||
import React, { use } from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import { useState, useEffect } from 'react';
|
||||
import Footer from './Footer';
|
||||
import Login from './Login';
|
||||
import Header from './header';
|
||||
|
||||
|
||||
function App() {
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Header/>
|
||||
<Footer/>
|
||||
</div>
|
||||
<Login/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
163
code/frontend/src/Login.css
Normal file
163
code/frontend/src/Login.css
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
:root {
|
||||
--Rotkehlchen-gray: #e7ecf2;
|
||||
--Rotkehlchen-brown1: #a28d7a;
|
||||
--Rotkehlchen-orange-default: #e79a0e;
|
||||
--Rotkehlchen-gray-default: #E7ECF2;
|
||||
--Rotkehlchen-brown-middle: #7F6D6D;
|
||||
--Rotkehlchen-yellow-default: #FED640;
|
||||
--Rotkehlchen-yellow-hover: #EAC22A;
|
||||
}
|
||||
|
||||
.login-display{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh; /* Full viewport height */
|
||||
width: 100vw; /* Full viewport width */
|
||||
position: absolute; /* Change from absolute to relative */
|
||||
background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 300px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.login-login{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 4px;
|
||||
background: rgba(13, 10, 56, 0.71);
|
||||
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
width: 50vw;
|
||||
height: 60vh;
|
||||
min-height: 300px;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
display: flex;
|
||||
padding: 8px 40px 40px 40px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
color: var(--Rotkehlchen-gray-default);
|
||||
text-align: center;
|
||||
|
||||
/* Body-L */
|
||||
font-family: Inter;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 40px; /* 166.667% */
|
||||
}
|
||||
|
||||
.login-button{
|
||||
display: inline-flex;
|
||||
padding: 9px 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
background: var(--Rotkehlchen-yellow-default);
|
||||
}
|
||||
|
||||
.login-button:hover{
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
background: var(--Rotkehlchen-yellow-hover);
|
||||
}
|
||||
.login-button:active{
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
background: var(--Rotkehlchen-orange-default);
|
||||
}
|
||||
|
||||
.login-div-input{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--Rotkehlchen-brown-middle);
|
||||
background: #FFF;
|
||||
width:100%;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.login-input{
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
border: none;
|
||||
color: var(--Rotkehlchen-brown-middle);
|
||||
|
||||
/* M3/body/large */
|
||||
font-family: var(--Static-Body-Large-Font, Roboto);
|
||||
font-size: var(--Static-Body-Large-Size, 16px);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
|
||||
letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
|
||||
}
|
||||
|
||||
.login-icon{
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
aspect-ratio: 1/1;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.login-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 8px;
|
||||
border: 5px solid var(--Rotkehlchen-gray-default);
|
||||
background-image: url("../public/assets/images/BirdLogin.jpg");
|
||||
background-size: cover;
|
||||
background-position: 75%;
|
||||
}
|
||||
|
||||
.login-part{
|
||||
width: 45%;
|
||||
height: 90%;
|
||||
padding:3%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 1%;
|
||||
}
|
||||
|
||||
.login-signup{
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
|
||||
/* Body-M */
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 17px; /* 106.25% */
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
|
||||
.login-link{
|
||||
color: var(--Rotkehlchen-orange-default, #E79A0E);
|
||||
|
||||
/* Body-M */
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
35
code/frontend/src/Login.tsx
Normal file
35
code/frontend/src/Login.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import React, { use } from 'react';
|
||||
import "./Login.css";
|
||||
import { useState, useEffect } from 'react';
|
||||
import Header from './header';
|
||||
|
||||
|
||||
function Login(){
|
||||
return(
|
||||
<div className='login-display'>
|
||||
<Header></Header>
|
||||
<div className="login-login">
|
||||
<div className='login-part'>
|
||||
<div className='login-image'></div>
|
||||
</div>
|
||||
<div className='login-part' >
|
||||
<div className='login-text'>
|
||||
Login
|
||||
</div>
|
||||
<div className='login-div-input'>
|
||||
<img className= 'login-icon' src='\assets\icons\username_orange.svg'></img>
|
||||
<input type='text' className='login-input' placeholder='Username'></input>
|
||||
</div>
|
||||
|
||||
<div className='login-div-input'>
|
||||
<img className= 'login-icon' src='\assets\icons\password_orange.svg'></img>
|
||||
<input type='password' className='login-input'placeholder='Password'></input>
|
||||
</div>
|
||||
<input type='button' className='login-button' value='Login'></input>
|
||||
<div className='login-signup'>Don't have an account yet? Click <a href='' className='login-link'>here</a> to sign up</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Login
|
||||
|
|
@ -7,12 +7,15 @@
|
|||
.base-header {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
height: 76px;
|
||||
height: 50px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 3px solid var(--Rotkehlchen-brown1);
|
||||
background: var(--Rotkehlchen-gray);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.base-header-title {
|
||||
display: flex;
|
||||
|
|
|
|||
4
yarn.lock
Normal file
4
yarn.lock
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue