Skip to content

Commit c5f3761

Browse files
remotesynthremotesynth
committed
Home page layout
1 parent d9b49a0 commit c5f3761

File tree

4 files changed

+146
-75
lines changed

4 files changed

+146
-75
lines changed

‎frontend/public/Quiz-Show-Logo.png‎

112 KB
Loading

‎frontend/src/components/HomePage.js‎

Lines changed: 88 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import MainLayout from './MainLayout';
12
import React, { useState, useEffect } from 'react';
23
import {
34
TextField,
@@ -14,6 +15,7 @@ import {
1415
} from '@mui/material';
1516
import { useNavigate } from 'react-router-dom';
1617
import QRCode from 'react-qr-code';
18+
import { purple } from '@mui/material/colors';
1719

1820
function HomePage() {
1921
const [quizID, setQuizID] = useState('');
@@ -73,84 +75,92 @@ function HomePage() {
7375
const pageURL = 'https://demo.localstack.cloud/';
7476

7577
return (
76-
<Container maxWidth="sm">
77-
<Typography variant="h4" gutterBottom>
78-
Enter Quiz Details
79-
</Typography>
80-
81-
{errorMessage && (
82-
<Alert severity="error" sx={{ marginBottom: 2 }}>
83-
{errorMessage}
84-
</Alert>
85-
)}
86-
87-
{publicQuizzes.length > 0 ? (
88-
<FormControl fullWidth margin="normal">
89-
<InputLabel id="public-quiz-label">Select a Public Quiz</InputLabel>
90-
<Select
91-
labelId="public-quiz-label"
92-
value={selectedQuizID}
93-
label="Select a Public Quiz"
94-
onChange={handleQuizSelect}
95-
>
96-
{publicQuizzes.map((quiz) => (
97-
<MenuItem key={quiz.QuizID} value={quiz.QuizID}>
98-
{quiz.Title}
99-
</MenuItem>
100-
))}
101-
</Select>
102-
</FormControl>
103-
) : (
104-
<Typography variant="body1" gutterBottom>
105-
No public quizzes are available.
78+
<MainLayout>
79+
<Container maxWidth="sm" className="main-quiz-container">
80+
<Typography variant="h4" gutterBottom>
81+
Welcome
10682
</Typography>
107-
)}
10883

109-
<TextField
110-
label="Quiz ID"
111-
fullWidth
112-
margin="normal"
113-
value={quizID}
114-
onChange={handleQuizIDChange}
115-
disabled={selectedQuizID !== ''}
116-
/>
117-
<TextField
118-
label="Username"
119-
fullWidth
120-
margin="normal"
121-
value={username}
122-
onChange={(e) => setUsername(e.target.value)}
123-
/>
124-
<TextField
125-
label="Email (Optional)"
126-
fullWidth
127-
margin="normal"
128-
value={email}
129-
onChange={(e) => setEmail(e.target.value)}
130-
/>
84+
{errorMessage && (
85+
<Alert severity="error" sx={{ marginBottom: 2 }}>
86+
{errorMessage}
87+
</Alert>
88+
)}
13189

132-
<Stack spacing={2} marginTop={4}>
133-
<Button
134-
variant="contained"
135-
color="primary"
136-
onClick={handleStart}
137-
disabled={!quizID || !username}
138-
>
139-
Start Playing
140-
</Button>
141-
<Button
142-
variant="contained"
143-
color="secondary"
144-
onClick={handleCreateQuiz}
145-
>
146-
Create a New Quiz
147-
</Button>
148-
</Stack>
90+
{publicQuizzes.length > 0 ? (
91+
<FormControl fullWidth margin="normal">
92+
<InputLabel id="public-quiz-label">Select a Public Quiz</InputLabel>
93+
<Select
94+
labelId="public-quiz-label"
95+
value={selectedQuizID}
96+
label="Select a Public Quiz"
97+
onChange={handleQuizSelect}
98+
>
99+
{publicQuizzes.map((quiz) => (
100+
<MenuItem key={quiz.QuizID} value={quiz.QuizID}>
101+
{quiz.Title}
102+
</MenuItem>
103+
))}
104+
</Select>
105+
</FormControl>
106+
) : (
107+
<Typography variant="body1" gutterBottom>
108+
No public quizzes are available.
109+
</Typography>
110+
)}
149111

150-
<Box sx={{ marginTop: 4, textAlign: 'center' }}>
151-
<Typography variant="h6" gutterBottom>
152-
Share this Page
153-
</Typography>
112+
<TextField
113+
label="Quiz ID"
114+
fullWidth
115+
margin="normal"
116+
value={quizID}
117+
onChange={handleQuizIDChange}
118+
disabled={selectedQuizID !== ''}
119+
/>
120+
<TextField
121+
label="Username"
122+
fullWidth
123+
margin="normal"
124+
value={username}
125+
onChange={(e) => setUsername(e.target.value)}
126+
/>
127+
<TextField
128+
label="Email (Optional)"
129+
fullWidth
130+
margin="normal"
131+
value={email}
132+
onChange={(e) => setEmail(e.target.value)}
133+
/>
134+
135+
<Stack spacing={2}>
136+
<Button
137+
variant="contained"
138+
style={{ backgroundColor: purple[500], color: 'white' }}
139+
onClick={handleStart}
140+
disabled={!quizID || !username}
141+
>
142+
Start Playing
143+
</Button>
144+
<Button
145+
variant="outlined"
146+
color="secondary"
147+
onClick={handleCreateQuiz}
148+
>
149+
Create a New Quiz
150+
</Button>
151+
</Stack>
152+
</Container>
153+
<Box
154+
sx={{
155+
marginTop: 4,
156+
textAlign: 'center',
157+
backgroundColor: 'white',
158+
width: 166,
159+
marginLeft: 'auto',
160+
marginRight: 'auto',
161+
borderRadius: '4px',
162+
}}
163+
>
154164
<Box
155165
sx={{
156166
background: 'white',
@@ -160,8 +170,11 @@ function HomePage() {
160170
>
161171
<QRCode value={pageURL} size={128} />
162172
</Box>
173+
<Typography variant="h6" gutterBottom>
174+
Share this Page
175+
</Typography>
163176
</Box>
164-
</Container>
177+
</MainLayout>
165178
);
166179
}
167180

‎frontend/src/components/MainLayout.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { Typography, Container, Box } from '@mui/material';
3+
4+
function MainLayout({ children }) {
5+
return (
6+
<Box>
7+
<img
8+
src="/Quiz-Show-Logo.png"
9+
alt="AWSome Quiz Show"
10+
className="main-header-img"
11+
/>
12+
<Container>{children}</Container>
13+
<Box component="footer" sx={{ p: 2, mt: 'auto', textAlign: 'center' }}>
14+
<Typography variant="body2" color="textSecondary">
15+
&copy; 2023 My Website
16+
</Typography>
17+
</Box>
18+
</Box>
19+
);
20+
}
21+
22+
export default MainLayout;

‎frontend/src/index.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,45 @@ body {
55
sans-serif;
66
-webkit-font-smoothing: antialiased;
77
-moz-osx-font-smoothing: grayscale;
8+
background: var(--gray-950, #030712);
89
}
910

1011
code {
1112
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
1213
monospace;
1314
}
15+
16+
.main-header-img {
17+
width: 100%;
18+
max-width: 482px;
19+
height: 100%;
20+
margin: 16px auto;
21+
display: block;
22+
}
23+
24+
.main-quiz-container {
25+
border-radius: var(--borderRadius, 4px);
26+
background: var(--background-paper-elevation-2, #EAEAF0);
27+
28+
/* elevation/2 */
29+
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
30+
display: flex;
31+
width: var(--sm, 600px);
32+
padding: var(--3, 24px) var(--2, 16px);
33+
flex-direction: column;
34+
align-items: center;
35+
gap: var(--3, 12px);
36+
}
37+
38+
.button {
39+
border-radius: var(--borderRadius, 4px);
40+
border: var(--none, 1px) solid var(--primary-_states-outlinedBorder, rgba(77, 13, 207, 0.50));
41+
}
42+
43+
.purple-button {
44+
border-radius: var(--borderRadius, 4px);
45+
background: var(--primary-main, #4D0DCF);
46+
47+
/* elevation/2 */
48+
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
49+
}

0 commit comments

Comments
 (0)