Basic Login Screen Desktop (Just Login)

code/frontend/src/App.css

@@ -36,3 +36,4 @@
     transform: rotate(360deg);
   }
 }
+

code/frontend/src/App.tsx

@@ -1,17 +1,11 @@
 import React, { use } from 'react';
-import logo from './logo.svg';
+import Login from './Login';
-import './App.css';
-import { useState, useEffect } from 'react';
-import Footer from './Footer';
 import Header from './header';
 
-function App() {
 
+function App() {
   return (
-    <div className="App">
+      <Login/>
-      <Header/>
-      <Footer/>
-    </div>
   );
 }
 

code/frontend/src/Login.css

@@ -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;
+}

code/frontend/src/Login.tsx

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

code/frontend/src/header.css

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

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+