diff --git a/package-lock.json b/package-lock.json
index 96e37c820e5ad19451f3d527f68a1b5017699b4a..0e5c4b5e9c56e75bdc5aa64d05d558448657f317 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4058,11 +4058,11 @@
}
},
"node_modules/braces": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
- "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+ "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"dependencies": {
- "fill-range": "^7.0.1"
+ "fill-range": "^7.1.1"
},
"engines": {
"node": ">=8"
@@ -6329,9 +6329,9 @@
}
},
"node_modules/fill-range": {
- "version": "7.0.1",
- "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
- "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+ "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dependencies": {
"to-regex-range": "^5.0.1"
},
@@ -12241,9 +12241,9 @@
}
},
"node_modules/ws": {
- "version": "8.17.0",
- "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
- "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+ "version": "8.17.1",
+ "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+ "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
"engines": {
"node": ">=10.0.0"
},
diff --git a/pages/index.tsx b/pages/index.tsx
index eac2fa426fc855ca58b79385d7e044397558012c..8bf0d461b743c944b5ee77631fd925cd2ecac241 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,10 +1,25 @@
-import Button from '@mui/material/Button'
-import Stack from '@mui/material/Stack'
-import Item from '@mui/material/ListItem'
-import { styled, alpha } from '@mui/material/styles'
+import * as React from 'react'
+import { experimentalStyled as styled, alpha } from '@mui/material/styles'
+import AppBar from '@mui/material/AppBar'
+import Box from '@mui/material/Box'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
import InputBase from '@mui/material/InputBase'
import SearchIcon from '@mui/icons-material/Search'
+import Paper from '@mui/material/Paper'
import Grid from '@mui/material/Grid'
+import Avatar from '@mui/material/Avatar'
+import logo from 'src/components/img/logo-fdo-scal.svg'
+
+const info = ('This is the FDO Manager. The hardware and infrastructure for this test instance are provided by GWDG. IndiScale is responsible for the architecture and implementation.')
+
+const Item = styled(Paper)(({ theme }) => ({
+ backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+ ...theme.typography.body2,
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary
+}))
const Search = styled('div')(({ theme }) => ({
position: 'relative',
@@ -13,11 +28,10 @@ const Search = styled('div')(({ theme }) => ({
'&:hover': {
backgroundColor: alpha(theme.palette.common.white, 0.25)
},
- marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
- marginLeft: theme.spacing(3),
+ marginLeft: theme.spacing(1),
width: 'auto'
}
}))
@@ -34,37 +48,60 @@ const SearchIconWrapper = styled('div')(({ theme }) => ({
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: 'inherit',
+ width: '100%',
'& .MuiInputBase-input': {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
- width: '100%',
- [theme.breakpoints.up('md')]: {
- width: '20ch'
+ [theme.breakpoints.up('sm')]: {
+ width: '12ch',
+ '&:focus': {
+ width: '20ch'
+ }
}
}
}))
export default function Index () {
- const info = ('This is the FDO Manager. The hardware and infrastructure for this test instance are provided by GWDG. IndiScale is responsible for the architecture and implementation.')
+
return (
- <Grid container direction="column" justifyContent="center" alignItems="center">
-
- <Stack direction="column" spacing={2} width="350px">
- <Item><h1>FDO-Manager</h1></Item>
- <Item>{info}</Item>
- <Item><Button variant="contained" >Create FDO</Button></Item>
- <Item><Search>
- <SearchIconWrapper>
- <SearchIcon />
- </SearchIconWrapper>
- <StyledInputBase
- placeholder="Search…" inputProps={{ 'aria-label': 'search' }}/>
- </Search></Item>
+ <Box sx={{ flexGrow: 1 }}>
+ <AppBar position="static">
+ <Toolbar>
+ <Avatar alt="FDO Logo" src="img/" />
+ <Typography
+ variant="h6"
+ noWrap
+ component="div"
+ sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
+ >
+ FDO MANAGER
+ </Typography>
+ <Search>
+ <SearchIconWrapper>
+ <SearchIcon />
+ </SearchIconWrapper>
+ <StyledInputBase
+ placeholder="Search…"
+ inputProps={{ 'aria-label': 'search' }}
+ />
+ </Search>
+ </Toolbar>
+ </AppBar>
- </Stack>
+ <Grid container spacing={2} columns={16} justifyContent="center" alignItems="center" marginTop={2}>
+ <Grid item xs={6}>
+ <Item><h2>Projektinfo mit Atomgrafik</h2>{info}<br/>{info}<br/></Item>
+ </Grid>
+ <Grid item xs={6}>
+ <Item>{info}</Item>
+ </Grid>
+ <Grid item xs={6}>
+ <Item>{info}</Item>
+ </Grid>
</Grid>
+ </Box>
)
}
diff --git a/src/components/img/logo-fdo-img b/src/components/img/logo-fdo-img
new file mode 100644
index 0000000000000000000000000000000000000000..a7724eabfa1bac9db5db2852d343aec293f0b219
Binary files /dev/null and b/src/components/img/logo-fdo-img differ
diff --git a/src/components/img/logo-fdo-scal b/src/components/img/logo-fdo-scal
new file mode 100644
index 0000000000000000000000000000000000000000..7e34f10d39dae2ed3919bf20ca73cae18d1d82ce
--- /dev/null
+++ b/src/components/img/logo-fdo-scal
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 169 172">
+ <defs>
+ <style>
+ .cls-1 {
+ fill: #1976d2;
+ stroke-width: 0px;
+ }
+ </style>
+ </defs>
+ <g id="FDO_Logo" data-name="FDO Logo">
+ <g>
+ <path class="cls-1" d="M56.0192501,86.9711941c0-16.1425178,13.2075127-29.3500305,29.3500305-29.3500305,8.071264,0,15.4087665,2.935,20.5450254,8.8050051l10.2725178-10.2725127c-7.3375127-8.0712589-18.3437716-13.2075127-30.817533-13.2075127-24.2137767,0-44.0250457,19.811269-44.0250457,44.0250457,0,12.4737665,5.1362538,23.4800254,13.2075127,31.5512792l10.2725076-10.2725076c-5.1362538-5.87-8.8050051-13.2075076-8.8050152-21.2787665Z"/>
+ <path class="cls-1" d="M95.6417881,76.6986865c-2.2012436-2.9350051-5.87-4.4025076-10.2725076-4.4025076-8.0712589,0-14.6750152,6.6037563-14.6750152,14.6750152,0,4.4025076,1.4675025,8.0712589,4.4025076,10.2725076l10.2725076-10.2725076,10.2725076-10.2725076Z"/>
+ <path class="cls-1" d="M33.2729759,139.0675038l10.2725127-10.2725076c-10.2725127-11.0062589-16.876269-25.6812843-16.876269-41.8238021,0-32.2850356,26.4150254-58.7000609,58.7000609-58.7000609,16.1425178,0,30.8175432,6.6037563,41.8238021,16.876269l10.2725076-10.2725127c-13.2075229-13.2075133-31.5512843-21.2787709-52.0963097-21.2787709C45.0129861,13.5961185,11.9942043,46.6149022,11.9942043,86.9711941c0,20.5450254,8.0712589,38.8887868,21.2787716,52.0963097Z"/>
+ </g>
+ <path class="cls-1" d="M71.1245395,141.8207726l18.4481862,1.5513049-2.5787866,12.2283671c-.5701653,1.7221042-2.1562343,2.9608671-3.5686453,2.7871988l-9.180671-1.1287526c-1.8089282.1360249-3.3573742-1.8465512-3.1837211-3.2589622,0,0,.0636428-12.179156.0636377-12.179156Z"/>
+ <path class="cls-1" d="M119.744003,132.1068015l12.5780845-13.5843333,8.04997,9.5593381c1.0062488,1.5093681,1.0062488,3.5218657,0,4.5281043l-6.5406019,6.5405917c-1.0062488,1.5093681-3.5218657,1.5093681-4.5281043.5031295,0,0-9.5593483-7.5468405-9.5593483-7.5468304Z"/>
+ <path class="cls-1" d="M142.7870343,86.5680994l-3.3362634-18.2102036,12.4768441-.7150924c1.8113292.0990632,3.422365,1.3051781,3.6248153,2.7137535l1.3159828,9.1557093c.6052143,1.710099-.9024242,3.7238887-2.3109894,3.9263491,0,0-11.7703894,3.1294892-11.7703894,3.1294841Z"/>
+ <circle class="cls-1" cx="85.3692805" cy="86.9711941" r="15.0172039"/>
+ <path class="cls-1" d="M129.1380256,87.2240713c-.0000102,24.2261278-19.7567421,44.1615844-43.7666594,44.1615743-11.5248679,0-22.4053521-5.1574409-30.8196187-12.8631773l-11.0062589,10.2725178c11.0071542,11.1241133,26.445954,17.8431958,42.0247161,17.8432059,32.2019149.0000102,58.7000711-26.7372427,58.7000813-59.2297494.0000102-15.6890725-6.0902139-31.1599811-17.0772136-42.261048l-11.0062589,11.0062563c8.0724238,8.2577921,12.951212,19.4636882,12.951212,31.0704204Z"/>
+ </g>
+</svg>
\ No newline at end of file