cami/Bachelorthesis_Code
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Wiki Activity

Merge pull request 'refactor/frontend-design' (#13) from refactor/frontend-design into main

Browse source 
Reviewed-on: #13
This commit is contained in:
cami 2021-06-07 03:04:23 +00:00
commit 2ed8bcb3fa
15 changed files with 1926 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1854
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
frontend/package.json
View file

@ -4,9 +4,11 @@
"private": true,
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@react-hook/mouse-position": "^4.1.0",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"npm": "^7.16.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",

8
frontend/src/App.css
View file

@ -5,6 +5,12 @@
font-family: "PT Sans", sans-serif;
}
:root {
--primary: rgb(41, 63, 87);
--secondary: #fff;
--third: rgb(171, 183, 183);
}
.home,
.about,
.products,
@ -28,7 +34,7 @@
background-position: center;
background-size: fill;
background-repeat: no-repeat;
color: #fff;
color: var(--primary);
font-size: 100px;
}

6
frontend/src/App.js
View file

@ -3,9 +3,10 @@ import Navbar from "./components/Navbar";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/pages/Home";
import Products from "./components/pages/Products";
import SignUp from "./components/pages/SignUp";
import Ueber from "./components/pages/Ueber";
import Lizenzen from "./components/pages/lizenzen";
import Privacy from "./components/pages/Privacy";
function App() {
return (
@ -15,8 +16,9 @@ function App() {
<Switch>
<Route path="/" exact component={Home} />
<Route path="/services" component={Ueber} />
<Route path="/products" component={Products} />
<Route path="/sign-up" component={SignUp} />
<Route path="/lizenzen" component={Lizenzen} />
<Route path="/privacy" component={Privacy} />
</Switch>
</Router>
</>

2
frontend/src/Footer.css
View file

@ -1,5 +1,5 @@
.footer-container {
background-color: #6C7A89;
background-color: rgb(41, 63, 87);
padding: 4rem 0 2rem 0;
display: flex;
flex-direction: column;

8
frontend/src/Footer.js
View file

@ -15,15 +15,15 @@ function Footer() {
</div>
<div className="footer-link-items">
<h2>Kontakt</h2>
<Link to="/">Matrix</Link>
<Link to="/">E-Mail</Link>
<Link to="/">Mastodon</Link>
<a href="mailto:marco.camenzind@students.ffhs.ch">E-Mail</a>
<a href="https://keys.openpgp.org/vks/v1/by-fingerprint/F281A7A622AF5B9E7742C0FB635DE2A22BDC3C76">GPG-Key</a>
</div>
</div>
<div className="footer-link-wrapper">
<div className="footer-link-items">
<h2>Rechtliches</h2>
<Link to="/">Datenschutz</Link>
<Link to="/privacy">Datenschutz</Link>
<Link to="/lizenzen">Lizenzen und Bildnachweise</Link>
</div>
</div>
</div>

12
frontend/src/components/Button.css
View file

@ -1,7 +1,3 @@
:root {
--primary: #fff;
}
.btn {
padding: 8px 20px;
border-radius: 2px;
@ -12,13 +8,13 @@
.btn--primary {
background-color: var(--primary);
color: #BDC3C7;
color: var(--secondary);
border: 1px solid var(--primary);
}
.btn--outline {
background-color: transparent;
color: #fff;
color: var(--primary);
padding: 8px 20px;
border: 1px solid var(--primary);
transition: all 0.3s ease-out;
@ -37,7 +33,7 @@
.btn--large:hover,
.btn--medium:hover {
transition: all 0.3s ease-out;
background: #fff;
color: #BDC3C7;
background: var(--primary);
color: var(--secondary);
transition: 250ms;
}

19
frontend/src/components/HeroSection.css
View file

@ -7,7 +7,7 @@ video {
}
.hero-container {
background: url("../images/img-home.jpg") center center/cover no-repeat;
background: url("../images/fingerprint_biometrics.jpg") center center/cover no-repeat;
height: 100vh;
width: 100%;
display: flex;
@ -19,14 +19,14 @@ video {
}
.hero-container > h1 {
color: #fff;
color: var(--primary);
font-size: 100px;
margin-top: -100px;
}
.hero-container > p {
margin-top: 8px;
color: #fff;
color: var(--secondary);
font-size: 32px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
@ -34,12 +34,23 @@ video {
.hero-btns {
margin-top: 32px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.hero-btns .btn {
margin: 6px;
align-items: center;
}
.hero-btns .btn:hover{
background-color: var(--secondary);
color: var(--primary);
border:none;
}
.fa-play-circle {
margin-left: 4px;
}
@ -69,4 +80,4 @@ video {
.btn {
width: 100%;
}
}
}

13
frontend/src/components/HeroSection.js
View file

@ -11,17 +11,24 @@ function HeroSection() {
<div className="hero-btns">
<Button
className="btns"
buttonStyle="btn--outline"
buttonStyle="btn--primary"
buttonSize="btn--large"
>
GET STARTED
Einloggen (wenn du schon einmal mitgemacht hast)
</Button>
<Button
className="btns"
buttonStyle="btn--primary"
buttonSize="btn--large"
>
WATCH TRAILER <i className="far fa-play-circle" />
Registrieren (falls du das erste Mal hier bist)
</Button>
<Button
className="btns"
buttonStyle="btn--primary"
buttonSize="btn--large"
>
Anleitung
</Button>
</div>
</div>

22
frontend/src/components/Navbar.css
View file

@ -1,5 +1,5 @@
.navbar {
background: linear-gradient(90deg, #6c7a89 0%, #6c7a89 100%);
background-color: var(--primary);
height: 80px;
display: flex;
justify-content: center;
@ -19,7 +19,7 @@
}
.navbar-logo {
color: #fff;
color: var(--secondary);
justify-self: start;
margin-left: 20px;
cursor: pointer;
@ -50,7 +50,7 @@
}
.nav-links {
color: #fff;
color: var(--secondary);
display: flex;
align-items: center;
text-decoration: none;
@ -59,12 +59,12 @@
}
.nav-links:hover {
border-bottom: 4px solid #fff;
border-bottom: 4px solid var(--secondary);
transition: all 0.2s ease-out;
}
.fa-bars {
color: #fff;
color: var(--secondary);
}
.nav-links-mobile {
@ -93,7 +93,7 @@
}
.nav-menu.active {
background: #abb7b7;
background: var(--primary);
left: 0;
opacity: 1;
transition: all 0.5s ease;
@ -108,7 +108,7 @@
}
.nav-links:hover {
background-color: #fff;
background-color: var(--secondary);
color: #000;
border-radius: 0;
}
@ -131,7 +131,7 @@
}
.fa-times {
color: #fff;
color: var(--secondary);
font-size: 2rem;
}
@ -144,15 +144,15 @@
text-decoration: none;
font-size: 1.5rem;
background-color: transparent;
color: #fff;
color: var(--primary);
padding: 14px 20px;
border: 1px solid #fff;
transition: all 0.3s ease-out;
}
.nav-links-mobile:hover {
background: #fff;
color: #6c7a89;
background: var(--primary);
color: var(--secondary);
transition: 250ms;
}
}

1
frontend/src/components/pages/Home.js
View file

@ -8,7 +8,6 @@ function Home() {
return (
<>
<HeroSection />
<Cards />
<Footer />
</>
);

6
frontend/src/components/pages/Products.js → frontend/src/components/pages/Privacy.js
View file

@ -2,11 +2,11 @@ import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Products() {
export default function SignUp() {
return (
<>
<h1 className="products">PRODUCTS</h1>
<h1 className="sign-up">SIGN UP</h1>
<Footer />
</>
);
}
}

24
frontend/src/components/pages/lizenzen.js Normal file
View file

@ -0,0 +1,24 @@
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Lizenzen() {
return (
<>
<h1 className="pages_title">Lizenzen und Bildnachweise</h1>
<h2 className="pages_subtitle">Öffentliche Libraries</h2>
<h2>Bildnachweise</h2>
<div>
<ul>
<li>
Originalbild für die Startseite:{" "}
<a href="https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/">
https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/
</a>
</li>
</ul>
</div>
<Footer />
</>
);
}

BIN
frontend/src/images/fingerprint_biometrics.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 183 KiB

1
start.sh
View file

@ -1,2 +1,3 @@
podman-compose down
podman-compose build
podman-compose up