Skip to content

Commit eca09f1

Browse files
javanangjavanang
committed
merge dev
2 parents 12ac752 + 262d750 commit eca09f1

File tree

7 files changed

+220
-4
lines changed

7 files changed

+220
-4
lines changed

‎ksqLight/package-lock.json

Lines changed: 37 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ksqLight/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"react-dom": "^18.2.0",
3030
"react-router-dom": "^6.3.0",
3131
"react-scripts": "5.0.1",
32+
"sass": "^1.54.0",
3233
"wait-on": "^6.0.1",
3334
"web-vitals": "^2.1.4"
3435
},

‎ksqLight/src/App.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { QueryPage } from "./components/QueryPage.js";
99
import { CssBaseline, ThemeProvider, createTheme, Box, Grid } from "@mui/material";
1010
import { MetricCard } from "./components/MetricCard.js";
1111
import { green, purple } from '@mui/material/colors';
12+
import { LivenessCard } from "./components/LivenessCard.js";
13+
import { Welcomepage } from "./components/Welcomepage.js";
1214

1315
const theme = createTheme({
1416
palette: {
@@ -18,7 +20,7 @@ const theme = createTheme({
1820
secondary: {
1921
main: green[500],
2022
},
21-
background:{
23+
background: {
2224
default: "rgb(249, 250, 251)",
2325
},
2426
mode: 'light',
@@ -59,7 +61,7 @@ function App() {
5961
// <Route path="/queryPage" element={<QueryPage/>}/>
6062
// </Routes>
6163
// </BrowserRouter>
62-
64+
6365
const [showQueries, setShowQueries] = useState(true);
6466
const [showMessages, setShowMessages] = useState(false);
6567
const [showErrors, setShowErrors] = useState(false);
@@ -76,6 +78,7 @@ function App() {
7678

7779

7880
return (
81+
// <Welcomepage></Welcomepage>
7982
<BrowserRouter>
8083
<ThemeProvider theme={theme}>
8184
<CssBaseline />
@@ -143,7 +146,7 @@ function App() {
143146
<MetricCard type="errorQueries" index={3} />
144147
</Grid>
145148
</Grid>
146-
<Grid container justifyContent="center" alignItems="center" sx={{pr: "2em"}}>
149+
<Grid container justifyContent="center" alignItems="center" sx={{ pr: "2em" }}>
147150
<Routes>
148151
<Route path="/" element={<Homepage showQueries={showQueries} showMessages={showMessages} showErrors={showErrors} metricsState={metricsState} />} />
149152
<Route path="/queryPage" element={<QueryPage />} />

‎ksqLight/src/components/Welcomepage.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from "react";
2+
import { Typography, createTheme, Box, Fade, Button } from "@mui/material";
3+
import { useNavigate } from "react-router-dom";
4+
5+
export const Welcomepage = () => {
6+
// const navigate = useNavigate();
7+
8+
// const navHome = () => {
9+
// navigate("/dashboard");
10+
// };
11+
12+
return (
13+
<Box>
14+
<Box className="diagonal-hero-bg">
15+
<Box className="stars">
16+
<Box className="small"></Box>
17+
<Box className="medium"></Box>
18+
<Box className="big"></Box>
19+
</Box>
20+
</Box>
21+
<Box sx={{
22+
display: "flex",
23+
height: "100vh",
24+
flexDirection: "column",
25+
alignItems: "center",
26+
justifyContent: "center"
27+
}}>
28+
{/* <Fade in={true} timeout={2000} >
29+
<Typography
30+
sx={{
31+
fontSize: "75px",
32+
color: "#f3e5f5"
33+
}}
34+
>
35+
Welcome
36+
</Typography>
37+
</Fade> */}
38+
<Fade in={true} timeout={2000} >
39+
<Typography
40+
sx={{
41+
fontSize: "165px",
42+
color: "#f3e5f5"
43+
}}
44+
>ksqLight.</Typography>
45+
</Fade>
46+
<Fade in={true} timeout={2000} style={{ transitionDelay: `1000ms` }}>
47+
<Button variant="outlined" sx={{ color: "#f3e5f5" }}>Get Started</Button>
48+
{/* <Typography
49+
sx={{
50+
fontSize: "25px",
51+
color: "#f3e5f5"
52+
}}
53+
>to get started, enter your prometheus URL below</Typography> */}
54+
</Fade>
55+
</Box>
56+
</Box>
57+
58+
59+
);
60+
};
61+

‎ksqLight/src/index.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,5 @@ code {
3838
.header-viewport {
3939
height: calc(100vh - 64px);
4040
}
41-
}
41+
}
42+

‎ksqLight/src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4+
import './style.scss';
45
import App from './App';
56

67
const root = ReactDOM.createRoot(document.getElementById('root'));

‎ksqLight/src/style.scss

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
2+
.hero {
3+
display: inline-block;
4+
width: 100%;
5+
height: 100vh;
6+
position: relative;
7+
8+
}
9+
.diagonal-hero-bg {
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
width: 100%;
14+
height: 100%;
15+
background: #2b5876; /* fallback for old browsers */
16+
background: -webkit-linear-gradient(to right, #4e4376, #2b5876); /* Chrome 10-25, Safari 5.1-6 */
17+
background: linear-gradient(to right, #4e4376, #2b5876); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
18+
19+
z-index: -1;
20+
// clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
21+
}
22+
23+
// creates randomized star sizes
24+
@function stars($n) {
25+
$value: '#{random(2000)}px #{random(2000)}px #767676';
26+
@for $i from 2 through $n {
27+
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #767676';
28+
}
29+
@return unquote($value);
30+
}
31+
32+
// store random stars
33+
$stars-small: stars(700);
34+
$stars-medium: stars(200);
35+
$stars-big: stars(100);
36+
37+
38+
.stars {
39+
z-index: -1;
40+
overflow: hidden;
41+
top: 0;
42+
left: 0;
43+
width: 100%;
44+
height: 95vh;
45+
transition: opacity 1s ease-in-out;
46+
}
47+
48+
.stars > .small {
49+
width: 1px;
50+
height: 1px;
51+
background: transparent;
52+
box-shadow: $stars-small;
53+
animation: starsAnimation 50s linear infinite;
54+
55+
&:after {
56+
content: " ";
57+
position: absolute;
58+
top: 2000px;
59+
width: 1px;
60+
height: 1px;
61+
background: transparent;
62+
box-shadow: $stars-small;
63+
}
64+
}
65+
66+
.stars > .medium {
67+
width: 2px;
68+
height: 2px;
69+
background: transparent;
70+
box-shadow: $stars-medium;
71+
animation: starsAnimation 100s linear infinite;
72+
73+
&:after {
74+
content: " ";
75+
position: absolute;
76+
top: 2000px;
77+
width: 2px;
78+
height: 2px;
79+
background: transparent;
80+
box-shadow: $stars-medium;
81+
}
82+
}
83+
84+
.stars > .big {
85+
width: 3px;
86+
height: 3px;
87+
background: transparent;
88+
box-shadow: $stars-big;
89+
border-radius: 100%;
90+
animation: starsAnimation 150s linear infinite;
91+
92+
&:after {
93+
content: " ";
94+
position: absolute;
95+
top: 2000px;
96+
width: 3px;
97+
height: 3px;
98+
background: transparent;
99+
box-shadow: $stars-big;
100+
border-radius: 100%;
101+
}
102+
}
103+
104+
// swap from/to values to reverse animation
105+
@keyframes starsAnimation {
106+
from {
107+
transform: translateY(-2000px);
108+
}
109+
to {
110+
transform: translateY(0px);
111+
}
112+
}

0 commit comments

Comments
 (0)